@canlooks/can-ui 0.0.140 → 0.0.142

package/dist/cjs/components/curd/curd.js

@@ -58,9 +58,14 @@ exports.Curd = (0, react_1.memo)((props) => {
      * -------------------------------------------------------------
      * 筛选部分
      */
+    const inlineFilterRef = (0, react_1.useRef)(null);
     const innerFilterRef = (0, react_1.useRef)(null);
-    const filterHandler = (value) => {
-        onFilter?.(value);
+    const getFilterValue = () => ({
+        ...inlineFilterRef.current.getFormValue(),
+        ...innerFilterRef.current.getFormValue()
+    });
+    const filterHandler = () => {
+        onFilter?.(getFilterValue());
         innerLoadRows().then();
     };
     const renderFilterableFn = () => {
@@ -139,7 +144,7 @@ exports.Curd = (0, react_1.memo)((props) => {
                     page: innerPage.current,
                     pageSize: innerPageSize.current
                 }
-                : void 0, innerFilterRef.current.getFormValue(), innerOrderColumn.current
+                : void 0, getFilterValue(), innerOrderColumn.current
                 ? {
                     field: innerOrderColumn.current,
                     type: innerOrderType.current
@@ -207,7 +212,7 @@ exports.Curd = (0, react_1.memo)((props) => {
                 }, filterProps, {
                     ref: innerFilterRef,
                     ...filterableProps?.showButton === false
-                        ? { onChange: (field, value, formValue) => filterHandler(formValue) }
+                        ? { onChange: filterHandler }
                         : { onFinish: filterHandler }
                 }), children: renderFilterableFn() }), (creatable || toolbarLeft || toolbarRight || reloadable || resizable || columnConfigurable) &&
                 (0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.toolbar, children: [(0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.toolbarLeft, children: [creatable &&
@@ -218,7 +223,7 @@ exports.Curd = (0, react_1.memo)((props) => {
                                     (0, jsx_runtime_1.jsx)(curdColumnConfig_1.CurdColumnConfig, { columns: orderedColumns, innerVisible: innerVisible.current, setInnerVisible: setInnerVisible, setInnerOrder: setInnerOrder })] })] }), (0, jsx_runtime_1.jsx)("div", { className: curd_style_1.classes.card, children: (0, jsx_runtime_1.jsx)(dataGrid_1.DataGrid, { ...dataGridProps, columns: actualColumns, tableProps: {
                         ...props.tableProps,
                         ...resizable && { size: innerSize.current }
-                    }, loading: innerLoading.current, rows: innerRows.current, paginatable: !loadRows && props.paginatable, renderPagination: loadRows && props.paginatable !== false
+                    }, loading: innerLoading.current, rows: innerRows.current, filterProps: { ref: inlineFilterRef }, onFilter: filterHandler, paginatable: !loadRows && props.paginatable, renderPagination: loadRows && props.paginatable !== false
                         ? () => (0, jsx_runtime_1.jsx)(pagination_1.Pagination, { ...props.paginationProps, total: innerTotal.current, page: innerPage.current, onPageChange: setInnerPage, pageSize: innerPageSize.current, onPageSizeChange: setInnerPageSize })
                         : props.renderPagination, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler }) }), (creatable || updatable) &&
                 (0, jsx_runtime_1.jsx)(curdDialog_1.CurdDialog, { ...dialogProps, ref: curdDialogRef, onFinish: finishHandler, curdProps: props })] }));

package/dist/cjs/components/dataGrid/filterBubbleContent.d.ts

@@ -8,6 +8,8 @@ type FilterSharedProps = {
 export interface FilterOptionsProps extends FilterSharedProps, OptionsBaseProps<MenuOptionType> {
     /** 默认为`true` */
     multiple?: boolean;
+    /** 默认为`false` */
+    searchable?: boolean;
 }
 export interface FilterControlProps extends FilterSharedProps {
     control: FormItemChildren;

package/dist/cjs/components/dataGrid/filterBubbleContent.js

@@ -9,34 +9,43 @@ const button_1 = require("../button");
 const popper_1 = require("../popper");
 const react_1 = require("react");
 const form_1 = require("../form");
+const filterBubbleContent_style_1 = require("./filterBubbleContent.style");
+const input_1 = require("../input");
+const icon_1 = require("../icon");
+const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
+const utils_1 = require("../../utils");
 exports.FilterBubbleContent = (0, react_1.memo)(({ columnKey, columnFilterProps }) => {
     const { formRef } = (0, form_1.useFormContext)();
-    /**
-     * ------------------------------------------------------------------------------------
-     * 弹框关闭时触发筛选
-     */
     const { open, setOpen } = (0, popper_1.usePopperContext)();
     (0, react_1.useEffect)(() => {
-        !open && formRef.current.submit().then();
+        if (!open && 'multiple' in columnFilterProps && columnFilterProps.multiple) {
+            // 多选模式下，关闭弹框触发筛选
+            formRef.current.submit().then();
+        }
     }, [open]);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(form_1.FormItem, { field: columnKey, children: 'control' in columnFilterProps
                     ? columnFilterProps.control
-                    : (0, jsx_runtime_1.jsx)(FilterOptions, { ...columnFilterProps }) }), columnFilterProps.showButton !== false
-                ? (0, jsx_runtime_1.jsx)(flex_1.Flex, { gap: 6, justifyContent: "center", marginTop: 6, children: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "text", onClick: () => {
+                    : (0, jsx_runtime_1.jsx)(FilterOptions, { ...columnFilterProps }) }), columnFilterProps.showButton !== false &&
+                (0, jsx_runtime_1.jsx)(flex_1.Flex, { gap: 6, justifyContent: "center", marginTop: 6, children: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "text", onClick: () => {
                             formRef.current.setFieldValue(columnKey, null);
                             setOpen(false);
-                        }, children: "\u91CD\u7F6E" }) })
-                : (0, jsx_runtime_1.jsx)(TriggerFilterOnChange, {})] }));
+                        }, children: "\u91CD\u7F6E" }) }), 'multiple' in columnFilterProps && !columnFilterProps.multiple &&
+                // 单选模式，变化即触发筛选
+                (0, jsx_runtime_1.jsx)(TriggerFilterOnChange, { onSubmit: () => setOpen(false) })] }));
 });
-const FilterOptions = (0, react_1.memo)(({ multiple = true, showButton = true, value, onChange, ...props }) => {
+const FilterOptions = (0, react_1.memo)(({ multiple = true, showButton = true, searchable = false, value, onChange, ...props }) => {
     const [selectedValue, toggleSelect] = (0, selectionContext_1.useFlatSelection)({ multiple, value, onChange });
-    return ((0, jsx_runtime_1.jsx)(optionsBase_1.OptionsBase, { showCheckbox: multiple, ...props, selectedValue: selectedValue, onToggleSelected: toggleSelect }));
+    const [searchValue, setSearchValue] = (0, react_1.useState)('');
+    const deferredSearchValue = (0, react_1.useDeferredValue)(searchValue);
+    return ((0, jsx_runtime_1.jsxs)("div", { css: filterBubbleContent_style_1.style, children: [searchable &&
+                (0, jsx_runtime_1.jsx)(input_1.Input, { prefix: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: free_solid_svg_icons_1.faSearch }), placeholder: "\u641C\u7D22", value: searchValue, onChange: e => setSearchValue(e.target.value) }), (0, jsx_runtime_1.jsx)(optionsBase_1.OptionsBase, { showCheckbox: multiple, ...props, searchValue: deferredSearchValue, selectedValue: selectedValue, onToggleSelected: toggleSelect })] }));
 });
-const TriggerFilterOnChange = (0, react_1.memo)(() => {
+function TriggerFilterOnChange(props) {
     const { formRef } = (0, form_1.useFormContext)();
     const { formValue } = (0, form_1.useFormValueContext)();
-    (0, react_1.useEffect)(() => {
+    (0, utils_1.useUpdateEffect)(() => {
         formRef.current.submit().then();
+        props.onSubmit?.();
     }, [formValue]);
     return null;
-});
+}

package/dist/cjs/components/dataGrid/filterBubbleContent.style.d.ts

@@ -0,0 +1 @@
+export declare const style: import("@emotion/react").SerializedStyles;

package/dist/cjs/components/dataGrid/filterBubbleContent.style.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.style = void 0;
+const react_1 = require("@emotion/react");
+exports.style = (0, react_1.css) `
+    display: flex;
+    flex-direction: column;
+    gap: 4px
+`;

package/dist/esm/components/curd/curd.js

@@ -55,9 +55,14 @@ export const Curd = memo((props) => {
      * -------------------------------------------------------------
      * 筛选部分
      */
+    const inlineFilterRef = useRef(null);
     const innerFilterRef = useRef(null);
-    const filterHandler = (value) => {
-        onFilter?.(value);
+    const getFilterValue = () => ({
+        ...inlineFilterRef.current.getFormValue(),
+        ...innerFilterRef.current.getFormValue()
+    });
+    const filterHandler = () => {
+        onFilter?.(getFilterValue());
         innerLoadRows().then();
     };
     const renderFilterableFn = () => {
@@ -136,7 +141,7 @@ export const Curd = memo((props) => {
                     page: innerPage.current,
                     pageSize: innerPageSize.current
                 }
-                : void 0, innerFilterRef.current.getFormValue(), innerOrderColumn.current
+                : void 0, getFilterValue(), innerOrderColumn.current
                 ? {
                     field: innerOrderColumn.current,
                     type: innerOrderType.current
@@ -204,7 +209,7 @@ export const Curd = memo((props) => {
                 }, filterProps, {
                     ref: innerFilterRef,
                     ...filterableProps?.showButton === false
-                        ? { onChange: (field, value, formValue) => filterHandler(formValue) }
+                        ? { onChange: filterHandler }
                         : { onFinish: filterHandler }
                 }), children: renderFilterableFn() }), (creatable || toolbarLeft || toolbarRight || reloadable || resizable || columnConfigurable) &&
                 _jsxs("div", { className: classes.toolbar, children: [_jsxs("div", { className: classes.toolbarLeft, children: [creatable &&
@@ -215,7 +220,7 @@ export const Curd = memo((props) => {
                                     _jsx(CurdColumnConfig, { columns: orderedColumns, innerVisible: innerVisible.current, setInnerVisible: setInnerVisible, setInnerOrder: setInnerOrder })] })] }), _jsx("div", { className: classes.card, children: _jsx(DataGrid, { ...dataGridProps, columns: actualColumns, tableProps: {
                         ...props.tableProps,
                         ...resizable && { size: innerSize.current }
-                    }, loading: innerLoading.current, rows: innerRows.current, paginatable: !loadRows && props.paginatable, renderPagination: loadRows && props.paginatable !== false
+                    }, loading: innerLoading.current, rows: innerRows.current, filterProps: { ref: inlineFilterRef }, onFilter: filterHandler, paginatable: !loadRows && props.paginatable, renderPagination: loadRows && props.paginatable !== false
                         ? () => _jsx(Pagination, { ...props.paginationProps, total: innerTotal.current, page: innerPage.current, onPageChange: setInnerPage, pageSize: innerPageSize.current, onPageSizeChange: setInnerPageSize })
                         : props.renderPagination, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler }) }), (creatable || updatable) &&
                 _jsx(CurdDialog, { ...dialogProps, ref: curdDialogRef, onFinish: finishHandler, curdProps: props })] }));

package/dist/esm/components/dataGrid/filterBubbleContent.d.ts

@@ -8,6 +8,8 @@ type FilterSharedProps = {
 export interface FilterOptionsProps extends FilterSharedProps, OptionsBaseProps<MenuOptionType> {
     /** 默认为`true` */
     multiple?: boolean;
+    /** 默认为`false` */
+    searchable?: boolean;
 }
 export interface FilterControlProps extends FilterSharedProps {
     control: FormItemChildren;

package/dist/esm/components/dataGrid/filterBubbleContent.js

@@ -4,36 +4,45 @@ import { useFlatSelection } from '../selectionContext';
 import { Flex } from '../flex';
 import { Button } from '../button';
 import { usePopperContext } from '../popper';
-import { memo, useEffect } from 'react';
+import { memo, useDeferredValue, useEffect, useState } from 'react';
 import { FormItem, useFormContext, useFormValueContext } from '../form';
+import { style } from './filterBubbleContent.style';
+import { Input } from '../input';
+import { Icon } from '../icon';
+import { faSearch } from '@fortawesome/free-solid-svg-icons';
+import { useUpdateEffect } from '../../utils';
 export const FilterBubbleContent = memo(({ columnKey, columnFilterProps }) => {
     const { formRef } = useFormContext();
-    /**
-     * ------------------------------------------------------------------------------------
-     * 弹框关闭时触发筛选
-     */
     const { open, setOpen } = usePopperContext();
     useEffect(() => {
-        !open && formRef.current.submit().then();
+        if (!open && 'multiple' in columnFilterProps && columnFilterProps.multiple) {
+            // 多选模式下，关闭弹框触发筛选
+            formRef.current.submit().then();
+        }
     }, [open]);
     return (_jsxs(_Fragment, { children: [_jsx(FormItem, { field: columnKey, children: 'control' in columnFilterProps
                     ? columnFilterProps.control
-                    : _jsx(FilterOptions, { ...columnFilterProps }) }), columnFilterProps.showButton !== false
-                ? _jsx(Flex, { gap: 6, justifyContent: "center", marginTop: 6, children: _jsx(Button, { variant: "text", onClick: () => {
+                    : _jsx(FilterOptions, { ...columnFilterProps }) }), columnFilterProps.showButton !== false &&
+                _jsx(Flex, { gap: 6, justifyContent: "center", marginTop: 6, children: _jsx(Button, { variant: "text", onClick: () => {
                             formRef.current.setFieldValue(columnKey, null);
                             setOpen(false);
-                        }, children: "\u91CD\u7F6E" }) })
-                : _jsx(TriggerFilterOnChange, {})] }));
+                        }, children: "\u91CD\u7F6E" }) }), 'multiple' in columnFilterProps && !columnFilterProps.multiple &&
+                // 单选模式，变化即触发筛选
+                _jsx(TriggerFilterOnChange, { onSubmit: () => setOpen(false) })] }));
 });
-const FilterOptions = memo(({ multiple = true, showButton = true, value, onChange, ...props }) => {
+const FilterOptions = memo(({ multiple = true, showButton = true, searchable = false, value, onChange, ...props }) => {
     const [selectedValue, toggleSelect] = useFlatSelection({ multiple, value, onChange });
-    return (_jsx(OptionsBase, { showCheckbox: multiple, ...props, selectedValue: selectedValue, onToggleSelected: toggleSelect }));
+    const [searchValue, setSearchValue] = useState('');
+    const deferredSearchValue = useDeferredValue(searchValue);
+    return (_jsxs("div", { css: style, children: [searchable &&
+                _jsx(Input, { prefix: _jsx(Icon, { icon: faSearch }), placeholder: "\u641C\u7D22", value: searchValue, onChange: e => setSearchValue(e.target.value) }), _jsx(OptionsBase, { showCheckbox: multiple, ...props, searchValue: deferredSearchValue, selectedValue: selectedValue, onToggleSelected: toggleSelect })] }));
 });
-const TriggerFilterOnChange = memo(() => {
+function TriggerFilterOnChange(props) {
     const { formRef } = useFormContext();
     const { formValue } = useFormValueContext();
-    useEffect(() => {
+    useUpdateEffect(() => {
         formRef.current.submit().then();
+        props.onSubmit?.();
     }, [formValue]);
     return null;
-});
+}

package/dist/esm/components/dataGrid/filterBubbleContent.style.d.ts

@@ -0,0 +1 @@
+export declare const style: import("@emotion/react").SerializedStyles;

package/dist/esm/components/dataGrid/filterBubbleContent.style.js

@@ -0,0 +1,6 @@
+import { css } from '@emotion/react';
+export const style = css `
+    display: flex;
+    flex-direction: column;
+    gap: 4px
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canlooks/can-ui",
-  "version": "0.0.140",
+  "version": "0.0.142",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",