@coding-flow/flow-design 0.0.64 → 0.0.66

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/components/design-editor/node-components/header/index.js +76 -27
  2. package/dist/components/design-editor/node-components/header/index.module.js +9 -0
  3. package/dist/components/design-editor/node-components/header/index_module.css +43 -0
  4. package/package.json +7 -7
package/dist/components/design-editor/node-components/header/index.js CHANGED
@@ -1,13 +1,14 @@
1
1
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
2
  import { useCallback, useMemo, useState } from "react";
3
3
  import { useIsSidebar } from "../../hooks/index.js";
4
- import { Button, Flex, Input, Space, theme } from "antd";
4
+ import { Button, Flex, Input, Space, Typography, theme } from "antd";
5
5
  import { nodeFormPanelFactory } from "../../components/sidebar/index.js";
6
6
  import { usePanelManager } from "@flowgram.ai/panel-manager-plugin";
7
7
  import { Field } from "@flowgram.ai/fixed-layout-editor";
8
8
  import { CloseOutlined, EditOutlined } from "@ant-design/icons";
9
9
  import { NodeIcon } from "../../components/node-icon/index.js";
10
10
  import { useNodeRenderContext } from "../../hooks/use-node-render-context.js";
11
+ import index_module from "./index.module.js";
11
12
  const HeaderTitle = ({ title, onChange, readonly })=>{
12
13
  const { token } = theme.useToken();
13
14
  const [editTitle, setEditTitle] = useState(false);
@@ -27,10 +28,7 @@ const HeaderTitle = ({ title, onChange, readonly })=>{
27
28
  }, [
28
29
  onChange
29
30
  ]);
30
- if (readonly || !isSidebar || editTitleDisabled) return /*#__PURE__*/ jsx("span", {
31
- children: title
32
- });
33
- if (editTitle) return /*#__PURE__*/ jsx(Input, {
31
+ if (isSidebar && editTitle && !readonly && !editTitleDisabled) return /*#__PURE__*/ jsx(Input, {
34
32
  autoFocus: true,
35
33
  size: "small",
36
34
  style: {
@@ -47,9 +45,20 @@ const HeaderTitle = ({ title, onChange, readonly })=>{
47
45
  },
48
46
  placeholder: "请输入标题名称"
49
47
  });
50
- return /*#__PURE__*/ jsxs(Space, {
48
+ if (!isSidebar) return /*#__PURE__*/ jsx("span", {
49
+ children: title
50
+ });
51
+ if (readonly || editTitleDisabled) return /*#__PURE__*/ jsx("span", {
52
+ className: index_module.titleText,
53
+ title: title,
54
+ children: title
55
+ });
56
+ return /*#__PURE__*/ jsxs("span", {
57
+ className: index_module.headerTitle,
51
58
  children: [
52
59
  /*#__PURE__*/ jsx("span", {
60
+ className: index_module.titleText,
61
+ title: title,
53
62
  children: title
54
63
  }),
55
64
  /*#__PURE__*/ jsx(EditOutlined, {
@@ -86,12 +95,44 @@ const NodeHeader = (props)=>{
86
95
  position: "relative",
87
96
  ...props.style
88
97
  };
98
+ if (!isSidebar) return /*#__PURE__*/ jsx(Flex, {
99
+ style: headerStyle,
100
+ justify: "space-between",
101
+ align: "center",
102
+ children: /*#__PURE__*/ jsxs(Space, {
103
+ children: [
104
+ iconEnable && /*#__PURE__*/ jsx(NodeIcon, {
105
+ type: nodeType
106
+ }),
107
+ /*#__PURE__*/ jsx(Field, {
108
+ name: "title",
109
+ children: ({ field: { value, onChange } })=>/*#__PURE__*/ jsx(HeaderTitle, {
110
+ title: value,
111
+ onChange: onChange
112
+ })
113
+ }),
114
+ /*#__PURE__*/ jsx(Field, {
115
+ name: "order",
116
+ children: ({ field: { value, onChange } })=>{
117
+ if ('INCLUSIVE_BRANCH' === nodeType || 'CONDITION_BRANCH' === nodeType || 'PARALLEL_BRANCH' === nodeType) return /*#__PURE__*/ jsxs(Fragment, {
118
+ children: [
119
+ "优先级:",
120
+ value
121
+ ]
122
+ });
123
+ return /*#__PURE__*/ jsx(Fragment, {});
124
+ }
125
+ })
126
+ ]
127
+ })
128
+ });
89
129
  return /*#__PURE__*/ jsxs(Flex, {
90
130
  style: headerStyle,
91
131
  justify: "space-between",
92
132
  align: "center",
93
133
  children: [
94
- /*#__PURE__*/ jsxs(Space, {
134
+ /*#__PURE__*/ jsxs("div", {
135
+ className: index_module.titleGroup,
95
136
  children: [
96
137
  iconEnable && /*#__PURE__*/ jsx(NodeIcon, {
97
138
  type: nodeType
@@ -102,29 +143,37 @@ const NodeHeader = (props)=>{
102
143
  title: value,
103
144
  onChange: onChange
104
145
  })
105
- }),
106
- !isSidebar && /*#__PURE__*/ jsx(Field, {
107
- name: "order",
108
- children: ({ field: { value, onChange } })=>{
109
- if ('INCLUSIVE_BRANCH' === nodeType || 'CONDITION_BRANCH' === nodeType || 'PARALLEL_BRANCH' === nodeType) return /*#__PURE__*/ jsxs(Fragment, {
110
- children: [
111
- "优先级:",
112
- value
113
- ]
114
- });
115
- return /*#__PURE__*/ jsx(Fragment, {});
116
- }
117
146
  })
118
147
  ]
119
148
  }),
120
- isSidebar && /*#__PURE__*/ jsx(Button, {
121
- type: "text",
122
- icon: /*#__PURE__*/ jsx(CloseOutlined, {
123
- style: {
124
- color: token.colorPrimary
125
- }
126
- }),
127
- onClick: handleClose
149
+ /*#__PURE__*/ jsxs("div", {
150
+ className: index_module.rightGroup,
151
+ children: [
152
+ /*#__PURE__*/ jsxs(Typography.Text, {
153
+ type: "secondary",
154
+ className: index_module.nodeId,
155
+ copyable: {
156
+ text: node.id,
157
+ tooltips: [
158
+ "复制节点 ID",
159
+ "已复制"
160
+ ]
161
+ },
162
+ children: [
163
+ "ID：",
164
+ node.id
165
+ ]
166
+ }),
167
+ /*#__PURE__*/ jsx(Button, {
168
+ type: "text",
169
+ icon: /*#__PURE__*/ jsx(CloseOutlined, {
170
+ style: {
171
+ color: token.colorPrimary
172
+ }
173
+ }),
174
+ onClick: handleClose
175
+ })
176
+ ]
128
177
  })
129
178
  ]
130
179
  });
package/dist/components/design-editor/node-components/header/index.module.js ADDED
@@ -0,0 +1,9 @@
1
+ import "./index_module.css";
2
+ const index_module = {
3
+ titleGroup: "titleGroup-D3fPiL",
4
+ headerTitle: "headerTitle-GtRbaK",
5
+ titleText: "titleText-VPGz0f",
6
+ rightGroup: "rightGroup-jcy_0K",
7
+ nodeId: "nodeId-WInQzE"
8
+ };
9
+ export { index_module as default };
package/dist/components/design-editor/node-components/header/index_module.css ADDED
@@ -0,0 +1,43 @@
1
+ .titleGroup-D3fPiL {
2
+ flex: auto;
3
+ align-items: center;
4
+ gap: 8px;
5
+ min-width: 0;
6
+ display: flex;
7
+ overflow: hidden;
8
+ }
9
+
10
+ .headerTitle-GtRbaK {
11
+ flex: auto;
12
+ align-items: center;
13
+ gap: 4px;
14
+ min-width: 0;
15
+ max-width: 100%;
16
+ display: inline-flex;
17
+ }
18
+
19
+ .titleText-VPGz0f {
20
+ text-overflow: ellipsis;
21
+ white-space: nowrap;
22
+ min-width: 0;
23
+ overflow: hidden;
24
+ }
25
+
26
+ .rightGroup-jcy_0K {
27
+ flex: none;
28
+ align-items: center;
29
+ gap: 4px;
30
+ margin-left: 8px;
31
+ display: flex;
32
+ }
33
+
34
+ .nodeId-WInQzE {
35
+ flex: none;
36
+ font-size: 12px;
37
+ }
38
+
39
+ .nodeId-WInQzE .ant-typography-copy {
40
+ margin-inline-start: 4px;
41
+ font-size: 13px;
42
+ }
43
+
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coding-flow/flow-design",
3
- "version": "0.0.64",
3
+ "version": "0.0.66",
4
4
  "description": "flow-engine design components ",
5
5
  "type": "module",
6
6
  "keywords": [
@@ -49,16 +49,16 @@
49
49
  "nanoid": "^5.1.6",
50
50
  "react-redux": "^9.2.0",
51
51
  "styled-components": "^5.3.11",
52
- "@coding-flow/flow-types": "0.0.64",
53
- "@coding-flow/flow-core": "0.0.64",
54
- "@coding-flow/flow-icons": "0.0.64",
55
- "@coding-flow/flow-pc-ui": "0.0.64"
52
+ "@coding-flow/flow-core": "0.0.66",
53
+ "@coding-flow/flow-types": "0.0.66",
54
+ "@coding-flow/flow-icons": "0.0.66",
55
+ "@coding-flow/flow-pc-ui": "0.0.66"
56
56
  },
57
57
  "devDependencies": {
58
58
  "@types/lodash-es": "^4.17.12",
59
59
  "@types/styled-components": "^5.1.36",
60
- "@coding-flow/flow-core": "0.0.64",
61
- "@coding-flow/flow-types": "0.0.64"
60
+ "@coding-flow/flow-core": "0.0.66",
61
+ "@coding-flow/flow-types": "0.0.66"
62
62
  },
63
63
  "scripts": {
64
64
  "build": "rslib build",