@adaptabletools/adaptable-cjs 20.2.8 → 20.2.9

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.
@@ -262,13 +262,6 @@ class LayoutApiImpl extends ApiBase_1.ApiBase {
262
262
  },
263
263
  });
264
264
  }
265
- isCurrentLayoutReadOnly() {
266
- const currentLayout = this.getCurrentLayout();
267
- if (currentLayout) {
268
- return currentLayout.IsReadOnly;
269
- }
270
- return true;
271
- }
272
265
  deleteLayout(layout) {
273
266
  const layoutCount = this.getLayouts().length;
274
267
  if (layoutCount === 1) {
@@ -286,39 +279,40 @@ class LayoutApiImpl extends ApiBase_1.ApiBase {
286
279
  return this.deleteLayout(layout);
287
280
  }
288
281
  removeColumnFromCurrentLayout(columnId) {
289
- this.removeColumnFromLayout(columnId, this.getCurrentLayoutName());
290
- }
291
- removeColumnFromAllLayouts(columnId) {
292
- this.getLayouts().forEach((layout) => {
293
- this.removeColumnFromLayout(columnId, layout.Name);
294
- });
295
- }
296
- removeColumnFromLayout(columnId, layoutName) {
297
282
  const column = this.getColumnApi().getColumnWithColumnId(columnId);
298
283
  if (column) {
299
- const layout = this.getLayoutByName(layoutName);
300
- if (layout && !(0, LayoutHelpers_1.isPivotLayout)(layout)) {
301
- if (layout.TableColumns.includes(columnId)) {
302
- this.dispatchAction(LayoutRedux.LayoutRemoveColumn(layoutName, columnId));
303
- this.getColumnApi().hideColumn(columnId);
304
- }
284
+ const layout = this.getCurrentLayout();
285
+ if (!(0, LayoutHelpers_1.isPivotLayout)(layout)) {
286
+ this.updateCurrentLayout((layout) => {
287
+ layout.TableColumns = layout.TableColumns.filter((c) => c !== columnId);
288
+ return layout;
289
+ });
290
+ }
291
+ else {
292
+ this.updateCurrentLayout((layout) => {
293
+ layout.PivotColumns = layout.PivotColumns.filter((c) => c !== columnId);
294
+ return layout;
295
+ });
305
296
  }
306
297
  }
307
298
  }
308
- addColumnToTableLayout(columnId, layoutName) {
299
+ addColumnToCurrentLayout(columnId) {
309
300
  const column = this.getColumnApi().getColumnWithColumnId(columnId);
310
301
  if (column) {
311
- const layout = this.getLayoutByName(layoutName);
312
- if (layout && !(0, LayoutHelpers_1.isPivotLayout)(layout)) {
313
- if (!layout.TableColumns.includes(columnId)) {
314
- this.dispatchAction(LayoutRedux.LayoutAddColumn(layoutName, columnId));
315
- this.getColumnApi().showColumn(columnId);
316
- }
302
+ const layout = this.getCurrentLayout();
303
+ if (!(0, LayoutHelpers_1.isPivotLayout)(layout)) {
304
+ this.updateCurrentLayout((layout) => {
305
+ layout.TableColumns.push(columnId);
306
+ return layout;
307
+ });
308
+ }
309
+ else {
310
+ this.updateCurrentLayout((layout) => {
311
+ layout.PivotColumns.push(columnId);
312
+ return layout;
313
+ });
317
314
  }
318
315
  }
319
316
  }
320
- addColumnToCurrentTableLayout(columnId) {
321
- this.addColumnToTableLayout(columnId, this.getCurrentLayoutName());
322
- }
323
317
  }
324
318
  exports.LayoutApiImpl = LayoutApiImpl;
@@ -4,6 +4,7 @@ import { CellDataChangedInfo } from '../../AdaptableState/Common/CellDataChanged
4
4
  import { AdaptableAlert, AdaptableFlashingCell, AdaptablePersistentState, AdaptableSharedEntity, AdaptableState, AdaptableTheme, CalculatedColumn, CreatedRowInfo, DashboardState, DataImportedInfo, DataSet, DeletedRowInfo, EditedRowInfo, LayoutState, RowDataChangedInfo, SystemStatusMessageInfo } from '../../types';
5
5
  import { ApiBase } from '../Implementation/ApiBase';
6
6
  import { BaseSchedule } from '../../AdaptableState/Common/Schedule';
7
+ import { LayoutChangedAction } from '../Events/LayoutChanged';
7
8
  export declare class EventInternalApi extends ApiBase {
8
9
  fireGridSortedEvent(): void;
9
10
  fireCellChangedEvent(cellDataChangedInfo: CellDataChangedInfo): void;
@@ -11,7 +12,7 @@ export declare class EventInternalApi extends ApiBase {
11
12
  fireDashboardChangedEvent(trigger: string, oldDashboardState: DashboardState, newDashboardState: DashboardState): void;
12
13
  fireAlertFiredEvent(alertToFire: AdaptableAlert): void;
13
14
  fireThemeChangedEvent(theme: AdaptableTheme, trigger: 'ThemeSelected' | 'ThemeEdited'): void;
14
- fireLayoutChangedEvent(trigger: string, oldState: LayoutState, newState: LayoutState): void;
15
+ fireLayoutChangedEvent(trigger: LayoutChangedAction, oldState: LayoutState, newState: LayoutState): void;
15
16
  fireScheduleTriggeredEvent(schedule: BaseSchedule): void;
16
17
  fireDataSetSelectedEvent(dataSet: DataSet): void;
17
18
  fireSystemStatusMessageDisplayedEvent(systemStatusMessageInfo: SystemStatusMessageInfo): void;
@@ -88,26 +88,26 @@ export interface LayoutApi {
88
88
  */
89
89
  updateCurrentLayout(updateFn: (layout: TableLayout | PivotLayout) => TableLayout | PivotLayout): void;
90
90
  /**
91
- * Creates new Layout in Adaptable State
91
+ * Creates a new Layout
92
92
  * @param layoutToCreate Layout to create
93
93
  * @returns created Layout object or `false` if Layout with the same name/Uuid already exists
94
94
  */
95
95
  createLayout(layoutToCreate: Layout): Layout | false;
96
96
  /**
97
- * Creates new Layout in the state and then loads it into Grid
97
+ * Creates new Layout and loads it into Grid
98
98
  * @param layoutToCreate Layout to create
99
99
  * @returns created Layout object or `false` if creation failed
100
100
  */
101
101
  createAndSetLayout(layoutToCreate: Layout): Layout | false;
102
102
  /**
103
- * Creates new Layout based on given Layout but with name provided
103
+ * Creates new Layout by cloning a given Layout
104
104
  * @param layoutToClone Layout to clone
105
- * @param layoutName name to use for new Layout
105
+ * @param layoutName name of new Layout
106
106
  * @returns created Layout object or `false` if creation failed
107
107
  */
108
108
  cloneLayout(layoutToClone: Layout, layoutName: string): Layout | false;
109
109
  /**
110
- * Creates new Layout based on given Layout but with name provided and then loads it into Grid
110
+ * Creates new Layout by cloning a given Layout and then loads it into Grid
111
111
  * @param layoutToClone Layout to clone
112
112
  * @param layoutName name to use for new Layout
113
113
  * @returns created Layout object or `false` if creation failed
@@ -148,40 +148,19 @@ export interface LayoutApi {
148
148
  * @param layout Name of the Layout to delete
149
149
  */
150
150
  deleteLayoutByName(layoutName: string): void;
151
- /**
152
- * Specifies where Current Layout is editable
153
- */
154
- isCurrentLayoutReadOnly(): boolean;
155
151
  /**
156
152
  * Opens Change Column Caption popup
157
153
  * @param column Column to open Popup for
158
154
  */
159
155
  showChangeColumnCaption(column: AdaptableColumn): void;
160
156
  /**
161
- * Removes a Column from the Current Layout
157
+ * Removes a Column from Current Table or Pivot Layout
162
158
  * @param columnId Column to remove
163
159
  */
164
160
  removeColumnFromCurrentLayout(columnId: string): void;
165
161
  /**
166
- * Removes a Column from all Layouts
167
- * @param columnId Column to remove
168
- */
169
- removeColumnFromAllLayouts(columnId: string): void;
170
- /**
171
- * Removes a Column from a given Layout
172
- * @param columnId Column to remove
173
- * @param layoutName layout from which to remove Column
174
- */
175
- removeColumnFromLayout(columnId: string, layoutName: string): void;
176
- /**
177
- * Adds a Column to a given Table Layout
178
- * @param columnId Column to add
179
- * @param layoutName layout to which to add Column
180
- */
181
- addColumnToTableLayout(columnId: string, layoutName: string): void;
182
- /**
183
- * Adds a Column to Current (Table) Layout
162
+ * Adds a Column to Current Table or Pivot Layout
184
163
  * @param columnId Column to add
185
164
  */
186
- addColumnToCurrentTableLayout(columnId: string): void;
165
+ addColumnToCurrentLayout(columnId: string): void;
187
166
  }
@@ -2,10 +2,6 @@ import * as Redux from 'redux';
2
2
  import { AdaptableState } from '../../../types';
3
3
  import { LayoutState, Layout } from '../../AdaptableState/LayoutState';
4
4
  import { ColumnFilter } from '../../types';
5
- /**
6
- * @ReduxAction A new caption / header has been set for a Column in the Layout
7
- */
8
- export declare const LAYOUT_COLUMN_SET_CAPTION = "LAYOUT_COLUMN_SET_CAPTION";
9
5
  /**
10
6
  * @ReduxAction Layout Module is ready
11
7
  */
@@ -30,14 +26,6 @@ export declare const LAYOUT_SELECT = "LAYOUT_SELECT";
30
26
  * @ReduxAction A Layout has been (auto)saved
31
27
  */
32
28
  export declare const LAYOUT_SAVE = "LAYOUT_SAVE";
33
- /**
34
- * @ReduxAction A Column has been added
35
- */
36
- export declare const LAYOUT_COLUMN_ADD = "LAYOUT_COLUMN_ADD";
37
- /**
38
- * @ReduxAction A Column has been removed
39
- */
40
- export declare const LAYOUT_COLUMN_REMOVE = "LAYOUT_COLUMN_REMOVE";
41
29
  /**
42
30
  * @ReduxAction A Column Filter has been added
43
31
  */
@@ -83,7 +71,7 @@ export declare const LAYOUT_GRID_FILTER_SUSPEND = "LAYOUT_GRID_FILTER_SUSPEND";
83
71
  */
84
72
  export declare const LAYOUT_GRID_FILTER_UNSUSPEND = "LAYOUT_GRID_FILTER_UNSUSPEND";
85
73
  /**
86
- * @ReduxAction Edit Grid filter
74
+ * @ReduxAction The Grid Filter has been edited
87
75
  */
88
76
  export declare const LAYOUT_GRID_FILTER_SET = "LAYOUT_GRID_FILTER_SET";
89
77
  /**
@@ -171,8 +159,6 @@ export interface LayoutReadyAction extends Redux.Action {
171
159
  export declare const LayoutAdd: (layout: Layout) => LayoutAddAction;
172
160
  export declare const LayoutDelete: (layout: Layout) => LayoutDeleteAction;
173
161
  export declare const LayoutSave: (layout: Layout) => LayoutSaveAction;
174
- export declare const LayoutAddColumn: (layoutName: string, columnId: string) => LayoutAddColumnAction;
175
- export declare const LayoutRemoveColumn: (layoutName: string, columnId: string) => LayoutRemoveColumnAction;
176
162
  export declare const LayoutSelect: (layoutName: string) => LayoutSelectAction;
177
163
  export declare const LayoutReady: (layoutState: LayoutState) => LayoutReadyAction;
178
164
  export declare const getColumnFiltersSelector: (state: AdaptableState) => ColumnFilter[];
@@ -1,14 +1,10 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.LayoutReducer = exports.getColumnFilterSelector = exports.getCurrentLayoutSelector = exports.getColumnFiltersSelector = exports.LayoutReady = exports.LayoutSelect = exports.LayoutRemoveColumn = exports.LayoutAddColumn = exports.LayoutSave = exports.LayoutDelete = exports.LayoutAdd = exports.LayoutGridFilterClear = exports.LayoutGridFilterUnSuspend = exports.LayoutGridFilterSuspend = exports.LayoutGridFilterSet = exports.LayoutColumnFilterUnSuspendAll = exports.LayoutColumnFilterSuspendAll = exports.LayoutColumnFilterUnSuspend = exports.LayoutColumnFilterSuspend = exports.LayoutColumnFilterClear = exports.LayoutColumnFilterClearAll = exports.LayoutColumnFilterSet = exports.LayoutColumnFilterEdit = exports.LayoutColumnFilterAdd = exports.LAYOUT_GRID_FILTER_CLEAR = exports.LAYOUT_GRID_FILTER_SET = exports.LAYOUT_GRID_FILTER_UNSUSPEND = exports.LAYOUT_GRID_FILTER_SUSPEND = exports.LAYOUT_COLUMN_FILTER_UNSUSPEND_ALL = exports.LAYOUT_COLUMN_FILTER_SUSPEND_ALL = exports.LAYOUT_COLUMN_FILTER_UNSUSPEND = exports.LAYOUT_COLUMN_FILTER_SUSPEND = exports.LAYOUT_COLUMN_FILTER_CLEAR = exports.LAYOUT_COLUMN_FILTER_CLEAR_ALL = exports.LAYOUT_COLUMN_FILTER_SET = exports.LAYOUT_COLUMN_FILTER_EDIT = exports.LAYOUT_COLUMN_FILTER_ADD = exports.LAYOUT_COLUMN_REMOVE = exports.LAYOUT_COLUMN_ADD = exports.LAYOUT_SAVE = exports.LAYOUT_SELECT = exports.LAYOUT_DELETE = exports.LAYOUT_EDIT = exports.LAYOUT_ADD = exports.LAYOUT_READY = exports.LAYOUT_COLUMN_SET_CAPTION = void 0;
3
+ exports.LayoutReducer = exports.getColumnFilterSelector = exports.getCurrentLayoutSelector = exports.getColumnFiltersSelector = exports.LayoutReady = exports.LayoutSelect = exports.LayoutSave = exports.LayoutDelete = exports.LayoutAdd = exports.LayoutGridFilterClear = exports.LayoutGridFilterUnSuspend = exports.LayoutGridFilterSuspend = exports.LayoutGridFilterSet = exports.LayoutColumnFilterUnSuspendAll = exports.LayoutColumnFilterSuspendAll = exports.LayoutColumnFilterUnSuspend = exports.LayoutColumnFilterSuspend = exports.LayoutColumnFilterClear = exports.LayoutColumnFilterClearAll = exports.LayoutColumnFilterSet = exports.LayoutColumnFilterEdit = exports.LayoutColumnFilterAdd = exports.LAYOUT_GRID_FILTER_CLEAR = exports.LAYOUT_GRID_FILTER_SET = exports.LAYOUT_GRID_FILTER_UNSUSPEND = exports.LAYOUT_GRID_FILTER_SUSPEND = exports.LAYOUT_COLUMN_FILTER_UNSUSPEND_ALL = exports.LAYOUT_COLUMN_FILTER_SUSPEND_ALL = exports.LAYOUT_COLUMN_FILTER_UNSUSPEND = exports.LAYOUT_COLUMN_FILTER_SUSPEND = exports.LAYOUT_COLUMN_FILTER_CLEAR = exports.LAYOUT_COLUMN_FILTER_CLEAR_ALL = exports.LAYOUT_COLUMN_FILTER_SET = exports.LAYOUT_COLUMN_FILTER_EDIT = exports.LAYOUT_COLUMN_FILTER_ADD = exports.LAYOUT_SAVE = exports.LAYOUT_SELECT = exports.LAYOUT_DELETE = exports.LAYOUT_EDIT = exports.LAYOUT_ADD = exports.LAYOUT_READY = void 0;
4
4
  const tslib_1 = require("tslib");
5
5
  const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
6
6
  const AdaptableHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/AdaptableHelper"));
7
7
  const LayoutHelpers_1 = require("../../Api/Implementation/LayoutHelpers");
8
- /**
9
- * @ReduxAction A new caption / header has been set for a Column in the Layout
10
- */
11
- exports.LAYOUT_COLUMN_SET_CAPTION = 'LAYOUT_COLUMN_SET_CAPTION';
12
8
  /**
13
9
  * @ReduxAction Layout Module is ready
14
10
  */
@@ -33,14 +29,6 @@ exports.LAYOUT_SELECT = 'LAYOUT_SELECT';
33
29
  * @ReduxAction A Layout has been (auto)saved
34
30
  */
35
31
  exports.LAYOUT_SAVE = 'LAYOUT_SAVE';
36
- /**
37
- * @ReduxAction A Column has been added
38
- */
39
- exports.LAYOUT_COLUMN_ADD = 'LAYOUT_COLUMN_ADD';
40
- /**
41
- * @ReduxAction A Column has been removed
42
- */
43
- exports.LAYOUT_COLUMN_REMOVE = 'LAYOUT_COLUMN_REMOVE';
44
32
  /**
45
33
  * @ReduxAction A Column Filter has been added
46
34
  */
@@ -86,7 +74,7 @@ exports.LAYOUT_GRID_FILTER_SUSPEND = 'LAYOUT_GRID_FILTER_SUSPEND';
86
74
  */
87
75
  exports.LAYOUT_GRID_FILTER_UNSUSPEND = 'LAYOUT_GRID_FILTER_UNSUSPEND';
88
76
  /**
89
- * @ReduxAction Edit Grid filter
77
+ * @ReduxAction The Grid Filter has been edited
90
78
  */
91
79
  exports.LAYOUT_GRID_FILTER_SET = 'LAYOUT_GRID_FILTER_SET';
92
80
  /**
@@ -168,18 +156,6 @@ const LayoutSave = (layout) => ({
168
156
  layout: (0, LayoutHelpers_1.normalizeLayout)(layout),
169
157
  });
170
158
  exports.LayoutSave = LayoutSave;
171
- const LayoutAddColumn = (layoutName, columnId) => ({
172
- type: exports.LAYOUT_COLUMN_ADD,
173
- layoutName,
174
- columnId,
175
- });
176
- exports.LayoutAddColumn = LayoutAddColumn;
177
- const LayoutRemoveColumn = (layoutName, columnId) => ({
178
- type: exports.LAYOUT_COLUMN_REMOVE,
179
- layoutName,
180
- columnId,
181
- });
182
- exports.LayoutRemoveColumn = LayoutRemoveColumn;
183
159
  const LayoutSelect = (layoutName) => ({
184
160
  type: exports.LAYOUT_SELECT,
185
161
  layoutName,
@@ -264,36 +240,6 @@ const LayoutReducer = (state = initialState, action) => {
264
240
  Layouts: newLayouts,
265
241
  };
266
242
  }
267
- case exports.LAYOUT_COLUMN_ADD: {
268
- const addColumnAction = action;
269
- const layoutname = addColumnAction.layoutName;
270
- const colToAdd = addColumnAction.columnId;
271
- let layoutToUpdate = state.Layouts.find((l) => l.Name === layoutname);
272
- if (layoutToUpdate) {
273
- layoutToUpdate.TableColumns.push(colToAdd);
274
- return {
275
- ...state,
276
- Layouts: state.Layouts.map((abObject) => abObject.Uuid === layoutToUpdate.Uuid ? layoutToUpdate : abObject),
277
- };
278
- }
279
- return state;
280
- }
281
- case exports.LAYOUT_COLUMN_REMOVE: {
282
- const removeColumnAction = action;
283
- const layoutname = removeColumnAction.layoutName;
284
- const colToRemove = removeColumnAction.columnId;
285
- let layoutToUpdate = state.Layouts.find((l) => l.Name === layoutname);
286
- if (layoutToUpdate) {
287
- layoutToUpdate.TableColumns = layoutToUpdate.TableColumns.filter((col) => {
288
- return col !== colToRemove;
289
- });
290
- return {
291
- ...state,
292
- Layouts: state.Layouts.map((abObject) => abObject.Uuid === layoutToUpdate.Uuid ? layoutToUpdate : abObject),
293
- };
294
- }
295
- return state;
296
- }
297
243
  case exports.LAYOUT_COLUMN_FILTER_SET: {
298
244
  let columnFilters = currentLayout.ColumnFilters ?? [];
299
245
  const columnFilterAction = action.columnFilter;
@@ -24,4 +24,5 @@ export declare class LayoutModule extends AdaptableModuleBase implements IModule
24
24
  getViewProperties(): AdaptableModuleView;
25
25
  handleLayoutSelection(): void;
26
26
  getReferencedNamedQueryNames(layout: Layout): string[];
27
+ isCurrentLayoutReadOnly(): boolean;
27
28
  }
@@ -129,7 +129,7 @@ class LayoutModule extends AdaptableModuleBase_1.AdaptableModuleBase {
129
129
  return;
130
130
  }
131
131
  let returnColumnMenuItems = [];
132
- const isReadOnlyLayout = this.api.layoutApi.isCurrentLayoutReadOnly();
132
+ const isReadOnlyLayout = this.isCurrentLayoutReadOnly();
133
133
  if (!isReadOnlyLayout) {
134
134
  returnColumnMenuItems.push(this.createMenuItemShowPopup('layout-edit', 'Edit Layout', this.moduleInfo.Popup, 'edit-table', {
135
135
  action: 'Edit',
@@ -168,7 +168,7 @@ class LayoutModule extends AdaptableModuleBase_1.AdaptableModuleBase {
168
168
  }
169
169
  createContextMenuItems(menuContext) {
170
170
  let returnColumnMenuItems = [];
171
- if (this.isModuleEditable() && !this.api.layoutApi.isCurrentLayoutReadOnly()) {
171
+ if (this.isModuleEditable() && !this.isCurrentLayoutReadOnly()) {
172
172
  returnColumnMenuItems.push(this.createMenuItemShowPopup('layout-edit', 'Edit Layout', this.moduleInfo.Popup, 'edit-table', {
173
173
  action: 'Edit',
174
174
  source: 'ColumnMenu',
@@ -454,5 +454,12 @@ class LayoutModule extends AdaptableModuleBase_1.AdaptableModuleBase {
454
454
  }
455
455
  return this.api.namedQueryApi.internalApi.getReferencedNamedQueryNames(layout.GridFilter.Expression);
456
456
  }
457
+ isCurrentLayoutReadOnly() {
458
+ const currentLayout = this.api.layoutApi.getCurrentLayout();
459
+ if (currentLayout) {
460
+ return currentLayout.IsReadOnly;
461
+ }
462
+ return true;
463
+ }
457
464
  }
458
465
  exports.LayoutModule = LayoutModule;
@@ -80,7 +80,44 @@ const FloatingFilterValues = (props) => {
80
80
  columnId: props.columnId,
81
81
  searchValueRef,
82
82
  });
83
- (0, react_1.useEffect)(triggerValuesLoad, []);
83
+ const valueRef = React.useRef(props.value);
84
+ (0, react_1.useEffect)(() => {
85
+ // we used to load values initially on mount, without any condition
86
+ const value = valueRef.current;
87
+ // but we now optimize it - if there are no values to show (for which we would need a label)
88
+ // then we skip it altogether, so we'll only load onMenuOpen
89
+ if (!value || !Array.isArray(value) || value.length === 0) {
90
+ return;
91
+ }
92
+ // however, if the `value` prop is a non-empty array, we need to load the values
93
+ // so we know which labels to show
94
+ triggerValuesLoad();
95
+ }, []);
96
+ const quickFilterValuesRef = React.useRef(quickFilterValues);
97
+ quickFilterValuesRef.current = quickFilterValues;
98
+ (0, react_1.useEffect)(() => {
99
+ // since we did the optimization above,
100
+ // we now hit a scenario where the value is set via an API method
101
+ // so we also need to account for that - so whenever props.value changes, we need to check
102
+ // and if we previously didn't have a valid array
103
+ // and now we do, we need to load the values - if they are not already loaded
104
+ if (quickFilterValuesRef.current.values.length > 0 ||
105
+ quickFilterValuesRef.current.dataLoadIsComplete) {
106
+ // values have already been loaded, so we can skip
107
+ return;
108
+ }
109
+ const currentValue = props.value;
110
+ const prevValue = valueRef.current;
111
+ valueRef.current = currentValue;
112
+ const prevValid = Array.isArray(prevValue) && prevValue.length > 0;
113
+ const currentValid = Array.isArray(currentValue) && currentValue.length > 0;
114
+ if (!currentValid) {
115
+ return;
116
+ }
117
+ if (!prevValid && currentValid) {
118
+ triggerValuesLoad();
119
+ }
120
+ }, [props.value]);
84
121
  const onMenuOpen = triggerValuesLoad;
85
122
  const onInputChange = React.useCallback((value) => {
86
123
  searchValueRef.current = value;
@@ -3,13 +3,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.ColorPicker = void 0;
4
4
  const tslib_1 = require("tslib");
5
5
  const React = tslib_1.__importStar(require("react"));
6
+ const react_1 = require("react");
6
7
  const rebass_1 = require("rebass");
8
+ const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
7
9
  const Input_1 = tslib_1.__importDefault(require("../Input"));
8
10
  const StyleHelper_1 = require("../../Utilities/Helpers/StyleHelper");
9
11
  const tinycolor2_1 = tslib_1.__importDefault(require("tinycolor2"));
10
12
  exports.ColorPicker = React.forwardRef((props, ref) => {
11
13
  const ColorPalette = props.api.userInterfaceApi.getColorPalette();
12
14
  let { api, value, includeAlpha = true, ...restProps } = props;
15
+ // Create a debounced version of onChange
16
+ // we need this because moving the mouse A LOT in the custom color picker can break the React rendering
17
+ const debouncedOnChange = (0, react_1.useCallback)((0, debounce_1.default)((color) => {
18
+ props.onChange(color);
19
+ }, 30), [props.onChange]);
20
+ // Clean up the debounce on unmount
21
+ (0, react_1.useEffect)(() => {
22
+ return () => {
23
+ debouncedOnChange.cancel();
24
+ };
25
+ }, [debouncedOnChange]);
13
26
  const optionsMap = ColorPalette.reduce((acc, colorItem) => ({ ...acc, [(0, StyleHelper_1.getVariableColor)(colorItem)]: colorItem }), {});
14
27
  const ABcolorChoicesOptions = Object.keys(optionsMap).map((x) => {
15
28
  return (React.createElement("option", { key: x, value: x }, x));
@@ -31,7 +44,7 @@ exports.ColorPicker = React.forwardRef((props, ref) => {
31
44
  * The value is not in the map when the color is not in the palette.
32
45
  */
33
46
  const color = optionsMap[event.target.value] ?? event.target.value;
34
- props.onChange(color);
47
+ debouncedOnChange(color);
35
48
  }, value: preparedValue, ref: ref, type: "color", style: {
36
49
  width: 70,
37
50
  padding: 0 /* we need this to be 0, since otherwise on Windows browsers, the chosen color cannot be seen */,
@@ -41,6 +54,6 @@ exports.ColorPicker = React.forwardRef((props, ref) => {
41
54
  React.createElement(rebass_1.Box, { mr: 1 }, "Opacity"),
42
55
  React.createElement(Input_1.default, { disabled: props.disabled, className: "ab-ColorPicker-range", style: { background: rangeBackround }, value: alpha, onChange: (event) => {
43
56
  const color = (0, tinycolor2_1.default)(value).setAlpha(event.target.value).toRgbString();
44
- props.onChange(color);
57
+ debouncedOnChange(color);
45
58
  }, min: 0, max: 1, step: 0.01, type: "range" })))));
46
59
  });
package/src/env.js CHANGED
@@ -2,6 +2,6 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.default = {
4
4
  NEXT_PUBLIC_INFINITE_TABLE_LICENSE_KEY: "StartDate=2021-06-29|EndDate=2030-01-01|Owner=Adaptable|Type=distribution|TS=1624971462479|C=137829811,1004007071,2756196225,1839832928,3994409405,636616862" || '',
5
- PUBLISH_TIMESTAMP: 1752148722883 || Date.now(),
6
- VERSION: "20.2.8" || '--current-version--',
5
+ PUBLISH_TIMESTAMP: 1752564904642 || Date.now(),
6
+ VERSION: "20.2.9" || '--current-version--',
7
7
  };
package/src/types.d.ts CHANGED
@@ -121,7 +121,7 @@ export type { SystemStatusMessageDisplayedInfo } from './Api/Events/SystemStatus
121
121
  export type { CellChangedInfo } from './Api/Events/CellChanged';
122
122
  export type { TeamSharingEntityChangedInfo } from './Api/Events/TeamSharingEntityChanged';
123
123
  export type { RowChangedInfo } from './Api/Events/RowChanged';
124
- export type { LayoutChangedInfo } from './Api/Events/LayoutChanged';
124
+ export type { LayoutChangedInfo, LayoutChangedAction } from './Api/Events/LayoutChanged';
125
125
  export type { CalculatedColumnChangedInfo } from './Api/Events/CalculatedColumnChanged';
126
126
  export type { CustomToolbarConfiguredInfo } from './Api/Events/CustomToolbarConfigured';
127
127
  export type { LiveDataChangedInfo, LiveReport } from './Api/Events/LiveDataChanged';