관리-도구

편집 파일: KirkiSliderForm.js

import { useRef } from "react";

const KirkiSliderForm = (props) => {
  const { control, customizerSetting, choices } = props;

let trigger = "";

control.updateComponentState = (val) => {
    if ("slider" === trigger) {
      valueRef.current.textContent = val;
    } else if ("input" === trigger) {
      sliderRef.current.value = val;
    } else if ("reset" === trigger) {
      valueRef.current.textContent = val;
      sliderRef.current.value = val;
    }
  };

const handleChange = (e) => {
    trigger = "range" === e.target.type ? "slider" : "input";

let value = e.target.value;

if (value < choices.min) value = choices.min;

if (value > choices.max) value = choices.max;

if ("input" === trigger) e.target.value = value;
    customizerSetting.set(value);
  };

trigger = "reset";
    customizerSetting.set(sliderRef.current.value);
  };

// Preparing for the template.
  const fieldId = `kirki-control-input-${customizerSetting.id}`;
  const value = "" !== props.value ? props.value : 0;

const sliderRef = useRef(null);
  const valueRef = useRef(null);

return (
    <div className="kirki-control-form" tabIndex="1">
      <label className="kirki-control-label" htmlFor={fieldId}>
        <span className="customize-control-title">{props.label}</span>
        <span
          className="customize-control-description description"
          dangerouslySetInnerHTML={{ __html: props.description }}
        />
      </label>

<div className="kirki-control-cols">
        <div className="kirki-control-left-col">
          <input
            ref={sliderRef}
            type="range"
            id={fieldId}
            defaultValue={value}
            min={choices.min}
            max={choices.max}
            step={choices.step}
            className="kirki-control-slider"
            onChange={handleChange}
          />
        </div>
        <div className="kirki-control-right-col">
          <div className="kirki-control-value" ref={valueRef}>
            {value}
          </div>
        </div>
      </div>
    </div>
  );
};

export default KirkiSliderForm;