szld-libs 0.1.5 → 0.1.6

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.
@@ -42,6 +42,15 @@
42
42
  padding-left: 28px;
43
43
  top: -3px;
44
44
  }
45
+ .workflownode-module_main_dce7f .workflownode-module_item_73d7c .workflownode-module_content_8334f .workflownode-module_btn_b0c06 {
46
+ display: flex;
47
+ align-items: center;
48
+ gap: 8px;
49
+ color: #1864ff;
50
+ cursor: pointer;
51
+ font-size: 12px;
52
+ margin-top: 12px;
53
+ }
45
54
  .workflownode-module_main_dce7f .workflownode-module_item_73d7c .workflownode-module_content_8334f .workflownode-module_collpase_f2468 {
46
55
  top: 0px;
47
56
  position: relative;
@@ -54,13 +63,8 @@
54
63
  .workflownode-module_main_dce7f .workflownode-module_item_73d7c .workflownode-module_content_8334f .workflownode-module_collpase_f2468 span {
55
64
  color: #1864ff;
56
65
  }
57
- .workflownode-module_main_dce7f .workflownode-module_item_73d7c .workflownode-module_content_8334f .workflownode-module_btn_b0c06 {
58
- display: flex;
59
- align-items: center;
60
- gap: 8px;
61
- color: #1864ff;
62
- cursor: pointer;
63
- font-size: 12px;
66
+ .workflownode-module_main_dce7f .workflownode-module_item_73d7c .workflownode-module_content_8334f .workflownode-module_collpase_f2468 .workflownode-module_btn_b0c06 {
67
+ margin-top: 0;
64
68
  }
65
69
  .workflownode-module_main_dce7f .workflownode-module_item_73d7c .workflownode-module_content_8334f .workflownode-module_title_cb34c {
66
70
  font-size: 16px;
@@ -1,7 +1,11 @@
1
1
  import { ModalFuncProps } from "antd";
2
+ import { Key, ReactNode } from "react";
2
3
  interface WorkFlowNodeProps {
3
4
  data: any[];
4
- current: string;
5
+ current?: string;
6
+ currentIndex?: number;
7
+ rowKey: string | ((record: any) => Key);
8
+ renderContent?: (record: any) => ReactNode;
5
9
  }
6
10
  interface showWorkFlow extends WorkFlowNodeProps, ModalFuncProps {
7
11
  }
@@ -1,4 +1,4 @@
1
- import { jsx, jsxs } from "react/jsx-runtime";
1
+ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
2
  import { Modal } from "antd";
3
3
  import classNames from "classnames";
4
4
  import { useState, useMemo } from "react";
@@ -8,8 +8,8 @@ const item = "workflownode-module_item_73d7c";
8
8
  const tail = "workflownode-module_tail_3cb51";
9
9
  const node = "workflownode-module_node_005fd";
10
10
  const content = "workflownode-module_content_8334f";
11
- const collpase = "workflownode-module_collpase_f2468";
12
11
  const btn = "workflownode-module_btn_b0c06";
12
+ const collpase = "workflownode-module_collpase_f2468";
13
13
  const title = "workflownode-module_title_cb34c";
14
14
  const dateWrapper = "workflownode-module_dateWrapper_94849";
15
15
  const remark = "workflownode-module_remark_4f910";
@@ -22,8 +22,8 @@ const styles = {
22
22
  tail,
23
23
  node,
24
24
  content,
25
- collpase,
26
25
  btn,
26
+ collpase,
27
27
  title,
28
28
  dateWrapper,
29
29
  remark,
@@ -32,9 +32,12 @@ const styles = {
32
32
  itemUnDo
33
33
  };
34
34
  const WorkFlowNode = (props) => {
35
- const { data, current } = props;
35
+ const { data, current, rowKey, renderContent } = props;
36
36
  const [isExpand, setExpand] = useState(false);
37
37
  const currentIndex = useMemo(() => {
38
+ if (props.currentIndex !== void 0) {
39
+ return props.currentIndex;
40
+ }
38
41
  if (!current || data.length === 0) {
39
42
  return 0;
40
43
  }
@@ -81,36 +84,47 @@ const WorkFlowNode = (props) => {
81
84
  /* @__PURE__ */ jsx("div", { className: styles.node }),
82
85
  /* @__PURE__ */ jsxs("div", { className: styles.content, children: [
83
86
  /* @__PURE__ */ jsx("div", { className: styles.title, children: item2.PNName }),
84
- /* @__PURE__ */ jsxs("div", { className: styles.dateWrapper, children: [
85
- item2.PlanFinishDate && /* @__PURE__ */ jsxs("span", { children: [
86
- "预计完成时间: ",
87
- item2.PlanFinishDate
88
- ] }),
89
- item2.UpdateTime && /* @__PURE__ */ jsxs("span", { style: { color: "#333", fontWeight: "bold" }, children: [
90
- "实际完成时间: ",
91
- item2.UpdateTime
87
+ renderContent ? renderContent(item2) : /* @__PURE__ */ jsxs(Fragment, { children: [
88
+ /* @__PURE__ */ jsxs("div", { className: styles.dateWrapper, children: [
89
+ item2.PlanFinishDate && /* @__PURE__ */ jsxs("span", { children: [
90
+ "预计完成时间: ",
91
+ item2.PlanFinishDate
92
+ ] }),
93
+ item2.UpdateTime && /* @__PURE__ */ jsxs("span", { style: { color: "#333", fontWeight: "bold" }, children: [
94
+ "实际完成时间: ",
95
+ item2.UpdateTime
96
+ ] })
92
97
  ] }),
93
- isExpand && currentIndex - 1 === index && /* @__PURE__ */ jsxs("a", { className: styles.btn, onClick: () => setExpand(false), children: [
94
- "收起节点 ",
95
- /* @__PURE__ */ jsx(UpOutlined, {})
96
- ] })
98
+ item2.Remark && /* @__PURE__ */ jsx("div", { className: styles.remark, children: item2.Remark })
97
99
  ] }),
98
- item2.Remark && /* @__PURE__ */ jsx("div", { className: styles.remark, children: item2.Remark })
100
+ isExpand && currentIndex - 1 === index && /* @__PURE__ */ jsxs("a", { className: styles.btn, onClick: () => setExpand(false), children: [
101
+ "收起节点 ",
102
+ /* @__PURE__ */ jsx(UpOutlined, {})
103
+ ] })
99
104
  ] })
100
105
  ]
101
106
  },
102
- item2.PNId
107
+ typeof rowKey === "string" ? item2[rowKey] : rowKey(item2)
103
108
  ))
104
109
  ] });
105
110
  };
106
111
  const showWorkFlow = (props) => {
107
- const { current, data, ...rest } = props;
112
+ const { current, data, rowKey, renderContent, currentIndex, ...rest } = props;
108
113
  const render = () => {
109
114
  Modal.info({
110
115
  icon: null,
111
116
  title: "流程节点",
112
117
  width: 700,
113
- content: /* @__PURE__ */ jsx(WorkFlowNode, { current, data }),
118
+ content: /* @__PURE__ */ jsx(
119
+ WorkFlowNode,
120
+ {
121
+ rowKey,
122
+ renderContent,
123
+ current,
124
+ currentIndex,
125
+ data
126
+ }
127
+ ),
114
128
  closable: true,
115
129
  footer: null,
116
130
  maskClosable: true,
package/es/index.js CHANGED
@@ -1,9 +1,9 @@
1
- import { jsx } from "react/jsx-runtime";
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import { useState } from "react";
3
3
  import ReactDOM from "react-dom/client";
4
4
  import { BrowserRouter } from "react-router-dom";
5
- import { EditTable } from "./main";
6
- import { Form } from "antd";
5
+ import { EditTable, showWorkFlow } from "./main";
6
+ import { Form, Button } from "antd";
7
7
  const Demo = () => {
8
8
  Form.useForm();
9
9
  const [list, setList] = useState([
@@ -88,18 +88,35 @@ const Demo = () => {
88
88
  url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
89
89
  }
90
90
  ]);
91
- return /* @__PURE__ */ jsx("div", { style: { height: "100vh" }, children: /* @__PURE__ */ jsx(
92
- EditTable,
93
- {
94
- columns,
95
- rowKey: "PNOrderNo",
96
- onChange: (row) => {
97
- console.log(row);
98
- },
99
- dataSource: list,
100
- pagination: false
101
- }
102
- ) });
91
+ const handleClick = () => {
92
+ showWorkFlow({
93
+ data: Array(10).fill(0).map((v, index) => ({
94
+ id: String(index),
95
+ PNName: String(index),
96
+ Remark: index
97
+ })),
98
+ rowKey: (row) => row.id,
99
+ current: "5",
100
+ currentIndex: 5,
101
+ wrapClassName: "confirmWrapper",
102
+ renderContent: (record) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("p", { children: record.PNName }) })
103
+ });
104
+ };
105
+ return /* @__PURE__ */ jsxs("div", { style: { height: "100vh" }, children: [
106
+ /* @__PURE__ */ jsx(Button, { onClick: handleClick, children: "click" }),
107
+ /* @__PURE__ */ jsx(
108
+ EditTable,
109
+ {
110
+ columns,
111
+ rowKey: "PNOrderNo",
112
+ onChange: (row) => {
113
+ console.log(row);
114
+ },
115
+ dataSource: list,
116
+ pagination: false
117
+ }
118
+ )
119
+ ] });
103
120
  };
104
121
  ReactDOM.createRoot(document.getElementById("root")).render(
105
122
  /* @__PURE__ */ jsx(BrowserRouter, { children: /* @__PURE__ */ jsx(Demo, {}) })
@@ -42,6 +42,15 @@
42
42
  padding-left: 28px;
43
43
  top: -3px;
44
44
  }
45
+ .workflownode-module_main_dce7f .workflownode-module_item_73d7c .workflownode-module_content_8334f .workflownode-module_btn_b0c06 {
46
+ display: flex;
47
+ align-items: center;
48
+ gap: 8px;
49
+ color: #1864ff;
50
+ cursor: pointer;
51
+ font-size: 12px;
52
+ margin-top: 12px;
53
+ }
45
54
  .workflownode-module_main_dce7f .workflownode-module_item_73d7c .workflownode-module_content_8334f .workflownode-module_collpase_f2468 {
46
55
  top: 0px;
47
56
  position: relative;
@@ -54,13 +63,8 @@
54
63
  .workflownode-module_main_dce7f .workflownode-module_item_73d7c .workflownode-module_content_8334f .workflownode-module_collpase_f2468 span {
55
64
  color: #1864ff;
56
65
  }
57
- .workflownode-module_main_dce7f .workflownode-module_item_73d7c .workflownode-module_content_8334f .workflownode-module_btn_b0c06 {
58
- display: flex;
59
- align-items: center;
60
- gap: 8px;
61
- color: #1864ff;
62
- cursor: pointer;
63
- font-size: 12px;
66
+ .workflownode-module_main_dce7f .workflownode-module_item_73d7c .workflownode-module_content_8334f .workflownode-module_collpase_f2468 .workflownode-module_btn_b0c06 {
67
+ margin-top: 0;
64
68
  }
65
69
  .workflownode-module_main_dce7f .workflownode-module_item_73d7c .workflownode-module_content_8334f .workflownode-module_title_cb34c {
66
70
  font-size: 16px;
@@ -1,7 +1,11 @@
1
1
  import { ModalFuncProps } from "antd";
2
+ import { Key, ReactNode } from "react";
2
3
  interface WorkFlowNodeProps {
3
4
  data: any[];
4
- current: string;
5
+ current?: string;
6
+ currentIndex?: number;
7
+ rowKey: string | ((record: any) => Key);
8
+ renderContent?: (record: any) => ReactNode;
5
9
  }
6
10
  interface showWorkFlow extends WorkFlowNodeProps, ModalFuncProps {
7
11
  }
@@ -9,8 +9,8 @@ const item = "workflownode-module_item_73d7c";
9
9
  const tail = "workflownode-module_tail_3cb51";
10
10
  const node = "workflownode-module_node_005fd";
11
11
  const content = "workflownode-module_content_8334f";
12
- const collpase = "workflownode-module_collpase_f2468";
13
12
  const btn = "workflownode-module_btn_b0c06";
13
+ const collpase = "workflownode-module_collpase_f2468";
14
14
  const title = "workflownode-module_title_cb34c";
15
15
  const dateWrapper = "workflownode-module_dateWrapper_94849";
16
16
  const remark = "workflownode-module_remark_4f910";
@@ -23,8 +23,8 @@ const styles = {
23
23
  tail,
24
24
  node,
25
25
  content,
26
- collpase,
27
26
  btn,
27
+ collpase,
28
28
  title,
29
29
  dateWrapper,
30
30
  remark,
@@ -33,9 +33,12 @@ const styles = {
33
33
  itemUnDo
34
34
  };
35
35
  const WorkFlowNode = (props) => {
36
- const { data, current } = props;
36
+ const { data, current, rowKey, renderContent } = props;
37
37
  const [isExpand, setExpand] = react.useState(false);
38
38
  const currentIndex = react.useMemo(() => {
39
+ if (props.currentIndex !== void 0) {
40
+ return props.currentIndex;
41
+ }
39
42
  if (!current || data.length === 0) {
40
43
  return 0;
41
44
  }
@@ -82,36 +85,47 @@ const WorkFlowNode = (props) => {
82
85
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.node }),
83
86
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.content, children: [
84
87
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.title, children: item2.PNName }),
85
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.dateWrapper, children: [
86
- item2.PlanFinishDate && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
87
- "预计完成时间: ",
88
- item2.PlanFinishDate
89
- ] }),
90
- item2.UpdateTime && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: "#333", fontWeight: "bold" }, children: [
91
- "实际完成时间: ",
92
- item2.UpdateTime
88
+ renderContent ? renderContent(item2) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
89
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.dateWrapper, children: [
90
+ item2.PlanFinishDate && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
91
+ "预计完成时间: ",
92
+ item2.PlanFinishDate
93
+ ] }),
94
+ item2.UpdateTime && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: "#333", fontWeight: "bold" }, children: [
95
+ "实际完成时间: ",
96
+ item2.UpdateTime
97
+ ] })
93
98
  ] }),
94
- isExpand && currentIndex - 1 === index && /* @__PURE__ */ jsxRuntime.jsxs("a", { className: styles.btn, onClick: () => setExpand(false), children: [
95
- "收起节点 ",
96
- /* @__PURE__ */ jsxRuntime.jsx(icons.UpOutlined, {})
97
- ] })
99
+ item2.Remark && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.remark, children: item2.Remark })
98
100
  ] }),
99
- item2.Remark && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.remark, children: item2.Remark })
101
+ isExpand && currentIndex - 1 === index && /* @__PURE__ */ jsxRuntime.jsxs("a", { className: styles.btn, onClick: () => setExpand(false), children: [
102
+ "收起节点 ",
103
+ /* @__PURE__ */ jsxRuntime.jsx(icons.UpOutlined, {})
104
+ ] })
100
105
  ] })
101
106
  ]
102
107
  },
103
- item2.PNId
108
+ typeof rowKey === "string" ? item2[rowKey] : rowKey(item2)
104
109
  ))
105
110
  ] });
106
111
  };
107
112
  const showWorkFlow = (props) => {
108
- const { current, data, ...rest } = props;
113
+ const { current, data, rowKey, renderContent, currentIndex, ...rest } = props;
109
114
  const render = () => {
110
115
  antd.Modal.info({
111
116
  icon: null,
112
117
  title: "流程节点",
113
118
  width: 700,
114
- content: /* @__PURE__ */ jsxRuntime.jsx(WorkFlowNode, { current, data }),
119
+ content: /* @__PURE__ */ jsxRuntime.jsx(
120
+ WorkFlowNode,
121
+ {
122
+ rowKey,
123
+ renderContent,
124
+ current,
125
+ currentIndex,
126
+ data
127
+ }
128
+ ),
115
129
  closable: true,
116
130
  footer: null,
117
131
  maskClosable: true,
package/lib/index.js CHANGED
@@ -89,18 +89,35 @@ const Demo = () => {
89
89
  url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
90
90
  }
91
91
  ]);
92
- return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: "100vh" }, children: /* @__PURE__ */ jsxRuntime.jsx(
93
- main.EditTable,
94
- {
95
- columns,
96
- rowKey: "PNOrderNo",
97
- onChange: (row) => {
98
- console.log(row);
99
- },
100
- dataSource: list,
101
- pagination: false
102
- }
103
- ) });
92
+ const handleClick = () => {
93
+ main.showWorkFlow({
94
+ data: Array(10).fill(0).map((v, index) => ({
95
+ id: String(index),
96
+ PNName: String(index),
97
+ Remark: index
98
+ })),
99
+ rowKey: (row) => row.id,
100
+ current: "5",
101
+ currentIndex: 5,
102
+ wrapClassName: "confirmWrapper",
103
+ renderContent: (record) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: record.PNName }) })
104
+ });
105
+ };
106
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { height: "100vh" }, children: [
107
+ /* @__PURE__ */ jsxRuntime.jsx(antd.Button, { onClick: handleClick, children: "click" }),
108
+ /* @__PURE__ */ jsxRuntime.jsx(
109
+ main.EditTable,
110
+ {
111
+ columns,
112
+ rowKey: "PNOrderNo",
113
+ onChange: (row) => {
114
+ console.log(row);
115
+ },
116
+ dataSource: list,
117
+ pagination: false
118
+ }
119
+ )
120
+ ] });
104
121
  };
105
122
  ReactDOM.createRoot(document.getElementById("root")).render(
106
123
  /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.BrowserRouter, { children: /* @__PURE__ */ jsxRuntime.jsx(Demo, {}) })
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "szld-libs",
3
3
  "private": false,
4
- "version": "0.1.5",
4
+ "version": "0.1.6",
5
5
  "type": "module",
6
6
  "scripts": {
7
7
  "dev": "vite",