Update to Kirki 4.2.0

functions/kirki/kirki-packages/control-slider/src/KirkiSliderForm.js

@@ -0,0 +1,104 @@
+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);
+  };
+
+  const handleReset = (e) => {
+    if ("" !== props.default && "undefined" !== typeof props.default) {
+      sliderRef.current.value = props.default;
+      valueRef.current.textContent = props.default;
+    } else {
+      if ("" !== props.value) {
+        sliderRef.current.value = props.value;
+        valueRef.current.textContent = props.value;
+      } else {
+        sliderRef.current.value = choices.min;
+        valueRef.current.textContent = "";
+      }
+    }
+
+    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="customize-control-notifications-container"
+        ref={props.setNotificationContainer}
+      ></div>
+
+      <button
+        type="button"
+        className="kirki-control-reset"
+        onClick={handleReset}
+      >
+        <i className="dashicons dashicons-image-rotate"></i>
+      </button>
+
+      <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;