namirasoft-site-react 1.3.79 → 1.3.80
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 +30 -2
- package/dist/App.js.map +1 -1
- package/dist/components/NSFooter.module.css +6 -3
- package/dist/components/NSInput.module.css +4 -8
- package/dist/components/NSInputSearch.js +2 -2
- package/dist/components/NSInputSearch.js.map +1 -1
- package/package.json +1 -1
- package/src/App.tsx +48 -1
- package/src/components/NSFooter.module.css +6 -3
- package/src/components/NSInput.module.css +4 -8
- package/src/components/NSInputSearch.tsx +2 -8
package/dist/App.js
CHANGED
|
@@ -1,8 +1,36 @@
|
|
|
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, NSTable } from './main';
|
|
5
5
|
export function App() {
|
|
6
|
-
|
|
6
|
+
let columns = {
|
|
7
|
+
"id": "ID",
|
|
8
|
+
"project": "Project",
|
|
9
|
+
"level": "Level",
|
|
10
|
+
"message": "Message",
|
|
11
|
+
"cent": "Cent",
|
|
12
|
+
"status": "Status",
|
|
13
|
+
};
|
|
14
|
+
let rows = [{
|
|
15
|
+
id: 1,
|
|
16
|
+
project: "Namirasoft Account",
|
|
17
|
+
level: "Debug",
|
|
18
|
+
message: "Lorem ipsum dolor sit amet, consetetur ",
|
|
19
|
+
cent: "26",
|
|
20
|
+
status: "pending"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
id: 2,
|
|
24
|
+
project: "Namirasoft Account",
|
|
25
|
+
level: "Debug",
|
|
26
|
+
message: "Lorem ipsum dolor sit amet, consetetur ",
|
|
27
|
+
cent: "24",
|
|
28
|
+
status: "Done"
|
|
29
|
+
}
|
|
30
|
+
];
|
|
31
|
+
function getCell(row, column) {
|
|
32
|
+
return row[column];
|
|
33
|
+
}
|
|
34
|
+
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("div", { children: _jsx(NSTable, { columns: columns, rows: rows, getCell: getCell, getColumnAttributes: () => { return {}; }, getRowKey: row => row.id.toString() }) }), _jsx(NSFooter, { name: 'Footer', scope: 'Namira Software Corporation', logo: 'https://static.namirasoft.com/image/namirasoft/site/logo/base.png' })] }));
|
|
7
35
|
}
|
|
8
36
|
//# 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,
|
|
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,OAAO,EAAE,MAAM,QAAQ,CAAC;AAErD,MAAM,UAAU,GAAG;IAEf,IAAI,OAAO,GAAG;QACV,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,SAAS;QACpB,OAAO,EAAE,OAAO;QAChB,SAAS,EAAE,SAAS;QACpB,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,QAAQ;KACrB,CAAA;IACD,IAAI,IAAI,GAAG,CAAC;YACR,EAAE,EAAE,CAAC;YACL,OAAO,EAAE,oBAAoB;YAC7B,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,yCAAyC;YAClD,IAAI,EAAE,IAAI;YACV,MAAM,EAAE,SAAS;SACpB;QACD;YACI,EAAE,EAAE,CAAC;YACL,OAAO,EAAE,oBAAoB;YAC7B,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,yCAAyC;YAClD,IAAI,EAAE,IAAI;YACV,MAAM,EAAE,MAAM;SACjB;KACA,CAAA;IAUD,SAAS,OAAO,CAAC,GAAQ,EAAE,MAAc;QAErC,OAAQ,GAAW,CAAC,MAAM,CAAC,CAAC;IAChC,CAAC;IACD,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,wBACI,KAAC,OAAO,IACJ,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,mBAAmB,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,CAAA,CAAC,CAAC,EACxC,SAAS,EAAE,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAI,GAEzC,EACN,KAAC,QAAQ,IAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,6BAA6B,EAAC,IAAI,EAAC,mEAAmE,GAAG,IACxI,CACN,CAAC;AACN,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
.ns_footer {
|
|
2
2
|
width: 100%;
|
|
3
|
-
background-color:
|
|
3
|
+
background-color: rgba(20, 27, 92, 1);
|
|
4
4
|
padding: 16px 0 8px 0;
|
|
5
5
|
display: flex;
|
|
6
6
|
justify-content: center;
|
|
@@ -50,17 +50,20 @@
|
|
|
50
50
|
font-weight: 600;
|
|
51
51
|
line-height: normal;
|
|
52
52
|
}
|
|
53
|
-
|
|
53
|
+
|
|
54
|
+
.ns_footer_list_title {
|
|
54
55
|
border-bottom: solid 2px #fff;
|
|
55
56
|
margin-bottom: 8px;
|
|
56
57
|
display: block;
|
|
57
58
|
}
|
|
59
|
+
|
|
58
60
|
.ns_footer_menu_container li {
|
|
59
61
|
font-size: 12px !important;
|
|
60
62
|
font-weight: 300 !important;
|
|
61
63
|
margin-bottom: 8px;
|
|
62
64
|
}
|
|
63
|
-
|
|
65
|
+
|
|
66
|
+
.ns_footer_menu_container li a {
|
|
64
67
|
text-decoration: none;
|
|
65
68
|
color: #fff;
|
|
66
69
|
}
|
|
@@ -15,16 +15,12 @@
|
|
|
15
15
|
border: 1px solid rgba(47, 0, 236, 0.6) !important;
|
|
16
16
|
max-width: 100%;
|
|
17
17
|
height: max-content !important;
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
color:#000 !important
|
|
18
|
+
background: no-repeat 95% center rgba(255, 255, 255, 1);
|
|
19
|
+
|
|
21
20
|
}
|
|
22
21
|
|
|
23
|
-
.
|
|
24
|
-
|
|
25
|
-
right: 20px;
|
|
26
|
-
top: 12px;
|
|
27
|
-
z-index: 1;
|
|
22
|
+
.ns_input li {
|
|
23
|
+
color: #000 !important
|
|
28
24
|
}
|
|
29
25
|
|
|
30
26
|
.ns_input_title {
|
|
@@ -2,9 +2,9 @@
|
|
|
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 "./NSInput.module.css";
|
|
5
|
-
import IconInputSearch from '../assets/images/icon-input-search.svg';
|
|
6
5
|
import { Validator } from "../Validator";
|
|
7
6
|
import { NSInputErrorNotifier } from "./NSInputErrorNotifier";
|
|
7
|
+
import Background from '../assets/images/icon-input-search.svg';
|
|
8
8
|
export class NSInputSearch extends React.Component {
|
|
9
9
|
constructor(props) {
|
|
10
10
|
var _a;
|
|
@@ -37,7 +37,7 @@ export class NSInputSearch extends React.Component {
|
|
|
37
37
|
}
|
|
38
38
|
render() {
|
|
39
39
|
var _a;
|
|
40
|
-
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("
|
|
40
|
+
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: "text", className: Styles.ns_input, placeholder: this.props.placeholder, style: { backgroundImage: `url(${Background})` } })] }), _jsx(NSInputErrorNotifier, { error: this.state.error })] }));
|
|
41
41
|
}
|
|
42
42
|
}
|
|
43
43
|
//# sourceMappingURL=NSInputSearch.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NSInputSearch.js","sourceRoot":"","sources":["../../src/components/NSInputSearch.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"NSInputSearch.js","sourceRoot":"","sources":["../../src/components/NSInputSearch.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/src/App.tsx
CHANGED
|
@@ -1,9 +1,47 @@
|
|
|
1
1
|
import './App.css';
|
|
2
2
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
|
3
|
-
import { NSFooter, NSHeader
|
|
3
|
+
import { NSFooter, NSHeader, NSTable } from './main';
|
|
4
4
|
|
|
5
5
|
export function App()
|
|
6
6
|
{
|
|
7
|
+
let columns = {
|
|
8
|
+
"id": "ID",
|
|
9
|
+
"project": "Project",
|
|
10
|
+
"level": "Level",
|
|
11
|
+
"message": "Message",
|
|
12
|
+
"cent": "Cent",
|
|
13
|
+
"status": "Status",
|
|
14
|
+
}
|
|
15
|
+
let rows = [{
|
|
16
|
+
id: 1,
|
|
17
|
+
project: "Namirasoft Account",
|
|
18
|
+
level: "Debug",
|
|
19
|
+
message: "Lorem ipsum dolor sit amet, consetetur ",
|
|
20
|
+
cent: "26",
|
|
21
|
+
status: "pending"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
id: 2,
|
|
25
|
+
project: "Namirasoft Account",
|
|
26
|
+
level: "Debug",
|
|
27
|
+
message: "Lorem ipsum dolor sit amet, consetetur ",
|
|
28
|
+
cent: "24",
|
|
29
|
+
status: "Done"
|
|
30
|
+
}
|
|
31
|
+
]
|
|
32
|
+
interface Row
|
|
33
|
+
{
|
|
34
|
+
id: number,
|
|
35
|
+
project: string,
|
|
36
|
+
level: string,
|
|
37
|
+
message: string,
|
|
38
|
+
cent: string,
|
|
39
|
+
status: string
|
|
40
|
+
}
|
|
41
|
+
function getCell(row: Row, column: string): any
|
|
42
|
+
{
|
|
43
|
+
return (row as any)[column];
|
|
44
|
+
}
|
|
7
45
|
return (
|
|
8
46
|
<>
|
|
9
47
|
<NSHeader
|
|
@@ -13,6 +51,15 @@ export function App()
|
|
|
13
51
|
account={false}
|
|
14
52
|
style={{ backgroundColor: "transparent !important" }}
|
|
15
53
|
/>
|
|
54
|
+
<div>
|
|
55
|
+
<NSTable
|
|
56
|
+
columns={columns}
|
|
57
|
+
rows={rows}
|
|
58
|
+
getCell={getCell}
|
|
59
|
+
getColumnAttributes={() => { return {} }}
|
|
60
|
+
getRowKey={row => row.id.toString()} />
|
|
61
|
+
|
|
62
|
+
</div>
|
|
16
63
|
<NSFooter name='Footer' scope='Namira Software Corporation' logo='https://static.namirasoft.com/image/namirasoft/site/logo/base.png' />
|
|
17
64
|
</>
|
|
18
65
|
);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
.ns_footer {
|
|
2
2
|
width: 100%;
|
|
3
|
-
background-color:
|
|
3
|
+
background-color: rgba(20, 27, 92, 1);
|
|
4
4
|
padding: 16px 0 8px 0;
|
|
5
5
|
display: flex;
|
|
6
6
|
justify-content: center;
|
|
@@ -50,17 +50,20 @@
|
|
|
50
50
|
font-weight: 600;
|
|
51
51
|
line-height: normal;
|
|
52
52
|
}
|
|
53
|
-
|
|
53
|
+
|
|
54
|
+
.ns_footer_list_title {
|
|
54
55
|
border-bottom: solid 2px #fff;
|
|
55
56
|
margin-bottom: 8px;
|
|
56
57
|
display: block;
|
|
57
58
|
}
|
|
59
|
+
|
|
58
60
|
.ns_footer_menu_container li {
|
|
59
61
|
font-size: 12px !important;
|
|
60
62
|
font-weight: 300 !important;
|
|
61
63
|
margin-bottom: 8px;
|
|
62
64
|
}
|
|
63
|
-
|
|
65
|
+
|
|
66
|
+
.ns_footer_menu_container li a {
|
|
64
67
|
text-decoration: none;
|
|
65
68
|
color: #fff;
|
|
66
69
|
}
|
|
@@ -15,16 +15,12 @@
|
|
|
15
15
|
border: 1px solid rgba(47, 0, 236, 0.6) !important;
|
|
16
16
|
max-width: 100%;
|
|
17
17
|
height: max-content !important;
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
color:#000 !important
|
|
18
|
+
background: no-repeat 95% center rgba(255, 255, 255, 1);
|
|
19
|
+
|
|
21
20
|
}
|
|
22
21
|
|
|
23
|
-
.
|
|
24
|
-
|
|
25
|
-
right: 20px;
|
|
26
|
-
top: 12px;
|
|
27
|
-
z-index: 1;
|
|
22
|
+
.ns_input li {
|
|
23
|
+
color: #000 !important
|
|
28
24
|
}
|
|
29
25
|
|
|
30
26
|
.ns_input_title {
|
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
import React from "react";
|
|
4
4
|
import Styles from "./NSInput.module.css";
|
|
5
|
-
import IconInputSearch from '../assets/images/icon-input-search.svg';
|
|
6
5
|
import { IBaseComponentProps } from "../props/IBaseComponentProps";
|
|
7
6
|
import { IValidationProps } from "../props/IValidationProps";
|
|
8
7
|
import { IValidationStringProps } from "../props/IValidationStringProps";
|
|
9
8
|
import { Validator } from "../Validator";
|
|
10
9
|
import { NSInputErrorNotifier } from "./NSInputErrorNotifier";
|
|
10
|
+
import Background from '../assets/images/icon-input-search.svg';
|
|
11
11
|
|
|
12
12
|
export interface INSInputSearchProps extends IBaseComponentProps, IValidationProps, IValidationStringProps
|
|
13
13
|
{
|
|
@@ -67,13 +67,6 @@ export class NSInputSearch extends React.Component<INSInputSearchProps, NSInputS
|
|
|
67
67
|
<>
|
|
68
68
|
<div className={`${Styles.ns_input_parent} p-2 ${this.props.classList?.join(" ")}`} style={this.props.style}>
|
|
69
69
|
<span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
|
|
70
|
-
<img
|
|
71
|
-
className={Styles.ns_input_icon}
|
|
72
|
-
src={IconInputSearch}
|
|
73
|
-
alt="Search Icon"
|
|
74
|
-
width={24}
|
|
75
|
-
height={24}
|
|
76
|
-
/>
|
|
77
70
|
<input
|
|
78
71
|
id={this.props.id}
|
|
79
72
|
value={this.state.value}
|
|
@@ -81,6 +74,7 @@ export class NSInputSearch extends React.Component<INSInputSearchProps, NSInputS
|
|
|
81
74
|
type="text"
|
|
82
75
|
className={Styles.ns_input}
|
|
83
76
|
placeholder={this.props.placeholder}
|
|
77
|
+
style={{ backgroundImage: `url(${Background})` }}
|
|
84
78
|
/>
|
|
85
79
|
</div>
|
|
86
80
|
<NSInputErrorNotifier error={this.state.error} />
|