@visactor/vtable-plugins 1.22.6 → 1.22.7-alpha.1

package/cjs/filter/value-filter.js

@@ -7,52 +7,132 @@ Object.defineProperty(exports, "__esModule", {
 const vutils_1 = require("@visactor/vutils"), types_1 = require("./types"), styles_1 = require("./styles");
 
 class ValueFilter {
-    constructor(table, filterStateManager) {
-        this.selectedKeys = new Map, this.candidateKeys = new Map, this.formatFnCache = new Map, 
-        this.toUnformattedCache = new Map, this.valueFilterOptionList = new Map, this.table = table, 
-        this.filterStateManager = filterStateManager;
+    constructor(table, filterStateManager, pluginOptions) {
+        this.uniqueKeys = new Map, this.displayToRawValueMap = new Map, this.valueFilterOptionList = new Map, 
+        this.table = table, this.filterStateManager = filterStateManager, this.pluginOptions = pluginOptions, 
+        this.styles = pluginOptions.styles, this.filterStateManager.subscribe((state => {
+            const filterState = state.filters.get(this.selectedField);
+            filterState && "byValue" === filterState.type && this.updateUI(filterState);
+        }));
+    }
+    updateUI(filterState) {
+        this.syncCheckboxesWithFilterState(filterState), this.syncSelectAllWithFilterState(filterState);
     }
     setSelectedField(fieldId) {
-        this.selectedField = fieldId;
-    }
-    getFormatFnCache(fieldId) {
-        let formatFn = this.formatFnCache.get(fieldId);
-        if (null != formatFn) return formatFn;
-        const headerAddress = this.table.internalProps.layoutMap.getHeaderCellAddressByField(String(fieldId)), bodyInfo = this.table.internalProps.layoutMap.getBody(null == headerAddress ? void 0 : headerAddress.col, null == headerAddress ? void 0 : headerAddress.row);
-        return formatFn = bodyInfo && "fieldFormat" in bodyInfo && "function" == typeof bodyInfo.fieldFormat ? bodyInfo.fieldFormat : bodyInfo && "format" in bodyInfo && "function" == typeof bodyInfo.format ? bodyInfo.format : record => record[fieldId], 
-        this.formatFnCache.set(fieldId, formatFn), formatFn;
-    }
-    collectCandidateKeysForUnfilteredColumn(fieldId) {
-        const countMap = new Map, records = this.table.internalProps.dataSource.records, formatFn = this.getFormatFnCache(fieldId), toUnformatted = new Map;
-        records.forEach((record => {
-            const originalValue = record[fieldId], formattedValue = formatFn(record);
-            if (null != formattedValue) {
-                countMap.set(formattedValue, (countMap.get(formattedValue) || 0) + 1);
-                const unformattedSet = toUnformatted.get(formattedValue);
-                null != unformattedSet ? unformattedSet.add(originalValue) : toUnformatted.set(formattedValue, new Set([ originalValue ]));
+        this.selectedField = fieldId, this.collectUniqueColumnValues(fieldId);
+    }
+    collectUniqueColumnValues(fieldId, forceCollect = !1) {
+        var _a, _b, _c;
+        if (this.uniqueKeys.has(fieldId) && !forceCollect) return;
+        const displayToRawMap = new Map;
+        let targetCol = -1;
+        for (let col = 0; col < this.table.colCount; col++) {
+            for (let row = this.table.columnHeaderLevelCount; row < this.table.rowCount; row++) if (!this.table.internalProps.layoutMap.isHeader(col, row)) {
+                const bodyInfo = this.table.internalProps.layoutMap.getBody(col, row);
+                if (bodyInfo && bodyInfo.field === fieldId) {
+                    targetCol = col;
+                    break;
+                }
             }
-        })), this.candidateKeys.set(fieldId, countMap), this.toUnformattedCache.set(fieldId, toUnformatted);
-    }
-    collectCandidateKeysForFilteredColumn(candidateField) {
-        const filteredFields = this.filterStateManager.getActiveFilterFields().filter((field => field !== candidateField)), toUnformatted = new Map, formatFn = this.getFormatFnCache(candidateField), countMap = new Map;
-        this.table.internalProps.records.filter((record => filteredFields.every((field => this.selectedKeys.get(field).has(record[field]))))).forEach((record => {
-            const originalValue = record[candidateField], formattedValue = formatFn(record);
-            if (countMap.set(formattedValue, (countMap.get(formattedValue) || 0) + 1), null != formattedValue) {
-                const unformattedSet = toUnformatted.get(formattedValue);
-                null != unformattedSet ? unformattedSet.add(originalValue) : toUnformatted.set(formattedValue, new Set([ originalValue ]));
+            if (-1 !== targetCol) break;
+        }
+        const records = this.table.internalProps.records, recordsLength = records.length;
+        for (let i = 0; i < recordsLength; i++) {
+            let rawValue, displayValue;
+            if (-1 !== targetCol) {
+                const row = this.table.columnHeaderLevelCount + i, currentRecord = records[i];
+                if (null == currentRecord) continue;
+                rawValue = currentRecord[fieldId];
+                const bodyInfo = this.table.internalProps.layoutMap.getBody(targetCol, row);
+                displayValue = bodyInfo && "fieldFormat" in bodyInfo && bodyInfo.fieldFormat && "function" == typeof bodyInfo.fieldFormat ? bodyInfo.fieldFormat({
+                    [fieldId]: rawValue
+                }) : rawValue;
+            } else rawValue = records[i][fieldId], displayValue = rawValue;
+            null == rawValue || displayToRawMap.has(displayValue) || (displayToRawMap.set(displayValue, rawValue), 
+            this.displayToRawValueMap.has(fieldId) && !(null === (_a = this.displayToRawValueMap.get(fieldId)) || void 0 === _a ? void 0 : _a.has(displayValue)) && (null === (_c = null === (_b = this.filterStateManager.getFilterState(fieldId)) || void 0 === _b ? void 0 : _b.values) || void 0 === _c ? void 0 : _c.length) > 0 && this.filterStateManager.getFilterState(fieldId).values.push(rawValue));
+        }
+        this.displayToRawValueMap.set(fieldId, displayToRawMap);
+        const uniqueValues = Array.from(displayToRawMap.entries()).map((([displayValue, rawValue]) => ({
+            value: displayValue,
+            count: 0,
+            rawValue: rawValue
+        })));
+        this.uniqueKeys.set(fieldId, uniqueValues);
+    }
+    updateCandidateCounts(fieldId) {
+        const uniqueValues = this.uniqueKeys.get(fieldId);
+        if (!uniqueValues) return;
+        const filter = this.filterStateManager.getFilterState(fieldId), dataSource = (null == filter ? void 0 : filter.enable) ? this.table.internalProps.records : this.table.internalProps.dataSource;
+        let targetCol = -1;
+        for (let col = 0; col < this.table.colCount; col++) {
+            for (let row = this.table.columnHeaderLevelCount; row < this.table.rowCount; row++) if (!this.table.internalProps.layoutMap.isHeader(col, row)) {
+                const bodyInfo = this.table.internalProps.layoutMap.getBody(col, row);
+                if (bodyInfo && bodyInfo.field === fieldId) {
+                    targetCol = col;
+                    break;
+                }
             }
-        })), this.candidateKeys.set(candidateField, countMap), this.toUnformattedCache.set(candidateField, toUnformatted);
+            if (-1 !== targetCol) break;
+        }
+        const dataLength = dataSource.length, countMap = new Map;
+        for (let i = 0; i < dataLength; i++) {
+            let displayValue;
+            if (-1 !== targetCol) {
+                const row = this.table.columnHeaderLevelCount + i;
+                row < this.table.rowCount && (displayValue = this.table.getCellValue(targetCol, row));
+            } else displayValue = this.table.getFieldData(String(fieldId), -1 !== targetCol ? targetCol : 0, this.table.columnHeaderLevelCount + i);
+            null != displayValue && countMap.set(displayValue, (countMap.get(displayValue) || 0) + 1);
+        }
+        uniqueValues.forEach((item => {
+            item.count = countMap.get(item.value) || 0;
+        }));
     }
-    toggleSelectAll(fieldId, selected) {
-        this.valueFilterOptionList.get(fieldId).forEach((option => {
-            option.checkbox.checked = selected;
+    onValueSelect(fieldId, displayValue, selected) {
+        const displayToRawMap = this.displayToRawValueMap.get(fieldId), rawValue = displayToRawMap ? displayToRawMap.get(displayValue) : displayValue, filter = this.filterStateManager.getFilterState(fieldId);
+        let updatedValues;
+        filter ? (updatedValues = selected ? [ ...filter.values || [], rawValue ] : (filter.values || []).filter((v => v !== rawValue)), 
+        this.filterStateManager.dispatch({
+            type: types_1.FilterActionType.UPDATE_FILTER,
+            payload: {
+                field: fieldId,
+                values: updatedValues
+            }
+        })) : (updatedValues = selected ? [ rawValue ] : [], this.filterStateManager.dispatch({
+            type: types_1.FilterActionType.ADD_FILTER,
+            payload: {
+                field: fieldId,
+                type: "byValue",
+                values: updatedValues
+            }
         }));
     }
-    syncSelectAllCheckbox(fieldId) {
-        const options = this.valueFilterOptionList.get(fieldId) || [], allChecked = options.every((o => o.checkbox.checked)), noneChecked = options.every((o => !o.checkbox.checked));
-        this.selectAllCheckbox.checked = allChecked, this.selectAllCheckbox.indeterminate = !allChecked && !noneChecked;
+    isValueVisible(displayValue, keyword) {
+        if (!keyword) return !0;
+        const filterKeywords = keyword.toUpperCase().split(" ").filter((s => s)), txtValue = String(displayValue).toUpperCase();
+        return filterKeywords.some((keyword => txtValue.includes(keyword)));
+    }
+    toggleSelectAll(fieldId, selected) {
+        const currentKeyword = this.filterStateManager.getCurrentSearchKeyword(fieldId), stableCandidates = this.filterStateManager.getStableCandidateValues(fieldId), displayToRawMap = this.displayToRawValueMap.get(fieldId), visibleRawValues = stableCandidates.filter((candidate => this.isValueVisible(candidate.value, currentKeyword))).map((candidate => displayToRawMap ? displayToRawMap.get(candidate.value) : candidate.value)), filter = this.filterStateManager.getFilterState(fieldId), currentValues = new Set((null == filter ? void 0 : filter.values) || []);
+        let updatedValues;
+        updatedValues = selected ? Array.from(new Set([ ...currentValues, ...visibleRawValues ])) : Array.from(currentValues).filter((value => !visibleRawValues.includes(value))), 
+        filter ? this.filterStateManager.dispatch({
+            type: types_1.FilterActionType.UPDATE_FILTER,
+            payload: {
+                field: fieldId,
+                values: updatedValues
+            }
+        }) : this.filterStateManager.dispatch({
+            type: types_1.FilterActionType.ADD_FILTER,
+            payload: {
+                field: fieldId,
+                type: "byValue",
+                values: updatedValues,
+                enable: !0
+            }
+        });
     }
     onSearch(fieldId, value) {
+        this.filterStateManager.updateSearchKeyword(fieldId, value);
         const items = this.valueFilterOptionList.get(fieldId), filterKeywords = value.toUpperCase().split(" ").filter((s => s));
         for (const item of items) {
             const txtValue = item.id.toUpperCase() || "", match = filterKeywords.some((keyword => txtValue.includes(keyword))), isVisible = 0 === filterKeywords.length || match;
@@ -60,35 +140,78 @@ class ValueFilter {
         }
     }
     initFilterStateFromTableData(fieldId) {
-        if (this.filterStateManager.getActiveFilterFields()) return;
-        const selectedValues = new Set, originalValues = new Set;
-        this.table.internalProps.dataSource.records.forEach((record => {
-            selectedValues.add(record[fieldId]);
-        }));
-        this.table.internalProps.records.forEach((record => {
-            originalValues.add(record[fieldId]);
-        }));
-        !(0, vutils_1.arrayEqual)(Array.from(originalValues), Array.from(selectedValues)) && (this.selectedKeys.set(fieldId, selectedValues), 
-        this.filterStateManager.dispatch({
-            type: types_1.FilterActionType.ADD_FILTER,
-            payload: {
-                field: fieldId,
-                type: "byValue",
-                values: Array.from(selectedValues),
-                enable: !0
+        var _a, _b, _c, _d;
+        const filter = this.filterStateManager.getFilterState(fieldId), isEnable = null == filter ? void 0 : filter.enable, syncCheckboxCheckedState = null === (_b = null === (_a = this.pluginOptions) || void 0 === _a ? void 0 : _a.syncCheckboxCheckedState) || void 0 === _b || _b;
+        if (isEnable) {
+            const selectedRawValues = new Set, displayToRawMap = this.displayToRawValueMap.get(fieldId);
+            let targetCol = -1;
+            for (let col = 0; col < this.table.colCount; col++) {
+                for (let row = this.table.columnHeaderLevelCount; row < this.table.rowCount; row++) if (!this.table.internalProps.layoutMap.isHeader(col, row)) {
+                    const bodyInfo = this.table.internalProps.layoutMap.getBody(col, row);
+                    if (bodyInfo && bodyInfo.field === fieldId) {
+                        targetCol = col;
+                        break;
+                    }
+                }
+                if (-1 !== targetCol) break;
             }
+            const currentLength = this.table.internalProps.dataSource.length;
+            for (let i = 0; i < currentLength; i++) {
+                let displayValue, rawValue;
+                if (-1 !== targetCol) {
+                    const row = this.table.columnHeaderLevelCount + i;
+                    row < this.table.rowCount && (displayValue = this.table.getCellValue(targetCol, row), 
+                    rawValue = displayToRawMap ? displayToRawMap.get(displayValue) : displayValue);
+                } else displayValue = this.table.getFieldData(String(fieldId), -1 !== targetCol ? targetCol : 0, this.table.columnHeaderLevelCount + i), 
+                rawValue = displayToRawMap ? displayToRawMap.get(displayValue) : displayValue;
+                null != rawValue && selectedRawValues.add(rawValue);
+            }
+            !(0, vutils_1.arrayEqual)(filter.values, Array.from(selectedRawValues)) && syncCheckboxCheckedState && this.filterStateManager.dispatch({
+                type: types_1.FilterActionType.UPDATE_FILTER,
+                payload: {
+                    field: fieldId,
+                    values: Array.from(selectedRawValues)
+                }
+            });
+        } else {
+            const availableRawValues = (null === (_d = null === (_c = this.uniqueKeys.get(fieldId)) || void 0 === _c ? void 0 : _c.filter((item => !syncCheckboxCheckedState || item.count > 0))) || void 0 === _d ? void 0 : _d.map((item => item.rawValue)).filter((v => null != v))) || [];
+            this.filterStateManager.dispatch({
+                type: types_1.FilterActionType.ADD_FILTER,
+                payload: {
+                    field: fieldId,
+                    type: "byValue",
+                    values: availableRawValues,
+                    enable: !1
+                }
+            });
+        }
+    }
+    syncCheckboxesWithFilterState(filter) {
+        if (!filter) return;
+        const selectedRawValues = filter.values || [], displayToRawMap = this.displayToRawValueMap.get(filter.field), optionDomList = this.valueFilterOptionList.get(filter.field);
+        null == optionDomList || optionDomList.forEach((optionDom => {
+            const displayValue = optionDom.originalValue, rawValue = displayToRawMap ? displayToRawMap.get(displayValue) : displayValue;
+            optionDom.checkbox.checked = selectedRawValues.some((v => v === rawValue));
         }));
     }
+    syncSelectAllWithFilterState(filter) {
+        var _a;
+        if (!filter || !filter.values) return this.selectAllCheckbox.checked = !1, void (this.selectAllCheckbox.indeterminate = !1);
+        const uniqueValuesCount = (null === (_a = this.uniqueKeys.get(filter.field)) || void 0 === _a ? void 0 : _a.length) || 0;
+        0 === uniqueValuesCount || 0 === filter.values.length ? (this.selectAllCheckbox.checked = !1, 
+        this.selectAllCheckbox.indeterminate = !1) : filter.values.length === uniqueValuesCount ? (this.selectAllCheckbox.checked = !0, 
+        this.selectAllCheckbox.indeterminate = !1) : (this.selectAllCheckbox.checked = !1, 
+        this.selectAllCheckbox.indeterminate = !0);
+    }
     applyFilter(fieldId = this.selectedField) {
-        const options = this.valueFilterOptionList.get(fieldId);
-        if (!options || 0 === options.length) return;
-        const selections = options.map((option => option.checkbox.checked ? option.originalValue : null)).filter((key => null !== key)).flat();
-        this.selectedKeys.set(fieldId, new Set(selections)), selections.length > 0 && selections.length < this.valueFilterOptionList.get(fieldId).length ? this.filterStateManager.dispatch({
+        var _a;
+        const allSelectedValues = this.filterStateManager.getFilterState(fieldId).values;
+        allSelectedValues.length >= 0 && allSelectedValues.length < (null === (_a = this.uniqueKeys.get(fieldId)) || void 0 === _a ? void 0 : _a.length) ? this.filterStateManager.dispatch({
             type: types_1.FilterActionType.APPLY_FILTERS,
             payload: {
                 field: fieldId,
                 type: "byValue",
-                values: selections,
+                values: allSelectedValues,
                 enable: !0
             }
         }) : this.filterStateManager.dispatch({
@@ -107,75 +230,97 @@ class ValueFilter {
         }), this.hide();
     }
     render(container) {
-        this.filterByValuePanel = document.createElement("div"), (0, styles_1.applyStyles)(this.filterByValuePanel, styles_1.filterStyles.filterPanel);
-        const searchContainer = document.createElement("div");
-        (0, styles_1.applyStyles)(searchContainer, styles_1.filterStyles.searchContainer), 
+        var _a;
+        this.filterByValuePanel = document.createElement("div"), (0, styles_1.applyStyles)(this.filterByValuePanel, this.styles.filterPanel), 
+        this.searchContainer = document.createElement("div"), (0, styles_1.applyStyles)(this.searchContainer, this.styles.searchContainer), 
         this.filterByValueSearchInput = document.createElement("input"), this.filterByValueSearchInput.type = "text", 
-        this.filterByValueSearchInput.placeholder = "可使用空格分隔多个关键词", (0, styles_1.applyStyles)(this.filterByValueSearchInput, styles_1.filterStyles.searchInput), 
-        searchContainer.appendChild(this.filterByValueSearchInput);
-        const optionsContainer = document.createElement("div");
-        (0, styles_1.applyStyles)(optionsContainer, styles_1.filterStyles.optionsContainer);
-        const selectAllItemDiv = document.createElement("div");
-        (0, styles_1.applyStyles)(selectAllItemDiv, styles_1.filterStyles.optionItem);
-        const selectAllLabel = document.createElement("label");
-        (0, styles_1.applyStyles)(selectAllLabel, styles_1.filterStyles.optionLabel), this.selectAllCheckbox = document.createElement("input"), 
-        this.selectAllCheckbox.type = "checkbox", this.selectAllCheckbox.checked = !0, (0, 
-        styles_1.applyStyles)(this.selectAllCheckbox, styles_1.filterStyles.checkbox), this.totalCountSpan = document.createElement("span"), 
-        this.totalCountSpan.textContent = "", (0, styles_1.applyStyles)(this.totalCountSpan, styles_1.filterStyles.countSpan), 
-        selectAllLabel.append(this.selectAllCheckbox, " 全选"), selectAllItemDiv.append(selectAllLabel, this.totalCountSpan), 
-        this.filterItemsContainer = document.createElement("div"), optionsContainer.append(selectAllItemDiv, this.filterItemsContainer), 
-        this.filterByValuePanel.append(searchContainer, optionsContainer), container.appendChild(this.filterByValuePanel), 
+        this.filterByValueSearchInput.placeholder = (null === (_a = this.styles.searchInput) || void 0 === _a ? void 0 : _a.placeholder) || "可使用空格分隔多个关键词", 
+        (0, styles_1.applyStyles)(this.filterByValueSearchInput, this.styles.searchInput), 
+        this.searchContainer.appendChild(this.filterByValueSearchInput), this.optionsContainer = document.createElement("div"), 
+        (0, styles_1.applyStyles)(this.optionsContainer, this.styles.optionsContainer), 
+        this.selectAllItemDiv = document.createElement("div"), (0, styles_1.applyStyles)(this.selectAllItemDiv, this.styles.optionItem), 
+        this.selectAllLabel = document.createElement("label"), (0, styles_1.applyStyles)(this.selectAllLabel, this.styles.optionLabel), 
+        this.selectAllCheckbox = document.createElement("input"), this.selectAllCheckbox.type = "checkbox", 
+        this.selectAllCheckbox.checked = !0, (0, styles_1.applyStyles)(this.selectAllCheckbox, this.styles.checkbox), 
+        this.selectAllLabel.append(this.selectAllCheckbox, " 全选"), this.selectAllItemDiv.appendChild(this.selectAllLabel), 
+        this.filterItemsContainer = document.createElement("div"), this.optionsContainer.append(this.selectAllItemDiv, this.filterItemsContainer), 
+        this.filterByValuePanel.append(this.searchContainer, this.optionsContainer), container.appendChild(this.filterByValuePanel), 
         this.bindEventForFilterByValue();
     }
+    updatePluginOptions(pluginOptions) {
+        this.pluginOptions = pluginOptions, this.styles = pluginOptions.styles, this.updateStyles(pluginOptions.styles);
+    }
+    updateStyles(styles) {
+        var _a;
+        (0, styles_1.applyStyles)(this.filterByValuePanel, styles.filterPanel), (0, styles_1.applyStyles)(this.searchContainer, styles.searchContainer), 
+        this.filterByValueSearchInput.placeholder = (null === (_a = styles.searchInput) || void 0 === _a ? void 0 : _a.placeholder) || "可使用空格分隔多个关键词", 
+        (0, styles_1.applyStyles)(this.filterByValueSearchInput, styles.searchInput), (0, 
+        styles_1.applyStyles)(this.optionsContainer, styles.optionsContainer), (0, styles_1.applyStyles)(this.selectAllItemDiv, styles.optionItem), 
+        (0, styles_1.applyStyles)(this.selectAllLabel, styles.optionLabel), (0, styles_1.applyStyles)(this.selectAllCheckbox, styles.checkbox);
+    }
     renderFilterOptions(field) {
-        var _a, _b, _c;
+        var _a, _b;
         this.filterItemsContainer.innerHTML = "", this.valueFilterOptionList.delete(field), 
         this.valueFilterOptionList.set(field, []);
-        let totalCount = 0, allChecked = !0, noneChecked = !0;
-        const selectedKeysSet = this.selectedKeys.get(field), itemDomList = [], isFiltered = null === (_a = this.filterStateManager.getFilterState(field)) || void 0 === _a ? void 0 : _a.enable, toUnformatted = this.toUnformattedCache.get(field), candidates = this.candidateKeys.get(field);
-        if (!candidates || 0 === candidates.size) return;
-        const candidatesArr = [ ...candidates.entries() ], sortedCandidatesArr = "number" == typeof candidatesArr[0][0] ? null === (_b = [ ...candidatesArr ]) || void 0 === _b ? void 0 : _b.sort((([a], [b]) => Number(a) - Number(b))) : null === (_c = [ ...candidatesArr ]) || void 0 === _c ? void 0 : _c.sort((([a], [b]) => String(a).localeCompare(String(b))));
-        null == sortedCandidatesArr || sortedCandidatesArr.forEach((([val, count]) => {
-            totalCount += count;
-            const unformattedArr = Array.from(toUnformatted.get(val) || new Set), itemDiv = document.createElement("div");
-            (0, styles_1.applyStyles)(itemDiv, styles_1.filterStyles.optionItem), itemDiv.style.display = "flex";
+        const selectedRawValues = (null === (_a = this.filterStateManager.getFilterState(field)) || void 0 === _a ? void 0 : _a.values) || [], selectedRawValueSet = new Set(selectedRawValues), itemDomList = [];
+        null === (_b = this.uniqueKeys.get(field)) || void 0 === _b || _b.forEach((({value: value, count: count, rawValue: rawValue}) => {
+            const itemDiv = document.createElement("div");
+            (0, styles_1.applyStyles)(itemDiv, this.styles.optionItem), itemDiv.style.display = "flex";
             const label = document.createElement("label");
-            (0, styles_1.applyStyles)(label, styles_1.filterStyles.optionLabel);
+            (0, styles_1.applyStyles)(label, this.styles.optionLabel);
             const checkbox = document.createElement("input");
-            checkbox.type = "checkbox", checkbox.value = String(val), checkbox.checked = !isFiltered || unformattedArr.some((v => null == selectedKeysSet ? void 0 : selectedKeysSet.has(v))), 
-            (0, styles_1.applyStyles)(checkbox, styles_1.filterStyles.checkbox), checkbox.checked ? noneChecked = !1 : allChecked = !1;
+            checkbox.type = "checkbox", checkbox.value = String(value), checkbox.checked = selectedRawValueSet.has(rawValue), 
+            (0, styles_1.applyStyles)(checkbox, this.styles.checkbox);
             const countSpan = document.createElement("span");
-            countSpan.textContent = String(count), (0, styles_1.applyStyles)(countSpan, styles_1.filterStyles.countSpan), 
-            label.append(checkbox, ` ${val}`), itemDiv.append(label, countSpan), this.filterItemsContainer.appendChild(itemDiv);
+            countSpan.textContent = String(count), (0, styles_1.applyStyles)(countSpan, this.styles.countSpan), 
+            label.append(checkbox, ` ${rawValue}`), itemDiv.append(label, countSpan), this.filterItemsContainer.appendChild(itemDiv);
             const itemDom = {
-                id: String(val),
-                originalValue: unformattedArr,
+                id: String(value),
+                originalValue: value,
                 itemContainer: itemDiv,
                 checkbox: checkbox,
                 countSpan: countSpan
             };
             itemDomList.push(itemDom);
-        })), this.valueFilterOptionList.set(field, itemDomList), this.selectAllCheckbox.checked = allChecked, 
-        this.selectAllCheckbox.indeterminate = !allChecked && !noneChecked, this.totalCountSpan.textContent = String(totalCount);
+        })), this.valueFilterOptionList.set(field, itemDomList);
     }
     bindEventForFilterByValue() {
-        this._onInputKeyUpHandler = event => {
+        this.filterByValuePanel.addEventListener("keyup", (event => {
             const target = event.target;
             if (target instanceof HTMLInputElement && "text" === target.type) {
                 const value = target.value;
                 this.onSearch(this.selectedField, value);
             }
-        }, this._onCheckboxChangeHandler = event => {
+        })), this.filterByValuePanel.addEventListener("change", (event => {
             const target = event.target;
-            target instanceof HTMLInputElement && "checkbox" === target.type && (target === this.selectAllCheckbox ? this.toggleSelectAll(this.selectedField, this.selectAllCheckbox.checked) : this.syncSelectAllCheckbox(this.selectedField));
-        }, this.filterByValuePanel.addEventListener("keyup", this._onInputKeyUpHandler), 
-        this.filterByValuePanel.addEventListener("change", this._onCheckboxChangeHandler);
+            target instanceof HTMLInputElement && "checkbox" === target.type && (target === this.selectAllCheckbox ? this.valueFilterOptionList.get(this.selectedField).forEach((item => item.checkbox.checked = target.checked)) : this.updateCheckboxUI(this.selectedField));
+        }));
     }
-    show() {
+    updateCheckboxUI(field) {
+        var _a, _b;
+        const checkedItem = null === (_a = this.valueFilterOptionList.get(field)) || void 0 === _a ? void 0 : _a.filter((item => item.checkbox.checked)), uncheckedItem = null === (_b = this.valueFilterOptionList.get(field)) || void 0 === _b ? void 0 : _b.filter((item => !item.checkbox.checked));
+        (0, vutils_1.isValid)(checkedItem) && (0, vutils_1.isValid)(uncheckedItem) && (0 !== checkedItem.length && 0 !== uncheckedItem.length ? this.selectAllCheckbox.indeterminate = !0 : (this.selectAllCheckbox.indeterminate = !1, 
+        this.selectAllCheckbox.checked = 0 === uncheckedItem.length));
+    }
+    updateCheckboxState(field) {
         var _a;
-        (null === (_a = this.filterStateManager.getFilterState(this.selectedField)) || void 0 === _a ? void 0 : _a.enable) ? this.collectCandidateKeysForFilteredColumn(this.selectedField) : this.collectCandidateKeysForUnfilteredColumn(this.selectedField), 
-        this.initFilterStateFromTableData(this.selectedField), this.filterByValueSearchInput && (this.filterByValueSearchInput.value = ""), 
-        this.renderFilterOptions(this.selectedField), this.filterByValuePanel.style.display = "block";
+        const originalValues = null === (_a = this.valueFilterOptionList.get(field)) || void 0 === _a ? void 0 : _a.filter((item => item.checkbox.checked)).map((item => item.originalValue)), displayToRawMap = this.displayToRawValueMap.get(field), rawValues = originalValues.map((displayValue => displayToRawMap ? displayToRawMap.get(displayValue) : displayValue));
+        this.filterStateManager.dispatch({
+            type: types_1.FilterActionType.ADD_FILTER,
+            payload: {
+                field: field,
+                type: "byValue",
+                values: rawValues
+            }
+        });
+    }
+    show() {
+        this.collectUniqueColumnValues(this.selectedField), this.updateCandidateCounts(this.selectedField), 
+        this.initFilterStateFromTableData(this.selectedField);
+        const uniqueValues = this.uniqueKeys.get(this.selectedField), displayToRawMap = this.displayToRawValueMap.get(this.selectedField);
+        uniqueValues && displayToRawMap && this.filterStateManager.initializeFilterMenuState(this.selectedField, uniqueValues, displayToRawMap), 
+        this.filterByValueSearchInput && (this.filterByValueSearchInput.value = ""), this.renderFilterOptions(this.selectedField), 
+        this.updateCheckboxUI(this.selectedField), this.filterByValuePanel.style.display = "block";
     }
     hide() {
         this.filterByValuePanel.style.display = "none";
@@ -183,20 +328,6 @@ class ValueFilter {
     clearSearchInputValue() {
         this.filterByValueSearchInput.value = "";
     }
-    destroy() {
-        if (this.filterByValuePanel && (this._onInputKeyUpHandler && this.filterByValuePanel.removeEventListener("keyup", this._onInputKeyUpHandler), 
-        this._onCheckboxChangeHandler && this.filterByValuePanel.removeEventListener("change", this._onCheckboxChangeHandler)), 
-        this._onInputKeyUpHandler = void 0, this._onCheckboxChangeHandler = void 0, this.filterByValuePanel) {
-            const parent = this.filterByValuePanel.parentElement;
-            parent ? parent.removeChild(this.filterByValuePanel) : this.filterByValuePanel.remove();
-        }
-        this.filterItemsContainer && (this.filterItemsContainer.innerHTML = ""), this.filterByValueSearchInput && (this.filterByValueSearchInput.value = ""), 
-        this.selectedKeys && this.selectedKeys.clear(), this.candidateKeys && this.candidateKeys.clear(), 
-        this.formatFnCache && this.formatFnCache.clear(), this.toUnformattedCache && this.toUnformattedCache.clear(), 
-        this.valueFilterOptionList && this.valueFilterOptionList.clear(), this.filterByValuePanel = void 0, 
-        this.filterByValueSearchInput = void 0, this.selectAllCheckbox = void 0, this.totalCountSpan = void 0, 
-        this.filterItemsContainer = void 0;
-    }
 }
 
 exports.ValueFilter = ValueFilter;