import React from 'react';

import {
  TagComponent
} from '@alicloud/console-components';

import {
  ITestingProps
} from '../../../types';

export default function Closeable({
  component
}: ITestingProps<TagComponent>): JSX.Element {
  const Tag = component;
  
  return <Tag.Group>
    <Tag.Closeable>默认点击 tail 关闭</Tag.Closeable>
    <Tag.Closeable closeArea="tag">设置 closeArea 为 tag</Tag.Closeable>
    <Tag.Closeable {...{
      closeArea: 'tag',
      onClose: () => console.info('可关闭') // eslint-disable-line no-console
    }}>
      什么都不 return 或 return true 就会关闭
    </Tag.Closeable>
    <Tag.Closeable {...{
      closeArea: 'tag',
      onClose: from => {
        console.info(from, '禁用关闭'); // eslint-disable-line no-console
        
        return false;
      }
    }}>
      onClose return false 可以阻止关闭
    </Tag.Closeable>
    <Tag.Closeable {...{
      afterClose: () => console.info('关闭后回调') // eslint-disable-line no-console
    }}>after Close</Tag.Closeable>
  </Tag.Group>;
}