import React from 'react'
import { SheetComponent } from '@antv/s2-react'
import { Export } from '@antv/s2-react-components'
import '@antv/s2-react/dist/s2-react.min.css';
import '@antv/s2-react-components/dist/s2-react-components.min.css';


const S2Options = {
  interaction: {
    // 开启复制
    copy: {
      enable: true
    }
  }
}

const App = () => {
  const s2Ref = React.useRef()

  return (
    <>
      <Export sheetInstance={s2Ref.current} />
      <SheetComponent
        dataCfg={dataCfg}
        options={S2Options}
        ref={s2Ref}
      />
    </>
  )
}

import { Button } from 'antd'
import { ExportOutlined } from '@ant-design/icons';
import { Export } from '@antv/s2-react-components'
import '@antv/s2-react-components/dist/s2-react-components.min.css';

const App = () => {
  return (
    <Export sheetInstance={s2Ref.current}>
      <Button type="text" icon={<ExportOutlined />}>
        导出数据
      </Button>
    </Export>
  )
}

<Export
  onCopySuccess={(data) => {
    console.log('copy success:', data);
  }}
  onDownloadSuccess={(data) => {
    console.log('download success', data);
  }}
/>

import { StrategyExport } from '@antv/s2-react-components'

<StrategyExport sheetInstance={s2Ref.current} />

import { strategyCopy } from '@antv/s2';
import { Export } from '@antv/s2-react-components'

<Export sheetInstance={s2Ref.current} customCopyMethod={strategyCopy} />

const s2DataConfig = {
  fields: {
    rows: ['province', 'city'],
    columns: ['type', 'sub_type'],
    values: ['number'],
  },
  meta: [
    {
      field: 'number',
      name: '数量',
      formatter: (value, record, meta) => {
        return `${value / 100} %`
      }
    },
  ]
}

import { asyncGetAllData, copyToClipboard } from '@antv/s2'

// 1. 拿到表格数据
const data = await asyncGetAllData({
  sheetInstance: s2,
  split: '\t',
  formatOptions: true,
  // formatOptions: {
  //   formatHeader: true,
  //   formatData: true
  // },

  // 同步复制
  // async: false
});

// 2. 写入到剪切板 （同时包含 `text/html` 和 `text/plain`)
// 同步复制：copyToClipboard(data, false)
copyToClipboard(data)
  .then(() => {
    console.log('复制成功')
  })
  .catch(() => {
    console.log('复制失败')
  })

const data = await asyncGetAllData({
  sheetInstance: s2,
  split: '\t',
  formatOptions: {
    formatHeader: false,
    formatData: false
  },
});

const s2Options = {
  interaction: {
    copy: {
      // 开启复制
      enable: true,
      // 复制时携带表头
      withHeader: true,
      // 复制格式化后的数据
      withFormat: true
    }
  }
}

const data = await asyncGetAllData({
  sheetInstance: s2,
  split: '\t',
  formatOptions: {
    formatHeader: true,
    formatData: true
  },
});

const s2Options = {
  interaction: {
    copy: {
      // 是否开启复制
      enable: true,
      // 复制时携带表头
      withHeader: true,
      // 复制格式化后的数据
      withFormat: true,
    },

    // 可选：圈选复制前，需要开启圈选功能
    brushSelection: {
      dataCell: true,
      rowCell: true,
      colCell: true,
    },

    // 可选：多选
    multiSelection: true
  }
};

const s2Options = {
  interaction: {
    copy: {
      enable: true,
      withHeader: true,
    },
  }
};

import { asyncGetAllData } from '@antv/s2'

const data = await asyncGetAllData({
  sheetInstance: s2,
  split: '\t',
  formatOptions: true,
  customTransformer: () => {
    return {
      'text/plain': (data) => {
         return {
           type: 'text/plain',
           content: ``
         };
      },
      'text/html': (data) => {
         return {
           type: 'text/html',
           content: `<td></td>`
         };
      },
    };
  },
})

const s2Options = {
  interaction: {
    copy: {
      customTransformer: () => {}
    }
  }
}

import { asyncGetAllPlainData, download } from '@antv/s2'

// 拿到复制数据 (text/plain)
const data = await asyncGetAllPlainData({
  sheetInstance: s2,
  split: ',',
  formatOptions: true,
  // formatOptions: {
  //   formatHeader: true,
  //   formatData: true
  // },

  // 同步导出
  // async: false
});

// 导出数据 (csv)
download(data, 'filename') // filename.csv

[
  {
    "type": "text/plain",
    "content": "省份、t 城市、t 类别、r\n 浙江省、t 杭州市、t 家具、r\n 浙江省、t 绍兴市、t 家具"
  },
  {
    "type": "text/html",
    "content": "<meta charset=\"utf-8\"><table><tbody><tr><td>省份</td><td>城市</td><td>类别</td></tr><tr><td>浙江省</td><td>杭州市</td><td>家具</td></tr><tr><td>浙江省</td><td>绍兴市</td><td>家具</td></tr></tbody></table>"
  }
]

"省份、t 城市、t 类别、r\n 浙江省、t 杭州市、t 家具、r\n 浙江省、t 绍兴市、t 家具"

"<meta charset=\"utf-8\"><table><tbody><tr><td>省份</td><td>城市</td><td>类别</td></tr><tr><td>浙江省</td><td>杭州市</td><td>家具</td></tr><tr><td>浙江省</td><td>绍兴市</td><td>家具</td></tr></tbody></table>"

enum CopyMIMEType {
  PLAIN = 'text/plain',
  HTML = 'text/html',
}

type FormatOptions =
  | boolean
  | {
      formatHeader?: boolean;
      formatData?: boolean;
    };

interface CopyAllDataParams {
  sheetInstance: SpreadSheet;
  split?: string;
  formatOptions?: FormatOptions;
  customTransformer?: (transformer: Transformer) => Partial<Transformer>;
  async?: boolean;
}

type CopyablePlain = {
  type: CopyMIMEType.PLAIN;
  content: string;
};

type CopyableHTML = {
  type: CopyMIMEType.HTML;
  content: string;
};

type MatrixPlainTransformer = (
  data: DataItem[][],
  separator?: string,
) => CopyablePlain;

type MatrixHTMLTransformer = (data: DataItem[][]) => CopyableHTML;

interface Transformer {
  [CopyMIMEType.PLAIN]: MatrixPlainTransformer;
  [CopyMIMEType.HTML]: MatrixHTMLTransformer;
}