namirasoft-site-react 1.3.75 → 1.3.76
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 +2 -2
- package/dist/App.js.map +1 -1
- package/dist/components/NSInputDate.js +1 -2
- package/dist/components/NSInputDate.js.map +1 -1
- package/dist/components/NSInputDate.module.css +5 -3
- package/dist/components/NSSelectBox.d.ts +3 -2
- package/dist/components/NSSelectBox.js +23 -12
- package/dist/components/NSSelectBox.js.map +1 -1
- package/dist/components/NSTable.d.ts +3 -0
- package/dist/components/NSTable.js +8 -1
- package/dist/components/NSTable.js.map +1 -1
- package/package.json +4 -4
- package/src/App.tsx +3 -1
- package/src/components/NSInputDate.module.css +5 -3
- package/src/components/NSInputDate.tsx +0 -8
- package/src/components/NSSelectBox.tsx +29 -15
- package/src/components/NSTable.tsx +10 -1
package/dist/App.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import './App.css';
|
|
3
3
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
|
4
|
-
import { NSFooter, NSHeader } from './main';
|
|
4
|
+
import { NSFooter, NSHeader, NSInputDate } from './main';
|
|
5
5
|
export function App() {
|
|
6
|
-
return (_jsxs(_Fragment, { children: [_jsx(NSHeader, { name: 'Header', scope: 'Namira Software Corporation', logo: 'https://static.namirasoft.com/image/namirasoft/site/logo/base.png', account: false, style: { backgroundColor: "transparent !important" } }), _jsx(NSFooter, { name: 'Footer', scope: 'Namira Software Corporation', logo: 'https://static.namirasoft.com/image/namirasoft/site/logo/base.png' })] }));
|
|
6
|
+
return (_jsxs(_Fragment, { children: [_jsx(NSHeader, { name: 'Header', scope: 'Namira Software Corporation', logo: 'https://static.namirasoft.com/image/namirasoft/site/logo/base.png', account: false, style: { backgroundColor: "transparent !important" } }), _jsx(NSInputDate, { title: "test", required: true }), _jsx(NSFooter, { name: 'Footer', scope: 'Namira Software Corporation', logo: 'https://static.namirasoft.com/image/namirasoft/site/logo/base.png' })] }));
|
|
7
7
|
}
|
|
8
8
|
//# sourceMappingURL=App.js.map
|
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,QAAQ,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW,CAAC;AACnB,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAEzD,MAAM,UAAU,GAAG;IAEf,OAAO,CACH,8BACI,KAAC,QAAQ,IACL,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,6BAA6B,EACnC,IAAI,EAAC,mEAAmE,EACxE,OAAO,EAAE,KAAK,EACd,KAAK,EAAE,EAAE,eAAe,EAAE,wBAAwB,EAAE,GACtD,EACF,KAAC,WAAW,IAAC,KAAK,EAAC,MAAM,EAAC,QAAQ,EAAE,IAAI,GAAG,EAE3C,KAAC,QAAQ,IAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,6BAA6B,EAAC,IAAI,EAAC,mEAAmE,GAAG,IACxI,CACN,CAAC;AACN,CAAC"}
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
3
|
import React from "react";
|
|
4
4
|
import Styles from "./NSInputDate.module.css";
|
|
5
|
-
import IconInputDate from '../assets/images/icon-input-date.svg';
|
|
6
5
|
import { NSInputErrorNotifier } from "./NSInputErrorNotifier";
|
|
7
6
|
import { Validator } from "../Validator";
|
|
8
7
|
export class NSInputDate extends React.Component {
|
|
@@ -36,7 +35,7 @@ export class NSInputDate extends React.Component {
|
|
|
36
35
|
}
|
|
37
36
|
render() {
|
|
38
37
|
var _a;
|
|
39
|
-
return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${Styles.ns_input_parent} p-2 ${(_a = this.props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: this.props.style, children: [_jsxs("span", { className: Styles.ns_input_title, children: [" ", this.props.required && _jsx("span", { style: { color: "red" }, children: "*" }), " ", this.props.title, " "] }), _jsx("
|
|
38
|
+
return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${Styles.ns_input_parent} p-2 ${(_a = this.props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: this.props.style, children: [_jsxs("span", { className: Styles.ns_input_title, children: [" ", this.props.required && _jsx("span", { style: { color: "red" }, children: "*" }), " ", this.props.title, " "] }), _jsx("input", { id: this.props.id, value: this.state.value, onChange: this.onChanged, type: "date", className: Styles.ns_input, placeholder: this.props.placeholder, onClick: () => { } })] }), _jsx(NSInputErrorNotifier, { error: this.state.error })] }));
|
|
40
39
|
}
|
|
41
40
|
}
|
|
42
41
|
//# sourceMappingURL=NSInputDate.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NSInputDate.js","sourceRoot":"","sources":["../../src/components/NSInputDate.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"NSInputDate.js","sourceRoot":"","sources":["../../src/components/NSInputDate.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAE9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAgBzC,MAAM,OAAO,WAAY,SAAQ,KAAK,CAAC,SAA8C;IAEjF,YAAY,KAAwB;;QAEhC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAE,KAAK,EAAE,MAAA,KAAK,CAAC,YAAY,mCAAI,EAAE,EAAE,CAAC;QACjD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACzC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACzC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/C,CAAC;IACD,QAAQ;QAEJ,OAAO,CACH,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC;YAClE,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAC7D,CAAC;IACN,CAAC;IACD,QAAQ;QAEJ,IAAI,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC5B,IAAI,KAAK,EACT;YACI,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;YACzB,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;SAC1B;QACD,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;IAC5B,CAAC;IACD,QAAQ,CAAC,KAAa;QAElB,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAC7B,CAAC;IACO,SAAS,CAAC,CAAsC;QAEpD,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS;YACpB,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAChC,CAAC;IACQ,MAAM;;QAEX,OAAO,CACH,8BACI,eAAK,SAAS,EAAE,GAAG,MAAM,CAAC,eAAe,QAAQ,MAAA,IAAI,CAAC,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,aACvG,gBAAM,SAAS,EAAE,MAAM,CAAC,cAAc,kBAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,eAAM,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,kBAAW,OAAG,IAAI,CAAC,KAAK,CAAC,KAAK,SAAS,EACrI,gBACI,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,QAAQ,EAAE,IAAI,CAAC,SAAS,EACxB,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,MAAM,CAAC,QAAQ,EAC1B,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,EACnC,OAAO,EAAE,GAAG,EAAE,GAAG,CAAC,GACpB,IACA,EACN,KAAC,oBAAoB,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAI,IAClD,CACN,CAAC;IACN,CAAC;CACJ"}
|
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
font-size: 16px;
|
|
15
15
|
font-weight: 400;
|
|
16
16
|
border: 1px solid rgba(47, 0, 236, 0.6);
|
|
17
|
+
position: relative;
|
|
17
18
|
}
|
|
18
19
|
|
|
19
20
|
.ns_input_icon {
|
|
@@ -31,9 +32,10 @@
|
|
|
31
32
|
.ns_input::-webkit-calendar-picker-indicator {
|
|
32
33
|
display: block;
|
|
33
34
|
background: url(../assets/images/icon-input-date.svg) no-repeat;
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
35
|
+
background-position: 90% 35% ;
|
|
36
|
+
width: 100%;
|
|
37
|
+
height: 100%;
|
|
38
|
+
position: absolute;
|
|
37
39
|
top: 3px;
|
|
38
40
|
left: 4px;
|
|
39
41
|
}
|
|
@@ -14,10 +14,11 @@ export interface NSSelectBoxState {
|
|
|
14
14
|
}
|
|
15
15
|
export declare class NSSelectBox extends React.Component<INSSelectBoxProps, NSSelectBoxState> {
|
|
16
16
|
constructor(props: INSSelectBoxProps);
|
|
17
|
-
getError(): string | null;
|
|
17
|
+
getError(value: string): string | null;
|
|
18
18
|
getValue(): string | null;
|
|
19
|
-
setValue(value: string | null): void;
|
|
20
19
|
getValues(): string[];
|
|
20
|
+
setValue(value: string | null): void;
|
|
21
21
|
setValues(values: string[]): void;
|
|
22
|
+
handleChange(value: string | null | string[]): void;
|
|
22
23
|
render(): import("react/jsx-runtime").JSX.Element;
|
|
23
24
|
}
|
|
@@ -17,34 +17,45 @@ export class NSSelectBox extends React.Component {
|
|
|
17
17
|
this.setValues = this.setValues.bind(this);
|
|
18
18
|
this.setValue = this.setValue.bind(this);
|
|
19
19
|
this.getValue = this.getValue.bind(this);
|
|
20
|
+
this.handleChange = this.handleChange.bind(this);
|
|
20
21
|
}
|
|
21
|
-
getError() {
|
|
22
|
-
return (Validator.getError(this.props.title,
|
|
22
|
+
getError(value) {
|
|
23
|
+
return (Validator.getError(this.props.title, value, this.props));
|
|
23
24
|
}
|
|
24
25
|
getValue() {
|
|
25
|
-
let error = this.getError();
|
|
26
|
+
let error = this.getError(this.state.value || "");
|
|
26
27
|
if (error) {
|
|
27
28
|
this.setState({ error });
|
|
28
29
|
throw new Error(error);
|
|
29
30
|
}
|
|
30
31
|
return this.state.value;
|
|
31
32
|
}
|
|
32
|
-
setValue(value) {
|
|
33
|
-
this.setState({ value });
|
|
34
|
-
}
|
|
35
33
|
getValues() {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
34
|
+
this.state.values.forEach(value => {
|
|
35
|
+
let error = this.getError(value || "");
|
|
36
|
+
if (error) {
|
|
37
|
+
this.setState({ error });
|
|
38
|
+
throw new Error(error);
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
41
|
return this.state.values;
|
|
42
42
|
}
|
|
43
|
+
setValue(value) {
|
|
44
|
+
this.setState({ value });
|
|
45
|
+
}
|
|
43
46
|
setValues(values) {
|
|
44
47
|
this.setState({ values });
|
|
45
48
|
}
|
|
49
|
+
handleChange(value) {
|
|
50
|
+
if (this.props.multiple) {
|
|
51
|
+
this.setValues(value);
|
|
52
|
+
}
|
|
53
|
+
else {
|
|
54
|
+
this.setValue(value);
|
|
55
|
+
}
|
|
56
|
+
}
|
|
46
57
|
render() {
|
|
47
|
-
return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${Styles.ns_input_parent} p-2`, children: [_jsxs("span", { className: Styles.ns_input_title, children: [" ", this.props.required && _jsx("span", { style: { color: "red" }, children: "*" }), " ", this.props.title, " "] }), _jsx(Select, { mode: this.props.multiple ? "multiple" : undefined, style: { width: '100%' }, className: Styles.ns_input_select, placeholder: "Combo Box", onChange: this.
|
|
58
|
+
return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${Styles.ns_input_parent} p-2`, children: [_jsxs("span", { className: Styles.ns_input_title, children: [" ", this.props.required && _jsx("span", { style: { color: "red" }, children: "*" }), " ", this.props.title, " "] }), _jsx(Select, { mode: this.props.multiple ? "multiple" : undefined, style: { width: '100%' }, className: Styles.ns_input_select, placeholder: "Combo Box", onChange: this.handleChange, optionLabelProp: "label", options: this.props.options, optionRender: (option) => (_jsx(Space, { className: Styles.ns_input_select_option, children: option.data.desc })), suffixIcon: _jsx("img", { src: IconSelectBox, alt: "SelectBox Icon" }) })] }), _jsx(NSInputErrorNotifier, { error: this.state.error })] }));
|
|
48
59
|
}
|
|
49
60
|
}
|
|
50
61
|
//# sourceMappingURL=NSSelectBox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NSSelectBox.js","sourceRoot":"","sources":["../../src/components/NSSelectBox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,MAAM,CAAC;AAErC,OAAO,aAAa,MAAM,sCAAsC,CAAC;AAGjE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAgB9D,MAAM,OAAO,WAAY,SAAQ,KAAK,CAAC,SAA8C;IAEjF,YAAY,KAAwB;QAEhC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG;YACT,KAAK,EAAE,IAAI;YACX,MAAM,EAAE,EAAE;SACb,CAAC;QACF,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC3C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC3C,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACzC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"NSSelectBox.js","sourceRoot":"","sources":["../../src/components/NSSelectBox.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { NSInputSearch } from './NSInputSearch';
|
|
1
2
|
import { Component } from 'react';
|
|
2
3
|
import { IBaseComponentProps } from "../props/IBaseComponentProps";
|
|
3
4
|
export interface INSTableProps<RowType> extends IBaseComponentProps {
|
|
@@ -19,10 +20,12 @@ export interface NSTableState<RowType> {
|
|
|
19
20
|
modalState: boolean;
|
|
20
21
|
}
|
|
21
22
|
export declare class NSTable<RowType> extends Component<INSTableProps<RowType>, NSTableState<RowType>> {
|
|
23
|
+
NSInputSearch_Search: import("react").RefObject<NSInputSearch>;
|
|
22
24
|
constructor(props: INSTableProps<RowType>);
|
|
23
25
|
setColumns(columns: {
|
|
24
26
|
[key: string]: string;
|
|
25
27
|
}): void;
|
|
26
28
|
setRows(rows: RowType[]): void;
|
|
29
|
+
getValueInputSearch(): string | undefined;
|
|
27
30
|
render(): import("react/jsx-runtime").JSX.Element;
|
|
28
31
|
}
|
|
@@ -6,9 +6,11 @@ import { NSPagination } from './NSPagination';
|
|
|
6
6
|
import { NSSpace, NSSpaceSizeType } from './NSSpace';
|
|
7
7
|
import Styles from './NSTable.module.css';
|
|
8
8
|
import { Component } from 'react';
|
|
9
|
+
import { useRef } from "react";
|
|
9
10
|
export class NSTable extends Component {
|
|
10
11
|
constructor(props) {
|
|
11
12
|
super(props);
|
|
13
|
+
this.NSInputSearch_Search = useRef(null);
|
|
12
14
|
this.state = { columns: props.columns, rows: props.rows, modalState: false };
|
|
13
15
|
}
|
|
14
16
|
setColumns(columns) {
|
|
@@ -17,6 +19,11 @@ export class NSTable extends Component {
|
|
|
17
19
|
setRows(rows) {
|
|
18
20
|
this.setState({ rows });
|
|
19
21
|
}
|
|
22
|
+
getValueInputSearch() {
|
|
23
|
+
var _a, _b;
|
|
24
|
+
console.log((_a = this.NSInputSearch_Search.current) === null || _a === void 0 ? void 0 : _a.getValue());
|
|
25
|
+
return (_b = this.NSInputSearch_Search.current) === null || _b === void 0 ? void 0 : _b.getValue();
|
|
26
|
+
}
|
|
20
27
|
render() {
|
|
21
28
|
var _a;
|
|
22
29
|
let column_keys = Object.keys(this.state.columns);
|
|
@@ -30,7 +37,7 @@ export class NSTable extends Component {
|
|
|
30
37
|
return this.props.getCell(row, column, rowIndex, columnIndex);
|
|
31
38
|
return row[column];
|
|
32
39
|
};
|
|
33
|
-
return (_jsxs("div", { id: this.props.id, className: `container ${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, { title: '', required: false }) }), _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: () => this.setState({ modalState: !this.state.modalState }), children: column_keys.map((column, columnIndex) => (_jsx("td", Object.assign({}, getColumnAttributes(column, columnIndex), { "data-label": `${this.state.columns[column]} : `, 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)' } }), _jsx(NSButton, { title: 'Refresh', icon: { src: "/assets/images/export-vector.png" }, onClick: () => { }, style: { border: '1px solid rgba(3, 119, 255, 1)' } })] })] }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsxs("section", { onClick: () => this.setState({ modalState: !this.state.modalState }), className: Styles.ns_modal, style: { display: this.state.modalState ? "block" : "none" }, children: [_jsx("a", { children: _jsx("img", { src: '/assets/images/close-vector.png' }) }), _jsx("p", { children: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur vitae diam non enim vestibulum interdum. Duis condimentum augue id magna semper rutrum. Nullam sit amet magna in magna gravida vehicula. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Mauris dictum facilisis augue. Phasellus faucibus molestie nisl. Aliquam ante. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. In convallis. Phasellus rhoncus.." })] })] }));
|
|
40
|
+
return (_jsxs("div", { id: this.props.id, className: `container ${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, { title: '', required: false, ref: this.NSInputSearch_Search }) }), _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: () => this.setState({ modalState: !this.state.modalState }), children: column_keys.map((column, columnIndex) => (_jsx("td", Object.assign({}, getColumnAttributes(column, columnIndex), { "data-label": `${this.state.columns[column]} : `, 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)' } }), _jsx(NSButton, { title: 'Refresh', icon: { src: "/assets/images/export-vector.png" }, onClick: () => { }, style: { border: '1px solid rgba(3, 119, 255, 1)' } })] })] }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsxs("section", { onClick: () => this.setState({ modalState: !this.state.modalState }), className: Styles.ns_modal, style: { display: this.state.modalState ? "block" : "none" }, children: [_jsx("a", { children: _jsx("img", { src: '/assets/images/close-vector.png' }) }), _jsx("p", { children: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur vitae diam non enim vestibulum interdum. Duis condimentum augue id magna semper rutrum. Nullam sit amet magna in magna gravida vehicula. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Mauris dictum facilisis augue. Phasellus faucibus molestie nisl. Aliquam ante. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. In convallis. Phasellus rhoncus.." })] })] }));
|
|
34
41
|
}
|
|
35
42
|
}
|
|
36
43
|
//# sourceMappingURL=NSTable.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NSTable.js","sourceRoot":"","sources":["../../src/components/NSTable.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AACrD,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"NSTable.js","sourceRoot":"","sources":["../../src/components/NSTable.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"framework": "npm",
|
|
9
9
|
"application": "package",
|
|
10
10
|
"private": false,
|
|
11
|
-
"version": "1.3.
|
|
11
|
+
"version": "1.3.76",
|
|
12
12
|
"author": "Amir Abolhasani, Alireza Esmaeeli, Sepideh Mazloumi, Hooman Shashaeh",
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"main": "./dist/main.js",
|
|
@@ -24,11 +24,11 @@
|
|
|
24
24
|
"@types/node": "^20.12.7",
|
|
25
25
|
"@types/react": "^18.2.79",
|
|
26
26
|
"@types/react-dom": "^18.2.25",
|
|
27
|
-
"antd": "^5.16.
|
|
27
|
+
"antd": "^5.16.4",
|
|
28
28
|
"bootstrap": "^5.3.3",
|
|
29
29
|
"copyfiles": "^2.4.1",
|
|
30
30
|
"link-react": "^3.0.0",
|
|
31
|
-
"namirasoft-api-link": "^1.3.
|
|
31
|
+
"namirasoft-api-link": "^1.3.3",
|
|
32
32
|
"namirasoft-core": "^1.3.19",
|
|
33
33
|
"path-browserify": "^1.0.1",
|
|
34
34
|
"react": "^18.2.0",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"react-bootstrap": "^2.10.2",
|
|
37
37
|
"react-dom": "^18.2.0",
|
|
38
38
|
"react-phone-input-2": "^2.15.1",
|
|
39
|
-
"react-phone-number-input": "^3.
|
|
39
|
+
"react-phone-number-input": "^3.4.0",
|
|
40
40
|
"react-router-dom": "^6.22.3",
|
|
41
41
|
"react-scripts": "5.0.1"
|
|
42
42
|
},
|
package/src/App.tsx
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './App.css';
|
|
2
2
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
|
3
|
-
import { NSFooter, NSHeader } from './main';
|
|
3
|
+
import { NSFooter, NSHeader, NSInputDate } from './main';
|
|
4
4
|
|
|
5
5
|
export function App()
|
|
6
6
|
{
|
|
@@ -13,6 +13,8 @@ export function App()
|
|
|
13
13
|
account={false}
|
|
14
14
|
style={{ backgroundColor: "transparent !important" }}
|
|
15
15
|
/>
|
|
16
|
+
<NSInputDate title="test" required={true}/>
|
|
17
|
+
|
|
16
18
|
<NSFooter name='Footer' scope='Namira Software Corporation' logo='https://static.namirasoft.com/image/namirasoft/site/logo/base.png' />
|
|
17
19
|
</>
|
|
18
20
|
);
|
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
font-size: 16px;
|
|
15
15
|
font-weight: 400;
|
|
16
16
|
border: 1px solid rgba(47, 0, 236, 0.6);
|
|
17
|
+
position: relative;
|
|
17
18
|
}
|
|
18
19
|
|
|
19
20
|
.ns_input_icon {
|
|
@@ -31,9 +32,10 @@
|
|
|
31
32
|
.ns_input::-webkit-calendar-picker-indicator {
|
|
32
33
|
display: block;
|
|
33
34
|
background: url(../assets/images/icon-input-date.svg) no-repeat;
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
35
|
+
background-position: 90% 35% ;
|
|
36
|
+
width: 100%;
|
|
37
|
+
height: 100%;
|
|
38
|
+
position: absolute;
|
|
37
39
|
top: 3px;
|
|
38
40
|
left: 4px;
|
|
39
41
|
}
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
import React from "react";
|
|
4
4
|
import Styles from "./NSInputDate.module.css";
|
|
5
|
-
import IconInputDate from '../assets/images/icon-input-date.svg';
|
|
6
5
|
import { IBaseComponentProps } from "../props/IBaseComponentProps";
|
|
7
6
|
import { NSInputErrorNotifier } from "./NSInputErrorNotifier";
|
|
8
7
|
import { IValidationProps } from "../props/IValidationProps";
|
|
@@ -65,13 +64,6 @@ export class NSInputDate extends React.Component<INSInputDateProps, NSInputDateS
|
|
|
65
64
|
<>
|
|
66
65
|
<div className={`${Styles.ns_input_parent} p-2 ${this.props.classList?.join(" ")}`} style={this.props.style}>
|
|
67
66
|
<span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
|
|
68
|
-
<img
|
|
69
|
-
className={Styles.ns_input_icon}
|
|
70
|
-
src={IconInputDate}
|
|
71
|
-
alt="Date Icon"
|
|
72
|
-
width={24}
|
|
73
|
-
height={24}
|
|
74
|
-
/>
|
|
75
67
|
<input
|
|
76
68
|
id={this.props.id}
|
|
77
69
|
value={this.state.value}
|
|
@@ -13,7 +13,7 @@ export interface INSSelectBoxProps extends IBaseComponentProps, IValidationProps
|
|
|
13
13
|
{
|
|
14
14
|
title: string;
|
|
15
15
|
options: SelectProps['options'];
|
|
16
|
-
multiple:boolean;
|
|
16
|
+
multiple: boolean;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
export interface NSSelectBoxState
|
|
@@ -36,16 +36,17 @@ export class NSSelectBox extends React.Component<INSSelectBoxProps, NSSelectBoxS
|
|
|
36
36
|
this.setValues = this.setValues.bind(this);
|
|
37
37
|
this.setValue = this.setValue.bind(this);
|
|
38
38
|
this.getValue = this.getValue.bind(this);
|
|
39
|
+
this.handleChange = this.handleChange.bind(this);
|
|
39
40
|
}
|
|
40
|
-
getError(): string | null
|
|
41
|
+
getError(value: string): string | null
|
|
41
42
|
{
|
|
42
43
|
return (
|
|
43
|
-
Validator.getError(this.props.title,
|
|
44
|
+
Validator.getError(this.props.title, value, this.props)
|
|
44
45
|
);
|
|
45
46
|
}
|
|
46
47
|
getValue(): string | null
|
|
47
48
|
{
|
|
48
|
-
let error = this.getError();
|
|
49
|
+
let error = this.getError(this.state.value || "");
|
|
49
50
|
if (error)
|
|
50
51
|
{
|
|
51
52
|
this.setState({ error });
|
|
@@ -53,24 +54,37 @@ export class NSSelectBox extends React.Component<INSSelectBoxProps, NSSelectBoxS
|
|
|
53
54
|
}
|
|
54
55
|
return this.state.value;
|
|
55
56
|
}
|
|
56
|
-
setValue(value: string | null): void
|
|
57
|
-
{
|
|
58
|
-
this.setState({ value });
|
|
59
|
-
}
|
|
60
57
|
getValues(): string[]
|
|
61
58
|
{
|
|
62
|
-
|
|
63
|
-
if (error)
|
|
59
|
+
this.state.values.forEach(value =>
|
|
64
60
|
{
|
|
65
|
-
this.
|
|
66
|
-
|
|
67
|
-
|
|
61
|
+
let error = this.getError(value || "");
|
|
62
|
+
if (error)
|
|
63
|
+
{
|
|
64
|
+
this.setState({ error });
|
|
65
|
+
throw new Error(error);
|
|
66
|
+
}
|
|
67
|
+
});
|
|
68
68
|
return this.state.values;
|
|
69
69
|
}
|
|
70
|
+
setValue(value: string | null): void
|
|
71
|
+
{
|
|
72
|
+
this.setState({ value });
|
|
73
|
+
}
|
|
70
74
|
setValues(values: string[]): void
|
|
71
75
|
{
|
|
72
76
|
this.setState({ values });
|
|
73
77
|
}
|
|
78
|
+
handleChange(value: string | null | string[]): void
|
|
79
|
+
{
|
|
80
|
+
if (this.props.multiple)
|
|
81
|
+
{
|
|
82
|
+
this.setValues(value as string[]);
|
|
83
|
+
} else
|
|
84
|
+
{
|
|
85
|
+
this.setValue(value as string | null);
|
|
86
|
+
}
|
|
87
|
+
}
|
|
74
88
|
override render()
|
|
75
89
|
{
|
|
76
90
|
return (
|
|
@@ -78,11 +92,11 @@ export class NSSelectBox extends React.Component<INSSelectBoxProps, NSSelectBoxS
|
|
|
78
92
|
<div className={`${Styles.ns_input_parent} p-2`}>
|
|
79
93
|
<span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
|
|
80
94
|
<Select
|
|
81
|
-
mode={this.props.multiple ? "multiple" : undefined}
|
|
95
|
+
mode={this.props.multiple ? "multiple" : undefined}
|
|
82
96
|
style={{ width: '100%' }}
|
|
83
97
|
className={Styles.ns_input_select}
|
|
84
98
|
placeholder="Combo Box"
|
|
85
|
-
onChange={this.
|
|
99
|
+
onChange={this.handleChange}
|
|
86
100
|
optionLabelProp="label"
|
|
87
101
|
options={this.props.options}
|
|
88
102
|
optionRender={(option) => (
|
|
@@ -7,6 +7,8 @@ import { NSSpace, NSSpaceSizeType } from './NSSpace';
|
|
|
7
7
|
import Styles from './NSTable.module.css';
|
|
8
8
|
import { Component } from 'react';
|
|
9
9
|
import { IBaseComponentProps } from "../props/IBaseComponentProps";
|
|
10
|
+
import { useRef } from "react";
|
|
11
|
+
|
|
10
12
|
|
|
11
13
|
export interface INSTableProps<RowType> extends IBaseComponentProps
|
|
12
14
|
{
|
|
@@ -26,6 +28,8 @@ export interface NSTableState<RowType>
|
|
|
26
28
|
|
|
27
29
|
export class NSTable<RowType> extends Component<INSTableProps<RowType>, NSTableState<RowType>>
|
|
28
30
|
{
|
|
31
|
+
NSInputSearch_Search = useRef<NSInputSearch>(null);
|
|
32
|
+
|
|
29
33
|
constructor(props: INSTableProps<RowType>)
|
|
30
34
|
{
|
|
31
35
|
super(props);
|
|
@@ -39,6 +43,11 @@ export class NSTable<RowType> extends Component<INSTableProps<RowType>, NSTableS
|
|
|
39
43
|
{
|
|
40
44
|
this.setState({ rows });
|
|
41
45
|
}
|
|
46
|
+
getValueInputSearch(): string | undefined
|
|
47
|
+
{
|
|
48
|
+
console.log(this.NSInputSearch_Search.current?.getValue())
|
|
49
|
+
return this.NSInputSearch_Search.current?.getValue()
|
|
50
|
+
}
|
|
42
51
|
override render()
|
|
43
52
|
{
|
|
44
53
|
let column_keys = Object.keys(this.state.columns);
|
|
@@ -59,7 +68,7 @@ export class NSTable<RowType> extends Component<INSTableProps<RowType>, NSTableS
|
|
|
59
68
|
className={`container ${Styles.ns_project_list_container} ${this.props.classList?.join(" ")}`}
|
|
60
69
|
style={this.props.style}>
|
|
61
70
|
<section className={Styles.ns_search_input}>
|
|
62
|
-
<NSInputSearch title='' required={false} />
|
|
71
|
+
<NSInputSearch title='' required={false} ref={this.NSInputSearch_Search} />
|
|
63
72
|
</section>
|
|
64
73
|
<NSSpace size={NSSpaceSizeType.SMALL} />
|
|
65
74
|
<table className={Styles.ns_table} >
|