one-design-next 0.0.4-alpha.57

package/dist/cascader/index.d.ts

@@ -0,0 +1,54 @@
+import type { DefaultOptionType, CascaderProps as RcCascaderProps } from 'rc-cascader';
+import React from 'react';
+import '../select/style';
+import CascaderPanel from './Panel';
+import './style';
+export interface BaseCascaderProps extends Omit<RcCascaderProps<DefaultOptionType, 'value', false>, 'prefixCls' | 'onChange' | 'value' | 'defaultValue' | 'showCheckedStrategy'> {
+    /** 组件尺寸 */
+    size?: 'small' | 'medium' | 'large';
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 占位符文本 */
+    placeholder?: string;
+    /** 是否支持清除 */
+    allowClear?: boolean;
+    /** 是否支持搜索 */
+    showSearch?: boolean;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 是否为浅色主题 */
+    light?: boolean;
+    visible?: RcCascaderProps<DefaultOptionType, 'value', false>['open'];
+    onVisibleChange?: RcCascaderProps<DefaultOptionType, 'value', false>['onOpenChange'];
+    options?: DefaultOptionType[];
+    optionPopoverProps?: Record<string, unknown>;
+    /** 是否显示下拉框内的搜索输入框 */
+    showInnerSearch?: boolean;
+    /** 搜索值 */
+    searchValue?: string;
+    /** 搜索回调 */
+    onSearch?: (value: string) => void;
+    /** 选择后是否自动清空搜索值 */
+    autoClearSearchValue?: boolean;
+    /** 搜索过滤函数 */
+    searchFilter?: (inputValue: string, path: DefaultOptionType[]) => boolean;
+    /** 搜索渲染函数 */
+    searchRender?: (inputValue: string, path: DefaultOptionType[], prefixCls: string) => React.ReactNode;
+    /** 搜索结果限制数量 */
+    searchLimit?: number;
+    showCheckedStrategy?: 'child' | 'parent';
+}
+export type CascaderProps<V = (string | number)[] | null> = BaseCascaderProps & {
+    mode?: 'single' | 'multiple';
+    value?: V;
+    defaultValue?: V;
+    onChange?: (value: V, selectOptions: DefaultOptionType[]) => void;
+};
+export interface CascaderComponent {
+    <V = (string | number)[] | null>(props: CascaderProps<V>): React.ReactElement | null;
+    Panel: typeof CascaderPanel;
+}
+declare const Cascader: CascaderComponent;
+export default Cascader;

package/dist/cascader/index.js

@@ -0,0 +1,314 @@
+var _excluded = ["size", "disabled", "placeholder", "allowClear", "showSearch", "className", "style", "light", "visible", "onVisibleChange", "onChange", "value", "defaultValue", "suffixIcon", "mode", "options", "optionPopoverProps", "showInnerSearch", "searchValue", "onSearch", "autoClearSearchValue", "searchFilter", "searchRender", "searchLimit", "notFoundContent", "showCheckedStrategy"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+import RcCascader from 'rc-cascader';
+import React, { useEffect, useRef, useState } from 'react';
+import Icon from "../icon";
+import "../select/style";
+import useIcons from "../select/useIcons";
+import CascaderPanel from "./Panel";
+import "./style";
+import { processOptions } from "./utils";
+var SHOW_PARENT = RcCascader.SHOW_PARENT,
+  SHOW_CHILD = RcCascader.SHOW_CHILD;
+function highlightKeyword(str, lowerKeyword, prefixCls) {
+  var cells = str.toLowerCase().split(lowerKeyword).reduce(function (list, cur, index) {
+    return index === 0 ? [cur] : [].concat(_toConsumableArray(list), [lowerKeyword, cur]);
+  }, []);
+  var fillCells = [];
+  var start = 0;
+  cells.forEach(function (cell, index) {
+    var end = start + cell.length;
+    var originWorld = str.slice(start, end);
+    start = end;
+    if (index % 2 === 1) {
+      originWorld =
+      /*#__PURE__*/
+      // eslint-disable-next-line react/no-array-index-key
+      React.createElement("span", {
+        className: "".concat(prefixCls, "-menu-item-keyword"),
+        key: "separator-".concat(index)
+      }, originWorld);
+    }
+    fillCells.push(originWorld);
+  });
+  return fillCells;
+}
+
+// 明确定义 Cascader 组件的类型，避免依赖 rc-cascader 的内部类型路径
+
+function CascaderInner(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? '请选择' : _ref$placeholder,
+    _ref$allowClear = _ref.allowClear,
+    allowClear = _ref$allowClear === void 0 ? true : _ref$allowClear,
+    _ref$showSearch = _ref.showSearch,
+    showSearch = _ref$showSearch === void 0 ? false : _ref$showSearch,
+    className = _ref.className,
+    style = _ref.style,
+    _ref$light = _ref.light,
+    light = _ref$light === void 0 ? false : _ref$light,
+    visibleProp = _ref.visible,
+    onVisibleChange = _ref.onVisibleChange,
+    onChange = _ref.onChange,
+    value = _ref.value,
+    defaultValue = _ref.defaultValue,
+    _ref$suffixIcon = _ref.suffixIcon,
+    suffixIconProp = _ref$suffixIcon === void 0 ? /*#__PURE__*/React.createElement(Icon, {
+      name: "down"
+    }) : _ref$suffixIcon,
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? 'single' : _ref$mode,
+    options = _ref.options,
+    optionPopoverProps = _ref.optionPopoverProps,
+    _ref$showInnerSearch = _ref.showInnerSearch,
+    showInnerSearch = _ref$showInnerSearch === void 0 ? false : _ref$showInnerSearch,
+    searchValueProp = _ref.searchValue,
+    _onSearch = _ref.onSearch,
+    _ref$autoClearSearchV = _ref.autoClearSearchValue,
+    autoClearSearchValue = _ref$autoClearSearchV === void 0 ? true : _ref$autoClearSearchV,
+    searchFilter = _ref.searchFilter,
+    searchRender = _ref.searchRender,
+    _ref$searchLimit = _ref.searchLimit,
+    searchLimit = _ref$searchLimit === void 0 ? 1000 : _ref$searchLimit,
+    _ref$notFoundContent = _ref.notFoundContent,
+    notFoundContent = _ref$notFoundContent === void 0 ? '无匹配结果' : _ref$notFoundContent,
+    _ref$showCheckedStrat = _ref.showCheckedStrategy,
+    showCheckedStrategy = _ref$showCheckedStrat === void 0 ? 'parent' : _ref$showCheckedStrat,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  // 处理 options，确保每个 option 都有 title 字段
+  var processedOptions = React.useMemo(function () {
+    return processOptions(options, restProps.fieldNames, optionPopoverProps);
+  }, [options, restProps.fieldNames, optionPopoverProps]);
+  var prefixCls = 'odn-select';
+  var _useIcons = useIcons(_objectSpread(_objectSpread({}, restProps), {}, {
+      hasFeedback: false,
+      feedbackIcon: undefined,
+      showSuffixIcon: !!suffixIconProp,
+      multiple: mode === 'multiple',
+      prefixCls: prefixCls
+    })),
+    suffixIcon = _useIcons.suffixIcon,
+    removeIcon = _useIcons.removeIcon,
+    clearIcon = _useIcons.clearIcon;
+  var cascaderClassName = [prefixCls, "".concat(prefixCls, "-").concat(size), disabled && "".concat(prefixCls, "-disabled"), !light && "".concat(prefixCls, "-outlined"), "".concat(prefixCls, "-show-arrow"), showInnerSearch && "".concat(prefixCls, "-show-inner-search"), 'odn-cascader', className].filter(Boolean).join(' ');
+  var _useState = useState(visibleProp),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var _useState3 = useState(searchValueProp || ''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    searchValue = _useState4[0],
+    setSearchValue = _useState4[1];
+  var dropdownSearchInputRef = useRef(null);
+  var handleVisibleChange = function handleVisibleChange(bool) {
+    if (visibleProp === undefined) {
+      setVisible(bool);
+    }
+    onVisibleChange === null || onVisibleChange === void 0 || onVisibleChange(bool);
+  };
+  useEffect(function () {
+    if (visibleProp !== undefined) {
+      setVisible(visibleProp);
+    }
+  }, [visibleProp]);
+  useEffect(function () {
+    if (searchValueProp !== undefined) {
+      setSearchValue(searchValueProp);
+    }
+  }, [searchValueProp]);
+  useEffect(function () {
+    if (visible) {
+      setTimeout(function () {
+        var _dropdownSearchInputR;
+        (_dropdownSearchInputR = dropdownSearchInputRef.current) === null || _dropdownSearchInputR === void 0 || _dropdownSearchInputR.focus();
+      }, 150);
+    }
+  }, [visible]);
+  var handleChange = function handleChange(value, selectOptions) {
+    // 如果 value 是 undefined，传递 null
+    if (value === undefined) {
+      onChange === null || onChange === void 0 || onChange(null, selectOptions || []);
+      return;
+    }
+    if (mode === 'multiple') {
+      // 多选模式：处理二维数组
+      if (Array.isArray(value) && value.length > 0 && Array.isArray(value[0])) {
+        var filteredValue = value.map(function (item) {
+          return item.filter(function (v) {
+            return v !== null && (typeof v === 'string' || typeof v === 'number');
+          });
+        });
+        onChange === null || onChange === void 0 || onChange(filteredValue, selectOptions || []);
+      } else {
+        onChange === null || onChange === void 0 || onChange(null, selectOptions || []);
+      }
+    } else {
+      // 单选模式：处理一维数组
+      if (Array.isArray(value) && !Array.isArray(value[0])) {
+        var _filteredValue = value.filter(function (v) {
+          return v !== null && (typeof v === 'string' || typeof v === 'number');
+        });
+        onChange === null || onChange === void 0 || onChange(_filteredValue, selectOptions || []);
+      } else {
+        onChange === null || onChange === void 0 || onChange(null, selectOptions || []);
+      }
+    }
+
+    // 自动清空搜索值
+    if (autoClearSearchValue) {
+      if (searchValueProp === undefined) {
+        setSearchValue('');
+      }
+      if (_onSearch) {
+        _onSearch('');
+      }
+    }
+  };
+
+  // 转换 value 类型以兼容 rc-cascader
+  var rcValue = value === null ? undefined : value;
+  var rcDefaultValue = defaultValue === null ? undefined : defaultValue;
+  var defaultSearchRender = function defaultSearchRender(inputValue, path, prefixCls) {
+    var optionList = [];
+
+    // We do lower here to save perf
+    var lower = inputValue.toLowerCase();
+    path.forEach(function (node, index) {
+      if (index !== 0) {
+        optionList.push(' / ');
+      }
+      var label = node.labelForSearch;
+      var type = _typeof(label);
+      if (type === 'string' || type === 'number') {
+        label = highlightKeyword(String(label), lower, prefixCls);
+      }
+      optionList.push(label);
+    });
+    return optionList;
+  };
+  var mergedShowSearch = React.useMemo(function () {
+    if (!showInnerSearch) {
+      return showInnerSearch;
+    }
+    var searchConfig = {
+      filter: searchFilter || function (inputValue, path) {
+        return path.some(function (option) {
+          return option.labelForSearch.toLowerCase().indexOf(inputValue.toLowerCase()) > -1;
+        });
+      },
+      render: searchRender || defaultSearchRender,
+      limit: searchLimit
+    };
+    return searchConfig;
+  }, [showInnerSearch, searchFilter, searchRender, searchLimit]);
+  var commonProps = _objectSpread(_objectSpread({}, restProps), {}, {
+    prefixCls: prefixCls,
+    disabled: disabled,
+    placeholder: placeholder,
+    allowClear: allowClear,
+    showSearch: mergedShowSearch,
+    className: cascaderClassName,
+    dropdownClassName: 'odn-cascader-dropdown',
+    dropdownPrefixCls: 'odn-cascader',
+    style: style,
+    open: visible,
+    onOpenChange: handleVisibleChange,
+    onChange: handleChange,
+    suffixIcon: suffixIcon,
+    expandIcon: /*#__PURE__*/React.createElement(Icon, {
+      name: "right"
+    }),
+    removeIcon: removeIcon,
+    clearIcon: clearIcon,
+    transitionName: 'odn-slide-up',
+    options: processedOptions,
+    searchValue: searchValue,
+    notFoundContent: notFoundContent,
+    autoClearSearchValue: autoClearSearchValue,
+    onSearch: function onSearch(val) {
+      if (searchValueProp === undefined) {
+        setSearchValue(val);
+      }
+      if (_onSearch) {
+        _onSearch(val);
+      }
+    },
+    showCheckedStrategy: showCheckedStrategy === 'child' ? SHOW_CHILD : SHOW_PARENT
+  });
+  var dropdownRender = showInnerSearch && mode === 'multiple' ? function (menu) {
+    var searchNode =
+    /*#__PURE__*/
+    // 这里和 Select 中自定义的 searchNode 差别在去除了 odn-select-dropdown-top 类名，处理一些间距
+    React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "odn-select-dropdown-search"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "search",
+      className: "odn-select-dropdown-search-icon"
+    }), /*#__PURE__*/React.createElement("input", {
+      ref: dropdownSearchInputRef,
+      className: "odn-select-dropdown-search-input",
+      placeholder: "\u8BF7\u8F93\u5165",
+      value: searchValue,
+      onChange: function onChange(e) {
+        var value = e.target.value;
+        if (searchValueProp === undefined) {
+          setSearchValue(value);
+        }
+        if (_onSearch) {
+          _onSearch(value);
+        }
+      },
+      onKeyDown: function onKeyDown(e) {
+        e.stopPropagation();
+      }
+    })));
+    return /*#__PURE__*/React.createElement(React.Fragment, null, searchNode, menu);
+  } : undefined;
+  if (mode === 'multiple') {
+    return /*#__PURE__*/React.createElement(RcCascader, _extends({}, commonProps, {
+      value: rcValue,
+      defaultValue: rcDefaultValue,
+      dropdownRender: dropdownRender
+      // @ts-ignore
+      ,
+      checkable: /*#__PURE__*/React.createElement("span", {
+        className: "odn-cascader-checkbox-inner"
+      })
+    }));
+  }
+  return /*#__PURE__*/React.createElement(RcCascader, _extends({}, commonProps, {
+    value: rcValue,
+    defaultValue: rcDefaultValue,
+    dropdownRender: dropdownRender,
+    checkable: false
+  }));
+}
+
+// 创建具有泛型的组件
+var Cascader = CascaderInner;
+
+// 赋值 Panel 组件
+Cascader.Panel = CascaderPanel;
+export default Cascader;