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

package/lib/components/ExtraTools-f10a66a8.js

@@ -0,0 +1,818 @@
+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 };