SideSheet

import { useState } from 'react';
import { SideSheet, Button } from '@fibrous/semi-ui-react';

export default function SideSheetDemo() {
    const [visible, setVisible] = useState(false);
    const change = () => {
        setVisible(!visible);
    };
    return (
        <>
            <Button onClick={change}>Open SideSheet</Button>
            <SideSheet title="滑动侧边栏" visible={visible} onCancel={change}>
                <p>This is the content of a basic sidesheet.</p>
                <p>Here is more content...</p>
            </SideSheet>
        </>
    );
}

import { useState } from 'react';
import { SideSheet, RadioGroup, Radio, Button, type SideSheetProps, type RadioChangeEvent } from '@fibrous/semi-ui-react';

export default function SideSheetDemo() {
    const [visible, setVisible] = useState(false);
    const change = () => {
        setVisible(!visible);
    };
    const [placement, setPlacement] = useState<SideSheetProps['placement']>('right');
    const changePlacement = (e: RadioChangeEvent) => {
        setPlacement(e.target.value);
    };
    return (
        <>
            <RadioGroup aria-label="侧边栏位置" onChange={changePlacement} value={placement}>
                <Radio value="right">right</Radio>
                <Radio value="left">left</Radio>
                <Radio value="top">top</Radio>
                <Radio value="bottom">bottom</Radio>
            </RadioGroup>
            <br />
            <br />
            <Button onClick={change}>Open SideSheet</Button>
            <SideSheet title="滑动侧边栏" visible={visible} onCancel={change} placement={placement}>
                <p>This is the content of a basic sidesheet.</p>
                <p>Here is more content...</p>
            </SideSheet>
        </>
    );
}

import { useState } from 'react';
import { SideSheet, RadioGroup, Radio, Button, type SideSheetProps, type RadioChangeEvent } from '@fibrous/semi-ui-react';

export default function SideSheetDemo() {
    const [visible, setVisible] = useState(false);
    const change = () => {
        setVisible(!visible);
    };
    const [size, setSize] = useState<SideSheetProps['size']>('small');
    const changeSize = (e: RadioChangeEvent) => {
        setSize(e.target.value);
    };
    return (
        <>
            <RadioGroup aria-label="侧边栏尺寸" onChange={changeSize} value={size}>
                <Radio value="small">small</Radio>
                <Radio value="medium">medium</Radio>
                <Radio value="large">large</Radio>
            </RadioGroup>
            <br />
            <br />
            <Button onClick={change}>Open SideSheet</Button>
            <SideSheet title="滑动侧边栏" visible={visible} onCancel={change} size={size}>
                <p>This is the content of a basic sidesheet.</p>
                <p>Here is more content...</p>
            </SideSheet>
        </>
    );
}

import { useState } from 'react';
import { SideSheet, TextArea, Button } from '@fibrous/semi-ui-react';

export default function SideSheetDemo() {
    const [visible, setVisible] = useState(false);
    const [value, setValue] = useState('');
    return (
        <>
            <Button onClick={() => setVisible(true)}>Open SideSheet</Button>
            <TextArea placeholder="Please enter something" onChange={(value) => setValue(value)} style={{ marginTop: 12 }} />
            <SideSheet title="可操作外部的侧边栏" visible={visible} onCancel={() => setVisible(false)} mask={false} disableScroll={false}>
                <p>这里是输入的内容：</p>
                <p>{value}</p>
            </SideSheet>
        </>
    );
}

import { useState } from 'react';
import { SideSheet, Button } from '@fibrous/semi-ui-react';

export default function SideSheetDemo() {
    const [visible, setVisible] = useState(false);
    const getContainer = () => {
        return document.querySelector('.sidesheet-container') as HTMLElement;
    };
    return (
        <div
            style={{
                height: 320,
                overflow: 'hidden',
                position: 'relative',
                border: '1px solid var(--semi-color-border)',
                borderRadius: 2,
                padding: 24,
                textAlign: 'center',
                background: 'var(--semi-color-fill-0)',
            }}
            className="sidesheet-container"
        >
            <span>Render in this</span>
            <br />
            <br />
            <Button onClick={() => setVisible(true)}>Open SideSheet</Button>
            <SideSheet title="渲染在指定容器内部" visible={visible} onCancel={() => setVisible(false)} width={220} getPopupContainer={getContainer}>
                <p>This is the content of a basic sidesheet.</p>
                <p>Here is more content...</p>
            </SideSheet>
        </div>
    );
}

import { useState } from 'react';
import { SideSheet, Form, Button, Typography, Banner } from '@fibrous/semi-ui-react';

export default function SideSheetDemo() {
    const [visible, setVisible] = useState(false);
    const [createTime] = useState(() => new Date());

    const show = () => {
        setVisible(true);
    };

    const handleCancel = () => {
        setVisible(false);
    };

    const { DatePicker, Select, Radio, RadioGroup } = Form;

    const footer = (
        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
            <Button style={{ marginRight: 8 }}>重置</Button>
            <Button theme="solid">提交</Button>
        </div>
    );

    return (
        <>
            <Button onClick={show}>More Information</Button>
            <SideSheet title="创建资源包" headerStyle={{ borderBottom: '1px solid var(--semi-color-border)' }} bodyStyle={{ borderBottom: '1px solid var(--semi-color-border)' }} visible={visible} footer={footer} closable={false} onCancel={handleCancel}>
                <Form>
                    <DatePicker field="date" type="dateTime" initValue={createTime} style={{ width: 272 }} label={{ text: '创建时间', required: true }} />
                    <RadioGroup field="type" label="目标操作系统" direction="horizontal" initValue="all">
                        <Radio value="all">全平台</Radio>
                        <Radio value="ios">iOS</Radio>
                        <Radio value="android">Android</Radio>
                        <Radio value="web">Web</Radio>
                    </RadioGroup>
                    <RadioGroup field="origin" label="资源包来源" direction="horizontal" initValue="scm">
                        <Radio value="scm">从SCM上传</Radio>
                        <Radio value="manual">手动上传</Radio>
                    </RadioGroup>
                    <Banner
                        fullMode={false}
                        icon={null}
                        type="warning"
                        bordered
                        description={
                            <>
                                <Typography.Text strong>当前部署环境：线上部署</Typography.Text>
                                <br />
                                <Typography.Text>请选择正确的SCM构建产物，防止出现不符合预期的发布操作。</Typography.Text>
                            </>
                        }
                    />
                    <br />
                    <Select field="users" label={{ text: '创建用户', required: true }} style={{ width: 560 }} multiple initValue={['1', '2', '3', '4']}>
                        <Select.Option value="1">曲晨一</Select.Option>
                        <Select.Option value="2">夏可曼</Select.Option>
                        <Select.Option value="3">曲晨三</Select.Option>
                        <Select.Option value="4">蔡妍</Select.Option>
                    </Select>
                </Form>
            </SideSheet>
        </>
    );
}