@cloudbase/weda-ui 3.5.2-mp → 3.5.3

package/dist/web/components/flow/modules/chart/preview-data.js

@@ -0,0 +1,88 @@
+export const processCanvasInfoPreviewData = {
+    Nodes: [
+        {
+            visited: true,
+            Id: 2,
+            ElementId: 'approvalNode1656317642548',
+            Name: '经理审批',
+            DataType: 17,
+            Status: 1,
+            Conf: [
+                {
+                    Name: '张三',
+                    Status: 2,
+                    OpTime: 1656502417000,
+                    Comment: '',
+                    AttachmentInfo: '[]',
+                    NewProcessors: 'true',
+                },
+            ],
+        },
+        {
+            visited: true,
+            Id: 3,
+            ElementId: 'approvalNode1656317679079',
+            Name: '总监审批',
+            DataType: 17,
+            Status: 3,
+            Conf: [
+                { Name: '王五', Status: 0, OpTime: 0 },
+                { Name: '李四', Status: 0, OpTime: 0 },
+            ],
+        },
+        {
+            visited: true,
+            Id: 4,
+            ElementId: 'approvalNode1656317682440',
+            Name: '人事审批',
+            DataType: 17,
+            Status: 2,
+        },
+        {
+            visited: true,
+            Id: 1,
+            ElementId: 'startNode',
+            Name: '开始',
+            DataType: 1,
+            Status: 1,
+        },
+        {
+            visited: true,
+            Id: 5,
+            ElementId: 'endNode',
+            Name: '结束',
+            DataType: 13,
+            Status: 2,
+        },
+    ],
+    Edges: [
+        {
+            Label: '同意',
+            Type: 2,
+            Source: 'approvalNode1656317679079',
+            Target: 'approvalNode1656317682440',
+            Status: 2,
+        },
+        {
+            Label: '同意c',
+            Type: 2,
+            Source: 'approvalNode1656317682440',
+            Target: 'endNode',
+            Status: 2,
+        },
+        {
+            Label: '同意',
+            Type: 2,
+            Source: 'approvalNode1656317642548',
+            Target: 'approvalNode1656317679079',
+            Status: 2,
+        },
+        {
+            Label: '',
+            Type: 2,
+            Source: 'startNode',
+            Target: 'approvalNode1656317642548',
+            Status: 2,
+        },
+    ],
+};

package/dist/web/components/flow/modules/combination/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const ModelFlow: (props: any) => JSX.Element;
+export default ModelFlow;

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Tabs from '../../../tabs';
+import ModelFlowBasic from '../basic';
+import ModelFlowChart from '../chart';
+import ModelFlowControl from '../operations';
+import ModelFlowLayout from '../layout';
+import ModelFlowProcess from '../../process';
+const ModelFlow = (props) => {
+    const commonProps = {
+        events: (props === null || props === void 0 ? void 0 : props.events) || {},
+    };
+    return (_jsx(ModelFlowLayout, { ...props, flowContentSlot: _jsx(Tabs, { isMultipleSlot: true, events: { change: () => null }, tabs: [
+                { value: 'process', title: '流程详情' },
+                { value: 'chart', title: '流转图示' },
+            ], 
+            // @ts-ignore 忽略属性报错
+            panel1: _jsxs(_Fragment, { children: [_jsx(ModelFlowBasic, { ...commonProps }), _jsx(ModelFlowProcess, { ...commonProps })] }), panel2: _jsx(ModelFlowChart, { ...commonProps }), selectedIndex: 0 }), flowControlSlot: _jsx(ModelFlowControl, { ...commonProps }) }));
+};
+export default ModelFlow;

package/dist/web/components/flow/modules/layout/index.css

@@ -0,0 +1,6 @@
+.weda-flow-layout {
+  height: auto !important;
+}
+.weda-flow-layout .wedatea2td-layout__content {
+  background-color: #fff;
+}

package/dist/web/components/flow/modules/layout/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IWedaPlatformProps } from '../../common';
+import './index.css';
+export default function ModelFlowLayout(props: IWedaPlatformProps): JSX.Element;

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PAGE_TYPE, isInIde, useFlowConfig, WedaFlowContainer, } from '../../common';
+import './index.css';
+export default function ModelFlowLayout(props) {
+    const { currentPageType } = useFlowConfig({
+        wedaPlatformProps: props,
+        moduleName: 'flow-layout',
+    });
+    const { flowContentSlot, flowControlSlot } = props;
+    /**
+     * 是否隐藏流程Tab
+     * @description 初始化情况下，流程基本信息、流程流转记录、流程图示三个组件
+     * 会放到一个Tab组件中，特定条件下会启用该配置。如组件被拆分，改配置将失效
+     */
+    const hideFlowTab = !isInIde() &&
+        [PAGE_TYPE.CREATEFLOW, PAGE_TYPE.DRAFT].includes(currentPageType);
+    return (_jsx(WedaFlowContainer, { wedaPlatformProps: props, children: _jsxs("div", { className: "weda-flow-layout", children: [_jsx("div", { children: hideFlowTab ? null : _jsx("div", { children: flowContentSlot }) }), _jsx("div", { children: flowControlSlot })] }) }));
+}

package/dist/web/components/flow/modules/operations/components/button/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ButtonProps } from 'tea-component';
+import './style.css';
+export interface IFlowButton extends ButtonProps {
+    buttonIcon?: string;
+}
+/** 流程相关动作的触发按钮 */
+export declare function FlowButton(props: IFlowButton): JSX.Element;

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from 'tea-component';
+import { IconFont } from 'tdesign-icons-react';
+import './style.css';
+/** 流程相关动作的触发按钮 */
+export function FlowButton(props) {
+    const { buttonIcon, className, ...buttonProps } = props;
+    return (_jsxs(Button, { ...buttonProps, className: `weda-flow-button ${className}`, children: [buttonIcon ? _jsx(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.d.ts

@@ -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/index.js

@@ -0,0 +1,7 @@
+/* eslint-disable rulesdir/no-export-all */
+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.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { IFlowPopupProps } from './types';
+import './style.css';
+/** 使用移动视图的弹出层组件 */
+export declare function FlowPopup(props: IFlowPopupProps): React.ReactPortal;

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

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { CSSTransition } from 'react-transition-group';
+import { IconFont } from 'tdesign-icons-react';
+import { classNames } from '../../../../common';
+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 (_jsx("div", { className: "weda-flow-popup-title", style: titleStyle, children: title }));
+    };
+    /** 关闭按钮 */
+    const renderCloseButton = () => {
+        if (!closeable)
+            return null;
+        return (_jsx("div", { className: `weda-flow-popup-close ${closeContentPosition}`, onClick: onPopupClose, children: closeContent || _jsx(IconFont, { name: "close" }) }));
+    };
+    /** 遮罩层 */
+    const renderOverlay = () => {
+        const onClickOverlay = (e) => {
+            if (!closeOnClickOverlay)
+                return;
+            onPopupClose(e);
+        };
+        if (!overlay)
+            return null;
+        return (_jsx("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 (_jsxs("div", { className: popupClassName, style: popupStyle, onClick: onStopPropagation, children: [renderTitle(), renderCloseButton(), children || null] }));
+    };
+    /** 弹出层动画 */
+    const renderPopupTransition = () => {
+        const transitionClassName = position === 'center'
+            ? 'weda-flow-popup-fade'
+            : `weda-flow-popup-slide-${position}`;
+        return (_jsx(CSSTransition, { timeout: 300, in: visible, classNames: transitionClassName, mountOnEnter: true, unmountOnExit: destroyOnClose, onExited: () => {
+                setAnimatedVisible(false);
+            }, children: renderPopup() }));
+    };
+    /** 遮罩层动画 */
+    const renderOverlayTransition = () => {
+        return (_jsx(CSSTransition, { mountOnEnter: true, unmountOnExit: true, timeout: 300, in: visible, classNames: "weda-flow-popup-fade", children: renderOverlay() }));
+    };
+    return createPortal(_jsxs(_Fragment, { children: [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.d.ts

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+export declare const POSITIONS: readonly ["bottom", "top", "right", "left", "center"];
+type IClosePosition = 'top-right' | 'top-left' | 'bottom-left' | 'bottom-right';
+export interface IFlowPopupProps {
+    /** 是否显示弹出层 */
+    visible?: boolean;
+    /** 类名 */
+    className?: string;
+    /** 弹出层样式 */
+    style?: React.CSSProperties;
+    /** 是否显示遮罩层 */
+    overlay?: boolean;
+    /** 关闭时销毁 Popup 里的子元素 */
+    destroyOnClose?: boolean;
+    /** 弹出位置，可选值为 top bottom right left */
+    position?: typeof POSITIONS[number];
+    /** 遮罩层类名 */
+    overlayClass?: string;
+    /** 遮罩层样式 */
+    overlayStyle?: React.CSSProperties;
+    /** 弹出层标题 */
+    title?: string;
+    /** 弹出层标题样式 */
+    titleStyle?: React.CSSProperties;
+    /** 是否显示关闭图标 */
+    closeable?: boolean;
+    /** 自定义关闭图标内容 */
+    closeContent?: string | React.ReactNode;
+    /** 关闭图标位置 */
+    closeContentPosition?: IClosePosition;
+    /** 指定挂载的节点 */
+    container?: Element;
+    /** 是否在点击遮罩层后关闭 */
+    closeOnClickOverlay?: boolean;
+    /** 弹出层高度 */
+    height?: React.CSSProperties['height'];
+    /** 弹出层宽度 */
+    width?: React.CSSProperties['width'];
+    /** 弹出层子元素 */
+    children?: React.ReactNode;
+    /** 关闭弹出层时触发 */
+    onClose?: () => void;
+}
+export {};

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.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { ButtonProps } from 'tea-component';
+import { IFlowUserSelectProps } from './types';
+import './style.css';
+export * from './types';
+/**
+ * 流程进一步封装选人组件
+ */
+export declare function FlowUserSelect(props: IFlowUserSelectProps): JSX.Element;
+interface IFlowUserSelectBtnProps extends Omit<IFlowUserSelectProps, 'visible' | 'onClose'> {
+    buttonProps: ButtonProps;
+    buttonText: string;
+}
+/**
+ * 流程进一步封装选人组件 - 自定义触发按钮形式
+ */
+export declare function FlowUserSelectBtn(props: IFlowUserSelectBtnProps): JSX.Element;

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

@@ -0,0 +1,43 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useState } from 'react';
+import { Button } from 'tea-component';
+import UserTreeSelect from '../../../../../form/userOrgSelect/component/user-select-h5';
+import './style.css';
+// eslint-disable-next-line rulesdir/no-export-all
+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 (_jsx(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 (_jsxs(_Fragment, { children: [_jsx(Button, { ...buttonProps, onClick: onOpenUserSelect, children: buttonText }), _jsx(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.d.ts

@@ -0,0 +1,50 @@
+/// <reference types="react" />
+/**
+ * 流程选人组件属性
+ */
+export interface IFlowUserSelectProps {
+    /** 是否可见 */
+    visible?: boolean;
+    /** 是否多选 */
+    multiple?: boolean;
+    /** 选人组件值变化时触发 */
+    onChange?: (value: IFlowUserChangeValue) => void;
+    /** 选人组件关闭时触发 */
+    onClose?: () => void;
+    /** 是否是H5形式 */
+    isH5?: boolean;
+    /** 显示原版选人触发界面 */
+    showOriginEntry?: boolean;
+    /** 类名 */
+    className?: string;
+    /** 补充样式， 设置此样式时hideOriginUI为false */
+    style?: React.CSSProperties;
+    /** 默认值  */
+    defaultValue?: string[];
+    /** 标签 */
+    label?: string;
+    /** 必填样式 */
+    required?: boolean;
+}
+/**
+ * 选人组件onChange参数属性
+ */
+export interface IFlowUserChangeValue {
+    /** 用户或用户数组 */
+    users: IFlowWedaUser | IFlowWedaUser[];
+    /** 用户id或用户id数组 */
+    userIds: string | string[];
+}
+/**
+ * 微搭用户属性
+ */
+export interface IFlowWedaUser {
+    /** 用户id */
+    userId: string;
+    /** 用户名 */
+    userName: string;
+    /** 用户id */
+    id: string;
+    /** 用户名 */
+    content: string;
+}

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

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

package/dist/web/components/flow/modules/operations/config/approval-form-config.d.ts

@@ -0,0 +1,9 @@
+import { IFlowModulesProps } from '../../../common';
+import { IFlowApprovalFormInfo } from '../controls-items/approval-drawer/drawer-form';
+import { IFlowControlConfigKey } from './types';
+type IFlowControlApprovalFormConfig = {
+    [key in Extract<IFlowControlConfigKey, 'agree' | 'reject' | 'handle' | 'turn_to_person'>]: IFlowApprovalFormInfo;
+};
+/** 审批类型操作的表单配置(同意、拒绝、处理、转办) */
+export declare function getApprovalFormConfig(flowProps: IFlowModulesProps): IFlowControlApprovalFormConfig;
+export {};