fix(engine): 🐛 fixed CSSUIPanel value not corrent

affects: engine
hlerenow · Aug 29, 2024 · 1a4dc64 · 1a4dc64
1 parent 4d3934f
commit 1a4dc64
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 11 deletions.
diff --git a/packages/engine/src/component/CSSUIPanel/MarginAndPaddingInput/index.tsx b/packages/engine/src/component/CSSUIPanel/MarginAndPaddingInput/index.tsx
@@ -5,8 +5,9 @@ import styles from '../style.module.scss';
 import { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react';
 import { InputCommonRef } from '../type';
 import clsx from 'clsx';
+import { pick } from 'lodash-es';
 
-type Value = Record<'left' | 'right' | 'top' | 'bottom' | 'all', string>;
+type Value = Record<string, string>;
 
 export type MarginAndPaddingInputProps = {
   value?: Value;
@@ -29,14 +30,16 @@ const getEmptyVal = () => ({
   right: '',
   top: '',
   bottom: '',
-  all: '',
 });
 
 export const MarginAndPaddingInput = forwardRef<InputCommonRef, MarginAndPaddingInputProps>((props, ref) => {
   const [innerVal, setInnerVal] = useState<Value>(props.initialValue ?? getEmptyVal());
+  const keyList = useMemo(() => {
+    return ['left', 'top', 'right', 'bottom'].map((el) => `${props.prefix}-${el}`);
+  }, [props.prefix]);
 
   const updateInnerVal = useCallback(
-    (newVal: Partial<Value>, noTrigger?: boolean) => {
+    (newVal: Partial<any>, noTrigger?: boolean) => {
       setInnerVal((oldVal) => {
         const finalVal = {
           ...oldVal,
@@ -51,7 +54,7 @@ export const MarginAndPaddingInput = forwardRef<InputCommonRef, MarginAndPadding
           return res;
         }, {} as any);
         if (noTrigger !== true) {
-          props.onChange?.(outVal);
+          props.onChange?.(pick(outVal, keyList));
         }
         return finalVal;
       });

diff --git a/packages/engine/src/component/CSSUIPanel/index.tsx b/packages/engine/src/component/CSSUIPanel/index.tsx
@@ -68,7 +68,12 @@ export const CSSUIPanel = forwardRef<CSSUIPanelRef, CSSUIPanelProps>(({ value, i
             initialValue={initialVal as any}
             value={value as any}
             onChange={(val) => {
-              onValueChange?.({ ...value, ...val });
+              const newVal = {
+                ...(tempValueRef.current || {}),
+                ...val,
+              };
+              tempValueRef.current = newVal;
+              onValueChange?.(newVal);
             }}
           />
         ),
@@ -83,7 +88,12 @@ export const CSSUIPanel = forwardRef<CSSUIPanelRef, CSSUIPanelProps>(({ value, i
             initialValue={initialVal as any}
             value={value as any}
             onChange={(val) => {
-              onValueChange?.({ ...value, ...val });
+              const newVal = {
+                ...(tempValueRef.current || {}),
+                ...val,
+              };
+              tempValueRef.current = newVal;
+              onValueChange?.(newVal);
             }}
           />
         ),
@@ -98,7 +108,12 @@ export const CSSUIPanel = forwardRef<CSSUIPanelRef, CSSUIPanelProps>(({ value, i
             prefix="padding"
             value={value as any}
             onChange={(val) => {
-              onValueChange?.({ ...value, ...val });
+              const newVal = {
+                ...(tempValueRef.current || {}),
+                ...val,
+              };
+              tempValueRef.current = newVal;
+              onValueChange?.(newVal);
             }}
           />
         ),
@@ -112,7 +127,12 @@ export const CSSUIPanel = forwardRef<CSSUIPanelRef, CSSUIPanelProps>(({ value, i
             initialValue={initialVal as any}
             value={value as any}
             onChange={(val) => {
-              onValueChange?.({ ...value, ...val });
+              const newVal = {
+                ...(tempValueRef.current || {}),
+                ...val,
+              };
+              tempValueRef.current = newVal;
+              onValueChange?.(newVal);
             }}
           />
         ),
@@ -126,7 +146,12 @@ export const CSSUIPanel = forwardRef<CSSUIPanelRef, CSSUIPanelProps>(({ value, i
             value={value as any}
             initialValue={initialVal as any}
             onChange={(val) => {
-              onValueChange?.({ ...value, ...val });
+              const newVal = {
+                ...(tempValueRef.current || {}),
+                ...val,
+              };
+              tempValueRef.current = newVal;
+              onValueChange?.(newVal);
             }}
           />
         ),
@@ -139,7 +164,12 @@ export const CSSUIPanel = forwardRef<CSSUIPanelRef, CSSUIPanelProps>(({ value, i
             ref={borderRef}
             initialValue={initialVal as any}
             onChange={(val) => {
-              onValueChange?.({ ...value, ...val });
+              const newVal = {
+                ...(tempValueRef.current || {}),
+                ...val,
+              };
+              tempValueRef.current = newVal;
+              onValueChange?.(newVal);
             }}
           />
         ),
@@ -153,7 +183,7 @@ export const CSSUIPanel = forwardRef<CSSUIPanelRef, CSSUIPanelProps>(({ value, i
             initialValue={initialVal as any}
             value={value as any}
             onChange={(val) => {
-              onValueChange?.({ ...value, ...val });
+              onValueChange?.({ ...val });
             }}
           />
         ),