82 lines
1.8 KiB
TypeScript
82 lines
1.8 KiB
TypeScript
import LabelInfo from '@/components/seal-form/components/label-info';
|
|
import { PlusOutlined } from '@ant-design/icons';
|
|
import { useIntl } from '@umijs/max';
|
|
import { Button } from 'antd';
|
|
import React from 'react';
|
|
import styled from 'styled-components';
|
|
|
|
interface WrapperProps {
|
|
label?: React.ReactNode;
|
|
description?: React.ReactNode;
|
|
labelExtra?: React.ReactNode;
|
|
children: React.ReactNode;
|
|
btnText?: string;
|
|
disabled?: boolean;
|
|
onAdd?: () => void;
|
|
button?: React.ReactNode;
|
|
}
|
|
|
|
const Container = styled.div`
|
|
position: relative;
|
|
padding: 14px;
|
|
padding-top: 34px;
|
|
border: 1px solid var(--ant-color-border);
|
|
border-radius: var(--border-radius-base);
|
|
display: flex;
|
|
width: 100%;
|
|
flex-direction: column;
|
|
.label {
|
|
position: absolute;
|
|
left: 16px;
|
|
line-height: 1;
|
|
top: 12px;
|
|
color: var(--ant-color-text-tertiary);
|
|
}
|
|
`;
|
|
|
|
const ButtonWrapper = styled.div`
|
|
margin-top: 16px;
|
|
`;
|
|
|
|
const Wrapper: React.FC<WrapperProps> = ({
|
|
children,
|
|
label,
|
|
description,
|
|
labelExtra,
|
|
onAdd,
|
|
btnText,
|
|
disabled,
|
|
button
|
|
}) => {
|
|
const intl = useIntl();
|
|
return (
|
|
<Container>
|
|
{label && (
|
|
<span className="label">
|
|
<LabelInfo
|
|
label={label}
|
|
description={description}
|
|
labelExtra={labelExtra}
|
|
></LabelInfo>
|
|
</span>
|
|
)}
|
|
{children}
|
|
{!disabled && (
|
|
<ButtonWrapper>
|
|
{button || (
|
|
<Button variant="filled" color="default" block onClick={onAdd}>
|
|
<PlusOutlined className="font-size-14" />
|
|
{btnText ||
|
|
intl.formatMessage({
|
|
id: 'common.button.addSelector'
|
|
})}
|
|
</Button>
|
|
)}
|
|
</ButtonWrapper>
|
|
)}
|
|
</Container>
|
|
);
|
|
};
|
|
|
|
export default Wrapper;
|