namirasoft-site-react 1.2.41 → 1.2.43

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.
Files changed (181) hide show
  1. package/.gitlab-ci.yml +14 -14
  2. package/config-overrides.js +65 -65
  3. package/dist/App.d.ts +3 -3
  4. package/dist/App.js +8 -8
  5. package/dist/assets/images/arrow.svg +3 -3
  6. package/dist/assets/images/danger.svg +3 -3
  7. package/dist/assets/images/exit.svg +3 -3
  8. package/dist/assets/images/icon-input-date.svg +9 -9
  9. package/dist/assets/images/icon-input-duration.svg +9 -9
  10. package/dist/assets/images/icon-input-email.svg +9 -9
  11. package/dist/assets/images/icon-input-float.svg +9 -9
  12. package/dist/assets/images/icon-input-id.svg +9 -9
  13. package/dist/assets/images/icon-input-integer.svg +9 -9
  14. package/dist/assets/images/icon-input-phone.svg +9 -9
  15. package/dist/assets/images/icon-input-price.svg +9 -9
  16. package/dist/assets/images/icon-input-search.svg +4 -4
  17. package/dist/assets/images/icon-input-string.svg +9 -9
  18. package/dist/assets/images/icon-input-text.svg +9 -9
  19. package/dist/assets/images/icon-input-time.svg +9 -9
  20. package/dist/assets/images/logo.svg +9 -9
  21. package/dist/assets/images/menu.svg +3 -3
  22. package/dist/assets/images/namira.svg +9 -9
  23. package/dist/assets/images/rectangle.svg +3 -3
  24. package/dist/components/NSButtonGreen.d.ts +16 -16
  25. package/dist/components/NSButtonGreen.js +16 -16
  26. package/dist/components/NSButtonRed.d.ts +16 -16
  27. package/dist/components/NSButtonRed.js +16 -16
  28. package/dist/components/NSCard.d.ts +20 -20
  29. package/dist/components/NSCard.js +12 -12
  30. package/dist/components/NSFooter.d.ts +20 -20
  31. package/dist/components/NSFooter.js +46 -46
  32. package/dist/components/NSHeader.d.ts +23 -23
  33. package/dist/components/NSHeader.js +60 -60
  34. package/dist/components/NSInputDate.d.ts +15 -15
  35. package/dist/components/NSInputDate.js +27 -27
  36. package/dist/components/NSInputDuration.d.ts +15 -15
  37. package/dist/components/NSInputDuration.js +28 -28
  38. package/dist/components/NSInputEmail.d.ts +16 -16
  39. package/dist/components/NSInputEmail.js +36 -36
  40. package/dist/components/NSInputEmail.module.css +37 -37
  41. package/dist/components/NSInputFloat.d.ts +15 -15
  42. package/dist/components/NSInputFloat.js +28 -28
  43. package/dist/components/NSInputFloat.module.css +25 -25
  44. package/dist/components/NSInputIP.d.ts +15 -15
  45. package/dist/components/NSInputIP.js +28 -28
  46. package/dist/components/NSInputIP.module.css +25 -25
  47. package/dist/components/NSInputInteger.d.ts +15 -15
  48. package/dist/components/NSInputInteger.js +28 -28
  49. package/dist/components/NSInputInteger.module.css +25 -25
  50. package/dist/components/NSInputPhone.d.ts +16 -16
  51. package/dist/components/NSInputPhone.js +30 -30
  52. package/dist/components/NSInputPhone.module.css +32 -32
  53. package/dist/components/NSInputPrice.d.ts +17 -17
  54. package/dist/components/NSInputPrice.js +31 -31
  55. package/dist/components/NSInputPrice.module.css +26 -26
  56. package/dist/components/NSInputSearch.d.ts +17 -17
  57. package/dist/components/NSInputSearch.js +37 -37
  58. package/dist/components/NSInputSearch.module.css +25 -25
  59. package/dist/components/NSInputString.d.ts +17 -17
  60. package/dist/components/NSInputString.js +31 -31
  61. package/dist/components/NSInputString.module.css +26 -26
  62. package/dist/components/NSInputText.d.ts +17 -17
  63. package/dist/components/NSInputText.js +31 -31
  64. package/dist/components/NSInputText.module.css +27 -27
  65. package/dist/components/NSInputTime.d.ts +15 -15
  66. package/dist/components/NSInputTime.js +28 -28
  67. package/dist/components/NSInputTime.module.css +26 -26
  68. package/dist/components/NSLayout.d.ts +8 -8
  69. package/dist/components/NSLayout.js +8 -8
  70. package/dist/components/NSLayout.module.css +16 -16
  71. package/dist/components/NSLayoutHeroBanner.d.ts +12 -12
  72. package/dist/components/NSLayoutHeroBanner.js +8 -8
  73. package/dist/components/NSLayoutHeroBanner.module.css +43 -43
  74. package/dist/components/NSLayoutTitle.d.ts +10 -10
  75. package/dist/components/NSLayoutTitle.js +6 -6
  76. package/dist/components/NSLinkGreen.d.ts +16 -16
  77. package/dist/components/NSLinkGreen.js +20 -20
  78. package/dist/components/NSLinkGreen.module.css +15 -15
  79. package/dist/components/NSLinkRed.d.ts +16 -16
  80. package/dist/components/NSLinkRed.js +20 -20
  81. package/dist/components/NSLinkRed.module.css +15 -15
  82. package/dist/components/NSPagination.d.ts +15 -15
  83. package/dist/components/NSPagination.js +35 -35
  84. package/dist/components/NSPagination.module.css +24 -24
  85. package/dist/components/NSParentCard.module.css +34 -34
  86. package/dist/components/NSSelectBox.d.ts +16 -16
  87. package/dist/components/NSSelectBox.js +24 -24
  88. package/dist/components/NSSelectBox.module.css +28 -28
  89. package/dist/components/NSTable.d.ts +28 -28
  90. package/dist/components/NSTable.js +20 -20
  91. package/dist/components/NSTable.modules.css +76 -76
  92. package/dist/index.d.ts +1 -1
  93. package/dist/index.js +6 -6
  94. package/dist/main.d.ts +26 -26
  95. package/dist/main.js +26 -26
  96. package/dist/pages/NSLoginPage.d.ts +13 -13
  97. package/dist/pages/NSLoginPage.js +17 -17
  98. package/dist/pages/NSLoginPage.js.map +1 -1
  99. package/package.json +52 -52
  100. package/public/index.html +42 -42
  101. package/public/manifest.json +25 -25
  102. package/public/robots.txt +3 -3
  103. package/src/App.tsx +70 -70
  104. package/src/assets/images/arrow.svg +3 -3
  105. package/src/assets/images/danger.svg +3 -3
  106. package/src/assets/images/exit.svg +3 -3
  107. package/src/assets/images/icon-input-date.svg +9 -9
  108. package/src/assets/images/icon-input-duration.svg +9 -9
  109. package/src/assets/images/icon-input-email.svg +9 -9
  110. package/src/assets/images/icon-input-float.svg +9 -9
  111. package/src/assets/images/icon-input-id.svg +9 -9
  112. package/src/assets/images/icon-input-integer.svg +9 -9
  113. package/src/assets/images/icon-input-phone.svg +9 -9
  114. package/src/assets/images/icon-input-price.svg +9 -9
  115. package/src/assets/images/icon-input-search.svg +4 -4
  116. package/src/assets/images/icon-input-string.svg +9 -9
  117. package/src/assets/images/icon-input-text.svg +9 -9
  118. package/src/assets/images/icon-input-time.svg +9 -9
  119. package/src/assets/images/logo.svg +9 -9
  120. package/src/assets/images/menu.svg +3 -3
  121. package/src/assets/images/namira.svg +9 -9
  122. package/src/assets/images/rectangle.svg +3 -3
  123. package/src/components/NSButtonGreen.tsx +33 -33
  124. package/src/components/NSButtonRed.tsx +33 -33
  125. package/src/components/NSCard.tsx +54 -54
  126. package/src/components/NSFooter.tsx +123 -123
  127. package/src/components/NSHeader.tsx +134 -134
  128. package/src/components/NSInputDate.tsx +57 -57
  129. package/src/components/NSInputDuration.tsx +65 -65
  130. package/src/components/NSInputEmail.module.css +37 -37
  131. package/src/components/NSInputEmail.tsx +92 -92
  132. package/src/components/NSInputFloat.module.css +25 -25
  133. package/src/components/NSInputFloat.tsx +61 -61
  134. package/src/components/NSInputIP.module.css +25 -25
  135. package/src/components/NSInputIP.tsx +65 -65
  136. package/src/components/NSInputInteger.module.css +25 -25
  137. package/src/components/NSInputInteger.tsx +65 -65
  138. package/src/components/NSInputPhone.module.css +32 -32
  139. package/src/components/NSInputPhone.tsx +65 -65
  140. package/src/components/NSInputPrice.module.css +26 -26
  141. package/src/components/NSInputPrice.tsx +68 -68
  142. package/src/components/NSInputSearch.module.css +25 -25
  143. package/src/components/NSInputSearch.tsx +78 -78
  144. package/src/components/NSInputString.module.css +26 -26
  145. package/src/components/NSInputString.tsx +66 -66
  146. package/src/components/NSInputText.module.css +27 -27
  147. package/src/components/NSInputText.tsx +69 -69
  148. package/src/components/NSInputTime.module.css +26 -26
  149. package/src/components/NSInputTime.tsx +65 -65
  150. package/src/components/NSLayout.module.css +16 -16
  151. package/src/components/NSLayout.tsx +30 -30
  152. package/src/components/NSLayoutHeroBanner.module.css +43 -43
  153. package/src/components/NSLayoutHeroBanner.tsx +85 -85
  154. package/src/components/NSLayoutTitle.tsx +25 -25
  155. package/src/components/NSLinkGreen.module.css +15 -15
  156. package/src/components/NSLinkGreen.tsx +43 -43
  157. package/src/components/NSLinkRed.module.css +15 -15
  158. package/src/components/NSLinkRed.tsx +43 -43
  159. package/src/components/NSPagination.module.css +24 -24
  160. package/src/components/NSPagination.tsx +54 -54
  161. package/src/components/NSParentCard.module.css +34 -34
  162. package/src/components/NSParentCard.tsx.temp +58 -58
  163. package/src/components/NSSelectBox.module.css +28 -28
  164. package/src/components/NSSelectBox.tsx +62 -62
  165. package/src/components/NSTable.modules.css +76 -76
  166. package/src/components/NSTable.tsx +64 -64
  167. package/src/index.tsx +7 -7
  168. package/src/main.ts +25 -25
  169. package/src/pages/NSLoginPage.tsx +39 -39
  170. package/src/react-app-env.d.ts +1 -1
  171. package/tsconfig.json +37 -37
  172. package/dist/App.css +0 -0
  173. package/dist/assets/images/background.svg +0 -9
  174. package/dist/assets/images/left-vector.png +0 -0
  175. package/dist/assets/images/left_vector.png +0 -0
  176. package/dist/assets/images/right-vector.png +0 -0
  177. package/dist/assets/images/right_vector.png +0 -0
  178. package/dist/components/NSParentCard.d.ts +0 -0
  179. package/dist/components/NSParentCard.js +0 -2
  180. package/dist/components/NSParentCard.js.map +0 -1
  181. package/dist/index.css +0 -6
@@ -1,135 +1,135 @@
1
- "use client";
2
-
3
- import React from "react";
4
- import Styles from "./NSHeader.module.css";
5
-
6
- import NavDropdown from 'react-bootstrap/NavDropdown';
7
- import { NamirasoftAPILinkServer, FilterLinkRow } from 'namirasoft-api-link';
8
-
9
- interface IProps
10
- {
11
- scope: string;
12
- name: string;
13
- logo: string;
14
- }
15
-
16
- interface IState
17
- {
18
- filters: FilterLinkRow[];
19
- selected: FilterLinkRow | null;
20
- showNavbar: boolean;
21
- }
22
-
23
- export class NSHeader extends React.Component<IProps, IState> {
24
- constructor(props: IProps)
25
- {
26
- super(props);
27
- this.state = {
28
- filters: [],
29
- selected: null,
30
- showNavbar: false
31
- };
32
- this.hasChild = this.hasChild.bind(this);
33
- this.onMenuItemToggled = this.onMenuItemToggled.bind(this);
34
- this.render_menu = this.render_menu.bind(this);
35
- this.render_menuItem = this.render_menuItem.bind(this);
36
- this.handleShowNavbar = this.handleShowNavbar.bind(this);
37
- }
38
- override componentDidMount(): void
39
- {
40
- let server = new NamirasoftAPILinkServer(console.error);
41
- server.filter.GetFilters(this.props.scope, this.props.name).then(filters =>
42
- {
43
- this.setState({ filters });
44
- });
45
- }
46
- private onMenuItemToggled(checked: boolean, selected: FilterLinkRow)
47
- {
48
- if (checked)
49
- this.setState({ selected });
50
- }
51
- private hasChild(id: number): boolean
52
- {
53
- return this.state.filters.filter(f => f.parent_id === id).length > 0;
54
- }
55
- handleShowNavbar(): void
56
- {
57
- this.setState({ showNavbar: !this.state.showNavbar });
58
- }
59
- override render()
60
- {
61
- return (
62
- <nav className={Styles.ns_navbar}>
63
- <div className={`${Styles.ns_navbar_parent_content} container`}>
64
- <img
65
- src={this.props.logo}
66
- alt="Logo"
67
- width={48}
68
- height={48}
69
- />
70
- <div className={`${Styles.ns_navbar_content} `} >
71
- <div className={`${Styles.ns_navbar_elements} ${this.state.showNavbar && Styles.ns_navbar_active}`}>
72
- {this.render_menu(0, null)}
73
- </div>
74
- <div className={`${Styles.ns_navbar_login_status}`}>
75
- <span className={`${Styles.ns_navbar_usersname}`}>name</span>
76
- <img src='../assets/images/exit.svg'
77
- alt="Exit"
78
- width={20}
79
- height={20}
80
- />
81
- </div>
82
- <div className={Styles.ns_navbar_menu_icon} onClick={this.handleShowNavbar}>
83
- <img
84
- src='../assets/images/menu.svg'
85
- alt="Menu"
86
- width={19}
87
- height={17}
88
- />
89
- </div>
90
- </div>
91
- </div>
92
- </nav>
93
- );
94
- }
95
- private render_menu(level: number, parent_id: number | null)
96
- {
97
- let fs: FilterLinkRow[] = this.state.filters?.filter(f => f.parent_id === parent_id);
98
- return (
99
- <div className={`me-auto nav ${Styles.ns_navbar_items_container}`} >
100
- {(fs?.map(f => this.render_menuItem(level, f)))}
101
- </div>
102
- );
103
- }
104
- private render_menuItem(level: number, filter: FilterLinkRow)
105
- {
106
- if (this.hasChild(filter.id))
107
- {
108
- let sub_menus = <></>;
109
- if (level === 0)
110
- if (this.state.selected)
111
- {
112
- sub_menus =
113
- <div
114
- id={`dropdown_items${filter.id}`}>
115
- {this.render_menu(1, this.state.selected.id)}
116
- </div >
117
- }
118
- return (<>
119
- <NavDropdown
120
- onToggle={(checked) => this.onMenuItemToggled(checked, filter)}
121
- className={level === 0 ? Styles.ns_navbar_first_level_item : Styles.ns_navbar_second_level_item}
122
- title={filter.name}
123
- id={`dropdown_parent${filter.id}`}>
124
- {sub_menus}
125
- </NavDropdown >
126
- </>
127
- );
128
- } else
129
- {
130
- return (
131
- <a className={`${Styles.ns_navbar_items_link} ${level === 0 ? Styles.ns_navbar_first_level_item : Styles.ns_navbar_second_level_item}`} href={filter.link?.url}>{filter.name}</a>
132
- );
133
- }
134
- }
1
+ "use client";
2
+
3
+ import React from "react";
4
+ import Styles from "./NSHeader.module.css";
5
+
6
+ import NavDropdown from 'react-bootstrap/NavDropdown';
7
+ import { NamirasoftAPILinkServer, FilterLinkRow } from 'namirasoft-api-link';
8
+
9
+ interface IProps
10
+ {
11
+ scope: string;
12
+ name: string;
13
+ logo: string;
14
+ }
15
+
16
+ interface IState
17
+ {
18
+ filters: FilterLinkRow[];
19
+ selected: FilterLinkRow | null;
20
+ showNavbar: boolean;
21
+ }
22
+
23
+ export class NSHeader extends React.Component<IProps, IState> {
24
+ constructor(props: IProps)
25
+ {
26
+ super(props);
27
+ this.state = {
28
+ filters: [],
29
+ selected: null,
30
+ showNavbar: false
31
+ };
32
+ this.hasChild = this.hasChild.bind(this);
33
+ this.onMenuItemToggled = this.onMenuItemToggled.bind(this);
34
+ this.render_menu = this.render_menu.bind(this);
35
+ this.render_menuItem = this.render_menuItem.bind(this);
36
+ this.handleShowNavbar = this.handleShowNavbar.bind(this);
37
+ }
38
+ override componentDidMount(): void
39
+ {
40
+ let server = new NamirasoftAPILinkServer(console.error);
41
+ server.filter.GetFilters(this.props.scope, this.props.name).then(filters =>
42
+ {
43
+ this.setState({ filters });
44
+ });
45
+ }
46
+ private onMenuItemToggled(checked: boolean, selected: FilterLinkRow)
47
+ {
48
+ if (checked)
49
+ this.setState({ selected });
50
+ }
51
+ private hasChild(id: number): boolean
52
+ {
53
+ return this.state.filters.filter(f => f.parent_id === id).length > 0;
54
+ }
55
+ handleShowNavbar(): void
56
+ {
57
+ this.setState({ showNavbar: !this.state.showNavbar });
58
+ }
59
+ override render()
60
+ {
61
+ return (
62
+ <nav className={Styles.ns_navbar}>
63
+ <div className={`${Styles.ns_navbar_parent_content} container`}>
64
+ <img
65
+ src={this.props.logo}
66
+ alt="Logo"
67
+ width={48}
68
+ height={48}
69
+ />
70
+ <div className={`${Styles.ns_navbar_content} `} >
71
+ <div className={`${Styles.ns_navbar_elements} ${this.state.showNavbar && Styles.ns_navbar_active}`}>
72
+ {this.render_menu(0, null)}
73
+ </div>
74
+ <div className={`${Styles.ns_navbar_login_status}`}>
75
+ <span className={`${Styles.ns_navbar_usersname}`}>name</span>
76
+ <img src='../assets/images/exit.svg'
77
+ alt="Exit"
78
+ width={20}
79
+ height={20}
80
+ />
81
+ </div>
82
+ <div className={Styles.ns_navbar_menu_icon} onClick={this.handleShowNavbar}>
83
+ <img
84
+ src='../assets/images/menu.svg'
85
+ alt="Menu"
86
+ width={19}
87
+ height={17}
88
+ />
89
+ </div>
90
+ </div>
91
+ </div>
92
+ </nav>
93
+ );
94
+ }
95
+ private render_menu(level: number, parent_id: number | null)
96
+ {
97
+ let fs: FilterLinkRow[] = this.state.filters?.filter(f => f.parent_id === parent_id);
98
+ return (
99
+ <div className={`me-auto nav ${Styles.ns_navbar_items_container}`} >
100
+ {(fs?.map(f => this.render_menuItem(level, f)))}
101
+ </div>
102
+ );
103
+ }
104
+ private render_menuItem(level: number, filter: FilterLinkRow)
105
+ {
106
+ if (this.hasChild(filter.id))
107
+ {
108
+ let sub_menus = <></>;
109
+ if (level === 0)
110
+ if (this.state.selected)
111
+ {
112
+ sub_menus =
113
+ <div
114
+ id={`dropdown_items${filter.id}`}>
115
+ {this.render_menu(1, this.state.selected.id)}
116
+ </div >
117
+ }
118
+ return (<>
119
+ <NavDropdown
120
+ onToggle={(checked) => this.onMenuItemToggled(checked, filter)}
121
+ className={level === 0 ? Styles.ns_navbar_first_level_item : Styles.ns_navbar_second_level_item}
122
+ title={filter.name}
123
+ id={`dropdown_parent${filter.id}`}>
124
+ {sub_menus}
125
+ </NavDropdown >
126
+ </>
127
+ );
128
+ } else
129
+ {
130
+ return (
131
+ <a className={`${Styles.ns_navbar_items_link} ${level === 0 ? Styles.ns_navbar_first_level_item : Styles.ns_navbar_second_level_item}`} href={filter.link?.url}>{filter.name}</a>
132
+ );
133
+ }
134
+ }
135
135
  }
@@ -1,57 +1,57 @@
1
- "use client";
2
-
3
- import React from "react";
4
- import Styles from "./NSInputDate.module.css";
5
-
6
- interface IProps
7
- {
8
- title: string;
9
- }
10
-
11
- interface IState
12
- {
13
- value: string;
14
- }
15
-
16
- export class NSInputDate extends React.Component<IProps, IState> {
17
- constructor(props: IProps)
18
- {
19
- super(props);
20
- this.state = {
21
- value: "",
22
- };
23
- this.setValue = this.setValue.bind(this);
24
- this.getValue = this.getValue.bind(this);
25
- this.setDefaultValue = this.setDefaultValue.bind(this);
26
- }
27
- setValue(e: React.ChangeEvent<HTMLInputElement>): void
28
- {
29
- this.setState({ value: e.target.value });
30
- }
31
- setDefaultValue(value: string): void
32
- {
33
- this.setState({ value });
34
- }
35
- getValue(): string
36
- {
37
- return this.state.value;
38
- }
39
- override render()
40
- {
41
- return (
42
- <div className={`${Styles.ns_parent_input} p-2`}>
43
- <span className={Styles.ns_input_title}>{this.props.title}</span>
44
- <input
45
- value={this.state.value}
46
- onChange={this.setValue}
47
- type="date"
48
- className={Styles.ns_input}
49
- placeholder="YYYY/MM/DD"
50
- id="ns-input-date"
51
- />
52
- </div>
53
- );
54
- }
55
- }
56
-
57
-
1
+ "use client";
2
+
3
+ import React from "react";
4
+ import Styles from "./NSInputDate.module.css";
5
+
6
+ interface IProps
7
+ {
8
+ title: string;
9
+ }
10
+
11
+ interface IState
12
+ {
13
+ value: string;
14
+ }
15
+
16
+ export class NSInputDate extends React.Component<IProps, IState> {
17
+ constructor(props: IProps)
18
+ {
19
+ super(props);
20
+ this.state = {
21
+ value: "",
22
+ };
23
+ this.setValue = this.setValue.bind(this);
24
+ this.getValue = this.getValue.bind(this);
25
+ this.setDefaultValue = this.setDefaultValue.bind(this);
26
+ }
27
+ setValue(e: React.ChangeEvent<HTMLInputElement>): void
28
+ {
29
+ this.setState({ value: e.target.value });
30
+ }
31
+ setDefaultValue(value: string): void
32
+ {
33
+ this.setState({ value });
34
+ }
35
+ getValue(): string
36
+ {
37
+ return this.state.value;
38
+ }
39
+ override render()
40
+ {
41
+ return (
42
+ <div className={`${Styles.ns_parent_input} p-2`}>
43
+ <span className={Styles.ns_input_title}>{this.props.title}</span>
44
+ <input
45
+ value={this.state.value}
46
+ onChange={this.setValue}
47
+ type="date"
48
+ className={Styles.ns_input}
49
+ placeholder="YYYY/MM/DD"
50
+ id="ns-input-date"
51
+ />
52
+ </div>
53
+ );
54
+ }
55
+ }
56
+
57
+
@@ -1,65 +1,65 @@
1
- "use client";
2
-
3
- import React from "react";
4
- import Styles from "./NSInputDuration.module.css";
5
- import IconInputDuration from '../assets/images/icon-input-duration.svg';
6
-
7
- interface IProps
8
- {
9
- title: string;
10
- }
11
-
12
- interface IState
13
- {
14
- value: string;
15
- }
16
-
17
- export class NSInputDuration extends React.Component<IProps, IState> {
18
- constructor(props: IProps)
19
- {
20
- super(props);
21
- this.state = {
22
- value: "",
23
- };
24
- this.setValue = this.setValue.bind(this);
25
- this.getValue = this.getValue.bind(this);
26
- this.setDefaultValue = this.setDefaultValue.bind(this);
27
- }
28
- setValue(e: React.ChangeEvent<HTMLInputElement>): void
29
- {
30
- this.setState({ value: e.target.value });
31
- }
32
- setDefaultValue(value: string): void
33
- {
34
- this.setState({ value });
35
- }
36
- getValue(): string
37
- {
38
- return this.state.value;
39
- }
40
- override render()
41
- {
42
- return (
43
- <div className={`${Styles.ns_input_parent} p-2`}>
44
- <span className={Styles.ns_input_title}>{this.props.title}</span>
45
- <img
46
- className={Styles.ns_input_icon}
47
- src={IconInputDuration}
48
- alt="icon"
49
- width={24}
50
- height={24}
51
- />
52
- <input
53
- value={this.state.value}
54
- onChange={this.setValue}
55
- type="time"
56
- className={Styles.ns_input}
57
- placeholder="21:44:06"
58
- step="2"
59
- />
60
- </div>
61
- );
62
- }
63
- }
64
-
65
-
1
+ "use client";
2
+
3
+ import React from "react";
4
+ import Styles from "./NSInputDuration.module.css";
5
+ import IconInputDuration from '../assets/images/icon-input-duration.svg';
6
+
7
+ interface IProps
8
+ {
9
+ title: string;
10
+ }
11
+
12
+ interface IState
13
+ {
14
+ value: string;
15
+ }
16
+
17
+ export class NSInputDuration extends React.Component<IProps, IState> {
18
+ constructor(props: IProps)
19
+ {
20
+ super(props);
21
+ this.state = {
22
+ value: "",
23
+ };
24
+ this.setValue = this.setValue.bind(this);
25
+ this.getValue = this.getValue.bind(this);
26
+ this.setDefaultValue = this.setDefaultValue.bind(this);
27
+ }
28
+ setValue(e: React.ChangeEvent<HTMLInputElement>): void
29
+ {
30
+ this.setState({ value: e.target.value });
31
+ }
32
+ setDefaultValue(value: string): void
33
+ {
34
+ this.setState({ value });
35
+ }
36
+ getValue(): string
37
+ {
38
+ return this.state.value;
39
+ }
40
+ override render()
41
+ {
42
+ return (
43
+ <div className={`${Styles.ns_input_parent} p-2`}>
44
+ <span className={Styles.ns_input_title}>{this.props.title}</span>
45
+ <img
46
+ className={Styles.ns_input_icon}
47
+ src={IconInputDuration}
48
+ alt="icon"
49
+ width={24}
50
+ height={24}
51
+ />
52
+ <input
53
+ value={this.state.value}
54
+ onChange={this.setValue}
55
+ type="time"
56
+ className={Styles.ns_input}
57
+ placeholder="21:44:06"
58
+ step="2"
59
+ />
60
+ </div>
61
+ );
62
+ }
63
+ }
64
+
65
+
@@ -1,38 +1,38 @@
1
- .ns_input_parent {
2
- display: flex;
3
- flex-direction: column;
4
- width: 326px;
5
- color: #fff;
6
- position: relative;
7
- max-width: 100%;
8
- }
9
-
10
- .ns_input {
11
- border-radius: 8px;
12
- padding: 10px 12px;
13
- }
14
-
15
- .ns_input_icon {
16
- position: absolute;
17
- right: 20px;
18
- top: 51%;
19
- font-size: 16px;
20
- font-weight: 400;
21
- }
22
-
23
- .ns_input_title {
24
- font-size: 16px;
25
- font-weight: 400;
26
- }
27
-
28
- .ns_input_error {
29
- color: #FF3F3F !important;
30
- }
31
-
32
- .ns_input_error:focus {
33
- color: #FF3F3F !important;
34
- }
35
-
36
- .ns_input_red {
37
- border: 2px solid #FF3F3F;
1
+ .ns_input_parent {
2
+ display: flex;
3
+ flex-direction: column;
4
+ width: 326px;
5
+ color: #fff;
6
+ position: relative;
7
+ max-width: 100%;
8
+ }
9
+
10
+ .ns_input {
11
+ border-radius: 8px;
12
+ padding: 10px 12px;
13
+ }
14
+
15
+ .ns_input_icon {
16
+ position: absolute;
17
+ right: 20px;
18
+ top: 51%;
19
+ font-size: 16px;
20
+ font-weight: 400;
21
+ }
22
+
23
+ .ns_input_title {
24
+ font-size: 16px;
25
+ font-weight: 400;
26
+ }
27
+
28
+ .ns_input_error {
29
+ color: #FF3F3F !important;
30
+ }
31
+
32
+ .ns_input_error:focus {
33
+ color: #FF3F3F !important;
34
+ }
35
+
36
+ .ns_input_red {
37
+ border: 2px solid #FF3F3F;
38
38
  }