@canlooks/can-ui 0.0.61 → 0.0.63

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

@@ -14,7 +14,7 @@ const theme_1 = require("../theme");
 const __1 = require("../..");
 const faChevronDown_1 = require("@fortawesome/free-solid-svg-icons/faChevronDown");
 const faFilter_1 = require("@fortawesome/free-solid-svg-icons/faFilter");
-exports.CurdFilter = (0, react_2.memo)(({ ref, columns, expandable, showButton, renderConditions, buttonProps, onFilter, columnCount = 3, ...props }) => {
+exports.CurdFilter = (0, react_2.memo)(({ ref, columns, expandable, showButton, renderConditions, buttonProps, onFilter, ...props }) => {
     const { spacing } = (0, theme_1.useTheme)();
     const items = (0, react_2.useMemo)(() => {
         return (0, utils_1.columnsToFilterItem)(columns);
@@ -51,7 +51,7 @@ exports.CurdFilter = (0, react_2.memo)(({ ref, columns, expandable, showButton,
      * 已生效的筛选条件
      */
     const [filteredConditions, setFilteredConditions] = (0, react_2.useState)({});
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(form_1.Form, { ...props, ref: (0, utils_1.cloneRef)(ref, formRef), className: (0, utils_1.clsx)(curd_style_1.classes.filter, props.className), columnCount: columnCount, variant: "plain", onChange: changeHandler, children: !!items?.length &&
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(form_1.Form, { ...props, ref: (0, utils_1.cloneRef)(ref, formRef), className: (0, utils_1.clsx)(curd_style_1.classes.filter, props.className), variant: "plain", onChange: changeHandler, children: !!items?.length &&
                     (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [expandable
                                 ? (0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { className: curd_style_1.classes.filterGridContainer, in: expanded, collapsedSize: () => firstItemRef.current?.offsetHeight || 56, appear: false, children: renderedGrid })
                                 : renderedGrid, (expandable || showButton) &&

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
+const loading_style_1 = require("../loading/loading.style");
 exports.classes = (0, utils_1.defineInnerClasses)('data-grid', [
     'container',
     'title',
@@ -20,6 +21,11 @@ exports.classes = (0, utils_1.defineInnerClasses)('data-grid', [
 exports.style = (0, utils_1.defineCss)(({ spacing, mode, gray, text, colors, easing }) => (0, react_1.css) `
     max-height: 100%;
     min-height: 0;
+    
+    .${loading_style_1.classes.container} {
+        display: flex;
+        flex-direction: column;
+    }
 
     .${exports.classes.container} {
         flex: 1;

package/dist/cjs/components/dateTimeRangePicker/dateTimeRangePicker.js

@@ -20,7 +20,7 @@ variant, size, color, disabled, readOnly, autoFocus, ...props }) => {
     return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: dateTimeRangePicker_style_1.style, className: (0, utils_1.clsx)(dateTimeRangePicker_style_1.classes.root, props.className), children: [(0, jsx_runtime_1.jsx)(dateTimePicker_1.DateTimePicker, { ...commonProps, autoFocus: autoFocus, autoClose: false, placeholder: showTimer ? '开始时间' : '开始日期', max: innerValue.current?.[1] || void 0, open: innerOpen.current === 'start', ...startPickerProps, onOpenChange: open => {
                     startPickerProps?.onOpenChange?.(open);
                     setInnerOpen(open ? 'start' : 'closed');
-                }, onChange: startValue => {
+                }, value: innerValue.current?.[0], onChange: startValue => {
                     startPickerProps?.onChange?.(startValue);
                     setInnerValue(o => [startValue, o?.[1] || null]);
                     if (startValue && !showTimer) {
@@ -30,7 +30,7 @@ variant, size, color, disabled, readOnly, autoFocus, ...props }) => {
                 } }), separator ?? (0, jsx_runtime_1.jsx)("span", { children: "-" }), (0, jsx_runtime_1.jsx)(dateTimePicker_1.DateTimePicker, { ...commonProps, autoClose: autoClose, placeholder: showTimer ? '结束时间' : '结束日期', min: innerValue.current?.[0] || void 0, open: innerOpen.current === 'end', ...endPickerProps, inputProps: { ref: endPickerInputRef }, onOpenChange: open => {
                     startPickerProps?.onOpenChange?.(open);
                     setInnerOpen(open ? 'end' : 'closed');
-                }, onChange: endValue => {
+                }, value: innerValue.current?.[1], onChange: endValue => {
                     endPickerProps?.onChange?.(endValue);
                     setInnerValue(o => [o?.[0] || null, endValue]);
                 }, popperProps: {

package/dist/cjs/components/form/formItem.js

@@ -13,6 +13,22 @@ const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, req
     requiredMark ??= context.requiredMark ?? '*';
     variant ??= context.variant ?? 'grid';
     size ??= context.size;
+    const shouldValidate = (0, react_1.useRef)(false);
+    const [innerError, setInnerError] = (0, utils_1.useDerivedState)(error);
+    /**
+     * --------------------------------------------------------------------
+     * 重置与初始化
+     */
+    const isTouched = (0, react_1.useRef)(false);
+    // formRef的resetForm()方法会传入新的initialValue，否则使用`formValue`
+    const reset = (value = formValue) => {
+        shouldValidate.current = isTouched.current = false;
+        if (typeof field !== 'undefined' && value && typeof initialValue !== 'undefined') {
+            (0, utils_1.queryDeep)(value, field, () => initialValue);
+        }
+        innerError.current && setInnerError(false);
+    };
+    (0, react_1.useMemo)(reset, []);
     /**
      * --------------------------------------------------------------------
      * 字段值
@@ -31,7 +47,6 @@ const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, req
      * 校验
      */
     const rulesArr = (0, utils_1.toArray)(rules);
-    const [innerError, setInnerError] = (0, utils_1.useDerivedState)(error);
     const [innerHelperText, setInnerHelperText] = (0, utils_1.useDerivedState)(helperText);
     const validate = async () => {
         if (error) {
@@ -73,7 +88,6 @@ const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, req
      * --------------------------------------------------------------------
      * 依赖更新自动校验
      */
-    const shouldValidate = (0, react_1.useRef)(false);
     const dependencyValues = (0, react_1.useMemo)(() => {
         return formValue && dependencies?.map(d => (0, utils_1.queryDeep)(formValue, d));
     }, [formValue, ...dependencies || []]);
@@ -82,20 +96,6 @@ const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, req
         shouldValidate.current && validate().then();
         shouldValidate.current = true;
     }, [fieldValue, ...dependencyValues || []]);
-    /**
-     * --------------------------------------------------------------------
-     * 重置与初始化
-     */
-    const isTouched = (0, react_1.useRef)(false);
-    // formRef的resetForm()方法会传入新的initialValue，否则使用`formValue`
-    const reset = (value = formValue) => {
-        shouldValidate.current = isTouched.current = false;
-        if (typeof field !== 'undefined' && value && typeof initialValue !== 'undefined') {
-            (0, utils_1.queryDeep)(value, field, () => initialValue);
-        }
-        innerError.current && setInnerError(false);
-    };
-    (0, react_1.useMemo)(reset, []);
     /**
      * --------------------------------------------------------------------
      * 挂载formItemRef

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

@@ -11,7 +11,7 @@ import { useTheme } from '../theme';
 import { Icon } from '../..';
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
 import { faFilter } from '@fortawesome/free-solid-svg-icons/faFilter';
-export const CurdFilter = memo(({ ref, columns, expandable, showButton, renderConditions, buttonProps, onFilter, columnCount = 3, ...props }) => {
+export const CurdFilter = memo(({ ref, columns, expandable, showButton, renderConditions, buttonProps, onFilter, ...props }) => {
     const { spacing } = useTheme();
     const items = useMemo(() => {
         return columnsToFilterItem(columns);
@@ -48,7 +48,7 @@ export const CurdFilter = memo(({ ref, columns, expandable, showButton, renderCo
      * 已生效的筛选条件
      */
     const [filteredConditions, setFilteredConditions] = useState({});
-    return (_jsxs(_Fragment, { children: [_jsx(Form, { ...props, ref: cloneRef(ref, formRef), className: clsx(classes.filter, props.className), columnCount: columnCount, variant: "plain", onChange: changeHandler, children: !!items?.length &&
+    return (_jsxs(_Fragment, { children: [_jsx(Form, { ...props, ref: cloneRef(ref, formRef), className: clsx(classes.filter, props.className), variant: "plain", onChange: changeHandler, children: !!items?.length &&
                     _jsxs(_Fragment, { children: [expandable
                                 ? _jsx(Collapse, { className: classes.filterGridContainer, in: expanded, collapsedSize: () => firstItemRef.current?.offsetHeight || 56, appear: false, children: renderedGrid })
                                 : renderedGrid, (expandable || showButton) &&

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

@@ -1,5 +1,6 @@
 import { css } from '@emotion/react';
 import { defineInnerClasses, defineCss } from '../../utils';
+import { classes as loadingClasses } from '../loading/loading.style';
 export const classes = defineInnerClasses('data-grid', [
     'container',
     'title',
@@ -17,6 +18,11 @@ export const classes = defineInnerClasses('data-grid', [
 export const style = defineCss(({ spacing, mode, gray, text, colors, easing }) => css `
     max-height: 100%;
     min-height: 0;
+    
+    .${loadingClasses.container} {
+        display: flex;
+        flex-direction: column;
+    }
 
     .${classes.container} {
         flex: 1;

package/dist/esm/components/dateTimeRangePicker/dateTimeRangePicker.js

@@ -17,7 +17,7 @@ variant, size, color, disabled, readOnly, autoFocus, ...props }) => {
     return (_jsxs("div", { ...props, css: style, className: clsx(classes.root, props.className), children: [_jsx(DateTimePicker, { ...commonProps, autoFocus: autoFocus, autoClose: false, placeholder: showTimer ? '开始时间' : '开始日期', max: innerValue.current?.[1] || void 0, open: innerOpen.current === 'start', ...startPickerProps, onOpenChange: open => {
                     startPickerProps?.onOpenChange?.(open);
                     setInnerOpen(open ? 'start' : 'closed');
-                }, onChange: startValue => {
+                }, value: innerValue.current?.[0], onChange: startValue => {
                     startPickerProps?.onChange?.(startValue);
                     setInnerValue(o => [startValue, o?.[1] || null]);
                     if (startValue && !showTimer) {
@@ -27,7 +27,7 @@ variant, size, color, disabled, readOnly, autoFocus, ...props }) => {
                 } }), separator ?? _jsx("span", { children: "-" }), _jsx(DateTimePicker, { ...commonProps, autoClose: autoClose, placeholder: showTimer ? '结束时间' : '结束日期', min: innerValue.current?.[0] || void 0, open: innerOpen.current === 'end', ...endPickerProps, inputProps: { ref: endPickerInputRef }, onOpenChange: open => {
                     startPickerProps?.onOpenChange?.(open);
                     setInnerOpen(open ? 'end' : 'closed');
-                }, onChange: endValue => {
+                }, value: innerValue.current?.[1], onChange: endValue => {
                     endPickerProps?.onChange?.(endValue);
                     setInnerValue(o => [o?.[0] || null, endValue]);
                 }, popperProps: {

package/dist/esm/components/form/formItem.js

@@ -10,6 +10,22 @@ export const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rul
     requiredMark ??= context.requiredMark ?? '*';
     variant ??= context.variant ?? 'grid';
     size ??= context.size;
+    const shouldValidate = useRef(false);
+    const [innerError, setInnerError] = useDerivedState(error);
+    /**
+     * --------------------------------------------------------------------
+     * 重置与初始化
+     */
+    const isTouched = useRef(false);
+    // formRef的resetForm()方法会传入新的initialValue，否则使用`formValue`
+    const reset = (value = formValue) => {
+        shouldValidate.current = isTouched.current = false;
+        if (typeof field !== 'undefined' && value && typeof initialValue !== 'undefined') {
+            queryDeep(value, field, () => initialValue);
+        }
+        innerError.current && setInnerError(false);
+    };
+    useMemo(reset, []);
     /**
      * --------------------------------------------------------------------
      * 字段值
@@ -28,7 +44,6 @@ export const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rul
      * 校验
      */
     const rulesArr = toArray(rules);
-    const [innerError, setInnerError] = useDerivedState(error);
     const [innerHelperText, setInnerHelperText] = useDerivedState(helperText);
     const validate = async () => {
         if (error) {
@@ -70,7 +85,6 @@ export const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rul
      * --------------------------------------------------------------------
      * 依赖更新自动校验
      */
-    const shouldValidate = useRef(false);
     const dependencyValues = useMemo(() => {
         return formValue && dependencies?.map(d => queryDeep(formValue, d));
     }, [formValue, ...dependencies || []]);
@@ -79,20 +93,6 @@ export const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rul
         shouldValidate.current && validate().then();
         shouldValidate.current = true;
     }, [fieldValue, ...dependencyValues || []]);
-    /**
-     * --------------------------------------------------------------------
-     * 重置与初始化
-     */
-    const isTouched = useRef(false);
-    // formRef的resetForm()方法会传入新的initialValue，否则使用`formValue`
-    const reset = (value = formValue) => {
-        shouldValidate.current = isTouched.current = false;
-        if (typeof field !== 'undefined' && value && typeof initialValue !== 'undefined') {
-            queryDeep(value, field, () => initialValue);
-        }
-        innerError.current && setInnerError(false);
-    };
-    useMemo(reset, []);
     /**
      * --------------------------------------------------------------------
      * 挂载formItemRef

package/package.json

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