Add button autofocus prop to confirm modal (#11756)

@picodoth
This commit is contained in:
Erwin Kort 2018-09-29 11:00:01 +02:00 committed by Wei Zhu
parent 3d58ea4d4c
commit 2d8f9ccf63
4 changed files with 7 additions and 2 deletions

View File

@ -80,6 +80,7 @@ export interface ModalFuncProps {
type?: string;
keyboard?: boolean;
getContainer?: (instance: React.ReactInstance) => HTMLElement;
autoFocusButton?: null | 'ok' | 'cancel';
}
export type ModalFunc = (props: ModalFuncProps) => {

View File

@ -9,6 +9,7 @@ import { getConfirmLocale } from './locale';
interface ConfirmDialogProps extends ModalFuncProps {
afterClose?: () => void;
close: (...args: any[]) => void;
autoFocusButton?: null | 'ok' | 'cancel';
}
const IS_REACT_16 = !!ReactDOM.createPortal;
@ -28,6 +29,7 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
const okText = props.okText ||
(okCancel ? runtimeLocale.okText : runtimeLocale.justOkText);
const cancelText = props.cancelText || runtimeLocale.cancelText;
const autoFocusButton = props.autoFocusButton === null ? false : props.autoFocusButton || 'ok';
const classString = classNames(
prefixCls,
@ -36,7 +38,7 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
);
const cancelButton = okCancel && (
<ActionButton actionFn={onCancel} closeModal={close}>
<ActionButton actionFn={onCancel} closeModal={close} autoFocus={autoFocusButton === 'cancel'}>
{cancelText}
</ActionButton>
);
@ -68,7 +70,7 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
</div>
<div className={`${prefixCls}-btns`}>
{cancelButton}
<ActionButton type={okType} actionFn={onOk} closeModal={close} autoFocus>
<ActionButton type={okType} actionFn={onOk} closeModal={close} autoFocus={autoFocusButton === 'ok'}>
{okText}
</ActionButton>
</div>

View File

@ -62,6 +62,7 @@ The properties of the object are follows:
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| autoFocusButton | Specify which button to autofocus | null\|string: `ok` `cancel` | `ok` |
| cancelText | Text of the Cancel button | string | `Cancel` |
| centered | Centered Modal | Boolean | `false` |
| className | className of container | string | - |

View File

@ -61,6 +61,7 @@ title: Modal
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| autoFocusButton | 指定自动获得焦点的按钮 | null\|string: `ok` `cancel` | `ok` |
| cancelText | 取消按钮文字 | string | 取消 |
| centered | 垂直居中展示 Modal | Boolean | `false` |
| className | 容器类名 | string | - |