import { ArgsTable, Meta, Story, Canvas } from '@storybook/addon-docs';
import ContextualSaveBar from '.';
import useContextualSaveBarState from './useContextualSaveBarState';
import Button from '../button';
import { useToast } from '../toast';
import { useHistory } from 'react-router';
import ConfigProvider from '../config-provider';

<Meta title="反馈/顶部保存条 ContextualSaveBar" component={ContextualSaveBar} />

## 基本使用

<Canvas>
  <Story name="基本使用">
    {() => {
      const [, setVisible] = useContextualSaveBarState();
      return (
        <>
          <ContextualSaveBar
            onCancel={() => console.log('cancel')}
            onOK={() => console.log('ok')}
          />
          <Button onClick={() => setVisible(true)}>显示保存条</Button>
        </>
      );
    }}
  </Story>
</Canvas>

## 全局设置 logo

在项目最外层包裹 ConfigProvider， 设置 contextualSaveBar

<Canvas>
  <Story name="全局设置 logo">
    {() => {
      const [, setVisible] = useContextualSaveBarState();
      return (
        <ConfigProvider logo={<div>logo</div>}>
          <ContextualSaveBar
            onCancel={() => console.log('cancel')}
            onOK={() => console.log('ok')}
          />
          <Button onClick={() => setVisible(true)}>显示保存条</Button>
        </ConfigProvider>
      );
    }}
  </Story>
</Canvas>

## 自定义离开页面操作

<Canvas>
  <Story name="自定义离开页面操作">
    {() => {
      const [, setVisible] = useContextualSaveBarState();
      const toast = useToast();
      const history = useHistory();
      return (
        <>
          <ContextualSaveBar
            onCancel={() => console.log('cancel')}
            onOK={() => console.log('ok')}
            onLeave={path => {
              toast({ title: '离开页面' });
              history.push(path);
            }}
          />
          <Button onClick={() => setVisible(true)}>显示保存条</Button>
        </>
      );
    }}
  </Story>
</Canvas>

## 参数

<ArgsTable of={ContextualSaveBar} />

#### confirmModalType

```javascript
interface confirmModalType {
  title?: string; // 标题
  content?: string; // 内容
  okText?: string; // ok 按钮文字
  cancelText?: string; // cancel 按钮文字
  okButtonProps?: ButtonProps; // ok 按钮 props
  cancelButtonProps?: ButtonProps; // cancel 按钮 props
}
```