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

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.InputField = void 0;
var _react = _interopRequireDefault(require("react"));
var _CornerRadiusInputSt = require("../../CornerRadiusInput.st.css.js");
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _Input = _interopRequireDefault(require("../../../Input"));
var _NumberInput = _interopRequireDefault(require("../../../NumberInput"));
var _FormField = _interopRequireDefault(require("../../../FormField"));
var _CornerRadiusInput = require("../../CornerRadiusInput.constants");
var _WixDesignSystemIconThemeProvider = require("../../../WixDesignSystemIconThemeProvider");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/CornerRadiusInput/components/InputField/InputField.tsx";
var Suffix = _ref => {
  var children = _ref.children;
  return /*#__PURE__*/_react.default.createElement(_Input.default.Affix, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 17,
      columnNumber: 10
    }
  }, children);
};
var InputField = _ref2 => {
  var id = _ref2.id,
    name = _ref2.name,
    position = _ref2.position,
    status = _ref2.status,
    suffix = _ref2.suffix,
    size = _ref2.size,
    ariaLabel = _ref2.ariaLabel,
    onInvalid = _ref2.onInvalid,
    onChange = _ref2.onChange,
    value = _ref2.value,
    isLinkingEnabled = _ref2.isLinkingEnabled,
    linkedOnInvalid = _ref2.linkedOnInvalid,
    linkedOnChange = _ref2.linkedOnChange,
    linkedOnBlur = _ref2.linkedOnBlur,
    min = _ref2.min,
    max = _ref2.max;
  var icons = (0, _WixDesignSystemIconThemeProvider.useIcons)('CornerRadiusInputField', {
    RoundedCorner: _wixUiIconsCommon.RoundedCorner
  });

  // original icon is top-right
  var cornerIcons = {
    topLeft: /*#__PURE__*/_react.default.createElement(_Input.default.IconAffix, {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 56,
        columnNumber: 7
      }
    }, /*#__PURE__*/_react.default.createElement(icons.RoundedCorner, {
      className: (0, _CornerRadiusInputSt.st)(_CornerRadiusInputSt.classes.cornerIcon, {
        position: 'topLeft'
      }),
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 57,
        columnNumber: 9
      }
    })),
    topRight: /*#__PURE__*/_react.default.createElement(_Input.default.IconAffix, {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 63,
        columnNumber: 7
      }
    }, /*#__PURE__*/_react.default.createElement(icons.RoundedCorner, {
      className: (0, _CornerRadiusInputSt.st)(_CornerRadiusInputSt.classes.cornerIcon),
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 64,
        columnNumber: 9
      }
    })),
    bottomLeft: /*#__PURE__*/_react.default.createElement(_Input.default.IconAffix, {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 68,
        columnNumber: 7
      }
    }, /*#__PURE__*/_react.default.createElement(icons.RoundedCorner, {
      className: (0, _CornerRadiusInputSt.st)(_CornerRadiusInputSt.classes.cornerIcon, {
        position: 'bottomLeft'
      }),
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 69,
        columnNumber: 9
      }
    })),
    bottomRight: /*#__PURE__*/_react.default.createElement(_Input.default.IconAffix, {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 75,
        columnNumber: 7
      }
    }, /*#__PURE__*/_react.default.createElement(icons.RoundedCorner, {
      className: (0, _CornerRadiusInputSt.st)(_CornerRadiusInputSt.classes.cornerIcon, {
        position: 'bottomRight'
      }),
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 76,
        columnNumber: 9
      }
    }))
  };
  var dataHook = _CornerRadiusInput.dataHooks[position];
  var icon = cornerIcons[position];
  return /*#__PURE__*/_react.default.createElement(_FormField.default, {
    status: status,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 87,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_NumberInput.default, {
    id: id,
    name: name,
    dataHook: dataHook,
    size: size,
    prefix: icon,
    min: min,
    max: max,
    suffix: /*#__PURE__*/_react.default.createElement(Suffix, {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 96,
        columnNumber: 17
      }
    }, suffix || 'px'),
    hideStepper: true,
    ariaLabel: ariaLabel,
    value: value,
    onInvalid: isLinkingEnabled ? linkedOnInvalid : onInvalid,
    onChange: isLinkingEnabled ? linkedOnChange : onChange,
    onBlur: () => {
      isLinkingEnabled && linkedOnBlur();
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 88,
      columnNumber: 7
    }
  }));
};
exports.InputField = InputField;
//# sourceMappingURL=InputField.js.map