tenjin-ui-kit 0.3.72-dev-1 → 0.3.73
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.
- package/common/hooks/apiHooks.js +91 -199
- package/common/hooks/newApiHook.js +127 -258
- package/common/utils/security/index.js +2 -2
- package/common/utils/security/securityConfig.js +1 -2
- package/components/Canvas.js +172 -101
- package/components/DragBox/index.js +21 -31
- package/components/InputWithChip/index.js +178 -83
- package/components/RightContext/index.js +17 -41
- package/components/WorkFlow.js +19 -29
- package/components/WorkFlowBuilder.js +32 -56
- package/components/alert/Style.js +11 -14
- package/components/alert/index.js +8 -14
- package/components/attachment/index.js +26 -31
- package/components/authenticationProvider/AuthError.js +3 -4
- package/components/authenticationProvider/AuthLoader.js +3 -4
- package/components/authenticationProvider/index.js +58 -130
- package/components/avatar/index.js +24 -23
- package/components/avatar/styles.js +76 -77
- package/components/breadCrumbs/index.js +64 -89
- package/components/breadCrumbs/style.js +1 -4
- package/components/browsingTestCaseLayout/DetailsViewLayout/DetailsViewContent/index.js +7 -6
- package/components/browsingTestCaseLayout/DetailsViewLayout/DetailsViewContent/style.js +5 -8
- package/components/browsingTestCaseLayout/DetailsViewLayout/DetailsViewHeader/index.js +7 -6
- package/components/browsingTestCaseLayout/TreeViewLayout/TreeViewContent/Index.js +8 -7
- package/components/browsingTestCaseLayout/TreeViewLayout/TreeViewHeader/Index.js +8 -7
- package/components/browsingTestCaseLayout/TreeViewLayout/TreeViewHeader/style.js +16 -19
- package/components/browsingTestCaseLayout/index.js +30 -46
- package/components/button/index.js +47 -58
- package/components/chatBotModal/index.js +40 -61
- package/components/checkBox/index.js +8 -10
- package/components/combobox/index.js +66 -100
- package/components/divider/index.js +9 -18
- package/components/editableField/index.js +19 -46
- package/components/error/index.js +6 -12
- package/components/errorBoundary/index.js +74 -98
- package/components/fileUploader/index.js +46 -58
- package/components/fileUploader/style.js +46 -49
- package/components/filter/ValueSelector.js +149 -245
- package/components/filter/index.js +45 -71
- package/components/iconButton/index.js +3 -4
- package/components/input/index.js +60 -74
- package/components/layout/index.js +36 -49
- package/components/layout/main/index.js +13 -14
- package/components/layout/main/style.js +11 -14
- package/components/layout/pageContent/index.js +8 -7
- package/components/layout/sidebar/FlatMenu.js +51 -47
- package/components/layout/sidebar/GroupedIconMenu.js +169 -194
- package/components/layout/sidebar/GroupedMenu.js +45 -50
- package/components/layout/sidebar/ProjectMenu.js +165 -185
- package/components/layout/sidebar/index.js +27 -26
- package/components/layout/sidebar/style.js +138 -143
- package/components/layout/topBar/ProjectTopbar.js +91 -208
- package/components/layout/topBar/UserAvatar.js +53 -69
- package/components/layout/topBar/index.js +23 -41
- package/components/loader/index.js +9 -12
- package/components/menu/index.js +23 -42
- package/components/modal/Modal.js +5 -6
- package/components/modal/index.js +16 -20
- package/components/modal/style.js +53 -56
- package/components/optionMenu/index.js +32 -47
- package/components/pagination/index.js +23 -43
- package/components/pagination/style.js +25 -28
- package/components/paginationUpdated/index.js +22 -29
- package/components/paper/index.js +20 -22
- package/components/paper/style.js +24 -27
- package/components/reactSelect/index.js +64 -97
- package/components/reactSelect/style.js +131 -151
- package/components/richTextEditor/index.js +24 -48
- package/components/select/GroupedSelect.js +96 -99
- package/components/select/SimpleSelect.js +61 -103
- package/components/select/index.js +56 -69
- package/components/simpleSelect/index.js +18 -22
- package/components/sort/index.js +23 -36
- package/components/switch/index.js +14 -15
- package/components/switch/style.js +29 -32
- package/components/switch/switch.js +30 -47
- package/components/table/ReactTable.js +59 -83
- package/components/table/SimpleTable.js +67 -91
- package/components/table/index.js +300 -206
- package/components/text/index.js +22 -30
- package/components/timeStamp/index.js +4 -9
- package/components/timeStamp/style.js +12 -15
- package/components/topBar/index.js +86 -102
- package/components/tree/index.js +30 -58
- package/components/tree/style.js +20 -23
- package/components/valuePicker/ValueSelector.js +78 -160
- package/components/valuePicker/index.js +30 -50
- package/components/wrapperLayout/layout/index.js +8 -7
- package/components/wrapperLayout/main/index.js +8 -7
- package/components/wrapperLayout/main/pageContainer/index.js +6 -5
- package/components/wrapperLayout/main/sideBar/index.js +171 -175
- package/components/wrapperLayout/main/sideBar/style.js +177 -183
- package/components/wrapperLayout/topBar/UserAvatar.js +6 -5
- package/components/wrapperLayout/topBar/avatar.js +15 -18
- package/components/wrapperLayout/topBar/index.js +115 -107
- package/components/wrapperLayout/topBar/menuIcon.js +6 -5
- package/components/wrapperLayout/topBar/style.js +63 -64
- package/http/index.js +92 -188
- package/index.js +53 -55
- package/package.json +3 -3
- package/templates/listPage/index.js +168 -196
- package/themes/default.js +5 -7
- package/themes/defaultSmall.js +2 -3
- package/themes/responsiveTheme.js +6 -8
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
@@ -12,87 +11,188 @@ var _Clear = _interopRequireDefault(require("@mui/icons-material/Clear"));
|
|
|
12
11
|
var _styles = require("@mui/material/styles");
|
|
13
12
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
14
13
|
var _text = _interopRequireDefault(require("../text"));
|
|
15
|
-
|
|
16
|
-
function
|
|
17
|
-
function
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
14
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
15
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
16
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } // import React, { useEffect, useState } from "react";
|
|
17
|
+
// import Chip from "@mui/material/Chip";
|
|
18
|
+
// import { FormControl, InputLabel, TextField } from "@mui/material";
|
|
19
|
+
// import ClearIcon from "@mui/icons-material/Clear";
|
|
20
|
+
// import { useTheme } from "@mui/material/styles";
|
|
21
|
+
// import PropTypes from "prop-types";
|
|
22
|
+
// import Text from "../text";
|
|
23
|
+
// const InputWithChip = ({
|
|
24
|
+
// value,
|
|
25
|
+
// id,
|
|
26
|
+
// onChange,
|
|
27
|
+
// fullWidth,
|
|
28
|
+
// label,
|
|
29
|
+
// isRequired,
|
|
30
|
+
// isDisabled,
|
|
31
|
+
// errorMessage,
|
|
32
|
+
// error,
|
|
33
|
+
// initialValue,
|
|
34
|
+
// ...rest
|
|
35
|
+
// }) => {
|
|
36
|
+
// const [chips, setChips] = useState(initialValue ? [...initialValue] : []);
|
|
37
|
+
// const theme = useTheme();
|
|
38
|
+
// const [txtValue, setTxtValue] = useState("");
|
|
39
|
+
// useEffect(() => {
|
|
40
|
+
// if (onChange) {
|
|
41
|
+
// onChange(chips);
|
|
42
|
+
// }
|
|
43
|
+
// }, [chips]);
|
|
44
|
+
// const onTextValueChange = (e) => {
|
|
45
|
+
// const value = e.target.value.trim();
|
|
46
|
+
// setTxtValue(value.replace(",", ""));
|
|
47
|
+
// };
|
|
48
|
+
// const handleAddChip = (event) => {
|
|
49
|
+
// if (
|
|
50
|
+
// (event.key === "Enter" ||
|
|
51
|
+
// event.keyCode === 32 ||
|
|
52
|
+
// event.keyCode === 188 ||
|
|
53
|
+
// event.keyCode === 9 ||
|
|
54
|
+
// event.type === "blur") &&
|
|
55
|
+
// event.target.value.replace(",", "")
|
|
56
|
+
// ) {
|
|
57
|
+
// const {
|
|
58
|
+
// target: { value },
|
|
59
|
+
// } = event;
|
|
60
|
+
// const newValue =
|
|
61
|
+
// typeof value === "string"
|
|
62
|
+
// ? value.replace(",", "").trim()
|
|
63
|
+
// : value.trim();
|
|
64
|
+
// // if (chips.includes(newValue)) return; //add if any info or anything needs to be shown
|
|
65
|
+
// setChips([...chips, newValue]);
|
|
66
|
+
// onChange([...chips, newValue]);
|
|
67
|
+
// setTxtValue("");
|
|
68
|
+
// event.target.parentNode.querySelector("input").value = "";
|
|
69
|
+
// }
|
|
70
|
+
// };
|
|
71
|
+
// const handleDeleteChip = (chipToDelete) => {
|
|
72
|
+
// setChips((chips) => chips.filter((chip) => chip !== chipToDelete));
|
|
73
|
+
// };
|
|
74
|
+
// return (
|
|
75
|
+
// <div>
|
|
76
|
+
// <FormControl variant="standard" fullWidth={fullWidth}>
|
|
77
|
+
// {label && (
|
|
78
|
+
// <Text color={theme.palette.grey[600]} required={isRequired}>
|
|
79
|
+
// {label}
|
|
80
|
+
// {isRequired ? <span style={{ color: "red" }}> * </span> : ""}
|
|
81
|
+
// </Text>
|
|
82
|
+
// )}
|
|
83
|
+
// <TextField
|
|
84
|
+
// value={txtValue}
|
|
85
|
+
// {...rest}
|
|
86
|
+
// id={id}
|
|
87
|
+
// required={isRequired}
|
|
88
|
+
// disabled={isDisabled}
|
|
89
|
+
// onKeyDown={handleAddChip}
|
|
90
|
+
// onBlur={(e) => {
|
|
91
|
+
// if (!chips?.length > 0) {
|
|
92
|
+
// setChips([]);
|
|
93
|
+
// }
|
|
94
|
+
// if (e.target.value !== "") {
|
|
95
|
+
// handleAddChip(e);
|
|
96
|
+
// }
|
|
97
|
+
// }}
|
|
98
|
+
// style={{ backgroundColor: isDisabled && "#E7E7E7" }}
|
|
99
|
+
// sx={{
|
|
100
|
+
// "& MuiOutlinedInput": { backgroundColor: isDisabled && "#E7E7E7" },
|
|
101
|
+
// "& input": {
|
|
102
|
+
// // backgroundColor: isDisabled && '#E7E7E7',
|
|
103
|
+
// color: isDisabled && "#000000",
|
|
104
|
+
// },
|
|
105
|
+
// marginTop: label ? theme.spacing(1) : 0,
|
|
106
|
+
// "& label": {
|
|
107
|
+
// fontWeight: 500,
|
|
108
|
+
// },
|
|
109
|
+
// }}
|
|
110
|
+
// onChange={onTextValueChange}
|
|
111
|
+
// helperText={errorMessage}
|
|
112
|
+
// error={error}
|
|
113
|
+
// InputProps={{
|
|
114
|
+
// startAdornment: chips.map((chip, index) => (
|
|
115
|
+
// <Chip
|
|
116
|
+
// key={`${chip}-${index}`}
|
|
117
|
+
// label={<Text>{chip}</Text>}
|
|
118
|
+
// onDelete={() => handleDeleteChip(chip)}
|
|
119
|
+
// deleteIcon={<ClearIcon fontSize="small" />}
|
|
120
|
+
// style={{ margin: "0.2rem" }}
|
|
121
|
+
// size="small"
|
|
122
|
+
// />
|
|
123
|
+
// )),
|
|
124
|
+
// }}
|
|
125
|
+
// />
|
|
126
|
+
// </FormControl>
|
|
127
|
+
// </div>
|
|
128
|
+
// );
|
|
129
|
+
// };
|
|
130
|
+
// InputWithChip.propTypes = {
|
|
131
|
+
// label: PropTypes.string,
|
|
132
|
+
// fullWidth: PropTypes.bool,
|
|
133
|
+
// size: PropTypes.string,
|
|
134
|
+
// isRequired: PropTypes.bool,
|
|
135
|
+
// isDisabled: PropTypes.bool,
|
|
136
|
+
// error: PropTypes.bool,
|
|
137
|
+
// };
|
|
138
|
+
// export default InputWithChip;
|
|
139
|
+
const InputWithChip = _ref => {
|
|
140
|
+
let {
|
|
141
|
+
value,
|
|
142
|
+
id,
|
|
143
|
+
onChange,
|
|
144
|
+
fullWidth,
|
|
145
|
+
label,
|
|
146
|
+
isRequired,
|
|
147
|
+
isDisabled,
|
|
148
|
+
errorMessage,
|
|
149
|
+
error,
|
|
150
|
+
initialValue,
|
|
151
|
+
height,
|
|
152
|
+
...rest
|
|
153
|
+
} = _ref;
|
|
154
|
+
const [chips, setChips] = (0, _react.useState)(value ? [...value] : []);
|
|
155
|
+
const theme = (0, _styles.useTheme)();
|
|
156
|
+
const [txtValue, setTxtValue] = (0, _react.useState)("");
|
|
157
|
+
const [duplicateWarnig, setDuplicateWarning] = (0, _react.useState)(null);
|
|
158
|
+
(0, _react.useEffect)(() => {
|
|
59
159
|
if (onChange) {
|
|
60
160
|
onChange(chips);
|
|
61
161
|
}
|
|
62
162
|
}, [chips]);
|
|
63
|
-
|
|
64
|
-
|
|
163
|
+
const onTextValueChange = e => {
|
|
164
|
+
const value = e.target.value.trim();
|
|
65
165
|
setTxtValue(value.replace(",", ""));
|
|
66
166
|
};
|
|
67
|
-
|
|
167
|
+
const handleAddChip = event => {
|
|
68
168
|
setDuplicateWarning({
|
|
69
169
|
status: false,
|
|
70
|
-
message:
|
|
170
|
+
message: ``
|
|
71
171
|
});
|
|
72
172
|
if ((event.key === "Enter" || event.keyCode === 32 || event.keyCode === 188 || event.keyCode === 9 || event.type === "blur") && event.target.value.replace(",", "")) {
|
|
73
|
-
|
|
74
|
-
|
|
173
|
+
const {
|
|
174
|
+
target: {
|
|
175
|
+
value
|
|
176
|
+
}
|
|
177
|
+
} = event;
|
|
178
|
+
const newValue = typeof value === "string" ? value.replace(",", "").trim() : value.trim();
|
|
75
179
|
// if (chips.includes(newValue)) return; //add if any info or anything needs to be shown
|
|
76
|
-
|
|
180
|
+
let isPresent = chips.includes(newValue);
|
|
77
181
|
if (isPresent) {
|
|
78
182
|
setDuplicateWarning({
|
|
79
183
|
status: true,
|
|
80
|
-
message:
|
|
184
|
+
message: `${newValue} already exists`
|
|
81
185
|
});
|
|
82
186
|
} else {
|
|
83
|
-
setChips([
|
|
84
|
-
onChange([
|
|
187
|
+
setChips([...chips, newValue]);
|
|
188
|
+
onChange([...chips, newValue]);
|
|
85
189
|
setTxtValue("");
|
|
86
190
|
event.target.parentNode.querySelector("input").value = "";
|
|
87
191
|
}
|
|
88
192
|
}
|
|
89
193
|
};
|
|
90
|
-
|
|
91
|
-
setChips(
|
|
92
|
-
return chips.filter(function (chip) {
|
|
93
|
-
return chip !== chipToDelete;
|
|
94
|
-
});
|
|
95
|
-
});
|
|
194
|
+
const handleDeleteChip = chipToDelete => {
|
|
195
|
+
setChips(chips => chips.filter(chip => chip !== chipToDelete));
|
|
96
196
|
};
|
|
97
197
|
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_material.FormControl, {
|
|
98
198
|
variant: "standard",
|
|
@@ -111,8 +211,8 @@ var InputWithChip = function InputWithChip(_ref) {
|
|
|
111
211
|
required: isRequired,
|
|
112
212
|
disabled: isDisabled,
|
|
113
213
|
onKeyDown: handleAddChip,
|
|
114
|
-
onBlur:
|
|
115
|
-
if (!
|
|
214
|
+
onBlur: e => {
|
|
215
|
+
if (!chips?.length > 0) {
|
|
116
216
|
setChips([]);
|
|
117
217
|
}
|
|
118
218
|
if (e.target.value !== "") {
|
|
@@ -150,30 +250,26 @@ var InputWithChip = function InputWithChip(_ref) {
|
|
|
150
250
|
// />
|
|
151
251
|
// )),
|
|
152
252
|
// }}
|
|
153
|
-
}))),
|
|
253
|
+
}))), duplicateWarnig?.status && /*#__PURE__*/_react.default.createElement(_material.Alert, {
|
|
154
254
|
severity: "warning"
|
|
155
|
-
}, duplicateWarnig
|
|
255
|
+
}, duplicateWarnig?.message), !!chips && /*#__PURE__*/_react.default.createElement(_material.Box, {
|
|
156
256
|
maxHeight: theme.spacing(20),
|
|
157
257
|
overflow: "auto"
|
|
158
258
|
// border={!!chips && "1px solid #E7E7E7"}
|
|
159
259
|
,
|
|
160
260
|
mt: theme.spacing(2)
|
|
161
|
-
}, /*#__PURE__*/_react.default.createElement(_text.default, null, chips.map(
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
},
|
|
174
|
-
size: "small"
|
|
175
|
-
});
|
|
176
|
-
}))));
|
|
261
|
+
}, /*#__PURE__*/_react.default.createElement(_text.default, null, chips.map((chip, index) => /*#__PURE__*/_react.default.createElement(_Chip.default, {
|
|
262
|
+
key: `${chip}-${index}`,
|
|
263
|
+
label: /*#__PURE__*/_react.default.createElement(_text.default, null, chip),
|
|
264
|
+
onDelete: () => handleDeleteChip(chip),
|
|
265
|
+
deleteIcon: /*#__PURE__*/_react.default.createElement(_Clear.default, {
|
|
266
|
+
fontSize: "small"
|
|
267
|
+
}),
|
|
268
|
+
style: {
|
|
269
|
+
margin: "0.2rem"
|
|
270
|
+
},
|
|
271
|
+
size: "small"
|
|
272
|
+
})))));
|
|
177
273
|
};
|
|
178
274
|
InputWithChip.propTypes = {
|
|
179
275
|
label: _propTypes.default.string,
|
|
@@ -183,5 +279,4 @@ InputWithChip.propTypes = {
|
|
|
183
279
|
isDisabled: _propTypes.default.bool,
|
|
184
280
|
error: _propTypes.default.bool
|
|
185
281
|
};
|
|
186
|
-
var _default = InputWithChip;
|
|
187
|
-
exports.default = _default;
|
|
282
|
+
var _default = exports.default = InputWithChip;
|
|
@@ -7,43 +7,28 @@ exports.default = void 0;
|
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
require("./index.css");
|
|
9
9
|
var _text = _interopRequireDefault(require("../text"));
|
|
10
|
-
function _interopRequireDefault(
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
var _React$useState = _react.default.useState(false),
|
|
19
|
-
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
20
|
-
context = _React$useState2[0],
|
|
21
|
-
setContext = _React$useState2[1];
|
|
22
|
-
var _React$useState3 = _react.default.useState({
|
|
23
|
-
x: 0,
|
|
24
|
-
y: 0
|
|
25
|
-
}),
|
|
26
|
-
_React$useState4 = _slicedToArray(_React$useState3, 2),
|
|
27
|
-
xYPosistion = _React$useState4[0],
|
|
28
|
-
setXyPosistion = _React$useState4[1];
|
|
29
|
-
var showNav = function showNav(event) {
|
|
10
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
11
|
+
const RightContext = () => {
|
|
12
|
+
const [context, setContext] = _react.default.useState(false);
|
|
13
|
+
const [xYPosistion, setXyPosistion] = _react.default.useState({
|
|
14
|
+
x: 0,
|
|
15
|
+
y: 0
|
|
16
|
+
});
|
|
17
|
+
const showNav = event => {
|
|
30
18
|
event.preventDefault();
|
|
31
19
|
setContext(false);
|
|
32
|
-
|
|
20
|
+
const positionChange = {
|
|
33
21
|
x: event.pageX,
|
|
34
22
|
y: event.pageY
|
|
35
23
|
};
|
|
36
24
|
setXyPosistion(positionChange);
|
|
37
25
|
setContext(true);
|
|
38
26
|
};
|
|
39
|
-
|
|
27
|
+
const hideContext = event => {
|
|
40
28
|
setContext(false);
|
|
41
29
|
};
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
chosen = _React$useState6[0],
|
|
45
|
-
setChosen = _React$useState6[1];
|
|
46
|
-
var initMenu = function initMenu(chosen) {
|
|
30
|
+
const [chosen, setChosen] = _react.default.useState();
|
|
31
|
+
const initMenu = chosen => {
|
|
47
32
|
setChosen(chosen);
|
|
48
33
|
};
|
|
49
34
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_text.default, {
|
|
@@ -62,25 +47,16 @@ var RightContext = function RightContext() {
|
|
|
62
47
|
className: "rightClick"
|
|
63
48
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
64
49
|
className: "menuElement",
|
|
65
|
-
onClick:
|
|
66
|
-
return initMenu("New");
|
|
67
|
-
}
|
|
50
|
+
onClick: () => initMenu("New")
|
|
68
51
|
}, /*#__PURE__*/_react.default.createElement(_text.default, null, "Refactor")), /*#__PURE__*/_react.default.createElement("div", {
|
|
69
52
|
className: "menuElement",
|
|
70
|
-
onClick:
|
|
71
|
-
return initMenu("Delete");
|
|
72
|
-
}
|
|
53
|
+
onClick: () => initMenu("Delete")
|
|
73
54
|
}, /*#__PURE__*/_react.default.createElement(_text.default, null, "Cut")), /*#__PURE__*/_react.default.createElement("div", {
|
|
74
55
|
className: "menuElement",
|
|
75
|
-
onClick:
|
|
76
|
-
return initMenu("Copy");
|
|
77
|
-
}
|
|
56
|
+
onClick: () => initMenu("Copy")
|
|
78
57
|
}, /*#__PURE__*/_react.default.createElement(_text.default, null, "Copy")), /*#__PURE__*/_react.default.createElement("div", {
|
|
79
58
|
className: "menuElement",
|
|
80
|
-
onClick:
|
|
81
|
-
return initMenu("Paste");
|
|
82
|
-
}
|
|
59
|
+
onClick: () => initMenu("Paste")
|
|
83
60
|
}, /*#__PURE__*/_react.default.createElement(_text.default, null, "Paste")))));
|
|
84
61
|
};
|
|
85
|
-
var _default = RightContext;
|
|
86
|
-
exports.default = _default;
|
|
62
|
+
var _default = exports.default = RightContext;
|
package/components/WorkFlow.js
CHANGED
|
@@ -7,32 +7,23 @@ exports.default = void 0;
|
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _reactDnd = require("react-dnd");
|
|
9
9
|
var _text = _interopRequireDefault(require("./text"));
|
|
10
|
-
function _interopRequireDefault(
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
return {
|
|
28
|
-
isDragging: !!monitor.isDragging()
|
|
29
|
-
};
|
|
30
|
-
}
|
|
31
|
-
};
|
|
32
|
-
}),
|
|
33
|
-
_useDrag2 = _slicedToArray(_useDrag, 2),
|
|
34
|
-
isDragging = _useDrag2[0].isDragging,
|
|
35
|
-
drag = _useDrag2[1];
|
|
10
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
11
|
+
const WorkFlow = props => {
|
|
12
|
+
const {
|
|
13
|
+
name,
|
|
14
|
+
id
|
|
15
|
+
} = props;
|
|
16
|
+
const [{
|
|
17
|
+
isDragging
|
|
18
|
+
}, drag] = (0, _reactDnd.useDrag)(() => ({
|
|
19
|
+
type: 'block',
|
|
20
|
+
item: {
|
|
21
|
+
id: props.id
|
|
22
|
+
},
|
|
23
|
+
collect: monitor => ({
|
|
24
|
+
isDragging: !!monitor.isDragging()
|
|
25
|
+
})
|
|
26
|
+
}));
|
|
36
27
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
37
28
|
ref: drag,
|
|
38
29
|
width: "150px",
|
|
@@ -41,7 +32,6 @@ var WorkFlow = function WorkFlow(props) {
|
|
|
41
32
|
}
|
|
42
33
|
}, /*#__PURE__*/_react.default.createElement(_text.default, {
|
|
43
34
|
variant: "h4"
|
|
44
|
-
},
|
|
35
|
+
}, `WorkFlow- ${name}`));
|
|
45
36
|
};
|
|
46
|
-
var _default = WorkFlow;
|
|
47
|
-
exports.default = _default;
|
|
37
|
+
var _default = exports.default = WorkFlow;
|
|
@@ -7,46 +7,37 @@ exports.default = void 0;
|
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _reactflow = require("reactflow");
|
|
9
9
|
var _d3Hierarchy = require("d3-hierarchy");
|
|
10
|
-
function
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
14
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
15
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
16
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
17
|
-
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
18
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
19
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
20
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
21
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
22
|
-
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
23
|
-
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
10
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
11
|
+
// import ReactFlow, { addEdge, removeElements } from 'react-flow-renderer';
|
|
12
|
+
|
|
24
13
|
// Custom node styles
|
|
25
|
-
|
|
14
|
+
const customNodeStyles = {
|
|
26
15
|
border: '1px solid #ddd',
|
|
27
16
|
padding: '10px',
|
|
28
17
|
borderRadius: '5px'
|
|
29
18
|
};
|
|
30
19
|
|
|
31
20
|
// Custom node types
|
|
32
|
-
|
|
21
|
+
const customNodeTypes = [{
|
|
33
22
|
default: {
|
|
34
23
|
style: customNodeStyles
|
|
35
24
|
},
|
|
36
25
|
start: {
|
|
37
|
-
style:
|
|
26
|
+
style: {
|
|
27
|
+
...customNodeStyles,
|
|
38
28
|
background: '#6c9'
|
|
39
|
-
}
|
|
29
|
+
}
|
|
40
30
|
},
|
|
41
31
|
end: {
|
|
42
|
-
style:
|
|
32
|
+
style: {
|
|
33
|
+
...customNodeStyles,
|
|
43
34
|
background: '#c69'
|
|
44
|
-
}
|
|
35
|
+
}
|
|
45
36
|
}
|
|
46
37
|
}];
|
|
47
38
|
|
|
48
39
|
// Custom edge types
|
|
49
|
-
|
|
40
|
+
const customEdgeTypes = {
|
|
50
41
|
default: {
|
|
51
42
|
stroke: '#ddd'
|
|
52
43
|
},
|
|
@@ -56,7 +47,7 @@ var customEdgeTypes = {
|
|
|
56
47
|
};
|
|
57
48
|
|
|
58
49
|
// Sample data for the workflow
|
|
59
|
-
|
|
50
|
+
const data = [{
|
|
60
51
|
name: 'Workflow',
|
|
61
52
|
children: [{
|
|
62
53
|
name: 'Start',
|
|
@@ -78,39 +69,25 @@ var data = [{
|
|
|
78
69
|
}];
|
|
79
70
|
|
|
80
71
|
// Generate the hierarchy data
|
|
81
|
-
|
|
72
|
+
const hierarchyData = (0, _d3Hierarchy.hierarchy)(data);
|
|
82
73
|
function WorkFlowBuilder() {
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
return console.log('Elements removal started');
|
|
101
|
-
};
|
|
102
|
-
var onElementsRemoveEnd = function onElementsRemoveEnd(removedElements) {
|
|
103
|
-
return setElements(function (els) {
|
|
104
|
-
return (0, _reactflow.removeElements)(removedElements, els);
|
|
105
|
-
});
|
|
106
|
-
};
|
|
107
|
-
var onConnect = function onConnect(params) {
|
|
108
|
-
return setElements(function (els) {
|
|
109
|
-
return (0, _reactflow.addEdge)(_objectSpread(_objectSpread({}, params), {}, {
|
|
110
|
-
type: 'default'
|
|
111
|
-
}), els);
|
|
112
|
-
});
|
|
113
|
-
};
|
|
74
|
+
const [elements, setElements] = (0, _react.useState)(hierarchyData.descendants().map(d => ({
|
|
75
|
+
id: d.data.name,
|
|
76
|
+
type: d.data.type || 'default',
|
|
77
|
+
data: {
|
|
78
|
+
label: d.data.name
|
|
79
|
+
},
|
|
80
|
+
position: {
|
|
81
|
+
x: d.depth * 200,
|
|
82
|
+
y: d.index * 100
|
|
83
|
+
}
|
|
84
|
+
})));
|
|
85
|
+
const onElementsRemoveStart = () => console.log('Elements removal started');
|
|
86
|
+
const onElementsRemoveEnd = removedElements => setElements(els => (0, _reactflow.removeElements)(removedElements, els));
|
|
87
|
+
const onConnect = params => setElements(els => (0, _reactflow.addEdge)({
|
|
88
|
+
...params,
|
|
89
|
+
type: 'default'
|
|
90
|
+
}, els));
|
|
114
91
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
115
92
|
style: {
|
|
116
93
|
height: '800px'
|
|
@@ -126,5 +103,4 @@ function WorkFlowBuilder() {
|
|
|
126
103
|
attributionPosition: "bottom-left"
|
|
127
104
|
}));
|
|
128
105
|
}
|
|
129
|
-
var _default = WorkFlowBuilder;
|
|
130
|
-
exports.default = _default;
|
|
106
|
+
var _default = exports.default = WorkFlowBuilder;
|