import { ArgsTable, Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
import { LoadingOutlined } from '@ant-design/icons';

import { RenderTrigger } from '.';
import { Props } from './props';

<Meta
  title="Development/RenderTrigger"
  component={RenderTrigger}
  argTypes={{
    onHide: { table: { category: 'hooks' } },
    onShow: { table: { category: 'hooks' } },
    style: { table: { category: 'styles' } },
  }}
/>

export const Template = (args) => <RenderTrigger {...args} />;

# Render Trigger

The `RenderTrigger` component triggers custom code when it renders or hides.

## Default

<Story name="Default" args={{}}>
  {Template.bind({})}
</Story>

<ArgsTable story="Default" />

## Children

You can embed child components to make it your own.

<Canvas>
  <Story
    name="DefaultValue"
    args={{
      children: (
        <div>
          <LoadingOutlined /> Your code here
        </div>
      ),
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

## Functions

The `onShow` and `onHide` callbacks let you trigger custom events and code.

<Canvas>
  <Story
    name="Functions"
    args={{
      onShow: () => console.log('Chat Loader is visible.'),
      onHide: () => console.log('Chat Loader is NOT visible.'),
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

## Custom Style

Pass in a `style` prop to change the CSS.

<Canvas>
  <Story
    name="Custom Style"
    args={{
      style: {
        maxWidth: '400px',
        border: '1px solid red',
        textAlign: 'center',
        margin: '4px',
        paddingTop: '14px',
        paddingBottom: '14px',
        borderRadius: '4px',
      },
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>