@qsxy/element-plus-react 1.0.0-next.1

package/dist/Select/Select.d.ts

@@ -0,0 +1,16 @@
+import React, { RefObject } from 'react';
+import Option from './Option';
+import OptionGroup from './OptionGroup';
+import { SelectProps } from './typings';
+declare const Comp: (props: SelectProps & {
+    ref?: RefObject<SelectProps> | React.ForwardedRef<SelectProps>;
+}) => React.ReactElement;
+type InternalType = typeof Comp;
+interface CompInterface extends InternalType {
+    displayName?: string;
+    defaultProps?: Partial<SelectProps>;
+    OptionGroup: typeof OptionGroup;
+    Option: typeof Option;
+}
+declare const Select: CompInterface;
+export default Select;

package/dist/Select/Select.js

@@ -0,0 +1,54 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Select/Select.tsx
+var Select_exports = {};
+__export(Select_exports, {
+  default: () => Select_default
+});
+module.exports = __toCommonJS(Select_exports);
+var import_react = __toESM(require("react"));
+var import_Input = require("../Input");
+var import_Option = __toESM(require("./Option"));
+var import_OptionGroup = __toESM(require("./OptionGroup"));
+var import_SelectCore = __toESM(require("./SelectCore"));
+function InternalSelect(props, ref) {
+  const groupRef = (0, import_react.useRef)(null);
+  const { append, prepend } = props;
+  if (append || prepend) {
+    return /* @__PURE__ */ import_react.default.createElement(import_Input.InputGroup, { prepend, append, ref: groupRef, style: props.style }, /* @__PURE__ */ import_react.default.createElement(import_SelectCore.default, { ref, ...props }));
+  } else {
+    return /* @__PURE__ */ import_react.default.createElement(import_SelectCore.default, { ref, ...props });
+  }
+}
+var Comp = (0, import_react.memo)((0, import_react.forwardRef)(InternalSelect));
+var Select = Comp;
+Select.OptionGroup = import_OptionGroup.default;
+Select.Option = import_Option.default;
+Select.displayName = "Select";
+var Select_default = Select;

package/dist/Select/SelectContext.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ValueType } from './typings';
+interface SelectContextProps {
+    value: ValueType;
+    hover: ValueType;
+    setHover: (value: ValueType) => void;
+    onChoose: (value: string | number, label: string, e: any) => void;
+    multiple: boolean;
+}
+export declare const SelectContext: import("react").Context<SelectContextProps>;
+export {};

package/dist/Select/SelectContext.js

@@ -0,0 +1,47 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Select/SelectContext.ts
+var SelectContext_exports = {};
+__export(SelectContext_exports, {
+  SelectContext: () => SelectContext
+});
+module.exports = __toCommonJS(SelectContext_exports);
+var import_noop = __toESM(require("lodash/noop"));
+var import_react = require("react");
+var SelectContext = (0, import_react.createContext)({
+  value: "",
+  hover: "",
+  setHover: import_noop.default,
+  onChoose: import_noop.default,
+  multiple: false
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SelectContext
+});

package/dist/Select/SelectCore.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SelectProps, SelectRef, ValueType } from './typings';
+declare const SelectCore: React.ForwardRefExoticComponent<SelectProps<ValueType> & React.RefAttributes<SelectRef>>;
+export default SelectCore;

package/dist/Select/SelectCore.js

@@ -0,0 +1,430 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Select/SelectCore.tsx
+var SelectCore_exports = {};
+__export(SelectCore_exports, {
+  default: () => SelectCore_default
+});
+module.exports = __toCommonJS(SelectCore_exports);
+var import_classnames = __toESM(require("classnames"));
+var import_filter = __toESM(require("lodash/filter"));
+var import_find = __toESM(require("lodash/find"));
+var import_max = __toESM(require("lodash/max"));
+var import_min = __toESM(require("lodash/min"));
+var import_omit = __toESM(require("lodash/omit"));
+var import_react = __toESM(require("react"));
+var import_Icon = require("../Icon");
+var import_Input = require("../Input");
+var import_Popper = require("../Popper");
+var import_Tag = require("../Tag");
+var import_Tooltip = __toESM(require("../Tooltip/Tooltip"));
+var import_Util = require("../Util");
+var import_hooks = require("../hooks");
+var import_SelectDropdown = __toESM(require("./SelectDropdown"));
+var SelectCore = (0, import_react.forwardRef)((props, ref) => {
+  const { b, e, be, m, is } = (0, import_hooks.useClassNames)("select");
+  const containerRef = (0, import_react.useRef)(null);
+  const contentRef = (0, import_react.useRef)(null);
+  const wrapperRef = (0, import_react.useRef)(null);
+  const createInputRef = (0, import_react.useRef)(null);
+  const popperInstRef = (0, import_react.useRef)(null);
+  const selectDropdownRef = (0, import_react.useRef)(null);
+  const inputInstance = (0, import_react.useRef)(null);
+  const searchInstance = (0, import_react.useRef)(null);
+  const {
+    filterable,
+    clearable,
+    error,
+    warning,
+    multiple,
+    collapseTags = false,
+    maxCollapseTags,
+    collapseTagsTooltip,
+    collapseTips,
+    filterMethod,
+    onChange,
+    allowCreate,
+    onEnter,
+    afterLeave,
+    prepend,
+    append,
+    onLoadSuccess,
+    ...rest
+  } = props;
+  const [htmlInputProps] = (0, import_hooks.partitionHTMLProps)(rest);
+  const [transitionProps] = (0, import_hooks.partitionAnimationProps)(rest);
+  const [popperProps] = (0, import_hooks.partitionPopperPropsUtils)(rest);
+  const [value, setValue] = (0, import_hooks.useControlled)(props.value, props.defaultValue);
+  const [createItem, setCreateItem] = (0, import_react.useState)("");
+  const disabled = (0, import_hooks.useDisabled)(props.disabled);
+  const size = (0, import_hooks.useSize)(props.size);
+  const multiValue = (0, import_react.useMemo)(() => {
+    if (multiple) {
+      if (value instanceof Array) {
+        return value;
+      } else if (typeof value === "string") {
+        return [value];
+      }
+    }
+    return [];
+  }, [multiple, value]);
+  const [label, setLabel] = (0, import_react.useState)("");
+  const [visible, setVisible] = (0, import_react.useState)(false);
+  const [popperStyle, setPopperStyle] = (0, import_react.useState)({});
+  const [inputHeight, setInputHeight] = (0, import_react.useState)(32);
+  const placeholder = (0, import_react.useMemo)(() => {
+    return multiple && (0, import_Util.isNotEmpty)(multiValue) || (0, import_Util.isNotEmpty)(createItem) ? "" : props.placeholder;
+  }, [createItem, multiValue, multiple, props.placeholder]);
+  const getOptionInstance = (0, import_hooks.useChildrenInstance)("Select.Option", "OptionGroup");
+  const optionData = (0, import_react.useMemo)(() => {
+    if (props.children) {
+      const componentChildren = getOptionInstance(props.children);
+      return componentChildren.map((node) => {
+        var _a;
+        return {
+          label: ((_a = node.props) == null ? void 0 : _a.label) ?? node.props.value,
+          value: node.props.value
+        };
+      });
+    }
+    return [];
+  }, [getOptionInstance, props.children]);
+  const multiLabel = (0, import_react.useMemo)(() => {
+    if (multiple) {
+      return multiValue.map((item) => {
+        var _a;
+        return ((_a = (0, import_find.default)(optionData, { value: item })) == null ? void 0 : _a.label) ?? item;
+      });
+    }
+    return [];
+  }, [multiValue, multiple, optionData]);
+  const handleEnter = (0, import_react.useCallback)(
+    (node) => {
+      var _a;
+      if (visible && contentRef.current && containerRef.current) {
+        const rect = containerRef.current.getBoundingClientRect();
+        const options = Array.from(contentRef.current.querySelectorAll(`.${be("dropdown", "item")}>span`));
+        const maxWidth = (options.length > 0 ? (0, import_max.default)(options.map((item) => (item == null ? void 0 : item.offsetWidth) ?? 0)) : 0) + 35;
+        if (maxWidth && maxWidth < rect.width) {
+          setPopperStyle({
+            ...popperStyle,
+            width: rect.width
+          });
+        } else {
+          setPopperStyle({
+            ...popperStyle,
+            width: (0, import_min.default)([maxWidth, props.maxWidth])
+          });
+        }
+        (_a = selectDropdownRef.current) == null ? void 0 : _a.scrollToSelected();
+        onEnter == null ? void 0 : onEnter(node);
+      }
+    },
+    [be, onEnter, popperStyle, props.maxWidth, visible]
+  );
+  const handleAfterLeave = (0, import_react.useCallback)(
+    (node) => {
+      var _a;
+      (_a = selectDropdownRef.current) == null ? void 0 : _a.clear();
+      afterLeave == null ? void 0 : afterLeave(node);
+    },
+    [afterLeave]
+  );
+  const onClick = (0, import_react.useCallback)(
+    (event) => {
+      event.preventDefault();
+      event == null ? void 0 : event.stopPropagation();
+      if (disabled) {
+        setVisible(false);
+        return;
+      }
+      setVisible(!visible);
+    },
+    [disabled, visible]
+  );
+  const onCloseTag = (0, import_react.useCallback)(
+    (item) => {
+      const res = (0, import_filter.default)(multiValue, (item1) => item1 !== item);
+      setValue(res);
+      onChange == null ? void 0 : onChange(res, multiLabel);
+    },
+    [multiLabel, multiValue, onChange, setValue]
+  );
+  const onClear = (0, import_react.useCallback)(() => {
+    var _a;
+    setValue(multiple ? [] : "");
+    setLabel("");
+    (_a = selectDropdownRef.current) == null ? void 0 : _a.hover("");
+    onChange == null ? void 0 : onChange(multiple ? [] : "", multiple ? [] : "");
+    setCreateItem("");
+  }, [multiple, onChange, setValue]);
+  const onChoose = (0, import_react.useCallback)(
+    (val, text, event) => {
+      event.preventDefault();
+      if ((0, import_Util.isNotEmpty)(val)) {
+        let result = val;
+        if (multiple) {
+          if (multiValue.includes(val)) {
+            result = (0, import_filter.default)(multiValue, (item) => item !== val);
+          } else {
+            result = [...multiValue, val];
+          }
+        } else {
+          if (val !== createItem) {
+            setCreateItem("");
+          }
+        }
+        setValue(result);
+        setLabel(multiple ? "" : text);
+        onChange == null ? void 0 : onChange(result, multiple ? result.map((item) => {
+          var _a;
+          return ((_a = (0, import_find.default)(optionData, { value: item })) == null ? void 0 : _a.label) ?? item;
+        }) : text);
+        !multiple && onClick(event);
+      } else {
+        setVisible(false);
+      }
+    },
+    [multiple, setValue, onChange, multiValue, onClick, createItem, optionData]
+  );
+  (0, import_react.useEffect)(() => {
+    var _a;
+    if (visible && filterable && !allowCreate) {
+      (_a = searchInstance.current) == null ? void 0 : _a.focus();
+    }
+  }, [visible]);
+  (0, import_react.useEffect)(() => {
+    var _a;
+    if (popperInstRef.current && popperInstRef.current.update) {
+      (_a = popperInstRef.current) == null ? void 0 : _a.update();
+    }
+  }, [popperStyle]);
+  (0, import_react.useEffect)(() => {
+    var _a, _b;
+    if (wrapperRef.current) {
+      const height = ((_a = wrapperRef.current) == null ? void 0 : _a.clientHeight) + 4;
+      setInputHeight(height <= 32 ? 32 : height + 32);
+    }
+    if (popperInstRef.current && popperInstRef.current.update) {
+      (_b = popperInstRef.current) == null ? void 0 : _b.update();
+    }
+  }, [multiValue]);
+  (0, import_react.useEffect)(() => {
+    const labels = (value instanceof Array ? value : [value]).map((item) => {
+      var _a;
+      return (_a = (0, import_find.default)(optionData, { value: item })) == null ? void 0 : _a.label;
+    }).filter((item) => !!item);
+    if (labels.length > 0) {
+      setLabel(multiple ? "" : labels.join(","));
+    } else {
+      if ((0, import_Util.isNotEmpty)(value)) {
+        setLabel(value instanceof Array ? value.join(",") : value + "");
+      } else {
+        setLabel("");
+      }
+    }
+    onLoadSuccess == null ? void 0 : onLoadSuccess(value, labels);
+  }, [multiple, onLoadSuccess, optionData, value]);
+  (0, import_react.useImperativeHandle)(ref, () => ({
+    popperInstRef,
+    label,
+    setLabel,
+    inputInstance,
+    searchInstance,
+    getValue: () => value,
+    setValue,
+    onClear,
+    clear: onClear,
+    setVisible
+  }));
+  (0, import_react.useImperativeHandle)(ref, () => containerRef.current);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(b(), e`default`, is({ disabled }), m({ [size]: size }), props.className), style: append || prepend ? {} : props.style, ref: containerRef }, /* @__PURE__ */ import_react.default.createElement("div", { className: e`trigger` }, multiple && /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: e`tags`,
+      onMouseEnter: () => {
+        var _a;
+        return (_a = inputInstance.current) == null ? void 0 : _a.showClear(multiple ? multiValue.join(",") : createItem || label);
+      },
+      onMouseLeave: () => {
+        var _a;
+        return (_a = inputInstance.current) == null ? void 0 : _a.hideClear();
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(b`tags-wrapper`, "has-prefix"), onClick, ref: wrapperRef }, (collapseTags ? multiLabel.slice(0, maxCollapseTags) : multiLabel).map((item, i) => {
+      return /* @__PURE__ */ import_react.default.createElement(import_Tag.Tag, { type: "info", key: multiValue[i], closable: !disabled, onClick, onClose: () => onCloseTag(multiValue[i]), disableTransitions: true }, item);
+    }), collapseTags && (multiValue == null ? void 0 : multiValue.length) > maxCollapseTags && /* @__PURE__ */ import_react.default.createElement(
+      import_Tooltip.default,
+      {
+        popperClass: e`tooltip`,
+        placement: "top",
+        disabled: !collapseTagsTooltip,
+        content: /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, multiLabel.slice(maxCollapseTags, multiLabel.length).map((item) => /* @__PURE__ */ import_react.default.createElement(import_Tag.Tag, { key: item, type: "info", disableTransitions: true }, item))),
+        effect: "light",
+        enterable: true
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_Tag.Tag, { type: "info", onClick, disableTransitions: true }, collapseTips ? collapseTips(multiLabel.length - maxCollapseTags, multiLabel.length) : `+ ${multiLabel.length - maxCollapseTags}`)
+    )),
+    allowCreate && /* @__PURE__ */ import_react.default.createElement(
+      "input",
+      {
+        type: "text",
+        className: e`input`,
+        style: { marginLeft: 5, flexGrow: 1, width: "0.111111%", maxWidth: 170 },
+        ref: createInputRef,
+        onClick: () => setVisible(!visible),
+        onInput: (event) => {
+          var _a;
+          setVisible(true);
+          setCreateItem(event.target.value);
+          if (popperInstRef.current && popperInstRef.current.update) {
+            (_a = popperInstRef.current) == null ? void 0 : _a.update();
+          }
+        },
+        onKeyDown: (event) => {
+          if (event.key === "Enter") {
+            onChoose(createItem, createItem, event);
+            setCreateItem("");
+            if (createInputRef.current) {
+              createInputRef.current.value = "";
+            }
+          }
+        },
+        onBlur: () => {
+          setTimeout(() => {
+            setCreateItem("");
+            if (createInputRef.current) {
+              createInputRef.current.value = "";
+            }
+          }, 200);
+        }
+      }
+    )
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_Input.Input,
+    {
+      ref: inputInstance,
+      value: multiple ? multiValue.join(",") : createItem || label,
+      hiddenValue: multiple,
+      placeholder,
+      readOnly: !allowCreate,
+      clearable: clearable && !disabled,
+      disabled,
+      onClick,
+      onClear,
+      plain: props.plain,
+      className: (0, import_classnames.default)(is({ active: visible })),
+      size,
+      onChange: (val) => {
+        setVisible(true);
+        setCreateItem(val + "");
+      },
+      onKeyDown: (event) => {
+        if (event.key === "Enter") {
+          onChoose(createItem, createItem, event);
+        }
+      },
+      onBlur: () => {
+        setTimeout(() => {
+          setCreateItem("");
+        }, 200);
+      },
+      error,
+      warning,
+      innerStyle: multiple ? { height: inputHeight } : {},
+      suffix: /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { prefix: "fal", name: "angle-down", rotate: visible ? 180 : null, onClick }),
+      ...(0, import_omit.default)(htmlInputProps, [
+        "value",
+        "defaultValue",
+        "onInput",
+        "size",
+        "prefix",
+        "onChange",
+        "style",
+        "placeholder",
+        "readOnly",
+        "onKeyDown",
+        "disabled",
+        "className",
+        "type",
+        "name",
+        "minLength",
+        "maxLength"
+      ])
+    }
+  )), /* @__PURE__ */ import_react.default.createElement(
+    import_Popper.Popper,
+    {
+      referenceElement: containerRef,
+      visible,
+      popperInstRef,
+      popperStyle,
+      onDestroy: () => setVisible(false),
+      onEnter: handleEnter,
+      afterLeave: handleAfterLeave,
+      placement: "bottom-start",
+      transitionAppear: true,
+      unmountOnExit: true,
+      ...transitionProps,
+      ...popperProps
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_SelectDropdown.default,
+      {
+        ref: selectDropdownRef,
+        value,
+        searchInstance,
+        createItem,
+        setCreateItem,
+        onChoose,
+        contentRef,
+        createInputRef,
+        popperInstRef,
+        ...props
+      },
+      props.children
+    )
+  ));
+});
+SelectCore.defaultProps = {
+  placeholder: "请选择",
+  noDataText: "无数据",
+  noMatchText: "没有找到匹配的结果",
+  loadingText: /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { prefix: "fas", name: "spinner", spin: true }), " 加载中..."),
+  clearable: true,
+  filterable: false,
+  error: false,
+  required: false,
+  disabled: false,
+  maxWidth: 500,
+  collapseTagsTooltip: true,
+  maxCollapseTags: 1
+};
+SelectCore.displayName = "SelectCore";
+var SelectCore_default = SelectCore;

package/dist/Select/SelectDropdown.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SelectDropdownProps, SelectDropdownRef } from './typings';
+declare const SelectDropdown: React.ForwardRefExoticComponent<SelectDropdownProps & React.RefAttributes<SelectDropdownRef>>;
+export default SelectDropdown;