one-design-next 0.0.4-alpha.57

package/dist/select/index.d.ts

@@ -0,0 +1,85 @@
+import type { BaseSelectRef, SelectProps as RcSelectProps } from 'rc-select';
+import { OptGroup, Option } from 'rc-select';
+import type { BaseOptionType, DefaultOptionType } from 'rc-select/lib/Select';
+import React from 'react';
+import './style';
+type RawValue = string | number;
+type SemanticName = 'root';
+type PopupSemantic = 'root';
+export interface LabeledValue {
+    key?: string;
+    value: RawValue;
+    label: React.ReactNode;
+}
+export type SelectValue = RawValue | RawValue[] | LabeledValue | LabeledValue[] | undefined;
+export interface InternalSelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<RcSelectProps<ValueType, OptionType>, 'mode'> {
+    rootClassName?: string;
+    prefix?: React.ReactNode;
+    suffixIcon?: React.ReactNode;
+    size?: 'small' | 'middle' | 'large';
+    disabled?: boolean;
+    mode?: 'multiple' | 'tags' | 'SECRET_COMBOBOX_MODE_DO_NOT_USE' | 'combobox';
+    /** @deprecated Use `variant` instead. */
+    bordered?: boolean;
+    /**
+     * @deprecated `showArrow` is deprecated which will be removed in next major version. It will be a
+     *   default behavior, you can hide it by setting `suffixIcon` to null.
+     */
+    showArrow?: boolean;
+    styles?: Partial<Record<SemanticName, React.CSSProperties>> & {
+        popup?: Partial<Record<PopupSemantic, React.CSSProperties>>;
+    };
+    classNames?: Partial<Record<SemanticName, string>> & {
+        popup?: Partial<Record<PopupSemantic, string>>;
+    };
+}
+export interface SelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<InternalSelectProps<ValueType, OptionType>, 'mode' | 'getInputElement' | 'getRawInputElement' | 'backfill' | 'placement'> {
+    placement?: 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
+    mode?: 'multiple' | 'tags';
+    status?: 'error' | 'warning';
+    popupClassName?: string;
+    popupMatchSelectWidth?: boolean | number;
+    popupRender?: (menu: React.ReactElement) => React.ReactElement;
+    visible?: RcSelectProps['open'];
+    onVisibleChange?: RcSelectProps['onDropdownVisibleChange'];
+    light?: boolean;
+    optionCheckPosition?: 'left' | 'right';
+    showInnerSearch?: boolean;
+}
+export interface SelectButtonProps {
+    /** 是否显示箭头 */
+    showArrow?: boolean;
+    /** 尺寸 */
+    size?: 'small' | 'middle' | 'large';
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 前缀图标 */
+    prefix?: React.ReactNode;
+    /** 占位符 */
+    placeholder?: string;
+    /** 当前值 */
+    value?: string | number;
+    /** 是否打开 */
+    active?: boolean;
+    /** 是否允许清除 */
+    allowClear?: boolean;
+    /** 点击事件 */
+    onClick?: () => void;
+    /** 清除事件 */
+    onClear?: () => void;
+    /** 样式类名 */
+    className?: string;
+    /** 内联样式 */
+    style?: React.CSSProperties;
+}
+declare const SelectButton: React.ForwardRefExoticComponent<SelectButtonProps & React.RefAttributes<HTMLDivElement>>;
+export interface SelectComponent {
+    <ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: React.PropsWithChildren<SelectProps<ValueType, OptionType>> & React.RefAttributes<BaseSelectRef>): React.ReactElement;
+    displayName?: string;
+    SECRET_COMBOBOX_MODE_DO_NOT_USE: string;
+    Option: typeof Option;
+    OptGroup: typeof OptGroup;
+    Button: typeof SelectButton;
+}
+declare const Select: SelectComponent;
+export default Select;

package/dist/select/index.js

@@ -0,0 +1,262 @@
+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); }
+var _excluded = ["className", "light", "mode", "suffixIcon", "popupClassName", "visible", "onVisibleChange", "showInnerSearch", "popupRender", "searchValue", "onSearch", "maxCount", "defaultValue", "value", "onChange", "placeholder", "showSearch", "size", "autoClearSearchValue"];
+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 _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 _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 _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; }
+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; }
+import clsx from 'clsx';
+import RcSelect, { OptGroup, Option } from 'rc-select';
+import React, { useEffect, useRef, useState } from 'react';
+import Checkbox from "../checkbox";
+import Icon from "../icon";
+import "./style";
+import useIcons from "./useIcons";
+var InternalSelect = function InternalSelect(props, ref) {
+  var className = props.className,
+    light = props.light,
+    mode = props.mode,
+    _props$suffixIcon = props.suffixIcon,
+    suffixIconProp = _props$suffixIcon === void 0 ? /*#__PURE__*/React.createElement(Icon, {
+      name: "down"
+    }) : _props$suffixIcon,
+    popupClassName = props.popupClassName,
+    visibleProp = props.visible,
+    onVisibleChange = props.onVisibleChange,
+    _props$showInnerSearc = props.showInnerSearch,
+    showInnerSearch = _props$showInnerSearc === void 0 ? false : _props$showInnerSearc,
+    popupRender = props.popupRender,
+    searchValueProp = props.searchValue,
+    onSearch = props.onSearch,
+    maxCount = props.maxCount,
+    _props$defaultValue = props.defaultValue,
+    defaultValue = _props$defaultValue === void 0 ? undefined : _props$defaultValue,
+    _props$value = props.value,
+    valueProp = _props$value === void 0 ? undefined : _props$value,
+    _onChange = props.onChange,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? '请选择' : _props$placeholder,
+    _props$showSearch = props.showSearch,
+    showSearch = _props$showSearch === void 0 ? false : _props$showSearch,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'middle' : _props$size,
+    _props$autoClearSearc = props.autoClearSearchValue,
+    autoClearSearchValue = _props$autoClearSearc === void 0 ? true : _props$autoClearSearc,
+    rest = _objectWithoutProperties(props, _excluded);
+  var isMultiple = mode === 'multiple' || mode === 'tags';
+  var _useIcons = useIcons(_objectSpread(_objectSpread({}, rest), {}, {
+      multiple: isMultiple,
+      hasFeedback: false,
+      feedbackIcon: undefined,
+      showSuffixIcon: !!suffixIconProp,
+      prefixCls: 'odn-select',
+      suffixIcon: suffixIconProp
+    })),
+    _suffixIcon = _useIcons.suffixIcon,
+    itemIcon = _useIcons.itemIcon,
+    removeIcon = _useIcons.removeIcon,
+    clearIcon = _useIcons.clearIcon;
+  var _useState = useState(valueProp === undefined ? defaultValue : valueProp),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var _useState3 = useState(visibleProp),
+    _useState4 = _slicedToArray(_useState3, 2),
+    visible = _useState4[0],
+    setVisible = _useState4[1];
+  var _useState5 = useState(searchValueProp || ''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    searchValue = _useState6[0],
+    setSearchValue = _useState6[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 (valueProp !== undefined) {
+      setValue(valueProp);
+    }
+  }, [valueProp]);
+  useEffect(function () {
+    if (searchValueProp !== undefined) {
+      setSearchValue(searchValueProp);
+    }
+  }, [searchValueProp]);
+  useEffect(function () {
+    if (visibleProp !== undefined) {
+      setVisible(visibleProp);
+    }
+  }, [visibleProp]);
+  useEffect(function () {
+    if (visible) {
+      setTimeout(function () {
+        var _dropdownSearchInputR;
+        (_dropdownSearchInputR = dropdownSearchInputRef.current) === null || _dropdownSearchInputR === void 0 || _dropdownSearchInputR.focus();
+      }, 150);
+    }
+  }, [visible]);
+  return /*#__PURE__*/React.createElement(RcSelect, _extends({
+    ref: ref,
+    prefixCls: "odn-select",
+    className: clsx(className, "odn-select-".concat(size), showInnerSearch && 'odn-select-show-inner-search', light && 'odn-select-light', !light && 'odn-select-outlined'),
+    transitionName: "odn-slide-up",
+    mode: mode,
+    suffixIcon: function suffixIcon(suffixIconProps) {
+      var suffixIconFinal = typeof _suffixIcon === 'function' ? _suffixIcon(suffixIconProps) : _suffixIcon;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, !!maxCount && mode === 'multiple' && Array.isArray(value) && /*#__PURE__*/React.createElement("span", {
+        className: "odn-select-max-count"
+      }, value.length, " / ", maxCount), suffixIconFinal);
+    },
+    menuItemSelectedIcon: mode === 'multiple' ? function (props) {
+      var value = props.value,
+        disabled = props.disabled,
+        isSelected = props.isSelected;
+      return /*#__PURE__*/React.createElement(Checkbox, {
+        checked: isSelected,
+        disabled: disabled
+      });
+    } : itemIcon,
+    dropdownClassName: clsx(mode && "odn-select-dropdown-".concat(mode), popupClassName),
+    removeIcon: removeIcon,
+    clearIcon: clearIcon,
+    maxCount: maxCount,
+    open: visible,
+    onDropdownVisibleChange: handleVisibleChange,
+    searchValue: searchValue,
+    value: value,
+    onChange: function onChange(param, option) {
+      if (valueProp === undefined) {
+        setValue(param);
+      }
+      if (autoClearSearchValue) {
+        if (searchValueProp === undefined) {
+          setSearchValue('');
+        }
+        if (onSearch) {
+          onSearch('');
+        }
+      }
+      _onChange === null || _onChange === void 0 || _onChange(param !== null && param !== void 0 ? param : null, option);
+    },
+    dropdownRender: function dropdownRender(menu) {
+      var searchNode = showInnerSearch ? /*#__PURE__*/React.createElement("div", {
+        className: "odn-select-dropdown-top"
+      }, /*#__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();
+        }
+      }))) : null;
+      var content = /*#__PURE__*/React.createElement(React.Fragment, null, searchNode, menu);
+      return popupRender ? popupRender(content) : content;
+    },
+    placeholder: placeholder,
+    notFoundContent: "\u65E0\u5339\u914D\u7ED3\u679C",
+    showSearch: showSearch,
+    autoClearSearchValue: autoClearSearchValue,
+    optionFilterProp: "label"
+  }, rest));
+};
+
+// Select.Button 组件接口
+
+// Select.Button 组件
+var SelectButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref$showArrow = _ref.showArrow,
+    showArrow = _ref$showArrow === void 0 ? true : _ref$showArrow,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'middle' : _ref$size,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    prefix = _ref.prefix,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? '请选择' : _ref$placeholder,
+    value = _ref.value,
+    _ref$active = _ref.active,
+    active = _ref$active === void 0 ? false : _ref$active,
+    _ref$allowClear = _ref.allowClear,
+    allowClear = _ref$allowClear === void 0 ? false : _ref$allowClear,
+    onClick = _ref.onClick,
+    onClear = _ref.onClear,
+    className = _ref.className,
+    style = _ref.style;
+  var buttonClasses = clsx('odn-select-button odn-select odn-select-outlined odn-select-single odn-select-allow-clear odn-select-show-arrow', "odn-select-button-".concat(size), {
+    'odn-select-button-disabled': disabled,
+    'odn-select-open': active,
+    'odn-select-focused': active
+  }, className);
+  var hasValue = value !== undefined && value !== '';
+  var showClear = allowClear && hasValue && !disabled;
+  var handleClear = function handleClear(e) {
+    e.stopPropagation();
+    onClear === null || onClear === void 0 || onClear();
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: buttonClasses,
+    style: style,
+    onClick: disabled ? undefined : onClick
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "odn-select-selector"
+  }, !!prefix && /*#__PURE__*/React.createElement("span", {
+    className: "odn-select-prefix"
+  }, prefix), /*#__PURE__*/React.createElement("span", {
+    className: "odn-select-selection-wrap"
+  }, value ? /*#__PURE__*/React.createElement("span", {
+    className: "odn-select-selection-item"
+  }, value) : /*#__PURE__*/React.createElement("span", {
+    className: "odn-select-selection-placeholder"
+  }, placeholder))), /*#__PURE__*/React.createElement("div", {
+    className: "odn-select-arrow"
+  }, showArrow ? /*#__PURE__*/React.createElement(Icon, {
+    name: "down"
+  }) : null), allowClear && showClear && /*#__PURE__*/React.createElement("span", {
+    className: "odn-select-clear",
+    onClick: handleClear
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "cancel-circle-filled",
+    style: {
+      background: 'var(--odn-color-white)'
+    }
+  })));
+});
+SelectButton.displayName = 'Select.Button';
+
+// 明确定义 Select 组件的类型，避免依赖 rc-select 的内部类型路径
+
+var Select = /*#__PURE__*/React.forwardRef(InternalSelect);
+Select.displayName = 'Select';
+Select.SECRET_COMBOBOX_MODE_DO_NOT_USE = 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
+Select.Option = Option;
+Select.OptGroup = OptGroup;
+Select.Button = SelectButton;
+export default Select;