@cloudbase/weda-ui 3.4.2 → 3.4.4

package/dist/web/components/flow/components/FlowUserSelect/index.js

@@ -0,0 +1,115 @@
+/* eslint-disable no-param-reassign */
+import React, { useState, useEffect, useMemo } from 'react';
+import { Justify, Button, Icon } from 'tea-component';
+import { Popup } from 'react-vant';
+import { safeJsonParse } from '../../../../utils/tool';
+import { WedaUserTransfer } from '../WedaUserTransfer';
+import './index.css';
+export const FlowUserSelect = (props) => {
+    const { visible, approveField, mode, close } = props;
+    const [selected, setSelected] = useState([]);
+    const [selectedUser, setSelectedUser] = useState([]);
+    const [collapse, setCollapseStatus] = useState(true);
+    useEffect(() => {
+        document.title = '选择人员';
+        const selectedAvatar = sessionStorage.getItem('selected');
+        selectedAvatar && setSelected(safeJsonParse(selectedAvatar || '[]'));
+    }, []);
+    const selectedLen = useMemo(() => selected.length, [selected]);
+    const removeId = (id) => {
+        setSelected(selected.filter((item) => item !== id));
+        setSelectedUser(selectedUser.filter((item) => (item === null || item === void 0 ? void 0 : item.UserId) !== id));
+    };
+    const handleHighLightSelected = (selected, flowData) => {
+        let v = '';
+        const { opinionUserMap, approveInfo } = flowData;
+        selected.forEach((id) => {
+            const user = selectedUser.find((user) => (user === null || user === void 0 ? void 0 : user.UserId) === id) || {};
+            const name = `@${user === null || user === void 0 ? void 0 : user.Name}`;
+            v = `${v + name} `;
+            if (!opinionUserMap[id]) {
+                opinionUserMap[id] = name;
+            }
+        });
+        flowData.approveInfo = approveInfo + v;
+        flowData.opinionUserMap = { ...opinionUserMap };
+    };
+    const saveSelect = () => {
+        var _a;
+        const flowData = (_a = safeJsonParse(sessionStorage.getItem('FlowActionsMobile'))) !== null && _a !== void 0 ? _a : {};
+        if (approveField === 'assigneeIds') {
+            flowData.assigneeIds = selected;
+            sessionStorage.setItem('hasSignSubmit', 'hasSignSubmit');
+        }
+        else if (approveField === 'highLightApprovers') {
+            handleHighLightSelected(selected, flowData);
+        }
+        else {
+            flowData[approveField] = selected;
+        }
+        sessionStorage.setItem('FlowActionsMobile', JSON.stringify(flowData));
+        sessionStorage.setItem(approveField, JSON.stringify(selectedUser));
+        // history.go(-1);
+        close === null || close === void 0 ? void 0 : close();
+    };
+    const onWedaUserSelectChange = ({ keys, rows }) => {
+        setSelected(keys);
+        setSelectedUser(rows);
+    };
+    useEffect(() => {
+        let lastTouchEnd = 0;
+        const touchstartFn = (event) => {
+            if (event.touches.length > 1) {
+                event.preventDefault();
+            }
+        };
+        const touchendFn = (event) => {
+            const now = new Date().getTime();
+            if (now - lastTouchEnd <= 300) {
+                event.preventDefault();
+            }
+            lastTouchEnd = now;
+        };
+        const gesturestartFn = (event) => {
+            event.preventDefault();
+        };
+        document.addEventListener('touchstart', touchstartFn);
+        document.addEventListener('touchend', touchendFn, false);
+        // 阻止双指放大
+        document.addEventListener('gesturestart', gesturestartFn);
+        return () => {
+            document.removeEventListener('touchstart', touchstartFn);
+            document.removeEventListener('touchend', touchendFn);
+            document.removeEventListener('gesturestart', gesturestartFn);
+        };
+    }, []);
+    return (React.createElement(Popup, { visible: visible, position: "bottom", className: "flow-user-select-mobile" },
+        React.createElement("section", { className: "page-info__wrapper-mobile" },
+            React.createElement(WedaUserTransfer, { multiple: mode === 'multiple', isMobile: true, onSelectedChange: onWedaUserSelectChange, value: selected, className: "flow-user-select-mobile-table" }),
+            React.createElement("footer", { className: "selected-info" },
+                React.createElement(Justify, { left: React.createElement("div", { className: "selected-info__left" },
+                        React.createElement("p", { className: "selected-count", onClick: () => setCollapseStatus(false) },
+                            React.createElement("span", { style: { display: 'inline-block' } },
+                                "\u5DF2\u9009\uFF1A",
+                                selectedLen,
+                                "\u4EBA"),
+                            React.createElement("span", { className: "collapse-spread" })),
+                        React.createElement("p", { className: "selected-people" }, selectedUser.map((item) => item === null || item === void 0 ? void 0 : item.Name).join(','))), right: React.createElement(React.Fragment, null,
+                        React.createElement(Button, { className: "submit-btn", type: "primary", onClick: saveSelect },
+                            "\u786E\u8BA4(",
+                            selectedLen,
+                            ")"),
+                        React.createElement(Button, { type: "link", onClick: () => {
+                                close === null || close === void 0 ? void 0 : close();
+                            } }, "\u5173\u95ED")) })),
+            React.createElement(Popup, { className: "SelectPersonOrg-popup", visible: !collapse, position: "bottom", style: { height: '440px' } },
+                React.createElement(React.Fragment, null,
+                    React.createElement("p", { className: "selected-title" },
+                        React.createElement(Button, { type: "text", onClick: () => setCollapseStatus(true) }, "\u53D6\u6D88"),
+                        React.createElement("span", null,
+                            "\u5DF2\u9009\uFF1A",
+                            selectedLen,
+                            "\u4EBA"),
+                        React.createElement(Button, { type: "link", onClick: saveSelect }, "\u5B8C\u6210")),
+                    React.createElement("div", { className: "selected-person" }, selectedUser.map((item) => (React.createElement(Justify, { key: item === null || item === void 0 ? void 0 : item.UserId, left: React.createElement("span", { className: "selected-person__name" }, item === null || item === void 0 ? void 0 : item.Name), right: React.createElement(Icon, { onClick: () => removeId(item === null || item === void 0 ? void 0 : item.UserId), type: "dismiss" }) })))))))));
+};

package/dist/web/components/flow/components/HighLightComment/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { safeJsonParse } from '../../../../utils/tool';
+export const HighLightComment = ({ details }) => {
+    const text = (details === null || details === void 0 ? void 0 : details.operationComment) || '';
+    let dom = '';
+    const positionMap = (details === null || details === void 0 ? void 0 : details.highlightPositionList) || '{}';
+    const obj = safeJsonParse(positionMap);
+    let startIndex = 0;
+    const arr = Object.entries(obj);
+    if (arr.length === 0) {
+        return text;
+    }
+    for (const [start, end] of arr) {
+        const name = text.substring(Number(start) + 1, end);
+        const domTemp = (React.createElement(React.Fragment, null,
+            text.substring(startIndex, Number(start)),
+            React.createElement("span", { style: { color: '#2473F2' } },
+                "@",
+                name)));
+        dom = (React.createElement(React.Fragment, null,
+            dom,
+            domTemp));
+        startIndex = end;
+    }
+    if (startIndex < text.length) {
+        dom = (React.createElement(React.Fragment, null,
+            dom,
+            text.substring(startIndex, text.length)));
+    }
+    return React.createElement("span", null, dom);
+};

package/dist/web/components/flow/components/HighlightTextarea/index.css

@@ -0,0 +1,42 @@
+.highlight-textarea-content {
+  display: inline-block;
+  width: 100%;
+}
+.highlight-textarea {
+  position: relative;
+  height: 100px;
+  border: 1px solid #dcdee6;
+  text-align: left;
+  overflow: scroll;
+  display: inline-block;
+  width: 99%;
+  margin-bottom: -5px;
+}
+.highlight-textarea .public-DraftEditorPlaceholder-root {
+  display: none;
+}
+.highlight-textarea .DraftEditor-root {
+  position: absolute;
+  width: 100%;
+  z-index: 1;
+}
+.highlight-textarea .DraftEditor-root .DraftEditor-editorContainer {
+  padding: 5px;
+  height: 6em;
+}
+.highlight-textarea
+  .DraftEditor-root
+  .DraftEditor-editorContainer
+  .public-DraftEditor-content {
+  height: 100%;
+}
+.highlight-textarea .DraftEditor-root .DraftEditor-editorContainer mark {
+  color: #888888;
+  background: transparent;
+}
+.highlight-textarea .highlight-textarea-placeholder {
+  position: absolute;
+  z-index: 0;
+  margin: 5px;
+  color: #999999;
+}

package/dist/web/components/flow/components/HighlightTextarea/index.js

@@ -0,0 +1,131 @@
+import React, { useState, useEffect, useRef } from 'react';
+import HighlightWithinTextarea from 'react-highlight-within-textarea';
+import { UserSelectModel } from '../UserSelectModel';
+import './index.css';
+export const HighlightTextarea = ({ size = 'pc', placeholder = '请输入', value, onChange, opinionUserMap, setOpinionUserMap, setHighlightPositionMap, }) => {
+    const [selectPersonModalShow, setSelectPersonModalShow] = useState(false);
+    const range = useRef();
+    const [placeholderVisible, setPlaceholderVisible] = useState(!value);
+    const [highlightPositions, setHighlightPositions] = useState([]);
+    const [copyMsg, setCopyMsg] = useState('');
+    useEffect(() => {
+        if (!value) {
+            setPlaceholderVisible(true);
+            setOpinionUserMap({});
+            return;
+        }
+        setPlaceholderVisible(false);
+        const { res: highlightPositions, obj: highlightPositionObj } = checkHighLight(value);
+        setHighlightPositions([...highlightPositions]);
+        setHighlightPositionMap({ ...highlightPositionObj });
+        const newOpinionUserMap = {};
+        // value每次change后需要再次检查opinionUserMap
+        for (const [id, name] of Object.entries(opinionUserMap)) {
+            if (value.indexOf(name) !== -1) {
+                newOpinionUserMap[id] = name;
+            }
+        }
+        setOpinionUserMap(newOpinionUserMap);
+    }, [value]);
+    const checkHighLight = (text) => {
+        const highlightList = Object.values(opinionUserMap);
+        const len = highlightList.length;
+        let v = text;
+        let res = [];
+        // 回显时使用，必须顺序排列
+        let obj = {};
+        for (let i = 0; i < len; i++) {
+            const indexof = v.indexOf(highlightList[i]);
+            const itemLen = highlightList[i].length;
+            if (indexof !== -1) {
+                const endIndex = indexof + itemLen;
+                res.push([indexof, endIndex]);
+                obj[indexof] = endIndex;
+                const fillText = new Array(itemLen).fill(' ').join(''); // 空格填充
+                v = v.substring(0, indexof) + fillText + v.substring(endIndex);
+            }
+        }
+        if (res.length > 0 && v.includes('@')) {
+            // 继续检查剩下文本，是否存在重复@
+            const { res: arr, obj: objCopy } = checkHighLight(v);
+            res = res.concat(arr);
+            obj = { ...obj, ...objCopy };
+        }
+        return { res, obj };
+    };
+    const changeValue = (addValue) => {
+        var _a;
+        const r = range.current;
+        (_a = r === null || r === void 0 ? void 0 : r.insertNode) === null || _a === void 0 ? void 0 : _a.call(r, document.createTextNode(addValue));
+        onChange(`${value}${addValue}`);
+    };
+    const getRange = () => {
+        // 弹起人员选择弹框
+        setSelectPersonModalShow(true);
+        // 获取光标选区位置
+        const s = window.getSelection();
+        const r = s.getRangeAt(0);
+        range.current = r;
+    };
+    const countAtSignal = (value) => {
+        let count1 = 0;
+        let count2 = 0;
+        for (const v of value) {
+            if (v === '@') {
+                count1 += 1;
+            }
+        }
+        for (const v of copyMsg) {
+            if (v === '@') {
+                count2 += 1;
+            }
+        }
+        return count1 === count2;
+    };
+    return (React.createElement("div", { className: "highlight-textarea-content" },
+        React.createElement("div", { className: "highlight-textarea", onKeyUp: (e) => {
+                if (size === 'pc' &&
+                    e.shiftKey &&
+                    (e.key === '@' || e.keyCode === 50)) {
+                    getRange();
+                    return;
+                }
+                if (size === 'pc' && e.keyCode === 50) {
+                    // 判断当下value值是否存在2
+                    if (!countAtSignal(value)) {
+                        getRange();
+                    }
+                }
+                // eslint-disable-next-line rulesdir/no-timer
+                setTimeout(() => setCopyMsg(value), 300);
+            }, onFocus: () => {
+                setPlaceholderVisible(false);
+            }, onBlur: () => {
+                if (!value) {
+                    setPlaceholderVisible(true);
+                }
+            } },
+            React.createElement(HighlightWithinTextarea, { value: value, onChange: (value) => {
+                    onChange(value);
+                }, highlight: highlightPositions }),
+            placeholderVisible && (React.createElement("div", { className: "highlight-textarea-placeholder" }, placeholder))),
+        React.createElement(UserSelectModel, { visible: selectPersonModalShow, placeholder: "\u8BF7\u9009\u62E9\u901A\u77E5\u4EBA\u5458", onClose: () => {
+                setSelectPersonModalShow(false);
+            }, onChange: (val) => {
+                let v = '';
+                const newOpinionUserMap = { ...opinionUserMap };
+                (val || []).forEach((item, index) => {
+                    const name = `@${item.text}`;
+                    v = `${v + item.text} `;
+                    if (index < val.length - 1) {
+                        v = `${v}@`;
+                    }
+                    if (!opinionUserMap[item.value]) {
+                        newOpinionUserMap[item.value] = name;
+                    }
+                });
+                setOpinionUserMap({ ...newOpinionUserMap });
+                changeValue(v || ' ');
+                setSelectPersonModalShow(false);
+            }, value: [] })));
+};

package/dist/web/components/flow/components/UserSelectModel/UserSelect.js

@@ -0,0 +1,74 @@
+import React, { useEffect, useRef } from 'react';
+import UserTreeSelect from '../../../form/userOrgSelect/component/user-select-h5';
+export function UserSelect(props) {
+    const { multiple = true, isMobile = false, placeholder, visible = false, onClose, } = props;
+    const visibleRef = useRef(visible);
+    useEffect(() => {
+        const onBodyClick = (e) => {
+            const element = e.target;
+            if (element.closest('.wedatea2td-icon-close') ||
+                element.closest('.wedatea2td-btn--weak')) {
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+            }
+        };
+        const evtOptions = { passive: true, capture: true };
+        document.addEventListener('click', onBodyClick, evtOptions);
+        return () => {
+            document.removeEventListener('click', onBodyClick, evtOptions);
+        };
+    }, []);
+    const { userSelectRef } = usePcUserSelectRef(visible);
+    const onTreeSelectChange = (value) => {
+        var _a, _b;
+        const selectedData = multiple ? value.data : [value.data];
+        const userList = selectedData === null || selectedData === void 0 ? void 0 : selectedData.map((user) => ({
+            text: (user === null || user === void 0 ? void 0 : user.userName) || (user === null || user === void 0 ? void 0 : user.content) || '-',
+            value: user.userId,
+        }));
+        (_a = props === null || props === void 0 ? void 0 : props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, userList || []);
+        (_b = props === null || props === void 0 ? void 0 : props.originOnChange) === null || _b === void 0 ? void 0 : _b.call(props, value);
+        if (visibleRef.current !== true) {
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        }
+    };
+    const commonProps = {
+        labelVisible: false,
+        decorator: null,
+        multiple,
+        size: 'auto-width',
+        defaultValue: props.value || [],
+        events: {
+            change: onTreeSelectChange,
+        },
+        placeholder,
+        style: {
+            display: 'none',
+        },
+    };
+    const mobileProps = {
+        modelType: 'model',
+        showType: 'h5',
+        dropDownStyle: { width: '190px' },
+        modelOpen: visible,
+    };
+    const pcProps = {
+        showType: 'pc',
+        outerRef: userSelectRef,
+        onClose,
+    };
+    const selectProps = { ...commonProps, ...(isMobile ? mobileProps : pcProps) };
+    return React.createElement(UserTreeSelect, { ...selectProps });
+}
+/**
+ * 针对Pc改版后的选人组件设置的自定义hook
+ */
+function usePcUserSelectRef(visible) {
+    const userSelectRef = useRef();
+    useEffect(() => {
+        var _a, _b, _c;
+        if (visible) {
+            (_c = (_b = (_a = userSelectRef.current) === null || _a === void 0 ? void 0 : _a.methods) === null || _b === void 0 ? void 0 : _b.open) === null || _c === void 0 ? void 0 : _c.call(_b);
+        }
+    }, [visible]);
+    return { userSelectRef };
+}

package/dist/web/components/flow/components/UserSelectModel/UserSelectMobile.css

@@ -0,0 +1,8 @@
+.flow-user-select-mobile {
+  height: calc(100% - 52px);
+}
+.flow-user-select-mobile .page-info__wrapper-mobile {
+  position: relative;
+  height: 100%;
+  background: #f2f2f2;
+}

package/dist/web/components/flow/components/UserSelectModel/UserSelectMobile.js

@@ -0,0 +1,86 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { safeJsonParse } from '../../../../utils/tool';
+import { UserSelect } from './UserSelect';
+import './UserSelectMobile.css';
+export const UserSelectMobile = (props) => {
+    const { visible, approveField, mode, close, values } = props;
+    const [selected, setSelected] = useState(values);
+    const visibleRef = useRef(visible);
+    useEffect(() => {
+        const selectedAvatar = sessionStorage.getItem('selected');
+        selectedAvatar && setSelected(safeJsonParse(selectedAvatar));
+    }, []);
+    const handleHighLightSelected = (selectedIds, selectedUser, flowData) => {
+        let v = '';
+        const { opinionUserMap, approveInfo } = flowData;
+        selectedIds.forEach((id) => {
+            const user = selectedUser.find((user) => (user === null || user === void 0 ? void 0 : user.UserId) === id) || {};
+            const name = `@${user === null || user === void 0 ? void 0 : user.Name}`;
+            v = `${v + name} `;
+            if (!opinionUserMap[id]) {
+                opinionUserMap[id] = name;
+            }
+        });
+        flowData.approveInfo = approveInfo + v;
+        flowData.opinionUserMap = { ...opinionUserMap };
+    };
+    const saveSelect = (selectedIds, selectedUser) => {
+        var _a;
+        const flowData = (_a = safeJsonParse(sessionStorage.getItem('FlowActionsMobile'))) !== null && _a !== void 0 ? _a : {};
+        if (approveField === 'assigneeIds') {
+            flowData.assigneeIds = selectedIds;
+            sessionStorage.setItem('hasSignSubmit', 'hasSignSubmit');
+        }
+        else if (approveField === 'highLightApprovers') {
+            handleHighLightSelected(selectedIds || [], selectedUser, flowData);
+        }
+        else {
+            flowData[approveField] = selectedIds;
+        }
+        sessionStorage.setItem('FlowActionsMobile', JSON.stringify(flowData));
+        sessionStorage.setItem(approveField, JSON.stringify(selectedUser));
+        if (visibleRef.current !== true) {
+            close === null || close === void 0 ? void 0 : close();
+        }
+    };
+    const onUserSelectChange = (rows) => {
+        var _a;
+        const isMultiple = mode === 'multiple';
+        const ids = isMultiple ? rows.value : [rows.value];
+        const users = (_a = rows.data) === null || _a === void 0 ? void 0 : _a.map((user) => ({
+            Name: (user === null || user === void 0 ? void 0 : user.userName) || (user === null || user === void 0 ? void 0 : user.content) || '-',
+            UserId: user.userId,
+        }));
+        saveSelect(ids, users);
+    };
+    useEffect(() => {
+        let lastTouchEnd = 0;
+        const touchstartFn = (event) => {
+            if (event.touches.length > 1) {
+                event.preventDefault();
+            }
+        };
+        const touchendFn = (event) => {
+            const now = new Date().getTime();
+            if (now - lastTouchEnd <= 300) {
+                event.preventDefault();
+            }
+            lastTouchEnd = now;
+        };
+        const gesturestartFn = (event) => {
+            event.preventDefault();
+        };
+        document.addEventListener('touchstart', touchstartFn);
+        document.addEventListener('touchend', touchendFn, false);
+        // 阻止双指放大
+        document.addEventListener('gesturestart', gesturestartFn);
+        return () => {
+            document.removeEventListener('touchstart', touchstartFn);
+            document.removeEventListener('touchend', touchendFn);
+            document.removeEventListener('gesturestart', gesturestartFn);
+        };
+    }, []);
+    return visible ? (React.createElement(UserSelect, { visible: true, isMobile: true, multiple: mode === 'multiple', value: selected, originOnChange: onUserSelectChange, onClose: () => {
+            close === null || close === void 0 ? void 0 : close();
+        } })) : null;
+};

package/dist/web/components/flow/components/UserSelectModel/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { WedaUserTransfer } from '../WedaUserTransfer';
+import { FlowUserSelect } from '../FlowUserSelect';
+import { UserSelect } from './UserSelect';
+import { UserSelectMobile } from './UserSelectMobile';
+const useOld = false;
+export function UserSelectModel(props) {
+    if (props.mobileModel) {
+        if (useOld) {
+            return React.createElement(FlowUserSelect, { ...props });
+        }
+        return React.createElement(UserSelectMobile, { ...props });
+    }
+    if (useOld) {
+        return React.createElement(WedaUserTransfer, { ...props, setOptions: props === null || props === void 0 ? void 0 : props.onChange });
+    }
+    return React.createElement(UserSelect, { ...props });
+}

package/dist/web/components/flow/components/WedaUserTransfer/index.css

@@ -0,0 +1,3 @@
+.weda-workbench__flow-user-search {
+  background-color: #fff !important;
+}