@wix/design-system/dist/esm/CornerRadiusInput/CornerRadiusInput.js

@wix/design-system

import React from 'react';
import PropTypes from 'prop-types';
import { classes, st } from './CornerRadiusInput.st.css.js';
import { POSITION, dataHooks } from './CornerRadiusInput.constants';
import LiveRegion from '../LiveRegion';
import { InputField } from './components/InputField/InputField';
import { useLinkedMode } from './hooks/useLinkedMode';
import { useBroadcast } from './hooks/useBroadcast';
import { LinkingButton } from './components/LinkingButton/LinkingButton';
/** input component used for entering corner radius value for each corner of an element */
const CornerRadiusInput = ({ dataHook, className, topLeft, topRight, bottomLeft, bottomRight, size = 'medium', linked = false, onLinkedToggle, linkingButtonLabels, linkedValuesChangedMessage, min = 0, max = 999, }) => {
    const [liveRegionRef, broadcast] = useBroadcast();
    const [linkedProperties, setLinking] = useLinkedMode({
        initial: linked,
        onChangeCallbacks: [
            topLeft?.onChange,
            topRight?.onChange,
            bottomLeft?.onChange,
            bottomRight?.onChange,
        ],
        onInvalidCallbacks: [
            topLeft?.onInvalid,
            topRight?.onInvalid,
            bottomLeft?.onInvalid,
            bottomRight?.onInvalid,
        ],
        onBlurCallbacks: [() => broadcast(linkedValuesChangedMessage)],
    });
    const commonInputProps = {
        size,
        min,
        max,
        linkedProperties,
    };
    return (React.createElement("div", { "data-hook": dataHook, className: st(classes.root, className) },
        React.createElement(LiveRegion, { ref: liveRegionRef, dataHook: dataHooks.liveRegion }),
        React.createElement("div", { className: classes.linkingButton },
            React.createElement(LinkingButton, { size: size, isLinkingEnabled: linkedProperties.isLinkingEnabled, setLinking: setLinking, linkingButtonLabels: linkingButtonLabels, onLinkedToggle: onLinkedToggle })),
        React.createElement("div", { className: classes.topLeft },
            React.createElement(InputField, { position: POSITION.topLeft, ...commonInputProps, ...topLeft, ...linkedProperties })),
        React.createElement("div", { className: classes.topRight },
            React.createElement(InputField, { position: POSITION.topRight, ...commonInputProps, ...topRight, ...linkedProperties })),
        React.createElement("div", { className: classes.bottomLeft },
            React.createElement(InputField, { position: POSITION.bottomLeft, ...commonInputProps, ...bottomLeft, ...linkedProperties })),
        React.createElement("div", { className: classes.bottomRight },
            React.createElement(InputField, { position: POSITION.bottomRight, ...commonInputProps, ...bottomRight, ...linkedProperties }))));
};
CornerRadiusInput.displayName = 'CornerRadiusInput';
// Proptypes are not required, because they're only used for storybook documentation
CornerRadiusInput.propTypes = {
    dataHook: PropTypes.any,
    topLeft: PropTypes.any,
    topRight: PropTypes.any,
    bottomLeft: PropTypes.any,
    bottomRight: PropTypes.any,
    linked: PropTypes.any,
    onLinkedToggle: PropTypes.any,
    linkingButtonLabels: PropTypes.any,
    statusId: PropTypes.any,
    size: PropTypes.any,
    min: PropTypes.any,
    max: PropTypes.any,
    linkedValuesChangedMessage: PropTypes.any,
};
export default CornerRadiusInput;
//# sourceMappingURL=CornerRadiusInput.js.map