@itcase/ui 1.1.5 → 1.1.7

package/dist/SelectField-uEsQcoxF.js

@@ -0,0 +1,571 @@
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { Radio } from './components/Radio.js';
+import 'lodash/castArray';
+import 'lodash/camelCase';
+import './context/UIContext.js';
+import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
+import { Switch } from './components/Switch.js';
+import directionProps from './constants/componentProps/direction.js';
+import sizeProps from './constants/componentProps/size.js';
+import { Divider } from './components/Divider.js';
+import { T as Text } from './Text-DffpwlYq.js';
+import { Icon } from './components/Icon.js';
+import { useStyles } from './hooks/useStyles.js';
+import { SelectInput } from './components/Select.js';
+
+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(props, {
+    prefix: 'form-field_size_',
+    propsKey: 'size'
+  });
+  const fillClass = useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const inputFillClass = useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'inputFill'
+  });
+  const shapeClass = useDeviceTargetClass(props, {
+    prefix: 'form-field_shape_',
+    propsKey: 'shape'
+  });
+  const inputShapeClass = useDeviceTargetClass(props, {
+    prefix: 'form-field__item-value_shape_',
+    propsKey: 'inputShape'
+  });
+  const directionClass = useDeviceTargetClass(props, {
+    prefix: 'direction_',
+    propsKey: 'direction'
+  });
+  const {
+    styles: formFieldStyles
+  } = useStyles(props);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: clsx(className, 'form-field', set && `form-field_set_${set}`, sizeClass, fillClass, shapeClass, directionClass),
+    "data-test-id": dataTestId,
+    style: formFieldStyles
+  }, label && /*#__PURE__*/React__default.createElement("label", {
+    htmlFor: id,
+    className: "form-field__label"
+  }, /*#__PURE__*/React__default.createElement(Text, {
+    size: labelSize,
+    textWeight: labelTextWidth,
+    textColor: labelTextColor
+  }, label)), desc && /*#__PURE__*/React__default.createElement("div", {
+    className: "form-field__desc"
+  }, /*#__PURE__*/React__default.createElement(Text, {
+    size: descSize,
+    textWeight: descTextWidth,
+    textColor: descTextColor
+  }, desc)), /*#__PURE__*/React__default.createElement("div", {
+    className: clsx('form-field__item', inputFillClass, inputShapeClass)
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: clsx('form-field__item-wrapper')
+  }, beforeItem, children, clearIcon && /*#__PURE__*/React__default.createElement(Icon, {
+    fill: clearIconFill,
+    SvgImage: clearIcon,
+    size: clearIconSize
+  }), afterItem), /*#__PURE__*/React__default.createElement(Divider, {
+    className: "form-field__item-divider",
+    direction: dividerDirection,
+    fill: dividerFill,
+    size: dividerSize,
+    width: dividerWidth
+  })), message && /*#__PURE__*/React__default.createElement("div", {
+    className: "form-field__message"
+  }, /*#__PURE__*/React__default.createElement(Text, {
+    size: messageSize,
+    textWeight: messageTextWidth,
+    textColor: messageTextColor
+  }, message)));
+}
+FormField.propTypes = {
+  id: PropTypes.string,
+  children: PropTypes.any,
+  className: PropTypes.string,
+  direction: PropTypes.oneOf(directionProps),
+  directionDesktop: PropTypes.oneOf(directionProps),
+  directionMobile: PropTypes.oneOf(directionProps),
+  directionTablet: PropTypes.oneOf(directionProps),
+  size: PropTypes.oneOf(sizeProps),
+  sizeDesktop: PropTypes.oneOf(sizeProps),
+  sizeMobile: PropTypes.oneOf(sizeProps),
+  sizeTablet: PropTypes.oneOf(sizeProps),
+  dividerSize: PropTypes.string,
+  dividerFill: PropTypes.string,
+  style: PropTypes.string,
+  type: PropTypes.string,
+  onClick: PropTypes.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.createElement(FormField, props, /*#__PURE__*/React__default.createElement(Radio, {
+    id: radioId,
+    className: radioClassName,
+    fillCheckmark: radioFillCheckmark,
+    fillChecked: radioFillChecked,
+    fill: radioFill,
+    fillDisable: radioFillDisable,
+    shape: radioShape,
+    border: radioBorder
+  }));
+}
+ChoiceField.propTypes = {
+  radioClassName: PropTypes.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(props, {
+    prefix: 'placeholder-text-color_',
+    propsKey: 'placeholderColor'
+  });
+  const valueTextColorClass = useDeviceTargetClass(props, {
+    prefix: 'text text-color_',
+    propsKey: 'valueTextColor'
+  });
+  const valueTextSizeClass = useDeviceTargetClass(props, {
+    prefix: 'text_size_',
+    propsKey: 'valueTextSize'
+  });
+  return /*#__PURE__*/React__default.createElement(FormField, props, /*#__PURE__*/React__default.createElement("input", {
+    type: "text",
+    value: value,
+    placeholder: placeholder,
+    className: clsx(passwordClassName, valueTextSizeClass, valueTextColorClass, placeholderColorClass)
+  }));
+}
+PasswordField.propTypes = {
+  children: PropTypes.any,
+  passwordClassName: PropTypes.string,
+  placeholder: PropTypes.string,
+  value: PropTypes.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.createElement(FormField, props, /*#__PURE__*/React__default.createElement(Switch, {
+    className: clsx('form-field__item-switch', className)
+  }));
+}
+SwitchField.propTypes = {
+  children: PropTypes.any,
+  className: PropTypes.string,
+  placeholder: PropTypes.string,
+  value: PropTypes.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.createElement(FormField, props, /*#__PURE__*/React__default.createElement(SelectInput, {
+    className: clsx(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.any,
+  textInputClass: PropTypes.string,
+  placeholder: PropTypes.string,
+  value: PropTypes.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
+    }
+  }
+};
+
+export { ChoiceField as C, FormField as F, PasswordField as P, SwitchField as S, SelectField as a };