@itcase/ui 1.1.5 → 1.1.7

package/dist/cjs/SelectField-DVCsVz6q.js

@@ -0,0 +1,583 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var index$2 = require('./components/Radio.js');
+require('lodash/castArray');
+require('lodash/camelCase');
+require('./context/UIContext.js');
+var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
+var index$3 = require('./components/Switch.js');
+var direction = require('./constants/componentProps/direction.js');
+var size = require('./constants/componentProps/size.js');
+var index$1 = require('./components/Divider.js');
+var Text = require('./Text-CfBPhwqK.js');
+var index = require('./components/Icon.js');
+var useStyles = require('./hooks/useStyles.js');
+var index$4 = require('./components/Select.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+function FormField(props) {
+  const {
+    id,
+    children,
+    afterItem,
+    dataTestId,
+    beforeItem,
+    dividerWidth,
+    dividerDirection,
+    set,
+    className,
+    dividerSize,
+    dividerFill,
+    descSize,
+    descTextWidth,
+    descTextColor,
+    desc,
+    label,
+    labelSize,
+    labelTextWidth,
+    labelTextColor,
+    clearIconFill,
+    clearIcon,
+    clearIconSize,
+    messageSize,
+    messageTextWidth,
+    messageTextColor,
+    message
+  } = props;
+  const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'form-field_size_',
+    propsKey: 'size'
+  });
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const inputFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'inputFill'
+  });
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'form-field_shape_',
+    propsKey: 'shape'
+  });
+  const inputShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'form-field__item-value_shape_',
+    propsKey: 'inputShape'
+  });
+  const directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'direction_',
+    propsKey: 'direction'
+  });
+  const {
+    styles: formFieldStyles
+  } = useStyles.useStyles(props);
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'form-field', set && `form-field_set_${set}`, sizeClass, fillClass, shapeClass, directionClass),
+    "data-test-id": dataTestId,
+    style: formFieldStyles
+  }, label && /*#__PURE__*/React__default.default.createElement("label", {
+    htmlFor: id,
+    className: "form-field__label"
+  }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    size: labelSize,
+    textWeight: labelTextWidth,
+    textColor: labelTextColor
+  }, label)), desc && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "form-field__desc"
+  }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    size: descSize,
+    textWeight: descTextWidth,
+    textColor: descTextColor
+  }, desc)), /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('form-field__item', inputFillClass, inputShapeClass)
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('form-field__item-wrapper')
+  }, beforeItem, children, clearIcon && /*#__PURE__*/React__default.default.createElement(index.Icon, {
+    fill: clearIconFill,
+    SvgImage: clearIcon,
+    size: clearIconSize
+  }), afterItem), /*#__PURE__*/React__default.default.createElement(index$1.Divider, {
+    className: "form-field__item-divider",
+    direction: dividerDirection,
+    fill: dividerFill,
+    size: dividerSize,
+    width: dividerWidth
+  })), message && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "form-field__message"
+  }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    size: messageSize,
+    textWeight: messageTextWidth,
+    textColor: messageTextColor
+  }, message)));
+}
+FormField.propTypes = {
+  id: PropTypes__default.default.string,
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  direction: PropTypes__default.default.oneOf(direction.default),
+  directionDesktop: PropTypes__default.default.oneOf(direction.default),
+  directionMobile: PropTypes__default.default.oneOf(direction.default),
+  directionTablet: PropTypes__default.default.oneOf(direction.default),
+  size: PropTypes__default.default.oneOf(size.default),
+  sizeDesktop: PropTypes__default.default.oneOf(size.default),
+  sizeMobile: PropTypes__default.default.oneOf(size.default),
+  sizeTablet: PropTypes__default.default.oneOf(size.default),
+  dividerSize: PropTypes__default.default.string,
+  dividerFill: PropTypes__default.default.string,
+  style: PropTypes__default.default.string,
+  type: PropTypes__default.default.string,
+  onClick: PropTypes__default.default.func
+};
+FormField.defaultProps = {
+  dividerWidth: 'fill',
+  dividerDirection: 'horizontal'
+};
+FormField.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "FormField",
+  "props": {
+    "dividerWidth": {
+      "defaultValue": {
+        "value": "'fill'",
+        "computed": false
+      },
+      "required": false
+    },
+    "dividerDirection": {
+      "defaultValue": {
+        "value": "'horizontal'",
+        "computed": false
+      },
+      "required": false
+    },
+    "id": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "children": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "className": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "direction": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "directionProps"
+      },
+      "required": false
+    },
+    "directionDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "directionProps"
+      },
+      "required": false
+    },
+    "directionMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "directionProps"
+      },
+      "required": false
+    },
+    "directionTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "directionProps"
+      },
+      "required": false
+    },
+    "size": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "sizeProps"
+      },
+      "required": false
+    },
+    "sizeDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "sizeProps"
+      },
+      "required": false
+    },
+    "sizeMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "sizeProps"
+      },
+      "required": false
+    },
+    "sizeTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "sizeProps"
+      },
+      "required": false
+    },
+    "dividerSize": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "dividerFill": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "style": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "type": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "onClick": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    }
+  }
+};
+
+function ChoiceField(props) {
+  const {
+    radioId,
+    radioClassName,
+    radioFillCheckmark,
+    radioFillChecked,
+    radioFill,
+    radioFillDisable,
+    radioShape,
+    radioBorder
+  } = props;
+  return /*#__PURE__*/React__default.default.createElement(FormField, props, /*#__PURE__*/React__default.default.createElement(index$2.Radio, {
+    id: radioId,
+    className: radioClassName,
+    fillCheckmark: radioFillCheckmark,
+    fillChecked: radioFillChecked,
+    fill: radioFill,
+    fillDisable: radioFillDisable,
+    shape: radioShape,
+    border: radioBorder
+  }));
+}
+ChoiceField.propTypes = {
+  radioClassName: PropTypes__default.default.string
+};
+ChoiceField.defaultProps = {
+  radioClassName: 'form-field__item-radio'
+};
+ChoiceField.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "ChoiceField",
+  "props": {
+    "radioClassName": {
+      "defaultValue": {
+        "value": "'form-field__item-radio'",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    }
+  }
+};
+
+function PasswordField(props) {
+  const {
+    placeholder,
+    passwordClassName,
+    value
+  } = props;
+  const placeholderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'placeholder-text-color_',
+    propsKey: 'placeholderColor'
+  });
+  const valueTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text text-color_',
+    propsKey: 'valueTextColor'
+  });
+  const valueTextSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text_size_',
+    propsKey: 'valueTextSize'
+  });
+  return /*#__PURE__*/React__default.default.createElement(FormField, props, /*#__PURE__*/React__default.default.createElement("input", {
+    type: "text",
+    value: value,
+    placeholder: placeholder,
+    className: clsx__default.default(passwordClassName, valueTextSizeClass, valueTextColorClass, placeholderColorClass)
+  }));
+}
+PasswordField.propTypes = {
+  children: PropTypes__default.default.any,
+  passwordClassName: PropTypes__default.default.string,
+  placeholder: PropTypes__default.default.string,
+  value: PropTypes__default.default.string
+};
+PasswordField.defaultProps = {
+  set: 'password',
+  passwordClassName: 'form-field__item-password'
+};
+PasswordField.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "PasswordField",
+  "props": {
+    "set": {
+      "defaultValue": {
+        "value": "'password'",
+        "computed": false
+      },
+      "required": false
+    },
+    "passwordClassName": {
+      "defaultValue": {
+        "value": "'form-field__item-password'",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "children": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "placeholder": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "value": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    }
+  }
+};
+
+function SwitchField(props) {
+  const {
+    className
+  } = props;
+  return /*#__PURE__*/React__default.default.createElement(FormField, props, /*#__PURE__*/React__default.default.createElement(index$3.Switch, {
+    className: clsx__default.default('form-field__item-switch', className)
+  }));
+}
+SwitchField.propTypes = {
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  placeholder: PropTypes__default.default.string,
+  value: PropTypes__default.default.string
+};
+SwitchField.defaultProps = {
+  set: 'switch'
+};
+SwitchField.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "SwitchField",
+  "props": {
+    "set": {
+      "defaultValue": {
+        "value": "'switch'",
+        "computed": false
+      },
+      "required": false
+    },
+    "children": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "className": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "placeholder": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "value": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    }
+  }
+};
+
+function SelectField(props) {
+  const {
+    className,
+    selectInputClass,
+    selectFill,
+    selectShape,
+    selectBorder,
+    selectSize,
+    selectOptionFill,
+    selectOptionTextSize,
+    selectOptionTextColor,
+    selectOptionBefore,
+    selectOptionAfter,
+    selectInputBefore,
+    selectInputAfter,
+    selectInputFill,
+    selectInputTextSize,
+    selectInputTextColor
+  } = props;
+  return /*#__PURE__*/React__default.default.createElement(FormField, props, /*#__PURE__*/React__default.default.createElement(index$4.SelectInput, {
+    className: clsx__default.default(selectInputClass, className),
+    fill: selectFill,
+    shape: selectShape,
+    borderColor: selectBorder,
+    size: selectSize,
+    optionFill: selectOptionFill,
+    optionTextSize: selectOptionTextSize,
+    optionTextColor: selectOptionTextColor,
+    optionBefore: selectOptionBefore,
+    optionAfter: selectOptionAfter,
+    inputBefore: selectInputBefore,
+    inputAfter: selectInputAfter,
+    inputFill: selectInputFill,
+    inputTextSize: selectInputTextSize,
+    inputTextColor: selectInputTextColor
+  }));
+}
+SelectField.propTypes = {
+  children: PropTypes__default.default.any,
+  textInputClass: PropTypes__default.default.string,
+  placeholder: PropTypes__default.default.string,
+  value: PropTypes__default.default.string
+};
+SelectField.defaultProps = {
+  set: 'select',
+  selectInputClass: 'form-field__item-select'
+};
+SelectField.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "SelectField",
+  "props": {
+    "set": {
+      "defaultValue": {
+        "value": "'select'",
+        "computed": false
+      },
+      "required": false
+    },
+    "selectInputClass": {
+      "defaultValue": {
+        "value": "'form-field__item-select'",
+        "computed": false
+      },
+      "required": false
+    },
+    "children": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "textInputClass": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "placeholder": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "value": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    }
+  }
+};
+
+exports.ChoiceField = ChoiceField;
+exports.FormField = FormField;
+exports.PasswordField = PasswordField;
+exports.SelectField = SelectField;
+exports.SwitchField = SwitchField;