Function Drawer

src/drawer/index.tsx:71–178

(props: DrawerProps<T>)

};

const Drawer = <T extends readOnlyTab>(props: DrawerProps<T>) => {
    const drawerPrefixCls = 'dtc-drawer';

    const {
        open,
        loading = false,
        bodyClassName,
        mask = false,
        maskClosable = true,
        bodyStyle,
        title,
        width,
        type = DrawerType.Normal,
        size = 'default',
        footer,
        banner,
        onClose,
        ...rest
    } = props;

    const finalWidth = width ?? getWidthFromSize(size);
    const isFormType = type === DrawerType.Form;

    const [internalTabKey, setInternalTabKey] = useState<TabKey<T>>('');

    useEffect(() => {
        open &&
            isTabMode(props) &&
            setInternalTabKey(props.defaultKey ?? props.tabs?.[0]?.key ?? '');
    }, [open]);

    const currentKey = isControlled(props) ? props.activeKey : internalTabKey;

    const renderButton = () => {
        return (
            <img
                className={`${drawerPrefixCls}-icon`}
                onClick={onClose}
                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAABwCAYAAAAE0LDPAAAAAXNSR0IArs4c6QAAAnlJREFUaEPtmk9IVHEQx78jufpw7ykouuEaBG6dEmrXOmRRt476VgvyEngKlNqQMu3PoSU7iCBq4CW2olNdRMRr7HasnnZb0y57WGODzUDjt/RIonbeyzfQYd51h/m8+c7395u3MOSs5Xexr4dKRLt5AhYJtbPRaNO7velo/4Bf6YhoB8B0R3vzNSLaNr8ECnBRRLTc0d583kBEAJU3J5o6HG0ZkgTs1OBATAxgqqghTIoCiPBeFABQSRggZFOxg/anC0ElYq9JlUglYhVgA9RFKhGrABugLlKJWAXYAHWRSsQqwAaoi1QiVgE2gHVRejKDUKgWQ1cvmj/XbMLfA3jA42dwVvPo7+tBd/xo8ICNzQLG7y3AskIYvz2IcEO9LwhbgcmWebGCpeUcEvEYBvrOBg8ol7cxOjaP4lYJqZEkIm2NniGeKjDZ3mQ/YPbJa7S1NiI1YntuuGeAgTx8lMHqx3XYvWdwOnHMUxW+AJufC7hzdwH1VggTt64gHLZYiC+Ayfb85QoWl3KIn+jEpeS54AHlb98xOjaHYrGEG8M2DkWaqkJ8V2CyZd86mJl7hdaWg7h5PVm14f8EMJD0zxM+ePkCuo4f+WsV/ycgm3MwMy8k0d4mp4ZtRIJusmvTxMlODNgB21T8oLlXRbK3B6cS3maDZxeJXnbudb315Wvl9AZ+XbsDpzseQ3/QA+fTRgET9wVHpvmqcNbWK6PSjEy/D9vkB+mnaLDq5D5b/L6x7+8iBbBNVolUItYDKpFKxCrABqiLVCJWATZAXaQSsQqwAeoilYhVgA1QFzESCS8wia9giS6Rma1B0TU40UU+sVVEoWXK6uugPwBjVkdxauLcgwAAAABJRU5ErkJggg=="
                alt="closeBtn"
            />
        );
    };

    const handleChangeKey = (key: TabKey<T>) => {
        !isControlled(props) && setInternalTabKey(key);
        isTabMode(props) && props.onChange?.(key);
    };

    return (
        <RcDrawer
            open={open}
            placement="right"
            mask={isFormType ? true : mask}
            maskClosable={isFormType ? false : maskClosable}
            width={finalWidth}
            prefixCls={drawerPrefixCls}
            onClose={onClose}