@kdcloudjs/kdesign 1.0.2

package/es/search/search-panel.js

@@ -0,0 +1,250 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import React, { useEffect, useRef, useState, useContext, useCallback } from 'react';
+import classNames from 'classnames';
+import { Input, Tooltip, Icon, Spin, Image } from '../index';
+import ConfigContext from '../config-provider/ConfigContext';
+
+var InternalSearchPanel = function InternalSearchPanel(props, ref) {
+  var _context4, _context5;
+
+  var thisSearchPanelRef = useRef();
+  var searchPanelRef = ref || thisSearchPanelRef;
+  var tooltipRef = useRef(null);
+
+  var _useContext = useContext(ConfigContext),
+      getLangMsg = _useContext.locale.getLangMsg;
+
+  var prefixCls = props.prefixCls,
+      className = props.className,
+      style = props.style,
+      placeholder = props.placeholder,
+      suffix = props.suffix,
+      _props$panelSearch = props.panelSearch,
+      panelSearch = _props$panelSearch === void 0 ? {} : _props$panelSearch;
+  var panelTypes = panelSearch.panelTypes,
+      _panelSearch$panelRes = panelSearch.panelResult,
+      panelResult = _panelSearch$panelRes === void 0 ? [] : _panelSearch$panelRes,
+      onPanelSelect = panelSearch.onPanelSelect,
+      onPanelSearch = panelSearch.onPanelSearch,
+      onPanelChange = panelSearch.onPanelChange,
+      _panelSearch$panelSea = panelSearch.panelSearchLoading,
+      panelSearchLoading = _panelSearch$panelSea === void 0 ? false : _panelSearch$panelSea,
+      displayList = panelSearch.displayList,
+      displayImg = panelSearch.displayImg;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      visible = _useState2[0],
+      setVisible = _useState2[1];
+
+  var _useState3 = useState(''),
+      _useState4 = _slicedToArray(_useState3, 2),
+      inputValue = _useState4[0],
+      setInputValue = _useState4[1];
+
+  var _useState5 = useState(Array.isArray(panelTypes) && panelTypes.length ? panelTypes[0] : {}),
+      _useState6 = _slicedToArray(_useState5, 2),
+      type = _useState6[0],
+      setType = _useState6[1];
+
+  var _useState7 = useState({}),
+      _useState8 = _slicedToArray(_useState7, 2),
+      result = _useState8[0],
+      setResult = _useState8[1];
+
+  useEffect(function () {
+    setResult(Array.isArray(panelResult) && panelResult.length ? panelResult[0] : {});
+  }, [panelResult]);
+  var searchPanelCls = classNames(className, _defineProperty({}, "".concat(prefixCls, "-panel"), true));
+
+  var handleSearchChange = function handleSearchChange(e) {
+    setInputValue(e.target.value);
+    onPanelChange(_extends(_extends({}, type), {
+      value: e.target.value
+    }));
+  };
+
+  var handleMouseOver = function handleMouseOver(item) {
+    setResult(item);
+  };
+
+  var handleSelect = function handleSelect(item) {
+    onPanelSelect(item);
+  };
+
+  var handleSearch = function handleSearch() {
+    onPanelSearch(_extends(_extends({}, type), {
+      value: inputValue
+    }));
+  };
+
+  var onVisibleChange = function onVisibleChange(visible) {
+    setVisible(visible);
+  };
+
+  var handleSelectType = function handleSelectType(item) {
+    setType(item);
+    setVisible(false);
+    inputValue && (onPanelChange === null || onPanelChange === void 0 ? void 0 : onPanelChange(_extends(_extends({}, item), {
+      value: inputValue
+    })));
+  };
+
+  var text = function text() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-panel-type")
+    }, _mapInstanceProperty(panelTypes).call(panelTypes, function (item, index) {
+      var _context;
+
+      return /*#__PURE__*/React.createElement("span", {
+        key: index,
+        className: _concatInstanceProperty(_context = "".concat(prefixCls, "-panel-type-list")).call(_context, item.code === type.code ? " ".concat(prefixCls, "-panel-type-list-active") : ''),
+        onClick: function onClick() {
+          return handleSelectType(item);
+        }
+      }, item.label);
+    }));
+  };
+
+  var renderDisplayListShow = useCallback(function (left, right) {
+    var _context2;
+
+    var leftContent = left && right ? "".concat(left, ": ") : '';
+    var rightContent = right || '';
+    return _concatInstanceProperty(_context2 = "".concat(leftContent)).call(_context2, rightContent);
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    ref: searchPanelRef,
+    className: searchPanelCls,
+    style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-panel-wrapper")
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: tooltipRef,
+    className: "".concat(prefixCls, "-panel-tooltip-content")
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    placement: "bottomLeft",
+    visible: visible,
+    trigger: "click",
+    onVisibleChange: onVisibleChange,
+    tip: text(),
+    popperClassName: "".concat(prefixCls, "-panel-tooltip"),
+    getTriggerElement: function getTriggerElement(ele) {
+      return tooltipRef.current || ele;
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-panel-recommend")
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      whiteSpace: 'nowrap'
+    }
+  }, type.label), /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "-panel-recommend-icon"),
+    style: {
+      transform: "".concat(visible ? 'rotate(180deg)' : 'rotate(0deg)')
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "arrow-down"
+  }))))), /*#__PURE__*/React.createElement(Input, {
+    placeholder: placeholder || getLangMsg('Search', 'placeholder'),
+    borderType: "none",
+    allowClear: true,
+    suffix: suffix,
+    onChange: handleSearchChange
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-panel-dropDown"),
+    style: inputValue ? {
+      visibility: 'visible',
+      opacity: 1
+    } : {
+      visibility: 'hidden',
+      height: 0,
+      opacity: 0
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-panel-dropDown-result")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-panel-dropDown-result-wrapper")
+  }, Array.isArray(panelResult) && _mapInstanceProperty(panelResult).call(panelResult, function (item, index) {
+    var _context3;
+
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+      React.createElement("div", {
+        className: _concatInstanceProperty(_context3 = "".concat(prefixCls, "-panel-dropDown-result-list")).call(_context3, item.id === result.id ? " ".concat(prefixCls, "-panel-dropDown-result-list-active") : ''),
+        key: index,
+        onMouseOver: function onMouseOver() {
+          return handleMouseOver(item);
+        },
+        onClick: function onClick() {
+          return handleSelect(item);
+        }
+      }, item.icon && /*#__PURE__*/React.createElement("img", {
+        src: item.icon,
+        alt: "img"
+      }), /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: 'flex',
+          justifyContent: 'space-between',
+          flex: 1
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        style: {
+          width: '60%'
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-panel-dropDown-result-list-title"),
+        title: item.title
+      }, item.title), /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-panel-dropDown-result-list-type")
+      }, item.typeName)), /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-panel-dropDown-result-list-sub-title")
+      }, item.subTitle)))
+    );
+  })), /*#__PURE__*/React.createElement("div", {
+    className: _concatInstanceProperty(_context4 = "".concat(prefixCls, "-panel-dropDown-search")).call(_context4, result.id === 'search' ? " ".concat(prefixCls, "-panel-dropDown-search-active") : ''),
+    onMouseOver: function onMouseOver() {
+      return handleMouseOver({
+        id: 'search'
+      });
+    },
+    onClick: handleSearch
+  }, /*#__PURE__*/React.createElement(Icon, {
+    style: {
+      fontSize: 18
+    },
+    type: "search"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "-panel-dropDown-search-value")
+  }, "\u201C".concat(inputValue, "\u201D"))), panelSearchLoading && /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "-panel-dropDown-loading")
+  }, /*#__PURE__*/React.createElement(Spin, {
+    type: "container"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-panel-dropDown-summary")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-panel-dropDown-summary-pic")
+  }, typeof displayImg === 'string' ? /*#__PURE__*/React.createElement(Image, {
+    src: displayImg,
+    preview: false
+  }) : displayImg), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-panel-dropDown-summary-title")
+  }, result.id === 'search' ? "\u67E5\u770B\u66F4\u591A\"".concat(inputValue, "\"\u7684\u641C\u7D22\u7ED3\u679C") : result.title), result.id === 'search' ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-panel-dropDown-summary-list")
+  }, "\u8303\u56F4: ".concat(type.label)) : _mapInstanceProperty(_context5 = _Object$keys(displayList)).call(_context5, function (item, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: "".concat(prefixCls, "-panel-dropDown-summary-list")
+    }, renderDisplayListShow(displayList[item], result[item]));
+  })))));
+};
+
+var SearchPanel = /*#__PURE__*/React.forwardRef(InternalSearchPanel);
+SearchPanel.displayName = 'SearchPanel';
+export default SearchPanel;

package/es/search/search.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ISearchProps } from './interface';
+declare const Search: React.ForwardRefExoticComponent<ISearchProps & React.RefAttributes<unknown>>;
+export default Search;

package/es/search/search.js

@@ -0,0 +1,144 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof _Object$getOwnPropertySymbols === "function") for (var i = 0, p = _Object$getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+import React, { useCallback, useContext, useRef, useState } from 'react';
+import classNames from 'classnames';
+import ConfigContext from '../config-provider/ConfigContext';
+import QuickSearch from './quick-search';
+import SearchPanel from './search-panel';
+import { getCompProps } from '../_utils';
+import { Input, Icon } from '../index';
+import { SearchSizeTypes, BorderTypes, SearchTypes } from './interface';
+import devWarning from '../_utils/devwarning';
+
+var InternalSearch = function InternalSearch(props, ref) {
+  var _context, _classNames;
+
+  var thisSearchRef = useRef();
+  var searchRef = ref || thisSearchRef;
+
+  var _useContext = useContext(ConfigContext),
+      getPrefixCls = _useContext.getPrefixCls,
+      prefixCls = _useContext.prefixCls,
+      userDefaultProps = _useContext.compDefaultProps,
+      getLangMsg = _useContext.locale.getLangMsg;
+
+  var searchProps = getCompProps('Search', userDefaultProps, props);
+
+  var customPrefixcls = searchProps.prefixCls,
+      className = searchProps.className,
+      style = searchProps.style,
+      size = searchProps.size,
+      disabled = searchProps.disabled,
+      onPressEnter = searchProps.onPressEnter,
+      prefix = searchProps.prefix,
+      suffix = searchProps.suffix,
+      borderType = searchProps.borderType,
+      children = searchProps.children,
+      type = searchProps.type,
+      placeholder = searchProps.placeholder,
+      onSearch = searchProps.onSearch,
+      restProps = __rest(searchProps, ["prefixCls", "className", "style", "size", "disabled", "onPressEnter", "prefix", "suffix", "borderType", "children", "type", "placeholder", "onSearch"]);
+
+  devWarning(SearchSizeTypes.indexOf(size) === -1, 'search', "cannot found search size '".concat(size, "'"));
+  devWarning(BorderTypes.indexOf(borderType) === -1, 'search', "cannot found search borderType '".concat(borderType, "'"));
+  devWarning(SearchTypes.indexOf(type) === -1, 'search', "cannot found search Search type '".concat(type, "'"));
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      focused = _useState2[0],
+      setFocused = _useState2[1];
+
+  var searchPrefixCls = getPrefixCls(prefixCls, 'search', customPrefixcls);
+  var searchCls = classNames(searchPrefixCls, className, (_classNames = {}, _defineProperty(_classNames, _concatInstanceProperty(_context = "".concat(searchPrefixCls, "-size-")).call(_context, size), size), _defineProperty(_classNames, "".concat(searchPrefixCls, "-disabled"), disabled), _defineProperty(_classNames, "".concat(searchPrefixCls, "-focused"), focused && !disabled), _defineProperty(_classNames, "".concat(searchPrefixCls, "-borderless"), borderType === 'none'), _defineProperty(_classNames, "".concat(searchPrefixCls, "-border"), borderType === 'border'), _classNames));
+  var handleSearchChange = useCallback(function (event) {
+    onSearch && (onSearch === null || onSearch === void 0 ? void 0 : onSearch(event));
+  }, [onSearch]);
+  var handlePressEnter = useCallback(function (_, event) {
+    onPressEnter && (onPressEnter === null || onPressEnter === void 0 ? void 0 : onPressEnter(searchRef.current.value, event));
+  }, [onPressEnter, searchRef]);
+  var handleFocus = useCallback(function () {
+    setFocused(true);
+  }, []);
+  var handleBlur = useCallback(function () {
+    setFocused(false);
+  }, []);
+  var renderPrefix = useCallback(function () {
+    if (!prefix) {
+      return null;
+    }
+
+    return prefix && typeof prefix === 'boolean' ? /*#__PURE__*/React.createElement("span", {
+      className: "".concat(searchPrefixCls, "-prefix")
+    }, /*#__PURE__*/React.createElement(Icon, {
+      type: "search"
+    })) : prefix;
+  }, [prefix, searchPrefixCls]);
+  var renderSuffix = useCallback(function () {
+    if (!suffix) {
+      return null;
+    }
+
+    return !prefix && (typeof suffix === 'boolean' && suffix ? /*#__PURE__*/React.createElement("span", {
+      className: "".concat(searchPrefixCls, "-suffix")
+    }, /*#__PURE__*/React.createElement(Icon, {
+      className: "kd-search-prefix",
+      type: "search"
+    })) : suffix);
+  }, [suffix, prefix, searchPrefixCls]);
+
+  if (type === 'quick-search') {
+    return /*#__PURE__*/React.createElement(QuickSearch, _extends({}, restProps, {
+      ref: ref,
+      borderType: borderType,
+      disabled: disabled,
+      onSearch: onSearch,
+      className: className,
+      style: style
+    }), children);
+  }
+
+  if (type === 'panel') {
+    // prefixCls后面需要跟传下去的props合并
+    return /*#__PURE__*/React.createElement(SearchPanel, _extends({}, searchProps, {
+      prefixCls: searchPrefixCls
+    }));
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: searchCls,
+    style: style
+  }, /*#__PURE__*/React.createElement(Input, {
+    ref: searchRef,
+    size: size,
+    disabled: disabled,
+    placeholder: placeholder || getLangMsg('Search', 'placeholder'),
+    borderType: "none",
+    prefix: renderPrefix(),
+    suffix: renderSuffix(),
+    onChange: handleSearchChange,
+    onPressEnter: handlePressEnter,
+    onFocus: handleFocus,
+    onBlur: handleBlur
+  }));
+};
+
+var Search = /*#__PURE__*/React.forwardRef(InternalSearch);
+Search.displayName = 'Search';
+export default Search;

package/es/search/style/css.js

@@ -0,0 +1,2 @@
+import '../../style/index.css';
+import './index.css';