관리-도구

편집 파일: KirkiInputSliderForm.js

import { useRef } from "react";

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

let trigger = "";

const validateValue = (value) => {
    if (value < choices.min) value = choices.min;
    if (value > choices.max) value = choices.max;

return value;
  };

const getValueObject = (value) => {
    value = "string" !== typeof value ? value.toString() : value;

const valueUnit = value.replace(/\d+/g, "");
    let valueNumber = value.replace(valueUnit, "");

valueNumber = parseFloat(valueNumber.trim());
    valueNumber = validateValue(valueNumber);

return {
      number: valueNumber,
      unit: valueUnit,
    };
  };

const getValueForInput = (value) => {
    const valueObject = getValueObject(value);
    return valueObject.number + valueObject.unit;
  };

const getValueForSlider = (value) => {
    return getValueObject(value).number;
  };

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

const handleInputChange = (e) => {
    trigger = "input";
    customizerSetting.set(getValueForInput(e.target.value));
  };

const handleSliderChange = (e) => {
    trigger = "slider";

let value = parseFloat(e.target.value);
    value = validateValue(value);

const inputValueObj = getValueObject(valueRef.current.value); // We're going to use the unit.
    const valueForInput = value + inputValueObj.unit;

customizerSetting.set(valueForInput);
  };

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

// Preparing for the template.
  const fieldId = `kirki-control-input-${customizerSetting.id}`;
  const sliderValue = getValueForSlider(props.value);
  const inputValue = getValueForInput(props.value);

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={sliderValue}
            min={choices.min}
            max={choices.max}
            step={choices.step}
            className="kirki-control-input-slider kirki-pro-control-input-slider"
            onChange={handleSliderChange}
          />
        </div>
        <div className="kirki-control-right-col">
          <input
            ref={valueRef}
            type="text"
            defaultValue={inputValue}
            className="kirki-control-input"
            onChange={handleInputChange}
          />
        </div>
      </div>
    </div>
  );
};

export default KirkiInputSliderForm;