@nwebui/react-niagara-px/dist/widgets/Slider.js

React Niagara Px View

import React, { useState, } from "react";
import useWidgetChanged from "./useWidgetChanged";
import { Widget } from "./Widget";
const Slider = function ({ nativeWidget, children }) {
    useWidgetChanged(nativeWidget);
    const max = nativeWidget.get("max");
    const min = nativeWidget.get("min");
    const increment = nativeWidget.get("increment");
    const value = nativeWidget.get("value").value;
    const [temp, setTemp] = useState(value);
    const [changing, setChanging] = useState(false);
    const style = {
        display: "flex",
        alignItems: "center",
    };
    function handleChange(ev) {
        const v = ev.target.valueAsNumber;
        setChanging(true);
        setTemp(v);
    }
    function handleBlur(ev) {
        const v = ev.target.valueAsNumber;
        setChanging(false);
        const binding = Array.from(nativeWidget.childComponents((c) => c.is("kitPx:SetPointBinding")))[0];
        if (!binding) {
            return;
        }
        const ord = binding.gets("ord");
        const action = "set";
        fetch("/webapi/controlpoint/invoke", {
            method: "POST",
            body: JSON.stringify([{ ord, action, value: v }]),
        });
    }
    return (React.createElement(Widget, { nativeWidget: nativeWidget, style: style },
        React.createElement("input", { type: "range", style: { flex: 1, cursor: "pointer" }, value: changing ? temp : value, min: min.value, max: max.value, step: increment.value, onChange: handleChange, onBlur: handleBlur }),
        changing ? temp : value,
        children));
};
export default Slider;
//# sourceMappingURL=Slider.js.map