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; type?: string;
keyboard?: boolean; keyboard?: boolean;
getContainer?: (instance: React.ReactInstance) => HTMLElement; getContainer?: (instance: React.ReactInstance) => HTMLElement;
autoFocusButton?: null | 'ok' | 'cancel';
} }
export type ModalFunc = (props: ModalFuncProps) => { export type ModalFunc = (props: ModalFuncProps) => {

View File

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

View File

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

View File

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