@cloudbase/weda-ui 3.4.5 → 3.4.6

package/dist/docs/common/componentList.js

@@ -135,7 +135,7 @@ export default function ComponentList() {
                 React.createElement("tbody", null, item[1].map((i) => {
                     return (React.createElement("tr", { key: i.name },
                         React.createElement("td", null,
-                            React.createElement("a", { href: i.meta.docsUrl }, i.meta.title),
+                            i.meta.docsUrl ? (React.createElement("a", { href: i.meta.docsUrl }, i.meta.title)) : (i.meta.title),
                             i.isStandardized && (React.createElement("span", { className: "wd-design-lable" }))),
                         React.createElement("td", null, i.name),
                         React.createElement("td", null, i.meta.description)));

package/dist/web/actions/showModal/index.js

@@ -11,7 +11,7 @@ const ModalShow = forwardRef(function ModalShow(props, ref) {
         setVisible(true);
     }, []);
     // 实例 ref 到外部
-    useImperativeHandle(ref, () => ({ setVisible }));
+    useImperativeHandle(ref, () => ({ setVisible }), [setVisible]);
     return React.createElement(Modal, { ...props, visible: visible });
 });
 function show(options) {

package/dist/web/components/calendar/index.js

@@ -15,7 +15,7 @@ const format = 'YYYY-MM-DD';
 const controlSectionSize = 'auto'; // 操作栏控件尺寸
 const week = ['一', '二', '三', '四', '五', '六', '日']; // 表头日历星期展示方式
 const isShowWeekend = true; // 是否显示周末
-export default function Calendar({ className, style, initVisible, initValue, configData = emptyArray, }) {
+export default function Calendar({ id, className, style, initVisible, initValue, configData = emptyArray, }) {
     // 'h5' || 'pc'
     const platform = usePlatform();
     const visible = typeof initVisible === 'boolean' ? initVisible : true;
@@ -131,7 +131,7 @@ export default function Calendar({ className, style, initVisible, initValue, con
             value: `${item.value}`,
         }));
     };
-    return (React.createElement("div", { "data-testid": "weda-calendar", className: classNames(blockName, 'weda-ui', platform === 'h5' ? `${blockName}-h5` : `${blockName}-pc`, {
+    return (React.createElement("div", { id: id, "data-testid": "weda-calendar", className: classNames(blockName, 'weda-ui', platform === 'h5' ? `${blockName}-h5` : `${blockName}-pc`, {
             [className]: className,
         }), style: style },
         React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },

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

@@ -1,7 +1,3 @@
 export * from './HighLightComment';
-export * from './HighlightTextarea';
-export * from './WedaUserTransfer';
 export * from './FlowStatusText';
-export * from './FlowUserSelect';
 export * from './FlowModuleText';
-export * from './UserSelectModel';

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

@@ -4,13 +4,13 @@ import { useMediaQuery } from '@react-hookz/web';
 import { useGlobalContext } from '../../../utils/hooks/context';
 import { globalContextConnect } from '../../../utils/hooks/globalConnect';
 import { safeJsonParse } from '../../../utils/tool';
-import { ControlModelUtils } from '../modules/control/utils';
 import { PAGE_TYPE } from '../constants';
 import { getCommonFlowData } from './getCommonFlowData';
 import { ICommonFlowDataProps } from './types';
-import { CommonFlowDataUtils } from './utils';
+import { CommonFlowDataUtils, FlowRequest } from './utils';
 import { useCommonFlowRequest, useElementMediaQuery, } from './hooks';
 export * from './types';
+export { CommonFlowDataUtils } from './utils';
 /**
  * 各个模块 通用的高阶函数 返回一个Container组件，包含一些公共属性和逻辑
  */
@@ -41,7 +41,7 @@ export function createModuleFrame(Component, moduleName) {
                 if (currentPageType === PAGE_TYPE.TO_DO &&
                     data.flowDetail.taskStatus > 1) {
                     // 将url参数中的pageType更新成Done
-                    ControlModelUtils.updateUrlSearch({ pageType: PAGE_TYPE.DONE });
+                    CommonFlowDataUtils.updateUrlSearch({ pageType: PAGE_TYPE.DONE });
                     // 设置表单状态为只读
                     data.flowLoadData.formType = 'read';
                 }
@@ -66,6 +66,7 @@ export function createModuleFrame(Component, moduleName) {
             currentPageType,
             callWedaApi,
             safeJsonParse,
+            flowRequest: new FlowRequest().request(callWedaApi, IS_WEDA_IDE),
         };
         return (React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
             React.createElement("div", { ...props, ref: containerRef },

package/dist/web/components/flow/frame/types.js

@@ -185,6 +185,12 @@ export class IFlowDetailProps {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "currentApproverName", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
     }
 }
 export class IPageInfoProps {
@@ -249,19 +255,19 @@ export class IPageInfoProps {
             writable: true,
             value: void 0
         });
-        Object.defineProperty(this, "outEntityCodes", {
+        Object.defineProperty(this, "buttons", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
+            value: {}
         });
-        Object.defineProperty(this, "buttons", {
+        Object.defineProperty(this, "dataSourceInputParams", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: {}
+            value: void 0
         });
-        Object.defineProperty(this, "dataSourceInputParams", {
+        Object.defineProperty(this, "outEntityCodes", {
             enumerable: true,
             configurable: true,
             writable: true,

package/dist/web/components/flow/frame/utils.js

@@ -1,3 +1,4 @@
+import { parse, stringify } from 'querystring';
 import { getPageQuery } from '../../../utils/getPageQuery';
 import { STATUS_NUMBER_MAPPING, STATUS, PAGE_TYPE } from '../constants';
 export class CommonFlowDataUtils {
@@ -41,12 +42,22 @@ export class CommonFlowDataUtils {
     /** 获取当前流程页面参数 */
     static getCurrentFlowPageQuery(isWedaIde) {
         const { flowTaskId, pageType: queryPageType } = getPageQuery();
-        const currentPageType = isWedaIde ? PAGE_TYPE.CREATEFLOW : queryPageType;
+        const currentPageType = isWedaIde ? PAGE_TYPE.TO_DO : queryPageType;
         return {
             flowTaskId: flowTaskId,
             currentPageType: currentPageType,
         };
     }
+    /** 更新浏览器参数 */
+    static updateUrlSearch(newSearchOption) {
+        const { hash, origin, pathname } = location;
+        const currentHash = hash.split('?')[0];
+        const currentSearch = parse(hash.split('?')[1]);
+        const newSearch = stringify({ ...currentSearch, ...newSearchOption });
+        const newHash = `${currentHash}?${newSearch}`;
+        const newUrl = `${origin}${pathname}${newHash}`;
+        history.pushState('', '', newUrl);
+    }
 }
 /** 转换流程记录数据 */
 Object.defineProperty(CommonFlowDataUtils, "transProcessData", {
@@ -88,3 +99,51 @@ Object.defineProperty(CommonFlowDataUtils, "transProcessData", {
         });
     }
 });
+/** 针对流程封装请求 */
+export class FlowRequest {
+    /** 设置请求方法，加入 预览数据 入参首字母大小写等设置 */
+    request(callWedaApi, isWedaIde) {
+        const flowRequest = async (params, config) => {
+            const { previewData, upperCaseData = true, upperCaseIgnoreKeys, } = config || {};
+            if (isWedaIde) {
+                return this.toTransKeyCase(previewData || {}, 'toLowerCase');
+            }
+            const result = await callWedaApi({
+                ...params,
+                data: this.toTransKeyCase(params.data, upperCaseData ? 'toUpperCase' : 'toLowerCase', upperCaseIgnoreKeys),
+            });
+            return this.toTransKeyCase(result, 'toLowerCase');
+        };
+        return flowRequest;
+    }
+    /** 转换具体参数的首字母大小写 */
+    toTransKeyCase(target, method, ignoreKeyValues) {
+        const result = {};
+        if (this.isArray(target)) {
+            return target === null || target === void 0 ? void 0 : target.map((item) => this.toTransKeyCase(item, method));
+        }
+        if (this.isObject(target)) {
+            return Object.keys(target).reduce((acc, key) => {
+                const finalKey = this.transKey(key, method);
+                acc[finalKey] = (ignoreKeyValues === null || ignoreKeyValues === void 0 ? void 0 : ignoreKeyValues.includes(key))
+                    ? target[key]
+                    : this.toTransKeyCase(target[key], method);
+                return acc;
+            }, result);
+        }
+        return target;
+    }
+    /** 转换字符串首字母大小写 */
+    transKey(str, method) {
+        const firstChar = method === 'toLowerCase'
+            ? str.charAt(0).toLowerCase()
+            : str.charAt(0).toUpperCase();
+        return `${firstChar}${str.slice(1)}`;
+    }
+    isArray(value) {
+        return Array.isArray(value);
+    }
+    isObject(value) {
+        return Object.prototype.toString.call(value) === '[object Object]';
+    }
+}

package/dist/web/components/flow/modules/chart/Chart.js

@@ -27,8 +27,7 @@ G6.Tooltip.prototype.showTooltip = function (e) {
     }
     this.updatePosition(e);
 };
-// eslint-disable-next-line react/display-name
-export const RenderProcess = React.forwardRef((props) => {
+export const RenderProcess = (props) => {
     const { commonFlowData, flowLocalProps } = props;
     const { flowDetail } = commonFlowData;
     const { isWedaIde, callWedaApi, safeJsonParse } = flowLocalProps;
@@ -299,4 +298,4 @@ export const RenderProcess = React.forwardRef((props) => {
                     React.createElement("span", { className: "ProcessInfo-modal_content-content" }, content)))))),
             React.createElement(Modal.Footer, null,
                 React.createElement(Button, { type: "weak", onClick: closeModal }, "\u5173\u95ED")))));
-});
+};

package/dist/web/components/flow/modules/combination/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import Tabs from '../../../tabs';
 import ModelFlowBasic from '../basic';
 import ModelFlowChart from '../chart';
-import ModelFlowControl from '../control';
+import ModelFlowControl from '../operations';
 import ModelFlowLayout from '../layout';
 import ModelFlowProcess from '../process';
 const ModelFlow = (props) => {

package/dist/web/components/flow/modules/operations/components/button/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Button } from 'tea-component';
+import { IconFont } from 'tdesign-icons-react';
+import './style.css';
+/** 流程相关动作的触发按钮 */
+export function FlowButton(props) {
+    const { buttonIcon, className, ...buttonProps } = props;
+    return (React.createElement(Button, { ...buttonProps, className: `weda-flow-button ${className}` },
+        buttonIcon ? React.createElement(IconFont, { name: buttonIcon }) : null,
+        props.children));
+}

package/dist/web/components/flow/modules/operations/components/button/style.css

@@ -0,0 +1,5 @@
+.weda-flow-button .t-icon {
+  position: relative;
+  bottom: 1.5px;
+  right: 2px;
+}

package/dist/web/components/flow/modules/operations/components/index.js

@@ -0,0 +1,6 @@
+import { FlowUserSelect, FlowUserSelectBtn } from './user-select';
+import { FlowPopup } from './popup';
+import { FlowButton } from './button';
+export * from './user-select/types';
+export * from './popup/types';
+export { FlowUserSelect, FlowUserSelectBtn, FlowPopup, FlowButton };

package/dist/web/components/flow/modules/operations/components/popup/index.js

@@ -0,0 +1,100 @@
+import React, { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { CSSTransition } from 'react-transition-group';
+import { IconFont } from 'tdesign-icons-react';
+import classNames from '../../../../../../utils/classnames';
+import { POSITIONS } from './types';
+import './style.css';
+/** 使用移动视图的弹出层组件 */
+export function FlowPopup(props) {
+    const { visible = false, className = '', style = {}, overlay = true, position = 'center', overlayClass = '', overlayStyle = {}, title = '', titleStyle = {}, closeable = false, container = document.body, height = 300, width = 200, children, onClose, destroyOnClose = false, closeOnClickOverlay = true, closeContent, closeContentPosition = 'top-right', } = props;
+    const [innerVisible, setInnerVisible] = useState(visible);
+    const [animatedVisible, setAnimatedVisible] = useState(innerVisible);
+    useEffect(() => {
+        if (visible) {
+            setAnimatedVisible(true);
+        }
+    }, [visible]);
+    useEffect(() => {
+        setInnerVisible(visible);
+    }, [visible]);
+    const onPopupClose = (e) => {
+        onStopPropagation(e);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    };
+    /** 阻止 createPortal 的事件冒泡 */
+    const onStopPropagation = (e) => {
+        e.stopPropagation();
+    };
+    const initialStyle = getInitialStyle(position, height, width);
+    const initialClassName = getInitialClassName(position);
+    /** 标题 */
+    const renderTitle = () => {
+        if (!title)
+            return null;
+        return (React.createElement("div", { className: "weda-flow-popup-title", style: titleStyle }, title));
+    };
+    /** 关闭按钮 */
+    const renderCloseButton = () => {
+        if (!closeable)
+            return null;
+        return (React.createElement("div", { className: `weda-flow-popup-close ${closeContentPosition}`, onClick: onPopupClose }, closeContent || React.createElement(IconFont, { name: "close" })));
+    };
+    /** 遮罩层 */
+    const renderOverlay = () => {
+        const onClickOverlay = (e) => {
+            if (!closeOnClickOverlay)
+                return;
+            onPopupClose(e);
+        };
+        if (!overlay)
+            return null;
+        return (React.createElement("div", { className: `weda-flow-popup-overlay ${overlayClass}`, style: overlayStyle || {}, onClick: onClickOverlay }));
+    };
+    /** 弹出层 */
+    const renderPopup = () => {
+        const popupClassName = classNames('weda-flow-popup', initialClassName, className);
+        const popupStyle = {
+            ...initialStyle,
+            ...style,
+            display: !innerVisible && !animatedVisible ? 'none' : undefined,
+        };
+        return (React.createElement("div", { className: popupClassName, style: popupStyle, onClick: onStopPropagation },
+            renderTitle(),
+            renderCloseButton(),
+            children || null));
+    };
+    /** 弹出层动画 */
+    const renderPopupTransition = () => {
+        const transitionClassName = position === 'center'
+            ? 'weda-flow-popup-fade'
+            : `weda-flow-popup-slide-${position}`;
+        return (React.createElement(CSSTransition, { timeout: 300, in: visible, classNames: transitionClassName, mountOnEnter: true, unmountOnExit: destroyOnClose, onExited: () => {
+                setAnimatedVisible(false);
+            } }, renderPopup()));
+    };
+    /** 遮罩层动画 */
+    const renderOverlayTransition = () => {
+        return (React.createElement(CSSTransition, { mountOnEnter: true, unmountOnExit: true, timeout: 300, in: visible, classNames: "weda-flow-popup-fade" }, renderOverlay()));
+    };
+    return createPortal(React.createElement(React.Fragment, null,
+        renderOverlayTransition(),
+        renderPopupTransition()), container);
+}
+/** 获取初始样式 */
+function getInitialStyle(position, height, width) {
+    if (['left', 'right'].includes(position)) {
+        return { width };
+    }
+    if (['bottom', 'top'].includes(position)) {
+        return { height };
+    }
+    return {};
+}
+/** 获取初始类名 */
+function getInitialClassName(position) {
+    if (POSITIONS.includes(position)) {
+        return `weda-flow-popup-${position}`;
+    }
+    return 'weda-flow-popup-bottom';
+}

package/dist/web/components/flow/modules/operations/components/popup/style.css

@@ -0,0 +1,154 @@
+.weda-flow-popup-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.7);
+  z-index: 2020;
+}
+
+.weda-flow-popup {
+  position: fixed;
+  max-height: 100%;
+  overflow-y: auto;
+  background-color: #fff;
+  z-index: 2021;
+}
+
+.weda-flow-popup-bottom {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+}
+
+.weda-flow-popup-top {
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
+.weda-flow-popup-left {
+  top: 0;
+  left: 0;
+  height: 100%;
+}
+
+.weda-flow-popup-right {
+  top: 0;
+  right: 0;
+  height: 100%;
+}
+
+.weda-flow-popup-center {
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%, -50%, 0);
+}
+
+.weda-flow-popup-title {
+  text-align: center;
+  font-size: 14px;
+  font-weight: 700;
+  color: #333;
+  padding: 20px 12px;
+}
+
+.weda-flow-popup-bottom-enter-start,
+.weda-flow-popup-bottom-exit-end {
+  transform: translate3d(0, 100%, 0);
+  transition: 0.2s;
+}
+
+.weda-flow-popup-enter-active {
+  transform: translate3d(0, 0, 0);
+  transition: 0.2s;
+}
+
+.weda-flow-popup-slide-top-enter,
+.weda-flow-popup-slide-top-exit-active {
+  transform: translate3d(0, -100%, 0);
+}
+
+.weda-flow-popup-slide-right-enter,
+.weda-flow-popup-slide-right-exit-active {
+  transform: translate3d(100%, 0, 0);
+}
+
+.weda-flow-popup-slide-bottom-enter,
+.weda-flow-popup-slide-bottom-exit-active {
+  transform: translate3d(0, 100%, 0);
+}
+
+.weda-flow-popup-slide-left-enter,
+.weda-flow-popup-slide-left-exit-active {
+  transform: translate3d(-100%, 0, 0);
+}
+
+.weda-flow-popup-slide-top-enter-active,
+.weda-flow-popup-slide-left-enter-active,
+.weda-flow-popup-slide-right-enter-active,
+.weda-flow-popup-slide-bottom-enter-active {
+  transform: translate3d(0, 0, 0);
+  transition: 0.3s;
+}
+
+.weda-flow-popup-slide-top-exit-active,
+.weda-flow-popup-slide-left-exit-active,
+.weda-flow-popup-slide-right-exit-active,
+.weda-flow-popup-slide-bottom-exit-active {
+  transition: 0.3s;
+  transition-timing-function: ease-in;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+.weda-flow-popup-fade-enter-active {
+  animation: 0.3s fade-in both ease-out;
+}
+.weda-flow-popup-fade-exit-active {
+  animation: 0.3s fade-out both ease-in;
+}
+
+.weda-flow-popup-close {
+  position: absolute;
+  font-size: 14px;
+  text-align: center;
+  cursor: pointer;
+  color: #323232;
+}
+
+.weda-flow-popup-close.top-right {
+  right: 20px;
+  top: 20px;
+}
+.weda-flow-popup-close.top-left {
+  left: 20px;
+  top: 20px;
+}
+.weda-flow-popup-close.bottom-right {
+  right: 20px;
+  bottom: 20px;
+}
+.weda-flow-popup-close.bottom-left {
+  bottom: 20px;
+  left: 20px;
+}

package/dist/web/components/flow/modules/operations/components/popup/types.js

@@ -0,0 +1 @@
+export const POSITIONS = ['bottom', 'top', 'right', 'left', 'center'];

package/dist/web/components/flow/modules/operations/components/user-select/index.js

@@ -0,0 +1,43 @@
+import React, { useRef, useEffect, useState } from 'react';
+import { Button } from 'tea-component';
+import UserTreeSelect from '../../../../../form/userOrgSelect/component/user-select-h5';
+import './style.css';
+export * from './types';
+/**
+ * 流程进一步封装选人组件
+ */
+export function FlowUserSelect(props) {
+    const userSelectRef = useRef();
+    const onConfirm = (selection) => {
+        var _a, _b;
+        (_a = props === null || props === void 0 ? void 0 : props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, { users: selection.data, userIds: selection.value });
+        (_b = props === null || props === void 0 ? void 0 : props.onClose) === null || _b === void 0 ? void 0 : _b.call(props);
+    };
+    const onClose = () => {
+        var _a;
+        (_a = props === null || props === void 0 ? void 0 : props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+    };
+    useEffect(() => {
+        var _a, _b, _c;
+        if (props.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);
+        }
+    }, [props.visible]);
+    return (React.createElement(UserTreeSelect, { labelVisible: false, decorator: null, multiple: props === null || props === void 0 ? void 0 : props.multiple, showType: (props === null || props === void 0 ? void 0 : props.isH5) ? 'h5' : 'pc', style: props.showOriginEntry
+            ? props.style || {}
+            : {
+                display: 'none',
+            }, requiredFlag: props.required, className: `${props.showOriginEntry && (props === null || props === void 0 ? void 0 : props.isH5) ? 'weda-flow-user-select-h5' : ''} ${props === null || props === void 0 ? void 0 : props.className}`, confirmAction: onConfirm, outerRef: userSelectRef, closeAction: onClose, defaultValue: props.defaultValue }));
+}
+/**
+ * 流程进一步封装选人组件 - 自定义触发按钮形式
+ */
+export function FlowUserSelectBtn(props) {
+    const { buttonProps, buttonText, ...restProps } = props;
+    const [visible, setVisible] = useState(false);
+    const onOpenUserSelect = () => setVisible(true);
+    const onCloseUserSelect = () => setVisible(false);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { ...buttonProps, onClick: onOpenUserSelect }, buttonText),
+        React.createElement(FlowUserSelect, { visible: visible, onClose: onCloseUserSelect, ...restProps, showOriginEntry: false })));
+}

package/dist/web/components/flow/modules/operations/components/user-select/style.css

@@ -0,0 +1,4 @@
+.weda-flow-user-select-h5 .weui-cells:before,
+.weda-flow-user-select-h5 .weui-cells:after {
+  opacity: 0;
+}

package/dist/web/components/flow/modules/operations/components/user-select/types.js

@@ -0,0 +1 @@
+export {};