@canlooks/can-ui 0.0.122 → 0.0.124

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

@@ -99,7 +99,7 @@ const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, req
     const dependencyValues = (0, react_1.useMemo)(() => {
         return formValue && dependencies?.map(d => (0, utils_1.queryDeep)(formValue, d));
     }, [formValue, ...dependencies || []]);
-    (0, react_1.useMemo)(() => {
+    (0, utils_1.useStrictMemo)(() => {
         if (!shouldValidate.current) {
             // 跳过首次渲染
             shouldValidate.current = true;

package/dist/cjs/components/icon/icon.js

@@ -6,5 +6,5 @@ const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
 const utils_1 = require("../../utils");
 const classes = (0, utils_1.defineInnerClasses)('icon');
 function Icon({ color, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { ...props, className: (0, utils_1.clsx)(classes.root, props.className), color: (0, utils_1.useColor)(color) }));
+    return ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { ...props, className: (0, utils_1.clsx)(classes.root, props.className), color: (0, utils_1.useColor)(color), fontSize: 14 }));
 }

package/dist/cjs/utils/hooks.d.ts

@@ -64,3 +64,7 @@ export declare function useStrictEffect(effect: EffectCallback, deps?: Dependenc
  * 用法同{@link useEffect}，但会排除首次渲染
  */
 export declare function useUpdateEffect(effect: EffectCallback, deps?: DependencyList): void;
+/**
+ * 用法同{@link useMemo}，但StrictMode下不会执行两次
+ */
+export declare function useStrictMemo<T>(factory: () => T, deps?: DependencyList): T | undefined;

package/dist/cjs/utils/hooks.js

@@ -12,6 +12,7 @@ exports.useContainer = useContainer;
 exports.useExternalClass = useExternalClass;
 exports.useStrictEffect = useStrictEffect;
 exports.useUpdateEffect = useUpdateEffect;
+exports.useStrictMemo = useStrictMemo;
 const react_1 = require("react");
 const utils_1 = require("./utils");
 /**
@@ -46,7 +47,7 @@ function useForceUpdate() {
 function useDerivedState(referredState, deps) {
     const derivedState = (0, react_1.useRef)(void 0);
     (0, react_1.useMemo)(() => {
-        // SSR模式下，derivedState会重置2次
+        // StrictMode下，derivedState会重置2次
         derivedState.current = void 0;
     }, []);
     const updateState = (state) => {
@@ -187,3 +188,16 @@ function useUpdateEffect(effect, deps) {
         return effect();
     }, deps);
 }
+/**
+ * 用法同{@link useMemo}，但StrictMode下不会执行两次
+ */
+function useStrictMemo(factory, deps) {
+    const prevDeps = (0, react_1.useRef)(void 0);
+    const memoizedValue = (0, react_1.useRef)(void 0);
+    const isDepsChanged = prevDeps.current ? !(0, utils_1.arrayShallowEqual)(prevDeps.current, deps) : true;
+    if (isDepsChanged) {
+        prevDeps.current = deps;
+        return memoizedValue.current = factory();
+    }
+    return memoizedValue.current;
+}

package/dist/cjs/utils/style.js

@@ -200,14 +200,17 @@ function useResponsiveValue(prop, disabled = false) {
     const syncBreakpoints = (0, hooks_1.useSync)(breakpoints);
     const fn = () => {
         let maxBreakpoint = 'xs';
-        for (const k in syncBreakpoints.current) {
-            if (window.innerWidth < syncBreakpoints.current[k]) {
-                break;
-            }
-            if (k in responsiveObj) {
-                maxBreakpoint = k;
+        if (typeof window !== 'undefined') {
+            for (const k in syncBreakpoints.current) {
+                if (window.innerWidth < syncBreakpoints.current[k]) {
+                    break;
+                }
+                if (k in responsiveObj) {
+                    maxBreakpoint = k;
+                }
             }
         }
+        console.log(234, responsiveObj, maxBreakpoint, responsiveObj[maxBreakpoint]);
         return responsiveObj[maxBreakpoint];
     };
     const [value, setValue] = (0, hooks_1.useDerivedState)(fn, [breakpoints]);

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { cloneElement, isValidElement, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import { useFormContext, useFormStyleContext, useFormValueContext } from './form';
-import { clsx, getValueOnChange, queryDeep, stringifyField, useDerivedState, toArray, getShortID, isUnset } from '../../utils';
+import { clsx, getValueOnChange, queryDeep, stringifyField, useDerivedState, toArray, getShortID, isUnset, useStrictMemo } from '../../utils';
 import { DescriptionItem } from '../descriptions';
 import { classes } from './form.style';
 import { Collapse } from '../transitionBase';
@@ -96,7 +96,7 @@ export const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rul
     const dependencyValues = useMemo(() => {
         return formValue && dependencies?.map(d => queryDeep(formValue, d));
     }, [formValue, ...dependencies || []]);
-    useMemo(() => {
+    useStrictMemo(() => {
         if (!shouldValidate.current) {
             // 跳过首次渲染
             shouldValidate.current = true;

package/dist/esm/components/icon/icon.js

@@ -3,5 +3,5 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { clsx, defineInnerClasses, useColor } from '../../utils';
 const classes = defineInnerClasses('icon');
 export function Icon({ color, ...props }) {
-    return (_jsx(FontAwesomeIcon, { ...props, className: clsx(classes.root, props.className), color: useColor(color) }));
+    return (_jsx(FontAwesomeIcon, { ...props, className: clsx(classes.root, props.className), color: useColor(color), fontSize: 14 }));
 }

package/dist/esm/utils/hooks.d.ts

@@ -64,3 +64,7 @@ export declare function useStrictEffect(effect: EffectCallback, deps?: Dependenc
  * 用法同{@link useEffect}，但会排除首次渲染
  */
 export declare function useUpdateEffect(effect: EffectCallback, deps?: DependencyList): void;
+/**
+ * 用法同{@link useMemo}，但StrictMode下不会执行两次
+ */
+export declare function useStrictMemo<T>(factory: () => T, deps?: DependencyList): T | undefined;

package/dist/esm/utils/hooks.js

@@ -32,7 +32,7 @@ export function useForceUpdate() {
 export function useDerivedState(referredState, deps) {
     const derivedState = useRef(void 0);
     useMemo(() => {
-        // SSR模式下，derivedState会重置2次
+        // StrictMode下，derivedState会重置2次
         derivedState.current = void 0;
     }, []);
     const updateState = (state) => {
@@ -173,3 +173,16 @@ export function useUpdateEffect(effect, deps) {
         return effect();
     }, deps);
 }
+/**
+ * 用法同{@link useMemo}，但StrictMode下不会执行两次
+ */
+export function useStrictMemo(factory, deps) {
+    const prevDeps = useRef(void 0);
+    const memoizedValue = useRef(void 0);
+    const isDepsChanged = prevDeps.current ? !arrayShallowEqual(prevDeps.current, deps) : true;
+    if (isDepsChanged) {
+        prevDeps.current = deps;
+        return memoizedValue.current = factory();
+    }
+    return memoizedValue.current;
+}

package/dist/esm/utils/style.js

@@ -184,14 +184,17 @@ export function useResponsiveValue(prop, disabled = false) {
     const syncBreakpoints = useSync(breakpoints);
     const fn = () => {
         let maxBreakpoint = 'xs';
-        for (const k in syncBreakpoints.current) {
-            if (window.innerWidth < syncBreakpoints.current[k]) {
-                break;
-            }
-            if (k in responsiveObj) {
-                maxBreakpoint = k;
+        if (typeof window !== 'undefined') {
+            for (const k in syncBreakpoints.current) {
+                if (window.innerWidth < syncBreakpoints.current[k]) {
+                    break;
+                }
+                if (k in responsiveObj) {
+                    maxBreakpoint = k;
+                }
             }
         }
+        console.log(234, responsiveObj, maxBreakpoint, responsiveObj[maxBreakpoint]);
         return responsiveObj[maxBreakpoint];
     };
     const [value, setValue] = useDerivedState(fn, [breakpoints]);

package/package.json

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