79 lines
1.7 KiB
TypeScript
79 lines
1.7 KiB
TypeScript
import { useIntl } from '@umijs/max';
|
|
import { Button, Space } from 'antd';
|
|
import React from 'react';
|
|
import styled from 'styled-components';
|
|
|
|
type ModalFooterProps = {
|
|
onOk?: () => void;
|
|
onCancel?: () => void;
|
|
cancelText?: string;
|
|
okText?: string;
|
|
htmlType?: 'button' | 'submit';
|
|
okBtnProps?: any;
|
|
cancelBtnProps?: any;
|
|
loading?: boolean;
|
|
style?: React.CSSProperties;
|
|
showOkBtn?: boolean;
|
|
showCancelBtn?: boolean;
|
|
extra?: React.ReactNode;
|
|
form?: any;
|
|
description?: React.ReactNode;
|
|
};
|
|
|
|
const Wrapper = styled.div`
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 20px;
|
|
`;
|
|
|
|
const ModalFooter: React.FC<ModalFooterProps> = ({
|
|
onOk,
|
|
onCancel,
|
|
cancelText,
|
|
okText,
|
|
okBtnProps,
|
|
cancelBtnProps,
|
|
loading,
|
|
htmlType = 'button',
|
|
style,
|
|
showOkBtn = true,
|
|
description,
|
|
extra,
|
|
showCancelBtn = true,
|
|
form
|
|
}) => {
|
|
const intl = useIntl();
|
|
return (
|
|
<Wrapper>
|
|
<div>{description}</div>
|
|
<Space size={20} style={{ ...style }}>
|
|
{showCancelBtn && (
|
|
<Button
|
|
onClick={onCancel}
|
|
style={{ width: '88px' }}
|
|
{...cancelBtnProps}
|
|
>
|
|
{cancelText || intl.formatMessage({ id: 'common.button.cancel' })}
|
|
</Button>
|
|
)}
|
|
{extra}
|
|
{showOkBtn && (
|
|
<Button
|
|
type="primary"
|
|
onClick={onOk}
|
|
style={{ width: '88px' }}
|
|
loading={loading}
|
|
htmlType={htmlType}
|
|
{...okBtnProps}
|
|
>
|
|
{okText || intl.formatMessage({ id: 'common.button.save' })}
|
|
</Button>
|
|
)}
|
|
</Space>
|
|
</Wrapper>
|
|
);
|
|
};
|
|
|
|
export default ModalFooter;
|