namirasoft-site-react 1.3.102 → 1.3.103
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/components/NSInput.module.css +11 -4
- package/dist/components/NSLayoutAction.d.ts +1 -1
- package/dist/components/NSLayoutAction.js +2 -5
- package/dist/components/NSLayoutAction.js.map +1 -1
- package/dist/components/NSLayoutAction.module.css +1 -1
- package/dist/components/NSModal.d.ts +1 -4
- package/dist/components/NSModal.js +3 -21
- package/dist/components/NSModal.js.map +1 -1
- package/dist/components/NSModal.module.css +28 -6
- package/dist/components/NSTable.js +1 -1
- package/dist/components/NSTable.js.map +1 -1
- package/package.json +1 -1
- package/src/components/NSInput.module.css +11 -4
- package/src/components/NSLayoutAction.module.css +1 -1
- package/src/components/NSLayoutAction.tsx +5 -10
- package/src/components/NSModal.module.css +28 -6
- package/src/components/NSModal.tsx +5 -39
- package/src/components/NSTable.tsx +1 -0
|
@@ -7,6 +7,12 @@
|
|
|
7
7
|
justify-content: center;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
+
.ns_input_parent img {
|
|
11
|
+
position: absolute;
|
|
12
|
+
right: 5%;
|
|
13
|
+
top: 50%;
|
|
14
|
+
}
|
|
15
|
+
|
|
10
16
|
.ns_input_container {
|
|
11
17
|
display: flex;
|
|
12
18
|
align-items: center;
|
|
@@ -16,10 +22,10 @@
|
|
|
16
22
|
|
|
17
23
|
.ns_input_icon_container {
|
|
18
24
|
margin: 0 !important;
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
25
|
+
position: absolute;
|
|
26
|
+
left: 12px;
|
|
27
|
+
right: 5%;
|
|
28
|
+
top: 25%;
|
|
23
29
|
}
|
|
24
30
|
|
|
25
31
|
.ns_input {
|
|
@@ -64,4 +70,5 @@
|
|
|
64
70
|
width: 206px !important;
|
|
65
71
|
}
|
|
66
72
|
}
|
|
73
|
+
|
|
67
74
|
/*End Input Tell*/
|
|
@@ -9,6 +9,6 @@ export interface INSLayoutActionProps extends INSLayoutProps, IBaseComponentProp
|
|
|
9
9
|
children: ReactNode;
|
|
10
10
|
}
|
|
11
11
|
export interface INSLaoutActionState {
|
|
12
|
-
|
|
12
|
+
show: boolean;
|
|
13
13
|
}
|
|
14
14
|
export declare function NSLayoutAction(props: INSLayoutActionProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -9,13 +9,10 @@ export function NSLayoutAction(props) {
|
|
|
9
9
|
var _a;
|
|
10
10
|
let lines = ((_a = props.description) !== null && _a !== void 0 ? _a : "").split(/(\n|\\n|<br>|<br\s*\/>)/gm);
|
|
11
11
|
const [state, setState] = useState({
|
|
12
|
-
|
|
12
|
+
show: false
|
|
13
13
|
});
|
|
14
14
|
const filtered_actions = props.actions.filter((action) => action.group);
|
|
15
|
-
|
|
16
|
-
setState(prevState => (Object.assign(Object.assign({}, prevState), { showDescription: !prevState.showDescription })));
|
|
17
|
-
};
|
|
18
|
-
return (_jsxs(NSLayout, Object.assign({}, props, { children: [_jsxs("div", { className: Styles.ns_action_bar_holder, children: [_jsxs("div", { className: `d-none d-lg-flex ${Styles.ns_desktop_action_bar_title}`, children: [_jsx("h1", { className: Styles.title, children: props.title }), _jsxs("button", { className: Styles.ns_info_container, onClick: showHandler, 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 " })] }), _jsx(NSModal, { show: state.showDescription, description: props.description, title: props.title })] }), _jsxs("div", { className: `d-block d-lg-none ${Styles.ns_mobile_action_bar_title}`, children: [_jsx("h1", { className: Styles.title, children: props.title }), props.description && lines &&
|
|
15
|
+
return (_jsxs(NSLayout, Object.assign({}, props, { children: [_jsxs("div", { className: Styles.ns_action_bar_holder, children: [_jsxs("div", { className: `d-none d-lg-flex ${Styles.ns_desktop_action_bar_title}`, children: [_jsx("h1", { className: Styles.title, children: props.title }), _jsxs("button", { className: Styles.ns_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 " })] }), _jsx(NSModal, { show: state.show, description: props.description, title: props.title, onClose: () => setState({ show: false }) })] }), _jsxs("div", { className: `d-block d-lg-none ${Styles.ns_mobile_action_bar_title}`, children: [_jsx("h1", { className: Styles.title, children: props.title }), props.description && lines &&
|
|
19
16
|
_jsxs(_Fragment, { children: [_jsx("p", { className: Styles.description, children: lines.map((line, index) => {
|
|
20
17
|
return _jsxs(_Fragment, { children: [line.trim(), index != lines.length - 1 && _jsx("br", {})] });
|
|
21
18
|
}) }), _jsx(NSSpace, { size: NSSpaceSizeType.MINI })] })] }), _jsx("div", { className: Styles.ns_actions_hodler, children: filtered_actions.map((action) => _jsx(NSActionMenu, { group: action.group, items: action.items }, action.id)) })] }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), props.children] })));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NSLayoutAction.js","sourceRoot":"","sources":["../../src/components/NSLayoutAction.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAkB,MAAM,YAAY,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAErD,OAAO,MAAM,MAAM,6BAA6B,CAAC;AACjD,OAAO,EAAsB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAapC,MAAM,UAAU,cAAc,CAAC,KAA2B;;IAEzD,IAAI,KAAK,GAAG,CAAC,MAAA,KAAK,CAAC,WAAW,mCAAI,EAAE,CAAC,CAAC,KAAK,CAAC,2BAA2B,CAAC,CAAC;IACzE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAsB;QACvD,
|
|
1
|
+
{"version":3,"file":"NSLayoutAction.js","sourceRoot":"","sources":["../../src/components/NSLayoutAction.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAkB,MAAM,YAAY,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAErD,OAAO,MAAM,MAAM,6BAA6B,CAAC;AACjD,OAAO,EAAsB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAapC,MAAM,UAAU,cAAc,CAAC,KAA2B;;IAEzD,IAAI,KAAK,GAAG,CAAC,MAAA,KAAK,CAAC,WAAW,mCAAI,EAAE,CAAC,CAAC,KAAK,CAAC,2BAA2B,CAAC,CAAC;IACzE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAsB;QACvD,IAAI,EAAE,KAAK;KACX,CAAC,CAAA;IAEF,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;IAGvE,OAAO,CACN,MAAC,QAAQ,oBAAK,KAAK,eAElB,eAAK,SAAS,EAAE,MAAM,CAAC,oBAAoB,aAE1C,eAAK,SAAS,EAAE,oBAAoB,MAAM,CAAC,2BAA2B,EAAE,aACvE,aAAI,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,KAAK,CAAC,KAAK,GAAM,EAE/C,kBAAQ,SAAS,EAAE,MAAM,CAAC,iBAAiB,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,aACnF,cAAK,GAAG,EAAC,iEAAiE,EAAC,GAAG,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,EACpH,oCAAmB,IACX,EAET,KAAC,OAAO,IACP,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,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,GACvC,IACG,EAGN,eAAK,SAAS,EAAE,qBAAqB,MAAM,CAAC,0BAA0B,EAAE,aACvE,aAAI,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,KAAK,CAAC,KAAK,GAAM,EAE9C,KAAK,CAAC,WAAW,IAAI,KAAK;gCAC1B,8BACC,YAAG,SAAS,EAAE,MAAM,CAAC,WAAW,YAE9B,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gDAEzB,OAAO,8BACL,IAAI,CAAC,IAAI,EAAE,EACX,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,cAAM,IAClC,CAAA;4CACJ,CAAC,CAAC,GAEA,EACJ,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,IAAI,GAAI,IACrC,IAEC,EAEN,cAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,YACtC,gBAAgB,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAChC,KAAC,YAAY,IAEZ,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,KAAK,EAAE,MAAM,CAAC,KAAK,IAFd,MAAM,CAAC,EAAE,CAGb,CACF,GACI,IAED,EACN,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,KAAK,GAAI,EACvC,KAAK,CAAC,QAAQ,KACL,CACX,CAAC;AACH,CAAC"}
|
|
@@ -5,9 +5,6 @@ export interface INSModalProps extends IBaseComponentProps {
|
|
|
5
5
|
description?: string;
|
|
6
6
|
show: boolean;
|
|
7
7
|
children?: React.ReactNode;
|
|
8
|
-
|
|
9
|
-
export interface INSModalState {
|
|
10
|
-
closeModal: boolean;
|
|
11
|
-
visibilityClassNames: string;
|
|
8
|
+
onClose: () => void;
|
|
12
9
|
}
|
|
13
10
|
export declare function NSModal(props: INSModalProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,32 +1,14 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useState } from "react";
|
|
4
3
|
import { NSSpace, NSSpaceSizeType, NSTitle } from "../main";
|
|
5
4
|
import Styles from './NSModal.module.css';
|
|
6
5
|
import NSButton from "./NSButton";
|
|
7
6
|
export function NSModal(props) {
|
|
8
7
|
var _a;
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
visibilityClassNames: ""
|
|
12
|
-
});
|
|
13
|
-
const closeModalHandler = () => {
|
|
14
|
-
setState(prevState => (Object.assign(Object.assign({}, prevState), { closeModal: !state.closeModal })));
|
|
15
|
-
};
|
|
16
|
-
let classNames;
|
|
17
|
-
const modalVisibilityClassName = () => {
|
|
18
|
-
if (state.closeModal && !props.show)
|
|
19
|
-
classNames = `${Styles.ns_hide}`;
|
|
20
|
-
else if (!state.closeModal && props.show)
|
|
21
|
-
classNames = `${Styles.ns_show}`;
|
|
22
|
-
else if (state.closeModal && props.show)
|
|
23
|
-
classNames = `${Styles.ns_hide}`;
|
|
24
|
-
return classNames;
|
|
25
|
-
};
|
|
26
|
-
let modalClassNames = modalVisibilityClassName();
|
|
27
|
-
return (_jsx("section", { onClick: closeModalHandler, id: props.id, className: `${modalClassNames}
|
|
8
|
+
console.log(props, props.show ? Styles.ns_show : Styles.ns_hide);
|
|
9
|
+
return (_jsx("section", { onClick: props.onClose, id: props.id, className: `${props.show ? Styles.ns_show : Styles.ns_hide}
|
|
28
10
|
${Styles.ns_modal}
|
|
29
|
-
${(_a = props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: props.style, children: _jsxs("div", { className: Styles.ns_modal_container, children: [_jsx(NSButton, { onClick:
|
|
11
|
+
${(_a = props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: props.style, children: _jsxs("div", { className: Styles.ns_modal_container, children: [_jsx(NSButton, { onClick: props.onClose, icon: { src: "https://static.namirasoft.com/image/concept/close/blue.svg", alt: "close modal" }, classList: [Styles.ns_close_modal] }), _jsxs("div", { className: Styles.ns_modal_content, children: [props.title &&
|
|
30
12
|
_jsxs(_Fragment, { children: [_jsx(NSTitle, { title: props.title }), _jsx(NSSpace, { size: NSSpaceSizeType.NORMAL })] }), props.description &&
|
|
31
13
|
_jsxs("p", { className: Styles.ns_modal_description, children: [" ", props.description, " "] })] })] }) }));
|
|
32
14
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NSModal.js","sourceRoot":"","sources":["../../src/components/NSModal.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,
|
|
1
|
+
{"version":3,"file":"NSModal.js","sourceRoot":"","sources":["../../src/components/NSModal.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAuB,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AACjF,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,QAAQ,MAAM,YAAY,CAAC;AAUlC,MAAM,UAAU,OAAO,CAAC,KAAoB;;IAE3C,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACjE,OAAO,CACN,kBACC,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO;KACxD,MAAM,CAAC,QAAQ;KACf,MAAA,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAE9B,KAAK,EAAE,KAAK,CAAC,KAAK,YAElB,eAAK,SAAS,EAAE,MAAM,CAAC,kBAAkB,aACxC,KAAC,QAAQ,IACR,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,IAAI,EAAE,EAAE,GAAG,EAAE,4DAA4D,EAAE,GAAG,EAAE,aAAa,EAAE,EAC/F,SAAS,EAAE,CAAC,MAAM,CAAC,cAAc,CAAC,GACjC,EACF,eAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,aACrC,KAAK,CAAC,KAAK;4BACX,8BACC,KAAC,OAAO,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,GAAI,EAC/B,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,MAAM,GAAI,IACvC,EAEH,KAAK,CAAC,WAAW;4BACjB,aAAG,SAAS,EAAE,MAAM,CAAC,oBAAoB,kBAAK,KAAK,CAAC,WAAW,SAAM,IAEjE,IACD,GACI,CACX,CAAC;AACH,CAAC"}
|
|
@@ -22,18 +22,27 @@
|
|
|
22
22
|
|
|
23
23
|
.ns_modal_container {
|
|
24
24
|
background-color: #fff;
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
25
|
+
width: 100%;
|
|
26
|
+
height: 100%;
|
|
27
|
+
position: relative;
|
|
28
|
+
border-radius: 8px;
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
.ns_close_modal {
|
|
31
|
+
.ns_close_modal {
|
|
32
32
|
border: none;
|
|
33
33
|
position: absolute;
|
|
34
34
|
right: 0;
|
|
35
|
+
margin: 0 24px 0 0;
|
|
35
36
|
top: 24px;
|
|
36
|
-
width:
|
|
37
|
+
width: 24px;
|
|
38
|
+
height: 24px;
|
|
39
|
+
background-color: rgba(236, 28, 36, 1);
|
|
40
|
+
border-radius: 50%;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.ns_close_modal img {
|
|
44
|
+
width: 12px;
|
|
45
|
+
height: 12px;
|
|
37
46
|
}
|
|
38
47
|
|
|
39
48
|
.ns_modal_content {
|
|
@@ -49,6 +58,19 @@
|
|
|
49
58
|
.ns_show {
|
|
50
59
|
display: block;
|
|
51
60
|
}
|
|
61
|
+
|
|
52
62
|
.ns_hide {
|
|
53
63
|
display: none;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
@media only screen and (min-width:768px) {
|
|
67
|
+
.ns_close_modal {
|
|
68
|
+
width: 48px;
|
|
69
|
+
height: 48px;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.ns_close_modal img {
|
|
73
|
+
width: 24px;
|
|
74
|
+
height: 24px;
|
|
75
|
+
}
|
|
54
76
|
}
|
|
@@ -57,7 +57,7 @@ export class NSTable extends Component {
|
|
|
57
57
|
if (!overided)
|
|
58
58
|
this.showModal(getCell(row, column, rowIndex, columnIndex));
|
|
59
59
|
};
|
|
60
|
-
return (_jsxs("div", { id: this.props.id, className: `${Styles.ns_project_list_container} ${(_a = this.props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: this.props.style, children: [_jsx("section", { className: Styles.ns_search_input, children: _jsx(NSInputSearch, { ref: this.search, title: "Search", required: false, onChanged: this.getSearchValue, style: { padding: "0", margin: "0" } }) }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsxs("table", { className: Styles.ns_table, children: [_jsx("thead", { className: Styles.ns_thead, children: _jsx("tr", { children: column_keys.map(column_key => _jsx("th", { scope: "col", children: this.state.columns[column_key] }, column_key)) }) }), _jsx("tbody", { className: Styles.ns_tbody, children: this.state.rows.map((row, rowIndex) => _jsx("tr", { onClick: (e) => { onRowClick(e, row, rowIndex); }, children: column_keys.map((column, columnIndex) => (_jsx("td", Object.assign({}, getColumnAttributes(column, columnIndex), { "data-label": `${this.state.columns[column]} : `, onClick: (e) => { onCellClick(e, row, column, rowIndex, columnIndex); }, children: getCell(row, column, rowIndex, columnIndex) })))) }, this.props.getRowKey(row, rowIndex))) })] }), _jsx(NSSpace, { size: NSSpaceSizeType.MICRO }), _jsxs("section", { className: Styles.ns_pagination_button, children: [_jsx(NSPagination, { size: 50, page: 5 }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsxs("div", { className: Styles.ns_button, children: [_jsx(NSButton, { title: 'Export', icon: { src: "/assets/images/export-vector.png" }, onClick: () => { }, style: { border: '1px solid rgba(255, 148, 50, 1)', width: "128px" } }), _jsx(NSButton, { title: 'Refresh', icon: { src: "/assets/images/refresh-vector.png" }, onClick: () => { }, style: { border: '1px solid rgba(3, 119, 255, 1)', width: "128px" } })] })] }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsx(NSModal, { show: this.state.model.show, description: this.state.model.description })] }));
|
|
60
|
+
return (_jsxs("div", { id: this.props.id, className: `${Styles.ns_project_list_container} ${(_a = this.props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: this.props.style, children: [_jsx("section", { className: Styles.ns_search_input, children: _jsx(NSInputSearch, { ref: this.search, title: "Search", required: false, onChanged: this.getSearchValue, style: { padding: "0", margin: "0" } }) }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsxs("table", { className: Styles.ns_table, children: [_jsx("thead", { className: Styles.ns_thead, children: _jsx("tr", { children: column_keys.map(column_key => _jsx("th", { scope: "col", children: this.state.columns[column_key] }, column_key)) }) }), _jsx("tbody", { className: Styles.ns_tbody, children: this.state.rows.map((row, rowIndex) => _jsx("tr", { onClick: (e) => { onRowClick(e, row, rowIndex); }, children: column_keys.map((column, columnIndex) => (_jsx("td", Object.assign({}, getColumnAttributes(column, columnIndex), { "data-label": `${this.state.columns[column]} : `, onClick: (e) => { onCellClick(e, row, column, rowIndex, columnIndex); }, children: getCell(row, column, rowIndex, columnIndex) })))) }, this.props.getRowKey(row, rowIndex))) })] }), _jsx(NSSpace, { size: NSSpaceSizeType.MICRO }), _jsxs("section", { className: Styles.ns_pagination_button, children: [_jsx(NSPagination, { size: 50, page: 5 }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsxs("div", { className: Styles.ns_button, children: [_jsx(NSButton, { title: 'Export', icon: { src: "/assets/images/export-vector.png" }, onClick: () => { }, style: { border: '1px solid rgba(255, 148, 50, 1)', width: "128px" } }), _jsx(NSButton, { title: 'Refresh', icon: { src: "/assets/images/refresh-vector.png" }, onClick: () => { }, style: { border: '1px solid rgba(3, 119, 255, 1)', width: "128px" } })] })] }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsx(NSModal, { show: this.state.model.show, description: this.state.model.description, onClose: () => { this.hideModal(); } })] }));
|
|
61
61
|
}
|
|
62
62
|
}
|
|
63
63
|
//# sourceMappingURL=NSTable.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NSTable.js","sourceRoot":"","sources":["../../src/components/NSTable.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"NSTable.js","sourceRoot":"","sources":["../../src/components/NSTable.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -7,6 +7,12 @@
|
|
|
7
7
|
justify-content: center;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
+
.ns_input_parent img {
|
|
11
|
+
position: absolute;
|
|
12
|
+
right: 5%;
|
|
13
|
+
top: 50%;
|
|
14
|
+
}
|
|
15
|
+
|
|
10
16
|
.ns_input_container {
|
|
11
17
|
display: flex;
|
|
12
18
|
align-items: center;
|
|
@@ -16,10 +22,10 @@
|
|
|
16
22
|
|
|
17
23
|
.ns_input_icon_container {
|
|
18
24
|
margin: 0 !important;
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
25
|
+
position: absolute;
|
|
26
|
+
left: 12px;
|
|
27
|
+
right: 5%;
|
|
28
|
+
top: 25%;
|
|
23
29
|
}
|
|
24
30
|
|
|
25
31
|
.ns_input {
|
|
@@ -64,4 +70,5 @@
|
|
|
64
70
|
width: 206px !important;
|
|
65
71
|
}
|
|
66
72
|
}
|
|
73
|
+
|
|
67
74
|
/*End Input Tell*/
|
|
@@ -15,23 +15,17 @@ export interface INSLayoutActionProps extends INSLayoutProps, IBaseComponentProp
|
|
|
15
15
|
}
|
|
16
16
|
export interface INSLaoutActionState
|
|
17
17
|
{
|
|
18
|
-
|
|
18
|
+
show: boolean
|
|
19
19
|
}
|
|
20
20
|
export function NSLayoutAction(props: INSLayoutActionProps)
|
|
21
21
|
{
|
|
22
22
|
let lines = (props.description ?? "").split(/(\n|\\n|<br>|<br\s*\/>)/gm);
|
|
23
23
|
const [state, setState] = useState<INSLaoutActionState>({
|
|
24
|
-
|
|
24
|
+
show: false
|
|
25
25
|
})
|
|
26
26
|
|
|
27
27
|
const filtered_actions = props.actions.filter((action) => action.group)
|
|
28
28
|
|
|
29
|
-
const showHandler = (): void =>
|
|
30
|
-
{
|
|
31
|
-
setState(prevState => ({
|
|
32
|
-
...prevState, showDescription: !prevState.showDescription // Updated prevState
|
|
33
|
-
}));
|
|
34
|
-
};
|
|
35
29
|
|
|
36
30
|
return (
|
|
37
31
|
<NSLayout {...props}>
|
|
@@ -41,15 +35,16 @@ export function NSLayoutAction(props: INSLayoutActionProps)
|
|
|
41
35
|
<div className={`d-none d-lg-flex ${Styles.ns_desktop_action_bar_title}`}>
|
|
42
36
|
<h1 className={Styles.title}>{props.title}</h1>
|
|
43
37
|
|
|
44
|
-
<button className={Styles.ns_info_container} onClick={
|
|
38
|
+
<button className={Styles.ns_info_container} onClick={() => setState({ show: true })}>
|
|
45
39
|
<img src='https://static.namirasoft.com/image/concept/info/white-blue.svg' alt='info-icon' width={24} height={24} />
|
|
46
40
|
<span> Info </span>
|
|
47
41
|
</button>
|
|
48
42
|
|
|
49
43
|
<NSModal
|
|
50
|
-
show={state.
|
|
44
|
+
show={state.show}
|
|
51
45
|
description={props.description}
|
|
52
46
|
title={props.title}
|
|
47
|
+
onClose={() => setState({ show: false })}
|
|
53
48
|
/>
|
|
54
49
|
</div>
|
|
55
50
|
|
|
@@ -22,18 +22,27 @@
|
|
|
22
22
|
|
|
23
23
|
.ns_modal_container {
|
|
24
24
|
background-color: #fff;
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
25
|
+
width: 100%;
|
|
26
|
+
height: 100%;
|
|
27
|
+
position: relative;
|
|
28
|
+
border-radius: 8px;
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
.ns_close_modal {
|
|
31
|
+
.ns_close_modal {
|
|
32
32
|
border: none;
|
|
33
33
|
position: absolute;
|
|
34
34
|
right: 0;
|
|
35
|
+
margin: 0 24px 0 0;
|
|
35
36
|
top: 24px;
|
|
36
|
-
width:
|
|
37
|
+
width: 24px;
|
|
38
|
+
height: 24px;
|
|
39
|
+
background-color: rgba(236, 28, 36, 1);
|
|
40
|
+
border-radius: 50%;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.ns_close_modal img {
|
|
44
|
+
width: 12px;
|
|
45
|
+
height: 12px;
|
|
37
46
|
}
|
|
38
47
|
|
|
39
48
|
.ns_modal_content {
|
|
@@ -49,6 +58,19 @@
|
|
|
49
58
|
.ns_show {
|
|
50
59
|
display: block;
|
|
51
60
|
}
|
|
61
|
+
|
|
52
62
|
.ns_hide {
|
|
53
63
|
display: none;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
@media only screen and (min-width:768px) {
|
|
67
|
+
.ns_close_modal {
|
|
68
|
+
width: 48px;
|
|
69
|
+
height: 48px;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.ns_close_modal img {
|
|
73
|
+
width: 24px;
|
|
74
|
+
height: 24px;
|
|
75
|
+
}
|
|
54
76
|
}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
|
|
3
|
-
import { useState } from "react";
|
|
4
3
|
import { IBaseComponentProps, NSSpace, NSSpaceSizeType, NSTitle } from "../main";
|
|
5
4
|
import Styles from './NSModal.module.css';
|
|
6
5
|
import NSButton from "./NSButton";
|
|
@@ -11,48 +10,16 @@ export interface INSModalProps extends IBaseComponentProps
|
|
|
11
10
|
description?: string;
|
|
12
11
|
show: boolean;
|
|
13
12
|
children?: React.ReactNode;
|
|
14
|
-
|
|
15
|
-
export interface INSModalState
|
|
16
|
-
{
|
|
17
|
-
closeModal: boolean;
|
|
18
|
-
visibilityClassNames: string;
|
|
13
|
+
onClose: () => void;
|
|
19
14
|
}
|
|
20
15
|
export function NSModal(props: INSModalProps)
|
|
21
16
|
{
|
|
22
|
-
|
|
23
|
-
closeModal: false,
|
|
24
|
-
visibilityClassNames: ""
|
|
25
|
-
});
|
|
26
|
-
|
|
27
|
-
const closeModalHandler = (): void =>
|
|
28
|
-
{
|
|
29
|
-
setState(prevState =>
|
|
30
|
-
({
|
|
31
|
-
...prevState, closeModal: !state.closeModal
|
|
32
|
-
}));
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
let classNames: string;
|
|
36
|
-
const modalVisibilityClassName = (): string =>
|
|
37
|
-
{
|
|
38
|
-
if (state.closeModal && !props.show)
|
|
39
|
-
classNames = `${Styles.ns_hide}`
|
|
40
|
-
else if (!state.closeModal && props.show)
|
|
41
|
-
classNames = `${Styles.ns_show}`
|
|
42
|
-
else if (state.closeModal && props.show)
|
|
43
|
-
classNames = `${Styles.ns_hide}`
|
|
44
|
-
return classNames;
|
|
45
|
-
}
|
|
46
|
-
// show -> true va close -> false --> show
|
|
47
|
-
// show -> false va close -> true --> hiden
|
|
48
|
-
let modalClassNames: string = modalVisibilityClassName();
|
|
49
|
-
|
|
17
|
+
console.log(props, props.show ? Styles.ns_show : Styles.ns_hide);
|
|
50
18
|
return (
|
|
51
|
-
|
|
52
19
|
<section
|
|
53
|
-
onClick={
|
|
20
|
+
onClick={props.onClose}
|
|
54
21
|
id={props.id}
|
|
55
|
-
className={`${
|
|
22
|
+
className={`${props.show ? Styles.ns_show : Styles.ns_hide}
|
|
56
23
|
${Styles.ns_modal}
|
|
57
24
|
${props.classList?.join(" ")}`
|
|
58
25
|
}
|
|
@@ -60,11 +27,10 @@ export function NSModal(props: INSModalProps)
|
|
|
60
27
|
>
|
|
61
28
|
<div className={Styles.ns_modal_container}>
|
|
62
29
|
<NSButton
|
|
63
|
-
onClick={
|
|
30
|
+
onClick={props.onClose}
|
|
64
31
|
icon={{ src: "https://static.namirasoft.com/image/concept/close/blue.svg", alt: "close modal" }}
|
|
65
32
|
classList={[Styles.ns_close_modal]}
|
|
66
33
|
/>
|
|
67
|
-
|
|
68
34
|
<div className={Styles.ns_modal_content}>
|
|
69
35
|
{props.title &&
|
|
70
36
|
<>
|