@kdcloudjs/kdesign 1.0.2

package/lib/search/search-panel.js

@@ -0,0 +1,280 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _index = require("../index");
+
+var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var InternalSearchPanel = function InternalSearchPanel(props, ref) {
+  var _context4, _context5;
+
+  var thisSearchPanelRef = (0, _react.useRef)();
+  var searchPanelRef = ref || thisSearchPanelRef;
+  var tooltipRef = (0, _react.useRef)(null);
+
+  var _useContext = (0, _react.useContext)(_ConfigContext.default),
+      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 = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      visible = _useState2[0],
+      setVisible = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(''),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      inputValue = _useState4[0],
+      setInputValue = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(Array.isArray(panelTypes) && panelTypes.length ? panelTypes[0] : {}),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      type = _useState6[0],
+      setType = _useState6[1];
+
+  var _useState7 = (0, _react.useState)({}),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      result = _useState8[0],
+      setResult = _useState8[1];
+
+  (0, _react.useEffect)(function () {
+    setResult(Array.isArray(panelResult) && panelResult.length ? panelResult[0] : {});
+  }, [panelResult]);
+  var searchPanelCls = (0, _classnames.default)(className, (0, _defineProperty2.default)({}, "".concat(prefixCls, "-panel"), true));
+
+  var handleSearchChange = function handleSearchChange(e) {
+    setInputValue(e.target.value);
+    onPanelChange((0, _extends2.default)((0, _extends2.default)({}, type), {
+      value: e.target.value
+    }));
+  };
+
+  var handleMouseOver = function handleMouseOver(item) {
+    setResult(item);
+  };
+
+  var handleSelect = function handleSelect(item) {
+    onPanelSelect(item);
+  };
+
+  var handleSearch = function handleSearch() {
+    onPanelSearch((0, _extends2.default)((0, _extends2.default)({}, 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((0, _extends2.default)((0, _extends2.default)({}, item), {
+      value: inputValue
+    })));
+  };
+
+  var text = function text() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-panel-type")
+    }, (0, _map.default)(panelTypes).call(panelTypes, function (item, index) {
+      var _context;
+
+      return /*#__PURE__*/_react.default.createElement("span", {
+        key: index,
+        className: (0, _concat.default)(_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 = (0, _react.useCallback)(function (left, right) {
+    var _context2;
+
+    var leftContent = left && right ? "".concat(left, ": ") : '';
+    var rightContent = right || '';
+    return (0, _concat.default)(_context2 = "".concat(leftContent)).call(_context2, rightContent);
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    ref: searchPanelRef,
+    className: searchPanelCls,
+    style: style
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(prefixCls, "-panel-wrapper")
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: tooltipRef,
+    className: "".concat(prefixCls, "-panel-tooltip-content")
+  }, /*#__PURE__*/_react.default.createElement(_index.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.default.createElement("div", {
+    className: "".concat(prefixCls, "-panel-recommend")
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      whiteSpace: 'nowrap'
+    }
+  }, type.label), /*#__PURE__*/_react.default.createElement("span", {
+    className: "".concat(prefixCls, "-panel-recommend-icon"),
+    style: {
+      transform: "".concat(visible ? 'rotate(180deg)' : 'rotate(0deg)')
+    }
+  }, /*#__PURE__*/_react.default.createElement(_index.Icon, {
+    type: "arrow-down"
+  }))))), /*#__PURE__*/_react.default.createElement(_index.Input, {
+    placeholder: placeholder || getLangMsg('Search', 'placeholder'),
+    borderType: "none",
+    allowClear: true,
+    suffix: suffix,
+    onChange: handleSearchChange
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(prefixCls, "-panel-dropDown"),
+    style: inputValue ? {
+      visibility: 'visible',
+      opacity: 1
+    } : {
+      visibility: 'hidden',
+      height: 0,
+      opacity: 0
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(prefixCls, "-panel-dropDown-result")
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(prefixCls, "-panel-dropDown-result-wrapper")
+  }, Array.isArray(panelResult) && (0, _map.default)(panelResult).call(panelResult, function (item, index) {
+    var _context3;
+
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+      _react.default.createElement("div", {
+        className: (0, _concat.default)(_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.default.createElement("img", {
+        src: item.icon,
+        alt: "img"
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          display: 'flex',
+          justifyContent: 'space-between',
+          flex: 1
+        }
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          width: '60%'
+        }
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(prefixCls, "-panel-dropDown-result-list-title"),
+        title: item.title
+      }, item.title), /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(prefixCls, "-panel-dropDown-result-list-type")
+      }, item.typeName)), /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(prefixCls, "-panel-dropDown-result-list-sub-title")
+      }, item.subTitle)))
+    );
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _concat.default)(_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.default.createElement(_index.Icon, {
+    style: {
+      fontSize: 18
+    },
+    type: "search"
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "".concat(prefixCls, "-panel-dropDown-search-value")
+  }, "\u201C".concat(inputValue, "\u201D"))), panelSearchLoading && /*#__PURE__*/_react.default.createElement("span", {
+    className: "".concat(prefixCls, "-panel-dropDown-loading")
+  }, /*#__PURE__*/_react.default.createElement(_index.Spin, {
+    type: "container"
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(prefixCls, "-panel-dropDown-summary")
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(prefixCls, "-panel-dropDown-summary-pic")
+  }, typeof displayImg === 'string' ? /*#__PURE__*/_react.default.createElement(_index.Image, {
+    src: displayImg,
+    preview: false
+  }) : displayImg), /*#__PURE__*/_react.default.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.default.createElement("div", {
+    className: "".concat(prefixCls, "-panel-dropDown-summary-list")
+  }, "\u8303\u56F4: ".concat(type.label)) : (0, _map.default)(_context5 = (0, _keys.default)(displayList)).call(_context5, function (item, index) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: index,
+      className: "".concat(prefixCls, "-panel-dropDown-summary-list")
+    }, renderDisplayListShow(displayList[item], result[item]));
+  })))));
+};
+
+var SearchPanel = /*#__PURE__*/_react.default.forwardRef(InternalSearchPanel);
+
+SearchPanel.displayName = 'SearchPanel';
+var _default = SearchPanel;
+exports.default = _default;

package/lib/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/lib/search/search.js

@@ -0,0 +1,177 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));
+
+var _quickSearch = _interopRequireDefault(require("./quick-search"));
+
+var _searchPanel = _interopRequireDefault(require("./search-panel"));
+
+var _utils = require("../_utils");
+
+var _index = require("../index");
+
+var _interface = require("./interface");
+
+var _devwarning = _interopRequireDefault(require("../_utils/devwarning"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var __rest = void 0 && (void 0).__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 _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(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;
+};
+
+var InternalSearch = function InternalSearch(props, ref) {
+  var _context, _classNames;
+
+  var thisSearchRef = (0, _react.useRef)();
+  var searchRef = ref || thisSearchRef;
+
+  var _useContext = (0, _react.useContext)(_ConfigContext.default),
+      getPrefixCls = _useContext.getPrefixCls,
+      prefixCls = _useContext.prefixCls,
+      userDefaultProps = _useContext.compDefaultProps,
+      getLangMsg = _useContext.locale.getLangMsg;
+
+  var searchProps = (0, _utils.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"]);
+
+  (0, _devwarning.default)(_interface.SearchSizeTypes.indexOf(size) === -1, 'search', "cannot found search size '".concat(size, "'"));
+  (0, _devwarning.default)(_interface.BorderTypes.indexOf(borderType) === -1, 'search', "cannot found search borderType '".concat(borderType, "'"));
+  (0, _devwarning.default)(_interface.SearchTypes.indexOf(type) === -1, 'search', "cannot found search Search type '".concat(type, "'"));
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      focused = _useState2[0],
+      setFocused = _useState2[1];
+
+  var searchPrefixCls = getPrefixCls(prefixCls, 'search', customPrefixcls);
+  var searchCls = (0, _classnames.default)(searchPrefixCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context = "".concat(searchPrefixCls, "-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames, "".concat(searchPrefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames, "".concat(searchPrefixCls, "-focused"), focused && !disabled), (0, _defineProperty2.default)(_classNames, "".concat(searchPrefixCls, "-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames, "".concat(searchPrefixCls, "-border"), borderType === 'border'), _classNames));
+  var handleSearchChange = (0, _react.useCallback)(function (event) {
+    onSearch && (onSearch === null || onSearch === void 0 ? void 0 : onSearch(event));
+  }, [onSearch]);
+  var handlePressEnter = (0, _react.useCallback)(function (_, event) {
+    onPressEnter && (onPressEnter === null || onPressEnter === void 0 ? void 0 : onPressEnter(searchRef.current.value, event));
+  }, [onPressEnter, searchRef]);
+  var handleFocus = (0, _react.useCallback)(function () {
+    setFocused(true);
+  }, []);
+  var handleBlur = (0, _react.useCallback)(function () {
+    setFocused(false);
+  }, []);
+  var renderPrefix = (0, _react.useCallback)(function () {
+    if (!prefix) {
+      return null;
+    }
+
+    return prefix && typeof prefix === 'boolean' ? /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(searchPrefixCls, "-prefix")
+    }, /*#__PURE__*/_react.default.createElement(_index.Icon, {
+      type: "search"
+    })) : prefix;
+  }, [prefix, searchPrefixCls]);
+  var renderSuffix = (0, _react.useCallback)(function () {
+    if (!suffix) {
+      return null;
+    }
+
+    return !prefix && (typeof suffix === 'boolean' && suffix ? /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(searchPrefixCls, "-suffix")
+    }, /*#__PURE__*/_react.default.createElement(_index.Icon, {
+      className: "kd-search-prefix",
+      type: "search"
+    })) : suffix);
+  }, [suffix, prefix, searchPrefixCls]);
+
+  if (type === 'quick-search') {
+    return /*#__PURE__*/_react.default.createElement(_quickSearch.default, (0, _extends2.default)({}, restProps, {
+      ref: ref,
+      borderType: borderType,
+      disabled: disabled,
+      onSearch: onSearch,
+      className: className,
+      style: style
+    }), children);
+  }
+
+  if (type === 'panel') {
+    // prefixCls后面需要跟传下去的props合并
+    return /*#__PURE__*/_react.default.createElement(_searchPanel.default, (0, _extends2.default)({}, searchProps, {
+      prefixCls: searchPrefixCls
+    }));
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: searchCls,
+    style: style
+  }, /*#__PURE__*/_react.default.createElement(_index.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.default.forwardRef(InternalSearch);
+
+Search.displayName = 'Search';
+var _default = Search;
+exports.default = _default;

package/lib/search/style/css.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("../../style/index.css");
+
+require("./index.css");