@daoyi/nmtl-ui 2.0.1-beta.47 → 2.0.1-beta.49

package/lib/components/ExtraTools-f10a66a8.js

@@ -1,818 +0,0 @@
-import { _ as _extends } from './_rollupPluginBabelHelpers-fde6d1c6.js';
-import * as React from 'react';
-import React__default, { useState } from 'react';
-import { q as domtoimage, f as fileDownload$1, s as styleInject, c as classNames, F as FacebookShareButton, t as FacebookIcon, u as screenfull, v as FontSize } from './vendor-851c6356.js';
-import PropTypes from 'prop-types';
-import { Menu, MenuItem } from '@material-ui/core';
-import { T as Tooltip } from './Tooltip-b7eb966d.js';
-import { s as snaToExcel, a as jsonExcel } from './dataExport-f418e6fe.js';
-
-const domToImage = _ref => {
-  let {
-    id,
-    fileName = 'image',
-    quality = 0.95
-  } = _ref;
-  const node = document.getElementById(id);
-  // 防止barchart的Y軸擋住圖，就先將他移到最左邊，拍完照再移回來
-  const yaxis = document.getElementById('yaxis');
-  const barChartElement = document.getElementById('barChart__block');
-  if (yaxis) {
-    yaxis.setAttribute('transform', 'translate(0, 0 )');
-  }
-  domtoimage.toPng(node, {
-    quality
-  }).then(dataUrl => {
-    const link = document.createElement('a');
-    link.download = `${fileName}.png`;
-    link.href = dataUrl;
-    link.click();
-    if (yaxis && barChartElement) {
-      yaxis.setAttribute('transform', 'translate(0, 0 )');
-      yaxis.setAttribute('transform', `translate(${barChartElement.scrollLeft}, 0)`);
-    }
-  }).catch(error => {
-    console.error('oops, something went wrong!', error);
-  });
-};
-
-const JSZip = require('jszip');
-const fileDownload = require('react-file-download');
-const DownloadGephiFileName = 'Gephi_generated_by_NMTL.zip';
-const generateNode = result => {
-  let IdCount = 10000000;
-  const nodeMap = {};
-  let foundType = false;
-  result.forEach(_ref => {
-    let {
-      source,
-      target,
-      sourceType,
-      targetType
-    } = _ref;
-    if (target === '' || source === '') {
-      return;
-    }
-    if (Object.keys(nodeMap).indexOf(source) < 0) {
-      if (sourceType !== '') {
-        foundType = true;
-        nodeMap[source] = {
-          ID: IdCount,
-          WEIGHT: 1,
-          NODE_TYPE: sourceType
-        };
-      } else {
-        nodeMap[source] = {
-          ID: IdCount,
-          WEIGHT: 1
-        };
-      }
-      IdCount += 1;
-    } else {
-      nodeMap[source].WEIGHT += 1;
-    }
-    if (Object.keys(nodeMap).indexOf(target) < 0) {
-      if (targetType !== '') {
-        foundType = true;
-        nodeMap[target] = {
-          ID: IdCount,
-          WEIGHT: 1,
-          NODE_TYPE: targetType
-        };
-      } else {
-        nodeMap[target] = {
-          ID: IdCount,
-          WEIGHT: 1
-        };
-      }
-      IdCount += 1;
-    } else {
-      nodeMap[target].WEIGHT += 1;
-    }
-  });
-  let tsvStr = foundType ? 'ID\tLABEL\tWEIGHT\tNODE_TYPE\r\n' : 'ID\tLABEL\tWEIGHT\r\n';
-  Object.keys(nodeMap).forEach(key => {
-    const idval = nodeMap[key].ID;
-    const wval = nodeMap[key].WEIGHT;
-    const type = foundType ? nodeMap[key].NODE_TYPE : '';
-    tsvStr += foundType ? `${idval}\t${key}\t${wval}\t${type}\r\n` : `${idval}\t${key}\t${wval}\r\n`;
-  });
-  return {
-    nodeMap,
-    nodesTsv: tsvStr
-  };
-};
-const generateEdge = (result, nodeMap) => {
-  let edgeStr = 'SOURCE\tTARGET\tWEIGHT\tTYPE\r\n';
-  result.forEach(_ref2 => {
-    let {
-      source,
-      target
-    } = _ref2;
-    if (target === '' || source === '') {
-      return;
-    }
-    const sourceId = nodeMap[source].ID;
-    const targetId = nodeMap[target].ID;
-    edgeStr += `${sourceId}\t${targetId}\t1\tUndirected\r\n`;
-  });
-  return edgeStr;
-};
-const downloadGephi = snaData => {
-  const {
-    nodes,
-    links
-  } = snaData;
-  const result = (links || []).map(_ref3 => {
-    let {
-      source,
-      target
-    } = _ref3;
-    return {
-      source: nodes[source].name,
-      target: nodes[target].name,
-      sourceType: nodes[source].type,
-      targetType: nodes[target].type
-    };
-  });
-  const {
-    nodeMap,
-    nodesTsv
-  } = generateNode(result);
-  const edgesTsv = generateEdge(result, nodeMap);
-  const zip = new JSZip();
-  zip.file('Node_Table.tsv', nodesTsv);
-  zip.file('Edge_Table.tsv', edgesTsv);
-  zip.generateAsync({
-    type: 'blob'
-  }).then(content => {
-    fileDownload(content, DownloadGephiFileName);
-  });
-};
-
-/* 轉檔工具, 提供API轉下載tsv/xlsx */
-
-/* 大事年表 */
-const chronologyConvert = data => {
-  const getText = function () {
-    let text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-    const [before, after] = text.split('<span class="tooltip">');
-    return {
-      before,
-      after
-    };
-  };
-
-  /* 做資料過濾 */
-  const newData = (data || []).map(_ref => {
-    let {
-      start_date: {
-        day,
-        month,
-        year
-      },
-      display_date: displayDate,
-      text: {
-        headline,
-        text
-      }
-    } = _ref;
-    return {
-      日期: `${year || ''}/${month || ''}/${day || ''}`,
-      名稱: (displayDate || '').replace('<span>', '').replace('</span>', ''),
-      描述: (headline || '').replaceAll(/(<([^>]+)>)/gi, ''),
-      類型: getText(text).before,
-      '註(資料集名稱)': getText(text).after.replaceAll('\n', '').replaceAll('\t', '').replace('註', '').replace('資料來源：', '').replaceAll(/(<([^>]+)>)/gi, '')
-    };
-  });
-  return newData;
-};
-
-/* 文學數據 - 地圖 */
-const mapConvert = data => (data || []).map(_ref2 => {
-  let {
-    title,
-    author,
-    publisher,
-    locations,
-    posX,
-    posY
-  } = _ref2;
-  return {
-    '名稱(書名/文章名)': title || '',
-    作者: author || '',
-    出版者: publisher || '',
-    '地點(作品描述區域)': locations || '',
-    經度: posX || '',
-    緯度: posY || ''
-  };
-});
-
-/* 文學數據 - 地圖(文學聚落) */
-const mapLgConvert = data => (data || []).map(_ref3 => {
-  let {
-    title,
-    locationOfFormation,
-    workLocations,
-    createPosX,
-    createPosY,
-    activePosX,
-    activePosY
-  } = _ref3;
-  return {
-    組織名稱: title || '',
-    創立地點: locationOfFormation,
-    創立地點經度: createPosX || '',
-    創立地點緯度: createPosY || '',
-    活動地點: workLocations || '',
-    活動地點經度: activePosX || '',
-    活動地點緯度: activePosY || ''
-  };
-});
-
-/* 文學數據 - 年度聲量 */
-const worksBarChart = data => (data || []).map(_ref4 => {
-  let {
-    date,
-    year,
-    title,
-    keywords,
-    authors,
-    genreName
-  } = _ref4;
-  return {
-    '出版年/發表年': date || year || '',
-    '名稱(書名/文章名)': title || '',
-    作者: (authors || []).map(_ref5 => {
-      let {
-        author
-      } = _ref5;
-      return author;
-    }).join(','),
-    關鍵字: (keywords || '').replaceAll('\n', ''),
-    文學分類: genreName || ''
-  };
-});
-
-/* 文學數據 - 文學自由搭配 */
-const worksSlider = data => (data || []).map(_ref6 => {
-  let {
-    title,
-    author,
-    date
-  } = _ref6;
-  return {
-    '名稱(書名/文章名)': title || '',
-    作者: author || '',
-    '出版日期/發表日期': date || ''
-    // 文學分類: genreName || '',
-    // 作品描述地: workDesc || '',
-    // 作家出生地: locations,
-    // 獲獎獎項: awards || '',
-  };
-});
-
-const exportXlsx = _ref => {
-  let {
-    data,
-    dataType,
-    extType = 'xlsx'
-  } = _ref;
-  let metadata;
-  switch (dataType) {
-    case 'sna':
-      metadata = snaToExcel(data);
-      break;
-    default:
-      metadata = data;
-      break;
-  }
-  fileDownload$1(`\uFEFF${jsonExcel(metadata)}`, `output.${extType}`);
-};
-
-// 供外部使用dataConvert
-exportXlsx.chronologyConvert = chronologyConvert;
-exportXlsx.mapConvert = mapConvert;
-exportXlsx.mapLgConvert = mapLgConvert;
-exportXlsx.worksBarChart = worksBarChart;
-exportXlsx.worksSlider = worksSlider;
-
-/* eslint-disable max-len */
-const DownloadImg = _ref => {
-  let {
-    fill = '#825c0d'
-  } = _ref;
-  return /*#__PURE__*/React__default.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 32,
-    height: 32,
-    viewBox: "0 0 32 32"
-  }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("clipPath", {
-    id: "a"
-  }, /*#__PURE__*/React__default.createElement("path", {
-    "data-name": "Rectangle 125",
-    style: {
-      fill: '#fff'
-    },
-    d: "M0 0h32v32H0z"
-  }))), /*#__PURE__*/React__default.createElement("g", {
-    style: {
-      clipPath: 'url(#a)'
-    }
-  }, /*#__PURE__*/React__default.createElement("path", {
-    d: "M-960 600h-20v-10h4v2h-2v6h16v-6h-2v-2h4zm-5.06-12.608-1.348-1.454-2.592 2.427V580h-2v8.365l-2.544-2.427-1.362 1.454 4.948 4.671z",
-    transform: "translate(986 -574)",
-    style: {
-      fill
-    },
-    "data-name": "Mask Group 42"
-  })));
-};
-
-/* eslint-disable max-len */
-const SVGComponent$2 = _ref => {
-  let {
-    fill = '#825c0d'
-  } = _ref;
-  return /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 32,
-    height: 32,
-    viewBox: "0 0 32 32"
-  }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-    id: "clip-path"
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "Rectangle_128",
-    "data-name": "Rectangle 128",
-    style: {
-      fill: '#fff'
-    },
-    d: "M0 0h32v32H0z"
-  })), /*#__PURE__*/React.createElement("style", null, `\n            .cls-3{fill:${fill}}\n        `)), /*#__PURE__*/React.createElement("g", {
-    id: "Mask_Group_47",
-    "data-name": "Mask Group 47",
-    style: {
-      clipPath: 'url(#clip-path)'
-    }
-  }, /*#__PURE__*/React.createElement("g", {
-    id: "Group_3633",
-    "data-name": "Group 3633",
-    transform: "translate(6 6)"
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "Path_181",
-    "data-name": "Path 181",
-    className: "cls-3",
-    d: "M514 371v-2h-2v2h-2v2h2v2h2v-2h2v-2z",
-    transform: "translate(-495 -369)"
-  }), /*#__PURE__*/React.createElement("g", {
-    id: "Group_3632",
-    "data-name": "Group 3632",
-    transform: "translate(0 2)"
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "Path_182",
-    "data-name": "Path 182",
-    className: "cls-3",
-    d: "M502.276 371h3.447L512 389h-3.164l-1.595-5.129h-6.586L499.036 389H496zm-.926 10.649h5.17l-.746-2.419c-.643-1.953-1.209-3.956-1.776-5.983h-.128a126.193 126.193 0 0 1-1.748 5.983z",
-    transform: "translate(-496 -371)"
-  })))));
-};
-
-/* eslint-disable max-len */
-const SVGComponent$1 = _ref => {
-  let {
-    fill = '#825c0d'
-  } = _ref;
-  return /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 32,
-    height: 32,
-    viewBox: "0 0 32 32"
-  }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-    id: "clip-path"
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "Rectangle_129",
-    "data-name": "Rectangle 129",
-    style: {
-      fill: '#fff'
-    },
-    d: "M0 0h32v32H0z"
-  })), /*#__PURE__*/React.createElement("style", null, `\n            .cls-3{fill:${fill}}\n        `)), /*#__PURE__*/React.createElement("g", {
-    id: "Mask_Group_48",
-    "data-name": "Mask Group 48",
-    style: {
-      clipPath: 'url(#clip-path)'
-    }
-  }, /*#__PURE__*/React.createElement("g", {
-    id: "Group_3635",
-    "data-name": "Group 3635",
-    transform: "translate(6 8)"
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "Path_181",
-    "data-name": "Path 181",
-    className: "cls-3",
-    d: "M510 371v2h6v-2z",
-    transform: "translate(-495 -371)"
-  }), /*#__PURE__*/React.createElement("g", {
-    id: "Group_3632",
-    "data-name": "Group 3632"
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "Path_182",
-    "data-name": "Path 182",
-    className: "cls-3",
-    d: "M502.276 371h3.447L512 389h-3.164l-1.595-5.129h-6.586L499.036 389H496zm-.926 10.649h5.17l-.746-2.419c-.643-1.953-1.209-3.956-1.776-5.983h-.128a126.193 126.193 0 0 1-1.748 5.983z",
-    transform: "translate(-496 -371)"
-  })))));
-};
-
-const SVGComponent = _ref => {
-  let {
-    fill = '#825c0d'
-  } = _ref;
-  return /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 32,
-    height: 32,
-    viewBox: "0 0 32 32"
-  }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-    id: "clip-path"
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "Rectangle_124",
-    "data-name": "Rectangle 124",
-    style: {
-      fill: '#fff'
-    },
-    d: "M0 0h32v32H0z"
-  })), /*#__PURE__*/React.createElement("style", null, `\n            .cls-3{fill:${fill}}\n        `)), /*#__PURE__*/React.createElement("g", {
-    id: "Mask_Group_46",
-    "data-name": "Mask Group 46",
-    style: {
-      clipPath: 'url(#clip-path)'
-    }
-  }, /*#__PURE__*/React.createElement("g", {
-    id: "Group_3629",
-    "data-name": "Group 3629",
-    transform: "translate(6 6.001)"
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "Path_176",
-    "data-name": "Path 176",
-    className: "cls-3",
-    d: "M-721 1949.376h2.5v-3.755h3.755v-2.5H-721z",
-    transform: "translate(721.003 -1943.118)"
-  }), /*#__PURE__*/React.createElement("path", {
-    id: "Path_177",
-    "data-name": "Path 177",
-    className: "cls-3",
-    d: "M-721 1960.376h6.258v-2.5h-3.758v-3.755h-2.5z",
-    transform: "translate(721.003 -1940.376)"
-  }), /*#__PURE__*/React.createElement("path", {
-    id: "Path_178",
-    "data-name": "Path 178",
-    className: "cls-3",
-    d: "M-703.744 1943.118H-710v2.5h3.755v3.755h2.5z",
-    transform: "translate(723.744 -1943.118)"
-  }), /*#__PURE__*/React.createElement("path", {
-    id: "Path_179",
-    "data-name": "Path 179",
-    className: "cls-3",
-    d: "M-703.744 1960.376v-6.259h-2.5v3.755H-710v2.5z",
-    transform: "translate(723.744 -1940.376)"
-  }))));
-};
-
-var css_248z = ".extraTools {\n  width: 100%;\n  display: inline-flex;\n  justify-content: flex-end;\n  align-items: center;\n  gap: 1rem;\n  padding: 0px 20px;\n  padding-top: 12px; }\n  .extraTools__share button {\n    display: flex;\n    justify-content: center;\n    align-items: center; }\n  .extraTools__download {\n    cursor: pointer; }\n    .extraTools__download-icon {\n      display: flex;\n      justify-content: center;\n      align-items: center; }\n  .extraTools__fullscreenBtn {\n    cursor: pointer;\n    padding-top: 0; }\n    .extraTools__fullscreenBtn-icon {\n      display: flex;\n      justify-content: center;\n      align-items: center; }\n  .extraTools__fontsize {\n    display: flex;\n    justify-content: center;\n    align-items: center; }\n  .extraTools .font-size-changer,\n  .extraTools .font-size-changer-buttons,\n  .extraTools .font-size-up,\n  .extraTools .font-size-down,\n  .extraTools .tooltip {\n    display: flex;\n    justify-content: center;\n    align-items: center; }\n  .extraTools .font-size-up {\n    width: 32px !important;\n    cursor: pointer;\n    margin-right: 16px !important; }\n  .extraTools .font-size-down {\n    cursor: pointer;\n    width: 32px !important; }\n  .extraTools .fullscreenExit {\n    text-align: right;\n    cursor: pointer;\n    border: 0; }\n  .extraTools #download-menu .MuiMenuItem-root {\n    color: #4e3a16;\n    width: auto;\n    overflow: hidden;\n    font-size: 1rem;\n    box-sizing: border-box;\n    min-height: 48px;\n    font-weight: 400;\n    line-height: 1;\n    padding-top: 1rem;\n    white-space: initial;\n    border-bottom: 0;\n    letter-spacing: 0.00938em;\n    padding-bottom: 1rem; }\n";
-styleInject(css_248z);
-
-/* eslint-disable prefer-destructuring */
-const ShareButton = _ref => {
-  let {
-    className
-  } = _ref;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: classNames('extraTools__share', className)
-  }, /*#__PURE__*/React__default.createElement(FacebookShareButton, {
-    url: document.location.href
-  }, /*#__PURE__*/React__default.createElement(FacebookIcon, {
-    size: 32,
-    round: true
-  })));
-};
-ShareButton.defaultProps = {
-  className: undefined
-};
-
-/* Write props detail information and 'npm run updateStory' will help you generate stories's argTypes */
-ShareButton.propTypes = {
-  /** Css Name */
-  className: PropTypes.string
-};
-const DownloadMenu = _ref2 => {
-  let {
-    className,
-    intl,
-    exclude,
-    iconColor,
-    data,
-    dataType,
-    domToImageId,
-    DownloadExcel
-  } = _ref2;
-  const [anchorEl, setAnchorEl] = useState(null);
-  const hideButton = type => (exclude || []).filter(key => key === type).length > 0;
-  const btns = [{
-    key: 'downloadImage',
-    onClick: () => domToImage({
-      id: domToImageId
-    }),
-    label: intl ? 'knowledge.writersAndWorksSNA.download.img' : '下載圖片'
-  }, {
-    key: 'downloadGephi',
-    onClick: () => downloadGephi(data),
-    label: intl ? 'knowledge.writersAndWorksSNA.download.gephi' : '下載Gephi'
-  }, {
-    key: 'downloadTsv',
-    onClick: () => exportXlsx({
-      data,
-      dataType,
-      extType: 'tsv'
-    }),
-    label: intl ? 'knowledge.writersAndWorksSNA.download.tsv' : '下載Tsv'
-  }, {
-    key: 'downloadXls',
-    // download click trigger 交給 react-data-export
-    label: intl ? 'knowledge.writersAndWorksSNA.download.xls' : '下載Excel'
-  }];
-  // eslint-disable-next-line no-confusing-arrow
-  const isXlsxButton = (key, dom) => key === 'downloadXls' && DownloadExcel ? /*#__PURE__*/React__default.createElement(DownloadExcel, {
-    key: key,
-    element: dom,
-    data: data
-  }) : dom;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: classNames('extraTools__download', className)
-  }, /*#__PURE__*/React__default.createElement(Tooltip, {
-    title: intl ? intl.formatMessage({
-      id: 'knowledge.writersAndWorksSNA.download'
-    }) : '下載',
-    placement: "bottom"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "extraTools__download-icon",
-    onClick: e => setAnchorEl(e.currentTarget)
-  }, /*#__PURE__*/React__default.createElement(DownloadImg, {
-    fill: iconColor
-  }))), /*#__PURE__*/React__default.createElement(Menu, {
-    id: "download-menu",
-    anchorEl: anchorEl,
-    keepMounted: true,
-    open: Boolean(anchorEl),
-    onClose: () => setAnchorEl(null)
-  }, btns.map(_ref3 => {
-    let {
-      key,
-      onClick,
-      label
-    } = _ref3;
-    return !hideButton(key) && isXlsxButton(key, /*#__PURE__*/React__default.createElement(MenuItem, {
-      key: key,
-      onClick: onClick
-    }, intl ? intl.formatMessage({
-      id: label
-    }) : label));
-  })));
-};
-DownloadMenu.defaultProps = {
-  className: undefined,
-  intl: undefined,
-  exclude: undefined,
-  data: null,
-  dataType: undefined,
-  iconColor: '#825c0d',
-  domToImageId: 'network-graph',
-  DownloadExcel: undefined
-};
-
-/* Write props detail information and 'npm run updateStory' will help you generate stories's argTypes */
-DownloadMenu.propTypes = {
-  /** Css Name */
-  className: PropTypes.string,
-  /** 語言 */
-  intl: PropTypes.objectOf(PropTypes.any),
-  /** 不顯示的按鈕 [ 'downloadImage', 'downloadTsv', 'downloadXls'] */
-  exclude: PropTypes.arrayOf(PropTypes.string),
-  /** 資料 */
-  data: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
-  /** 如果有下載xlsx文件, 需要提供type輸出使用 */
-  dataType: PropTypes.string,
-  /** icon顏色 */
-  iconColor: PropTypes.string,
-  /** 指定dom轉換畫布的DOM ID */
-  domToImageId: PropTypes.string,
-  /** Download元件, 由外部傳入的原因是需要環境設定 */
-  DownloadExcel: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
-};
-const FullscreenBtn = _ref4 => {
-  let {
-    className,
-    intl,
-    iconColor,
-    fullscreenDomId
-  } = _ref4;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: classNames('extraTools__fullscreenBtn', className)
-  }, /*#__PURE__*/React__default.createElement(Tooltip, {
-    title: intl ? intl.formatMessage({
-      id: 'knowledge.writersAndWorksSNA.fullscreen'
-    }) : '全螢幕模式',
-    placement: "bottom"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "extraTools__fullscreenBtn-icon",
-    onClick: () => {
-      if (screenfull.isEnabled && fullscreenDomId) screenfull.request(document.getElementById(fullscreenDomId));
-    }
-  }, /*#__PURE__*/React__default.createElement(SVGComponent, {
-    fill: iconColor
-  }))));
-};
-FullscreenBtn.defaultProps = {
-  className: undefined,
-  intl: undefined,
-  iconColor: '#825c0d',
-  fullscreenDomId: undefined
-};
-
-/* Write props detail information and 'npm run updateStory' will help you generate stories's argTypes */
-FullscreenBtn.propTypes = {
-  /** Css Name */
-  className: PropTypes.string,
-  /** 語言 */
-  intl: PropTypes.objectOf(PropTypes.any),
-  /** icon顏色 */
-  iconColor: PropTypes.string,
-  /** 全螢幕指定DOM */
-  fullscreenDomId: PropTypes.string
-};
-const FontSizeChanger = _ref5 => {
-  let {
-    className,
-    intl,
-    iconColor,
-    FontSizeTargets,
-    FontSizeOptions
-  } = _ref5;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: classNames('extraTools__fontsize', className)
-  }, /*#__PURE__*/React__default.createElement(FontSize, {
-    targets: FontSizeTargets,
-    options: FontSizeOptions,
-    customButtons: {
-      up: /*#__PURE__*/React__default.createElement(Tooltip, {
-        title: intl ? intl.formatMessage({
-          id: 'knowledge.writersAndWorksSNA.big'
-        }) : '字級放大',
-        placement: "bottom"
-      }, /*#__PURE__*/React__default.createElement(SVGComponent$2, {
-        fill: iconColor
-      })),
-      down: /*#__PURE__*/React__default.createElement(Tooltip, {
-        title: intl ? intl.formatMessage({
-          id: 'knowledge.writersAndWorksSNA.small'
-        }) : '字級縮小',
-        placement: "bottom"
-      }, /*#__PURE__*/React__default.createElement(SVGComponent$1, {
-        fill: iconColor
-      })),
-      style: {
-        border: 'none'
-      },
-      buttonsMargin: 10
-    }
-  }));
-};
-FontSizeChanger.defaultProps = {
-  className: undefined,
-  intl: undefined,
-  iconColor: '#825c0d',
-  FontSizeTargets: ['#network-graph svg g text'],
-  FontSizeOptions: {
-    stepSize: 2,
-    range: 1
-  }
-};
-
-/* Write props detail information and 'npm run updateStory' will help you generate stories's argTypes */
-FontSizeChanger.propTypes = {
-  /** Css Name */
-  className: PropTypes.string,
-  /** 語言 */
-  intl: PropTypes.objectOf(PropTypes.any),
-  /** icon顏色 */
-  iconColor: PropTypes.string,
-  /** 改變文字的目標DOM['css selector']) */
-  FontSizeTargets: PropTypes.arrayOf(PropTypes.string),
-  /** 改變文字的選項 */
-  FontSizeOptions: PropTypes.objectOf(PropTypes.any)
-};
-
-var ExtraTools = function ExtraTools(_ref) {
-  var className = _ref.className,
-    intl = _ref.intl,
-    exclude = _ref.exclude,
-    data = _ref.data,
-    dataType = _ref.dataType,
-    iconColor = _ref.iconColor,
-    domToImageId = _ref.domToImageId,
-    FontSizeTargets = _ref.FontSizeTargets,
-    FontSizeOptions = _ref.FontSizeOptions,
-    DownloadExcel = _ref.DownloadExcel,
-    fullscreenDomId = _ref.fullscreenDomId;
-  var hideButton = function hideButton(keys) {
-    return (exclude || []).filter(function (key) {
-      return keys.some(function (item) {
-        return item === key;
-      });
-    }).length === keys.length;
-  };
-  var BtnsProps = {
-    intl: intl,
-    exclude: exclude,
-    data: data,
-    dataType: dataType,
-    iconColor: iconColor,
-    domToImageId: domToImageId,
-    FontSizeTargets: FontSizeTargets,
-    FontSizeOptions: FontSizeOptions,
-    DownloadExcel: DownloadExcel,
-    fullscreenDomId: fullscreenDomId
-  };
-  var tools = [{
-    keys: ['share'],
-    Component: ShareButton
-  }, {
-    keys: ['downloadImage', 'downloadGephi', 'downloadTsv', 'downloadXls'],
-    Component: DownloadMenu
-  }, {
-    keys: ['fullscreen'],
-    Component: FullscreenBtn
-  }, {
-    keys: ['fontSizeChanger'],
-    Component: FontSizeChanger
-  }];
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: classNames('extraTools', className)
-  }, tools.map(function (_ref2) {
-    var keys = _ref2.keys,
-      Component = _ref2.Component;
-    return !hideButton(keys) && /*#__PURE__*/React__default.createElement(Component, _extends({
-      key: keys[0]
-    }, BtnsProps));
-  }));
-};
-
-/* 提供外部引用子元件, 子元件各自享獨立運作功能 */
-ExtraTools.ShareButton = ShareButton;
-ExtraTools.DownloadMenu = DownloadMenu;
-ExtraTools.FullscreenBtn = FullscreenBtn;
-ExtraTools.FontSizeChanger = FontSizeChanger;
-ExtraTools.defaultProps = {
-  className: undefined,
-  intl: undefined,
-  exclude: ['downloadGephi'],
-  data: null,
-  dataType: undefined,
-  iconColor: '#825c0d',
-  domToImageId: 'network-graph',
-  FontSizeTargets: ['#network-graph svg g text'],
-  FontSizeOptions: {
-    stepSize: 2,
-    range: 1
-  },
-  DownloadExcel: undefined,
-  fullscreenDomId: undefined
-};
-
-/* Write props detail information and 'npm run updateStory' will help you generate stories's argTypes */
-ExtraTools.propTypes = {
-  /** Css Name */
-  className: PropTypes.string,
-  /** 語言 */
-  intl: PropTypes.objectOf(PropTypes.any),
-  /** 不顯示的按鈕 ['share', 'downloadImage', 'downloadTsv', 'downloadXls', 'fullscreen', 'fontSizeChanger'] */
-  exclude: PropTypes.arrayOf(PropTypes.string),
-  /** 資料 */
-  data: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
-  /** 如果有下載xlsx文件, 需要提供type輸出使用 */
-  dataType: PropTypes.string,
-  /** icon顏色 */
-  iconColor: PropTypes.string,
-  /** 指定dom轉換畫布的DOM ID */
-  domToImageId: PropTypes.string,
-  /** 改變文字的目標DOM['css selector']) */
-  FontSizeTargets: PropTypes.arrayOf(PropTypes.string),
-  /** 改變文字的選項 */
-  FontSizeOptions: PropTypes.objectOf(PropTypes.any),
-  /** Download元件, 由外部傳入的原因是需要環境設定 */
-  DownloadExcel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  /** 全螢幕指定DOM */
-  fullscreenDomId: PropTypes.string
-};
-
-export { ExtraTools as E };