@giteeteam/apps-team-components 0.3.13 → 1.0.0

package/dist/components/fields/status/Transition.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { CaretDownOutlined } from '@ant-design/icons';
+import { cx } from '@emotion/css';
+import { Button, Popover } from 'antd';
+import { WorkFlowStatusColor } from '../../../lib/global';
+import useAntdConfig from '../../../lib/hooks/useAntdConfig';
+import { i18n } from '../../../lib/i18n';
+import EmptyField from '../../common/EmptyField';
+import BaseOverflowTooltip from '../../common/overflow-tooltip/BaseOverflowTooltip';
+import { caretDownStyle, flowStateButtonStyle, flowStateInWorkflowStyle, flowStateStyle, noStateStyle, stateBtnStyle, statePopoverStyle, workflowContentStyle, } from './style';
+import TransitionPanel from './TransitionPanel';
+const Transition = props => {
+    var _a, _b, _c;
+    const { itemId, itemType, workspace, objectId, onTransitionSuccess, name, type, readonly, apply } = props;
+    const [popoverVisible, setPopoverVisible] = useState(false);
+    const [flowing, setFlowing] = useState(false);
+    const isProcessing = useRef(false);
+    const [showData, setShowData] = useState({ objectId, name, type });
+    const { antPrefix } = useAntdConfig();
+    const transitionSuccess = useCallback(({ objectId, name, type }) => {
+        setShowData(data => {
+            return { ...data, objectId, name, type };
+        });
+        onTransitionSuccess({ objectId, name, type });
+    }, [onTransitionSuccess]);
+    useEffect(() => {
+        setShowData(data => {
+            return { ...data, objectId, name, type };
+        });
+    }, [objectId, name, type]);
+    return (_jsx("div", { className: workflowContentStyle, children: _jsx(Popover, { overlayClassName: statePopoverStyle(antPrefix), destroyTooltipOnHide: true, open: popoverVisible, onOpenChange: visible => {
+                if (isProcessing.current || flowing) {
+                    return;
+                }
+                setPopoverVisible(visible);
+            }, getPopupContainer: () => document.body, trigger: "click", placement: "bottomLeft", content: _jsx(TransitionPanel, { itemId: itemId, itemType: itemType, workspace: workspace, objectId: showData.objectId, onTransitionSuccess: transitionSuccess, name: name, readonly: readonly, setPopoverVisible: setPopoverVisible, isProcessing: isProcessing, flowing: flowing, setFlowing: setFlowing }), children: _jsxs(Button, { type: "link", className: cx(flowStateStyle, flowStateInWorkflowStyle, flowStateButtonStyle, stateBtnStyle, {
+                    [noStateStyle]: !showData.name,
+                }), style: {
+                    backgroundColor: (_a = WorkFlowStatusColor[showData.type]) === null || _a === void 0 ? void 0 : _a.bgColor,
+                    color: (_b = WorkFlowStatusColor[showData.type]) === null || _b === void 0 ? void 0 : _b.color,
+                }, children: [_jsx(BaseOverflowTooltip, { title: showData.name, children: showData.name || (apply === 'cell' ? _jsx(EmptyField, { readonly: readonly }) : i18n.t('global.stateless')) }), apply !== 'cell' && (_jsx(CaretDownOutlined, { className: caretDownStyle, style: { color: (_c = WorkFlowStatusColor[showData.type]) === null || _c === void 0 ? void 0 : _c.color, marginLeft: 0 } }))] }) }) }));
+};
+export default memo(Transition);

package/dist/{cells → components/fields}/status/TransitionButton.d.ts

@@ -1,27 +1,34 @@
 import React from 'react';
-import { ItemResultProps } from '@/lib/types/item';
-import { ConditionType, ListItemType, NodeItemProps } from '@/lib/types/workflow';
+import { ItemResultProps } from '../../../lib/types/item';
+import { ApprovalData, CheckInData, ConditionType, ListItemType, NodeItemProps } from '../../../lib/types/workflow';
 interface FlowButtonProps {
     itemId: string;
     loading: boolean;
     text: string;
     screenId: string;
     item: ItemResultProps;
+    workspace: string;
     authRoles: ListItemType[] | undefined;
     authUsers: ListItemType[] | undefined;
     authGroups: ListItemType[] | undefined;
     authUserFields: ListItemType[] | undefined;
+    authWorkSpaceRoles: ListItemType[] | undefined;
+    creatorAuth: boolean | undefined;
     scriptValidator: string;
     userId: string;
     roleIds: string[];
     groupIds: string[];
+    workspaceRoleIds: string[];
     currentTaskId: string;
     conditions?: ConditionType[];
+    approval: ApprovalData;
+    checkIn: CheckInData;
     handleTransition: (updateTask: string, screenId: string, script: string) => void;
     target: NodeItemProps & {
         type?: string;
     };
     hiddenPopover?: () => void;
+    readonly?: boolean;
 }
 declare const _default: React.NamedExoticComponent<FlowButtonProps>;
 export default _default;

package/dist/components/fields/status/TransitionButton.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { cx } from '@emotion/css';
+import { Tooltip } from 'antd';
+import { WorkFlowStatusColor } from '../../../lib/global';
+import { i18n } from '../../../lib/i18n';
+import { checkTransition } from '../../../lib/workflow';
+import BaseOverflowTooltip from '../../common/overflow-tooltip/BaseOverflowTooltip';
+import { flowBtnStyle, flowStateStyle, iconStyle, notAllowedStyle, pointerStyle, stateBoxStyle, tipLineStyle, tooltipStyle, } from './style';
+const ApprovalStatus = {
+    approved: 'approved',
+    rejected: 'rejected',
+};
+const CheckInStatus = {
+    closed: 'closed',
+    pending: 'pending',
+};
+const FlowButton = ({ loading, screenId, text, item, userId, roleIds, groupIds, workspaceRoleIds, authRoles, authUsers, authGroups, creatorAuth, authUserFields, authWorkSpaceRoles, scriptValidator, approval, checkIn, conditions = [], handleTransition, target, readonly, }) => {
+    const [isCheck, setIsCheck] = useState(true);
+    const [tip, setTip] = useState('');
+    const checkApproval = useCallback(() => {
+        var _a;
+        if (!approval.requireApproval)
+            return true;
+        const approvedTransitions = approval.transition.approved.map(approved => approved.label);
+        const rejectedTransitions = approval.transition.rejected.map(rejected => rejected.label);
+        const unrestrictedTransitions = ((_a = approval.transition.unrestricted) === null || _a === void 0 ? void 0 : _a.map(unrestricted => unrestricted.label)) || [];
+        if ((ApprovalStatus.approved === approval.approvalStatus && approvedTransitions.includes(text)) ||
+            (ApprovalStatus.rejected === approval.approvalStatus && rejectedTransitions.includes(text))) {
+            return true;
+        }
+        if (![ApprovalStatus.approved, ApprovalStatus.rejected].includes(approval.approvalStatus) &&
+            (unrestrictedTransitions === null || unrestrictedTransitions === void 0 ? void 0 : unrestrictedTransitions.includes(text))) {
+            if (!approval.startApproval) {
+                return true;
+            }
+            else {
+                setTip(i18n.t('pages.fields.view.unrestrictedStatus'));
+                return false;
+            }
+        }
+        setTip(i18n.t('pages.fields.view.approvalStatus'));
+        return false;
+    }, [approval, text]);
+    const validateCheckIn = useCallback(() => {
+        if (!checkIn.requireCheckIn)
+            return true;
+        if (checkIn.checkInStatus !== CheckInStatus.pending) {
+            return true;
+        }
+        return false;
+    }, [checkIn]);
+    const checkAuth = useCallback(async () => {
+        setIsCheck(true);
+        if (!checkApproval()) {
+            setIsCheck(false);
+            return;
+        }
+        if (!validateCheckIn()) {
+            setTip(i18n.t('pages.fields.view.checkInStatus'));
+            setIsCheck(false);
+            return;
+        }
+        const transition = {
+            parameters: {
+                fieldType: conditions,
+                permissionType: {
+                    users: authUsers,
+                    roles: authRoles,
+                    groups: authGroups,
+                    workspaceRoles: authWorkSpaceRoles,
+                    customFields: authUserFields,
+                    creatorAuth,
+                },
+            },
+        };
+        const checkResult = checkTransition(item, transition, { userId, roleIds, groupIds, workspaceRoleIds });
+        if (!checkResult.result) {
+            setTip(checkResult.message);
+            setIsCheck(false);
+        }
+    }, [
+        checkApproval,
+        validateCheckIn,
+        conditions,
+        authUsers,
+        authRoles,
+        authGroups,
+        authWorkSpaceRoles,
+        authUserFields,
+        creatorAuth,
+        item,
+        userId,
+        roleIds,
+        groupIds,
+        workspaceRoleIds,
+    ]);
+    useEffect(() => {
+        checkAuth();
+    }, [checkAuth]);
+    const tipContent = useMemo(() => {
+        if (readonly)
+            return i18n.t('pages.fields.view.readonlyStatus');
+        if (!tip)
+            return '';
+        const contents = tip.split('--');
+        return (_jsx("div", { children: contents.map((text, index) => (_jsx("p", { className: tipLineStyle, children: text }, String(index)))) }));
+    }, [tip, readonly]);
+    const OverflowText = ({ text, target }) => {
+        var _a, _b;
+        return (_jsxs(_Fragment, { children: [_jsx(BaseOverflowTooltip, { className: tooltipStyle, title: text, children: text }), _jsx("span", { className: iconStyle, children: " \u2192 " }), _jsx("div", { className: stateBoxStyle, children: _jsx(BaseOverflowTooltip, { className: flowStateStyle, style: {
+                            backgroundColor: (_a = WorkFlowStatusColor[target.type]) === null || _a === void 0 ? void 0 : _a.bgColor,
+                            color: (_b = WorkFlowStatusColor[target.type]) === null || _b === void 0 ? void 0 : _b.color,
+                        }, title: target.name, children: target.name }) })] }));
+    };
+    return isCheck && !readonly ? (_jsx("div", { className: cx(flowBtnStyle, loading ? notAllowedStyle : pointerStyle), onClick: () => {
+            if (!loading) {
+                handleTransition(text, screenId, scriptValidator);
+            }
+        }, children: _jsx(OverflowText, { text: text, target: target }) })) : (_jsx(Tooltip, { title: tipContent, placement: "right", children: _jsx("div", { className: cx(flowBtnStyle, notAllowedStyle), children: _jsx(OverflowText, { text: text, target: target }) }) }));
+};
+export default memo(FlowButton);

package/dist/{cells → components/fields}/status/TransitionPanel.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Status } from '@/lib/types/models';
+import { Status } from '../../../lib/types/models';
 interface TransitionPanelProps {
     objectId: string;
     itemType: string;
@@ -10,6 +10,9 @@ interface TransitionPanelProps {
     readonly?: boolean;
     onTransitionSuccess?: (status: Status) => void;
     setPopoverVisible?: (value: boolean) => void;
+    isProcessing: React.MutableRefObject<boolean>;
+    flowing: boolean;
+    setFlowing: (flowing: boolean) => void;
 }
 declare const _default: React.NamedExoticComponent<TransitionPanelProps>;
 export default _default;

package/dist/components/fields/status/TransitionPanel.js

@@ -0,0 +1,245 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { cx } from '@emotion/css';
+import { proximaSdk, useListener } from '@giteeteam/proxima-sdk-js';
+import { message, Spin } from 'antd';
+import debug from 'debug';
+import { cloneDeep } from 'lodash-es';
+import useCurrentUser from '../../../lib/hooks/useCurrentUser';
+import useWorkflowConfig from '../../../lib/hooks/useWorkflowConfig';
+import { i18n } from '../../../lib/i18n';
+import { getScriptUser, useWorkflowPermission } from '../../../lib/workflow';
+import { useItem } from '../../item/hooks';
+import { flowNextStyle, noPermissionStyle, spinStyle } from './style';
+import TransitionButton from './TransitionButton';
+import View from './View';
+const logger = debug('TransitionPanel');
+const PROPERTY_ACTION_SORT_KEY = 'opsbar-sequence';
+const DEFAULT_APPROVAL_DATA = {
+    requireApproval: false,
+    approvalStatus: '',
+    transition: null,
+    startApproval: false,
+};
+const DEFAULT_CHECK_IN_DATA = { requireCheckIn: false, checkInStatus: '', transition: null };
+const TransitionPanel = ({ itemId, itemType, workspace, objectId, onTransitionSuccess, name, readonly, setPopoverVisible, isProcessing, flowing, setFlowing, }) => {
+    var _a;
+    const [updateTransitionText, setUpdateTransitionText] = useState('');
+    const { itemData, mutate: itemMutate } = useItem(itemId, true);
+    const refreshFlag = useRef(1);
+    const [statusId, setStatusId] = useState(objectId);
+    const [fetching, setFetching] = useState(true);
+    const [approval, setApproval] = useState(cloneDeep(DEFAULT_APPROVAL_DATA));
+    const [checkIn, setCheckIn] = useState(cloneDeep(DEFAULT_CHECK_IN_DATA));
+    useEffect(() => {
+        setStatusId(objectId);
+    }, [objectId]);
+    const { checkTransitionScript, getWorkflowData, getItemStatus, runTransition } = useWorkflowConfig();
+    const { currentUser } = useCurrentUser();
+    const [groupIds, roleIds, workspaceRoleIds] = useWorkflowPermission((_a = itemData === null || itemData === void 0 ? void 0 : itemData.workspace) === null || _a === void 0 ? void 0 : _a.objectId);
+    const [tasks, setTasks] = useState([]);
+    const [workflowData, setWorkflowData] = useState({ nodes: [], transitions: [] });
+    const updateWorkflowMessage = useCallback((workflowData, statusId) => {
+        var _a;
+        if (workflowData && statusId) {
+            const transitions = workflowData.transitions || [];
+            const nodes = workflowData.nodes || [];
+            const arr = transitions.filter(transition => transition.source.key === statusId);
+            for (let i = 0; i < arr.length; i++) {
+                const index = nodes.findIndex(v => {
+                    return v.statusId === arr[i].target.key;
+                });
+                arr[i].target.name = nodes[index].name;
+                arr[i].target.type = nodes[index].key || nodes[index].statusType;
+            }
+            const list = ((_a = workflowData.transitions) === null || _a === void 0 ? void 0 : _a.filter(transition => transition.source.key === statusId)) || [];
+            const sortList = list.map(item => {
+                var _a;
+                const propertiesListItem = (_a = item.properties) === null || _a === void 0 ? void 0 : _a.find(v => v.key === PROPERTY_ACTION_SORT_KEY);
+                if (propertiesListItem && propertiesListItem.value.trim() != '' && !isNaN(propertiesListItem.value)) {
+                    item.orderNumber = Number(propertiesListItem.value);
+                }
+                else {
+                    item.orderNumber = Number.MAX_SAFE_INTEGER;
+                }
+                return item;
+            });
+            sortList.sort((item1, item2) => item1.orderNumber - item2.orderNumber);
+            setTasks(sortList);
+            const { approval, checkIn } = getWorkflowConfig(workflowData, statusId);
+            setApproval(approval);
+            setCheckIn(checkIn);
+        }
+    }, []);
+    const refresh = useCallback(async () => {
+        try {
+            if (!itemId) {
+                logger('workflow item', itemId, statusId);
+                return;
+            }
+            const workflowData = await (getWorkflowData === null || getWorkflowData === void 0 ? void 0 : getWorkflowData(itemId));
+            if (workflowData) {
+                setWorkflowData(workflowData);
+                updateWorkflowMessage(workflowData, statusId);
+            }
+        }
+        finally {
+            setFetching(false);
+        }
+    }, [itemId, statusId, updateWorkflowMessage, getWorkflowData]);
+    useEffect(() => {
+        logger('refresh workflow');
+        refresh();
+    }, []);
+    useEffect(() => {
+        logger('updateWorkflowMessage', statusId);
+        updateWorkflowMessage(workflowData, statusId);
+    }, [statusId]);
+    const refreshItem = (status) => {
+        setStatusId(status.objectId);
+        onTransitionSuccess === null || onTransitionSuccess === void 0 ? void 0 : onTransitionSuccess(status);
+        itemMutate();
+        proximaSdk.execute('updateStatusLog');
+        proximaSdk.execute('updateApprovalInfo', status.objectId);
+        proximaSdk.execute('updateCheckInInfo', status.objectId);
+    };
+    const submitHandle = useCallback(async (transitionText, itemDetail = null) => {
+        const params = {
+            workflowId: workflowData.objectId,
+            currentState: statusId,
+            transition: transitionText,
+            itemId,
+            name: itemDetail === null || itemDetail === void 0 ? void 0 : itemDetail.name,
+            values: itemDetail === null || itemDetail === void 0 ? void 0 : itemDetail.values,
+        };
+        try {
+            setFlowing(true);
+            const newStatus = await (runTransition === null || runTransition === void 0 ? void 0 : runTransition(params));
+            if (newStatus) {
+                proximaSdk.execute('updateItemLinkList');
+                message.success(i18n.t('message.fields.stateFlowSuccess'));
+                refreshItem(newStatus);
+            }
+            else {
+                message.error(i18n.t('message.fields.stateFlowFailure', { messageText: '' }));
+            }
+        }
+        catch (e) {
+            let messageText = '';
+            try {
+                const data = JSON.parse(e.message);
+                Object.keys(data).forEach(k => (messageText += `, ${data[k]}`));
+            }
+            catch (pe) {
+                messageText = ', ' + e.message;
+            }
+            message.error(i18n.t('message.fields.stateFlowFailure', { messageText }));
+            const newStatus = await (getItemStatus === null || getItemStatus === void 0 ? void 0 : getItemStatus(itemId));
+            if (newStatus === null || newStatus === void 0 ? void 0 : newStatus.name) {
+                refreshItem(newStatus);
+            }
+            refresh();
+        }
+        finally {
+            setFlowing(false);
+            setPopoverVisible(false);
+        }
+    }, [itemId, workflowData.objectId, statusId, onTransitionSuccess, runTransition, getItemStatus]);
+    const submitTransition = useCallback(async (itemDetail) => {
+        await submitHandle(updateTransitionText, itemDetail);
+    }, [submitHandle, updateTransitionText]);
+    const handleTransition = useCallback(async (transitionText, screenId, scriptValidator) => {
+        setFlowing(true);
+        try {
+            const params = {
+                itemId,
+                itemType,
+                workspace,
+                status: statusId,
+                user: getScriptUser(currentUser),
+                item: itemData,
+                userWorkspaceRoles: workspaceRoleIds,
+                userGroups: groupIds,
+            };
+            const checkResult = await (checkTransitionScript === null || checkTransitionScript === void 0 ? void 0 : checkTransitionScript(scriptValidator, params));
+            if (!(checkResult === null || checkResult === void 0 ? void 0 : checkResult.result)) {
+                checkResult.message && message.error(checkResult.message);
+                return;
+            }
+        }
+        finally {
+            setFlowing(false);
+        }
+        if (!screenId) {
+            submitHandle(transitionText);
+        }
+        else {
+            isProcessing.current = true;
+            proximaSdk.execute('openTransitionStatusScreen', {
+                screenId: screenId,
+                transition: transitionText,
+                itemId: itemId,
+                currentState: statusId,
+            });
+            setUpdateTransitionText(transitionText);
+        }
+    }, [
+        setFlowing,
+        itemId,
+        itemType,
+        workspace,
+        statusId,
+        currentUser,
+        itemData,
+        workspaceRoleIds,
+        groupIds,
+        isProcessing,
+        submitHandle,
+        checkTransitionScript,
+    ]);
+    useListener('itemTransitionSuccess', async ({ itemId: editItemId, transition: editTransition, itemData }) => {
+        if (editItemId === itemId && editTransition === updateTransitionText && isProcessing.current) {
+            isProcessing.current = false;
+            await submitTransition(itemData);
+        }
+    });
+    useListener('createOrUpdateItemModalCancel', () => {
+        isProcessing.current = false;
+    });
+    useListener('createOrUpdateModalCancel', () => {
+        isProcessing.current = false;
+    });
+    useListener('startApproval', () => {
+        refreshFlag.current++;
+        refresh();
+    });
+    useListener('startCheckIn', () => {
+        refreshFlag.current++;
+        refresh();
+    });
+    return (_jsxs(_Fragment, { children: [fetching ? (_jsx(Spin, { className: spinStyle })) : tasks.length ? (_jsx("div", { className: cx(flowNextStyle, `flow-next-global`), children: _jsx("div", { children: tasks.map(task => {
+                        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+                        return (_jsx(TransitionButton, { itemId: itemId, loading: flowing, text: task.name, item: itemData, workspace: workspace, userId: currentUser.id, groupIds: groupIds, roleIds: roleIds, workspaceRoleIds: workspaceRoleIds, currentTaskId: task.id, authUsers: (_b = (_a = task.parameters) === null || _a === void 0 ? void 0 : _a.permissionType) === null || _b === void 0 ? void 0 : _b.users, authRoles: (_d = (_c = task.parameters) === null || _c === void 0 ? void 0 : _c.permissionType) === null || _d === void 0 ? void 0 : _d.roles, authGroups: (_f = (_e = task.parameters) === null || _e === void 0 ? void 0 : _e.permissionType) === null || _f === void 0 ? void 0 : _f.groups, authUserFields: (_h = (_g = task.parameters) === null || _g === void 0 ? void 0 : _g.permissionType) === null || _h === void 0 ? void 0 : _h.customFields, authWorkSpaceRoles: (_k = (_j = task.parameters) === null || _j === void 0 ? void 0 : _j.permissionType) === null || _k === void 0 ? void 0 : _k.workspaceRoles, creatorAuth: (_m = (_l = task.parameters) === null || _l === void 0 ? void 0 : _l.permissionType) === null || _m === void 0 ? void 0 : _m.creatorAuth, scriptValidator: (_o = task.parameters) === null || _o === void 0 ? void 0 : _o.scriptValidator, conditions: (_p = task.parameters) === null || _p === void 0 ? void 0 : _p.fieldType, screenId: (_r = (_q = task.parameters) === null || _q === void 0 ? void 0 : _q.screen) === null || _r === void 0 ? void 0 : _r.key, target: task.target, approval: approval, checkIn: checkIn, handleTransition: handleTransition, hiddenPopover: () => setPopoverVisible(false), readonly: readonly }, task.id));
+                    }) }) })) : (_jsx("span", { onClick: () => {
+                    setPopoverVisible(false);
+                }, className: noPermissionStyle, children: i18n.t('pages.fields.view.noWorkflowOrAuth') })), _jsx(View, { workflowData: workflowData, hiddenPopover: () => setPopoverVisible(false), name: name, objectId: objectId })] }));
+};
+function getWorkflowConfig(workflow, statusId) {
+    var _a, _b, _c, _d, _e;
+    const currentNode = workflow.nodes.find(node => node.statusId === statusId);
+    const approval = cloneDeep(DEFAULT_APPROVAL_DATA);
+    const checkIn = cloneDeep(DEFAULT_CHECK_IN_DATA);
+    if ((_a = currentNode === null || currentNode === void 0 ? void 0 : currentNode.approval) === null || _a === void 0 ? void 0 : _a.active) {
+        approval.requireApproval = true;
+        approval.transition = currentNode.approval.transition;
+        approval.approvalStatus = (_b = workflow.approvalResult) === null || _b === void 0 ? void 0 : _b.status;
+        approval.startApproval = (_c = workflow.approvalResult) === null || _c === void 0 ? void 0 : _c.startApproval;
+    }
+    if ((_d = currentNode === null || currentNode === void 0 ? void 0 : currentNode.checkIn) === null || _d === void 0 ? void 0 : _d.active) {
+        checkIn.requireCheckIn = true;
+        checkIn.transition = currentNode.checkIn.transition;
+        checkIn.checkInStatus = (_e = workflow.checkInResult) === null || _e === void 0 ? void 0 : _e.status;
+    }
+    return { approval, checkIn };
+}
+export default memo(TransitionPanel);

package/dist/{cells → components/fields}/status/View.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-import { workflowDataProps } from '@/lib/types/workflow';
+import { WorkflowDataProps } from '../../../lib/types/workflow';
 interface ViewProps {
     name: string;
     objectId: string;
-    workflowData: workflowDataProps;
+    workflowData: WorkflowDataProps;
     hiddenPopover?: () => void;
 }
 declare const _default: React.NamedExoticComponent<ViewProps>;

package/dist/components/fields/status/View.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useEffect } from 'react';
+import { cx } from '@emotion/css';
+import { proximaSdk } from '@giteeteam/proxima-sdk-js';
+import { WorkflowIcon } from '../../../icons';
+import { i18n } from '../../../lib/i18n';
+import { injectStatusViewGlobalStyle } from './style';
+const View = ({ name, objectId, hiddenPopover, workflowData }) => {
+    const viewClickHandle = useCallback(e => {
+        e.stopPropagation();
+    }, []);
+    useEffect(() => {
+        injectStatusViewGlobalStyle();
+    }, []);
+    return (_jsx("div", { className: cx('field-layout', 'status-view'), onClick: viewClickHandle, children: _jsxs("span", { onClick: () => {
+                hiddenPopover === null || hiddenPopover === void 0 ? void 0 : hiddenPopover();
+                proximaSdk.execute('openItemWorkflowViewerModal', { name, objectId, workflowData });
+            }, children: [_jsx(WorkflowIcon, { className: 'status-view-watch' }), i18n.t('pages.fields.view.viewWorkflow')] }) }));
+};
+export default memo(View);

package/dist/components/fields/status/style/index.d.ts

@@ -0,0 +1,20 @@
+export declare const readViewWrapper: string;
+export declare const workflowContentStyle: string;
+export declare const statePopoverStyle: (antPrefix: string) => string;
+export declare const flowNextStyle: string;
+export declare const flowStateStyle: string;
+export declare const flowStateInWorkflowStyle: string;
+export declare const flowStateButtonStyle: string;
+export declare const stateBtnStyle: string;
+export declare const noStateStyle: string;
+export declare const caretDownStyle: string;
+export declare const injectStatusViewGlobalStyle: () => void;
+export declare const tipLineStyle: string;
+export declare const tooltipStyle: string;
+export declare const iconStyle: string;
+export declare const stateBoxStyle: string;
+export declare const flowBtnStyle: string;
+export declare const notAllowedStyle: string;
+export declare const pointerStyle: string;
+export declare const spinStyle: string;
+export declare const noPermissionStyle: string;

package/dist/components/fields/status/style/index.js

@@ -0,0 +1,155 @@
+import { css, injectGlobal } from '@emotion/css';
+import { fieldLabelColor, gray7, statusCellMinWidth, themeBgColorBase } from '../../../../style/common';
+export const readViewWrapper = css `
+  display: -webkit-box;
+  align-items: center;
+  justify-content: center;
+  min-width: 62px;
+  height: 22px;
+  padding: 0 8px;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 22px;
+  text-align: center;
+  border-radius: 4px;
+`;
+export const workflowContentStyle = css `
+  max-width: 200px;
+  text-align: left;
+`;
+export const statePopoverStyle = (antPrefix) => css `
+  z-index: 1000 !important;
+
+  div.${antPrefix}-popover-inner-content, div.${antPrefix}-popover-inner {
+    padding: 0;
+  }
+
+  div.${antPrefix}-popover-arrow {
+    background: transparent;
+    border-style: none;
+    border-width: 0;
+  }
+`;
+export const flowNextStyle = css `
+  max-height: 260px;
+  padding-top: 10px;
+  overflow: auto;
+`;
+export const flowStateStyle = css `
+  min-width: ${statusCellMinWidth};
+  height: 24px;
+  padding: 0 18px 0 8px;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 24px;
+  color: #fff;
+  text-align: center;
+  background: #cdcdcd;
+  border-radius: 4px;
+  box-shadow: none !important;
+
+  span {
+    text-decoration: none !important;
+  }
+`;
+export const flowStateInWorkflowStyle = css `
+  :not(.add-weights) {
+    min-width: ${statusCellMinWidth};
+    height: 22px;
+    padding: 0 8px;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 22px;
+    color: #fff;
+    text-align: center;
+    background: #cdcdcd;
+    border-radius: 4px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+`;
+export const flowStateButtonStyle = css `
+  &:not(.add-weights) > span {
+    display: -webkit-box;
+  }
+`;
+export const stateBtnStyle = css `
+  height: 22px;
+  line-height: 22px;
+`;
+export const noStateStyle = css `
+  color: ${fieldLabelColor};
+  background: ${themeBgColorBase};
+`;
+export const caretDownStyle = css `
+  padding-left: 2px;
+  margin-left: 0;
+  line-height: 10px;
+`;
+export const injectStatusViewGlobalStyle = () => {
+    injectGlobal `
+    .field-layout.status-view {
+      position: relative;
+      padding: 10px;
+      margin-top: 10px;
+      font-size: 12px;
+      cursor: pointer;
+      border-top: 1px solid #ddd;
+    }
+
+    .field-layout.status-view .status-view-watch {
+      width: 12px;
+      height: 12px;
+      margin-right: 5px;
+      font-size: 12px;
+      vertical-align: middle;
+    }
+  `;
+};
+export const tipLineStyle = css `
+  margin-bottom: 0;
+`;
+export const tooltipStyle = css `
+  width: 80px;
+`;
+export const iconStyle = css `
+  padding: 0 6px;
+  color: ${gray7};
+`;
+export const stateBoxStyle = css `
+  display: flex;
+  width: 80px;
+
+  span {
+    padding-right: 8px;
+  }
+`;
+export const flowBtnStyle = css `
+  display: flex;
+  padding: 5px 10px;
+  margin: 0;
+
+  &:hover {
+    background-color: var(--select-item-selected-bg, #e6f3ff);
+  }
+`;
+export const notAllowedStyle = css `
+  cursor: not-allowed;
+  opacity: 0.3;
+`;
+export const pointerStyle = css `
+  cursor: pointer;
+`;
+export const spinStyle = css `
+  width: 150px;
+  height: 50px;
+`;
+export const noPermissionStyle = css `
+  display: block;
+  width: 120px;
+  padding: 20px 10px 10px;
+  font-size: 12px;
+  color: #2e405e;
+`;