feat: support context function to control switch opportunity

nick-ChenZe · Jun 9, 2021 · 275207e · 275207e
1 parent 0bac095
commit 275207e
Show file tree

Hide file tree

Showing 4 changed files with 163 additions and 73 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-abstract-quick-edit",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "",
   "main": "es/index.js",
   "types": "es/index.d.ts",

diff --git a/src/AbstractQuickEdit.tsx b/src/AbstractQuickEdit.tsx
@@ -6,6 +6,8 @@ import React, {
     useCallback,
     useRef,
     useMemo,
+    createContext,
+    useContext,
 } from 'react';
 import c from 'classnames';
 import {useDerivedState} from '@huse/derived-state';
@@ -18,6 +20,13 @@ interface Options {
     disableEnterKey?: boolean;
 }
 
+export interface IQuickEditContext {
+    onChangeValueByEffect: <T>(value: (value: T) => T | T) => void | T;
+}
+
+const QuickEditContext = createContext<IQuickEditContext>({onChangeValueByEffect: () => ({}) as any});
+export const useQuickEdit = () => useContext(QuickEditContext);
+const {Provider} = QuickEditContext;
 export interface Props<Value, EventValue> {
     // Value of edit component
     value: Value;
@@ -162,12 +171,29 @@ const register = <P extends {onChange?: (...args: any[]) => any, value?: unknown
             [switchEditStatus, shouldRenderEditComponent]
         );
 
+        const onChangeValueByEffect = useCallback(
+            updator => {
+                if (typeof updator === 'function') {
+                    handleOnChangeWhenValueChanged(updator(editValue));
+                }
+                else {
+                    handleOnChangeWhenValueChanged(updator);
+                }
+                switchEditStatus(false);
+            },
+            [editValue, handleOnChangeWhenValueChanged, switchEditStatus]
+        );
+
+        const contextValue = useMemo(
+            () => ({onChangeValueByEffect}),
+            [onChangeValueByEffect]
+        );
+
         useClickOutside(containerRef, () => {
             setTimeout(
                 () => {
                     if (shouldRenderEditComponent) {
-                        handleOnChangeWhenValueChanged(editValue);
-                        switchEditStatus(false);
+                        onChangeValueByEffect(editValue);
                     }
                 },
                 0
@@ -184,20 +210,28 @@ const register = <P extends {onChange?: (...args: any[]) => any, value?: unknown
         );
 
         return (
-            <div ref={containerRef} className={classNames} tabIndex={0} onKeyDown={handleKeyDown} onClick={handleClick}>
-                {(editing ?? shouldRenderEditComponent) ? (
-                    // @ts-ignore
-                    <ComponentIn
-                        {...props}
-                        {...defaultEditComponentProps}
-                        disabled={disabled}
-                        onChange={handleChange}
-                        value={editValue}
-                    />
-                ) : (
-                    displayComponent
-                )}
-            </div>
+            <Provider value={contextValue}>
+                <div
+                    ref={containerRef}
+                    className={classNames}
+                    tabIndex={0}
+                    onKeyDown={handleKeyDown}
+                    onClick={handleClick}
+                >
+                    {editing ?? shouldRenderEditComponent ? (
+                        // @ts-ignore
+                        <ComponentIn
+                            {...props}
+                            {...defaultEditComponentProps}
+                            disabled={disabled}
+                            onChange={handleChange}
+                            value={editValue}
+                        />
+                    ) : (
+                        displayComponent
+                    )}
+                </div>
+            </Provider>
         );
     };
 

diff --git a/src/__tests__/__snapshots__/index.test.js.snap b/src/__tests__/__snapshots__/index.test.js.snap
@@ -1,73 +1,121 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`test AbstractQuickEdit.register should render build-in edit component by press enter 1`] = `
-<div
-  className="quick-edit quick-edit-editing"
-  onClick={[Function]}
-  onKeyDown={[Function]}
-  tabIndex={0}
+<ContextProvider
+  value={
+    Object {
+      "onChangeValueByEffect": [Function],
+    }
+  }
 >
-  <input
-    onChange={[Function]}
-  />
-</div>
+  <div
+    className="quick-edit quick-edit-editing"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    tabIndex={0}
+  >
+    <input
+      onChange={[Function]}
+    />
+  </div>
+</ContextProvider>
 `;
 
 exports[`test AbstractQuickEdit.register should render build-in edit component by press enter 2`] = `
-<div
-  className="quick-edit quick-edit-editing"
-  onClick={[Function]}
-  onKeyDown={[Function]}
-  tabIndex={0}
+<ContextProvider
+  value={
+    Object {
+      "onChangeValueByEffect": [Function],
+    }
+  }
 >
-  <input
-    onChange={[Function]}
-  />
-</div>
+  <div
+    className="quick-edit quick-edit-editing"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    tabIndex={0}
+  >
+    <input
+      onChange={[Function]}
+    />
+  </div>
+</ContextProvider>
 `;
 
 exports[`test AbstractQuickEdit.register should render build-in input component correct 1`] = `
-<div
-  className="quick-edit"
-  onClick={[Function]}
-  onKeyDown={[Function]}
-  tabIndex={0}
-/>
+<ContextProvider
+  value={
+    Object {
+      "onChangeValueByEffect": [Function],
+    }
+  }
+>
+  <div
+    className="quick-edit"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    tabIndex={0}
+  />
+</ContextProvider>
 `;
 
 exports[`test AbstractQuickEdit.register should render build-in input component in edit mode 1`] = `
-<div
-  className="quick-edit quick-edit-editing"
-  onClick={[Function]}
-  onKeyDown={[Function]}
-  tabIndex={0}
+<ContextProvider
+  value={
+    Object {
+      "onChangeValueByEffect": [Function],
+    }
+  }
 >
-  <input
-    onChange={[Function]}
-  />
-</div>
+  <div
+    className="quick-edit quick-edit-editing"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    tabIndex={0}
+  >
+    <input
+      onChange={[Function]}
+    />
+  </div>
+</ContextProvider>
 `;
 
 exports[`test AbstractQuickEdit.register should render build-in input component in edit mode 2`] = `
-<div
-  className="quick-edit"
-  onClick={[Function]}
-  onKeyDown={[Function]}
-  tabIndex={0}
-/>
+<ContextProvider
+  value={
+    Object {
+      "onChangeValueByEffect": [Function],
+    }
+  }
+>
+  <div
+    className="quick-edit"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    tabIndex={0}
+  />
+</ContextProvider>
 `;
 
 exports[`test AbstractQuickEdit.register should render build-in input component in edit mode 3`] = `
-<div
-  className="quick-edit quick-edit-editing"
-  onClick={[Function]}
-  onKeyDown={[Function]}
-  tabIndex={0}
+<ContextProvider
+  value={
+    Object {
+      "onChangeValueByEffect": [Function],
+    }
+  }
 >
-  <input
-    onChange={[Function]}
-  />
-</div>
+  <div
+    className="quick-edit quick-edit-editing"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    tabIndex={0}
+  >
+    <input
+      onChange={[Function]}
+    />
+  </div>
+</ContextProvider>
 `;
 
 exports[`test AbstractQuickEdit.register should render custom edit component corrent 1`] = `
@@ -89,10 +137,18 @@ exports[`test AbstractQuickEdit.register should render custom edit component cor
 `;
 
 exports[`test AbstractQuickEdit.register should render disabled build-in edit component correct 1`] = `
-<div
-  className="quick-edit quick-edit-disabled"
-  onClick={[Function]}
-  onKeyDown={[Function]}
-  tabIndex={0}
-/>
+<ContextProvider
+  value={
+    Object {
+      "onChangeValueByEffect": [Function],
+    }
+  }
+>
+  <div
+    className="quick-edit quick-edit-disabled"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    tabIndex={0}
+  />
+</ContextProvider>
 `;
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,2 +1,2 @@
-export {default} from './AbstractQuickEdit';
-export type {Props as IAbstractQuickEdit} from './AbstractQuickEdit';
+export {default, useQuickEdit} from './AbstractQuickEdit';
+export type {Props as IAbstractQuickEdit, IQuickEditContext} from './AbstractQuickEdit';