@itcase/ui 1.1.6 → 1.1.8

package/dist/cjs/components/Choice.js

@@ -0,0 +1,346 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var Text = require('../Text-D7Aq1i5R.js');
+var Icon = require('../Icon-UBahY607.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+require('../jsx-runtime-BCmQOGxJ.js');
+require('../hooks/useStyles.js');
+require('lodash/camelCase');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('../Link-BoShjCEw.js');
+require('react-inlinesvg');
+require('./Tooltip.js');
+require('./Title.js');
+require('../constants/componentProps/fill.js');
+require('../constants/componentProps/textAlign.js');
+require('../constants/componentProps/textColor.js');
+require('../constants/componentProps/textGradient.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.js');
+require('../constants/componentProps/titleSize.js');
+require('../constants/componentProps/type.js');
+require('../constants/componentProps/wrap.js');
+require('../constants/componentProps/size.js');
+require('../constants/componentProps/textSize.js');
+require('../constants/componentProps/shape.js');
+require('lodash/castArray');
+
+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);
+
+const choiceConfig = {
+  appearance: {},
+  setAppearance: newComponent => {
+    choiceConfig.appearance = newComponent;
+  }
+};
+const Choice = /*#__PURE__*/React__default.default.forwardRef(function Choice(props, ref) {
+  const {
+    appearance,
+    name,
+    className,
+    type,
+    options,
+    active,
+    isDisabled,
+    set,
+    setActiveSegment,
+    size,
+    labelTextColor,
+    labelTextActiveColor,
+    labelTextSize,
+    before,
+    after,
+    icon,
+    iconFillDisabled,
+    iconStrokeDisabled,
+    activeIcon,
+    iconSize,
+    labelTextActiveColorDisabled,
+    labelTextColorDisabled,
+    activeIconItemFill,
+    iconItemFill,
+    iconStroke,
+    isMultiple
+  } = props;
+  const controlRef = React.useRef(null);
+  const optionsRefs = React.useMemo(() => new Map(options.map(item => [item.value, /*#__PURE__*/React.createRef()])), [options]);
+  const onChange = React.useCallback((event, item) => {
+    const isChecked = isMultiple ? event.target.checked : true;
+    setActiveSegment && setActiveSegment(item, isChecked);
+  }, [isMultiple, setActiveSegment]);
+  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'borderColor'
+  });
+  const borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_',
+    propsKey: 'borderWidth'
+  });
+  const borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border_type_',
+    propsKey: 'borderType'
+  });
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'choice_shape_',
+    propsKey: 'shape'
+  });
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const fillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_disabled_',
+    propsKey: 'fillDisabled'
+  });
+  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
+  const fillActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_active_',
+    propsKey: 'fillActive'
+  });
+  const fillActiveDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_active_disabled_',
+    propsKey: 'fillActiveDisabled'
+  });
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'choice', shapeClass || choiceConfig.appearance[appearance]?.shape && `choice_shape_${choiceConfig.appearance[appearance].shape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? fillClass || choiceConfig.appearance[appearance]?.fill && `fill_${choiceConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase() : fillDisabledClass, borderColorClass || choiceConfig.appearance[appearance]?.borderColor && `border-color_${choiceConfig.appearance[appearance].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderWidthClass, borderTypeClass, set && `choice_set_${set}`, size && `choice_size_${size}`, type && `choice_type_${type}`),
+    ref: controlRef
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: "choice__wrapper"
+  }, options?.map((item, i) => /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('choice__item', !isDisabled && (fillHoverClass || choiceConfig.appearance[appearance]?.fillHover && `fill_active_${choiceConfig.appearance[appearance].fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase()), item.value !== active.value && isDisabled && 'choice__item_state_disabled', item.value === active.value ? !isDisabled ? fillActiveClass || choiceConfig.appearance[appearance]?.fillActive && `fill_active_${choiceConfig.appearance[appearance].fillActive}`.replace(/([A-Z])/g, '-$1').toLowerCase() : fillActiveDisabledClass : !isDisabled ? fillClass : fillDisabledClass, item.value === active.value && isDisabled && 'choice__item_active_state_disabled', item.value === active.value && 'choice__item_active'),
+    key: item.value,
+    ref: optionsRefs.get(item.value)
+  }, /*#__PURE__*/React__default.default.createElement("input", {
+    checked: item.value === active.value,
+    className: "choice__item-radio",
+    id: `${name}-${item.value}`,
+    name: name,
+    disabled: isDisabled,
+    type: isMultiple ? 'checkbox' : 'radio',
+    value: item.value,
+    onChange: event => onChange(event, item)
+  }), /*#__PURE__*/React__default.default.createElement("label", {
+    className: clsx__default.default('choice__item-label', isDisabled && 'choice__item-label_state_disabled'),
+    htmlFor: `${name}-${item.value}`
+  }, before, item.label && /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    size: labelTextSize || choiceConfig.appearance[appearance]?.labelTextSize,
+    textColor: item.value === active.value ? !isDisabled ? labelTextActiveColor || choiceConfig.appearance[appearance]?.labelTextActiveColor : labelTextActiveColorDisabled : !isDisabled ? labelTextColor || choiceConfig.appearance[appearance]?.labelTextColor : labelTextColorDisabled
+  }, item.label), (icon || activeIcon) && /*#__PURE__*/React__default.default.createElement(Icon.Icon, {
+    className: "choice__item-icon",
+    iconFill: item.value === active.value ? activeIconItemFill : iconItemFill,
+    iconFillDisabled: isDisabled && iconFillDisabled,
+    iconSize: iconSize,
+    iconStroke: iconStroke,
+    iconStrokeDisabled: isDisabled && iconStrokeDisabled,
+    SvgImage: item.value === active.value ? activeIcon : icon
+  }), after)))));
+});
+Choice.propTypes = {
+  active: PropTypes__default.default.shape({
+    value: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number, PropTypes__default.default.bool]),
+    label: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.element])
+  }),
+  after: PropTypes__default.default.any,
+  before: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  isMultiple: PropTypes__default.default.bool,
+  labelTextActiveColor: PropTypes__default.default.string,
+  labelTextColor: PropTypes__default.default.string,
+  labelTextSize: PropTypes__default.default.string,
+  name: PropTypes__default.default.string,
+  options: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
+    value: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number, PropTypes__default.default.bool]),
+    label: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.element])
+  })),
+  set: PropTypes__default.default.string,
+  setActiveSegment: PropTypes__default.default.func,
+  size: PropTypes__default.default.string,
+  type: PropTypes__default.default.string
+};
+Choice.defaultProps = {
+  active: {},
+  options: [],
+  size: 'normal'
+};
+Choice.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Choice",
+  "props": {
+    "active": {
+      "defaultValue": {
+        "value": "{}",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "shape",
+        "value": {
+          "value": {
+            "name": "union",
+            "value": [{
+              "name": "string"
+            }, {
+              "name": "number"
+            }, {
+              "name": "bool"
+            }],
+            "required": false
+          },
+          "label": {
+            "name": "union",
+            "value": [{
+              "name": "string"
+            }, {
+              "name": "element"
+            }],
+            "required": false
+          }
+        }
+      },
+      "required": false
+    },
+    "options": {
+      "defaultValue": {
+        "value": "[]",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "arrayOf",
+        "value": {
+          "name": "shape",
+          "value": {
+            "value": {
+              "name": "union",
+              "value": [{
+                "name": "string"
+              }, {
+                "name": "number"
+              }, {
+                "name": "bool"
+              }],
+              "required": false
+            },
+            "label": {
+              "name": "union",
+              "value": [{
+                "name": "string"
+              }, {
+                "name": "element"
+              }],
+              "required": false
+            }
+          }
+        }
+      },
+      "required": false
+    },
+    "size": {
+      "defaultValue": {
+        "value": "'normal'",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "after": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "before": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "className": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "isMultiple": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "labelTextActiveColor": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "labelTextColor": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "labelTextSize": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "name": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "set": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "setActiveSegment": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
+    "type": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    }
+  }
+};
+
+exports.Choice = Choice;
+exports.choiceConfig = choiceConfig;