@wordpress/components
Version:
UI components for WordPress.
47 lines (46 loc) • 1.5 kB
JavaScript
// packages/components/src/validated-form-controls/components/toggle-control.tsx
import { forwardRef, useRef, useEffect } from "@wordpress/element";
import { useMergeRefs } from "@wordpress/compose";
import { ControlWithError } from "../control-with-error";
import ToggleControl from "../../toggle-control";
import { jsx as _jsx } from "react/jsx-runtime";
var UnforwardedValidatedToggleControl = ({
required,
onValidate,
customValidity,
onChange,
markWhenOptional,
...restProps
}, forwardedRef) => {
const validityTargetRef = useRef(null);
const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);
const valueRef = useRef(restProps.checked);
useEffect(() => {
if (validityTargetRef.current) {
validityTargetRef.current.required = required !== null && required !== void 0 ? required : false;
}
}, [required]);
return /* @__PURE__ */ _jsx(ControlWithError, {
required,
markWhenOptional,
onValidate: () => {
return onValidate?.(valueRef.current);
},
customValidity,
getValidityTarget: () => validityTargetRef.current,
children: /* @__PURE__ */ _jsx(ToggleControl, {
__nextHasNoMarginBottom: true,
ref: mergedRefs,
onChange: (value) => {
valueRef.current = value;
onChange?.(value);
},
...restProps
})
});
};
var ValidatedToggleControl = forwardRef(UnforwardedValidatedToggleControl);
export {
ValidatedToggleControl
};
//# sourceMappingURL=toggle-control.js.map