73 lines
1.6 KiB
TypeScript
73 lines
1.6 KiB
TypeScript
import { Form, Switch, type SwitchProps } from 'antd';
|
|
import React from 'react';
|
|
import styled from 'styled-components';
|
|
import LabelInfo from './components/label-info';
|
|
import Wrapper from './wrapper';
|
|
|
|
const Inner = styled.div`
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
padding-inline: 14px;
|
|
.ant-switch {
|
|
margin-top: 0 !important;
|
|
}
|
|
`;
|
|
|
|
interface SealSwitchProps extends SwitchProps {
|
|
required?: boolean;
|
|
label?: React.ReactNode;
|
|
labelWidth?: number | string;
|
|
description?: string;
|
|
isInFormItems?: boolean;
|
|
checkStatus?: 'success' | 'error' | 'warning' | '';
|
|
}
|
|
|
|
const SealSlider: React.FC<SealSwitchProps> = (props) => {
|
|
const {
|
|
label,
|
|
value,
|
|
required,
|
|
description,
|
|
isInFormItems = true,
|
|
defaultValue,
|
|
checkStatus,
|
|
labelWidth,
|
|
size = 'small',
|
|
...rest
|
|
} = props;
|
|
|
|
let status = '';
|
|
if (isInFormItems) {
|
|
const statusData = Form?.Item?.useStatus?.();
|
|
status = statusData?.status || '';
|
|
}
|
|
|
|
const handleChange = (value: boolean, event: any) => {
|
|
props.onChange?.(value, event);
|
|
};
|
|
|
|
return (
|
|
<Wrapper
|
|
required={required}
|
|
status={checkStatus || status}
|
|
className="no-focus"
|
|
>
|
|
<Inner>
|
|
<LabelInfo label={label} description={description}></LabelInfo>
|
|
<Switch
|
|
{...rest}
|
|
size={size}
|
|
defaultValue={defaultValue}
|
|
style={{ marginBottom: 0, marginTop: 16, marginInline: 0 }}
|
|
value={value}
|
|
onChange={handleChange}
|
|
></Switch>
|
|
</Inner>
|
|
</Wrapper>
|
|
);
|
|
};
|
|
|
|
export default SealSlider;
|