@propellerads/table 4.8.0 → 5.0.1

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 (15) hide show
  1. package/dist/index.d.ts +2 -2
  2. package/dist/table.cjs.development.js +62 -39
  3. package/dist/table.cjs.development.js.map +1 -1
  4. package/dist/table.cjs.production.min.js +1 -1
  5. package/dist/table.cjs.production.min.js.map +1 -1
  6. package/dist/table.esm.js +62 -39
  7. package/dist/table.esm.js.map +1 -1
  8. package/dist/types.d.ts +0 -1
  9. package/package.json +8 -11
  10. package/src/index.tsx +77 -115
  11. package/src/propsGetter.tsx +49 -40
  12. package/src/style.tsx +41 -46
  13. package/src/types.tsx +117 -105
  14. package/src/useLoadingState.tsx +14 -9
  15. package/CHANGELOG.md +0 -85
package/src/types.tsx CHANGED
@@ -12,150 +12,162 @@ import {
12
12
  Row,
13
13
  RowPropGetter,
14
14
  TableBodyPropGetter,
15
- TablePropGetter, TableState,
16
- UsePaginationInstanceProps, UsePaginationOptions,
15
+ TablePropGetter,
16
+ TableState,
17
+ UsePaginationInstanceProps,
18
+ UsePaginationOptions,
17
19
  UsePaginationState,
18
20
  UseRowSelectInstanceProps,
19
- UseRowSelectState, UseSortByColumnProps, UseRowSelectRowProps,
20
- UseSortByInstanceProps, UseSortByOptions,
21
- UseTableOptions, HeaderPropGetter,
21
+ UseRowSelectState,
22
+ UseSortByColumnProps,
23
+ UseRowSelectRowProps,
24
+ UseSortByInstanceProps,
25
+ UseSortByOptions,
26
+ UseTableOptions,
27
+ HeaderPropGetter,
22
28
  } from 'react-table';
23
29
 
24
30
  export type DefaultObject = Record<string, string | number | unknown>;
25
31
 
26
32
  export type LoadingState = {
27
- loadingColumns?: Column[],
28
- loadingData: any[],
29
- }
33
+ loadingColumns?: Column[];
34
+ loadingData: any[];
35
+ };
30
36
 
31
37
  export enum FOOTER_PLACEMENT {
32
- TOP = 'top',
33
- BOTTOM = 'bottom'
38
+ TOP = 'top',
39
+ BOTTOM = 'bottom',
34
40
  }
35
41
 
36
42
  export type PaginationProps = {
37
- paginationAmount?: string | ReactNode | ReactElement,
38
- parentElementId: string,
39
- labelPerPage?: string,
40
- pageSizes?: Array<string | number>,
41
- pageIndex: number,
42
- perPage: number,
43
- totalPages: number,
44
- totalItems: number,
45
- canNextPage: boolean,
46
- canPreviousPage: boolean,
47
- nextPageHandler: () => void,
48
- previousPageHandler: () => void,
49
- setPageSize: (size: number) => void,
50
- gotoPage: (page: number) => void,
51
- }
43
+ paginationAmount?: string | ReactNode | ReactElement;
44
+ parentElementId: string;
45
+ labelPerPage?: string;
46
+ pageSizes?: Array<string | number>;
47
+ pageIndex: number;
48
+ perPage: number;
49
+ totalPages: number;
50
+ totalItems: number;
51
+ canNextPage: boolean;
52
+ canPreviousPage: boolean;
53
+ nextPageHandler: () => void;
54
+ previousPageHandler: () => void;
55
+ setPageSize: (size: number) => void;
56
+ gotoPage: (page: number) => void;
57
+ };
52
58
 
53
59
  export type ControlledPagination = {
54
- paginationAmount?: string | ReactNode | ReactElement,
55
- pageSize: number,
56
- pageIndex: number,
57
- pageCount: number,
58
- }
60
+ paginationAmount?: string | ReactNode | ReactElement;
61
+ pageSize: number;
62
+ pageIndex: number;
63
+ pageCount: number;
64
+ };
59
65
 
60
66
  export type TableProps = {
61
- columns: Array<Column<DefaultObject>>,
62
- data: [],
63
- totalItems?: number,
64
- PaginationComponent: React.FunctionComponent<PaginationProps>,
65
- initialState: Partial<TableState<DefaultObject>>,
66
- fetchData?: (params: { pageIndex: number, pageSize: number }) => void,
67
- onSortedChange?: (id: string, isDesc: boolean) => void,
68
- isLoading?: boolean,
69
- footerPlacement?: Array<FOOTER_PLACEMENT>,
70
- hasDefaultPagination?: boolean,
71
- onSelectRowsChange?: (rows: Array<DefaultObject>) => void,
72
- controlledPagination?: ControlledPagination,
73
- loadingMessage?: string,
74
- labelPerPage?: string,
75
- parentElementId?: string,
76
- tableContentId?: string,
77
- getRowPreProps?: (row: Row) => DefaultObject,
78
- getTableProps?: TableGetter,
79
- getHeaderGroupProps?: ElementGetter,
80
- getHeaderProps?: ElementGetter,
81
- getRowProps?: ElementGetter,
82
- getCellProps?: ElementGetter,
83
- getFooterProps?: ElementGetter,
84
- getFooterGroupProps?: ElementGetter,
85
- showLoadingState?: boolean,
86
- LoadingCellComponent?: FunctionComponent<DefaultObject>,
87
- noDataMessage?: string | ReactElement
88
- rowSubComponent?: (row: StandardRow) => ReactElement,
89
- isEnableRowSelect?: (original: DefaultObject) => boolean,
90
- isResizableColumns?: boolean,
91
- }
67
+ columns: Array<Column<DefaultObject>>;
68
+ data: [];
69
+ totalItems?: number;
70
+ PaginationComponent: React.FunctionComponent<PaginationProps>;
71
+ initialState: Partial<TableState<DefaultObject>>;
72
+ fetchData?: (params: {pageIndex: number; pageSize: number}) => void;
73
+ onSortedChange?: (id: string, isDesc: boolean) => void;
74
+ isLoading?: boolean;
75
+ footerPlacement?: Array<FOOTER_PLACEMENT>;
76
+ hasDefaultPagination?: boolean;
77
+ onSelectRowsChange?: (rows: Array<DefaultObject>) => void;
78
+ controlledPagination?: ControlledPagination;
79
+ loadingMessage?: string;
80
+ labelPerPage?: string;
81
+ parentElementId?: string;
82
+ tableContentId?: string;
83
+ getRowPreProps?: (row: Row) => DefaultObject;
84
+ getTableProps?: TableGetter;
85
+ getHeaderGroupProps?: ElementGetter;
86
+ getHeaderProps?: ElementGetter;
87
+ getRowProps?: ElementGetter;
88
+ getCellProps?: ElementGetter;
89
+ getFooterProps?: ElementGetter;
90
+ getFooterGroupProps?: ElementGetter;
91
+ showLoadingState?: boolean;
92
+ LoadingCellComponent?: FunctionComponent<DefaultObject>;
93
+ noDataMessage?: string | ReactElement;
94
+ rowSubComponent?: (row: StandardRow) => ReactElement;
95
+ isEnableRowSelect?: (original: DefaultObject) => boolean;
96
+ };
92
97
 
93
98
  export type TableOptions = {
94
- columns: Array<Column<DefaultObject>>,
95
- data: Array<DefaultObject>,
96
- initialState: {
97
- pageIndex?: number,
98
- pageSize?: number,
99
- },
100
- disableSortRemove: boolean,
101
- disableMultiSort: boolean,
102
- disableMultiRemove: boolean,
103
- manualSortBy?: boolean,
104
- autoResetPage?: boolean,
105
- manualPagination?: boolean,
106
- pageCount?: number,
107
- }
99
+ columns: Array<Column<DefaultObject>>;
100
+ data: Array<DefaultObject>;
101
+ initialState: {
102
+ pageIndex?: number;
103
+ pageSize?: number;
104
+ };
105
+ disableSortRemove: boolean;
106
+ disableMultiSort: boolean;
107
+ disableMultiRemove: boolean;
108
+ manualSortBy?: boolean;
109
+ autoResetPage?: boolean;
110
+ manualPagination?: boolean;
111
+ pageCount?: number;
112
+ };
108
113
 
109
114
  export type MetaProps = {
110
- column?: HeaderGroup<DefaultObject>,
111
- cell?: Cell,
112
- }
115
+ column?: HeaderGroup<DefaultObject>;
116
+ cell?: Cell;
117
+ };
113
118
 
114
- export type BaseMeta = Meta<DefaultObject, MetaProps>
119
+ export type BaseMeta = Meta<DefaultObject, MetaProps>;
115
120
 
116
121
  export type TableGetter = (props: DefaultObject) => DefaultObject;
117
122
 
118
123
  export type ElementGetter = (props: DefaultObject, meta: BaseMeta) => DefaultObject;
119
124
 
120
- export type ElementCellPropGetter = CellPropGetter<DefaultObject>
125
+ export type ElementCellPropGetter = CellPropGetter<DefaultObject>;
121
126
 
122
- export type ElementRowPropGetter = RowPropGetter<DefaultObject>
127
+ export type ElementRowPropGetter = RowPropGetter<DefaultObject>;
123
128
 
124
- export type ElementHeaderFooterPropGetter = FooterGroupPropGetter<DefaultObject> |
125
- HeaderGroupPropGetter<DefaultObject> |
126
- FooterPropGetter<DefaultObject>
129
+ export type ElementHeaderFooterPropGetter =
130
+ | FooterGroupPropGetter<DefaultObject>
131
+ | HeaderGroupPropGetter<DefaultObject>
132
+ | FooterPropGetter<DefaultObject>;
127
133
 
128
- export type GetTableContainerPropsGetter = (userGetter?: TableGetter, getter?: TableGetter) =>
129
- TablePropGetter<DefaultObject> | TableBodyPropGetter<DefaultObject>
134
+ export type GetTableContainerPropsGetter = (
135
+ userGetter?: TableGetter,
136
+ getter?: TableGetter,
137
+ ) => TablePropGetter<DefaultObject> | TableBodyPropGetter<DefaultObject>;
130
138
 
131
- export type GetTableElementPropsGetter<T> = (userGetter?: ElementGetter, getter?: ElementGetter) => T
139
+ export type GetTableElementPropsGetter<T> = (userGetter?: ElementGetter, getter?: ElementGetter) => T;
132
140
 
133
- export type GetTableElementInternalPropsGetter =
134
- (internalProps: DefaultObject, userGetter?: ElementGetter, getter?: ElementGetter) =>
135
- HeaderPropGetter<DefaultObject>
141
+ export type GetTableElementInternalPropsGetter = (
142
+ internalProps: DefaultObject,
143
+ userGetter?: ElementGetter,
144
+ getter?: ElementGetter,
145
+ ) => HeaderPropGetter<DefaultObject>;
136
146
 
137
- export type ColumnWithSort = HeaderGroup<DefaultObject> & Partial<UseSortByColumnProps<DefaultObject>>
147
+ export type ColumnWithSort = HeaderGroup<DefaultObject> & Partial<UseSortByColumnProps<DefaultObject>>;
138
148
 
139
- export type StandardColumn = Column<DefaultObject>
149
+ export type StandardColumn = Column<DefaultObject>;
140
150
 
141
- export type StandardRow = Row<DefaultObject> & { isExpanded?: boolean }
151
+ export type StandardRow = Row<DefaultObject> & {isExpanded?: boolean};
142
152
 
143
- export type SelectableRow = Row<{ id: string }> & UseRowSelectRowProps<DefaultObject>
153
+ export type SelectableRow = Row<{id: string}> & UseRowSelectRowProps<DefaultObject>;
144
154
 
145
- export type StandardCell = Cell<DefaultObject>
155
+ export type StandardCell = Cell<DefaultObject>;
146
156
 
147
- export type SelectableRowInstanceProps = UseRowSelectInstanceProps<DefaultObject>
157
+ export type SelectableRowInstanceProps = UseRowSelectInstanceProps<DefaultObject>;
148
158
 
149
- export type StandardHooks = Hooks<DefaultObject>
159
+ export type StandardHooks = Hooks<DefaultObject>;
150
160
 
151
- export type TableHooksInstanceProps =
152
- UseSortByInstanceProps<DefaultObject> &
153
- UsePaginationInstanceProps<DefaultObject> &
154
- UseRowSelectInstanceProps<DefaultObject> &
155
- { state: UseRowSelectState<DefaultObject> & UsePaginationState<DefaultObject>};
161
+ export type TableHooksInstanceProps = UseSortByInstanceProps<DefaultObject> &
162
+ UsePaginationInstanceProps<DefaultObject> &
163
+ UseRowSelectInstanceProps<DefaultObject> & {
164
+ state: UseRowSelectState<DefaultObject> & UsePaginationState<DefaultObject>;
165
+ };
156
166
 
157
- export type TableOptionsProps =
158
- UseTableOptions<DefaultObject> & UseSortByOptions<DefaultObject> & UsePaginationOptions<DefaultObject> &
159
- { initialState: Partial<TableState<DefaultObject>> & Partial<UsePaginationState<DefaultObject>> }
167
+ export type TableOptionsProps = UseTableOptions<DefaultObject> &
168
+ UseSortByOptions<DefaultObject> &
169
+ UsePaginationOptions<DefaultObject> & {
170
+ initialState: Partial<TableState<DefaultObject>> & Partial<UsePaginationState<DefaultObject>>;
171
+ };
160
172
 
161
173
  export class Table extends React.Component<Partial<TableProps>> {}
package/src/useLoadingState.tsx CHANGED
@@ -9,15 +9,20 @@ const useLoadingState = (
9
9
  columns: Column<DefaultObject>[],
10
10
  LoadingCellComponent: FunctionComponent<DefaultObject>,
11
11
  ): LoadingState => {
12
- const loadingColumns: Column<DefaultObject>[] | undefined = useMemo(() => (showLoadingState && loading ? columns
13
- .map((column: Column<DefaultObject>) => {
14
- const loadingColumn: Column<DefaultObject> = {
15
- ...column,
16
- Cell: () => <LoadingCellComponent />,
17
- };
18
-
19
- return loadingColumn;
20
- }) : []), [columns, loading, showLoadingState]);
12
+ const loadingColumns: Column<DefaultObject>[] | undefined = useMemo(
13
+ () =>
14
+ showLoadingState && loading
15
+ ? columns.map((column: Column<DefaultObject>) => {
16
+ const loadingColumn: Column<DefaultObject> = {
17
+ ...column,
18
+ Cell: () => <LoadingCellComponent />,
19
+ };
20
+
21
+ return loadingColumn;
22
+ })
23
+ : [],
24
+ [columns, loading, showLoadingState],
25
+ );
21
26
 
22
27
  const loadingData = useMemo(() => {
23
28
  if (showLoadingState && loading && columns && columns.length > 0) {
package/CHANGELOG.md DELETED
@@ -1,85 +0,0 @@
1
- #### `4.8.0`
2
-
3
- * added possibility to resize columns
4
-
5
- #### `4.7.0`
6
-
7
- * updated peerDependencies
8
-
9
- #### `4.6.1`
10
-
11
- * add data-role attr for body, head, footer
12
-
13
- #### `4.6.0`
14
-
15
- * add available to disable row select by condition
16
-
17
- #### `4.5.1`
18
-
19
- * fix key warnings
20
-
21
- #### `4.5.0`
22
-
23
- * use columns props for loading state
24
- * added default initial state prop value
25
-
26
- #### `4.4.0`
27
-
28
- * add expanded behavior
29
-
30
- #### `4.3.2`
31
-
32
- * fix wrong enable sort condition for async
33
-
34
- #### `4.3.1`
35
-
36
- * add classnames for main parts
37
- * fix sort on state mode
38
-
39
- #### `4.3.0`
40
-
41
- * usage useFlexLayout instead of useBlockLayout
42
- * add not data message prop
43
-
44
- #### `4.2.0`
45
-
46
- * fix @types version for packages
47
-
48
- #### `4.1.0`
49
-
50
- * fix call possible undefined function
51
-
52
- #### `4.0.0`
53
-
54
- * update react-table version to 7
55
-
56
- #### `3.0.0`
57
-
58
- * edit props data
59
-
60
- #### `2.1.0`
61
-
62
- * Add loading state mode
63
-
64
- #### `2.0.0`
65
-
66
- * TS
67
- * Production build
68
- * Breaking changes:
69
- - rewrite some props like in origin component:
70
- - `items` -> `data`
71
- - `isLoading` -> `loading`
72
- - `subComponent` -> `SubComponent`
73
- - `expanderComponent` -> `ExpanderComponent`
74
-
75
- #### `1.2.0`
76
-
77
- * Add rest props
78
-
79
- #### `1.1.0`
80
-
81
- * Add onChangePage prop
82
-
83
- #### `1.0.2`
84
-
85
- * Add expanderComponent and subComponent props