tachybase_todo/packages/plugins/@tachybase/plugin-workflow/src/client/CanvasContent.tsx
sealday 3e58c54aa8 feat: 仓库二期 (#719)
Co-authored-by: hello@lv <2256334253@qq.com>
Co-authored-by: wjh <wwwjh0710@163.com>
Co-authored-by: sealday <sealday@gmail.com>
Reviewed-on: daoyoucloud/tachybase#719
2024-05-08 16:20:31 +08:00

60 lines
1.7 KiB
TypeScript

import { Alert, Slider } from 'antd';
import React from 'react';
import { cx, css } from '@tachybase/client';
import { Branch } from './Branch';
import { useFlowContext } from './FlowContext';
import { lang } from './locale';
import useStyles from './style';
import { TriggerConfig } from './triggers';
export function CanvasContent({ entry }) {
const { styles } = useStyles();
const { workflow } = useFlowContext();
const [zoom, setZoom] = React.useState(100);
return (
<div className="workflow-canvas-wrapper">
<div className="workflow-canvas" style={{ zoom: zoom / 100 }}>
<div
className={cx(
styles.branchBlockClass,
css`
margin-top: 0 !important;
`,
)}
>
<div className={styles.branchClass}>
{workflow?.executed ? (
<Alert
type="warning"
message={lang('Executed workflow cannot be modified')}
showIcon
className={css`
margin-bottom: 1em;
`}
/>
) : null}
<TriggerConfig />
<div
className={cx(
styles.branchBlockClass,
css`
margin-top: 0 !important;
`,
)}
>
<Branch entry={entry} />
</div>
<div className={styles.terminalClass}>{lang('End')}</div>
</div>
</div>
</div>
<div className="workflow-canvas-zoomer">
<Slider vertical reverse defaultValue={100} step={10} min={10} value={zoom} onChange={setZoom} />
</div>
</div>
);
}