baseui 0.0.0-next-a54773b → 0.0.0-next-591ebef

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 (9) hide show
  1. package/data-table/stateful-container.js +41 -35
  2. package/data-table/stateful-data-table.js +2 -0
  3. package/data-table/types.d.ts +2 -0
  4. package/data-table/types.js.flow +1 -0
  5. package/es/data-table/stateful-container.js +30 -18
  6. package/es/data-table/stateful-data-table.js +2 -0
  7. package/esm/data-table/stateful-container.js +41 -35
  8. package/esm/data-table/stateful-data-table.js +2 -0
  9. package/package.json +1 -1
package/data-table/stateful-container.js CHANGED
@@ -49,55 +49,66 @@ function useDuplicateColumnTitleWarning(columns) {
49
49
  }, [columns]);
50
50
  }
51
51
 
52
- function useSortParameters() {
53
- var initialSortIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
54
- var initialSortDirection = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
52
+ var StatefulContainer = function StatefulContainer(props) {
53
+ useDuplicateColumnTitleWarning(props.columns);
55
54
 
56
- var _React$useState = React.useState(initialSortIndex),
55
+ var _React$useState = React.useState(typeof props.initialSortIndex === 'number' ? props.initialSortIndex : -1),
57
56
  _React$useState2 = _slicedToArray(_React$useState, 2),
58
57
  sortIndex = _React$useState2[0],
59
58
  setSortIndex = _React$useState2[1];
60
59
 
61
- var _React$useState3 = React.useState(initialSortDirection),
60
+ var _React$useState3 = React.useState(props.initialSortDirection),
62
61
  _React$useState4 = _slicedToArray(_React$useState3, 2),
63
62
  sortDirection = _React$useState4[0],
64
63
  setSortDirection = _React$useState4[1];
65
64
 
65
+ var _React$useState5 = React.useState(props.initialFilters || new Map()),
66
+ _React$useState6 = _slicedToArray(_React$useState5, 2),
67
+ filters = _React$useState6[0],
68
+ setFilters = _React$useState6[1];
69
+
70
+ var _React$useState7 = React.useState(''),
71
+ _React$useState8 = _slicedToArray(_React$useState7, 2),
72
+ textQuery = _React$useState8[0],
73
+ setTextQuery = _React$useState8[1];
74
+
75
+ var _React$useState9 = React.useState(props.initialSelectedRowIds || new Set()),
76
+ _React$useState10 = _slicedToArray(_React$useState9, 2),
77
+ selectedRowIds = _React$useState10[0],
78
+ setSelectedRowIds = _React$useState10[1];
79
+
66
80
  function handleSort(columnIndex) {
81
+ var nextSortIndex;
82
+ var nextSortDirection;
83
+
67
84
  if (columnIndex === sortIndex) {
68
85
  if (sortDirection === _constants.SORT_DIRECTIONS.DESC) {
69
- setSortIndex(-1);
70
- setSortDirection(_constants.SORT_DIRECTIONS.ASC);
86
+ nextSortIndex = -1;
87
+ nextSortDirection = _constants.SORT_DIRECTIONS.ASC;
71
88
  } else {
72
- setSortDirection(_constants.SORT_DIRECTIONS.DESC);
89
+ nextSortIndex = columnIndex;
90
+ nextSortDirection = _constants.SORT_DIRECTIONS.DESC;
73
91
  }
74
92
  } else {
75
- setSortIndex(columnIndex);
76
- setSortDirection(_constants.SORT_DIRECTIONS.ASC);
93
+ nextSortIndex = columnIndex;
94
+ nextSortDirection = _constants.SORT_DIRECTIONS.ASC;
77
95
  }
78
- }
79
-
80
- return [sortIndex, sortDirection, handleSort];
81
- }
82
96
 
83
- var StatefulContainer = function StatefulContainer(props) {
84
- useDuplicateColumnTitleWarning(props.columns);
97
+ setSortIndex(nextSortIndex);
98
+ setSortDirection(nextSortDirection);
85
99
 
86
- var _useSortParameters = useSortParameters(props.initialSortIndex, props.initialSortDirection),
87
- _useSortParameters2 = _slicedToArray(_useSortParameters, 3),
88
- sortIndex = _useSortParameters2[0],
89
- sortDirection = _useSortParameters2[1],
90
- handleSort = _useSortParameters2[2];
100
+ if (props.onSort) {
101
+ props.onSort(nextSortIndex, nextSortDirection);
102
+ }
103
+ }
91
104
 
92
- var _React$useState5 = React.useState(props.initialFilters || new Map()),
93
- _React$useState6 = _slicedToArray(_React$useState5, 2),
94
- filters = _React$useState6[0],
95
- setFilters = _React$useState6[1];
105
+ function handleTextQueryChange(nextTextQuery) {
106
+ setTextQuery(nextTextQuery);
96
107
 
97
- var _React$useState7 = React.useState(''),
98
- _React$useState8 = _slicedToArray(_React$useState7, 2),
99
- textQuery = _React$useState8[0],
100
- setTextQuery = _React$useState8[1];
108
+ if (props.onTextQueryChange) {
109
+ props.onTextQueryChange(nextTextQuery);
110
+ }
111
+ }
101
112
 
102
113
  function handleFilterAdd(title, filterParams) {
103
114
  filters.set(title, filterParams);
@@ -119,11 +130,6 @@ var StatefulContainer = function StatefulContainer(props) {
119
130
  setFilters(new Map(filters));
120
131
  }
121
132
 
122
- var _React$useState9 = React.useState(props.initialSelectedRowIds || new Set()),
123
- _React$useState10 = _slicedToArray(_React$useState9, 2),
124
- selectedRowIds = _React$useState10[0],
125
- setSelectedRowIds = _React$useState10[1];
126
-
127
133
  function handleSelectChange(next) {
128
134
  setSelectedRowIds(next);
129
135
  var selectionCallback = props.onSelectionChange;
@@ -176,7 +182,7 @@ var StatefulContainer = function StatefulContainer(props) {
176
182
  onSelectNone: handleSelectNone,
177
183
  onSelectOne: handleSelectOne,
178
184
  onSort: handleSort,
179
- onTextQueryChange: setTextQuery,
185
+ onTextQueryChange: handleTextQueryChange,
180
186
  resizableColumnWidths: Boolean(props.resizableColumnWidths),
181
187
  rowHighlightIndex: props.rowHighlightIndex,
182
188
  selectedRowIds: selectedRowIds,
package/data-table/stateful-data-table.js CHANGED
@@ -221,6 +221,8 @@ function StatefulDataTable(props) {
221
221
  onIncludedRowsChange: props.onIncludedRowsChange,
222
222
  onRowHighlightChange: props.onRowHighlightChange,
223
223
  onSelectionChange: props.onSelectionChange,
224
+ onSort: props.onSort,
225
+ onTextQueryChange: props.onTextQueryChange,
224
226
  resizableColumnWidths: props.resizableColumnWidths,
225
227
  rows: props.rows,
226
228
  rowActions: props.rowActions,
package/data-table/types.d.ts CHANGED
@@ -89,6 +89,8 @@ export declare type StatefulDataTableProps = {
89
89
  onIncludedRowsChange?: (rows: Row[]) => void;
90
90
  onRowHighlightChange?: (rowIndex: number, row: Row) => void;
91
91
  onSelectionChange?: (a: Row[]) => unknown;
92
+ onSort?: (columnIndex: number, sortDirection: SortDirections) => void;
93
+ onTextQueryChange?: (textQuery: string) => void;
92
94
  resizableColumnWidths?: boolean;
93
95
  rows: Row[];
94
96
  rowActions?: RowAction[] | ((a: Row) => RowAction[]);
package/data-table/types.js.flow CHANGED
@@ -111,6 +111,7 @@ export type StatefulDataTablePropsT = {|
111
111
  onIncludedRowsChange?: (rows: RowT[]) => void,
112
112
  onRowHighlightChange?: (rowIndex: number, row: RowT) => void,
113
113
  onSelectionChange?: (RowT[]) => mixed,
114
+ onSort?: (columnIndex: number, sortDirection: SortDirectionsT) => void,
114
115
  resizableColumnWidths?: boolean,
115
116
  rows: RowT[],
116
117
  rowActions?: RowActionT[] | ((RowT) => RowActionT[]),
package/es/data-table/stateful-container.js CHANGED
@@ -19,32 +19,46 @@ function useDuplicateColumnTitleWarning(columns) {
19
19
  }, [columns]);
20
20
  }
21
21
 
22
- function useSortParameters(initialSortIndex = -1, initialSortDirection = null) {
23
- const [sortIndex, setSortIndex] = React.useState(initialSortIndex);
24
- const [sortDirection, setSortDirection] = React.useState(initialSortDirection);
22
+ export const StatefulContainer = props => {
23
+ useDuplicateColumnTitleWarning(props.columns);
24
+ const [sortIndex, setSortIndex] = React.useState(typeof props.initialSortIndex === 'number' ? props.initialSortIndex : -1);
25
+ const [sortDirection, setSortDirection] = React.useState(props.initialSortDirection);
26
+ const [filters, setFilters] = React.useState(props.initialFilters || new Map());
27
+ const [textQuery, setTextQuery] = React.useState('');
28
+ const [selectedRowIds, setSelectedRowIds] = React.useState(props.initialSelectedRowIds || new Set());
25
29
 
26
30
  function handleSort(columnIndex) {
31
+ let nextSortIndex;
32
+ let nextSortDirection;
33
+
27
34
  if (columnIndex === sortIndex) {
28
35
  if (sortDirection === SORT_DIRECTIONS.DESC) {
29
- setSortIndex(-1);
30
- setSortDirection(SORT_DIRECTIONS.ASC);
36
+ nextSortIndex = -1;
37
+ nextSortDirection = SORT_DIRECTIONS.ASC;
31
38
  } else {
32
- setSortDirection(SORT_DIRECTIONS.DESC);
39
+ nextSortIndex = columnIndex;
40
+ nextSortDirection = SORT_DIRECTIONS.DESC;
33
41
  }
34
42
  } else {
35
- setSortIndex(columnIndex);
36
- setSortDirection(SORT_DIRECTIONS.ASC);
43
+ nextSortIndex = columnIndex;
44
+ nextSortDirection = SORT_DIRECTIONS.ASC;
45
+ }
46
+
47
+ setSortIndex(nextSortIndex);
48
+ setSortDirection(nextSortDirection);
49
+
50
+ if (props.onSort) {
51
+ props.onSort(nextSortIndex, nextSortDirection);
37
52
  }
38
53
  }
39
54
 
40
- return [sortIndex, sortDirection, handleSort];
41
- }
55
+ function handleTextQueryChange(nextTextQuery) {
56
+ setTextQuery(nextTextQuery);
42
57
 
43
- export const StatefulContainer = props => {
44
- useDuplicateColumnTitleWarning(props.columns);
45
- const [sortIndex, sortDirection, handleSort] = useSortParameters(props.initialSortIndex, props.initialSortDirection);
46
- const [filters, setFilters] = React.useState(props.initialFilters || new Map());
47
- const [textQuery, setTextQuery] = React.useState('');
58
+ if (props.onTextQueryChange) {
59
+ props.onTextQueryChange(nextTextQuery);
60
+ }
61
+ }
48
62
 
49
63
  function handleFilterAdd(title, filterParams) {
50
64
  filters.set(title, filterParams);
@@ -66,8 +80,6 @@ export const StatefulContainer = props => {
66
80
  setFilters(new Map(filters));
67
81
  }
68
82
 
69
- const [selectedRowIds, setSelectedRowIds] = React.useState(props.initialSelectedRowIds || new Set());
70
-
71
83
  function handleSelectChange(next) {
72
84
  setSelectedRowIds(next);
73
85
  const selectionCallback = props.onSelectionChange;
@@ -116,7 +128,7 @@ export const StatefulContainer = props => {
116
128
  onSelectNone: handleSelectNone,
117
129
  onSelectOne: handleSelectOne,
118
130
  onSort: handleSort,
119
- onTextQueryChange: setTextQuery,
131
+ onTextQueryChange: handleTextQueryChange,
120
132
  resizableColumnWidths: Boolean(props.resizableColumnWidths),
121
133
  rowHighlightIndex: props.rowHighlightIndex,
122
134
  selectedRowIds,
package/es/data-table/stateful-data-table.js CHANGED
@@ -140,6 +140,8 @@ export function StatefulDataTable(props) {
140
140
  onIncludedRowsChange: props.onIncludedRowsChange,
141
141
  onRowHighlightChange: props.onRowHighlightChange,
142
142
  onSelectionChange: props.onSelectionChange,
143
+ onSort: props.onSort,
144
+ onTextQueryChange: props.onTextQueryChange,
143
145
  resizableColumnWidths: props.resizableColumnWidths,
144
146
  rows: props.rows,
145
147
  rowActions: props.rowActions,
package/esm/data-table/stateful-container.js CHANGED
@@ -41,55 +41,66 @@ function useDuplicateColumnTitleWarning(columns) {
41
41
  }, [columns]);
42
42
  }
43
43
 
44
- function useSortParameters() {
45
- var initialSortIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
46
- var initialSortDirection = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
44
+ export var StatefulContainer = function StatefulContainer(props) {
45
+ useDuplicateColumnTitleWarning(props.columns);
47
46
 
48
- var _React$useState = React.useState(initialSortIndex),
47
+ var _React$useState = React.useState(typeof props.initialSortIndex === 'number' ? props.initialSortIndex : -1),
49
48
  _React$useState2 = _slicedToArray(_React$useState, 2),
50
49
  sortIndex = _React$useState2[0],
51
50
  setSortIndex = _React$useState2[1];
52
51
 
53
- var _React$useState3 = React.useState(initialSortDirection),
52
+ var _React$useState3 = React.useState(props.initialSortDirection),
54
53
  _React$useState4 = _slicedToArray(_React$useState3, 2),
55
54
  sortDirection = _React$useState4[0],
56
55
  setSortDirection = _React$useState4[1];
57
56
 
57
+ var _React$useState5 = React.useState(props.initialFilters || new Map()),
58
+ _React$useState6 = _slicedToArray(_React$useState5, 2),
59
+ filters = _React$useState6[0],
60
+ setFilters = _React$useState6[1];
61
+
62
+ var _React$useState7 = React.useState(''),
63
+ _React$useState8 = _slicedToArray(_React$useState7, 2),
64
+ textQuery = _React$useState8[0],
65
+ setTextQuery = _React$useState8[1];
66
+
67
+ var _React$useState9 = React.useState(props.initialSelectedRowIds || new Set()),
68
+ _React$useState10 = _slicedToArray(_React$useState9, 2),
69
+ selectedRowIds = _React$useState10[0],
70
+ setSelectedRowIds = _React$useState10[1];
71
+
58
72
  function handleSort(columnIndex) {
73
+ var nextSortIndex;
74
+ var nextSortDirection;
75
+
59
76
  if (columnIndex === sortIndex) {
60
77
  if (sortDirection === SORT_DIRECTIONS.DESC) {
61
- setSortIndex(-1);
62
- setSortDirection(SORT_DIRECTIONS.ASC);
78
+ nextSortIndex = -1;
79
+ nextSortDirection = SORT_DIRECTIONS.ASC;
63
80
  } else {
64
- setSortDirection(SORT_DIRECTIONS.DESC);
81
+ nextSortIndex = columnIndex;
82
+ nextSortDirection = SORT_DIRECTIONS.DESC;
65
83
  }
66
84
  } else {
67
- setSortIndex(columnIndex);
68
- setSortDirection(SORT_DIRECTIONS.ASC);
85
+ nextSortIndex = columnIndex;
86
+ nextSortDirection = SORT_DIRECTIONS.ASC;
69
87
  }
70
- }
71
-
72
- return [sortIndex, sortDirection, handleSort];
73
- }
74
88
 
75
- export var StatefulContainer = function StatefulContainer(props) {
76
- useDuplicateColumnTitleWarning(props.columns);
89
+ setSortIndex(nextSortIndex);
90
+ setSortDirection(nextSortDirection);
77
91
 
78
- var _useSortParameters = useSortParameters(props.initialSortIndex, props.initialSortDirection),
79
- _useSortParameters2 = _slicedToArray(_useSortParameters, 3),
80
- sortIndex = _useSortParameters2[0],
81
- sortDirection = _useSortParameters2[1],
82
- handleSort = _useSortParameters2[2];
92
+ if (props.onSort) {
93
+ props.onSort(nextSortIndex, nextSortDirection);
94
+ }
95
+ }
83
96
 
84
- var _React$useState5 = React.useState(props.initialFilters || new Map()),
85
- _React$useState6 = _slicedToArray(_React$useState5, 2),
86
- filters = _React$useState6[0],
87
- setFilters = _React$useState6[1];
97
+ function handleTextQueryChange(nextTextQuery) {
98
+ setTextQuery(nextTextQuery);
88
99
 
89
- var _React$useState7 = React.useState(''),
90
- _React$useState8 = _slicedToArray(_React$useState7, 2),
91
- textQuery = _React$useState8[0],
92
- setTextQuery = _React$useState8[1];
100
+ if (props.onTextQueryChange) {
101
+ props.onTextQueryChange(nextTextQuery);
102
+ }
103
+ }
93
104
 
94
105
  function handleFilterAdd(title, filterParams) {
95
106
  filters.set(title, filterParams);
@@ -111,11 +122,6 @@ export var StatefulContainer = function StatefulContainer(props) {
111
122
  setFilters(new Map(filters));
112
123
  }
113
124
 
114
- var _React$useState9 = React.useState(props.initialSelectedRowIds || new Set()),
115
- _React$useState10 = _slicedToArray(_React$useState9, 2),
116
- selectedRowIds = _React$useState10[0],
117
- setSelectedRowIds = _React$useState10[1];
118
-
119
125
  function handleSelectChange(next) {
120
126
  setSelectedRowIds(next);
121
127
  var selectionCallback = props.onSelectionChange;
@@ -168,7 +174,7 @@ export var StatefulContainer = function StatefulContainer(props) {
168
174
  onSelectNone: handleSelectNone,
169
175
  onSelectOne: handleSelectOne,
170
176
  onSort: handleSort,
171
- onTextQueryChange: setTextQuery,
177
+ onTextQueryChange: handleTextQueryChange,
172
178
  resizableColumnWidths: Boolean(props.resizableColumnWidths),
173
179
  rowHighlightIndex: props.rowHighlightIndex,
174
180
  selectedRowIds: selectedRowIds,
package/esm/data-table/stateful-data-table.js CHANGED
@@ -201,6 +201,8 @@ export function StatefulDataTable(props) {
201
201
  onIncludedRowsChange: props.onIncludedRowsChange,
202
202
  onRowHighlightChange: props.onRowHighlightChange,
203
203
  onSelectionChange: props.onSelectionChange,
204
+ onSort: props.onSort,
205
+ onTextQueryChange: props.onTextQueryChange,
204
206
  resizableColumnWidths: props.resizableColumnWidths,
205
207
  rows: props.rows,
206
208
  rowActions: props.rowActions,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "baseui",
3
- "version": "0.0.0-next-a54773b",
3
+ "version": "0.0.0-next-591ebef",
4
4
  "description": "A React Component library implementing the Base design language",
5
5
  "keywords": [
6
6
  "react",