tenjin-ui-kit 0.2.73 → 0.2.75
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/components/layout/index.js +4 -1
- package/components/layout/sidebar/ProjectMenu.js +148 -20
- package/components/layout/sidebar/index.js +3 -3
- package/components/layout/sidebar/style.js +41 -2
- package/components/layout/topBar/ProjectTopbar.js +228 -0
- package/components/layout/topBar/index.js +9 -9
- package/package.json +5 -2
|
@@ -12,6 +12,7 @@ var _topBar = _interopRequireDefault(require("./topBar"));
|
|
|
12
12
|
var _main = _interopRequireDefault(require("./main"));
|
|
13
13
|
var _sidebar = _interopRequireDefault(require("./sidebar"));
|
|
14
14
|
var _pageContent = _interopRequireDefault(require("./pageContent"));
|
|
15
|
+
var _ProjectTopbar = _interopRequireDefault(require("./topBar/ProjectTopbar"));
|
|
15
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
16
17
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
17
18
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -30,12 +31,13 @@ var LayoutContext = /*#__PURE__*/(0, _react.createContext)();
|
|
|
30
31
|
exports.LayoutContext = LayoutContext;
|
|
31
32
|
var Layout = function Layout(_ref) {
|
|
32
33
|
var id = _ref.id,
|
|
34
|
+
defaultExpand = _ref.defaultExpand,
|
|
33
35
|
children = _ref.children;
|
|
34
36
|
var _useState = (0, _react.useState)({
|
|
35
37
|
windowTitle: "Tenjin Enterprise",
|
|
36
38
|
breadcrumbs: [],
|
|
37
39
|
sidebarPresent: true,
|
|
38
|
-
sidebarCollapsed: true,
|
|
40
|
+
sidebarCollapsed: defaultExpand ? false : true,
|
|
39
41
|
selectedSidebarKey: null
|
|
40
42
|
}),
|
|
41
43
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -87,5 +89,6 @@ Layout.TopBar = _topBar.default;
|
|
|
87
89
|
Layout.Main = _main.default;
|
|
88
90
|
Layout.Sidebar = _sidebar.default;
|
|
89
91
|
Layout.PageContent = _pageContent.default;
|
|
92
|
+
Layout.ProjectTopbar = _ProjectTopbar.default;
|
|
90
93
|
var _default = Layout;
|
|
91
94
|
exports.default = _default;
|
|
@@ -1,5 +1,6 @@
|
|
|
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); }
|
|
3
4
|
Object.defineProperty(exports, "__esModule", {
|
|
4
5
|
value: true
|
|
5
6
|
});
|
|
@@ -10,51 +11,143 @@ var _material = require("@mui/material");
|
|
|
10
11
|
var _reactRouterDom = require("react-router-dom");
|
|
11
12
|
var _style = _interopRequireDefault(require("./style"));
|
|
12
13
|
var _ = require("..");
|
|
13
|
-
var
|
|
14
|
+
var _clsx3 = _interopRequireDefault(require("clsx"));
|
|
15
|
+
var _styles = require("@mui/styles");
|
|
14
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
17
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
16
18
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
17
|
-
function
|
|
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; }
|
|
18
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; }
|
|
19
22
|
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
20
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); }
|
|
24
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
25
|
+
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."); }
|
|
26
|
+
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); }
|
|
27
|
+
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; }
|
|
28
|
+
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; } }
|
|
29
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
21
30
|
var ProjectMenu = function ProjectMenu(_ref) {
|
|
22
31
|
var groups = _ref.groups;
|
|
23
32
|
var classes = (0, _style.default)();
|
|
33
|
+
var popupRef = (0, _react.useRef)(null);
|
|
34
|
+
var navigate = (0, _reactRouterDom.useNavigate)();
|
|
24
35
|
var _useContext = (0, _react.useContext)(_.LayoutContext),
|
|
25
|
-
|
|
36
|
+
_useContext$layoutSta = _useContext.layoutState,
|
|
37
|
+
collapsed = _useContext$layoutSta.sidebarCollapsed,
|
|
38
|
+
selectedSidebarKey = _useContext$layoutSta.selectedSidebarKey,
|
|
26
39
|
setSelectedSidebarKey = _useContext.setSelectedSidebarKey;
|
|
40
|
+
var _useState = (0, _react.useState)({}),
|
|
41
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
42
|
+
selectedCollapsedSidebar = _useState2[0],
|
|
43
|
+
setselectedCollapsedSidebar = _useState2[1];
|
|
44
|
+
var _useState3 = (0, _react.useState)({
|
|
45
|
+
index: null,
|
|
46
|
+
open: false
|
|
47
|
+
}),
|
|
48
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
49
|
+
selectedItem = _useState4[0],
|
|
50
|
+
setselectedItem = _useState4[1];
|
|
51
|
+
console.log(selectedItem, "selectedItemIndex");
|
|
52
|
+
var handleClick = function handleClick(event, index, selected) {
|
|
53
|
+
setselectedItem(function (prev) {
|
|
54
|
+
return _objectSpread(_objectSpread({}, prev), {}, {
|
|
55
|
+
index: index,
|
|
56
|
+
open: true,
|
|
57
|
+
anchorE1: event.currentTarget,
|
|
58
|
+
selected: selected
|
|
59
|
+
});
|
|
60
|
+
});
|
|
61
|
+
};
|
|
62
|
+
var handleClose = function handleClose() {
|
|
63
|
+
setselectedItem(function (prev) {
|
|
64
|
+
return _objectSpread(_objectSpread({}, prev), {}, {
|
|
65
|
+
index: null,
|
|
66
|
+
open: false,
|
|
67
|
+
anchorE1: null
|
|
68
|
+
});
|
|
69
|
+
});
|
|
70
|
+
};
|
|
71
|
+
var leaveMenu = function leaveMenu() {
|
|
72
|
+
console.log("onclose");
|
|
73
|
+
setTimeout(function () {
|
|
74
|
+
setselectedItem(function (prev) {
|
|
75
|
+
return _objectSpread(_objectSpread({}, prev), {}, {
|
|
76
|
+
open: false
|
|
77
|
+
});
|
|
78
|
+
});
|
|
79
|
+
}, 100);
|
|
80
|
+
};
|
|
81
|
+
(0, _react.useEffect)(function () {
|
|
82
|
+
function handleClickOutside(event) {
|
|
83
|
+
if (popupRef.current && !popupRef.current.contains(event.target)) {
|
|
84
|
+
handleClose();
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
88
|
+
return function () {
|
|
89
|
+
document.removeEventListener("mousedown", handleClickOutside);
|
|
90
|
+
};
|
|
91
|
+
}, [popupRef]);
|
|
27
92
|
return groups ? /*#__PURE__*/_react.default.createElement("div", {
|
|
28
93
|
className: classes.projectMenuMainWrapper
|
|
29
|
-
}, /*#__PURE__*/_react.default.createElement(_material.Typography, {
|
|
94
|
+
}, /*#__PURE__*/_react.default.createElement("div", null, !collapsed && /*#__PURE__*/_react.default.createElement(_material.Typography, {
|
|
30
95
|
className: classes.projectMenuHeader,
|
|
31
96
|
fontWeight: 600,
|
|
32
|
-
marginBottom: "
|
|
33
|
-
marginTop: "
|
|
34
|
-
}, "TENJIN 4.0 Release"), /*#__PURE__*/_react.default.createElement(
|
|
35
|
-
var _group$groupName;
|
|
97
|
+
marginBottom: "0.5remrem",
|
|
98
|
+
marginTop: "1rem"
|
|
99
|
+
}, "TENJIN 4.0 Release")), /*#__PURE__*/_react.default.createElement("div", null, groups.map(function (group, index) {
|
|
100
|
+
var _ref2, _group$items$filter$, _group$items$filter$2, _clsx, _group$groupName, _group$groupName2;
|
|
36
101
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
|
|
37
102
|
key: group.groupName
|
|
38
103
|
}, /*#__PURE__*/_react.default.createElement(_material.List, {
|
|
104
|
+
sx: {
|
|
105
|
+
display: "inline-block",
|
|
106
|
+
position: "relative",
|
|
107
|
+
width: "100%",
|
|
108
|
+
height: "100%"
|
|
109
|
+
},
|
|
39
110
|
subheader: /*#__PURE__*/_react.default.createElement(_material.ListSubheader, {
|
|
40
|
-
|
|
111
|
+
className: "sidebar",
|
|
112
|
+
sx: (_ref2 = {
|
|
41
113
|
padding: 0,
|
|
42
114
|
display: "flex",
|
|
43
115
|
fontWeight: 600,
|
|
44
|
-
|
|
116
|
+
lineHeight: collapsed && 0,
|
|
117
|
+
marginTop: !collapsed && "1rem"
|
|
118
|
+
}, _defineProperty(_ref2, "padding", !collapsed && "0.8rem 0rem"), _defineProperty(_ref2, "justifyContent", collapsed && "center"), _ref2)
|
|
119
|
+
}, collapsed ? /*#__PURE__*/_react.default.createElement("div", {
|
|
120
|
+
className: "buttonIcon"
|
|
121
|
+
}, /*#__PURE__*/_react.default.createElement(_material.ListItemButton, {
|
|
122
|
+
id: "account-button",
|
|
123
|
+
selected: (group === null || group === void 0 ? void 0 : (_group$items$filter$ = group.items.filter(function (item) {
|
|
124
|
+
return item.key === selectedSidebarKey;
|
|
125
|
+
})[0]) === null || _group$items$filter$ === void 0 ? void 0 : _group$items$filter$.key) === selectedSidebarKey,
|
|
126
|
+
classes: {
|
|
127
|
+
selected: classes.selectedProjectMenuItem
|
|
128
|
+
},
|
|
129
|
+
key: selectedCollapsedSidebar === null || selectedCollapsedSidebar === void 0 ? void 0 : selectedCollapsedSidebar.key,
|
|
130
|
+
onClick: function onClick(e) {
|
|
131
|
+
handleClick(e, index, group);
|
|
45
132
|
}
|
|
46
|
-
}, /*#__PURE__*/_react.default.createElement(
|
|
133
|
+
}, /*#__PURE__*/_react.default.createElement(_material.ListItemText, {
|
|
134
|
+
disableTypography: true,
|
|
135
|
+
className: (0, _clsx3.default)((_clsx = {}, _defineProperty(_clsx, classes.projectListIcon, true), _defineProperty(_clsx, classes.selectedProjectMenuItemIcon, (group === null || group === void 0 ? void 0 : (_group$items$filter$2 = group.items.filter(function (item) {
|
|
136
|
+
return item.key === selectedCollapsedSidebar.key;
|
|
137
|
+
})[0]) === null || _group$items$filter$2 === void 0 ? void 0 : _group$items$filter$2.key) === selectedSidebarKey), _clsx))
|
|
138
|
+
}, group.icon))) : /*#__PURE__*/_react.default.createElement("span", {
|
|
47
139
|
className: classes.subHeaderIcon
|
|
48
140
|
}, group.icon), /*#__PURE__*/_react.default.createElement(_material.Typography, {
|
|
49
|
-
sx: {
|
|
141
|
+
sx: _defineProperty({
|
|
50
142
|
fontWeight: 600,
|
|
51
143
|
marginLeft: "15px",
|
|
52
144
|
display: "flex",
|
|
53
|
-
alignItems: "center"
|
|
54
|
-
|
|
145
|
+
alignItems: "center",
|
|
146
|
+
height: "100%"
|
|
147
|
+
}, "display", collapsed && "none !important")
|
|
55
148
|
}, (_group$groupName = group.groupName) === null || _group$groupName === void 0 ? void 0 : _group$groupName.toUpperCase()))
|
|
56
|
-
}, group.items.map(function (i) {
|
|
57
|
-
var
|
|
149
|
+
}, !collapsed && group.items.map(function (i) {
|
|
150
|
+
var _clsx2;
|
|
58
151
|
return /*#__PURE__*/_react.default.createElement(_material.ListItemButton, {
|
|
59
152
|
disableRipple: true,
|
|
60
153
|
disableTouchRipple: true,
|
|
@@ -65,20 +158,55 @@ var ProjectMenu = function ProjectMenu(_ref) {
|
|
|
65
158
|
sidebarKey: i.key,
|
|
66
159
|
key: i.key,
|
|
67
160
|
onClick: function onClick() {
|
|
68
|
-
|
|
161
|
+
setSelectedSidebarKey(i.key);
|
|
162
|
+
setselectedCollapsedSidebar(i);
|
|
69
163
|
},
|
|
70
164
|
classes: {
|
|
71
165
|
selected: classes.selectedProjectMenuItem
|
|
72
166
|
}
|
|
73
167
|
}, /*#__PURE__*/_react.default.createElement(_material.ListItemText, {
|
|
74
168
|
disableTypography: true,
|
|
75
|
-
className: (0,
|
|
169
|
+
className: (0, _clsx3.default)((_clsx2 = {}, _defineProperty(_clsx2, classes.projectListText, true), _defineProperty(_clsx2, classes.selectedProjectMenuItemText, selectedSidebarKey === i.key), _clsx2))
|
|
76
170
|
}, i.display));
|
|
77
|
-
})), index < groups.length - 1 && /*#__PURE__*/_react.default.createElement(_material.Divider, {
|
|
171
|
+
})), !collapsed && index < groups.length - 1 && /*#__PURE__*/_react.default.createElement(_material.Divider, {
|
|
78
172
|
sx: {
|
|
79
173
|
height: "initial !important"
|
|
80
174
|
}
|
|
81
|
-
})
|
|
175
|
+
}), selectedItem.index === index && /*#__PURE__*/_react.default.createElement("div", {
|
|
176
|
+
ref: popupRef,
|
|
177
|
+
className: selectedItem.open ? classes.menuItemOpen : classes.menuItem
|
|
178
|
+
}, /*#__PURE__*/_react.default.createElement(_material.Paper, {
|
|
179
|
+
sx: {
|
|
180
|
+
width: "13rem",
|
|
181
|
+
padding: "0.7rem",
|
|
182
|
+
maxHeight: "14.5rem",
|
|
183
|
+
overFlow: "auto"
|
|
184
|
+
}
|
|
185
|
+
}, /*#__PURE__*/_react.default.createElement(_material.Typography, {
|
|
186
|
+
fontWeight: "600",
|
|
187
|
+
pl: "0.3rem",
|
|
188
|
+
color: "#7D7D7D"
|
|
189
|
+
}, (_group$groupName2 = group.groupName) === null || _group$groupName2 === void 0 ? void 0 : _group$groupName2.toUpperCase()), group.items.map(function (i) {
|
|
190
|
+
return /*#__PURE__*/_react.default.createElement(_material.ListItemText, {
|
|
191
|
+
disableTypography: true,
|
|
192
|
+
sx: {
|
|
193
|
+
color: "#44409A !important",
|
|
194
|
+
fontWeight: 600,
|
|
195
|
+
p: "0.3rem",
|
|
196
|
+
cursor: "pointer",
|
|
197
|
+
backgroundColor: i.key === selectedSidebarKey ? "#f5f6f7" : "none",
|
|
198
|
+
"&:hover": {
|
|
199
|
+
backgroundColor: "#f5f6f7"
|
|
200
|
+
}
|
|
201
|
+
},
|
|
202
|
+
onClick: function onClick() {
|
|
203
|
+
setSelectedSidebarKey(i.key);
|
|
204
|
+
setselectedCollapsedSidebar(i);
|
|
205
|
+
handleClose();
|
|
206
|
+
navigate(i.href);
|
|
207
|
+
}
|
|
208
|
+
}, i.display);
|
|
209
|
+
}))));
|
|
82
210
|
}))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
|
|
83
211
|
};
|
|
84
212
|
ProjectMenu.propTypes = {
|
|
@@ -39,11 +39,11 @@ var Sidebar = function Sidebar(_ref) {
|
|
|
39
39
|
fullHeight: true
|
|
40
40
|
}, /*#__PURE__*/_react.default.createElement(_material.Box, {
|
|
41
41
|
sx: {
|
|
42
|
-
padding: theme.spacing(1),
|
|
42
|
+
padding: theme.spacing(0, 1, 1, 1),
|
|
43
43
|
maxHeight: allowCollapse ? "calc(100% - 48px)" : "100%",
|
|
44
44
|
height: allowCollapse ? "calc(100% - 48px)" : "100%",
|
|
45
|
-
overflowY: "auto"
|
|
46
|
-
|
|
45
|
+
overflowY: "auto",
|
|
46
|
+
overflowX: "hidden"
|
|
47
47
|
}
|
|
48
48
|
}, children), allowCollapse && /*#__PURE__*/_react.default.createElement(_material.Box, {
|
|
49
49
|
display: "flex",
|
|
@@ -61,8 +61,10 @@ var _default = (0, _styles.makeStyles)(function (theme) {
|
|
|
61
61
|
color: "#fff !important"
|
|
62
62
|
},
|
|
63
63
|
projectMenuMainWrapper: {
|
|
64
|
-
|
|
65
|
-
padding: "7px"
|
|
64
|
+
paddingTop: "0.5rem",
|
|
65
|
+
// padding: "7px",
|
|
66
|
+
display: "inline-block",
|
|
67
|
+
width: "100%"
|
|
66
68
|
},
|
|
67
69
|
projectMenuHeader: {
|
|
68
70
|
color: "#44409A",
|
|
@@ -86,16 +88,53 @@ var _default = (0, _styles.makeStyles)(function (theme) {
|
|
|
86
88
|
fontSize: "16px !important",
|
|
87
89
|
fontWeight: 600
|
|
88
90
|
},
|
|
91
|
+
projectListIcon: {
|
|
92
|
+
color: "".concat(theme.palette.primary.main, " !important")
|
|
93
|
+
},
|
|
89
94
|
selectedProjectMenuItemText: {
|
|
90
95
|
color: "#fff !important"
|
|
91
96
|
// fontSize: "16px !important",
|
|
92
97
|
// fontWeight: 600,
|
|
93
98
|
},
|
|
94
99
|
|
|
100
|
+
selectedProjectMenuItemIcon: {
|
|
101
|
+
color: "#fff !important"
|
|
102
|
+
},
|
|
95
103
|
subHeaderIcon: {
|
|
96
104
|
color: "#44409A",
|
|
97
105
|
display: "flex",
|
|
98
106
|
alignItems: "center"
|
|
107
|
+
},
|
|
108
|
+
sidebar: {
|
|
109
|
+
display: "inline-block",
|
|
110
|
+
position: "relative"
|
|
111
|
+
},
|
|
112
|
+
buttonIcon: {
|
|
113
|
+
position: "relative",
|
|
114
|
+
padding: "16px",
|
|
115
|
+
fontSize: "16px"
|
|
116
|
+
},
|
|
117
|
+
menuItem: {
|
|
118
|
+
zIndex: 1300,
|
|
119
|
+
display: "none",
|
|
120
|
+
position: "absolute",
|
|
121
|
+
backgroundColor: "#f1f1f1",
|
|
122
|
+
minWidth: "160px",
|
|
123
|
+
boxShadow: "0px 8px 16px 0px rgba(0,0,0,0.2)",
|
|
124
|
+
left: "10%",
|
|
125
|
+
top: "auto"
|
|
126
|
+
},
|
|
127
|
+
menuItemOpen: {
|
|
128
|
+
zIndex: 1300,
|
|
129
|
+
display: "block",
|
|
130
|
+
position: "absolute",
|
|
131
|
+
backgroundColor: "#f1f1f1",
|
|
132
|
+
minWidth: "160px",
|
|
133
|
+
boxShadow: "0px 8px 16px 0px rgba(0,0,0,0.2)",
|
|
134
|
+
left: "92px",
|
|
135
|
+
top: "auto",
|
|
136
|
+
bottom: "auto",
|
|
137
|
+
marginTop: "-3.5rem"
|
|
99
138
|
}
|
|
100
139
|
};
|
|
101
140
|
});
|
|
@@ -0,0 +1,228 @@
|
|
|
1
|
+
"use strict";
|
|
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
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = void 0;
|
|
8
|
+
var _material = require("@mui/material");
|
|
9
|
+
var _system = require("@mui/system");
|
|
10
|
+
var _UserAvatar = _interopRequireDefault(require("./UserAvatar"));
|
|
11
|
+
var _button = _interopRequireDefault(require("../../button"));
|
|
12
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
13
|
+
var _reactFeather = require("react-feather");
|
|
14
|
+
var _reactRouter = require("react-router");
|
|
15
|
+
var _modal = _interopRequireDefault(require("../../modal"));
|
|
16
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
17
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
18
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
20
|
+
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."); }
|
|
21
|
+
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); }
|
|
22
|
+
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; }
|
|
23
|
+
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; } }
|
|
24
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
25
|
+
var ProjectTopbar = function ProjectTopbar(_ref) {
|
|
26
|
+
var loggedInUser = _ref.loggedInUser,
|
|
27
|
+
actions = _ref.actions,
|
|
28
|
+
onLogout = _ref.onLogout;
|
|
29
|
+
var theme = (0, _system.useTheme)();
|
|
30
|
+
var _useState = (0, _react.useState)(null),
|
|
31
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
32
|
+
anchorEl = _useState2[0],
|
|
33
|
+
setAnchorEl = _useState2[1];
|
|
34
|
+
var _useState3 = (0, _react.useState)(null),
|
|
35
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
36
|
+
openMenuIndex = _useState4[0],
|
|
37
|
+
setOpenMenuIndex = _useState4[1];
|
|
38
|
+
var navigate = (0, _reactRouter.useNavigate)();
|
|
39
|
+
var handleMenuOpen = function handleMenuOpen(event, index) {
|
|
40
|
+
setAnchorEl(event.currentTarget);
|
|
41
|
+
setOpenMenuIndex(index);
|
|
42
|
+
};
|
|
43
|
+
var handleMenuClose = function handleMenuClose() {
|
|
44
|
+
setAnchorEl(null);
|
|
45
|
+
setOpenMenuIndex(null);
|
|
46
|
+
};
|
|
47
|
+
var handleItemClick = function handleItemClick(item) {
|
|
48
|
+
navigate(item.href);
|
|
49
|
+
console.log(item);
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
// Logout related code starts
|
|
53
|
+
var _useState5 = (0, _react.useState)(false),
|
|
54
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
55
|
+
open = _useState6[0],
|
|
56
|
+
setOpen = _useState6[1];
|
|
57
|
+
var handleOpen = function handleOpen() {
|
|
58
|
+
return setOpen(true);
|
|
59
|
+
};
|
|
60
|
+
var handleClose = function handleClose() {
|
|
61
|
+
return setOpen(false);
|
|
62
|
+
};
|
|
63
|
+
var logout = function logout() {
|
|
64
|
+
onLogout();
|
|
65
|
+
setOpen(false);
|
|
66
|
+
};
|
|
67
|
+
// Logout related code ends
|
|
68
|
+
|
|
69
|
+
return /*#__PURE__*/_react.default.createElement(_material.Paper, null, /*#__PURE__*/_react.default.createElement(_material.AppBar, {
|
|
70
|
+
position: "static",
|
|
71
|
+
sx: {
|
|
72
|
+
boxShadow: "0px 3px 10px rgba(102, 124, 188, 0.25) !important",
|
|
73
|
+
background: "#FFFFFF",
|
|
74
|
+
height: "56px !important",
|
|
75
|
+
justifyContent: "center"
|
|
76
|
+
}
|
|
77
|
+
}, /*#__PURE__*/_react.default.createElement(_material.Toolbar, null, /*#__PURE__*/_react.default.createElement(_system.Box, {
|
|
78
|
+
sx: {
|
|
79
|
+
display: "flex",
|
|
80
|
+
justifyContent: "space-between",
|
|
81
|
+
width: "100%",
|
|
82
|
+
alignItems: "center"
|
|
83
|
+
}
|
|
84
|
+
}, /*#__PURE__*/_react.default.createElement(_system.Box, {
|
|
85
|
+
className: "Left",
|
|
86
|
+
sx: {
|
|
87
|
+
justifySelf: "left"
|
|
88
|
+
}
|
|
89
|
+
}, /*#__PURE__*/_react.default.createElement(_material.Typography, {
|
|
90
|
+
component: "a",
|
|
91
|
+
href: "/",
|
|
92
|
+
sx: {
|
|
93
|
+
mr: 2,
|
|
94
|
+
textDecoration: "none",
|
|
95
|
+
fontSize: "1rem",
|
|
96
|
+
fontWeight: "600"
|
|
97
|
+
}
|
|
98
|
+
}, "TENJIN ENTERPRISE")), /*#__PURE__*/_react.default.createElement(_system.Box, {
|
|
99
|
+
className: "Center",
|
|
100
|
+
sx: {
|
|
101
|
+
marginRight: "auto",
|
|
102
|
+
color: "black"
|
|
103
|
+
}
|
|
104
|
+
}, actions && /*#__PURE__*/_react.default.createElement(_system.Box, null, /*#__PURE__*/_react.default.createElement(_material.Stack, {
|
|
105
|
+
direction: "row",
|
|
106
|
+
spacing: 1
|
|
107
|
+
}, actions.map(function (action, index) {
|
|
108
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
109
|
+
key: action.title
|
|
110
|
+
}, /*#__PURE__*/_react.default.createElement(_button.default, {
|
|
111
|
+
variant: "text",
|
|
112
|
+
startIcon: action.icon,
|
|
113
|
+
endIcon: action.dropdown ? /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, {
|
|
114
|
+
size: "0.9rem"
|
|
115
|
+
}) : null,
|
|
116
|
+
onClick: function onClick(event) {
|
|
117
|
+
return action.dropdown ? handleMenuOpen(event, index) : handleItemClick(action);
|
|
118
|
+
}
|
|
119
|
+
}, /*#__PURE__*/_react.default.createElement(_material.Typography, {
|
|
120
|
+
style: {
|
|
121
|
+
fontWeight: "600"
|
|
122
|
+
}
|
|
123
|
+
}, action.title)), action.dropdown && /*#__PURE__*/_react.default.createElement(_material.Menu, {
|
|
124
|
+
anchorEl: anchorEl,
|
|
125
|
+
open: openMenuIndex === index,
|
|
126
|
+
onClose: function onClose() {
|
|
127
|
+
setOpenMenuIndex(null);
|
|
128
|
+
handleMenuClose();
|
|
129
|
+
}
|
|
130
|
+
}, action.dropdown.map(function (item, index) {
|
|
131
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
132
|
+
key: item.title,
|
|
133
|
+
onClick: function onClick() {
|
|
134
|
+
if (item.clickable) {
|
|
135
|
+
handleItemClick(item);
|
|
136
|
+
}
|
|
137
|
+
handleMenuClose();
|
|
138
|
+
},
|
|
139
|
+
style: {
|
|
140
|
+
margin: "10px",
|
|
141
|
+
paddingRight: "10px",
|
|
142
|
+
cursor: item.clickable ? "pointer" : "default",
|
|
143
|
+
backgroundColor: item.heading ? "transparent" : "transparent"
|
|
144
|
+
}
|
|
145
|
+
}, item.heading ? /*#__PURE__*/_react.default.createElement(_material.Typography, {
|
|
146
|
+
variant: "subtitle1",
|
|
147
|
+
style: {
|
|
148
|
+
fontWeight: 600
|
|
149
|
+
}
|
|
150
|
+
}, item.title) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
151
|
+
style: {
|
|
152
|
+
display: "flex",
|
|
153
|
+
flexDirection: "column"
|
|
154
|
+
}
|
|
155
|
+
}, /*#__PURE__*/_react.default.createElement(_material.Typography, {
|
|
156
|
+
style: {
|
|
157
|
+
fontWeight: item.clickable || item.heading ? 600 : 400
|
|
158
|
+
}
|
|
159
|
+
}, item.title), item.subtitle && /*#__PURE__*/_react.default.createElement(_material.Typography, {
|
|
160
|
+
variant: "body2",
|
|
161
|
+
color: "#ACACAC",
|
|
162
|
+
sx: {
|
|
163
|
+
marginLeft: "5px"
|
|
164
|
+
}
|
|
165
|
+
}, item.subtitle)), item.divider && index !== action.dropdown.length - 1 && /*#__PURE__*/_react.default.createElement(_material.Divider, null)), item.divider && index === action.dropdown.length - 1 && /*#__PURE__*/_react.default.createElement(_material.Divider, null));
|
|
166
|
+
})));
|
|
167
|
+
})))), /*#__PURE__*/_react.default.createElement(_system.Box, {
|
|
168
|
+
className: "Right",
|
|
169
|
+
sx: {
|
|
170
|
+
justifySelf: "right",
|
|
171
|
+
color: "black"
|
|
172
|
+
},
|
|
173
|
+
display: "flex",
|
|
174
|
+
alignItems: "right"
|
|
175
|
+
}, /*#__PURE__*/_react.default.createElement(_button.default, {
|
|
176
|
+
variant: "text",
|
|
177
|
+
startIcon: /*#__PURE__*/_react.default.createElement(_reactFeather.Settings, {
|
|
178
|
+
size: "1rem"
|
|
179
|
+
}),
|
|
180
|
+
onClick: function onClick() {
|
|
181
|
+
return handleItemClick({
|
|
182
|
+
title: "Administration",
|
|
183
|
+
href: "/administration"
|
|
184
|
+
});
|
|
185
|
+
}
|
|
186
|
+
}, /*#__PURE__*/_react.default.createElement(_material.Typography, {
|
|
187
|
+
style: {
|
|
188
|
+
fontSize: "1rem",
|
|
189
|
+
fontWeight: "600"
|
|
190
|
+
}
|
|
191
|
+
}, "Administration")), /*#__PURE__*/_react.default.createElement(_system.Box, {
|
|
192
|
+
sx: {
|
|
193
|
+
marginLeft: theme.spacing(1)
|
|
194
|
+
}
|
|
195
|
+
}, /*#__PURE__*/_react.default.createElement(_UserAvatar.default, {
|
|
196
|
+
loggedInUser: loggedInUser,
|
|
197
|
+
onLogout: handleOpen
|
|
198
|
+
})))))), /*#__PURE__*/_react.default.createElement(_modal.default, {
|
|
199
|
+
title: "Log out",
|
|
200
|
+
open: open,
|
|
201
|
+
handleClose: handleClose,
|
|
202
|
+
onClose: handleClose,
|
|
203
|
+
width: "xl"
|
|
204
|
+
}, /*#__PURE__*/_react.default.createElement(_material.Typography, null, "Are you sure you want to log out?"), /*#__PURE__*/_react.default.createElement(_material.Grid, {
|
|
205
|
+
container: true,
|
|
206
|
+
direction: "row",
|
|
207
|
+
justifyContent: "flex-end",
|
|
208
|
+
alignItems: "flex-end",
|
|
209
|
+
style: {
|
|
210
|
+
padding: "3rem 0rem 0rem 4rem"
|
|
211
|
+
}
|
|
212
|
+
}, /*#__PURE__*/_react.default.createElement(_material.Grid, {
|
|
213
|
+
item: true,
|
|
214
|
+
xs: 6
|
|
215
|
+
}, /*#__PURE__*/_react.default.createElement(_button.default, {
|
|
216
|
+
variant: "outlined",
|
|
217
|
+
onClick: handleClose
|
|
218
|
+
}, "Cancel")), /*#__PURE__*/_react.default.createElement(_material.Grid, {
|
|
219
|
+
item: true,
|
|
220
|
+
xs: 6
|
|
221
|
+
}, /*#__PURE__*/_react.default.createElement(_button.default, {
|
|
222
|
+
color: "error",
|
|
223
|
+
onClick: logout
|
|
224
|
+
}, "Log out")))));
|
|
225
|
+
};
|
|
226
|
+
ProjectTopbar.propTypes = {};
|
|
227
|
+
var _default = ProjectTopbar;
|
|
228
|
+
exports.default = _default;
|
|
@@ -49,12 +49,12 @@ var TopBar = function TopBar(_ref) {
|
|
|
49
49
|
}, /*#__PURE__*/_react.default.createElement(_material.AppBar, {
|
|
50
50
|
position: "static",
|
|
51
51
|
sx: {
|
|
52
|
-
boxShadow:
|
|
53
|
-
backgroundColor:
|
|
54
|
-
margin:
|
|
55
|
-
padding:
|
|
56
|
-
height:
|
|
57
|
-
borderBottom:
|
|
52
|
+
boxShadow: "-1px 1px 7px 0px rgba(0, 0, 0, 0.2) !important",
|
|
53
|
+
backgroundColor: "#fff",
|
|
54
|
+
margin: "0rem !important",
|
|
55
|
+
padding: " 0rem !important",
|
|
56
|
+
height: "48px !important",
|
|
57
|
+
borderBottom: "1px solid #D6D9E0"
|
|
58
58
|
}
|
|
59
59
|
}, /*#__PURE__*/_react.default.createElement(_material.Toolbar, {
|
|
60
60
|
variant: "dense"
|
|
@@ -64,11 +64,11 @@ var TopBar = function TopBar(_ref) {
|
|
|
64
64
|
href: "/",
|
|
65
65
|
sx: {
|
|
66
66
|
mr: 2,
|
|
67
|
-
textDecoration:
|
|
67
|
+
textDecoration: "none"
|
|
68
68
|
}
|
|
69
69
|
}, "Tenjin Enterprise"), /*#__PURE__*/_react.default.createElement(_material.Divider, {
|
|
70
70
|
sx: {
|
|
71
|
-
height:
|
|
71
|
+
height: "100% !important"
|
|
72
72
|
},
|
|
73
73
|
orientation: "vertical",
|
|
74
74
|
flexItem: true
|
|
@@ -109,7 +109,7 @@ var TopBar = function TopBar(_ref) {
|
|
|
109
109
|
justifyContent: "flex-end",
|
|
110
110
|
alignItems: "flex-end",
|
|
111
111
|
style: {
|
|
112
|
-
padding:
|
|
112
|
+
padding: "3rem 0rem 0rem 4rem"
|
|
113
113
|
}
|
|
114
114
|
}, /*#__PURE__*/_react.default.createElement(_material.Grid, {
|
|
115
115
|
item: true,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "tenjin-ui-kit",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.75",
|
|
4
4
|
"repository": {
|
|
5
5
|
"url": "https://gitlab.com/yethi/react/tenjin-ui-kit.git"
|
|
6
6
|
},
|
|
@@ -18,12 +18,14 @@
|
|
|
18
18
|
"aria-hidden": "^1.2.2",
|
|
19
19
|
"axios": "^0.26.0",
|
|
20
20
|
"clsx": "^1.2.1",
|
|
21
|
+
"feather-icons": "^4.29.0",
|
|
21
22
|
"d3-hierarchy": "^3.1.2",
|
|
22
23
|
"final-form": "^4.20.9",
|
|
24
|
+
"material-ui-popup-state": "^5.0.8",
|
|
23
25
|
"moment": "^2.29.4",
|
|
24
|
-
"react-feather": "^2.0.10",
|
|
25
26
|
"react-dnd": "^16.0.1",
|
|
26
27
|
"react-dnd-html5-backend": "^16.0.1",
|
|
28
|
+
"react-feather": "^2.0.10",
|
|
27
29
|
"react-final-form": "^6.5.9",
|
|
28
30
|
"react-flow-renderer": "^10.3.17",
|
|
29
31
|
"react-icons": "^4.7.1",
|
|
@@ -31,6 +33,7 @@
|
|
|
31
33
|
"react-scripts": "5.0.1",
|
|
32
34
|
"reactflow": "^11.6.1",
|
|
33
35
|
"storybook-react-context": "^0.6.0",
|
|
36
|
+
"styled-components": "^5.3.9",
|
|
34
37
|
"web-vitals": "^2.1.4"
|
|
35
38
|
},
|
|
36
39
|
"scripts": {
|