@xh/hoist 73.0.0-SNAPSHOT.1746647244798 → 73.0.0-SNAPSHOT.1746740884592

package/desktop/cmp/grid/impl/filter/headerfilter/values/ValuesTabModel.ts

@@ -10,7 +10,7 @@ import {FieldFilterSpec} from '@xh/hoist/data';
 import {HeaderFilterModel} from '../HeaderFilterModel';
 import {checkbox} from '@xh/hoist/desktop/cmp/input';
 import {action, bindable, computed, makeObservable, observable} from '@xh/hoist/mobx';
-import {castArray, difference, flatten, isEmpty, map, partition, uniq, without} from 'lodash';
+import {castArray, difference, isEmpty, partition, uniq, without} from 'lodash';
 
 export class ValuesTabModel extends HoistModel {
     override xhImpl = true;
@@ -26,12 +26,6 @@ export class ValuesTabModel extends HoistModel {
     /** Bound search term for `StoreFilterField` */
     @bindable filterText: string = null;
 
-    /*
-     * Available only when commit on change is false merge
-     * current filter with pendingValues on commit
-     */
-    @bindable combineCurrentFilters: boolean = false;
-
     /** FieldFilter output by this model. */
     @computed.struct
     get filter(): FieldFilterSpec {
@@ -87,22 +81,11 @@ export class ValuesTabModel extends HoistModel {
         this.headerFilterModel = headerFilterModel;
         this.gridModel = this.createGridModel();
 
-        this.addReaction(
-            {
-                track: () => this.pendingValues,
-                run: () => this.syncGrid(),
-                fireImmediately: true
-            },
-            {
-                track: () => this.filterText,
-                run: () => this.filterTextReaction(),
-                debounce: 300
-            },
-            {
-                track: () => this.combineCurrentFilters,
-                run: () => this.combineCurrentFiltersToggleReaction()
-            }
-        );
+        this.addReaction({
+            track: () => this.pendingValues,
+            run: () => this.syncGrid(),
+            fireImmediately: true
+        });
     }
 
     syncWithFilter() {
@@ -132,42 +115,6 @@ export class ValuesTabModel extends HoistModel {
     //-------------------
     // Implementation
     //-------------------
-    @action
-    filterTextReaction() {
-        if (!this.filterText) {
-            this.combineCurrentFilters = false;
-            this.doSyncWithFilter();
-            return;
-        }
-
-        const {records} = this.gridModel.store,
-            currentFilterValues = flatten(map(this.columnFilters, 'value')),
-            checkedRecs = records.filter(
-                it =>
-                    this.headerFilterModel.commitOnChange ||
-                    currentFilterValues.length ||
-                    it.get('isChecked')
-            ),
-            values = map(checkedRecs, it => it.get('value'));
-
-        this.pendingValues = uniq(
-            this.combineCurrentFilters ? [...currentFilterValues, ...values] : values
-        );
-    }
-
-    @action combineCurrentFiltersToggleReaction() {
-        if (!this.filterText) return;
-
-        const {records} = this.gridModel.store,
-            currentFilterValues = flatten(map(this.columnFilters, 'value')),
-            checkedRecs = records.filter(it => it.get('isChecked')),
-            values = map(checkedRecs, it => it.get('value'));
-
-        this.pendingValues = uniq(
-            this.combineCurrentFilters ? [...currentFilterValues, ...values] : values
-        );
-    }
-
     private getFilter() {
         const {gridFilterModel, pendingValues, values, valueCount, field} = this,
             included = pendingValues.map(it => gridFilterModel.fromDisplayValue(it)),
@@ -270,10 +217,17 @@ export class ValuesTabModel extends HoistModel {
             onRowClicked: ({data: record}) => {
                 this.setRecsChecked(!record.get('isChecked'), record.get('value'));
             },
-            hideHeaders: true,
             columns: [
                 {
                     field: 'isChecked',
+                    headerName: ({gridModel}) => {
+                        return checkbox({
+                            disabled: gridModel.store.empty,
+                            displayUnsetState: true,
+                            value: this.allVisibleRecsChecked,
+                            onChange: () => this.toggleAllRecsChecked()
+                        });
+                    },
                     width: 28,
                     autosizable: false,
                     pinned: true,
@@ -291,6 +245,7 @@ export class ValuesTabModel extends HoistModel {
                 },
                 {
                     field: 'value',
+                    displayName: '(Select All)',
                     align: 'left',
                     comparator: (v1, v2, sortDir, abs, {defaultComparator}) => {
                         const mul = sortDir === 'desc' ? -1 : 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "73.0.0-SNAPSHOT.1746647244798",
+  "version": "73.0.0-SNAPSHOT.1746740884592",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",

package/styles/XH.scss

@@ -96,6 +96,7 @@ body.xh-app {
   .xh-text-color-accent { color: var(--xh-text-color-accent); }
   .xh-text-color-muted { color: var(--xh-text-color-muted); }
   .xh-transparent { color: transparent; }
+  .xh-white { color: var(--xh-white); }
   .xh-yellow { color: var(--xh-yellow); }
   .xh-yellow-light { color: var(--xh-yellow-light); }
 

package/styles/vars.scss

@@ -47,6 +47,7 @@ body {
   --xh-purple: var(--purple, #{mc('purple', '800')});
   --xh-red: var(--red, #{mc('red', '900')});
   --xh-red-muted: var(--red-muted, #{mc-muted('red', '900', 40%, 20%)});
+  --xh-white: var(--white, hsl(0, 0%, 100%));
   --xh-yellow: var(--yellow, #{mc('yellow', '800')});
   --xh-yellow-light: var(--yellow-light, #{mc('yellow', '50')});