@para-ui/core 4.0.31 → 4.0.33

package/InputCode/index.js

@@ -0,0 +1,392 @@
+import { a as __awaiter } from '../_verture/tslib.es6-55ed4bd2.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect, Fragment } from 'react';
+import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
+import clsx from 'clsx';
+import { u as useFormatMessage } from '../_verture/useFormatMessage-1fc7c957.js';
+import HelperText from '../HelperText/index.js';
+import { TextField } from '../TextField/index.js';
+import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
+import Label from '../Label/index.js';
+import { Button } from '../Button/index.js';
+import AutoTips from '../AutoTips/index.js';
+import '../_verture/index-ca413216.js';
+import '@paraview/lib';
+import '@para-ui/icons/PreviewClose';
+import '@para-ui/icons/PreviewOpen';
+import '@para-ui/icons/CloseCircleF';
+import '../Loading/index.js';
+import '@para-ui/icons/LoadingF';
+import '../Tooltip/index.js';
+import 'rc-tooltip';
+import 'rc-tooltip/lib/placements';
+import '@para-ui/icons/Forbid';
+import '../_verture/useGlobalProps-4ae1a007.js';
+import '../_verture/index-bde7aabe.js';
+import 'rc-dropdown';
+import '../_verture/usePopupContainer-635f66f4.js';
+import 'dayjs';
+import '../Help/index.js';
+import '@para-ui/icons/Help';
+import '@para-ui/icons/Down';
+
+var en = {
+  retrievedAgain: '{second} seconds to retrieve again',
+  reset: 'resend',
+  getCode: 'Get Code',
+  secondCountdown: '{second}s'
+};
+
+var zh = {
+  retrievedAgain: '{second}秒后可重新获取',
+  reset: '重新发送',
+  getCode: '获取验证码',
+  secondCountdown: '{second}秒'
+};
+
+var localeJson = {
+  zh: zh,
+  en: en
+};
+
+var css_248z$2 = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-input-code.paraui-v4-input-code-card {\n  text-align: center;\n}\n.paraui-v4-input-code.paraui-v4-input-code-card > .tip {\n  margin-bottom: 20px;\n  text-align: center;\n  font-size: 14px;\n  color: rgb(29, 33, 38);\n  line-height: 20px;\n}\n.paraui-v4-input-code.paraui-v4-input-code-card > .tip > span .countdown {\n  display: inline-block;\n  min-width: 20px;\n  text-align: center;\n  text-decoration: underline;\n}\n.paraui-v4-input-code.paraui-v4-input-code-card > .tip > .reset-code {\n  color: rgb(46, 101, 230);\n  cursor: pointer;\n}\n.paraui-v4-input-code.paraui-v4-input-code-card > .tip > .reset-code:hover {\n  color: rgb(87, 131, 235);\n}\n.paraui-v4-input-code.paraui-v4-input-code-card > .content {\n  display: inline-block;\n}\n.paraui-v4-input-code.paraui-v4-input-code-card > .content > .content-card {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.paraui-v4-input-code.paraui-v4-input-code-card > .content > .content-card > .card-input {\n  width: 40px;\n  height: 40px;\n  margin-right: 10px;\n}\n.paraui-v4-input-code.paraui-v4-input-code-card > .content > .content-card > .card-input > .text-field-content {\n  height: 40px;\n}\n.paraui-v4-input-code.paraui-v4-input-code-card > .content > .content-card > .card-input > .text-field-content > .text-field-content-within > .text-field-content-within-input {\n  height: 38px;\n}\n.paraui-v4-input-code.paraui-v4-input-code-card > .content > .content-card > .card-input > .text-field-content > .text-field-content-within > .text-field-content-within-input > input {\n  text-align: center;\n  font-size: 20px;\n  padding: 0;\n}\n.paraui-v4-input-code.paraui-v4-input-code-card > .content > .content-card > .separator {\n  margin-right: 10px;\n}\n.paraui-v4-input-code.paraui-v4-input-code-card > .content > .paraui-v4-helper-text {\n  text-align: left;\n}\n.paraui-v4-input-code.paraui-v4-input-code-card.paraui-v4-input-code-card-underline > .content > .content-card > .card-input > .text-field-content {\n  border-left: none;\n  border-top: none;\n  border-right: none;\n  border-radius: 0;\n}";
+styleInject(css_248z$2);
+
+const InputCodeCard = props => {
+  const {
+    className,
+    style,
+    type = 'card',
+    size = 'large',
+    cardNumber = 6,
+    separator = '-',
+    defaultValue,
+    value,
+    countdown = 60,
+    refreshCountdown,
+    error = false,
+    hideErrorDom,
+    helperText,
+    sendText,
+    inputProps,
+    onChange,
+    onFinish,
+    onReset
+  } = props;
+  const intl = useFormatMessage('InputCode', localeJson);
+  const [valueCom, setValueCom] = useState(new Array(cardNumber).fill(''));
+  const [countdownCom, setCountdownCom] = useState(countdown);
+  const [countdownLoading, setCountdownLoading] = useState(false);
+  const comRef = useRef(null);
+  const constData = useRef({
+    countdown,
+    countdownCom
+  });
+  constData.current.countdownCom = countdownCom;
+  useEffect(() => {
+    if (props.defaultValue !== undefined) {
+      setValueCom(props.defaultValue);
+    }
+    onFocusDom(0);
+    return () => {
+      clearInterval(constData.current.timer);
+    };
+  }, []);
+  useEffect(() => {
+    if (value !== undefined) {
+      setValueCom(value);
+    }
+  }, [value]);
+  useEffect(() => {
+    if (refreshCountdown !== undefined && refreshCountdown !== null) {
+      startCountdown();
+    }
+  }, [refreshCountdown]);
+  // 倒计时
+  const startCountdown = () => {
+    clearInterval(constData.current.timer);
+    constData.current.countdownCom = constData.current.countdown;
+    setCountdownCom(constData.current.countdownCom);
+    onFocusDom(0);
+    setCountdownLoading(true);
+    constData.current.timer = setInterval(() => {
+      constData.current.countdownCom--;
+      setCountdownCom(constData.current.countdownCom);
+      if (constData.current.countdownCom === 0) {
+        clearInterval(constData.current.timer);
+        setCountdownLoading(false);
+      }
+    }, 1000);
+  };
+  // 得到焦点
+  const onFocusDom = index => {
+    if (!comRef.current) return;
+    const inputDom = comRef.current.querySelector(".card-input-".concat(index, " input"));
+    inputDom.focus();
+  };
+  const changeInput = index => event => {
+    let val = event.target.value.trim();
+    val = val[val.length - 1] || '';
+    valueCom[index] = val;
+    if (props.value === undefined) {
+      setValueCom([...valueCom]);
+    }
+    onChange && onChange([...valueCom]);
+    if (index === cardNumber - 1) {
+      // 最后一个
+      const str = valueCom.join('');
+      if (str.length === cardNumber) onFinish && onFinish(str);
+    } else {
+      if (val !== '') onFocusDom(++index);
+    }
+  };
+  const onKeydown = index => event => {
+    var _a;
+    if (event.keyCode === 8 && index !== 0 && ((_a = event.target) === null || _a === void 0 ? void 0 : _a.value) === '') {
+      onFocusDom(index - 1);
+    }
+  };
+  const handleContent = () => {
+    const evenNUmber = cardNumber % 2;
+    return jsx("div", Object.assign({
+      className: 'content-card'
+    }, {
+      children: new Array(cardNumber).fill(1).map((item, index) => {
+        return jsxs(Fragment, {
+          children: [jsx(TextField, Object.assign({}, inputProps === null || inputProps === void 0 ? void 0 : inputProps(index), {
+            className: "card-input card-input-".concat(index),
+            error: error,
+            hideErrorDom: true,
+            value: valueCom[index],
+            onChange: changeInput(index),
+            onKeydown: onKeydown(index)
+          })), separator && evenNUmber === 0 && index + 1 === cardNumber / 2 && jsx("div", Object.assign({
+            className: 'separator'
+          }, {
+            children: separator
+          }))]
+        }, index);
+      })
+    }));
+  };
+  const onResetCom = () => __awaiter(void 0, void 0, void 0, function* () {
+    if (constData.current.reqLoading) return;
+    constData.current.reqLoading = true;
+    const bol = yield onReset === null || onReset === void 0 ? void 0 : onReset();
+    constData.current.reqLoading = false;
+    if (bol) {
+      startCountdown();
+    }
+  });
+  return jsxs("div", Object.assign({
+    className: clsx(className, "".concat($prefixCls, "-input-code"), "".concat($prefixCls, "-input-code-card"), "".concat($prefixCls, "-input-code-card-").concat(size), "".concat($prefixCls, "-input-code-card-").concat(type), {
+      ["".concat($prefixCls, "-input-code-card-countdown")]: countdownLoading,
+      ["".concat($prefixCls, "-input-code-card-error")]: error
+    }),
+    style: style,
+    ref: comRef
+  }, {
+    children: [refreshCountdown !== undefined && refreshCountdown !== null && jsxs("div", Object.assign({
+      className: 'tip'
+    }, {
+      children: [jsx("span", {
+        children: sendText
+      }), countdownLoading ? jsx("span", {
+        children: intl({
+          id: 'retrievedAgain'
+        }, {
+          second: jsx("span", Object.assign({
+            className: 'countdown'
+          }, {
+            children: countdownCom
+          }), 'countdown')
+        })
+      }) : jsx("span", Object.assign({
+        className: 'reset-code',
+        onClick: onResetCom
+      }, {
+        children: intl({
+          id: 'reset'
+        })
+      }))]
+    })), jsxs("div", Object.assign({
+      className: 'content'
+    }, {
+      children: [handleContent(), jsx(HelperText, {
+        error: error,
+        helperText: helperText,
+        hideErrorDom: hideErrorDom
+      })]
+    }))]
+  }));
+};
+
+var css_248z$1 = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-input-code.paraui-v4-input-code-input > .content {\n  display: flex;\n}\n.paraui-v4-input-code.paraui-v4-input-code-input > .content > .get-code {\n  margin-left: 10px;\n  text-align: center;\n}\n.paraui-v4-input-code.paraui-v4-input-code-input > .content > .content-input {\n  flex: 1;\n  overflow: hidden;\n}\n.paraui-v4-input-code.paraui-v4-input-code-input > .content > .content-input .text-field-content-after {\n  padding: 0;\n}\n.paraui-v4-input-code.paraui-v4-input-code-input > .content > .content-input .text-field-content-after .get-code-input {\n  padding: 0 10px;\n  color: rgb(46, 101, 230);\n  cursor: pointer;\n  text-align: center;\n}\n.paraui-v4-input-code.paraui-v4-input-code-input > .content > .content-input .text-field-content-after .get-code-input:hover {\n  color: rgb(87, 131, 235);\n}\n.paraui-v4-input-code.paraui-v4-input-code-input > .content > .content-input > .paraui-v4-helper-text {\n  display: none;\n}\n.paraui-v4-input-code.paraui-v4-input-code-input.paraui-v4-input-code-input-countdown > .content .text-field-content-after .get-code-input {\n  color: rgb(92, 101, 115);\n  cursor: not-allowed;\n}\n.paraui-v4-input-code.paraui-v4-input-code-input.paraui-v4-input-code-input-countdown > .content .text-field-content-after .get-code-input:hover {\n  color: rgb(92, 101, 115);\n}";
+styleInject(css_248z$1);
+
+const InputCodeInput = props => {
+  const {
+    className,
+    style,
+    size,
+    type = 'btnIntegrated',
+    label,
+    labelTooltip,
+    placeholder,
+    required,
+    error = false,
+    hideErrorDom,
+    helperText,
+    countdown = 60,
+    defaultValue,
+    value,
+    onGetCode,
+    getCodeWidth = '100px',
+    inputProps,
+    onChange
+  } = props;
+  const intl = useFormatMessage('InputCode', localeJson);
+  const [valueCom, setValueCom] = useState('');
+  const [countdownCom, setCountdownCom] = useState(countdown);
+  const [countdownLoading, setCountdownLoading] = useState(false);
+  const comRef = useRef(null);
+  const constData = useRef({
+    countdown,
+    countdownCom
+  });
+  useEffect(() => {
+    if (props.defaultValue !== undefined) {
+      setValueCom(props.defaultValue);
+    }
+    return () => {
+      clearInterval(constData.current.timer);
+    };
+  }, []);
+  useEffect(() => {
+    if (value !== undefined) {
+      setValueCom(value);
+    }
+  }, [value]);
+  // 倒计时
+  const startCountdown = () => {
+    clearInterval(constData.current.timer);
+    constData.current.countdownCom = constData.current.countdown;
+    setCountdownCom(constData.current.countdownCom);
+    setCountdownLoading(true);
+    constData.current.timer = setInterval(() => {
+      constData.current.countdownCom--;
+      setCountdownCom(constData.current.countdownCom);
+      if (constData.current.countdownCom === 0) {
+        clearInterval(constData.current.timer);
+        setCountdownLoading(false);
+      }
+    }, 1000);
+  };
+  /** 处理标题 */
+  const renderLabel = () => {
+    if (label || required) {
+      return jsx(Label, Object.assign({
+        label: label,
+        required: required
+      }, labelTooltip));
+    }
+  };
+  /** 获取验证码事件 */
+  const getCodeFunc = () => __awaiter(void 0, void 0, void 0, function* () {
+    if (constData.current.reqLoading) return;
+    constData.current.reqLoading = true;
+    const bol = yield onGetCode === null || onGetCode === void 0 ? void 0 : onGetCode();
+    constData.current.reqLoading = false;
+    if (bol) {
+      startCountdown();
+    }
+  });
+  const handleCodeText = () => {
+    if (countdownLoading) {
+      return intl({
+        id: 'secondCountdown'
+      }, {
+        second: countdownCom
+      });
+    }
+    return intl({
+      id: "getCode"
+    });
+  };
+  /** 渲染输入框按钮 */
+  const addonAfterRender = () => {
+    if (type === 'btnSplit') return undefined;
+    return jsx("div", Object.assign({
+      className: 'get-code-input',
+      style: {
+        width: getCodeWidth
+      },
+      onClick: getCodeFunc
+    }, {
+      children: jsx(AutoTips, {
+        children: handleCodeText()
+      })
+    }));
+  };
+  /** 改变输入框 */
+  const onChangeInput = event => {
+    const val = event.target.value.trim();
+    if (props.value === undefined) {
+      setValueCom(val);
+    }
+    onChange && onChange(val);
+  };
+  /** 渲染内容 */
+  const renderContent = () => {
+    return jsxs("div", Object.assign({
+      className: 'content'
+    }, {
+      children: [jsx(TextField, Object.assign({}, inputProps, {
+        className: 'content-input',
+        size: size,
+        error: error,
+        hideErrorDom: true,
+        placeholder: placeholder,
+        addonAfter: addonAfterRender(),
+        value: valueCom,
+        onChange: onChangeInput
+      })), type === 'btnSplit' && jsx(Button, Object.assign({
+        size: size,
+        className: 'get-code',
+        style: {
+          width: getCodeWidth
+        },
+        disabled: countdownLoading,
+        onClick: getCodeFunc
+      }, {
+        children: jsx(AutoTips, {
+          children: handleCodeText()
+        })
+      }))]
+    }));
+  };
+  return jsxs("div", Object.assign({
+    className: clsx(className, "".concat($prefixCls, "-input-code"), "".concat($prefixCls, "-input-code-input"), "".concat($prefixCls, "-input-code-input-").concat(size), "".concat($prefixCls, "-input-code-input-").concat(type), {
+      ["".concat($prefixCls, "-input-code-input-countdown")]: countdownLoading,
+      ["".concat($prefixCls, "-input-code-input-error")]: error
+    }),
+    style: style,
+    ref: comRef
+  }, {
+    children: [renderLabel(), renderContent(), jsx(HelperText, {
+      error: error,
+      helperText: helperText,
+      hideErrorDom: hideErrorDom
+    })]
+  }));
+};
+
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/";
+styleInject(css_248z);
+
+const InputCode = {
+  Card: InputCodeCard,
+  Input: InputCodeInput
+};
+
+export { InputCode, InputCode as default };

package/InputCode/inputCodeCard/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @author linhd
+ * @date 2024/8/16 16:33
+ * @description 验证码
+ */
+import { FunctionComponent } from 'react';
+import { InputCodeCardProps } from "../index";
+import './index.scss';
+export declare const InputCodeCard: FunctionComponent<InputCodeCardProps>;
+export default InputCodeCard;

package/InputCode/inputCodeInput/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @author linhd
+ * @date 2024/8/16 16:33
+ * @description 验证码
+ */
+import { FunctionComponent } from 'react';
+import { InputCodeInputProps } from "../index";
+import './index.scss';
+export declare const InputCodeInput: FunctionComponent<InputCodeInputProps>;
+export default InputCodeInput;

package/InputCode/lang/en_US.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    retrievedAgain: string;
+    reset: string;
+    getCode: string;
+    secondCountdown: string;
+};
+export default _default;

package/InputCode/lang/index.d.ts

@@ -0,0 +1,15 @@
+declare const _default: {
+    zh: {
+        retrievedAgain: string;
+        reset: string;
+        getCode: string;
+        secondCountdown: string;
+    };
+    en: {
+        retrievedAgain: string;
+        reset: string;
+        getCode: string;
+        secondCountdown: string;
+    };
+};
+export default _default;

package/InputCode/lang/zh_CN.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    retrievedAgain: string;
+    reset: string;
+    getCode: string;
+    secondCountdown: string;
+};
+export default _default;

package/PopConfirm/index.js

@@ -35,8 +35,8 @@ var zh = {
 };
 
 var localeJson = {
-  zh: zh,
-  en: en
+  zh,
+  en
 };
 
 var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/2 下午1:44\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-popconfirm.paraui-v4-tooltip {\n  position: absolute;\n  width: 440px;\n  padding: 0;\n  font-size: 14px;\n  color: initial;\n  background-color: rgb(255, 255, 255);\n  box-shadow: 1px 1px 10px 2px rgba(212, 218, 227, 0.4);\n  border-radius: 8px;\n  border: 1px solid rgba(212, 218, 227, 0.4);\n}\n.paraui-v4-popconfirm.component-tooltip-hidden.paraui-v4-tooltip {\n  border: none;\n}\n.paraui-v4-popconfirm.paraui-v4-tooltip .component-tooltip-inner {\n  padding: 0;\n  color: initial;\n  background-color: transparent;\n}\n.paraui-v4-popconfirm .popconfirm-wrapper {\n  padding: 16px;\n}\n.paraui-v4-popconfirm .popconfirm-wrapper .popconfirm-message {\n  position: relative;\n}\n.paraui-v4-popconfirm .popconfirm-wrapper .popconfirm-message-icon {\n  position: absolute;\n  top: 1px;\n  color: rgb(255, 147, 38);\n  line-height: 0;\n  font-size: 18px;\n}\n.paraui-v4-popconfirm .popconfirm-wrapper .popconfirm-message-icon svg {\n  color: inherit;\n  font-size: inherit;\n}\n.paraui-v4-popconfirm .popconfirm-wrapper .popconfirm-message-body {\n  padding-left: 24px;\n  line-height: 20px;\n  font-size: 14px;\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-popconfirm .popconfirm-wrapper .popconfirm-message-title {\n  font-weight: 600;\n}\n.paraui-v4-popconfirm .popconfirm-wrapper .popconfirm-message-content {\n  font-weight: 400;\n  margin-top: 8px;\n}\n.paraui-v4-popconfirm .popconfirm-wrapper .popconfirm-message-content.without-title {\n  margin-top: 0;\n}\n.paraui-v4-popconfirm .popconfirm-wrapper .popconfirm-message-description {\n  margin-top: 4px;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-popconfirm .popconfirm-wrapper .popconfirm-message-description.without-title-or-content {\n  margin-top: 0;\n}\n.paraui-v4-popconfirm .popconfirm-wrapper .popconfirm-btns {\n  margin-top: 12px;\n  text-align: right;\n}\n.paraui-v4-popconfirm .popconfirm-wrapper .popconfirm-btns > button + button {\n  margin-left: 12px;\n}\n.paraui-v4-popconfirm .paraui-v4-popconfirm-btn {\n  min-width: 54px;\n}";

package/Querying/index.js

@@ -8,7 +8,7 @@ import 'react';
 import '../_verture/index-ca413216.js';
 import '@paraview/lib';
 
-const LargeSearch = () => {
+var LargeSearch = function LargeSearch() {
   return jsx("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     width: "100%",
@@ -445,7 +445,7 @@ const LargeSearch = () => {
     }))
   }));
 };
-const SmallSearch = () => {
+var SmallSearch = function SmallSearch() {
   return jsx("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     width: "100%",
@@ -684,8 +684,8 @@ var zh = {
 };
 
 var localeJson = {
-  zh,
-  en
+  zh: zh,
+  en: en
 };
 
 var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/4/2 上午10:55\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-querying {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n}\n.paraui-v4-querying > .querying-image {\n  line-height: 0;\n  overflow: hidden;\n}\n.paraui-v4-querying > .querying-image img {\n  width: 100%;\n}\n.paraui-v4-querying .querying-image-large {\n  width: 334px;\n  height: 238px;\n}\n.paraui-v4-querying .querying-image-small {\n  width: 120px;\n  height: 80px;\n}\n.paraui-v4-querying > .querying-description {\n  line-height: 17px;\n  font-size: 14px;\n  font-weight: 400;\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-querying.paraui-v4-querying-large > .querying-description {\n  margin-top: 20px;\n}\n.paraui-v4-querying.paraui-v4-querying-small > .querying-description {\n  margin-top: 10px;\n  font-size: 14px;\n}";

package/README.md

@@ -1,3 +1,13 @@
+## 版本: 4.0.33
+    para-ui/core@4.0.33 发布
+        【表格-Table】新增拖拽排序表格
+        【自动按钮-AutoButton】新增拖拽排序表格
+
+## 版本: 4.0.32
+    para-ui/core@4.0.32 发布
+        【验证码-InputCode】新增验证码组件
+        【排序容器-SortBox】修改排序事件
+
 ## 版本: 4.0.31
     para-ui/core@4.0.31 发布
         【滑块验证码-DragVerify】阻止移动端滑块触发屏幕滑动事件

package/Select/index.js

@@ -42,8 +42,8 @@ var zh = {
 };
 
 var localeJson = {
-  zh: zh,
-  en: en
+  zh,
+  en
 };
 
 var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-select {\n  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  display: inline-block;\n  vertical-align: top;\n  width: 100%;\n}\n.paraui-v4-select > .select-content {\n  line-height: 0;\n  border: 1px solid;\n  border-radius: 4px;\n  border-color: rgb(212, 218, 227);\n  padding-right: 10px;\n  position: relative;\n  cursor: pointer;\n  background-color: rgb(255, 255, 255);\n}\n.paraui-v4-select > .select-content:hover {\n  border-color: rgb(87, 131, 235);\n}\n.paraui-v4-select > .select-content:hover > .select-svg > svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-select > .select-content > .select-label-placeholder {\n  width: 100%;\n  height: 100%;\n  padding: 0 10px;\n  color: rgb(161, 168, 179);\n  display: inline-block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  position: absolute;\n  left: 0;\n  top: 0;\n  z-index: 1;\n}\n.paraui-v4-select > .select-content > .select-label-placeholder > .select-required {\n  margin-left: 2px;\n  color: rgb(244, 66, 66);\n}\n.paraui-v4-select > .select-content > .select-svg {\n  position: absolute;\n  right: 10px;\n  top: 0;\n  z-index: 2;\n}\n.paraui-v4-select > .select-content > .select-svg > svg {\n  font-size: 18px;\n  transition: all 0.3s;\n  color: rgb(92, 101, 115);\n  opacity: 0;\n}\n.paraui-v4-select > .select-content > .select-svg > .clean-up-icon {\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 100%;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n}\n.paraui-v4-select > .select-content > .select-svg > .clean-up-icon > svg {\n  font-size: 16px;\n  transition: all 0.3s;\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-select > .select-content > .select-svg > .clean-up-icon:hover > svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-select > .select-content > .radio-select-content {\n  padding-left: 10px;\n  font-size: 14px;\n  line-height: 1.43;\n  color: rgb(29, 33, 38);\n  word-break: break-all;\n}\n.paraui-v4-select > .select-content > .radio-search-outside {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  line-height: 1.43;\n  padding: 0 10px 0 10px;\n  font-size: 14px;\n  cursor: pointer;\n  color: rgb(29, 33, 38);\n  border: 0;\n  border-radius: 4px;\n  background: transparent;\n  z-index: 10;\n}\n.paraui-v4-select > .select-content > .check-select-content {\n  padding-left: 10px;\n  overflow: hidden;\n}\n.paraui-v4-select > .select-content > .check-select-content > .check-select-content-item {\n  display: inline-block;\n  background-color: rgb(234, 236, 241);\n  border-radius: 2px;\n  padding: 0 30px 0 10px;\n  color: rgb(29, 33, 38);\n  margin-right: 4px;\n  vertical-align: top;\n  max-width: 100%;\n  white-space: nowrap;\n  position: relative;\n}\n.paraui-v4-select > .select-content > .check-select-content > .check-select-content-item.check-select-content-item-more {\n  cursor: pointer;\n  color: rgb(29, 33, 38);\n  padding-right: 10px;\n}\n.paraui-v4-select > .select-content > .check-select-content > .check-select-content-item.check-select-content-item-more > span {\n  max-width: none;\n}\n.paraui-v4-select > .select-content > .check-select-content > .check-select-content-item.check-select-content-item-more:hover {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-select > .select-content > .check-select-content > .check-select-content-item > span {\n  display: inline-block;\n  height: 100%;\n  vertical-align: top;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.paraui-v4-select > .select-content > .check-select-content > .check-select-content-item > svg {\n  cursor: pointer;\n  color: rgb(29, 33, 38);\n  font-size: 16px;\n  position: absolute;\n  z-index: 10;\n  right: 10px;\n}\n.paraui-v4-select > .select-content > .check-select-content > .check-select-content-item > svg:hover {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-select > .select-content > .check-select-content > .check-select-content-item.check-select-content-item-noclose {\n  padding-right: 10px;\n}\n.paraui-v4-select > .select-content > .check-select-content > .check-select-content-item.check-select-content-item-noclose > span {\n  max-width: none;\n}\n.paraui-v4-select > .select-content > .check-select-content > .check-search-outside {\n  width: 10px;\n  max-width: 100% !important;\n  display: none;\n  border: 0;\n  color: rgb(29, 33, 38);\n  font-size: 14px;\n  cursor: pointer;\n}\n.paraui-v4-select.paraui-v4-select-allow-clear > .select-content {\n  padding-right: 38px;\n}\n.paraui-v4-select.paraui-v4-select-allow-clear > .select-content .select-label-placeholder {\n  padding-right: 38px;\n}\n.paraui-v4-select.paraui-v4-select-allow-clear.paraui-v4-select-value > .select-content:hover > .select-svg > svg {\n  opacity: 0;\n  transition: all 0s;\n}\n.paraui-v4-select.paraui-v4-select-allow-clear.paraui-v4-select-value > .select-content:hover > .select-svg > .clean-up-icon {\n  opacity: 1;\n  transition: all 0.3s;\n}\n.paraui-v4-select.paraui-v4-select-allow-clear.paraui-v4-select-value.paraui-v4-select-disabled > .select-content:hover > .select-svg > svg {\n  opacity: 1;\n}\n.paraui-v4-select.paraui-v4-select-over-line > .select-content > .check-select-content {\n  display: flex;\n  flex-wrap: wrap;\n}\n.paraui-v4-select.paraui-v4-select-over-line > .select-content > .check-select-content input {\n  flex: 1;\n  z-index: 10;\n}\n.paraui-v4-select.paraui-v4-select-over-line.paraui-v4-select-small > .select-content {\n  height: inherit;\n  min-height: 28px;\n}\n.paraui-v4-select.paraui-v4-select-over-line.paraui-v4-select-small > .select-content > .check-select-content {\n  height: 100%;\n}\n.paraui-v4-select.paraui-v4-select-over-line.paraui-v4-select-medium > .select-content {\n  height: inherit;\n  min-height: 28px;\n}\n.paraui-v4-select.paraui-v4-select-over-line.paraui-v4-select-medium > .select-content > .check-select-content {\n  height: 100%;\n}\n.paraui-v4-select.paraui-v4-select-over-line.paraui-v4-select-large > .select-content {\n  height: inherit;\n  min-height: 32px;\n}\n.paraui-v4-select.paraui-v4-select-over-line.paraui-v4-select-large > .select-content > .check-select-content {\n  height: 100%;\n}\n.paraui-v4-select.paraui-v4-select-show-select > .select-content {\n  padding-right: 38px;\n}\n.paraui-v4-select.paraui-v4-select-show-select > .select-content .select-label-placeholder {\n  padding-right: 38px;\n}\n.paraui-v4-select.paraui-v4-select-show-select > .select-content > .select-svg > svg {\n  opacity: 1;\n}\n.paraui-v4-select.paraui-v4-select-show-select > .select-content > .radio-search-outside {\n  padding: 0 38px 0 10px;\n}\n.paraui-v4-select.paraui-v4-select-disabled > .select-content {\n  background-color: rgb(247, 248, 250);\n  cursor: not-allowed;\n}\n.paraui-v4-select.paraui-v4-select-disabled > .select-content:hover {\n  border-color: rgb(212, 218, 227);\n}\n.paraui-v4-select.paraui-v4-select-disabled > .select-content:hover > .select-svg > svg {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-select.paraui-v4-select-disabled > .select-content > .radio-select-content {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-select.paraui-v4-select-disabled > .select-content > .check-select-content > .check-select-content-item > span {\n  max-width: 100%;\n}\n.paraui-v4-select.paraui-v4-select-error > .select-content {\n  border-color: rgb(244, 66, 66) !important;\n}\n.paraui-v4-select.paraui-v4-select-open > .select-content {\n  border-color: rgb(46, 101, 230);\n}\n.paraui-v4-select.paraui-v4-select-open > .select-content > .select-svg > svg {\n  transform: rotate(180deg);\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-select.paraui-v4-select-open > .select-content > .check-select-content > .check-search-outside {\n  display: inline-block;\n}\n.paraui-v4-select.paraui-v4-select-small > .select-content {\n  height: 28px;\n}\n.paraui-v4-select.paraui-v4-select-small > .select-content > .select-label-placeholder {\n  line-height: 26px;\n}\n.paraui-v4-select.paraui-v4-select-small > .select-content > .select-svg {\n  top: 4px;\n}\n.paraui-v4-select.paraui-v4-select-small > .select-content > .radio-select-content {\n  padding-bottom: 3px;\n  padding-top: 3px;\n}\n.paraui-v4-select.paraui-v4-select-small > .select-content > .check-select-content {\n  padding-bottom: 3px;\n  height: 26px;\n}\n.paraui-v4-select.paraui-v4-select-small > .select-content > .check-select-content > .check-select-content-item {\n  margin-top: 3px;\n  height: 20px;\n  line-height: 20px;\n}\n.paraui-v4-select.paraui-v4-select-small > .select-content > .check-select-content > .check-select-content-item > svg {\n  top: 2px;\n}\n.paraui-v4-select.paraui-v4-select-small > .select-content > .check-select-content > .check-search-outside {\n  margin-top: 3px;\n  height: 20px;\n}\n.paraui-v4-select.paraui-v4-select-medium > .select-content {\n  height: 28px;\n}\n.paraui-v4-select.paraui-v4-select-medium > .select-content > .select-label-placeholder {\n  line-height: 26px;\n}\n.paraui-v4-select.paraui-v4-select-medium > .select-content > .select-svg {\n  top: 4px;\n}\n.paraui-v4-select.paraui-v4-select-medium > .select-content > .radio-select-content {\n  padding-bottom: 3px;\n  padding-top: 3px;\n}\n.paraui-v4-select.paraui-v4-select-medium > .select-content > .check-select-content {\n  padding-bottom: 3px;\n  height: 26px;\n}\n.paraui-v4-select.paraui-v4-select-medium > .select-content > .check-select-content > .check-select-content-item {\n  margin-top: 3px;\n  height: 20px;\n  line-height: 20px;\n}\n.paraui-v4-select.paraui-v4-select-medium > .select-content > .check-select-content > .check-select-content-item > svg {\n  top: 2px;\n}\n.paraui-v4-select.paraui-v4-select-medium > .select-content > .check-select-content > .check-search-outside {\n  margin-top: 3px;\n  height: 20px;\n}\n.paraui-v4-select.paraui-v4-select-large > .select-content {\n  height: 32px;\n}\n.paraui-v4-select.paraui-v4-select-large > .select-content > .select-label-placeholder {\n  line-height: 30px;\n}\n.paraui-v4-select.paraui-v4-select-large > .select-content > .select-svg {\n  top: 6px;\n}\n.paraui-v4-select.paraui-v4-select-large > .select-content > .radio-select-content {\n  padding-bottom: 5px;\n  padding-top: 5px;\n}\n.paraui-v4-select.paraui-v4-select-large > .select-content > .check-select-content {\n  padding-bottom: 3px;\n  height: 30px;\n}\n.paraui-v4-select.paraui-v4-select-large > .select-content > .check-select-content > .check-select-content-item {\n  margin-top: 3px;\n  height: 24px;\n  line-height: 24px;\n}\n.paraui-v4-select.paraui-v4-select-large > .select-content > .check-select-content > .check-select-content-item > svg {\n  top: 4px;\n}\n.paraui-v4-select.paraui-v4-select-large > .select-content > .check-select-content > .check-search-outside {\n  margin-top: 4px;\n  height: 22px;\n}\n\n.paraui-v4-select-popover.paraui-v4-select-popover-hide {\n  display: none !important;\n}\n.paraui-v4-select-popover.component-dropdown {\n  /*&.paraui-v4-select-popover-small {\n    & > .select-popover-content {\n      & > .select-popover-search {\n        height: 30px;\n      }\n\n      & > .select-popover-list {\n        & .select-popover-list-item {\n          height: 30px;\n          line-height: 30px;\n        }\n\n        & > .select-popover-list-group {\n          & .select-popover-list-group-label {\n            height: 30px;\n            line-height: 30px;\n          }\n        }\n      }\n    }\n  }\n\n  // 中\n  &.paraui-v4-select-popover-medium {\n    & > .select-popover-content {\n      & > .select-popover-search {\n        height: 30px;\n      }\n\n      & > .select-popover-list {\n        & .select-popover-list-item {\n          height: 30px;\n          line-height: 30px;\n        }\n\n        & > .select-popover-list-group {\n          & .select-popover-list-group-label {\n            height: 30px;\n            line-height: 30px;\n          }\n        }\n      }\n    }\n  }\n\n  // 大\n  &.paraui-v4-select-popover-large {\n    & > .select-popover-content {\n      & > .select-popover-search {\n        height: 30px;\n      }\n\n      & > .select-popover-list {\n        & .select-popover-list-item {\n          height: 30px;\n          line-height: 30px;\n        }\n\n        & > .select-popover-list-group {\n          & .select-popover-list-group-label {\n            height: 30px;\n            line-height: 30px;\n          }\n        }\n      }\n    }\n  }*/\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content {\n  padding: 4px 0;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content.select-popover-content-search > .select-popover-list {\n  padding-top: 0px;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content.select-popover-content-search > .select-popover-list > .select-nodata {\n  margin-top: 20px;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-search {\n  display: flex;\n  align-items: center;\n  padding: 0 10px;\n  border-bottom: 1px solid;\n  border-color: rgb(234, 236, 241);\n  height: 30px;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-search > input {\n  border: 0;\n  outline: none;\n  font-size: 14px;\n  color: rgb(29, 33, 38);\n  width: 100%;\n  height: 100%;\n  line-height: 1.43;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-search > input::placeholder {\n  font-size: 14px;\n  opacity: 1;\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-search > input::-ms-clear {\n  display: none;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-search > input::-ms-reveal {\n  display: none;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-search > input:-moz-placeholder {\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-search > input::-moz-placeholder {\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-search > input:-ms-input-placeholder { /* Internet Explorer 10-11 */\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-search > input::-ms-input-placeholder { /* Microsoft Edge */\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-search > svg {\n  color: rgb(92, 101, 115);\n  font-size: 18px;\n  cursor: pointer;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-list {\n  max-height: 320px;\n  overflow: auto;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-list.select-popover-list-loading {\n  height: 100px;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item {\n  display: flex;\n  cursor: pointer;\n  padding: 0 10px;\n  align-items: center;\n  height: 30px;\n  line-height: 30px;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item > .select-popover-list-item-label {\n  flex: 1;\n  overflow: hidden;\n  color: rgb(29, 33, 38);\n  font-size: 14px;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item > .select-popover-list-item-svg {\n  line-height: 0;\n  display: none;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item > .select-popover-list-item-svg > svg {\n  font-size: 18px;\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item.select-popover-list-item-select > .select-popover-list-item-label {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item.select-popover-list-item-select > .select-popover-list-item-svg {\n  display: inline-block;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item.select-popover-list-item-hover {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item.select-popover-list-item-keydown {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item.select-popover-list-item-disabled {\n  cursor: not-allowed;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item.select-popover-list-item-disabled > .select-popover-list-item-label {\n  color: rgb(161, 168, 179) !important;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-list > .select-popover-list-group .select-popover-list-group-label {\n  display: inline-block;\n  width: 100%;\n  padding: 0 10px;\n  color: rgb(161, 168, 179);\n  font-size: 12px;\n  height: 30px;\n  line-height: 30px;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-list > .select-nodata {\n  text-align: center;\n  font-size: 14px;\n  color: rgb(29, 33, 38);\n  margin-top: 16px;\n  margin-bottom: 29px;\n}\n.paraui-v4-select-more-popover {\n  /*// 小\n  &.paraui-v4-select-more-popover-small {\n    & .select-more {\n      & > .select-more-title {\n        line-height: 28px;\n      }\n\n      & > .select-more-content {\n        & > .select-more-content-item {\n          line-height: 28px;\n        }\n      }\n    }\n  }\n\n  // 中\n  &.paraui-v4-select-more-popover-medium {\n    & .select-more {\n      & > .select-more-title {\n        line-height: 32px;\n      }\n\n      & > .select-more-content {\n        & > .select-more-content-item {\n          line-height: 32px;\n        }\n      }\n    }\n  }\n\n  // 大\n  &.paraui-v4-select-more-popover-large {\n    & .select-more {\n      & > .select-more-title {\n        line-height: 36px;\n      }\n\n      & > .select-more-content {\n        & > .select-more-content-item {\n          line-height: 36px;\n        }\n      }\n    }\n  }*/\n}\n.paraui-v4-select-more-popover .select-more {\n  width: 290px;\n  padding: 4px 0;\n}\n.paraui-v4-select-more-popover .select-more > .select-more-title {\n  font-size: 12px;\n  padding: 0 10px;\n  color: rgb(161, 168, 179);\n  line-height: 30px;\n}\n.paraui-v4-select-more-popover .select-more > .select-more-content {\n  max-height: 320px;\n  overflow: auto;\n}\n.paraui-v4-select-more-popover .select-more > .select-more-content > .select-more-content-item {\n  padding: 0 10px;\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n  line-height: 30px;\n}\n.paraui-v4-select-more-popover .select-more > .select-more-content > .select-more-content-item:hover {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-select-more-popover .select-more > .select-more-content > .select-more-content-item > span {\n  flex: 1;\n  overflow: hidden;\n  display: inline-block;\n  font-size: 14px;\n}\n.paraui-v4-select-more-popover .select-more > .select-more-content > .select-more-content-item > svg {\n  font-size: 18px;\n  position: relative;\n  cursor: pointer;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-select-more-popover .select-more > .select-more-content > .select-more-content-item > svg:hover {\n  color: rgb(46, 101, 230);\n  border-radius: 2px;\n}";

package/SortBox/index.js

@@ -43,18 +43,38 @@ const SortBox = props => {
       }), index);
     });
   };
-  const onDragSort = newList => {
+  /** 数组交换位置 */
+  const moveElementToNthPosition = (arr, indexA, indexB) => {
+    // 使用splice方法移除索引a处的元素，并将其存储在变量element中
+    const element = arr.splice(indexA, 1)[0];
+    // 在索引n处插入被移除的元素
+    arr.splice(indexB, 0, element);
+    return arr;
+  };
+  const onDragSort = newList => {};
+  const onEnd = evt => {
+    if (evt.oldIndex === evt.newIndex) return;
+    const newList = [...(list || [])];
+    moveElementToNthPosition(newList, evt.oldIndex, evt.newIndex);
     onSort && onSort(newList);
   };
+  const handleList = () => {
+    const arr = [];
+    list === null || list === void 0 ? void 0 : list.forEach(item => {
+      arr.push({});
+    });
+    return arr;
+  };
   return jsx("div", Object.assign({
     className: clsx(className, "".concat($prefixCls, "-sort-box"), "".concat($prefixCls, "-sort-box-").concat(type)),
     style: style
   }, {
     children: jsx(dist.exports.ReactSortable, Object.assign({
-      list: list || [],
+      list: handleList(),
       handle: '.sort-icon',
-      animation: 150,
-      setList: onDragSort
+      animation: 300,
+      setList: onDragSort,
+      onEnd: onEnd
     }, {
       children: handleContent()
     }))