@omniumretail/component-library 1.1.47 → 1.1.49

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 (7) hide show
  1. package/dist/bundle.js +1 -1
  2. package/dist/main.css +1 -1
  3. package/dist/types/components/ResponsiveTable/index.d.ts +3 -0
  4. package/package.json +1 -1
  5. package/src/components/Navigation/styles.module.scss +1 -1
  6. package/src/components/ResponsiveTable/ResponsiveTable.stories.tsx +306 -302
  7. package/src/components/ResponsiveTable/index.tsx +11 -1
package/src/components/ResponsiveTable/ResponsiveTable.stories.tsx CHANGED
@@ -4,332 +4,336 @@ import { useState } from "react";
4
4
  import { useTranslation } from "react-i18next";
5
5
 
6
6
  export default {
7
- title: 'ResponsiveTable',
8
- component: ResponsiveTable,
7
+ title: 'ResponsiveTable',
8
+ component: ResponsiveTable,
9
9
  } as Meta;
10
10
 
11
11
  const Template: Story<ResponsiveTableCustomProps> = (args) => {
12
- const { t } = useTranslation();
13
- const [pageInfo, setPageInfo] = useState<any>({});
14
- const [rowSelectionInfo, setRowSelectionInfo] = useState<any>({});
15
- const [sortBy, setSortBy] = useState<string[]>(['id', 'desc']);
12
+ const { t } = useTranslation();
13
+ const [pageInfo, setPageInfo] = useState<any>({});
14
+ const [rowSelectionInfo, setRowSelectionInfo] = useState<any>({});
15
+ const [sortBy, setSortBy] = useState<string[]>(['id', 'desc']);
16
16
 
17
- const handleSortByColumnChange = (sortState: any) => {
18
- console.log('handleSortChange called with:', sortState);
19
- // Do something with the new sort state
20
- // For example, trigger an API call
21
- };
22
-
23
- return <ResponsiveTable scroll={{ x: 4000 }}
24
- columnsSortChange={handleSortByColumnChange} paginationInfo={setPageInfo} headingTranslationsKey={'tableHeadings'} rowSelectionInfo={setRowSelectionInfo} actionsArray={
25
- [
26
- { key: '1', label: `${t('actions.one')}`, onClick: () => {
27
- console.log('onClick');
28
- } },
29
- { key: '2', label: `${t('actions.two')}` },
30
- {
31
- key: '3', label: 'label 3'
32
- }
33
- ]
34
- } fixedColumns={[{dataIndex: 'action' , side: 'right'}]} {...args}></ResponsiveTable>;
17
+ const handleSortByColumnChange = (sortState: any) => {
18
+ console.log('handleSortChange called with:', sortState);
19
+ // Do something with the new sort state
20
+ // For example, trigger an API call
21
+ };
22
+
23
+ return <ResponsiveTable
24
+ scroll={{ x: 4000 }}
25
+ columnsSortChange={handleSortByColumnChange} paginationInfo={setPageInfo} headingTranslationsKey={'tableHeadings'} rowSelectionInfo={setRowSelectionInfo}
26
+ actionsArray={[
27
+ {
28
+ key: '1', label: `${t('actions.one')}`, onClick: () => {
29
+ console.log('onClick');
30
+ }
31
+ },
32
+ { key: '2', label: `${t('actions.two')}` },
33
+ {
34
+ key: '3', label: 'label 3'
35
+ }
36
+ ]}
37
+ fixedColumns={[{ dataIndex: 'action', side: 'right' }]} buttonActionName="POG" {...args}>
38
+ </ResponsiveTable>;
35
39
  };
36
40
 
37
41
  export const Primary = Template.bind({});
38
42
  Primary.args = {
39
- selectPlaceholder: 'Order by',
40
- rowKeyValue: 'mecanographicNumber',
41
- dataSource: [
42
- {
43
- id: `1`,
44
- name: `João Cachulo`,
45
- mecanographicNumber: "232",
46
- store: `Levi's Sta Catarina`,
47
- role: `Gerente`,
48
- type: `Efetivo`
49
- },
50
- {
51
- id: `2`,
52
- name: `Filipe Martins`,
53
- mecanographicNumber: "32",
54
- store: `Levi's Sta Catarina`,
55
- role: `Comercial`,
56
- type: `Efetivo`
57
- },
58
- {
59
- id: `3`,
60
- name: `Anna Astori`,
61
- mecanographicNumber: "3212",
62
- store: `Levi's Sta Catarina`,
63
- role: `Funcionário`,
64
- type: `Efetivo`
65
- },
66
- {
67
- id: `4`,
68
- name: `Yield Ona`,
69
- mecanographicNumber: "21232",
70
- store: `Adidas Restaurantes`,
71
- role: `Gerente`,
72
- type: `Efetivo`
73
- },
74
- {
75
- id: `5`,
76
- name: `João Cachulo`,
77
- mecanographicNumber: "232",
78
- store: `Levi's Sta Catarina`,
79
- role: `Gerente`,
80
- type: `Efetivo`
81
- },
82
- {
83
- id: `6`,
84
- name: `Filipe Martins`,
85
- mecanographicNumber: "32",
86
- store: `Levi's Sta Catarina`,
87
- role: `Comercial`,
88
- type: `Efetivo`
89
- },
90
- {
91
- id: `7`,
92
- name: `Anna Astori`,
93
- mecanographicNumber: "3212",
94
- store: `Levi's Sta Catarina`,
95
- role: `Funcionário`,
96
- type: `Efetivo`
97
- },
98
- {
99
- id: `8`,
100
- name: `Yield Ona`,
101
- mecanographicNumber: "21232",
102
- store: `Adidas Restaurantes`,
103
- role: `Gerente`,
104
- type: `Efetivo`
105
- },
106
- {
107
- id: `9`,
108
- name: `João Cachulo`,
109
- mecanographicNumber: "232",
110
- store: `Levi's Sta Catarina`,
111
- role: `Gerente`,
112
- type: `Efetivo`
113
- },
114
- {
115
- id: `10`,
116
- name: `Filipe Martins`,
117
- mecanographicNumber: "32",
118
- store: `Levi's Sta Catarina`,
119
- role: `Comercial`,
120
- type: `Efetivo`
121
- },
122
- {
123
- id: `11`,
124
- name: `Anna Astori`,
125
- mecanographicNumber: "3212",
126
- store: `Levi's Sta Catarina`,
127
- role: `Funcionário`,
128
- type: `Efetivo`
129
- },
130
- {
131
- id: `12`,
132
- name: `Yield Ona`,
133
- mecanographicNumber: "21232",
134
- store: `Adidas Restaurantes`,
135
- role: `Gerente`,
136
- type: `Efetivo`
137
- },
138
- {
139
- id: `13`,
140
- name: `João Cachulo`,
141
- mecanographicNumber: "232",
142
- store: `Levi's Sta Catarina`,
143
- role: `Gerente`,
144
- type: `Efetivo`
145
- },
146
- {
147
- id: `14`,
148
- name: `João Cachulo`,
149
- mecanographicNumber: "232",
150
- store: `Levi's Sta Catarina`,
151
- role: `Gerente`,
152
- type: `Efetivo`
153
- },
154
- {
155
- id: `15`,
156
- name: `João Cachulo`,
157
- mecanographicNumber: "232",
158
- store: `Levi's Sta Catarina`,
159
- role: `Gerente`,
160
- type: `Efetivo`
161
- },
162
- {
163
- id: `16`,
164
- name: `João Cachulo`,
165
- mecanographicNumber: "232",
166
- store: `Levi's Sta Catarina`,
167
- role: `Gerente`,
168
- type: `Efetivo`
169
- },
170
- {
171
- id: `17`,
172
- name: `João Cachulo`,
173
- mecanographicNumber: "232",
174
- store: `Levi's Sta Catarina`,
175
- role: `Gerente`,
176
- type: `Efetivo`
177
- },
178
- {
179
- id: `18`,
180
- name: `João Cachulo`,
181
- mecanographicNumber: "232",
182
- store: `Levi's Sta Catarina`,
183
- role: `Gerente`,
184
- type: `Efetivo`
185
- },
186
- ],
187
- pagination: {
188
- total: 24,
189
- pageSize: 4
43
+ selectPlaceholder: 'Order by',
44
+ rowKeyValue: 'mecanographicNumber',
45
+ dataSource: [
46
+ {
47
+ id: `1`,
48
+ name: `João Cachulo`,
49
+ mecanographicNumber: "232",
50
+ store: `Levi's Sta Catarina`,
51
+ role: `Gerente`,
52
+ type: `Efetivo`
53
+ },
54
+ {
55
+ id: `2`,
56
+ name: `Filipe Martins`,
57
+ mecanographicNumber: "32",
58
+ store: `Levi's Sta Catarina`,
59
+ role: `Comercial`,
60
+ type: `Efetivo`
61
+ },
62
+ {
63
+ id: `3`,
64
+ name: `Anna Astori`,
65
+ mecanographicNumber: "3212",
66
+ store: `Levi's Sta Catarina`,
67
+ role: `Funcionário`,
68
+ type: `Efetivo`
69
+ },
70
+ {
71
+ id: `4`,
72
+ name: `Yield Ona`,
73
+ mecanographicNumber: "21232",
74
+ store: `Adidas Restaurantes`,
75
+ role: `Gerente`,
76
+ type: `Efetivo`
77
+ },
78
+ {
79
+ id: `5`,
80
+ name: `João Cachulo`,
81
+ mecanographicNumber: "232",
82
+ store: `Levi's Sta Catarina`,
83
+ role: `Gerente`,
84
+ type: `Efetivo`
85
+ },
86
+ {
87
+ id: `6`,
88
+ name: `Filipe Martins`,
89
+ mecanographicNumber: "32",
90
+ store: `Levi's Sta Catarina`,
91
+ role: `Comercial`,
92
+ type: `Efetivo`
93
+ },
94
+ {
95
+ id: `7`,
96
+ name: `Anna Astori`,
97
+ mecanographicNumber: "3212",
98
+ store: `Levi's Sta Catarina`,
99
+ role: `Funcionário`,
100
+ type: `Efetivo`
101
+ },
102
+ {
103
+ id: `8`,
104
+ name: `Yield Ona`,
105
+ mecanographicNumber: "21232",
106
+ store: `Adidas Restaurantes`,
107
+ role: `Gerente`,
108
+ type: `Efetivo`
109
+ },
110
+ {
111
+ id: `9`,
112
+ name: `João Cachulo`,
113
+ mecanographicNumber: "232",
114
+ store: `Levi's Sta Catarina`,
115
+ role: `Gerente`,
116
+ type: `Efetivo`
117
+ },
118
+ {
119
+ id: `10`,
120
+ name: `Filipe Martins`,
121
+ mecanographicNumber: "32",
122
+ store: `Levi's Sta Catarina`,
123
+ role: `Comercial`,
124
+ type: `Efetivo`
125
+ },
126
+ {
127
+ id: `11`,
128
+ name: `Anna Astori`,
129
+ mecanographicNumber: "3212",
130
+ store: `Levi's Sta Catarina`,
131
+ role: `Funcionário`,
132
+ type: `Efetivo`
133
+ },
134
+ {
135
+ id: `12`,
136
+ name: `Yield Ona`,
137
+ mecanographicNumber: "21232",
138
+ store: `Adidas Restaurantes`,
139
+ role: `Gerente`,
140
+ type: `Efetivo`
141
+ },
142
+ {
143
+ id: `13`,
144
+ name: `João Cachulo`,
145
+ mecanographicNumber: "232",
146
+ store: `Levi's Sta Catarina`,
147
+ role: `Gerente`,
148
+ type: `Efetivo`
149
+ },
150
+ {
151
+ id: `14`,
152
+ name: `João Cachulo`,
153
+ mecanographicNumber: "232",
154
+ store: `Levi's Sta Catarina`,
155
+ role: `Gerente`,
156
+ type: `Efetivo`
157
+ },
158
+ {
159
+ id: `15`,
160
+ name: `João Cachulo`,
161
+ mecanographicNumber: "232",
162
+ store: `Levi's Sta Catarina`,
163
+ role: `Gerente`,
164
+ type: `Efetivo`
190
165
  },
191
- hiddenColumns: ['id'],
192
- sortByColumns: true,
193
- columnsToSort: ["name", "mecanographicNumber"]
166
+ {
167
+ id: `16`,
168
+ name: `João Cachulo`,
169
+ mecanographicNumber: "232",
170
+ store: `Levi's Sta Catarina`,
171
+ role: `Gerente`,
172
+ type: `Efetivo`
173
+ },
174
+ {
175
+ id: `17`,
176
+ name: `João Cachulo`,
177
+ mecanographicNumber: "232",
178
+ store: `Levi's Sta Catarina`,
179
+ role: `Gerente`,
180
+ type: `Efetivo`
181
+ },
182
+ {
183
+ id: `18`,
184
+ name: `João Cachulo`,
185
+ mecanographicNumber: "232",
186
+ store: `Levi's Sta Catarina`,
187
+ role: `Gerente`,
188
+ type: `Efetivo`
189
+ },
190
+ ],
191
+ pagination: {
192
+ total: 24,
193
+ pageSize: 4
194
+ },
195
+ hiddenColumns: ['id'],
196
+ sortByColumns: true,
197
+ columnsToSort: ["name", "mecanographicNumber"]
194
198
  };
195
199
 
196
200
  export const Secondary = Template.bind({});
197
201
  Secondary.args = {
198
- dataSource: [
199
- {
200
- key: `1`,
201
- name: `as John Brown`,
202
- mecanographicNumber: 232,
203
- store: `Levi's Sta Catarina`,
204
- role: `Gerente`,
205
- type: `Efetivo`
206
- },
207
- {
208
- key: `2`,
209
- name: `bv Mary Brown`,
210
- mecanographicNumber: 32,
211
- store: `Levi's Sta Catarina`,
212
- role: `Comercial`,
213
- type: `Efetivo`
214
- },
215
- {
216
- key: `3`,
217
- name: `as Anna Astori`,
218
- mecanographicNumber: 3212,
219
- store: `Levi's Sta Catarina`,
220
- role: `Funcionário`,
221
- type: `Efetivo`
222
- },
223
- {
224
- key: `4`,
225
- name: `bv Yield Ona`,
226
- mecanographicNumber: 21232,
227
- store: `Adidas Restaurantes`,
228
- role: `Gerente`,
229
- type: `Efetivo`
230
- },
231
- ],
232
- pagination: {
233
- total: 4,
234
- pageSize: 10
235
- }
202
+ dataSource: [
203
+ {
204
+ key: `1`,
205
+ name: `as John Brown`,
206
+ mecanographicNumber: 232,
207
+ store: `Levi's Sta Catarina`,
208
+ role: `Gerente`,
209
+ type: `Efetivo`
210
+ },
211
+ {
212
+ key: `2`,
213
+ name: `bv Mary Brown`,
214
+ mecanographicNumber: 32,
215
+ store: `Levi's Sta Catarina`,
216
+ role: `Comercial`,
217
+ type: `Efetivo`
218
+ },
219
+ {
220
+ key: `3`,
221
+ name: `as Anna Astori`,
222
+ mecanographicNumber: 3212,
223
+ store: `Levi's Sta Catarina`,
224
+ role: `Funcionário`,
225
+ type: `Efetivo`
226
+ },
227
+ {
228
+ key: `4`,
229
+ name: `bv Yield Ona`,
230
+ mecanographicNumber: 21232,
231
+ store: `Adidas Restaurantes`,
232
+ role: `Gerente`,
233
+ type: `Efetivo`
234
+ },
235
+ ],
236
+ pagination: {
237
+ total: 4,
238
+ pageSize: 10
239
+ }
236
240
  };
237
241
 
238
242
  export const WithCheckbox = Template.bind({});
239
243
  WithCheckbox.args = {
240
- dataSource: [
241
- {
242
- key: `1`,
243
- name: `John Brown`,
244
- mecanographicNumber: 232,
245
- store: `Levi's Sta Catarina`,
246
- role: `Gerente`,
247
- type: `Efetivo`
248
- },
249
- {
250
- key: `2`,
251
- name: `Mary Brown`,
252
- mecanographicNumber: 32,
253
- store: `Levi's Sta Catarina`,
254
- role: `Comercial`,
255
- type: `Efetivo`
256
- },
257
- {
258
- key: `3`,
259
- name: `Anna Astori`,
260
- mecanographicNumber: 3212,
261
- store: `Levi's Sta Catarina`,
262
- role: `Funcionário`,
263
- type: `Efetivo`
264
- },
265
- {
266
- key: `4`,
267
- name: `Yield Ona`,
268
- mecanographicNumber: 21232,
269
- store: `Adidas Restaurantes`,
270
- role: `Gerente`,
271
- type: `Efetivo`
272
- },
273
- ],
244
+ dataSource: [
245
+ {
246
+ key: `1`,
247
+ name: `John Brown`,
248
+ mecanographicNumber: 232,
249
+ store: `Levi's Sta Catarina`,
250
+ role: `Gerente`,
251
+ type: `Efetivo`
252
+ },
253
+ {
254
+ key: `2`,
255
+ name: `Mary Brown`,
256
+ mecanographicNumber: 32,
257
+ store: `Levi's Sta Catarina`,
258
+ role: `Comercial`,
259
+ type: `Efetivo`
260
+ },
261
+ {
262
+ key: `3`,
263
+ name: `Anna Astori`,
264
+ mecanographicNumber: 3212,
265
+ store: `Levi's Sta Catarina`,
266
+ role: `Funcionário`,
267
+ type: `Efetivo`
268
+ },
269
+ {
270
+ key: `4`,
271
+ name: `Yield Ona`,
272
+ mecanographicNumber: 21232,
273
+ store: `Adidas Restaurantes`,
274
+ role: `Gerente`,
275
+ type: `Efetivo`
276
+ },
277
+ ],
274
278
  };
275
279
 
276
280
  export const withActions = Template.bind({});
277
281
  withActions.args = {
278
- fieldsToSort: ['store', 'mecanographicNumber'],
279
- selectPlaceholder: 'Order by',
280
- dataSource: [
281
- {
282
- key: `1`,
283
- name: `John Brown`,
284
- mecanographicNumber: "232",
285
- store: `Levi's Sta Catarina`,
286
- role: `Gerente`,
287
- type: `Efetivo`
288
- },
289
- {
290
- key: `2`,
291
- name: `Mary Brown`,
292
- mecanographicNumber: "32",
293
- store: `Levi's Sta Catarina`,
294
- role: `Comercial`,
295
- type: `Efetivo`
296
- },
297
- {
298
- key: `3`,
299
- name: `Anna Astori`,
300
- mecanographicNumber: "3212",
301
- store: `Levi's Sta Catarina`,
302
- role: `Funcionário`,
303
- type: `Efetivo`
304
- },
305
- {
306
- key: `4`,
307
- name: `Yield Ona`,
308
- mecanographicNumber: "21232",
309
- store: `Adidas Restaurantes`,
310
- role: `Gerente`,
311
- type: `Efetivo`
312
- },
313
- ],
314
- pagination: {
315
- total: 24,
316
- pageSize: 4
282
+ fieldsToSort: ['store', 'mecanographicNumber'],
283
+ selectPlaceholder: 'Order by',
284
+ dataSource: [
285
+ {
286
+ key: `1`,
287
+ name: `John Brown`,
288
+ mecanographicNumber: "232",
289
+ store: `Levi's Sta Catarina`,
290
+ role: `Gerente`,
291
+ type: `Efetivo`
292
+ },
293
+ {
294
+ key: `2`,
295
+ name: `Mary Brown`,
296
+ mecanographicNumber: "32",
297
+ store: `Levi's Sta Catarina`,
298
+ role: `Comercial`,
299
+ type: `Efetivo`
317
300
  },
318
- rowSelection: {
319
- type: 'checkbox',
320
- selectedRowKeys: ['1']
321
- }
301
+ {
302
+ key: `3`,
303
+ name: `Anna Astori`,
304
+ mecanographicNumber: "3212",
305
+ store: `Levi's Sta Catarina`,
306
+ role: `Funcionário`,
307
+ type: `Efetivo`
308
+ },
309
+ {
310
+ key: `4`,
311
+ name: `Yield Ona`,
312
+ mecanographicNumber: "21232",
313
+ store: `Adidas Restaurantes`,
314
+ role: `Gerente`,
315
+ type: `Efetivo`
316
+ },
317
+ ],
318
+ pagination: {
319
+ total: 24,
320
+ pageSize: 4
321
+ },
322
+ rowSelection: {
323
+ type: 'checkbox',
324
+ selectedRowKeys: ['1']
325
+ }
322
326
  };
323
327
 
324
328
  export const NoData = Template.bind({});
325
329
  NoData.args = {
326
- fieldsToSort: ['store', 'mecanographicNumber'],
327
- selectPlaceholder: 'Order by',
328
- rowKeyValue: 'mecanographicNumber',
329
- dataSource: undefined,
330
- pagination: {
331
- total: 24,
332
- pageSize: 4
333
- },
334
- hiddenColumns: ['id']
330
+ fieldsToSort: ['store', 'mecanographicNumber'],
331
+ selectPlaceholder: 'Order by',
332
+ rowKeyValue: 'mecanographicNumber',
333
+ dataSource: undefined,
334
+ pagination: {
335
+ total: 24,
336
+ pageSize: 4
337
+ },
338
+ hiddenColumns: ['id']
335
339
  };
package/src/components/ResponsiveTable/index.tsx CHANGED
@@ -47,6 +47,9 @@ export interface ResponsiveTableCustomProps extends TableProps<any> {
47
47
  columnsToSort?: string[];
48
48
  fixedColumns?: { dataIndex: string; side: 'left' | 'right' }[];
49
49
  customColumnWidths?: { columnName: string; width: string }[];
50
+ buttonActionName?: string;
51
+ buttonActionMethod?: () => void;
52
+ buttonActionStyle?: string;
50
53
  }
51
54
 
52
55
  export const ResponsiveTable = (props: ResponsiveTableCustomProps) => {
@@ -71,7 +74,10 @@ export const ResponsiveTable = (props: ResponsiveTableCustomProps) => {
71
74
  sortByColumns,
72
75
  columnsToSort,
73
76
  fixedColumns,
74
- customColumnWidths
77
+ customColumnWidths,
78
+ buttonActionName,
79
+ buttonActionMethod,
80
+ buttonActionStyle
75
81
  } = props;
76
82
 
77
83
  const [customFilters, setCustomFilters] = useState<any>([]);
@@ -199,6 +205,10 @@ export const ResponsiveTable = (props: ResponsiveTableCustomProps) => {
199
205
  if (!items?.[0]) return null;
200
206
  return (
201
207
  <Space size="middle">
208
+ {buttonActionName &&
209
+ <Button customClass={buttonActionStyle} onClick={() => buttonActionMethod?.()}>{buttonActionName}</Button>
210
+ }
211
+
202
212
  <Dropdown menu={{ items }}>
203
213
  <a>
204
214
  <MoreOutlined style={{ color: 'var(--color-blue)', transform: 'scale(1.6)' }} />