@itcase/ui 1.1.5 → 1.1.7

package/dist/cjs/SearchResult-CdsV7oDb.js

@@ -0,0 +1,540 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var fill = require('./constants/componentProps/fill.js');
+var index = require('./components/Icon.js');
+var Text = require('./Text-CfBPhwqK.js');
+var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
+var useStyles = require('./hooks/useStyles.js');
+var index$1 = require('./components/Scrollbar.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);
+
+const searchInputConfig = {
+  appearance: {},
+  setAppearance: newComponent => {
+    searchInputConfig.appearance = newComponent;
+  }
+};
+const SearchInput = /*#__PURE__*/React__default.default.forwardRef(function SearchInput(props, ref) {
+  const {
+    after,
+    appearance,
+    before,
+    className,
+    size,
+    dataTour,
+    iconAfter,
+    iconAfterSrc,
+    iconAfterFill,
+    iconAfterSize,
+    iconAfterStroke,
+    iconBefore,
+    iconBeforeSrc,
+    iconBeforeFill,
+    iconBeforeSize,
+    iconBeforeStroke,
+    iconClear,
+    iconClearSrc,
+    iconClearFill,
+    iconClearSize,
+    placeholder,
+    placeholderTextColor,
+    placeholderTextSize,
+    placeholderTextStyle,
+    placeholderTextWeight,
+    type,
+    value,
+    onChange,
+    onClickClean,
+    onFocus,
+    onKeyDown
+  } = props;
+  const onChangeSearchInput = React.useCallback(event => {
+    onChange && onChange(event.target.value);
+  }, [onChange]);
+  const onClickClearIcon = React.useCallback(event => {
+    event.stopPropagation();
+    onChange && onChange('');
+    if (onClickClean) {
+      onClickClean();
+    }
+  }, [onChange, onClickClean]);
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'search_shape_',
+    propsKey: 'shape'
+  });
+  const inputFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'inputFill'
+  });
+  const inputShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'search-input_shape_',
+    propsKey: 'inputShape'
+  });
+  const inputTextSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text_size_',
+    propsKey: 'inputTextSize'
+  });
+  const inputWeightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-weight_',
+    propsKey: 'inputTextWeight'
+  });
+  const inputTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-color_',
+    propsKey: 'inputTextColor'
+  });
+  const inputTextStyleClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-style_',
+    propsKey: 'inputTextStyle'
+  });
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'borderColor'
+  });
+  const borderColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_hover_',
+    propsKey: 'borderHover'
+  });
+  const borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_',
+    propsKey: 'borderWidth'
+  });
+  const borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border_type_',
+    propsKey: 'borderType'
+  });
+  const {
+    styles: searchInputStyles
+  } = useStyles.useStyles(props);
+  return /*#__PURE__*/React__default.default.createElement("label", {
+    className: clsx__default.default(className, 'search-input', shapeClass || searchInputConfig.appearance[appearance]?.shape && `search_shape_${searchInputConfig.appearance[appearance].shape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillClass || searchInputConfig.appearance[appearance]?.fill && `fill_${searchInputConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase(), widthClass, borderColorClass || searchInputConfig.appearance[appearance]?.borderColor && `border-color_${searchInputConfig.appearance[appearance].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderColorHoverClass || searchInputConfig.appearance[appearance]?.borderHover && `border-color_hover_${searchInputConfig.appearance[appearance].borderHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderWidthClass, borderTypeClass, size && `search-input_size_${size}`, type && `search-input_type_${type}`),
+    "data-tour": dataTour,
+    style: searchInputStyles
+  }, before, (iconBefore || iconBeforeSrc) && /*#__PURE__*/React__default.default.createElement(index.Icon, {
+    className: "search-input__icon search-input__icon-before",
+    iconFill: iconBeforeFill,
+    iconStroke: iconBeforeStroke,
+    imageSrc: iconBeforeSrc,
+    size: iconBeforeSize,
+    SvgImage: iconBefore
+  }), /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('search-input__wrapper', inputFillClass, inputShapeClass)
+  }, /*#__PURE__*/React__default.default.createElement("input", {
+    className: clsx__default.default('search-input__value', (inputTextSizeClass || inputWeightClass || inputTextColorClass || inputTextStyleClass) && 'text', inputTextSizeClass, inputWeightClass, inputTextColorClass, inputTextStyleClass),
+    ref: ref,
+    required: true,
+    type: "text",
+    value: value,
+    onChange: onChangeSearchInput,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown
+  }), /*#__PURE__*/React__default.default.createElement("div", {
+    className: "search-input__placeholder"
+  }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    className: clsx__default.default('search-input__placeholder-value'),
+    size: placeholderTextSize,
+    textColor: placeholderTextColor || searchInputConfig.appearance[appearance]?.placeholderTextColor,
+    textStyle: placeholderTextStyle,
+    textWeight: placeholderTextWeight
+  }, placeholder || 'Search')), value && /*#__PURE__*/React__default.default.createElement(index.Icon, {
+    className: clsx__default.default('search-input__clear', onClickClearIcon && 'cursor_type_pointer'),
+    iconFill: iconClearFill,
+    imageSrc: iconClearSrc,
+    size: iconClearSize,
+    SvgImage: iconClear,
+    onClick: onClickClearIcon
+  })), (iconAfter || iconAfterSrc) && /*#__PURE__*/React__default.default.createElement(index.Icon, {
+    className: "search-input__icon search-input__icon-after",
+    iconFill: iconAfterFill,
+    iconStroke: iconAfterStroke,
+    imageSrc: iconAfterSrc,
+    size: iconAfterSize,
+    SvgImage: iconAfter
+  }), after);
+});
+SearchInput.DEFAULT_REF_STATE = {
+  input: null
+};
+SearchInput.propTypes = {
+  after: PropTypes__default.default.any,
+  before: PropTypes__default.default.any,
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  fill: PropTypes__default.default.oneOf(fill.default),
+  fillDesktop: PropTypes__default.default.oneOf(fill.default),
+  fillMobile: PropTypes__default.default.oneOf(fill.default),
+  fillTablet: PropTypes__default.default.oneOf(fill.default),
+  iconAfter: PropTypes__default.default.any,
+  iconAfterFill: PropTypes__default.default.any,
+  iconAfterSize: PropTypes__default.default.any,
+  iconAfterStroke: PropTypes__default.default.any,
+  iconBefore: PropTypes__default.default.any,
+  iconBeforeFill: PropTypes__default.default.any,
+  iconBeforeSize: PropTypes__default.default.any,
+  iconBeforeStroke: PropTypes__default.default.any,
+  iconClear: PropTypes__default.default.any,
+  iconClearFill: PropTypes__default.default.any,
+  iconClearSize: PropTypes__default.default.any,
+  inputTextSize: PropTypes__default.default.string,
+  placeholder: PropTypes__default.default.string,
+  placeholderTextColor: PropTypes__default.default.string,
+  placeholderTextSize: PropTypes__default.default.string,
+  placeholderTextStyle: PropTypes__default.default.string,
+  placeholderTextWeight: PropTypes__default.default.string,
+  type: PropTypes__default.default.string,
+  value: PropTypes__default.default.string,
+  onChange: PropTypes__default.default.func,
+  onClickClean: PropTypes__default.default.func,
+  onFocus: PropTypes__default.default.func,
+  onKeyDown: PropTypes__default.default.func
+};
+SearchInput.defaultProps = {
+  placeholderTextSize: 'm',
+  inputTextSize: 'm',
+  size: 'normal'
+};
+SearchInput.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "SearchInput",
+  "props": {
+    "placeholderTextSize": {
+      "defaultValue": {
+        "value": "'m'",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "inputTextSize": {
+      "defaultValue": {
+        "value": "'m'",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "size": {
+      "defaultValue": {
+        "value": "'normal'",
+        "computed": false
+      },
+      "required": false
+    },
+    "after": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "before": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "children": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "className": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "fill": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "fillDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "fillMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "fillTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "iconAfter": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "iconAfterFill": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "iconAfterSize": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "iconAfterStroke": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "iconBefore": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "iconBeforeFill": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "iconBeforeSize": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "iconBeforeStroke": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "iconClear": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "iconClearFill": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "iconClearSize": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "placeholder": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "placeholderTextColor": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "placeholderTextStyle": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "placeholderTextWeight": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "type": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "value": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "onChange": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
+    "onClickClean": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
+    "onFocus": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
+    "onKeyDown": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    }
+  }
+};
+
+const SearchResult = /*#__PURE__*/React__default.default.forwardRef(function SearchResult(props, ref) {
+  const {
+    children,
+    className,
+    after,
+    before,
+    scrollHeight,
+    type
+  } = props;
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'search-result', fillClass, type && `search-result_type_${type}`)
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: "search-result__wrapper"
+  }, before, React__default.default.Children.toArray(children).filter(Boolean).length && /*#__PURE__*/React__default.default.createElement(index$1.Scrollbar, {
+    scrollHeight: scrollHeight ? `${scrollHeight}px` : '300px'
+  }, children), after));
+});
+SearchResult.propTypes = {
+  after: PropTypes__default.default.any,
+  before: PropTypes__default.default.any,
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  scrollHeight: PropTypes__default.default.string,
+  type: PropTypes__default.default.string
+};
+SearchResult.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "SearchResult",
+  "props": {
+    "after": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "before": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "children": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "className": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "scrollHeight": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "type": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    }
+  }
+};
+
+exports.SearchInput = SearchInput;
+exports.SearchResult = SearchResult;
+exports.searchInputConfig = searchInputConfig;