namirasoft-site-react 1.3.192 → 1.3.193
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/NSBoxEmail.js +1 -1
- package/dist/components/NSBoxEmail.js.map +1 -1
- package/dist/components/NSBoxPhone.js +1 -1
- package/dist/components/NSBoxPhone.js.map +1 -1
- package/dist/components/NSBoxString.d.ts +2 -0
- package/dist/components/NSBoxString.js +10 -3
- package/dist/components/NSBoxString.js.map +1 -1
- package/dist/components/NSBoxText.d.ts +3 -0
- package/dist/components/NSBoxText.js +15 -4
- package/dist/components/NSBoxText.js.map +1 -1
- package/dist/components/NSBoxTextArea.d.ts +2 -0
- package/dist/components/NSBoxTextArea.js +10 -3
- package/dist/components/NSBoxTextArea.js.map +1 -1
- package/dist/components/NSBoxTextArea.module.css +35 -0
- package/package.json +1 -1
- package/src/App.tsx +4 -1
- package/src/components/NSBoxEmail.tsx +2 -1
- package/src/components/NSBoxPhone.tsx +2 -1
- package/src/components/NSBoxString.tsx +36 -4
- package/src/components/NSBoxText.tsx +51 -7
- package/src/components/NSBoxTextArea.module.css +35 -0
- package/src/components/NSBoxTextArea.tsx +37 -4
package/dist/App.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
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 { NSBoxEmail, NSBoxPhone, NSLayout } from './main';
|
|
4
|
+
import { NSBoxEmail, NSBoxPhone, NSBoxString, NSBoxText, NSBoxTextArea, NSLayout } from './main';
|
|
5
5
|
export function App() {
|
|
6
6
|
const onClicked = () => {
|
|
7
7
|
console.log("clicked");
|
|
@@ -18,6 +18,6 @@ export function App() {
|
|
|
18
18
|
return (_jsx(_Fragment, { children: _jsx(NSLayout, { header: {
|
|
19
19
|
title: "any",
|
|
20
20
|
icons: icons
|
|
21
|
-
}, scope: "exampleScope", logo: "exampleLogoUrl", notifications: [], background: "", children: _jsxs(_Fragment, { children: [_jsx(NSBoxEmail, { title: 'test', required: true }), _jsx(NSBoxPhone, { title: 'test', required: true })] }) }) }));
|
|
21
|
+
}, scope: "exampleScope", logo: "exampleLogoUrl", notifications: [], background: "", children: _jsxs(_Fragment, { children: [_jsx(NSBoxEmail, { title: 'test', required: true }), _jsx(NSBoxPhone, { title: 'test', required: true }), _jsx(NSBoxString, { title: 'test', required: true }), _jsx(NSBoxText, { title: 'test', required: true }), _jsx(NSBoxTextArea, { title: 'test', required: true })] }) }) }));
|
|
22
22
|
}
|
|
23
23
|
//# 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,UAAU,EAAE,UAAU,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,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAEjG,MAAM,UAAU,GAAG;IAGlB,MAAM,SAAS,GAAG,GAAG,EAAE;QAEtB,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;IACvB,CAAC,CAAA;IAED,IAAI,KAAK,GAAG;QACX,EAAE,GAAG,EAAE,8DAA8D,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,EAAE;QACrG,EAAE,GAAG,EAAE,8DAA8D,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE;QAC3F,EAAE,GAAG,EAAE,8DAA8D,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE;QAC3F,EAAE,GAAG,EAAE,8DAA8D,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE;QAC3F,EAAE,GAAG,EAAE,8DAA8D,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE;QAC3F,EAAE,GAAG,EAAE,8DAA8D,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE;QAC3F,EAAE,GAAG,EAAE,8DAA8D,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE;KAC3F,CAAC;IAEF,OAAO,CACN,4BACC,KAAC,QAAQ,IACR,MAAM,EAAE;gBACP,KAAK,EAAE,KAAK;gBACZ,KAAK,EAAE,KAAK;aACZ,EACD,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,gBAAgB,EACrB,aAAa,EAAE,EAAE,EACjB,UAAU,EAAC,EAAE,YAEb,8BACA,KAAC,UAAU,IAAC,KAAK,EAAC,MAAM,EAAC,QAAQ,EAAE,IAAI,GAAG,EACzC,KAAC,UAAU,IAAC,KAAK,EAAC,MAAM,EAAC,QAAQ,EAAE,IAAI,GAAI,EAC3C,KAAC,WAAW,IAAC,KAAK,EAAC,MAAM,EAAC,QAAQ,EAAE,IAAI,GAAI,EAC5C,KAAC,SAAS,IAAC,KAAK,EAAC,MAAM,EAAC,QAAQ,EAAE,IAAI,GAAI,EAC1C,KAAC,aAAa,IAAC,KAAK,EAAC,MAAM,EAAC,QAAQ,EAAE,IAAI,GAAI,IAC5C,GACO,GACT,CACH,CAAC;AACH,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NSBoxEmail.js","sourceRoot":"","sources":["../../src/components/NSBoxEmail.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,oBAAoB,CAAC;AACxC,OAAO,cAAc,MAAM,uCAAuC,CAAC;AACnE,OAAO,cAAc,MAAM,sCAAsC,CAAC;AAClE,OAAO,QAAQ,MAAM,gCAAgC,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,eAAe,MAAM,oBAAoB,CAAC;AAiBjD,MAAM,OAAO,UAAW,SAAQ,KAAK,CAAC,SAA6C;IAClF,YAAY,KAAuB;;QAElC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAE,KAAK,EAAE,MAAA,KAAK,CAAC,YAAY,mCAAI,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC;QACtE,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;QAC3C,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC1D,CAAC;IAED,QAAQ;QAEP,OAAO,CACN,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC;YAClE,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC;YACxE,SAAS,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAC3D,CAAC;IACH,CAAC;IAED,QAAQ;QAEP,IAAI,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC5B,IAAI,KAAK,EACT;YACC,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"NSBoxEmail.js","sourceRoot":"","sources":["../../src/components/NSBoxEmail.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NSBoxPhone.js","sourceRoot":"","sources":["../../src/components/NSBoxPhone.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,oBAAoB,CAAC;AACxC,OAAO,cAAc,MAAM,uCAAuC,CAAC;AACnE,OAAO,cAAc,MAAM,sCAAsC,CAAC;AAClE,OAAO,QAAQ,MAAM,gCAAgC,CAAC;AACtD,OAAO,UAAU,MAAM,qBAAqB,CAAA;AAC5C,OAAO,mCAAmC,CAAA;AAI1C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,eAAe,MAAM,oBAAoB,CAAC;AAiBjD,MAAM,OAAO,UAAW,SAAQ,KAAK,CAAC,SAA6C;IAElF,YAAY,KAAuB;;QAElC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAE,KAAK,EAAE,MAAA,KAAK,CAAC,YAAY,mCAAI,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC;QACtE,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,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC1D,CAAC;IACD,QAAQ;QAEP,OAAO,CACN,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC;YAClE,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CACxE,CAAC;IACH,CAAC;IACD,QAAQ;QAEP,IAAI,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC5B,IAAI,KAAK,EACT;YACC,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"NSBoxPhone.js","sourceRoot":"","sources":["../../src/components/NSBoxPhone.tsx"],"names":[],"mappings":"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"}
|
|
@@ -11,6 +11,7 @@ export interface INSBoxStringProps extends IBaseComponentProps, IValidationProps
|
|
|
11
11
|
export interface INSBoxStringState {
|
|
12
12
|
value: string;
|
|
13
13
|
error?: string;
|
|
14
|
+
isFullScreen: boolean;
|
|
14
15
|
}
|
|
15
16
|
export declare class NSBoxString extends React.Component<INSBoxStringProps, INSBoxStringState> {
|
|
16
17
|
constructor(props: INSBoxStringProps);
|
|
@@ -18,5 +19,6 @@ export declare class NSBoxString extends React.Component<INSBoxStringProps, INSB
|
|
|
18
19
|
getValue(): string;
|
|
19
20
|
setValue(value: string): void;
|
|
20
21
|
private onChanged;
|
|
22
|
+
private toggleFullScreen;
|
|
21
23
|
render(): import("react/jsx-runtime").JSX.Element;
|
|
22
24
|
}
|
|
@@ -3,16 +3,20 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
3
3
|
import React from "react";
|
|
4
4
|
import Styles from "./NSBox.module.css";
|
|
5
5
|
import IconInputString from '../assets/images/icon-input-string.svg';
|
|
6
|
+
import IconFullScreen from '../assets/images/icon-fullscreen.png';
|
|
7
|
+
import IconCopy from '../assets/images/icon-copy.png';
|
|
6
8
|
import { Validator } from "../Validator";
|
|
7
9
|
import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
|
|
10
|
+
import CopyToClipboard from '../CopyToClipboard';
|
|
8
11
|
export class NSBoxString extends React.Component {
|
|
9
12
|
constructor(props) {
|
|
10
13
|
var _a;
|
|
11
14
|
super(props);
|
|
12
|
-
this.state = { value: (_a = props.defaultValue) !== null && _a !== void 0 ? _a : "" };
|
|
15
|
+
this.state = { value: (_a = props.defaultValue) !== null && _a !== void 0 ? _a : "", isFullScreen: false };
|
|
13
16
|
this.getValue = this.getValue.bind(this);
|
|
14
17
|
this.setValue = this.setValue.bind(this);
|
|
15
18
|
this.onChanged = this.onChanged.bind(this);
|
|
19
|
+
this.toggleFullScreen = this.toggleFullScreen.bind(this);
|
|
16
20
|
}
|
|
17
21
|
getError() {
|
|
18
22
|
return (Validator.getError(this.props.title, this.state.value, this.props) ||
|
|
@@ -22,7 +26,7 @@ export class NSBoxString extends React.Component {
|
|
|
22
26
|
let error = this.getError();
|
|
23
27
|
if (error) {
|
|
24
28
|
this.setState({ error });
|
|
25
|
-
|
|
29
|
+
return '';
|
|
26
30
|
}
|
|
27
31
|
return this.state.value;
|
|
28
32
|
}
|
|
@@ -34,9 +38,12 @@ export class NSBoxString extends React.Component {
|
|
|
34
38
|
if (this.props.onChanged)
|
|
35
39
|
this.props.onChanged(e);
|
|
36
40
|
}
|
|
41
|
+
toggleFullScreen() {
|
|
42
|
+
this.setState(prevState => ({ isFullScreen: !prevState.isFullScreen }));
|
|
43
|
+
}
|
|
37
44
|
render() {
|
|
38
45
|
var _a;
|
|
39
|
-
return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${Styles.ns_input_parent} ${(_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: [
|
|
46
|
+
return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${Styles.ns_input_parent} ${(_a = this.props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")} ${this.state.isFullScreen ? Styles.ns_full_screen : ""}`, style: this.props.style, children: [_jsxs("div", { className: "d-flex justify-content-between align-items-center", children: [_jsxs("span", { className: Styles.ns_input_title, children: [this.props.required && _jsx("span", { style: { color: "red" }, children: "*" }), " ", this.props.title] }), _jsxs("div", { className: "d-flex gap-1", children: [_jsx("button", { className: Styles.ns_btn_box, onClick: () => CopyToClipboard.copyToClipboard(this.getValue()), children: _jsx("img", { src: IconCopy, alt: "Copy", width: 14, height: 14 }) }), _jsx("button", { className: Styles.ns_btn_box, onClick: this.toggleFullScreen, children: _jsx("img", { src: IconFullScreen, alt: "FullScreen", width: 14, height: 14 }) })] })] }), _jsx("img", { className: Styles.ns_input_icon, src: IconInputString, alt: "String Icon", width: 24, height: 24 }), _jsx("input", { id: this.props.id, value: this.state.value, onChange: this.onChanged, type: "text", className: Styles.ns_input, placeholder: this.props.placeholder })] }), _jsx(NSBoxErrorNotifier, { error: this.state.error })] }));
|
|
40
47
|
}
|
|
41
48
|
}
|
|
42
49
|
//# sourceMappingURL=NSBoxString.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NSBoxString.js","sourceRoot":"","sources":["../../src/components/NSBoxString.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,oBAAoB,CAAC;AACxC,OAAO,eAAe,MAAM,wCAAwC,CAAC;
|
|
1
|
+
{"version":3,"file":"NSBoxString.js","sourceRoot":"","sources":["../../src/components/NSBoxString.tsx"],"names":[],"mappings":"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"}
|
|
@@ -11,6 +11,7 @@ export interface INSBoxTextProps extends IBaseComponentProps, IValidationProps,
|
|
|
11
11
|
export interface INSBoxTextState {
|
|
12
12
|
value: string;
|
|
13
13
|
error?: string;
|
|
14
|
+
isFullScreen: boolean;
|
|
14
15
|
}
|
|
15
16
|
export declare class NSBoxText extends React.Component<INSBoxTextProps, INSBoxTextState> {
|
|
16
17
|
constructor(props: INSBoxTextProps);
|
|
@@ -18,5 +19,7 @@ export declare class NSBoxText extends React.Component<INSBoxTextProps, INSBoxTe
|
|
|
18
19
|
getValue(): string;
|
|
19
20
|
setValue(value: string): void;
|
|
20
21
|
private onChanged;
|
|
22
|
+
private toggleFullScreen;
|
|
21
23
|
render(): import("react/jsx-runtime").JSX.Element;
|
|
22
24
|
}
|
|
25
|
+
export default NSBoxText;
|
|
@@ -3,16 +3,20 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
3
3
|
import React from "react";
|
|
4
4
|
import Styles from "./NSBox.module.css";
|
|
5
5
|
import IconInputText from '../assets/images/icon-input-text.svg';
|
|
6
|
+
import IconFullScreen from '../assets/images/icon-fullscreen.png';
|
|
7
|
+
import IconCopy from '../assets/images/icon-copy.png';
|
|
6
8
|
import { Validator } from "../Validator";
|
|
7
9
|
import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
|
|
10
|
+
import CopyToClipboard from '../CopyToClipboard';
|
|
8
11
|
export class NSBoxText extends React.Component {
|
|
9
12
|
constructor(props) {
|
|
10
13
|
var _a;
|
|
11
14
|
super(props);
|
|
12
|
-
this.state = { value: (_a = props.defaultValue) !== null && _a !== void 0 ? _a : "" };
|
|
15
|
+
this.state = { value: (_a = props.defaultValue) !== null && _a !== void 0 ? _a : "", isFullScreen: false };
|
|
13
16
|
this.getValue = this.getValue.bind(this);
|
|
14
17
|
this.setValue = this.setValue.bind(this);
|
|
15
18
|
this.onChanged = this.onChanged.bind(this);
|
|
19
|
+
this.toggleFullScreen = this.toggleFullScreen.bind(this);
|
|
16
20
|
}
|
|
17
21
|
getError() {
|
|
18
22
|
return (Validator.getError(this.props.title, this.state.value, this.props) ||
|
|
@@ -22,7 +26,7 @@ export class NSBoxText extends React.Component {
|
|
|
22
26
|
let error = this.getError();
|
|
23
27
|
if (error) {
|
|
24
28
|
this.setState({ error });
|
|
25
|
-
|
|
29
|
+
return '';
|
|
26
30
|
}
|
|
27
31
|
return this.state.value;
|
|
28
32
|
}
|
|
@@ -31,12 +35,19 @@ export class NSBoxText extends React.Component {
|
|
|
31
35
|
}
|
|
32
36
|
onChanged(e) {
|
|
33
37
|
this.setValue(e.target.value);
|
|
34
|
-
if (this.props.onChanged)
|
|
38
|
+
if (this.props.onChanged) {
|
|
35
39
|
this.props.onChanged(e);
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
toggleFullScreen() {
|
|
43
|
+
this.setState(prevState => ({ isFullScreen: !prevState.isFullScreen }), () => {
|
|
44
|
+
console.log("isFullScreen state updated:", this.state.isFullScreen);
|
|
45
|
+
});
|
|
36
46
|
}
|
|
37
47
|
render() {
|
|
38
48
|
var _a;
|
|
39
|
-
return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${Styles.ns_input_parent} ${(_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: [
|
|
49
|
+
return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${Styles.ns_input_parent} ${(_a = this.props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")} ${this.state.isFullScreen ? Styles.ns_full_screen : ""}`, style: this.props.style, children: [_jsxs("div", { className: "d-flex justify-content-between align-items-center", children: [_jsxs("span", { className: Styles.ns_input_title, children: [this.props.required && _jsx("span", { style: { color: "red" }, children: "*" }), " ", this.props.title] }), _jsxs("div", { className: "d-flex gap-1", children: [_jsx("button", { className: Styles.ns_btn_box, onClick: () => CopyToClipboard.copyToClipboard(this.getValue()), children: _jsx("img", { src: IconCopy, alt: "Copy", width: 14, height: 14 }) }), _jsx("button", { className: Styles.ns_btn_box, onClick: this.toggleFullScreen, children: _jsx("img", { src: IconFullScreen, alt: "FullScreen", width: 14, height: 14 }) })] })] }), _jsx("img", { className: Styles.ns_input_icon, src: IconInputText, alt: "Text Icon", width: 24, height: 24 }), _jsx("input", { id: this.props.id, value: this.state.value, onChange: this.onChanged, type: "text", className: Styles.ns_input, placeholder: this.props.placeholder })] }), _jsx(NSBoxErrorNotifier, { error: this.state.error })] }));
|
|
40
50
|
}
|
|
41
51
|
}
|
|
52
|
+
export default NSBoxText;
|
|
42
53
|
//# sourceMappingURL=NSBoxText.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NSBoxText.js","sourceRoot":"","sources":["../../src/components/NSBoxText.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,oBAAoB,CAAC;AACxC,OAAO,aAAa,MAAM,sCAAsC,CAAC;
|
|
1
|
+
{"version":3,"file":"NSBoxText.js","sourceRoot":"","sources":["../../src/components/NSBoxText.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,oBAAoB,CAAC;AACxC,OAAO,aAAa,MAAM,sCAAsC,CAAC;AACjE,OAAO,cAAc,MAAM,sCAAsC,CAAC;AAClE,OAAO,QAAQ,MAAM,gCAAgC,CAAC;AAItD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,eAAe,MAAM,oBAAoB,CAAC;AAiBjD,MAAM,OAAO,SAAU,SAAQ,KAAK,CAAC,SAA2C;IAC/E,YAAY,KAAsB;;QAEjC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAE,KAAK,EAAE,MAAA,KAAK,CAAC,YAAY,mCAAI,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC;QACtE,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;QAC3C,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC1D,CAAC;IAED,QAAQ;QAEP,OAAO,CACN,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC;YAClE,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CACxE,CAAC;IACH,CAAC;IAED,QAAQ;QAEP,IAAI,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC5B,IAAI,KAAK,EACT;YACC,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;YAEzB,OAAO,EAAE,CAAC;SACV;QACD,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;IACzB,CAAC;IAED,QAAQ,CAAC,KAAa;QAErB,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAC1B,CAAC;IAEO,SAAS,CAAC,CAAsC;QAEvD,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,EACxB;YACC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;SACxB;IACF,CAAC;IAEO,gBAAgB;QAEvB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,EAAE,CAAC,SAAS,CAAC,YAAY,EAAE,CAAC,EAAE,GAAG,EAAE;YAE5E,OAAO,CAAC,GAAG,CAAC,6BAA6B,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;QACrE,CAAC,CAAC,CAAC;IACJ,CAAC;IAEQ,MAAM;;QAEd,OAAO,CACN,8BACC,eAAK,SAAS,EAAE,GAAG,MAAM,CAAC,eAAe,IAAI,MAAA,IAAI,CAAC,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,aAC9J,eAAK,SAAS,EAAC,mDAAmD,aACjE,gBAAM,SAAS,EAAE,MAAM,CAAC,cAAc,aACpC,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,eAAM,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,kBAAU,OAAG,IAAI,CAAC,KAAK,CAAC,KAAK,IAC5E,EACP,eAAK,SAAS,EAAC,cAAc,aAC5B,iBAAQ,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,YACpG,cACC,GAAG,EAAE,QAAQ,EACb,GAAG,EAAC,MAAM,EACV,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACT,GACM,EACT,iBAAQ,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,OAAO,EAAE,IAAI,CAAC,gBAAgB,YACnE,cACC,GAAG,EAAE,cAAc,EACnB,GAAG,EAAC,YAAY,EAChB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACT,GACM,IACJ,IACD,EACN,cACC,SAAS,EAAE,MAAM,CAAC,aAAa,EAC/B,GAAG,EAAE,aAAa,EAClB,GAAG,EAAC,WAAW,EACf,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACT,EACF,gBACC,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,GAClC,IACG,EACN,KAAC,kBAAkB,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAI,IAC7C,CACH,CAAC;IACH,CAAC;CACD;AAED,eAAe,SAAS,CAAC"}
|
|
@@ -13,6 +13,7 @@ export interface INSBoxTextAreaProps extends IBaseComponentProps, IValidationPro
|
|
|
13
13
|
export interface INSBoxTextAreaState {
|
|
14
14
|
value: string;
|
|
15
15
|
error?: string;
|
|
16
|
+
isFullScreen: boolean;
|
|
16
17
|
}
|
|
17
18
|
export declare class NSBoxTextArea extends React.Component<INSBoxTextAreaProps, INSBoxTextAreaState> {
|
|
18
19
|
constructor(props: INSBoxTextAreaProps);
|
|
@@ -20,5 +21,6 @@ export declare class NSBoxTextArea extends React.Component<INSBoxTextAreaProps,
|
|
|
20
21
|
getValue(): string;
|
|
21
22
|
setValue(value: string): void;
|
|
22
23
|
private onChanged;
|
|
24
|
+
private toggleFullScreen;
|
|
23
25
|
render(): import("react/jsx-runtime").JSX.Element;
|
|
24
26
|
}
|
|
@@ -14,6 +14,9 @@ import Styles from "./NSBoxTextArea.module.css";
|
|
|
14
14
|
import { Validator } from "../Validator";
|
|
15
15
|
import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
|
|
16
16
|
import IconInputString from '../assets/images/icon-input-string.svg';
|
|
17
|
+
import IconFullScreen from '../assets/images/icon-fullscreen.png';
|
|
18
|
+
import IconCopy from '../assets/images/icon-copy.png';
|
|
19
|
+
import CopyToClipboard from '../CopyToClipboard';
|
|
17
20
|
export class NSBoxTextArea extends React.Component {
|
|
18
21
|
constructor(props) {
|
|
19
22
|
var _a;
|
|
@@ -23,10 +26,11 @@ export class NSBoxTextArea extends React.Component {
|
|
|
23
26
|
if (this.props.onChanged)
|
|
24
27
|
this.props.onChanged();
|
|
25
28
|
});
|
|
26
|
-
this.state = { value: (_a = props.defaultValue) !== null && _a !== void 0 ? _a : "" };
|
|
29
|
+
this.state = { value: (_a = props.defaultValue) !== null && _a !== void 0 ? _a : "", isFullScreen: false };
|
|
27
30
|
this.getValue = this.getValue.bind(this);
|
|
28
31
|
this.setValue = this.setValue.bind(this);
|
|
29
32
|
this.onChanged = this.onChanged.bind(this);
|
|
33
|
+
this.toggleFullScreen = this.toggleFullScreen.bind(this);
|
|
30
34
|
}
|
|
31
35
|
getError() {
|
|
32
36
|
return (Validator.getError(this.props.title, this.state.value, this.props) ||
|
|
@@ -36,16 +40,19 @@ export class NSBoxTextArea extends React.Component {
|
|
|
36
40
|
let error = this.getError();
|
|
37
41
|
if (error) {
|
|
38
42
|
this.setState({ error });
|
|
39
|
-
|
|
43
|
+
return '';
|
|
40
44
|
}
|
|
41
45
|
return this.state.value;
|
|
42
46
|
}
|
|
43
47
|
setValue(value) {
|
|
44
48
|
this.setState({ value });
|
|
45
49
|
}
|
|
50
|
+
toggleFullScreen() {
|
|
51
|
+
this.setState(prevState => ({ isFullScreen: !prevState.isFullScreen }));
|
|
52
|
+
}
|
|
46
53
|
render() {
|
|
47
54
|
var _a;
|
|
48
|
-
return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${Styles.ns_text_area_parent} ${(_a = this.props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: this.props.style, children: [_jsxs("
|
|
55
|
+
return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${Styles.ns_text_area_parent} ${(_a = this.props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")} ${this.state.isFullScreen ? Styles.ns_full_screen : ""}`, style: this.props.style, children: [_jsxs("div", { className: "d-flex justify-content-between align-items-center", children: [_jsxs("span", { className: Styles.ns_input_title, children: [this.props.required && _jsx("span", { style: { color: "red" }, children: "*" }), " ", this.props.title] }), _jsxs("div", { className: "d-flex gap-1", children: [_jsx("button", { className: Styles.ns_btn_box, onClick: () => CopyToClipboard.copyToClipboard(this.getValue()), children: _jsx("img", { src: IconCopy, alt: "Copy", width: 14, height: 14 }) }), _jsx("button", { className: Styles.ns_btn_box, onClick: this.toggleFullScreen, children: _jsx("img", { src: IconFullScreen, alt: "FullScreen", width: 14, height: 14 }) })] })] }), _jsxs("div", { className: Styles.ns_text_area_container, children: [_jsx("figure", { className: Styles.ns_text_area_icon_container, children: _jsx("img", { src: IconInputString, alt: "text-area-icon", width: 24, height: 24 }) }), _jsx("textarea", { style: { height: !this.props.rows ? "96px" : "" }, cols: this.props.cols, rows: this.props.rows, id: this.props.id, value: this.state.value, className: Styles.ns_text_area, placeholder: this.props.placeholder, onChange: this.onChanged })] })] }), _jsx(NSBoxErrorNotifier, { error: this.state.error })] }));
|
|
49
56
|
}
|
|
50
57
|
}
|
|
51
58
|
//# sourceMappingURL=NSBoxTextArea.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NSBoxTextArea.js","sourceRoot":"","sources":["../../src/components/NSBoxTextArea.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAIhD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,eAAe,MAAM,wCAAwC,CAAC;
|
|
1
|
+
{"version":3,"file":"NSBoxTextArea.js","sourceRoot":"","sources":["../../src/components/NSBoxTextArea.tsx"],"names":[],"mappings":"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"}
|
|
@@ -35,4 +35,39 @@
|
|
|
35
35
|
.ns_text_area_title {
|
|
36
36
|
font-size: 16px;
|
|
37
37
|
font-weight: 400;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.ns_btn_box {
|
|
41
|
+
color: #000;
|
|
42
|
+
border: none;
|
|
43
|
+
cursor: pointer;
|
|
44
|
+
width: max-content;
|
|
45
|
+
background-color: transparent;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.ns_input_parent:hover .ns_btn_box {
|
|
49
|
+
opacity: 1;
|
|
50
|
+
visibility: visible;
|
|
51
|
+
transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.ns_btn_box img {
|
|
55
|
+
position: inherit;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.ns_full_screen {
|
|
59
|
+
position: fixed;
|
|
60
|
+
top: 0;
|
|
61
|
+
left: 0;
|
|
62
|
+
width: 100%;
|
|
63
|
+
height: 100%;
|
|
64
|
+
background: #0101015c;
|
|
65
|
+
z-index: 1000;
|
|
66
|
+
padding: 5%;
|
|
67
|
+
max-width: 100% !important;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.ns_full_screen input {
|
|
71
|
+
width: 100% !important;
|
|
72
|
+
max-width: 100%;
|
|
38
73
|
}
|
package/package.json
CHANGED
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 { NSBoxEmail, NSBoxPhone, NSLayout } from './main';
|
|
3
|
+
import { NSBoxEmail, NSBoxPhone, NSBoxString, NSBoxText, NSBoxTextArea, NSLayout } from './main';
|
|
4
4
|
|
|
5
5
|
export function App()
|
|
6
6
|
{
|
|
@@ -35,6 +35,9 @@ export function App()
|
|
|
35
35
|
<>
|
|
36
36
|
<NSBoxEmail title='test' required={true}/>
|
|
37
37
|
<NSBoxPhone title='test' required={true} />
|
|
38
|
+
<NSBoxString title='test' required={true} />
|
|
39
|
+
<NSBoxText title='test' required={true} />
|
|
40
|
+
<NSBoxTextArea title='test' required={true} />
|
|
38
41
|
</>
|
|
39
42
|
</NSLayout>
|
|
40
43
|
</>
|
|
@@ -3,11 +3,14 @@
|
|
|
3
3
|
import React from "react";
|
|
4
4
|
import Styles from "./NSBox.module.css";
|
|
5
5
|
import IconInputString from '../assets/images/icon-input-string.svg';
|
|
6
|
+
import IconFullScreen from '../assets/images/icon-fullscreen.png';
|
|
7
|
+
import IconCopy from '../assets/images/icon-copy.png';
|
|
6
8
|
import { IBaseComponentProps } from "../props/IBaseComponentProps";
|
|
7
9
|
import { IValidationProps } from "../props/IValidationProps";
|
|
8
10
|
import { IValidationStringProps } from "../props/IValidationStringProps";
|
|
9
11
|
import { Validator } from "../Validator";
|
|
10
12
|
import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
|
|
13
|
+
import CopyToClipboard from '../CopyToClipboard';
|
|
11
14
|
|
|
12
15
|
export interface INSBoxStringProps extends IBaseComponentProps, IValidationProps, IValidationStringProps
|
|
13
16
|
{
|
|
@@ -21,6 +24,7 @@ export interface INSBoxStringState
|
|
|
21
24
|
{
|
|
22
25
|
value: string;
|
|
23
26
|
error?: string;
|
|
27
|
+
isFullScreen: boolean;
|
|
24
28
|
}
|
|
25
29
|
|
|
26
30
|
export class NSBoxString extends React.Component<INSBoxStringProps, INSBoxStringState>
|
|
@@ -28,10 +32,11 @@ export class NSBoxString extends React.Component<INSBoxStringProps, INSBoxString
|
|
|
28
32
|
constructor(props: INSBoxStringProps)
|
|
29
33
|
{
|
|
30
34
|
super(props);
|
|
31
|
-
this.state = { value: props.defaultValue ?? "" };
|
|
35
|
+
this.state = { value: props.defaultValue ?? "", isFullScreen: false };
|
|
32
36
|
this.getValue = this.getValue.bind(this);
|
|
33
37
|
this.setValue = this.setValue.bind(this);
|
|
34
38
|
this.onChanged = this.onChanged.bind(this);
|
|
39
|
+
this.toggleFullScreen = this.toggleFullScreen.bind(this);
|
|
35
40
|
}
|
|
36
41
|
getError(): string | null
|
|
37
42
|
{
|
|
@@ -46,7 +51,8 @@ export class NSBoxString extends React.Component<INSBoxStringProps, INSBoxString
|
|
|
46
51
|
if (error)
|
|
47
52
|
{
|
|
48
53
|
this.setState({ error });
|
|
49
|
-
throw new Error(error);
|
|
54
|
+
// throw new Error(error);
|
|
55
|
+
return '';
|
|
50
56
|
}
|
|
51
57
|
return this.state.value;
|
|
52
58
|
}
|
|
@@ -60,12 +66,38 @@ export class NSBoxString extends React.Component<INSBoxStringProps, INSBoxString
|
|
|
60
66
|
if (this.props.onChanged)
|
|
61
67
|
this.props.onChanged(e);
|
|
62
68
|
}
|
|
69
|
+
private toggleFullScreen(): void
|
|
70
|
+
{
|
|
71
|
+
this.setState(prevState => ({ isFullScreen: !prevState.isFullScreen }));
|
|
72
|
+
}
|
|
63
73
|
override render()
|
|
64
74
|
{
|
|
65
75
|
return (
|
|
66
76
|
<>
|
|
67
|
-
<div className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")}`} style={this.props.style}>
|
|
68
|
-
<
|
|
77
|
+
<div className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")} ${this.state.isFullScreen ? Styles.ns_full_screen : ""}`} style={this.props.style}>
|
|
78
|
+
<div className="d-flex justify-content-between align-items-center">
|
|
79
|
+
<span className={Styles.ns_input_title}>
|
|
80
|
+
{this.props.required && <span style={{ color: "red" }}>*</span>} {this.props.title}
|
|
81
|
+
</span>
|
|
82
|
+
<div className="d-flex gap-1">
|
|
83
|
+
<button className={Styles.ns_btn_box} onClick={() => CopyToClipboard.copyToClipboard(this.getValue())}>
|
|
84
|
+
<img
|
|
85
|
+
src={IconCopy}
|
|
86
|
+
alt="Copy"
|
|
87
|
+
width={14}
|
|
88
|
+
height={14}
|
|
89
|
+
/>
|
|
90
|
+
</button>
|
|
91
|
+
<button className={Styles.ns_btn_box} onClick={this.toggleFullScreen}>
|
|
92
|
+
<img
|
|
93
|
+
src={IconFullScreen}
|
|
94
|
+
alt="FullScreen"
|
|
95
|
+
width={14}
|
|
96
|
+
height={14}
|
|
97
|
+
/>
|
|
98
|
+
</button>
|
|
99
|
+
</div>
|
|
100
|
+
</div>
|
|
69
101
|
<img
|
|
70
102
|
className={Styles.ns_input_icon}
|
|
71
103
|
src={IconInputString}
|
|
@@ -3,11 +3,14 @@
|
|
|
3
3
|
import React from "react";
|
|
4
4
|
import Styles from "./NSBox.module.css";
|
|
5
5
|
import IconInputText from '../assets/images/icon-input-text.svg';
|
|
6
|
+
import IconFullScreen from '../assets/images/icon-fullscreen.png';
|
|
7
|
+
import IconCopy from '../assets/images/icon-copy.png';
|
|
6
8
|
import { IBaseComponentProps } from "../props/IBaseComponentProps";
|
|
7
9
|
import { IValidationProps } from "../props/IValidationProps";
|
|
8
10
|
import { IValidationStringProps } from "../props/IValidationStringProps";
|
|
9
11
|
import { Validator } from "../Validator";
|
|
10
12
|
import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
|
|
13
|
+
import CopyToClipboard from '../CopyToClipboard';
|
|
11
14
|
|
|
12
15
|
export interface INSBoxTextProps extends IBaseComponentProps, IValidationProps, IValidationStringProps
|
|
13
16
|
{
|
|
@@ -21,18 +24,20 @@ export interface INSBoxTextState
|
|
|
21
24
|
{
|
|
22
25
|
value: string;
|
|
23
26
|
error?: string;
|
|
27
|
+
isFullScreen: boolean;
|
|
24
28
|
}
|
|
25
29
|
|
|
26
|
-
export class NSBoxText extends React.Component<INSBoxTextProps, INSBoxTextState>
|
|
27
|
-
{
|
|
30
|
+
export class NSBoxText extends React.Component<INSBoxTextProps, INSBoxTextState> {
|
|
28
31
|
constructor(props: INSBoxTextProps)
|
|
29
32
|
{
|
|
30
33
|
super(props);
|
|
31
|
-
this.state = { value: props.defaultValue ?? "" };
|
|
34
|
+
this.state = { value: props.defaultValue ?? "", isFullScreen: false };
|
|
32
35
|
this.getValue = this.getValue.bind(this);
|
|
33
36
|
this.setValue = this.setValue.bind(this);
|
|
34
37
|
this.onChanged = this.onChanged.bind(this);
|
|
38
|
+
this.toggleFullScreen = this.toggleFullScreen.bind(this);
|
|
35
39
|
}
|
|
40
|
+
|
|
36
41
|
getError(): string | null
|
|
37
42
|
{
|
|
38
43
|
return (
|
|
@@ -40,32 +45,69 @@ export class NSBoxText extends React.Component<INSBoxTextProps, INSBoxTextState>
|
|
|
40
45
|
Validator.getErrorString(this.props.title, this.state.value, this.props)
|
|
41
46
|
);
|
|
42
47
|
}
|
|
48
|
+
|
|
43
49
|
getValue(): string
|
|
44
50
|
{
|
|
45
51
|
let error = this.getError();
|
|
46
52
|
if (error)
|
|
47
53
|
{
|
|
48
54
|
this.setState({ error });
|
|
49
|
-
throw new Error(error);
|
|
55
|
+
// throw new Error(error);
|
|
56
|
+
return '';
|
|
50
57
|
}
|
|
51
58
|
return this.state.value;
|
|
52
59
|
}
|
|
60
|
+
|
|
53
61
|
setValue(value: string): void
|
|
54
62
|
{
|
|
55
63
|
this.setState({ value });
|
|
56
64
|
}
|
|
65
|
+
|
|
57
66
|
private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
|
|
58
67
|
{
|
|
59
68
|
this.setValue(e.target.value);
|
|
60
69
|
if (this.props.onChanged)
|
|
70
|
+
{
|
|
61
71
|
this.props.onChanged(e);
|
|
72
|
+
}
|
|
62
73
|
}
|
|
74
|
+
|
|
75
|
+
private toggleFullScreen(): void
|
|
76
|
+
{
|
|
77
|
+
this.setState(prevState => ({ isFullScreen: !prevState.isFullScreen }), () =>
|
|
78
|
+
{
|
|
79
|
+
console.log("isFullScreen state updated:", this.state.isFullScreen);
|
|
80
|
+
});
|
|
81
|
+
}
|
|
82
|
+
|
|
63
83
|
override render()
|
|
64
84
|
{
|
|
65
85
|
return (
|
|
66
86
|
<>
|
|
67
|
-
<div className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")}`} style={this.props.style}>
|
|
68
|
-
<
|
|
87
|
+
<div className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")} ${this.state.isFullScreen ? Styles.ns_full_screen : ""}`} style={this.props.style}>
|
|
88
|
+
<div className="d-flex justify-content-between align-items-center">
|
|
89
|
+
<span className={Styles.ns_input_title}>
|
|
90
|
+
{this.props.required && <span style={{ color: "red" }}>*</span>} {this.props.title}
|
|
91
|
+
</span>
|
|
92
|
+
<div className="d-flex gap-1">
|
|
93
|
+
<button className={Styles.ns_btn_box} onClick={() => CopyToClipboard.copyToClipboard(this.getValue())}>
|
|
94
|
+
<img
|
|
95
|
+
src={IconCopy}
|
|
96
|
+
alt="Copy"
|
|
97
|
+
width={14}
|
|
98
|
+
height={14}
|
|
99
|
+
/>
|
|
100
|
+
</button>
|
|
101
|
+
<button className={Styles.ns_btn_box} onClick={this.toggleFullScreen}>
|
|
102
|
+
<img
|
|
103
|
+
src={IconFullScreen}
|
|
104
|
+
alt="FullScreen"
|
|
105
|
+
width={14}
|
|
106
|
+
height={14}
|
|
107
|
+
/>
|
|
108
|
+
</button>
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
69
111
|
<img
|
|
70
112
|
className={Styles.ns_input_icon}
|
|
71
113
|
src={IconInputText}
|
|
@@ -86,4 +128,6 @@ export class NSBoxText extends React.Component<INSBoxTextProps, INSBoxTextState>
|
|
|
86
128
|
</>
|
|
87
129
|
);
|
|
88
130
|
}
|
|
89
|
-
}
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
export default NSBoxText;
|
|
@@ -35,4 +35,39 @@
|
|
|
35
35
|
.ns_text_area_title {
|
|
36
36
|
font-size: 16px;
|
|
37
37
|
font-weight: 400;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.ns_btn_box {
|
|
41
|
+
color: #000;
|
|
42
|
+
border: none;
|
|
43
|
+
cursor: pointer;
|
|
44
|
+
width: max-content;
|
|
45
|
+
background-color: transparent;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.ns_input_parent:hover .ns_btn_box {
|
|
49
|
+
opacity: 1;
|
|
50
|
+
visibility: visible;
|
|
51
|
+
transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.ns_btn_box img {
|
|
55
|
+
position: inherit;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.ns_full_screen {
|
|
59
|
+
position: fixed;
|
|
60
|
+
top: 0;
|
|
61
|
+
left: 0;
|
|
62
|
+
width: 100%;
|
|
63
|
+
height: 100%;
|
|
64
|
+
background: #0101015c;
|
|
65
|
+
z-index: 1000;
|
|
66
|
+
padding: 5%;
|
|
67
|
+
max-width: 100% !important;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.ns_full_screen input {
|
|
71
|
+
width: 100% !important;
|
|
72
|
+
max-width: 100%;
|
|
38
73
|
}
|
|
@@ -8,6 +8,10 @@ import { IValidationStringProps } from "../props/IValidationStringProps";
|
|
|
8
8
|
import { Validator } from "../Validator";
|
|
9
9
|
import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
|
|
10
10
|
import IconInputString from '../assets/images/icon-input-string.svg';
|
|
11
|
+
import IconFullScreen from '../assets/images/icon-fullscreen.png';
|
|
12
|
+
import IconCopy from '../assets/images/icon-copy.png';
|
|
13
|
+
import CopyToClipboard from '../CopyToClipboard';
|
|
14
|
+
|
|
11
15
|
export interface INSBoxTextAreaProps extends IBaseComponentProps, IValidationProps, IValidationStringProps
|
|
12
16
|
{
|
|
13
17
|
title: string;
|
|
@@ -22,6 +26,7 @@ export interface INSBoxTextAreaState
|
|
|
22
26
|
{
|
|
23
27
|
value: string;
|
|
24
28
|
error?: string;
|
|
29
|
+
isFullScreen: boolean;
|
|
25
30
|
}
|
|
26
31
|
|
|
27
32
|
export class NSBoxTextArea extends React.Component<INSBoxTextAreaProps, INSBoxTextAreaState>
|
|
@@ -29,10 +34,11 @@ export class NSBoxTextArea extends React.Component<INSBoxTextAreaProps, INSBoxTe
|
|
|
29
34
|
constructor(props: INSBoxTextAreaProps)
|
|
30
35
|
{
|
|
31
36
|
super(props);
|
|
32
|
-
this.state = { value: props.defaultValue ?? "" };
|
|
37
|
+
this.state = { value: props.defaultValue ?? "", isFullScreen: false };
|
|
33
38
|
this.getValue = this.getValue.bind(this);
|
|
34
39
|
this.setValue = this.setValue.bind(this);
|
|
35
40
|
this.onChanged = this.onChanged.bind(this);
|
|
41
|
+
this.toggleFullScreen = this.toggleFullScreen.bind(this);
|
|
36
42
|
}
|
|
37
43
|
getError(): string | null
|
|
38
44
|
{
|
|
@@ -47,7 +53,8 @@ export class NSBoxTextArea extends React.Component<INSBoxTextAreaProps, INSBoxTe
|
|
|
47
53
|
if (error)
|
|
48
54
|
{
|
|
49
55
|
this.setState({ error });
|
|
50
|
-
throw new Error(error);
|
|
56
|
+
// throw new Error(error);
|
|
57
|
+
return '';
|
|
51
58
|
}
|
|
52
59
|
return this.state.value;
|
|
53
60
|
|
|
@@ -62,12 +69,38 @@ export class NSBoxTextArea extends React.Component<INSBoxTextAreaProps, INSBoxTe
|
|
|
62
69
|
if (this.props.onChanged)
|
|
63
70
|
this.props.onChanged();
|
|
64
71
|
}
|
|
72
|
+
private toggleFullScreen(): void
|
|
73
|
+
{
|
|
74
|
+
this.setState(prevState => ({ isFullScreen: !prevState.isFullScreen }));
|
|
75
|
+
}
|
|
65
76
|
override render()
|
|
66
77
|
{
|
|
67
78
|
return (
|
|
68
79
|
<>
|
|
69
|
-
<div className={`${Styles.ns_text_area_parent} ${this.props.classList?.join(" ")}`} style={this.props.style}>
|
|
70
|
-
<
|
|
80
|
+
<div className={`${Styles.ns_text_area_parent} ${this.props.classList?.join(" ")} ${this.state.isFullScreen ? Styles.ns_full_screen : ""}`} style={this.props.style}>
|
|
81
|
+
<div className="d-flex justify-content-between align-items-center">
|
|
82
|
+
<span className={Styles.ns_input_title}>
|
|
83
|
+
{this.props.required && <span style={{ color: "red" }}>*</span>} {this.props.title}
|
|
84
|
+
</span>
|
|
85
|
+
<div className="d-flex gap-1">
|
|
86
|
+
<button className={Styles.ns_btn_box} onClick={() => CopyToClipboard.copyToClipboard(this.getValue())}>
|
|
87
|
+
<img
|
|
88
|
+
src={IconCopy}
|
|
89
|
+
alt="Copy"
|
|
90
|
+
width={14}
|
|
91
|
+
height={14}
|
|
92
|
+
/>
|
|
93
|
+
</button>
|
|
94
|
+
<button className={Styles.ns_btn_box} onClick={this.toggleFullScreen}>
|
|
95
|
+
<img
|
|
96
|
+
src={IconFullScreen}
|
|
97
|
+
alt="FullScreen"
|
|
98
|
+
width={14}
|
|
99
|
+
height={14}
|
|
100
|
+
/>
|
|
101
|
+
</button>
|
|
102
|
+
</div>
|
|
103
|
+
</div>
|
|
71
104
|
<div className={Styles.ns_text_area_container}>
|
|
72
105
|
<figure className={Styles.ns_text_area_icon_container}>
|
|
73
106
|
<img
|