namirasoft-site-react 1.4.213 → 1.4.215
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 +39 -31
- package/dist/App.js.map +1 -1
- package/dist/components/NSDialog.module.css +1 -0
- package/dist/components/NSTag.d.ts +0 -2
- package/dist/components/NSTag.js +15 -20
- package/dist/components/NSTag.js.map +1 -1
- package/dist/components/NSTag.module.css +0 -53
- package/package.json +1 -1
- package/src/App.tsx +32 -3
- package/src/components/NSDialog.module.css +1 -0
- package/src/components/NSTag.module.css +0 -53
- package/src/components/NSTag.tsx +29 -34
package/dist/App.js
CHANGED
|
@@ -13,9 +13,7 @@ import 'bootstrap/dist/css/bootstrap.min.css';
|
|
|
13
13
|
import { NSPanel } from './components/NSPanel';
|
|
14
14
|
import { NSSection } from './components/NSSection';
|
|
15
15
|
import { NSLayout } from './components/NSLayout';
|
|
16
|
-
import { NSBox } from './
|
|
17
|
-
import { NSBoxSchemaVariable } from './components/NSBoxSchemaVariable';
|
|
18
|
-
import { NSBoxString, NSFilterBox } from './main';
|
|
16
|
+
import { NSBox, NSBoxSchemaVariable, NSBoxString, NSColumn, NSFilterBox, NSRepeater, NSTag } from './main';
|
|
19
17
|
import { FilterItemColumnType } from 'namirasoft-core';
|
|
20
18
|
export function App() {
|
|
21
19
|
return (_jsx(_Fragment, { children: _jsx(NSLayout, { header: {
|
|
@@ -37,33 +35,43 @@ export function App() {
|
|
|
37
35
|
"t": [],
|
|
38
36
|
"x": []
|
|
39
37
|
}
|
|
40
|
-
}, children:
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
38
|
+
}, children: _jsxs(NSSection, { children: [_jsxs(NSPanel, { children: [_jsx(NSFilterBox, { getTables: () => {
|
|
39
|
+
return [{
|
|
40
|
+
name: "product",
|
|
41
|
+
text: "Product",
|
|
42
|
+
required: true,
|
|
43
|
+
columns: [{
|
|
44
|
+
name: "id",
|
|
45
|
+
text: "ID",
|
|
46
|
+
type: FilterItemColumnType.String,
|
|
47
|
+
}, {
|
|
48
|
+
name: "name",
|
|
49
|
+
text: "Name",
|
|
50
|
+
type: FilterItemColumnType.String,
|
|
51
|
+
}, {
|
|
52
|
+
name: "Title",
|
|
53
|
+
text: "Title",
|
|
54
|
+
type: FilterItemColumnType.String,
|
|
55
|
+
}]
|
|
56
|
+
}];
|
|
57
|
+
}, getMoreTables: () => __awaiter(this, void 0, void 0, function* () { return []; }), getData: (_, __, value) => __awaiter(this, void 0, void 0, function* () {
|
|
58
|
+
return new Promise(resolve => {
|
|
59
|
+
setTimeout(() => {
|
|
60
|
+
resolve(["Amir", "Negar", "Ilia", "Shahab", "Ali", "Hamed", "Hadi", "Leila", "Sahar", "Mehrad", "Ehsan"].filter(x => x.includes(value)));
|
|
61
|
+
}, 1000);
|
|
62
|
+
});
|
|
63
|
+
}) }), _jsx(NSBoxSchemaVariable, { required: true, title: 'NSBoxSchemaVariable', style: { width: NSBox.width.triple }, onChanged: (e) => {
|
|
64
|
+
console.log(JSON.stringify(e.getValue(false)));
|
|
65
|
+
} }), _jsx(NSBoxString, { required: true, title: '' })] }), _jsx(NSColumn, { children: _jsx(NSRepeater, { createItem: (_, lIndex, ref, onChange, onDelete, __, props) => {
|
|
66
|
+
return _jsx(NSTag, Object.assign({ ref: ref }, props, { onChanged: () => {
|
|
67
|
+
onChange();
|
|
68
|
+
}, onDeleted: () => {
|
|
69
|
+
onDelete === null || onDelete === void 0 ? void 0 : onDelete(lIndex);
|
|
70
|
+
} }), `NSLabel_NSTag_key_${lIndex}`);
|
|
71
|
+
}, isEmpty: (_, value) => NSTag.isEmpty(value), getValue: (item, checkError) => item.getValue(checkError), setValue: (item, _, value) => {
|
|
72
|
+
item.setValue(value);
|
|
73
|
+
}, onValuesChanged: values => {
|
|
74
|
+
console.log(values);
|
|
75
|
+
} }) })] }) }) }));
|
|
68
76
|
}
|
|
69
77
|
//# 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,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"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"}
|
|
@@ -8,13 +8,11 @@ export interface NSTagProps extends IBaseComponentProps {
|
|
|
8
8
|
export interface NSTagValue {
|
|
9
9
|
name: string;
|
|
10
10
|
value: string;
|
|
11
|
-
description?: string;
|
|
12
11
|
}
|
|
13
12
|
export declare class NSTag extends Component<NSTagProps> {
|
|
14
13
|
static isEmpty(value: NSTagValue | null): boolean;
|
|
15
14
|
private NSBoxString_Key;
|
|
16
15
|
private NSBoxString_Value;
|
|
17
|
-
private NSBoxString_Description;
|
|
18
16
|
getValue(checkError?: boolean): NSTagValue;
|
|
19
17
|
setValue(value: NSTagValue | null, callback?: () => void): void;
|
|
20
18
|
render(): import("react/jsx-runtime").JSX.Element;
|
package/dist/components/NSTag.js
CHANGED
|
@@ -1,49 +1,44 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Component, createRef } from 'react';
|
|
3
3
|
import { NSBoxString } from './NSBoxString';
|
|
4
|
-
import {
|
|
5
|
-
import Styles from './NSTag.module.css';
|
|
4
|
+
import { NSRow } from './NSRow';
|
|
6
5
|
export class NSTag extends Component {
|
|
7
6
|
constructor() {
|
|
8
7
|
super(...arguments);
|
|
9
8
|
this.NSBoxString_Key = createRef();
|
|
10
9
|
this.NSBoxString_Value = createRef();
|
|
11
|
-
this.NSBoxString_Description = createRef();
|
|
12
10
|
}
|
|
13
11
|
static isEmpty(value) {
|
|
14
12
|
if (value)
|
|
15
|
-
if (value.name || value.value
|
|
13
|
+
if (value.name || value.value)
|
|
16
14
|
return false;
|
|
17
15
|
return true;
|
|
18
16
|
}
|
|
19
17
|
getValue(checkError = true) {
|
|
20
|
-
var _a, _b, _c, _d
|
|
18
|
+
var _a, _b, _c, _d;
|
|
21
19
|
let name = (_b = (_a = this.NSBoxString_Key.current) === null || _a === void 0 ? void 0 : _a.getValue(checkError)) !== null && _b !== void 0 ? _b : "";
|
|
22
20
|
let value = (_d = (_c = this.NSBoxString_Value.current) === null || _c === void 0 ? void 0 : _c.getValue(checkError)) !== null && _d !== void 0 ? _d : "";
|
|
23
|
-
let description = (_f = (_e = this.NSBoxString_Description.current) === null || _e === void 0 ? void 0 : _e.getValue(checkError)) !== null && _f !== void 0 ? _f : "";
|
|
24
21
|
return {
|
|
25
22
|
name,
|
|
26
|
-
value
|
|
27
|
-
description
|
|
23
|
+
value
|
|
28
24
|
};
|
|
29
25
|
}
|
|
30
26
|
setValue(value, callback) {
|
|
31
|
-
var _a, _b, _c, _d
|
|
27
|
+
var _a, _b, _c, _d;
|
|
32
28
|
(_a = this.NSBoxString_Key.current) === null || _a === void 0 ? void 0 : _a.setValue((_b = value === null || value === void 0 ? void 0 : value.name) !== null && _b !== void 0 ? _b : "", callback);
|
|
33
29
|
(_c = this.NSBoxString_Value.current) === null || _c === void 0 ? void 0 : _c.setValue((_d = value === null || value === void 0 ? void 0 : value.value) !== null && _d !== void 0 ? _d : "", callback);
|
|
34
|
-
(_e = this.NSBoxString_Description.current) === null || _e === void 0 ? void 0 : _e.setValue((_f = value === null || value === void 0 ? void 0 : value.description) !== null && _f !== void 0 ? _f : "", callback);
|
|
35
30
|
}
|
|
36
31
|
render() {
|
|
37
|
-
var _a
|
|
38
|
-
return (
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
32
|
+
var _a;
|
|
33
|
+
return (_jsxs(NSRow, Object.assign({}, this.props, { children: [_jsx(NSBoxString, { ref: this.NSBoxString_Key, title: 'Name', required: true, onChanged: this.props.onChanged }), _jsx(NSBoxString, { ref: this.NSBoxString_Value, title: 'Value', required: false, menu: {
|
|
34
|
+
builtin: {
|
|
35
|
+
delete: {
|
|
36
|
+
enabled: true,
|
|
37
|
+
onDelete: (_a = this.props.onDeleted) !== null && _a !== void 0 ? _a : (() => { })
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
items: []
|
|
41
|
+
}, onChanged: this.props.onChanged })] })));
|
|
47
42
|
}
|
|
48
43
|
}
|
|
49
44
|
//# sourceMappingURL=NSTag.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NSTag.js","sourceRoot":"","sources":["../../src/components/NSTag.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"NSTag.js","sourceRoot":"","sources":["../../src/components/NSTag.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAahC,MAAM,OAAO,KAAM,SAAQ,SAAqB;IAAhD;;QAUS,oBAAe,GAAG,SAAS,EAAe,CAAC;QAC3C,sBAAiB,GAAG,SAAS,EAAe,CAAC;IA+CtD,CAAC;IAxDA,MAAM,CAAC,OAAO,CAAC,KAAwB;QAEtC,IAAI,KAAK;YACR,IAAI,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,KAAK;gBAC5B,OAAO,KAAK,CAAA;QACd,OAAO,IAAI,CAAC;IACb,CAAC;IAKD,QAAQ,CAAC,aAAsB,IAAI;;QAElC,IAAI,IAAI,GAAG,MAAA,MAAA,IAAI,CAAC,eAAe,CAAC,OAAO,0CAAE,QAAQ,CAAC,UAAU,CAAC,mCAAI,EAAE,CAAC;QACpE,IAAI,KAAK,GAAG,MAAA,MAAA,IAAI,CAAC,iBAAiB,CAAC,OAAO,0CAAE,QAAQ,CAAC,UAAU,CAAC,mCAAI,EAAE,CAAC;QACvE,OAAO;YACN,IAAI;YACJ,KAAK;SACL,CAAC;IACH,CAAC;IACD,QAAQ,CAAC,KAAwB,EAAE,QAAqB;;QAEvD,MAAA,IAAI,CAAC,eAAe,CAAC,OAAO,0CAAE,QAAQ,CAAC,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,mCAAI,EAAE,EAAE,QAAQ,CAAC,CAAC;QACpE,MAAA,IAAI,CAAC,iBAAiB,CAAC,OAAO,0CAAE,QAAQ,CAAC,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,mCAAI,EAAE,EAAE,QAAQ,CAAC,CAAC;IACxE,CAAC;IACQ,MAAM;;QAEd,OAAO,CACN,MAAC,KAAK,oBACD,IAAI,CAAC,KAAK,eAGd,KAAC,WAAW,IACX,GAAG,EAAE,IAAI,CAAC,eAAe,EACzB,KAAK,EAAC,MAAM,EACZ,QAAQ,QACR,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,GAC9B,EACF,KAAC,WAAW,IACX,GAAG,EAAE,IAAI,CAAC,iBAAiB,EAC3B,KAAK,EAAC,OAAO,EACb,QAAQ,EAAE,KAAK,EACf,IAAI,EAAE;wBACL,OAAO,EAAE;4BACR,MAAM,EAAE;gCACP,OAAO,EAAE,IAAI;gCACb,QAAQ,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,SAAS,mCAAI,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;6BAC7C;yBACD;wBACD,KAAK,EAAE,EAAE;qBACT,EACD,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,GAC9B,KACK,CACR,CAAC;IACH,CAAC;CACD"}
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
.ns_tag_container {
|
|
2
|
-
display: flex;
|
|
3
|
-
flex-direction: column;
|
|
4
|
-
background-color: white;
|
|
5
|
-
width: fit-content;
|
|
6
|
-
border-radius: 8px;
|
|
7
|
-
padding: 16px;
|
|
8
|
-
margin: 48px;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.ns_tag_title {
|
|
12
|
-
display: flex;
|
|
13
|
-
flex-direction: column;
|
|
14
|
-
align-items: flex-start;
|
|
15
|
-
justify-content: left;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.ns_tag_title h2 {
|
|
19
|
-
color: #141B5C;
|
|
20
|
-
font-weight: 600;
|
|
21
|
-
font-size: 24px;
|
|
22
|
-
margin: 0;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
.ns_tag_title h6 {
|
|
26
|
-
color: rgb(68, 182, 243);
|
|
27
|
-
font-weight: 600;
|
|
28
|
-
font-size: 16px;
|
|
29
|
-
margin: 0;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.ns_tag_input_container {
|
|
33
|
-
display: flex;
|
|
34
|
-
flex-direction: row;
|
|
35
|
-
flex-wrap: wrap;
|
|
36
|
-
justify-content: left;
|
|
37
|
-
align-items: center;
|
|
38
|
-
gap: 16px;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
.ns_tag_input_group {
|
|
42
|
-
display: flex;
|
|
43
|
-
flex-direction: column;
|
|
44
|
-
gap: 16px;
|
|
45
|
-
justify-content: center;
|
|
46
|
-
align-items: center;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
@media only screen and (min-width:1100px) {
|
|
50
|
-
.ns_tag_input_group {
|
|
51
|
-
flex-direction: row;
|
|
52
|
-
}
|
|
53
|
-
}
|
package/package.json
CHANGED
package/src/App.tsx
CHANGED
|
@@ -3,9 +3,7 @@ import 'bootstrap/dist/css/bootstrap.min.css';
|
|
|
3
3
|
import { NSPanel } from './components/NSPanel';
|
|
4
4
|
import { NSSection } from './components/NSSection';
|
|
5
5
|
import { NSLayout } from './components/NSLayout';
|
|
6
|
-
import { NSBox } from './
|
|
7
|
-
import { NSBoxSchemaVariable } from './components/NSBoxSchemaVariable';
|
|
8
|
-
import { NSBoxString, NSFilterBox } from './main';
|
|
6
|
+
import { NSBox, NSBoxSchemaVariable, NSBoxString, NSColumn, NSFilterBox, NSRepeater, NSTag, NSTagValue } from './main';
|
|
9
7
|
import { FilterItemColumnType } from 'namirasoft-core';
|
|
10
8
|
|
|
11
9
|
export function App()
|
|
@@ -97,6 +95,37 @@ export function App()
|
|
|
97
95
|
title=''
|
|
98
96
|
></NSBoxString>
|
|
99
97
|
</NSPanel>
|
|
98
|
+
|
|
99
|
+
<NSColumn>
|
|
100
|
+
<NSRepeater<NSTag, NSTagValue>
|
|
101
|
+
createItem={(_, lIndex, ref, onChange, onDelete, __, props) =>
|
|
102
|
+
{
|
|
103
|
+
return <NSTag
|
|
104
|
+
key={`NSLabel_NSTag_key_${lIndex}`}
|
|
105
|
+
ref={ref}
|
|
106
|
+
{...props}
|
|
107
|
+
onChanged={() =>
|
|
108
|
+
{
|
|
109
|
+
onChange();
|
|
110
|
+
}}
|
|
111
|
+
onDeleted={() =>
|
|
112
|
+
{
|
|
113
|
+
onDelete?.(lIndex);
|
|
114
|
+
}}
|
|
115
|
+
/>;
|
|
116
|
+
}}
|
|
117
|
+
isEmpty={(_, value) => NSTag.isEmpty(value)}
|
|
118
|
+
getValue={(item, checkError) => item.getValue(checkError)}
|
|
119
|
+
setValue={(item, _, value) =>
|
|
120
|
+
{
|
|
121
|
+
item.setValue(value);
|
|
122
|
+
}}
|
|
123
|
+
onValuesChanged={values =>
|
|
124
|
+
{
|
|
125
|
+
console.log(values)
|
|
126
|
+
}}
|
|
127
|
+
/>
|
|
128
|
+
</NSColumn>
|
|
100
129
|
</NSSection>
|
|
101
130
|
</NSLayout >
|
|
102
131
|
</>
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
.ns_tag_container {
|
|
2
|
-
display: flex;
|
|
3
|
-
flex-direction: column;
|
|
4
|
-
background-color: white;
|
|
5
|
-
width: fit-content;
|
|
6
|
-
border-radius: 8px;
|
|
7
|
-
padding: 16px;
|
|
8
|
-
margin: 48px;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.ns_tag_title {
|
|
12
|
-
display: flex;
|
|
13
|
-
flex-direction: column;
|
|
14
|
-
align-items: flex-start;
|
|
15
|
-
justify-content: left;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.ns_tag_title h2 {
|
|
19
|
-
color: #141B5C;
|
|
20
|
-
font-weight: 600;
|
|
21
|
-
font-size: 24px;
|
|
22
|
-
margin: 0;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
.ns_tag_title h6 {
|
|
26
|
-
color: rgb(68, 182, 243);
|
|
27
|
-
font-weight: 600;
|
|
28
|
-
font-size: 16px;
|
|
29
|
-
margin: 0;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.ns_tag_input_container {
|
|
33
|
-
display: flex;
|
|
34
|
-
flex-direction: row;
|
|
35
|
-
flex-wrap: wrap;
|
|
36
|
-
justify-content: left;
|
|
37
|
-
align-items: center;
|
|
38
|
-
gap: 16px;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
.ns_tag_input_group {
|
|
42
|
-
display: flex;
|
|
43
|
-
flex-direction: column;
|
|
44
|
-
gap: 16px;
|
|
45
|
-
justify-content: center;
|
|
46
|
-
align-items: center;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
@media only screen and (min-width:1100px) {
|
|
50
|
-
.ns_tag_input_group {
|
|
51
|
-
flex-direction: row;
|
|
52
|
-
}
|
|
53
|
-
}
|
package/src/components/NSTag.tsx
CHANGED
|
@@ -1,19 +1,17 @@
|
|
|
1
1
|
import { Component, createRef } from 'react';
|
|
2
2
|
import { NSBoxString } from './NSBoxString';
|
|
3
|
-
import { NSButton } from './NSButton';
|
|
4
|
-
import Styles from './NSTag.module.css';
|
|
5
3
|
import { IBaseComponentProps } from "../props/IBaseComponentProps";
|
|
4
|
+
import { NSRow } from './NSRow';
|
|
6
5
|
|
|
7
6
|
export interface NSTagProps extends IBaseComponentProps
|
|
8
7
|
{
|
|
9
|
-
onChanged?: (e: NSBoxString, callback?: () => void) => void;
|
|
8
|
+
onChanged?: (e: NSBoxString, callback?: () => void) => void;
|
|
10
9
|
onDeleted?: () => void;
|
|
11
10
|
}
|
|
12
11
|
export interface NSTagValue
|
|
13
12
|
{
|
|
14
13
|
name: string;
|
|
15
14
|
value: string;
|
|
16
|
-
description?: string;
|
|
17
15
|
}
|
|
18
16
|
|
|
19
17
|
export class NSTag extends Component<NSTagProps>
|
|
@@ -21,60 +19,57 @@ export class NSTag extends Component<NSTagProps>
|
|
|
21
19
|
static isEmpty(value: NSTagValue | null)
|
|
22
20
|
{
|
|
23
21
|
if (value)
|
|
24
|
-
if (value.name || value.value
|
|
22
|
+
if (value.name || value.value)
|
|
25
23
|
return false
|
|
26
24
|
return true;
|
|
27
25
|
}
|
|
28
26
|
|
|
29
27
|
private NSBoxString_Key = createRef<NSBoxString>();
|
|
30
28
|
private NSBoxString_Value = createRef<NSBoxString>();
|
|
31
|
-
private NSBoxString_Description = createRef<NSBoxString>();
|
|
32
29
|
|
|
33
30
|
getValue(checkError: boolean = true): NSTagValue
|
|
34
31
|
{
|
|
35
32
|
let name = this.NSBoxString_Key.current?.getValue(checkError) ?? "";
|
|
36
33
|
let value = this.NSBoxString_Value.current?.getValue(checkError) ?? "";
|
|
37
|
-
let description = this.NSBoxString_Description.current?.getValue(checkError) ?? "";
|
|
38
34
|
return {
|
|
39
35
|
name,
|
|
40
|
-
value
|
|
41
|
-
description
|
|
36
|
+
value
|
|
42
37
|
};
|
|
43
38
|
}
|
|
44
39
|
setValue(value: NSTagValue | null, callback?: () => void)
|
|
45
40
|
{
|
|
46
41
|
this.NSBoxString_Key.current?.setValue(value?.name ?? "", callback);
|
|
47
42
|
this.NSBoxString_Value.current?.setValue(value?.value ?? "", callback);
|
|
48
|
-
this.NSBoxString_Description.current?.setValue(value?.description ?? "", callback);
|
|
49
43
|
}
|
|
50
44
|
override render()
|
|
51
45
|
{
|
|
52
46
|
return (
|
|
53
|
-
<
|
|
54
|
-
|
|
55
|
-
className={`${Styles.ns_tag_input_container} ${this.props.classList?.join(" ") ?? ""}`}
|
|
56
|
-
style={this.props.style}
|
|
47
|
+
<NSRow
|
|
48
|
+
{...this.props}
|
|
57
49
|
>
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
50
|
+
|
|
51
|
+
<NSBoxString
|
|
52
|
+
ref={this.NSBoxString_Key}
|
|
53
|
+
title='Name'
|
|
54
|
+
required
|
|
55
|
+
onChanged={this.props.onChanged}
|
|
56
|
+
/>
|
|
57
|
+
<NSBoxString
|
|
58
|
+
ref={this.NSBoxString_Value}
|
|
59
|
+
title='Value'
|
|
60
|
+
required={false}
|
|
61
|
+
menu={{
|
|
62
|
+
builtin: {
|
|
63
|
+
delete: {
|
|
64
|
+
enabled: true,
|
|
65
|
+
onDelete: this.props.onDeleted ?? (() => { })
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
items: []
|
|
69
|
+
}}
|
|
70
|
+
onChanged={this.props.onChanged}
|
|
71
|
+
/>
|
|
72
|
+
</NSRow>
|
|
78
73
|
);
|
|
79
74
|
}
|
|
80
75
|
}
|