@para-ui/core 4.0.0-rc.6 → 4.0.0

package/QuickReply/index.js

@@ -0,0 +1,550 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useRef } from 'react';
+import clsx from 'clsx';
+import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
+import { d as dist } from '../_verture/index-28a6bc3a.js';
+import { Button } from '../Button/index.js';
+import { Checkbox } from '../Checkbox/index.js';
+import { TextField } from '../TextField/index.js';
+import { PopConfirm } from '../PopConfirm/index.js';
+import Empty from '../Empty/index.js';
+import AutoTips from '../AutoTips/index.js';
+import Plus from '@para-ui/icons/Plus';
+import Drag from '@para-ui/icons/Drag';
+import Delete from '@para-ui/icons/Delete';
+import EditOutline from '@para-ui/icons/EditOutline';
+import { UUID } from '@paraview/lib';
+import { u as useFormatMessage } from '../_verture/useFormatMessage-eb13cf56.js';
+import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
+import { Popover } from '../Popover/index.js';
+import Message from '@para-ui/icons/Message';
+import Set from '@para-ui/icons/Set';
+import '../_verture/sortable.esm-49896035.js';
+import '../_verture/tslib.es6-55ed4bd2.js';
+import '@para-ui/icons/LoadingF';
+import '../Tooltip/index.js';
+import 'rc-tooltip';
+import 'rc-tooltip/lib/placements';
+import '@para-ui/icons/Forbid';
+import '@para-ui/icons/Down';
+import '../_verture/index-da9097d3.js';
+import 'rc-dropdown';
+import '../_verture/usePopupContainer-635f66f4.js';
+import 'dayjs';
+import '@para-ui/core/GlobalContext';
+import '../Label/index.js';
+import '../Help/index.js';
+import '@para-ui/icons/Help';
+import '@para-ui/icons/PreviewClose';
+import '@para-ui/icons/PreviewOpen';
+import '@para-ui/icons/CloseCircleF';
+import '../Loading/index.js';
+import '../HelperText/index.js';
+import '../_verture/useGlobalProps-1e416658.js';
+import '@para-ui/icons/CheckCircleF';
+import '@para-ui/icons/WarningCircle';
+import '@para-ui/icons/WarningCircleF';
+
+var en = {
+  back: 'Back',
+  add: 'Add',
+  edit: 'Edit',
+  sort: 'Sort',
+  del: 'Delete',
+  delTip: 'After deletion, this reply will no longer be usable. Are you sure you want to delete it?',
+  batchDel: 'Batch Delete',
+  quickReply: 'Quick reply',
+  confirm: 'Confirm',
+  cancel: 'Cancel',
+  pleaseEnter: 'Please enter'
+};
+
+var zh = {
+  back: '返回',
+  add: '添加',
+  edit: '编辑',
+  sort: '排序',
+  del: '删除',
+  delTip: '删除后此回复将无法使用，确认要删除吗？',
+  batchDel: '批量删除',
+  quickReply: '快捷回复',
+  confirm: '确 认',
+  cancel: '取 消',
+  pleaseEnter: '请输入'
+};
+
+var localeJson = {
+  zh,
+  en
+};
+
+var css_248z$1 = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-quick-reply-code {\n  box-shadow: 1px 1px 10px 2px rgba(212, 218, 227, 0.4);\n  border-radius: 4px;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  position: relative;\n  background-color: rgb(255, 255, 255);\n}\n.paraui-v4-quick-reply-code > .quick-reply-code-top {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  height: 34px;\n  border-bottom: 1px solid rgb(212, 218, 227);\n}\n.paraui-v4-quick-reply-code > .quick-reply-code-bottom {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n  padding: 4px 0;\n}\n.paraui-v4-quick-reply-code > .quick-reply-code-bottom > .quick-reply-code-bottom-scroll {\n  overflow: auto;\n  width: 100%;\n}\n.paraui-v4-quick-reply-code > .quick-reply-code-bottom > .quick-reply-code-bottom-scroll > .list-empty {\n  text-align: center;\n}\n.paraui-v4-quick-reply-code > .quick-reply-code-bottom > .quick-reply-code-bottom-scroll > .info-item {\n  display: flex;\n  height: 30px;\n  align-items: center;\n  padding: 0 10px;\n  cursor: pointer;\n}\n.paraui-v4-quick-reply-code > .quick-reply-code-bottom > .quick-reply-code-bottom-scroll > .info-item:hover {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-quick-reply-code > .quick-reply-code-bottom > .quick-reply-code-bottom-scroll > .info-item > .info-item-checkbox {\n  margin-right: 10px;\n}\n.paraui-v4-quick-reply-code > .quick-reply-code-bottom > .quick-reply-code-bottom-scroll > .info-item > .label-box {\n  flex: 1;\n  overflow: hidden;\n  margin-right: 10px;\n  line-height: 30px;\n  font-size: 14px;\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-quick-reply-code > .quick-reply-code-bottom > .quick-reply-code-bottom-scroll > .info-item > svg {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-quick-reply-code > .quick-reply-code-bottom > .quick-reply-code-bottom-scroll > .info-item > svg:hover {\n  color: rgb(87, 131, 235);\n}\n.paraui-v4-quick-reply-code > .edit-box {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgb(255, 255, 255);\n  display: flex;\n  flex-direction: column;\n  padding: 20px;\n}\n.paraui-v4-quick-reply-code > .edit-box > .text-input {\n  flex: 1;\n}\n.paraui-v4-quick-reply-code > .edit-box > .text-input > .text-field-content {\n  height: 100%;\n}\n.paraui-v4-quick-reply-code > .edit-box > .text-input > .text-field-content textarea {\n  height: 100%;\n}\n.paraui-v4-quick-reply-code > .edit-box > .edit-footer {\n  margin-top: 20px;\n  display: flex;\n  justify-content: flex-end;\n}\n.paraui-v4-quick-reply-code > .edit-box > .edit-footer > button:first-child {\n  margin-right: 12px;\n}\n.paraui-v4-quick-reply-code.paraui-v4-quick-reply-code-line > .quick-reply-code-top > .sort-del-box > .del-btn {\n  position: relative;\n}\n.paraui-v4-quick-reply-code.paraui-v4-quick-reply-code-line > .quick-reply-code-top > .sort-del-box > .del-btn:after {\n  content: \"\";\n  position: absolute;\n  left: -10px;\n  top: 10px;\n  width: 1px;\n  height: 12px;\n  background-color: rgb(213, 224, 250);\n}";
+styleInject(css_248z$1);
+
+const QuickReplyCode = props => {
+  const {
+    rowKey = 'id',
+    labelKey = 'label',
+    valueKey = 'label',
+    limitLength,
+    className,
+    style,
+    list,
+    add = true,
+    edit = true,
+    del = true,
+    sort = true,
+    width = 440,
+    minHeight = 200,
+    maxHeight = 320,
+    placeholder,
+    onChange,
+    onSelect,
+    onShowDelete
+  } = props;
+  const intl = useFormatMessage('QuickReply', localeJson);
+  const [editText, setEditText] = useState({});
+  const [status, setStatus] = useState(); // 输入 排序 删除
+  const [selectKey, setSelectKey] = useState({}); // 选中的值
+  const [openDel, setOpenDel] = useState(); // 打开删除
+  const constData = useRef({
+    uuid: UUID()
+  });
+  const addClick = () => {
+    setEditText({
+      [rowKey]: UUID(),
+      [labelKey]: '',
+      [valueKey]: ''
+    });
+    setStatus('add');
+  };
+  const editClick = item => () => {
+    setEditText(Object.assign({}, item));
+    setStatus('edit');
+  };
+  const backClick = () => {
+    setStatus(undefined);
+    setSelectKey({});
+    setEditText({});
+  };
+  const sortClick = () => {
+    setStatus('sort');
+  };
+  const delStatus = () => {
+    if (status === 'del') {
+      onShowDelete && onShowDelete(true);
+      setOpenDel(constData.current.uuid);
+      return;
+    }
+    setStatus('del');
+  };
+  const clickItem = item => {
+    if (!status) {
+      onSelect && onSelect(item);
+      return;
+    }
+    if (status !== 'del' || openDel) return;
+    if (selectKey[item[rowKey]]) delete selectKey[item[rowKey]];else selectKey[item[rowKey]] = true;
+    setSelectKey(Object.assign({}, selectKey));
+  };
+  const delClick = item => event => {
+    event.stopPropagation();
+    onShowDelete && onShowDelete(true);
+    setOpenDel(item[rowKey]);
+  };
+  const onOkDel = item => {
+    let json = {};
+    if (item) {
+      json[item[rowKey]] = true;
+    }
+    if (constData.current.uuid === openDel) {
+      // 批量删除
+      json = Object.assign({}, selectKey);
+    }
+    const handleArr = [];
+    list === null || list === void 0 ? void 0 : list.forEach(listItem => {
+      const id = listItem[rowKey];
+      delete selectKey[id];
+      if (!json[id]) {
+        handleArr.push(listItem);
+      }
+    });
+    onChange && onChange(handleArr);
+    onShowDelete && onShowDelete(false);
+    setOpenDel(undefined);
+    setSelectKey(Object.assign({}, selectKey));
+  };
+  const onCancelDel = () => {
+    onShowDelete && onShowDelete(false);
+    setOpenDel(undefined);
+  };
+  const changeInput = event => {
+    editText[labelKey] = event.target.value;
+    editText[valueKey] = event.target.value;
+    setEditText(Object.assign({}, editText));
+  };
+  // 确认输入
+  const clickInput = () => {
+    if (status === 'add') onChange && onChange([editText, ...(list || [])]);else {
+      const arr = [];
+      list === null || list === void 0 ? void 0 : list.forEach(item => {
+        if (item[rowKey] === editText[rowKey]) arr.push(editText);else arr.push(item);
+      });
+      onChange && onChange(arr);
+    }
+    backClick();
+  };
+  // 处理头部
+  const handleHeader = () => {
+    if (!add && !sort && !del) return null;
+    return jsxs("div", Object.assign({
+      className: 'quick-reply-code-top'
+    }, {
+      children: [add && jsx("div", Object.assign({
+        className: 'add-box'
+      }, {
+        children: jsx(Button, Object.assign({
+          variant: "text",
+          startIcon: jsx(Plus, {}),
+          onClick: addClick
+        }, {
+          children: intl('add')
+        }))
+      })), jsxs("div", Object.assign({
+        className: 'sort-del-box'
+      }, {
+        children: [(status === 'del' || status === 'sort') && jsx(Button, Object.assign({
+          variant: "text",
+          className: 'back-btn',
+          onClick: backClick
+        }, {
+          children: intl('back')
+        })), sort && status !== 'sort' && status !== 'del' && jsx(Button, Object.assign({
+          variant: "text",
+          className: 'sort-btn',
+          onClick: sortClick,
+          disabled: !list || (list === null || list === void 0 ? void 0 : list.length) === 0
+        }, {
+          children: intl('sort')
+        })), del && status !== 'sort' && jsx(Fragment, {
+          children: status === 'del' ? jsx(PopConfirm, Object.assign({
+            title: intl('del'),
+            content: intl('delTip'),
+            controllable: true,
+            open: constData.current.uuid === openDel,
+            getPopupContainer: () => document.body,
+            placement: 'bottom-end',
+            onOk: onOkDel,
+            onCancel: onCancelDel
+          }, {
+            children: jsx(Button, Object.assign({
+              disabled: JSON.stringify(selectKey) === '{}',
+              variant: "text",
+              className: 'del-btn',
+              onClick: delStatus
+            }, {
+              children: intl('batchDel')
+            }))
+          })) : jsx(Button, Object.assign({
+            variant: "text",
+            className: 'del-btn',
+            disabled: !list || (list === null || list === void 0 ? void 0 : list.length) === 0,
+            onClick: delStatus
+          }, {
+            children: intl('del')
+          }))
+        })]
+      }))]
+    }));
+  };
+  // 处理图标
+  const handleIcon = item => {
+    if (status === 'del') {
+      return jsx(PopConfirm, Object.assign({
+        title: intl('del'),
+        content: intl('delTip'),
+        controllable: true,
+        open: item[rowKey] === openDel,
+        placement: 'bottom-end',
+        onOk: () => onOkDel(item),
+        onCancel: onCancelDel,
+        getPopupContainer: () => document.body
+      }, {
+        children: jsx(Delete, {
+          onClick: delClick(item)
+        })
+      }));
+    }
+    if (status === 'sort') return jsx(Drag, {
+      className: 'sort-icon'
+    });
+    if (edit) return jsx(EditOutline, {
+      onClick: editClick(item)
+    });
+    return null;
+  };
+  // 处理内容
+  const handleContent = () => {
+    if (!list || (list === null || list === void 0 ? void 0 : list.length) === 0) {
+      return jsx("div", Object.assign({
+        className: 'list-empty'
+      }, {
+        children: jsx(Empty, {
+          size: 'small'
+        })
+      }));
+    }
+    return jsx(Fragment, {
+      children: list === null || list === void 0 ? void 0 : list.map(item => {
+        return jsxs("div", Object.assign({
+          className: 'info-item',
+          onClick: () => clickItem(item)
+        }, {
+          children: [status === 'del' && jsx(Checkbox, {
+            className: 'info-item-checkbox',
+            checked: selectKey[item[rowKey]] || false
+          }), jsx("div", Object.assign({
+            className: 'label-box'
+          }, {
+            children: jsx(AutoTips, Object.assign({
+              placement: 'top-start'
+            }, {
+              children: item[labelKey]
+            }))
+          })), handleIcon(item)]
+        }), item[rowKey]);
+      })
+    });
+  };
+  const onDragSort = newValueList => {
+    const arr = [];
+    for (let i = 0, l = newValueList.length; i < l; i++) {
+      const item = newValueList[i];
+      delete item.chosen;
+      delete item.selected;
+      arr.push(item);
+    }
+    onChange && onChange(arr);
+  };
+  const handleContentRender = () => {
+    if (sort) {
+      return jsx(dist.exports.ReactSortable, Object.assign({
+        id: rowKey,
+        list: list || [],
+        handle: '.sort-icon',
+        animation: 150,
+        setList: onDragSort,
+        className: "quick-reply-code-bottom-scroll ".concat($prefixCls, "-scrollbar-small")
+      }, {
+        children: handleContent()
+      }));
+    }
+    return jsx("div", Object.assign({
+      className: "quick-reply-code-bottom-scroll"
+    }, {
+      children: handleContent()
+    }));
+  };
+  const handleTextField = () => {
+    if (status !== 'add' && status !== 'edit') return;
+    return jsxs("div", Object.assign({
+      className: 'edit-box'
+    }, {
+      children: [jsx(TextField, {
+        multiline: true,
+        className: 'text-input',
+        placeholder: placeholder || intl('pleaseEnter'),
+        resize: false,
+        hideErrorDom: true,
+        limitLength: limitLength,
+        value: editText[valueKey],
+        onChange: changeInput
+      }), jsxs("div", Object.assign({
+        className: 'edit-footer'
+      }, {
+        children: [jsx(Button, Object.assign({
+          variant: "outlined",
+          size: "small",
+          onClick: backClick
+        }, {
+          children: intl('cancel')
+        })), jsx(Button, Object.assign({
+          size: "small",
+          onClick: clickInput
+        }, {
+          children: intl('confirm')
+        }))]
+      }))]
+    }));
+  };
+  // 处理样式
+  const handleStyle = () => {
+    const styleCom = Object.assign({}, style);
+    if (width) styleCom.width = typeof width === "number" ? width + 'px' : width;
+    if (minHeight) styleCom.minHeight = typeof minHeight === "number" ? minHeight + 'px' : minHeight;
+    if (maxHeight) styleCom.maxHeight = typeof maxHeight === "number" ? maxHeight + 'px' : maxHeight;
+    return styleCom;
+  };
+  const handleLine = () => {
+    if (del && sort) return true;
+    if (del && status === 'del') return true;
+    return false;
+  };
+  return jsxs("div", Object.assign({
+    className: clsx("".concat($prefixCls, "-quick-reply-code"), "".concat($prefixCls, "-scrollbar-small"), className, {
+      ["".concat($prefixCls, "-quick-reply-code-add")]: add,
+      ["".concat($prefixCls, "-quick-reply-code-edit")]: edit,
+      ["".concat($prefixCls, "-quick-reply-code-del")]: del,
+      ["".concat($prefixCls, "-quick-reply-code-sort")]: sort,
+      ["".concat($prefixCls, "-quick-reply-code-line")]: handleLine()
+    }),
+    style: handleStyle()
+  }, {
+    children: [handleHeader(), jsx("div", Object.assign({
+      className: 'quick-reply-code-bottom'
+    }, {
+      children: handleContentRender()
+    })), handleTextField()]
+  }));
+};
+
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-quick-reply {\n  box-shadow: 1px 1px 10px 2px rgba(212, 218, 227, 0.4);\n  border-radius: 4px;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  position: relative;\n  background-color: rgb(255, 255, 255);\n  border: 1px solid rgb(212, 218, 227);\n}\n.paraui-v4-quick-reply > .quick-reply-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 10px;\n  height: 34px;\n}\n.paraui-v4-quick-reply > .quick-reply-header > button {\n  margin: 0;\n}\n.paraui-v4-quick-reply > .quick-reply-header > .set svg {\n  font-size: 16px;\n}\n.paraui-v4-quick-reply > .quick-reply-content {\n  border-top: 1px solid rgb(212, 218, 227);\n  flex: 1;\n  display: flex;\n}\n.paraui-v4-quick-reply > .quick-reply-content > .input-box {\n  height: 100%;\n}\n.paraui-v4-quick-reply > .quick-reply-content > .input-box .text-field-content {\n  border: none;\n  height: 100%;\n}\n.paraui-v4-quick-reply > .quick-reply-content > .input-box .text-field-content textarea {\n  height: 100%;\n  min-height: 103px;\n}";
+styleInject(css_248z);
+
+const QuickReply = props => {
+  const {
+    className,
+    style,
+    rowKey = 'id',
+    labelKey = 'label',
+    valueKey = 'label',
+    placeholder,
+    list,
+    rows,
+    value,
+    defaultValue,
+    quickReplyCodeProps,
+    renderQuickReplyBtn,
+    onChange,
+    onChangeList
+  } = props;
+  const intl = useFormatMessage('QuickReply', localeJson);
+  const [valueCom, setValueCom] = useState(defaultValue);
+  const [open, setOpen] = useState(false); // 打开快捷回复
+  const [openSetting, setOpenSetting] = useState(false); // 打开快捷回复
+  const constData = useRef({
+    delOpen: false
+  });
+  const handleValue = () => {
+    if (value !== undefined) return value;
+    return valueCom;
+  };
+  const changeInput = event => {
+    const val = event.target.value;
+    if (value === undefined) setValueCom(val);
+    onChange && onChange(val);
+  };
+  const onSelect = item => {
+    const val = item[valueKey];
+    if (value === undefined) setValueCom(val);
+    onChange && onChange(val);
+    setOpen(false);
+  };
+  const onChangeSetting = arr => {
+    onChangeList && onChangeList(arr);
+  };
+  const onVisibleChange = bol => {
+    if (openSetting) return;
+    setOpen(bol);
+  };
+  const onVisibleChangeSetting = bol => {
+    if (constData.current.delOpen) return;
+    setOpenSetting(bol);
+  };
+  // 快捷回复按钮
+  const handleQuickReplyBtn = () => {
+    return jsx(Popover, Object.assign({
+      open: open,
+      content: jsx(QuickReplyCode, Object.assign({
+        rowKey: rowKey,
+        labelKey: labelKey,
+        valueKey: valueKey,
+        add: false,
+        edit: false,
+        sort: false,
+        del: false,
+        list: list,
+        onSelect: onSelect
+      }, quickReplyCodeProps && quickReplyCodeProps('select'))),
+      trigger: 'click',
+      placement: 'bottom-start',
+      onVisibleChange: onVisibleChange
+    }, {
+      children: renderQuickReplyBtn || jsx(Button, Object.assign({
+        variant: "text",
+        startIcon: jsx(Message, {})
+      }, {
+        children: intl('quickReply')
+      }))
+    }));
+  };
+  // 处理设置按钮
+  const handleSetting = () => {
+    return jsx(Popover, Object.assign({
+      open: openSetting,
+      content: jsx(QuickReplyCode, Object.assign({
+        rowKey: rowKey,
+        labelKey: labelKey,
+        valueKey: valueKey,
+        list: list,
+        placeholder: placeholder,
+        onChange: onChangeSetting
+      }, quickReplyCodeProps && quickReplyCodeProps('setting'), {
+        onShowDelete: bol => {
+          constData.current.delOpen = bol;
+        }
+      })),
+      trigger: 'click',
+      placement: 'bottom-end',
+      onVisibleChange: onVisibleChangeSetting
+    }, {
+      children: jsx(Button.IconButton, Object.assign({
+        variant: "text",
+        className: 'set',
+        toolTipTitle: intl('edit')
+      }, {
+        children: jsx(Set, {})
+      }))
+    }));
+  };
+  const handleHeader = () => {
+    return jsxs("div", Object.assign({
+      className: 'quick-reply-header'
+    }, {
+      children: [handleQuickReplyBtn(), handleSetting()]
+    }));
+  };
+  const handleContent = () => {
+    return jsx("div", Object.assign({
+      className: 'quick-reply-content'
+    }, {
+      children: jsx(TextField, {
+        className: 'input-box',
+        multiline: true,
+        hideErrorDom: true,
+        rows: rows,
+        placeholder: placeholder || intl('pleaseEnter'),
+        value: handleValue(),
+        onChange: changeInput
+      })
+    }));
+  };
+  return jsxs("div", Object.assign({
+    className: clsx("".concat($prefixCls, "-quick-reply"), className),
+    style: style
+  }, {
+    children: [handleHeader(), handleContent()]
+  }));
+};
+
+export { QuickReply, QuickReplyCode, QuickReply as default };

package/QuickReply/lang/en_US.d.ts

@@ -0,0 +1,14 @@
+declare const _default: {
+    back: string;
+    add: string;
+    edit: string;
+    sort: string;
+    del: string;
+    delTip: string;
+    batchDel: string;
+    quickReply: string;
+    confirm: string;
+    cancel: string;
+    pleaseEnter: string;
+};
+export default _default;

package/QuickReply/lang/index.d.ts

@@ -0,0 +1,29 @@
+declare const _default: {
+    zh: {
+        back: string;
+        add: string;
+        edit: string;
+        sort: string;
+        del: string;
+        delTip: string;
+        batchDel: string;
+        quickReply: string;
+        confirm: string;
+        cancel: string;
+        pleaseEnter: string;
+    };
+    en: {
+        back: string;
+        add: string;
+        edit: string;
+        sort: string;
+        del: string;
+        delTip: string;
+        batchDel: string;
+        quickReply: string;
+        confirm: string;
+        cancel: string;
+        pleaseEnter: string;
+    };
+};
+export default _default;

package/QuickReply/lang/zh_CN.d.ts

@@ -0,0 +1,14 @@
+declare const _default: {
+    back: string;
+    add: string;
+    edit: string;
+    sort: string;
+    del: string;
+    delTip: string;
+    batchDel: string;
+    quickReply: string;
+    confirm: string;
+    cancel: string;
+    pleaseEnter: string;
+};
+export default _default;