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

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _CornerRadiusInputSt = require("./CornerRadiusInput.st.css.js");
var _CornerRadiusInput = require("./CornerRadiusInput.constants");
var _LiveRegion = _interopRequireDefault(require("../LiveRegion"));
var _InputField = require("./components/InputField/InputField");
var _useLinkedMode = require("./hooks/useLinkedMode");
var _useBroadcast = require("./hooks/useBroadcast");
var _LinkingButton = require("./components/LinkingButton/LinkingButton");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/CornerRadiusInput/CornerRadiusInput.tsx";
/** input component used for entering corner radius value for each corner of an element */
var CornerRadiusInput = _ref => {
  var {
    dataHook,
    className,
    topLeft,
    topRight,
    bottomLeft,
    bottomRight,
    size = 'medium',
    linked = false,
    onLinkedToggle,
    linkingButtonLabels,
    linkedValuesChangedMessage,
    min = 0,
    max = 999
  } = _ref;
  var [liveRegionRef, broadcast] = (0, _useBroadcast.useBroadcast)();
  var [linkedProperties, setLinking] = (0, _useLinkedMode.useLinkedMode)({
    initial: linked,
    onChangeCallbacks: [topLeft == null ? void 0 : topLeft.onChange, topRight == null ? void 0 : topRight.onChange, bottomLeft == null ? void 0 : bottomLeft.onChange, bottomRight == null ? void 0 : bottomRight.onChange],
    onInvalidCallbacks: [topLeft == null ? void 0 : topLeft.onInvalid, topRight == null ? void 0 : topRight.onInvalid, bottomLeft == null ? void 0 : bottomLeft.onInvalid, bottomRight == null ? void 0 : bottomRight.onInvalid],
    onBlurCallbacks: [() => broadcast(linkedValuesChangedMessage)]
  });
  var commonInputProps = {
    size,
    min,
    max,
    linkedProperties
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    "data-hook": dataHook,
    className: (0, _CornerRadiusInputSt.st)(_CornerRadiusInputSt.classes.root, className),
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 57,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_LiveRegion.default, {
    ref: liveRegionRef,
    dataHook: _CornerRadiusInput.dataHooks.liveRegion,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 58,
      columnNumber: 7
    }
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: _CornerRadiusInputSt.classes.linkingButton,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 60,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_LinkingButton.LinkingButton, {
    size: size,
    isLinkingEnabled: linkedProperties.isLinkingEnabled,
    setLinking: setLinking,
    linkingButtonLabels: linkingButtonLabels,
    onLinkedToggle: onLinkedToggle,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 61,
      columnNumber: 9
    }
  })), /*#__PURE__*/_react.default.createElement("div", {
    className: _CornerRadiusInputSt.classes.topLeft,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 70,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_InputField.InputField, (0, _extends2.default)({
    position: _CornerRadiusInput.POSITION.topLeft
  }, commonInputProps, topLeft, linkedProperties, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 71,
      columnNumber: 9
    }
  }))), /*#__PURE__*/_react.default.createElement("div", {
    className: _CornerRadiusInputSt.classes.topRight,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 79,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_InputField.InputField, (0, _extends2.default)({
    position: _CornerRadiusInput.POSITION.topRight
  }, commonInputProps, topRight, linkedProperties, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 80,
      columnNumber: 9
    }
  }))), /*#__PURE__*/_react.default.createElement("div", {
    className: _CornerRadiusInputSt.classes.bottomLeft,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 88,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_InputField.InputField, (0, _extends2.default)({
    position: _CornerRadiusInput.POSITION.bottomLeft
  }, commonInputProps, bottomLeft, linkedProperties, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 89,
      columnNumber: 9
    }
  }))), /*#__PURE__*/_react.default.createElement("div", {
    className: _CornerRadiusInputSt.classes.bottomRight,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 97,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_InputField.InputField, (0, _extends2.default)({
    position: _CornerRadiusInput.POSITION.bottomRight
  }, commonInputProps, bottomRight, linkedProperties, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 98,
      columnNumber: 9
    }
  }))));
};
CornerRadiusInput.displayName = 'CornerRadiusInput';

// Proptypes are not required, because they're only used for storybook documentation
CornerRadiusInput.propTypes = {
  dataHook: _propTypes.default.any,
  topLeft: _propTypes.default.any,
  topRight: _propTypes.default.any,
  bottomLeft: _propTypes.default.any,
  bottomRight: _propTypes.default.any,
  linked: _propTypes.default.any,
  onLinkedToggle: _propTypes.default.any,
  linkingButtonLabels: _propTypes.default.any,
  statusId: _propTypes.default.any,
  size: _propTypes.default.any,
  min: _propTypes.default.any,
  max: _propTypes.default.any,
  linkedValuesChangedMessage: _propTypes.default.any
};
var _default = exports.default = CornerRadiusInput;
//# sourceMappingURL=CornerRadiusInput.js.map