namirasoft-site-react 1.3.44 → 1.3.45

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 (8) hide show
  1. package/dist/components/NSButton.module.css +2 -1
  2. package/dist/components/NSTable.js +1 -1
  3. package/dist/components/NSTable.js.map +1 -1
  4. package/dist/components/NSTable.module.css +23 -5
  5. package/package.json +2 -2
  6. package/src/components/NSButton.module.css +2 -1
  7. package/src/components/NSTable.module.css +23 -5
  8. package/src/components/NSTable.tsx +5 -2
package/dist/components/NSButton.module.css CHANGED
@@ -8,5 +8,6 @@
8
8
  text-decoration: none;
9
9
  color: black;
10
10
  background-color: transparent;
11
- padding: 12px 48px;
11
+ width: 128px;
12
+ height: 48px;
12
13
  }
package/dist/components/NSTable.js CHANGED
@@ -29,7 +29,7 @@ export class NSTable extends Component {
29
29
  return this.props.getCell(row, column, rowIndex, columnIndex);
30
30
  return row[column];
31
31
  };
32
- return (_jsxs("div", { className: `container ${Styles.ns_project_list_container}`, children: [_jsx("section", { className: Styles.ns_search_input, children: _jsx(NSInputSearch, {}) }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsxs("table", { className: Styles.ns_table, children: [_jsx("thead", { className: Styles.ns_thead, children: _jsx("tr", { children: column_keys.map(column_key => _jsx("th", { scope: "col", children: this.state.columns[column_key] }, column_key)) }) }), _jsx("tbody", { className: Styles.ns_tbody, children: this.state.rows.map((row, rowIndex) => _jsx("tr", { onClick: () => this.setState({ modalState: !this.state.modalState }), children: column_keys.map((column, columnIndex) => (_jsx("td", Object.assign({}, getColumnAttributes(column, columnIndex), { "data-label": this.state.columns[column], children: getCell(row, column, rowIndex, columnIndex) })))) }, this.props.getRowKey(row, rowIndex))) })] }), _jsx(NSSpace, { size: NSSpaceSizeType.MICRO }), _jsxs("section", { className: Styles.ns_button_group, children: [_jsx(NSPagination, { size: 50, page: 5 }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsx(NSButton, { title: 'Export', icon: { src: "/assets/images/export-vector.png" }, onClick: () => { }, background: { color: "" }, border: '1px solid rgba(255, 148, 50, 1)' })] }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsxs("section", { onClick: () => this.setState({ modalState: !this.state.modalState }), className: Styles.ns_modal, style: { display: this.state.modalState ? "block" : "none" }, children: [_jsx("a", { children: _jsx("img", { src: '/assets/images/close-vector.png' }) }), _jsx("p", { children: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur vitae diam non enim vestibulum interdum. Duis condimentum augue id magna semper rutrum. Nullam sit amet magna in magna gravida vehicula. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Mauris dictum facilisis augue. Phasellus faucibus molestie nisl. Aliquam ante. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. In convallis. Phasellus rhoncus.." })] })] }));
32
+ return (_jsxs("div", { className: `container ${Styles.ns_project_list_container}`, children: [_jsx("section", { className: Styles.ns_search_input, children: _jsx(NSInputSearch, {}) }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsxs("table", { className: Styles.ns_table, children: [_jsx("thead", { className: Styles.ns_thead, children: _jsx("tr", { children: column_keys.map(column_key => _jsx("th", { scope: "col", children: this.state.columns[column_key] }, column_key)) }) }), _jsx("tbody", { className: Styles.ns_tbody, children: this.state.rows.map((row, rowIndex) => _jsx("tr", { onClick: () => this.setState({ modalState: !this.state.modalState }), children: column_keys.map((column, columnIndex) => (_jsx("td", Object.assign({}, getColumnAttributes(column, columnIndex), { "data-label": this.state.columns[column], children: getCell(row, column, rowIndex, columnIndex) })))) }, this.props.getRowKey(row, rowIndex))) })] }), _jsx(NSSpace, { size: NSSpaceSizeType.MICRO }), _jsxs("section", { className: Styles.ns_pagination_button, children: [_jsx(NSPagination, { size: 50, page: 5 }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsxs("div", { className: Styles.ns_button, children: [_jsx(NSButton, { title: 'Export', icon: { src: "/assets/images/export-vector.png" }, onClick: () => { }, border: '1px solid rgba(255, 148, 50, 1)' }), _jsx(NSButton, { title: 'Refresh', icon: { src: "/assets/images/export-vector.png" }, onClick: () => { }, border: '1px solid rgba(3, 119, 255, 1)' })] })] }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsxs("section", { onClick: () => this.setState({ modalState: !this.state.modalState }), className: Styles.ns_modal, style: { display: this.state.modalState ? "block" : "none" }, children: [_jsx("a", { children: _jsx("img", { src: '/assets/images/close-vector.png' }) }), _jsx("p", { children: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur vitae diam non enim vestibulum interdum. Duis condimentum augue id magna semper rutrum. Nullam sit amet magna in magna gravida vehicula. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Mauris dictum facilisis augue. Phasellus faucibus molestie nisl. Aliquam ante. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. In convallis. Phasellus rhoncus.." })] })] }));
33
33
  }
34
34
  }
35
35
  //# sourceMappingURL=NSTable.js.map
package/dist/components/NSTable.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NSTable.js","sourceRoot":"","sources":["../../src/components/NSTable.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"NSTable.js","sourceRoot":"","sources":["../../src/components/NSTable.tsx"],"names":[],"mappings":"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"}
package/dist/components/NSTable.module.css CHANGED
@@ -33,10 +33,18 @@
33
33
  }
34
34
 
35
35
  /* Button Group */
36
- .ns_button_group {
36
+ /* Button Group */
37
+ .ns_pagination_button {
37
38
  display: flex;
38
39
  flex-direction: column;
40
+ }
41
+
42
+ .ns_button {
43
+ display: flex;
44
+ flex-direction: row;
45
+ justify-content: space-between;
39
46
  align-items: center;
47
+ gap: 48px;
40
48
  }
41
49
 
42
50
  /* Modal */
@@ -113,14 +121,21 @@
113
121
  }
114
122
 
115
123
  /* Button Group */
116
- .ns_button_group {
124
+ .ns_pagination_button {
125
+ display: flex;
126
+ flex-direction: row;
127
+ padding: 16px 0;
128
+ }
129
+
130
+ .ns_button {
117
131
  display: flex;
118
132
  flex-direction: row;
119
133
  justify-content: space-between;
120
134
  align-items: center;
135
+ gap: 48px;
121
136
  }
122
137
 
123
- @media screen and (min-width: 990px) {
138
+ @media screen and (min-width: 1024px) {
124
139
  .ns_table {
125
140
  padding: 0 48px;
126
141
  }
@@ -139,8 +154,11 @@
139
154
  }
140
155
 
141
156
  /* Button Group */
142
- .ns_button_group {
143
- padding: 0 48px;
157
+ .ns_pagination_button {
158
+ display: flex;
159
+ flex-direction: row;
160
+ width: 100%;
161
+ padding: 16px 48px;
144
162
  }
145
163
  }
146
164
  }
package/package.json CHANGED
@@ -8,7 +8,7 @@
8
8
  "framework": "npm",
9
9
  "application": "package",
10
10
  "private": false,
11
- "version": "1.3.44",
11
+ "version": "1.3.45",
12
12
  "author": "Amir Abolhasani, Alireza Esmaeeli, Hooman Shashaeh",
13
13
  "license": "MIT",
14
14
  "main": "./dist/main.js",
@@ -24,7 +24,7 @@
24
24
  "@types/node": "^20.12.7",
25
25
  "@types/react": "^18.2.78",
26
26
  "@types/react-dom": "^18.2.25",
27
- "antd": "^5.16.1",
27
+ "antd": "^5.16.2",
28
28
  "bootstrap": "^5.3.3",
29
29
  "link-react": "^3.0.0",
30
30
  "namirasoft-api-link": "^1.3.1",
package/src/components/NSButton.module.css CHANGED
@@ -8,5 +8,6 @@
8
8
  text-decoration: none;
9
9
  color: black;
10
10
  background-color: transparent;
11
- padding: 12px 48px;
11
+ width: 128px;
12
+ height: 48px;
12
13
  }
package/src/components/NSTable.module.css CHANGED
@@ -33,10 +33,18 @@
33
33
  }
34
34
 
35
35
  /* Button Group */
36
- .ns_button_group {
36
+ /* Button Group */
37
+ .ns_pagination_button {
37
38
  display: flex;
38
39
  flex-direction: column;
40
+ }
41
+
42
+ .ns_button {
43
+ display: flex;
44
+ flex-direction: row;
45
+ justify-content: space-between;
39
46
  align-items: center;
47
+ gap: 48px;
40
48
  }
41
49
 
42
50
  /* Modal */
@@ -113,14 +121,21 @@
113
121
  }
114
122
 
115
123
  /* Button Group */
116
- .ns_button_group {
124
+ .ns_pagination_button {
125
+ display: flex;
126
+ flex-direction: row;
127
+ padding: 16px 0;
128
+ }
129
+
130
+ .ns_button {
117
131
  display: flex;
118
132
  flex-direction: row;
119
133
  justify-content: space-between;
120
134
  align-items: center;
135
+ gap: 48px;
121
136
  }
122
137
 
123
- @media screen and (min-width: 990px) {
138
+ @media screen and (min-width: 1024px) {
124
139
  .ns_table {
125
140
  padding: 0 48px;
126
141
  }
@@ -139,8 +154,11 @@
139
154
  }
140
155
 
141
156
  /* Button Group */
142
- .ns_button_group {
143
- padding: 0 48px;
157
+ .ns_pagination_button {
158
+ display: flex;
159
+ flex-direction: row;
160
+ width: 100%;
161
+ padding: 16px 48px;
144
162
  }
145
163
  }
146
164
  }
package/src/components/NSTable.tsx CHANGED
@@ -81,10 +81,13 @@ export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableSt
81
81
  </tbody >
82
82
  </table>
83
83
  <NSSpace size={NSSpaceSizeType.MICRO} />
84
- <section className={Styles.ns_button_group}>
84
+ <section className={Styles.ns_pagination_button}>
85
85
  <NSPagination size={50} page={5} />
86
86
  <NSSpace size={NSSpaceSizeType.SMALL} />
87
- <NSButton title='Export' icon={{ src: "/assets/images/export-vector.png" }} onClick={() => { }} background={{ color: "" }} border='1px solid rgba(255, 148, 50, 1)' />
87
+ <div className={Styles.ns_button}>
88
+ <NSButton title='Export' icon={{ src: "/assets/images/export-vector.png" }} onClick={() => { }} border='1px solid rgba(255, 148, 50, 1)' />
89
+ <NSButton title='Refresh' icon={{ src: "/assets/images/export-vector.png" }} onClick={() => { }} border='1px solid rgba(3, 119, 255, 1)' />
90
+ </div>
88
91
  </section>
89
92
  <NSSpace size={NSSpaceSizeType.SMALL} />
90
93
  <section onClick={() => this.setState({ modalState: !this.state.modalState })} className={Styles.ns_modal} style={{ display: this.state.modalState ? "block" : "none" }}>