Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 11 additions & 7 deletions packages/amis-core/src/renderers/Form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
}

Expand All @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion packages/amis-core/src/utils/uncontrollable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
2 changes: 1 addition & 1 deletion packages/amis-ui/scss/components/_quick-edit.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
&:focus {
position: relative;

&:after {
&:before {
content: '';
left: 0;
top: 0;
Expand Down
3 changes: 3 additions & 0 deletions packages/amis-ui/src/components/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ export interface ButtonProps
classPrefix: string;
classnames: ClassNamesFn;
componentClass: React.ElementType;
tabIndex?: string;
overrideClassName?: boolean;
loading?: boolean;
loadingClassName?: string;
Expand Down Expand Up @@ -79,6 +80,7 @@ export class Button extends React.Component<ButtonProps> {
overrideClassName,
loadingConfig,
testIdBuilder,
tabIndex,
...rest
} = this.props;

Expand Down Expand Up @@ -112,6 +114,7 @@ export class Button extends React.Component<ButtonProps> {
style={style}
title={title}
disabled={disabled}
tabIndex={tabIndex}
>
{loading && !disabled && (
<Spinner
Expand Down
13 changes: 7 additions & 6 deletions packages/amis-ui/src/components/Select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
9 changes: 6 additions & 3 deletions packages/amis/__tests__/renderers/Form/__snapshots__/inputTable.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -438,7 +438,8 @@ exports[`Renderer:input table add 1`] = `
data-index="0"
>
<td
class=""
class="cxd-Field--quickEditable"
tabindex="0"
>
<div
class="cxd-Form-item cxd-Form-item--normal"
Expand All @@ -465,7 +466,8 @@ exports[`Renderer:input table add 1`] = `
</div>
</td>
<td
class=""
class="cxd-Field--quickEditable"
tabindex="0"
>
<div
class="cxd-Form-item cxd-Form-item--normal"
Expand Down Expand Up @@ -1632,7 +1634,8 @@ exports[`Renderer:input-table with combo column 1`] = `
data-index="0"
>
<td
class=""
class="cxd-Field--quickEditable"
tabindex="0"
>
<div
class="cxd-Form-item cxd-Form-item--normal"
Expand Down
1 change: 1 addition & 0 deletions packages/amis/__tests__/renderers/Form/__snapshots__/static.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,7 @@ exports[`Renderer:static-quickEdit-icon 1`] = `
</span>
<button
class="cxd-Button cxd-Button--link cxd-Button--size-default cxd-Field-quickEditBtn"
tabindex="-1"
type="button"
>
<i
Expand Down
10 changes: 10 additions & 0 deletions packages/amis/__tests__/renderers/__snapshots__/CRUD.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2951,6 +2951,7 @@ exports[`13. enderer: crud keepItemSelectionOnPageChange & maxKeepItemSelectionL
</span>
<button
class="cxd-Button cxd-Button--link cxd-Button--size-default cxd-Field-quickEditBtn"
tabindex="-1"
type="button"
>
<icon-mock
Expand Down Expand Up @@ -3006,6 +3007,7 @@ exports[`13. enderer: crud keepItemSelectionOnPageChange & maxKeepItemSelectionL
</span>
<button
class="cxd-Button cxd-Button--link cxd-Button--size-default cxd-Field-quickEditBtn"
tabindex="-1"
type="button"
>
<icon-mock
Expand Down Expand Up @@ -3061,6 +3063,7 @@ exports[`13. enderer: crud keepItemSelectionOnPageChange & maxKeepItemSelectionL
</span>
<button
class="cxd-Button cxd-Button--link cxd-Button--size-default cxd-Field-quickEditBtn"
tabindex="-1"
type="button"
>
<icon-mock
Expand Down Expand Up @@ -3116,6 +3119,7 @@ exports[`13. enderer: crud keepItemSelectionOnPageChange & maxKeepItemSelectionL
</span>
<button
class="cxd-Button cxd-Button--link cxd-Button--size-default cxd-Field-quickEditBtn"
tabindex="-1"
type="button"
>
<icon-mock
Expand Down Expand Up @@ -3172,6 +3176,7 @@ exports[`13. enderer: crud keepItemSelectionOnPageChange & maxKeepItemSelectionL
</span>
<button
class="cxd-Button cxd-Button--link cxd-Button--size-default cxd-Field-quickEditBtn"
tabindex="-1"
type="button"
>
<icon-mock
Expand Down Expand Up @@ -3228,6 +3233,7 @@ exports[`13. enderer: crud keepItemSelectionOnPageChange & maxKeepItemSelectionL
</span>
<button
class="cxd-Button cxd-Button--link cxd-Button--size-default cxd-Field-quickEditBtn"
tabindex="-1"
type="button"
>
<icon-mock
Expand Down Expand Up @@ -3284,6 +3290,7 @@ exports[`13. enderer: crud keepItemSelectionOnPageChange & maxKeepItemSelectionL
</span>
<button
class="cxd-Button cxd-Button--link cxd-Button--size-default cxd-Field-quickEditBtn"
tabindex="-1"
type="button"
>
<icon-mock
Expand Down Expand Up @@ -3340,6 +3347,7 @@ exports[`13. enderer: crud keepItemSelectionOnPageChange & maxKeepItemSelectionL
</span>
<button
class="cxd-Button cxd-Button--link cxd-Button--size-default cxd-Field-quickEditBtn"
tabindex="-1"
type="button"
>
<icon-mock
Expand Down Expand Up @@ -3396,6 +3404,7 @@ exports[`13. enderer: crud keepItemSelectionOnPageChange & maxKeepItemSelectionL
</span>
<button
class="cxd-Button cxd-Button--link cxd-Button--size-default cxd-Field-quickEditBtn"
tabindex="-1"
type="button"
>
<icon-mock
Expand Down Expand Up @@ -3452,6 +3461,7 @@ exports[`13. enderer: crud keepItemSelectionOnPageChange & maxKeepItemSelectionL
</span>
<button
class="cxd-Button cxd-Button--link cxd-Button--size-default cxd-Field-quickEditBtn"
tabindex="-1"
type="button"
>
<icon-mock
Expand Down
6 changes: 5 additions & 1 deletion packages/amis/src/renderers/Action.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,6 +168,8 @@ export interface ButtonSchema extends BaseSchema {
* 子内容
*/
body?: SchemaCollection;

tabIndex?: string;
}

export interface AjaxActionSchema extends ButtonSchema {
Expand Down Expand Up @@ -746,7 +748,8 @@ export class Action extends React.Component<ActionProps, ActionState> {
css,
id,
testIdBuilder,
env
env,
tabIndex
} = this.props;

if (actionType !== 'email' && body) {
Expand Down Expand Up @@ -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}
Expand Down
47 changes: 33 additions & 14 deletions packages/amis/src/renderers/QuickEdit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,8 @@ export const HocQuickEdit =
> {
target: HTMLElement;
overlay: HTMLElement;
form?: any;
formItem?: any;
static ComposedComponent = Component;
constructor(props: QuickEditProps) {
super(props);
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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();
}
}
}

Expand Down Expand Up @@ -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 (
Expand All @@ -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',
Expand Down
Loading