@itcase/ui 1.1.6 → 1.1.8

package/dist/SearchResult-erxB06IL.js

@@ -0,0 +1,530 @@
+import React__default, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import fillProps from './constants/componentProps/fill.js';
+import { I as Icon } from './Icon-Dn2eEZvb.js';
+import { T as Text } from './Text-BcGbRc14.js';
+import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
+import { useStyles } from './hooks/useStyles.js';
+import { Scrollbar } from './components/Scrollbar.js';
+
+const searchInputConfig = {
+  appearance: {},
+  setAppearance: newComponent => {
+    searchInputConfig.appearance = newComponent;
+  }
+};
+const SearchInput = /*#__PURE__*/React__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 = useCallback(event => {
+    onChange && onChange(event.target.value);
+  }, [onChange]);
+  const onClickClearIcon = useCallback(event => {
+    event.stopPropagation();
+    onChange && onChange('');
+    if (onClickClean) {
+      onClickClean();
+    }
+  }, [onChange, onClickClean]);
+  const fillClass = useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const shapeClass = useDeviceTargetClass(props, {
+    prefix: 'search_shape_',
+    propsKey: 'shape'
+  });
+  const inputFillClass = useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'inputFill'
+  });
+  const inputShapeClass = useDeviceTargetClass(props, {
+    prefix: 'search-input_shape_',
+    propsKey: 'inputShape'
+  });
+  const inputTextSizeClass = useDeviceTargetClass(props, {
+    prefix: 'text_size_',
+    propsKey: 'inputTextSize'
+  });
+  const inputWeightClass = useDeviceTargetClass(props, {
+    prefix: 'text-weight_',
+    propsKey: 'inputTextWeight'
+  });
+  const inputTextColorClass = useDeviceTargetClass(props, {
+    prefix: 'text-color_',
+    propsKey: 'inputTextColor'
+  });
+  const inputTextStyleClass = useDeviceTargetClass(props, {
+    prefix: 'text-style_',
+    propsKey: 'inputTextStyle'
+  });
+  const widthClass = useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  const borderColorClass = useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'borderColor'
+  });
+  const borderColorHoverClass = useDeviceTargetClass(props, {
+    prefix: 'border-color_hover_',
+    propsKey: 'borderHover'
+  });
+  const borderWidthClass = useDeviceTargetClass(props, {
+    prefix: 'border-width_',
+    propsKey: 'borderWidth'
+  });
+  const borderTypeClass = useDeviceTargetClass(props, {
+    prefix: 'border_type_',
+    propsKey: 'borderType'
+  });
+  const {
+    styles: searchInputStyles
+  } = useStyles(props);
+  return /*#__PURE__*/React__default.createElement("label", {
+    className: clsx(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.createElement(Icon, {
+    className: "search-input__icon search-input__icon-before",
+    iconFill: iconBeforeFill,
+    iconStroke: iconBeforeStroke,
+    imageSrc: iconBeforeSrc,
+    size: iconBeforeSize,
+    SvgImage: iconBefore
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: clsx('search-input__wrapper', inputFillClass, inputShapeClass)
+  }, /*#__PURE__*/React__default.createElement("input", {
+    className: clsx('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.createElement("div", {
+    className: "search-input__placeholder"
+  }, /*#__PURE__*/React__default.createElement(Text, {
+    className: clsx('search-input__placeholder-value'),
+    size: placeholderTextSize,
+    textColor: placeholderTextColor || searchInputConfig.appearance[appearance]?.placeholderTextColor,
+    textStyle: placeholderTextStyle,
+    textWeight: placeholderTextWeight
+  }, placeholder || 'Search')), value && /*#__PURE__*/React__default.createElement(Icon, {
+    className: clsx('search-input__clear', onClickClearIcon && 'cursor_type_pointer'),
+    iconFill: iconClearFill,
+    imageSrc: iconClearSrc,
+    size: iconClearSize,
+    SvgImage: iconClear,
+    onClick: onClickClearIcon
+  })), (iconAfter || iconAfterSrc) && /*#__PURE__*/React__default.createElement(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.any,
+  before: PropTypes.any,
+  children: PropTypes.any,
+  className: PropTypes.string,
+  fill: PropTypes.oneOf(fillProps),
+  fillDesktop: PropTypes.oneOf(fillProps),
+  fillMobile: PropTypes.oneOf(fillProps),
+  fillTablet: PropTypes.oneOf(fillProps),
+  iconAfter: PropTypes.any,
+  iconAfterFill: PropTypes.any,
+  iconAfterSize: PropTypes.any,
+  iconAfterStroke: PropTypes.any,
+  iconBefore: PropTypes.any,
+  iconBeforeFill: PropTypes.any,
+  iconBeforeSize: PropTypes.any,
+  iconBeforeStroke: PropTypes.any,
+  iconClear: PropTypes.any,
+  iconClearFill: PropTypes.any,
+  iconClearSize: PropTypes.any,
+  inputTextSize: PropTypes.string,
+  placeholder: PropTypes.string,
+  placeholderTextColor: PropTypes.string,
+  placeholderTextSize: PropTypes.string,
+  placeholderTextStyle: PropTypes.string,
+  placeholderTextWeight: PropTypes.string,
+  type: PropTypes.string,
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  onClickClean: PropTypes.func,
+  onFocus: PropTypes.func,
+  onKeyDown: PropTypes.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.forwardRef(function SearchResult(props, ref) {
+  const {
+    children,
+    className,
+    after,
+    before,
+    scrollHeight,
+    type
+  } = props;
+  const fillClass = useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: clsx(className, 'search-result', fillClass, type && `search-result_type_${type}`)
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "search-result__wrapper"
+  }, before, React__default.Children.toArray(children).filter(Boolean).length && /*#__PURE__*/React__default.createElement(Scrollbar, {
+    scrollHeight: scrollHeight ? `${scrollHeight}px` : '300px'
+  }, children), after));
+});
+SearchResult.propTypes = {
+  after: PropTypes.any,
+  before: PropTypes.any,
+  children: PropTypes.any,
+  className: PropTypes.string,
+  scrollHeight: PropTypes.string,
+  type: PropTypes.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
+    }
+  }
+};
+
+export { SearchInput as S, SearchResult as a, searchInputConfig as s };