fix: 修复 quickEdit focus 高亮与列冻结样式冲突问题并优化快速编辑键盘操作交互

baidu · Dec 17, 2024 · d6a6fe9 · d6a6fe9
1 parent 19cdd57
commit d6a6fe9
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 30 deletions.
diff --git a/packages/amis-core/src/renderers/Form.tsx b/packages/amis-core/src/renderers/Form.tsx
@@ -2351,13 +2351,7 @@ export class FormRenderer extends Form {
     super.componentDidMount();
 
     if (this.props.autoFocus) {
-      const scoped = this.context as IScopedContext;
-      const inputs = scoped.getComponents();
-      let focuableInput = find(
-        inputs,
-        input => input.focus
-      ) as ScopedComponentType;
-      focuableInput && setTimeout(() => focuableInput.focus!(), 200);
+      this.focus();
     }
   }
 
@@ -2368,6 +2362,16 @@ export class FormRenderer extends Form {
     super.componentWillUnmount();
   }
 
+  focus() {
+    const scoped = this.context as IScopedContext;
+    const inputs = scoped.getComponents();
+    let focuableInput = find(
+      inputs,
+      input => input.focus
+    ) as ScopedComponentType;
+    focuableInput && setTimeout(() => focuableInput.focus!(), 200);
+  }
+
   doAction(
     action: ActionObject,
     data: object = this.props.store.data,

diff --git a/packages/amis-core/src/utils/uncontrollable.tsx b/packages/amis-core/src/utils/uncontrollable.tsx
@@ -6,7 +6,7 @@ export function uncontrollable<
   P extends {
     [propName: string]: any;
   }
->(arg: T, config: P, mapping?: any): T {
+>(arg: T, config: P, mapping?: Array<string>): T {
   const result = baseuncontrollable(arg, config, mapping);
   return hoistNonReactStatic(result, arg);
 }
diff --git a/packages/amis-ui/scss/components/_quick-edit.scss b/packages/amis-ui/scss/components/_quick-edit.scss
@@ -23,7 +23,7 @@
   &:focus {
     position: relative;
 
-    &:after {
+    &:before {
       content: '';
       left: 0;
       top: 0;

diff --git a/packages/amis-ui/src/components/Button.tsx b/packages/amis-ui/src/components/Button.tsx
@@ -33,6 +33,7 @@ export interface ButtonProps
   classPrefix: string;
   classnames: ClassNamesFn;
   componentClass: React.ElementType;
+  tabIndex?: string;
   overrideClassName?: boolean;
   loading?: boolean;
   loadingClassName?: string;
@@ -79,6 +80,7 @@ export class Button extends React.Component<ButtonProps> {
       overrideClassName,
       loadingConfig,
       testIdBuilder,
+      tabIndex,
       ...rest
     } = this.props;
 
@@ -112,6 +114,7 @@ export class Button extends React.Component<ButtonProps> {
         style={style}
         title={title}
         disabled={disabled}
+        tabIndex={tabIndex}
       >
         {loading && !disabled && (
           <Spinner

diff --git a/packages/amis-ui/src/components/Select.tsx b/packages/amis-ui/src/components/Select.tsx
@@ -1427,12 +1427,13 @@ export class Select extends React.Component<SelectProps, SelectState> {
   }
 }
 
-const EnhancedSelect = themeable(
-  localeable(
-    uncontrollable(Select, {
-      value: 'onChange'
-    })
-  )
+const methods = ['focus', 'blur'];
+const EnhancedSelect = uncontrollable(
+  themeable(localeable(Select, methods), methods),
+  {
+    value: 'onChange'
+  },
+  methods
 );
 
 export default EnhancedSelect;

diff --git a/packages/amis/src/renderers/Action.tsx b/packages/amis/src/renderers/Action.tsx
@@ -168,6 +168,8 @@ export interface ButtonSchema extends BaseSchema {
    * 子内容
    */
   body?: SchemaCollection;
+
+  tabIndex?: string;
 }
 
 export interface AjaxActionSchema extends ButtonSchema {
@@ -746,7 +748,8 @@ export class Action extends React.Component<ActionProps, ActionState> {
       css,
       id,
       testIdBuilder,
-      env
+      env,
+      tabIndex
     } = this.props;
 
     if (actionType !== 'email' && body) {
@@ -878,6 +881,7 @@ export class Action extends React.Component<ActionProps, ActionState> {
           tooltipRootClose={tooltipRootClose}
           block={block}
           iconOnly={!!(icon && !label && level !== 'link')}
+          tabIndex={tabIndex}
         >
           {!loading ? iconElement : ''}
           {label ? <span>{filter(String(label), data)}</span> : null}

diff --git a/packages/amis/src/renderers/QuickEdit.tsx b/packages/amis/src/renderers/QuickEdit.tsx
@@ -124,6 +124,8 @@ export const HocQuickEdit =
     > {
       target: HTMLElement;
       overlay: HTMLElement;
+      form?: any;
+      formItem?: any;
       static ComposedComponent = Component;
       constructor(props: QuickEditProps) {
         super(props);
@@ -163,24 +165,22 @@ export const HocQuickEdit =
       formRef(ref: any) {
         const {quickEditFormRef, rowIndex, colIndex} = this.props;
 
-        if (quickEditFormRef) {
-          while (ref && ref.getWrappedInstance) {
-            ref = ref.getWrappedInstance();
-          }
-
-          quickEditFormRef(ref, colIndex, rowIndex);
+        while (ref && ref.getWrappedInstance) {
+          ref = ref.getWrappedInstance();
         }
+
+        this.form = ref;
+        quickEditFormRef?.(ref, colIndex, rowIndex);
       }
       formItemRef(ref: any) {
         const {quickEditFormItemRef, rowIndex, colIndex} = this.props;
 
-        if (quickEditFormItemRef) {
-          while (ref && ref.getWrappedInstance) {
-            ref = ref.getWrappedInstance();
-          }
-
-          quickEditFormItemRef(ref, colIndex, rowIndex);
+        while (ref && ref.getWrappedInstance) {
+          ref = ref.getWrappedInstance();
         }
+
+        this.formItem = ref;
+        quickEditFormItemRef?.(ref, colIndex, rowIndex);
       }
 
       handleWindowKeyPress(e: Event) {
@@ -525,7 +525,14 @@ export const HocQuickEdit =
         ) {
           e.preventDefault();
           e.stopPropagation();
-          this.openQuickEdit();
+
+          if (this.formItem) {
+            this.formItem?.focus?.();
+          } else if (this.form) {
+            this.form?.focus?.();
+          } else {
+            this.openQuickEdit();
+          }
         }
       }
 
@@ -676,7 +683,18 @@ export const HocQuickEdit =
           (quickEdit as QuickEditConfig).isFormMode
         ) {
           return (
-            <Component {...restProps}>{this.renderInlineForm()}</Component>
+            <Component
+              {...restProps}
+              className={cx(`Field--quickEditable`, className)}
+              tabIndex={
+                (quickEdit as QuickEditConfig).focusable === false
+                  ? undefined
+                  : '0'
+              }
+              onKeyUp={disabled ? noop : this.handleKeyUp}
+            >
+              {this.renderInlineForm()}
+            </Component>
           );
         } else {
           return (
@@ -697,6 +715,7 @@ export const HocQuickEdit =
                 ? null
                 : render('quick-edit-button', {
                     type: 'button',
+                    tabIndex: '-1',
                     onClick: this.openQuickEdit,
                     className: 'Field-quickEditBtn',
                     icon: (quickEdit as QuickEditConfig).icon || 'edit',