@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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireDefault(require("react"));
var _CornerRadiusInputSt = require("./CornerRadiusInput.st.css.js");
var _CornerRadiusInput = require("./CornerRadiusInput.constants");
var _LiveRegion = _interopRequireDefault(require("../LiveRegion"));
var _InputField = require("./components/InputField/InputField");
var _useLinkedMode3 = require("./hooks/useLinkedMode");
var _useBroadcast3 = 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 = _ref.dataHook,
    className = _ref.className,
    topLeft = _ref.topLeft,
    topRight = _ref.topRight,
    bottomLeft = _ref.bottomLeft,
    bottomRight = _ref.bottomRight,
    _ref$size = _ref.size,
    size = _ref$size === void 0 ? 'medium' : _ref$size,
    _ref$linked = _ref.linked,
    linked = _ref$linked === void 0 ? false : _ref$linked,
    onLinkedToggle = _ref.onLinkedToggle,
    linkingButtonLabels = _ref.linkingButtonLabels,
    linkedValuesChangedMessage = _ref.linkedValuesChangedMessage,
    _ref$min = _ref.min,
    min = _ref$min === void 0 ? 0 : _ref$min,
    _ref$max = _ref.max,
    max = _ref$max === void 0 ? 999 : _ref$max;
  var _useBroadcast = (0, _useBroadcast3.useBroadcast)(),
    _useBroadcast2 = (0, _slicedToArray2.default)(_useBroadcast, 2),
    liveRegionRef = _useBroadcast2[0],
    broadcast = _useBroadcast2[1];
  var _useLinkedMode = (0, _useLinkedMode3.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)]
    }),
    _useLinkedMode2 = (0, _slicedToArray2.default)(_useLinkedMode, 2),
    linkedProperties = _useLinkedMode2[0],
    setLinking = _useLinkedMode2[1];
  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: 55,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_LiveRegion.default, {
    ref: liveRegionRef,
    dataHook: _CornerRadiusInput.dataHooks.liveRegion,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 56,
      columnNumber: 7
    }
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: _CornerRadiusInputSt.classes.linkingButton,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 58,
      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: 59,
      columnNumber: 9
    }
  })), /*#__PURE__*/_react.default.createElement("div", {
    className: _CornerRadiusInputSt.classes.topLeft,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 68,
      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: 69,
      columnNumber: 9
    }
  }))), /*#__PURE__*/_react.default.createElement("div", {
    className: _CornerRadiusInputSt.classes.topRight,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 77,
      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: 78,
      columnNumber: 9
    }
  }))), /*#__PURE__*/_react.default.createElement("div", {
    className: _CornerRadiusInputSt.classes.bottomLeft,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 86,
      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: 87,
      columnNumber: 9
    }
  }))), /*#__PURE__*/_react.default.createElement("div", {
    className: _CornerRadiusInputSt.classes.bottomRight,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 95,
      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: 96,
      columnNumber: 9
    }
  }))));
};
CornerRadiusInput.displayName = 'CornerRadiusInput';

// Proptypes are not required, because they're only used for storybook documentation
var _default = exports.default = CornerRadiusInput;
//# sourceMappingURL=CornerRadiusInput.js.map