82 lines
2.0 KiB
TypeScript
82 lines
2.0 KiB
TypeScript
import { ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons';
|
|
import { useIntl } from '@umijs/max';
|
|
import { Button } from 'antd';
|
|
import styled from 'styled-components';
|
|
|
|
const Title = styled.span`
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
padding-inline: 24px;
|
|
.text {
|
|
font-size: 20px;
|
|
}
|
|
`;
|
|
interface FooterButtonsProps {
|
|
onPrevious: () => void;
|
|
onNext: () => void;
|
|
handleCancel: () => void;
|
|
handleSubmit: () => void;
|
|
showButtons: Record<string, boolean>;
|
|
loading?: boolean;
|
|
}
|
|
|
|
const FooterButtons: React.FC<FooterButtonsProps> = (props) => {
|
|
const {
|
|
onPrevious,
|
|
onNext,
|
|
handleCancel,
|
|
handleSubmit,
|
|
showButtons,
|
|
loading
|
|
} = props;
|
|
const intl = useIntl();
|
|
const handleOnNext = () => {
|
|
onNext();
|
|
};
|
|
return (
|
|
<Title style={{ padding: '16px 24px 24px' }}>
|
|
<div className="flex-center gap-20">
|
|
{showButtons.previous && (
|
|
<Button
|
|
type="default"
|
|
icon={<ArrowLeftOutlined />}
|
|
onClick={onPrevious}
|
|
>
|
|
{intl.formatMessage({ id: 'common.button.prev' })}
|
|
</Button>
|
|
)}
|
|
{showButtons.next && (
|
|
<Button
|
|
type="primary"
|
|
onClick={handleOnNext}
|
|
style={{ minWidth: 100 }}
|
|
>
|
|
{intl.formatMessage({ id: 'common.button.next' })}
|
|
<ArrowRightOutlined />
|
|
</Button>
|
|
)}
|
|
{showButtons.done && (
|
|
<Button type="primary" onClick={handleCancel}>
|
|
{intl.formatMessage({ id: 'common.button.done' })}
|
|
</Button>
|
|
)}
|
|
{showButtons.save && (
|
|
<Button
|
|
type="primary"
|
|
onClick={handleSubmit}
|
|
style={{ minWidth: 88 }}
|
|
loading={loading}
|
|
>
|
|
{intl.formatMessage({ id: 'common.button.save' })}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</Title>
|
|
);
|
|
};
|
|
|
|
export default FooterButtons;
|