namirasoft-site-react 1.4.150 → 1.4.151
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/dist/App.js +17 -1
- package/dist/App.js.map +1 -1
- package/dist/components/NSBarAction.js +7 -10
- package/dist/components/NSBarAction.js.map +1 -1
- package/dist/components/NSBarAction.module.css +28 -43
- package/dist/components/NSLayout.js +1 -1
- package/dist/components/NSLayout.js.map +1 -1
- package/package.json +1 -1
- package/src/App.tsx +19 -0
- package/src/components/NSBarAction.module.css +28 -43
- package/src/components/NSBarAction.tsx +38 -58
- package/src/components/NSLayout.tsx +1 -1
package/dist/App.js
CHANGED
|
@@ -16,7 +16,23 @@ export function App() {
|
|
|
16
16
|
isVisible: () => true,
|
|
17
17
|
title: { title: "Verify", description: "Please login to your profile" },
|
|
18
18
|
}
|
|
19
|
-
],
|
|
19
|
+
], title: { title: "Namirasoft Account", description: "Amir Abolhasani" }, action: {
|
|
20
|
+
title: "asdasdasd",
|
|
21
|
+
menus: {
|
|
22
|
+
"t": [{
|
|
23
|
+
isActive: () => false,
|
|
24
|
+
handler: () => { },
|
|
25
|
+
id: "1",
|
|
26
|
+
menu_item: "Click"
|
|
27
|
+
}],
|
|
28
|
+
"x": [{
|
|
29
|
+
isActive: () => false,
|
|
30
|
+
handler: () => { },
|
|
31
|
+
id: "1",
|
|
32
|
+
menu_item: "Click"
|
|
33
|
+
}]
|
|
34
|
+
}
|
|
35
|
+
}, children: _jsx(NSSection, { children: _jsxs(NSPanel, { children: [_jsx(NSBoxCombo, { getOptions: () => {
|
|
20
36
|
return [{ title: "Amir", value: "1" }, { title: "Ilia", value: "2" }];
|
|
21
37
|
}, multiple: false, required: true, title: 's' }), _jsx(NSBoxDate, { title: 'Date', required: true }), _jsxs(NSRow, { children: [_jsx(NSBoxDate, { title: 'Date', required: true }), _jsx(NSBoxDate, { title: 'Date', required: true })] }), _jsx(NSBoxDate, { title: 'Date', required: true }), _jsx(NSBoxDate, { title: 'Date', required: true }), _jsx(NSRow, { children: _jsx(NSBoxFile, { title: 'Date', required: true, style: { width: "100%" } }) }), _jsxs(NSRow, { children: [_jsx(NSBoxDate, { title: 'Date', required: true }), _jsx(NSBoxDate, { title: 'Date', required: true }), _jsx(NSBoxDate, { title: 'Date', required: true }), _jsx(NSBoxDate, { title: 'Date', required: true })] })] }) }) }) }));
|
|
22
38
|
}
|
package/dist/App.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW,CAAC;AACnB,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,GAAG,MAAM,QAAQ,CAAC;AACzF,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,MAAM,UAAU,GAAG;IAElB,OAAO,CACN,4BACC,KAAC,QAAQ,IACR,MAAM,EAAE;gBACP,KAAK,EAAE,EAAE;gBACT,KAAK,EAAE,EAAE;aACT,EACD,UAAU,EAAE,GAAG,EAAE,CAAC,IAAI,EACtB,IAAI,EAAC,kGAAkG,EACvG,aAAa,EAAE,EAAE,EACjB,QAAQ,EAAE,EAAS,EACnB,KAAK,EAAC,EAAE,EACR,UAAU,EAAC,yGAAyG,EACpH,MAAM,EAAE;gBACP;oBACC,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI;oBACrB,KAAK,EAAE,EAAE,KAAK,EAAE,mBAAmB,EAAE,WAAW,EAAE,6HAA6H,EAAE;iBACjL;gBACD;oBACC,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI;oBACrB,KAAK,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,8BAA8B,EAAE;iBACvE;aACD,YAED,KAAC,SAAS,cACT,MAAC,OAAO,eACP,KAAC,UAAU,IACV,UAAU,EAAE,GAAG,EAAE;gCAEhB,OAAO,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC;4BACvE,CAAC,EACD,QAAQ,EAAE,KAAK,EACf,QAAQ,QACR,KAAK,EAAC,GAAG,GACI,EACd,KAAC,SAAS,IACT,KAAK,EAAC,MAAM,EACZ,QAAQ,SACP,EACF,MAAC,KAAK,eACL,KAAC,SAAS,IACT,KAAK,EAAC,MAAM,EACZ,QAAQ,SACP,EACF,KAAC,SAAS,IACT,KAAK,EAAC,MAAM,EACZ,QAAQ,SACP,IACK,EACR,KAAC,SAAS,IACT,KAAK,EAAC,MAAM,EACZ,QAAQ,SACP,EACF,KAAC,SAAS,IACT,KAAK,EAAC,MAAM,EACZ,QAAQ,SACP,EACF,KAAC,KAAK,cACL,KAAC,SAAS,IACT,KAAK,EAAC,MAAM,EACZ,QAAQ,QACR,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GACvB,GACK,EACR,MAAC,KAAK,eACL,KAAC,SAAS,IACT,KAAK,EAAC,MAAM,EACZ,QAAQ,SACP,EACF,KAAC,SAAS,IACT,KAAK,EAAC,MAAM,EACZ,QAAQ,SACP,EACF,KAAC,SAAS,IACT,KAAK,EAAC,MAAM,EACZ,QAAQ,SACP,EACF,KAAC,SAAS,IACT,KAAK,EAAC,MAAM,EACZ,QAAQ,SACP,IACK,IACC,GACC,GACD,GACV,CACH,CAAC;AACH,CAAC"}
|
|
1
|
+
{"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,22 +1,19 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
3
|
-
import { NSSpace, NSSpaceSizeType } from './NSSpace';
|
|
2
|
+
import { useState } from 'react';
|
|
4
3
|
import Styles from './NSBarAction.module.css';
|
|
5
4
|
import { NSMenuAction } from './NSMenuAction';
|
|
6
5
|
import { NSDialogInfo } from './NSDialogInfo';
|
|
7
6
|
import { isNotEmptyString } from './NSLayout';
|
|
8
7
|
export function NSBarAction(props) {
|
|
9
|
-
var _a;
|
|
10
|
-
let lines = ((_a = props.description) !== null && _a !== void 0 ? _a : "").split(/(\n|\\n|<br>|<br\s*\/>)/gm);
|
|
11
8
|
const [state, setState] = useState({
|
|
12
9
|
show: false
|
|
13
10
|
});
|
|
14
11
|
const groups = Object.keys(props.menus);
|
|
15
|
-
return (
|
|
16
|
-
|
|
17
|
-
_jsx(
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
12
|
+
return (_jsx(_Fragment, { children: _jsx("div", { className: Styles.ns_bar_action_holder, children: _jsxs("div", { className: `container d-flex justify-content-center justify-content-lg-between align-items-center w-100 ${Styles.ns_bar_action_grant_parent}`, children: [(isNotEmptyString(props.title) || isNotEmptyString(props.description)) &&
|
|
13
|
+
_jsxs("div", { className: `d-lg-flex ${Styles.ns_bar_action_parent}`, children: [isNotEmptyString(props.title) &&
|
|
14
|
+
_jsx("h1", { className: Styles.ns_bar_action_title, children: props.title }), isNotEmptyString(props.description) &&
|
|
15
|
+
_jsxs("button", { className: Styles.ns_bar_action_info_container, onClick: () => setState({ show: true }), children: [_jsx("img", { src: 'https://static.namirasoft.com/image/concept/info/white-blue.svg', alt: 'info-icon', width: 24, height: 24 }), _jsx("span", { children: " Info " })] }), state.show &&
|
|
16
|
+
_jsx(NSDialogInfo, { description: props.description, title: props.title, onClose: () => setState({ show: false }), children: _jsx(_Fragment, {}) })] }), groups.length > 0 &&
|
|
17
|
+
_jsx("div", { className: Styles.ns_bar_action_actions_holder, children: groups.map((group, index) => _jsx(NSMenuAction, { name: group, items: props.menus[group] }, `NSBarAction_NSMenuAction_Key_${index}`)) })] }) }) }));
|
|
21
18
|
}
|
|
22
19
|
//# sourceMappingURL=NSBarAction.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NSBarAction.js","sourceRoot":"","sources":["../../src/components/NSBarAction.tsx"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"NSBarAction.js","sourceRoot":"","sources":["../../src/components/NSBarAction.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAC9C,OAAO,EAAqB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAc9C,MAAM,UAAU,WAAW,CAAC,KAAuB;IAElD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAmB;QACpD,IAAI,EAAE,KAAK;KACX,CAAC,CAAA;IAEF,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAExC,OAAO,CACN,4BACC,cAAK,SAAS,EAAE,MAAM,CAAC,oBAAoB,YAC1C,eAAK,SAAS,EAAE,gGAAgG,MAAM,CAAC,0BAA0B,EAAE,aAEjJ,CAAC,gBAAgB,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,gBAAgB,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;wBACtE,eAAK,SAAS,EAAE,aAAa,MAAM,CAAC,oBAAoB,EAAE,aAExD,gBAAgB,CAAC,KAAK,CAAC,KAAK,CAAC;oCAC7B,aAAI,SAAS,EAAE,MAAM,CAAC,mBAAmB,YAAG,KAAK,CAAC,KAAK,GAAM,EAG7D,gBAAgB,CAAC,KAAK,CAAC,WAAW,CAAC;oCACnC,kBAAQ,SAAS,EAAE,MAAM,CAAC,4BAA4B,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,aAC9F,cAAK,GAAG,EAAC,iEAAiE,EAAC,GAAG,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,EACpH,oCAAmB,IACX,EAGT,KAAK,CAAC,IAAI;oCACV,KAAC,YAAY,IACZ,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,YAExC,mBAAK,GACS,IAEX,EAGN,MAAM,CAAC,MAAM,GAAG,CAAC;wBACjB,cAAK,SAAS,EAAE,MAAM,CAAC,4BAA4B,YAEjD,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAC3B,KAAC,YAAY,IAA+C,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,IAA/E,gCAAgC,KAAK,EAAE,CAA4C,CACtG,GAEG,IAEF,GACD,GACJ,CACH,CAAC;AACH,CAAC"}
|
|
@@ -1,15 +1,4 @@
|
|
|
1
|
-
.
|
|
2
|
-
text-align: center;
|
|
3
|
-
color: rgba(20, 27, 92, 1);
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
.description {
|
|
7
|
-
text-align: center;
|
|
8
|
-
color: rgba(20, 27, 92, 1);
|
|
9
|
-
margin: 0px;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
.ns_action_bar_holder {
|
|
1
|
+
.ns_bar_action_holder {
|
|
13
2
|
z-index: 1;
|
|
14
3
|
padding: 0 16px;
|
|
15
4
|
position: sticky;
|
|
@@ -26,7 +15,20 @@
|
|
|
26
15
|
-moz-box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
|
|
27
16
|
}
|
|
28
17
|
|
|
29
|
-
.
|
|
18
|
+
.ns_bar_action_grant_parent {
|
|
19
|
+
flex-direction: column;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.ns_bar_action_parent {
|
|
23
|
+
display: flex;
|
|
24
|
+
align-items: center;
|
|
25
|
+
justify-content: center;
|
|
26
|
+
flex-direction: column;
|
|
27
|
+
flex-wrap: wrap;
|
|
28
|
+
margin: 16px 0px 16px 0px;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.ns_bar_action_actions_holder {
|
|
30
32
|
display: flex;
|
|
31
33
|
align-items: center;
|
|
32
34
|
justify-content: center;
|
|
@@ -37,58 +39,41 @@
|
|
|
37
39
|
margin: 16px 0px 16px 0px;
|
|
38
40
|
}
|
|
39
41
|
|
|
40
|
-
.
|
|
42
|
+
.ns_bar_action_info_container {
|
|
41
43
|
border: none;
|
|
42
44
|
outline: none;
|
|
43
45
|
background: none;
|
|
44
46
|
}
|
|
45
47
|
|
|
46
|
-
.
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
.ns_hide {
|
|
51
|
-
display: none;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.ns_show {
|
|
55
|
-
display: flex;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
.ns_desktop_action_bar_title {
|
|
59
|
-
display: none;
|
|
48
|
+
.ns_bar_action_title {
|
|
49
|
+
margin: 0px;
|
|
50
|
+
text-align: center;
|
|
51
|
+
color: rgba(20, 27, 92, 1);
|
|
60
52
|
}
|
|
61
53
|
|
|
62
|
-
.ns_mobile_action_bar_title {
|
|
63
|
-
display: block;
|
|
64
|
-
}
|
|
65
54
|
|
|
66
55
|
@media only screen and (min-width: 480px) {
|
|
67
|
-
.
|
|
56
|
+
.ns_bar_action_actions_holder {
|
|
68
57
|
flex-direction: row;
|
|
69
58
|
flex: 1 1 0;
|
|
70
59
|
}
|
|
60
|
+
|
|
61
|
+
.ns_bar_action_grant_parent {
|
|
62
|
+
flex-direction: row;
|
|
63
|
+
}
|
|
71
64
|
}
|
|
72
65
|
|
|
73
66
|
@media only screen and (min-width: 1024px) {
|
|
74
|
-
.
|
|
67
|
+
.ns_bar_action_holder {
|
|
75
68
|
justify-content: space-between;
|
|
76
69
|
min-height: 80px;
|
|
77
70
|
}
|
|
78
71
|
|
|
79
|
-
.
|
|
72
|
+
.ns_bar_action_actions_holder {
|
|
80
73
|
justify-content: flex-end;
|
|
81
74
|
}
|
|
82
75
|
|
|
83
|
-
.
|
|
84
|
-
display: flex;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
.ns_mobile_action_bar_title {
|
|
88
|
-
display: none;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
.ns_info_container {
|
|
76
|
+
.ns_bar_action_info_container {
|
|
92
77
|
margin: 0;
|
|
93
78
|
display: flex;
|
|
94
79
|
align-items: center;
|
|
@@ -13,7 +13,7 @@ export function NSLayout(props) {
|
|
|
13
13
|
var _a, _b;
|
|
14
14
|
function isValidAction(action) {
|
|
15
15
|
if (action)
|
|
16
|
-
if ((isNotEmptyString(action.title)) || (isNotEmptyString(action.description)))
|
|
16
|
+
if ((isNotEmptyString(action.title)) || (isNotEmptyString(action.description)) || Object.keys(action.menus).length > 0)
|
|
17
17
|
return true;
|
|
18
18
|
return false;
|
|
19
19
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NSLayout.js","sourceRoot":"","sources":["../../src/components/NSLayout.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAa,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,iBAAiB,EAA0B,MAAM,qBAAqB,CAAC;AAEhF,OAAO,EAAoB,WAAW,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAmB,UAAU,EAAE,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAErD,OAAO,EAAmB,UAAU,EAAE,MAAM,cAAc,CAAC;AAe3D,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,MAA0B,EAAE,EAAE,CAAC,MAAM,IAAI,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC;AAE/F,MAAM,UAAU,QAAQ,CAAC,KAAoB;;IAE5C,SAAS,aAAa,CAAC,MAAyB;QAE/C,IAAI,MAAM;YACT,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"NSLayout.js","sourceRoot":"","sources":["../../src/components/NSLayout.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/src/App.tsx
CHANGED
|
@@ -28,6 +28,25 @@ export function App()
|
|
|
28
28
|
title: { title: "Verify", description: "Please login to your profile" },
|
|
29
29
|
}
|
|
30
30
|
]}
|
|
31
|
+
title={{ title: "Namirasoft Account", description: "Amir Abolhasani" }}
|
|
32
|
+
action={{
|
|
33
|
+
title: "asdasdasd",
|
|
34
|
+
menus:
|
|
35
|
+
{
|
|
36
|
+
"t": [{
|
|
37
|
+
isActive: () => false,
|
|
38
|
+
handler: () => { },
|
|
39
|
+
id: "1",
|
|
40
|
+
menu_item: "Click"
|
|
41
|
+
}],
|
|
42
|
+
"x": [{
|
|
43
|
+
isActive: () => false,
|
|
44
|
+
handler: () => { },
|
|
45
|
+
id: "1",
|
|
46
|
+
menu_item: "Click"
|
|
47
|
+
}]
|
|
48
|
+
}
|
|
49
|
+
}}
|
|
31
50
|
>
|
|
32
51
|
<NSSection>
|
|
33
52
|
<NSPanel >
|
|
@@ -1,15 +1,4 @@
|
|
|
1
|
-
.
|
|
2
|
-
text-align: center;
|
|
3
|
-
color: rgba(20, 27, 92, 1);
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
.description {
|
|
7
|
-
text-align: center;
|
|
8
|
-
color: rgba(20, 27, 92, 1);
|
|
9
|
-
margin: 0px;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
.ns_action_bar_holder {
|
|
1
|
+
.ns_bar_action_holder {
|
|
13
2
|
z-index: 1;
|
|
14
3
|
padding: 0 16px;
|
|
15
4
|
position: sticky;
|
|
@@ -26,7 +15,20 @@
|
|
|
26
15
|
-moz-box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
|
|
27
16
|
}
|
|
28
17
|
|
|
29
|
-
.
|
|
18
|
+
.ns_bar_action_grant_parent {
|
|
19
|
+
flex-direction: column;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.ns_bar_action_parent {
|
|
23
|
+
display: flex;
|
|
24
|
+
align-items: center;
|
|
25
|
+
justify-content: center;
|
|
26
|
+
flex-direction: column;
|
|
27
|
+
flex-wrap: wrap;
|
|
28
|
+
margin: 16px 0px 16px 0px;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.ns_bar_action_actions_holder {
|
|
30
32
|
display: flex;
|
|
31
33
|
align-items: center;
|
|
32
34
|
justify-content: center;
|
|
@@ -37,58 +39,41 @@
|
|
|
37
39
|
margin: 16px 0px 16px 0px;
|
|
38
40
|
}
|
|
39
41
|
|
|
40
|
-
.
|
|
42
|
+
.ns_bar_action_info_container {
|
|
41
43
|
border: none;
|
|
42
44
|
outline: none;
|
|
43
45
|
background: none;
|
|
44
46
|
}
|
|
45
47
|
|
|
46
|
-
.
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
.ns_hide {
|
|
51
|
-
display: none;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.ns_show {
|
|
55
|
-
display: flex;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
.ns_desktop_action_bar_title {
|
|
59
|
-
display: none;
|
|
48
|
+
.ns_bar_action_title {
|
|
49
|
+
margin: 0px;
|
|
50
|
+
text-align: center;
|
|
51
|
+
color: rgba(20, 27, 92, 1);
|
|
60
52
|
}
|
|
61
53
|
|
|
62
|
-
.ns_mobile_action_bar_title {
|
|
63
|
-
display: block;
|
|
64
|
-
}
|
|
65
54
|
|
|
66
55
|
@media only screen and (min-width: 480px) {
|
|
67
|
-
.
|
|
56
|
+
.ns_bar_action_actions_holder {
|
|
68
57
|
flex-direction: row;
|
|
69
58
|
flex: 1 1 0;
|
|
70
59
|
}
|
|
60
|
+
|
|
61
|
+
.ns_bar_action_grant_parent {
|
|
62
|
+
flex-direction: row;
|
|
63
|
+
}
|
|
71
64
|
}
|
|
72
65
|
|
|
73
66
|
@media only screen and (min-width: 1024px) {
|
|
74
|
-
.
|
|
67
|
+
.ns_bar_action_holder {
|
|
75
68
|
justify-content: space-between;
|
|
76
69
|
min-height: 80px;
|
|
77
70
|
}
|
|
78
71
|
|
|
79
|
-
.
|
|
72
|
+
.ns_bar_action_actions_holder {
|
|
80
73
|
justify-content: flex-end;
|
|
81
74
|
}
|
|
82
75
|
|
|
83
|
-
.
|
|
84
|
-
display: flex;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
.ns_mobile_action_bar_title {
|
|
88
|
-
display: none;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
.ns_info_container {
|
|
76
|
+
.ns_bar_action_info_container {
|
|
92
77
|
margin: 0;
|
|
93
78
|
display: flex;
|
|
94
79
|
align-items: center;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { NSSpace, NSSpaceSizeType } from './NSSpace';
|
|
1
|
+
import { useState } from 'react';
|
|
3
2
|
import Styles from './NSBarAction.module.css';
|
|
4
3
|
import { NSMenuActionProps, NSMenuAction } from './NSMenuAction';
|
|
5
4
|
import { NSDialogInfo } from './NSDialogInfo';
|
|
@@ -19,8 +18,6 @@ export interface NSBarActionState
|
|
|
19
18
|
|
|
20
19
|
export function NSBarAction(props: NSBarActionProps)
|
|
21
20
|
{
|
|
22
|
-
let lines = (props.description ?? "").split(/(\n|\\n|<br>|<br\s*\/>)/gm);
|
|
23
|
-
|
|
24
21
|
const [state, setState] = useState<NSBarActionState>({
|
|
25
22
|
show: false
|
|
26
23
|
})
|
|
@@ -29,63 +26,46 @@ export function NSBarAction(props: NSBarActionProps)
|
|
|
29
26
|
|
|
30
27
|
return (
|
|
31
28
|
<>
|
|
32
|
-
<div className={Styles.
|
|
33
|
-
{
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
<
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
<span> Info </span>
|
|
42
|
-
</button>
|
|
43
|
-
}
|
|
44
|
-
{
|
|
45
|
-
state.show &&
|
|
46
|
-
<NSDialogInfo
|
|
47
|
-
description={props.description}
|
|
48
|
-
title={props.title}
|
|
49
|
-
onClose={() => setState({ show: false })}
|
|
50
|
-
>
|
|
51
|
-
<></>
|
|
52
|
-
</NSDialogInfo>
|
|
53
|
-
}
|
|
54
|
-
</div>
|
|
55
|
-
<div className={Styles.ns_actions_holder}>
|
|
56
|
-
{
|
|
57
|
-
groups.map((group, index) =>
|
|
58
|
-
<NSMenuAction key={`NSBarAction_NSMenuAction_Key_${index}`} name={group} items={props.menus[group]} />
|
|
59
|
-
)
|
|
60
|
-
}
|
|
61
|
-
</div>
|
|
62
|
-
</div>
|
|
63
|
-
{/* Desktop */}
|
|
64
|
-
</div>
|
|
65
|
-
{/* Mobile */}
|
|
66
|
-
<div className={`container d-block d-lg-none ${Styles.ns_mobile_action_bar_title}`}>
|
|
67
|
-
<NSSpace size={NSSpaceSizeType.SMALL} />
|
|
68
|
-
<h1 className={Styles.title}>{props.title}</h1>
|
|
69
|
-
{
|
|
70
|
-
props.description && lines &&
|
|
71
|
-
<>
|
|
72
|
-
<p className={Styles.description}>
|
|
29
|
+
<div className={Styles.ns_bar_action_holder}>
|
|
30
|
+
<div className={`container d-flex justify-content-center justify-content-lg-between align-items-center w-100 ${Styles.ns_bar_action_grant_parent}`}>
|
|
31
|
+
{
|
|
32
|
+
(isNotEmptyString(props.title) || isNotEmptyString(props.description)) &&
|
|
33
|
+
<div className={`d-lg-flex ${Styles.ns_bar_action_parent}`}>
|
|
34
|
+
{
|
|
35
|
+
isNotEmptyString(props.title) &&
|
|
36
|
+
<h1 className={Styles.ns_bar_action_title}>{props.title}</h1>
|
|
37
|
+
}
|
|
73
38
|
{
|
|
74
|
-
|
|
75
|
-
{
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
{index !== lines.length - 1 && <br />}
|
|
80
|
-
</React.Fragment>
|
|
81
|
-
)
|
|
82
|
-
})
|
|
39
|
+
isNotEmptyString(props.description) &&
|
|
40
|
+
<button className={Styles.ns_bar_action_info_container} onClick={() => setState({ show: true })}>
|
|
41
|
+
<img src='https://static.namirasoft.com/image/concept/info/white-blue.svg' alt='info-icon' width={24} height={24} />
|
|
42
|
+
<span> Info </span>
|
|
43
|
+
</button>
|
|
83
44
|
}
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
45
|
+
{
|
|
46
|
+
state.show &&
|
|
47
|
+
<NSDialogInfo
|
|
48
|
+
description={props.description}
|
|
49
|
+
title={props.title}
|
|
50
|
+
onClose={() => setState({ show: false })}
|
|
51
|
+
>
|
|
52
|
+
<></>
|
|
53
|
+
</NSDialogInfo>
|
|
54
|
+
}
|
|
55
|
+
</div>
|
|
56
|
+
}
|
|
57
|
+
{
|
|
58
|
+
groups.length > 0 &&
|
|
59
|
+
<div className={Styles.ns_bar_action_actions_holder}>
|
|
60
|
+
{
|
|
61
|
+
groups.map((group, index) =>
|
|
62
|
+
<NSMenuAction key={`NSBarAction_NSMenuAction_Key_${index}`} name={group} items={props.menus[group]} />
|
|
63
|
+
)
|
|
64
|
+
}
|
|
65
|
+
</div>
|
|
66
|
+
}
|
|
67
|
+
</div>
|
|
87
68
|
</div>
|
|
88
|
-
{/* Mobile */}
|
|
89
69
|
</>
|
|
90
70
|
);
|
|
91
71
|
}
|
|
@@ -31,7 +31,7 @@ export function NSLayout(props: NSLayoutProps)
|
|
|
31
31
|
function isValidAction(action?: NSBarActionProps): action is NSBarActionProps
|
|
32
32
|
{
|
|
33
33
|
if (action)
|
|
34
|
-
if ((isNotEmptyString(action.title)) || (isNotEmptyString(action.description)))
|
|
34
|
+
if ((isNotEmptyString(action.title)) || (isNotEmptyString(action.description)) || Object.keys(action.menus).length > 0)
|
|
35
35
|
return true;
|
|
36
36
|
return false;
|
|
37
37
|
}
|