@uxf/data-grid 11.0.0-beta.13 → 11.0.0-beta.14

package/_story-utils/grid-type.d.ts

@@ -19,5 +19,6 @@ export type GridType = {
         link: "string";
         sele: "select";
         seleBool: "select";
+        multiSelect: "multiSelect";
     };
 };

package/_story-utils/schema.js

@@ -31,6 +31,17 @@ exports.schema = {
                 { id: 2, label: "B" },
             ],
         },
+        {
+            name: "multiSelect",
+            label: "Multi select",
+            type: "multiSelect",
+            options: [
+                { label: "Option 1", id: "option-1" },
+                { label: "Option 2", id: "option-2" },
+                { label: "Option 3", id: "option-3" },
+                { label: "Option 4", id: "option-4" },
+            ],
+        },
         {
             name: "seleBool",
             type: "select",

package/filter-handler/index.js

@@ -22,6 +22,7 @@ const bool_filter_1 = __importDefault(require("./bool-filter"));
 const boolean_filter_1 = __importDefault(require("./boolean-filter"));
 const date_1 = __importDefault(require("./date"));
 const interval_filter_1 = __importDefault(require("./interval-filter"));
+const multi_select_1 = __importDefault(require("./multi-select"));
 const select_filter_1 = __importDefault(require("./select-filter"));
 const text_filter_1 = __importDefault(require("./text-filter"));
 __exportStar(require("./types"), exports);
@@ -33,5 +34,6 @@ exports.defaultFilterHandlers = {
     boolean: boolean_filter_1.default,
     checkbox: boolean_filter_1.default,
     interval: interval_filter_1.default,
+    multiSelect: multi_select_1.default,
     select: select_filter_1.default,
 };

package/filter-handler/multi-select.d.ts

@@ -0,0 +1,3 @@
+import { FilterHandler } from "./types";
+declare const multiSelect: FilterHandler;
+export default multiSelect;

package/filter-handler/multi-select.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const is_nil_1 = require("@uxf/core/utils/is-nil");
+const chip_1 = require("@uxf/ui/chip");
+const multi_select_1 = require("@uxf/ui/multi-select");
+const react_1 = __importDefault(require("react"));
+const multiSelect = {
+    input: (props) => {
+        var _a, _b;
+        return (react_1.default.createElement(multi_select_1.MultiSelect, { options: (_a = props.filter.options) !== null && _a !== void 0 ? _a : [], label: props.filter.label, value: (_b = props.value.value) === null || _b === void 0 ? void 0 : _b.map((id) => { var _a; return (_a = props.filter.options) === null || _a === void 0 ? void 0 : _a.find((option) => option.id === id); }), onChange: (value) => {
+                props.onFilter({
+                    ...props.value,
+                    value: (0, is_nil_1.isNil)(value) || value.length === 0 ? null : value.map((item) => item.id),
+                });
+            } }));
+    },
+    listItem: (props) => {
+        return (react_1.default.createElement(chip_1.Chip, { onClose: props.onClear },
+            props.filter.label,
+            ":\u00A0",
+            props.value.value
+                .map((id) => { var _a, _b; return (_b = (_a = props.filter.options) === null || _a === void 0 ? void 0 : _a.find((option) => option.id === id)) === null || _b === void 0 ? void 0 : _b.label; })
+                .join(", ")));
+    },
+};
+exports.default = multiSelect;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/data-grid",
-  "version": "11.0.0-beta.13",
+  "version": "11.0.0-beta.14",
   "description": "UXF DataGrid",
   "homepage": "https://gitlab.com/uxf-npm/data-grid#readme",
   "main": "index.js",