fix(sheet): add focus change (#1500)

* fix(sheet): add focus change * fix(editor): review update and active callback * docs(editor): add comment * fix(editor): remove console
dream-num · Mar 7, 2024 · ed27e84 · ed27e84
1 parent 75de31c
commit ed27e84
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 14 deletions.
diff --git a/examples/src/plugins/debugger/views/test-editor/TestTextEditor.tsx b/examples/src/plugins/debugger/views/test-editor/TestTextEditor.tsx
@@ -48,6 +48,14 @@ export const TestEditorContainer = () => {
 
     const sheetId = workbook.getActiveSheet().getSheetId();
 
+    // function onActive(state: boolean) {
+    //     console.warn('active:', state);
+    // }
+    // onActive={onActive} onValid={onValid}
+    // function onValid(state: boolean) {
+    //     console.warn('valid:', state);
+    // }
+
     return (
         <div
             style={containerStyle}

diff --git a/packages/ui/src/components/editor/TextEditor.tsx b/packages/ui/src/components/editor/TextEditor.tsx
@@ -40,7 +40,7 @@ const excludeProps = new Set([
     'openForSheetUnitId',
     'openForSheetSubUnitId',
     'onChange',
-    'onFocus',
+    'onActive',
     'onValid',
 ]);
 
@@ -74,7 +74,7 @@ export interface ITextEditorProps {
 
     onChange?: (value: Nullable<string>) => void; // Callback for changes in the selector value.
 
-    onFocus?: (state: boolean) => void; // Callback for editor focus.
+    onActive?: (state: boolean) => void; // Callback for editor active.
 
     onValid?: (state: boolean) => void; // Editor input value validation, currently effective only under onlyRange and onlyFormula conditions.
 
@@ -84,7 +84,7 @@ export interface ITextEditorProps {
  * The component to render toolbar item label and menu item label.
  * @param props
  */
-export function TextEditor(props: ITextEditorProps & Omit<MyComponentProps, 'onChange' | 'onFocus'>): JSX.Element | null {
+export function TextEditor(props: ITextEditorProps & Omit<MyComponentProps, 'onChange' | 'onActive'>): JSX.Element | null {
     const {
         id,
         snapshot,
@@ -106,7 +106,7 @@ export function TextEditor(props: ITextEditorProps & Omit<MyComponentProps, 'onC
 
         onChange,
 
-        onFocus,
+        onActive,
 
         onValid,
     } = props;
@@ -158,13 +158,17 @@ export function TextEditor(props: ITextEditorProps & Omit<MyComponentProps, 'onC
         },
         editor);
 
+        const activeChange = debounce((state: boolean) => {
+            setActive(state);
+            onActive && onActive(state);
+        }, 10);
+
         const focusStyleSubscription = editorService.focusStyle$.subscribe((unitId: Nullable<string>) => {
             let state = false;
             if (unitId === id) {
                 state = true;
             }
-            setActive(state);
-            onFocus && onFocus(state);
+            activeChange(state);
         });
 
         const valueChange = debounce((editor: Readonly<Editor>) => {

diff --git a/packages/ui/src/components/range-selector/RangeSelector.tsx b/packages/ui/src/components/range-selector/RangeSelector.tsx
@@ -31,15 +31,16 @@ export interface IRangeSelectorProps {
     id: string;
     value?: string; // default values.
     onChange?: (ranges: IUnitRange[]) => void; // Callback for changes in the selector value.
-
+    onActive?: (state: boolean) => void; // Callback for editor active.
+    onValid?: (state: boolean) => void; // input value validation
     isSingleChoice?: boolean; // Whether to restrict to only selecting a single region/area/district.
 
     openForSheetUnitId?: Nullable<string>; //  Configuring which workbook the selector defaults to opening in determines whether the ref includes a [unitId] prefix.
     openForSheetSubUnitId?: Nullable<string>; // Configuring the default worksheet where the selector opens determines whether the ref includes a [unitId]sheet1 prefix.
 }
 
 export function RangeSelector(props: IRangeSelectorProps) {
-    const { onChange, id, value = '', isSingleChoice = false, openForSheetUnitId, openForSheetSubUnitId } = props;
+    const { onChange, id, value = '', onActive, onValid, isSingleChoice = false, openForSheetUnitId, openForSheetSubUnitId } = props;
 
     const [rangeDataList, setRangeDataList] = useState<string[]>(['']);
 
@@ -87,8 +88,12 @@ export function RangeSelector(props: IRangeSelectorProps) {
 
     const [rangeValue, setRangeValue] = useState(value);
 
+    const [currentInputIndex, setCurrentInputIndex] = useState<number>(-1);
+
     const selectorRef = useRef<HTMLDivElement>(null);
 
+    const currentInputIndexRef = useRef<number>(-1);
+
     useEffect(() => {
         const selector = selectorRef.current;
 
@@ -117,10 +122,16 @@ export function RangeSelector(props: IRangeSelectorProps) {
             }
 
             const lastRange = ranges[ranges.length - 1];
+            const rangeRef = serializeRange(lastRange);
             if (addItemCount >= 1 && !isSingleChoice) {
-                addNewItem(serializeRange(lastRange));
+                addNewItem(rangeRef);
+                setCurrentInputIndex(-1);
             } else {
-                changeLastItem(serializeRange(lastRange));
+                if (currentInputIndexRef.current === -1) {
+                    changeLastItem(rangeRef);
+                } else {
+                    changeItem(currentInputIndexRef.current, rangeRef);
+                }
             }
         });
 
@@ -131,6 +142,10 @@ export function RangeSelector(props: IRangeSelectorProps) {
         };
     }, []);
 
+    useEffect(() => {
+        currentInputIndexRef.current = currentInputIndex;
+    }, [currentInputIndex]);
+
     function handleCloseModal() {
         setSelectorVisible(false);
         rangeSelectorService.setCurrentSelectorId(null);
@@ -148,12 +163,14 @@ export function RangeSelector(props: IRangeSelectorProps) {
         setSelectorVisible(true);
     }
 
-    function onFocus(state: boolean) {
+    function onEditorActive(state: boolean) {
         setActive(state);
+        onActive && onActive(state);
     }
 
-    function onValid(state: boolean) {
+    function onEditorValid(state: boolean) {
         setValid(state);
+        onValid && onValid(state);
     }
 
     function handleConform() {
@@ -177,6 +194,7 @@ export function RangeSelector(props: IRangeSelectorProps) {
 
     function handleAddRange() {
         addNewItem('');
+        setCurrentInputIndex(-1);
     }
 
     function getSheetIdByName(name: string) {
@@ -207,7 +225,7 @@ export function RangeSelector(props: IRangeSelectorProps) {
     return (
         <>
             <div className={sClassName} ref={selectorRef}>
-                <TextEditor isSingleChoice={isSingleChoice} openForSheetUnitId={openForSheetUnitId} openForSheetSubUnitId={openForSheetSubUnitId} onValid={onValid} onFocus={onFocus} onChange={handleTextValueChange} id={id} onlyInputRange={true} canvasStyle={{ fontSize: 10 }} className={styles.rangeSelectorEditor} />
+                <TextEditor isSingleChoice={isSingleChoice} openForSheetUnitId={openForSheetUnitId} openForSheetSubUnitId={openForSheetSubUnitId} onValid={onEditorValid} onActive={onEditorActive} onChange={handleTextValueChange} id={id} onlyInputRange={true} canvasStyle={{ fontSize: 10 }} className={styles.rangeSelectorEditor} />
                 <Tooltip title={localeService.t('rangeSelector.buttonTooltip')} placement="bottom">
                     <button className={styles.rangeSelectorIcon} onClick={handleOpenModal}>
                         <SelectRangeSingle />
@@ -233,7 +251,7 @@ export function RangeSelector(props: IRangeSelectorProps) {
                     {rangeDataList.map((item, index) => (
                         <div key={index} className={styles.rangeSelectorModalContainer}>
                             <div style={{ display: rangeDataList.length === 1 ? '220px' : '200px' }} className={styles.rangeSelectorModalContainerInput}>
-                                <Input size="small" value={item} onChange={(value) => changeItem(index, value)} />
+                                <Input key={`input${index}`} onClick={() => setCurrentInputIndex(index)} size="small" value={item} onChange={(value) => changeItem(index, value)} />
                             </div>
                             <div style={{ display: rangeDataList.length === 1 ? 'none' : 'inline-block' }} className={styles.rangeSelectorModalContainerButton}>
                                 <DeleteSingle onClick={() => removeItem(index)} />