@daoyi/nmtl-ui 2.0.1-beta.52 → 2.0.1-beta.53

package/lib/components/ContactModal.js

@@ -0,0 +1,22 @@
+export { C as default } from './ContactModal-66bcb5d3.js';
+import './_rollupPluginBabelHelpers-3d9c8289.js';
+import 'react';
+import 'prop-types';
+import './hoist-non-react-statics.cjs-3f408ad2.js';
+import 'react-is';
+import 'axios';
+import './Modal-64c4ab0d.js';
+import './index-66babe67.js';
+import '@material-ui/core';
+import '@material-ui/icons';
+import './Button-433372aa.js';
+import './style-inject.es-1f59c1d0.js';
+import './Spin-8a5a600d.js';
+import './_commonjsHelpers-70de2c37.js';
+import './Select-113372b2.js';
+import './Empty-7318f658.js';
+import './createSvgIcon-a79ae4b1.js';
+import './defaultTheme-19a14721.js';
+import '@material-ui/styles';
+import 'react-dom';
+import './globalConfig';

package/lib/components/Drawer-df3535c2.js

@@ -0,0 +1,157 @@
+import { a as _slicedToArray } from './_rollupPluginBabelHelpers-3d9c8289.js';
+import React__default, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { List, ListItem, ListItemIcon, ListItemText, IconButton, Drawer as Drawer$1, Divider } from '@material-ui/core';
+import { DehazeRounded } from '@material-ui/icons';
+import { S as Select } from './Select-113372b2.js';
+import { useHistory, useRouteMatch } from 'react-router-dom';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+
+var defaultSupportLanguage = [
+// { value: 'en', label: 'English' },
+{
+  value: 'zh-tw',
+  label: '繁體中文'
+}
+// { value: 'zh-cn', label: '簡體中文' },
+];
+
+/* [檢查-語系]本系統是否支援該語系 並回傳語系 */
+var checkLanguageSupport = function checkLanguageSupport(_ref) {
+  var language = _ref.language,
+    supportLanguages = _ref.supportLanguages;
+  var isSupport = supportLanguages.some(function (_ref2) {
+    var value = _ref2.value;
+    return value === language;
+  });
+  return isSupport ? language : supportLanguages[0].value;
+};
+
+const DrawerList = _ref => {
+  let {
+    drawerList,
+    setOpen
+  } = _ref;
+  const history = useHistory();
+  const {
+    url
+  } = useRouteMatch();
+  return /*#__PURE__*/React__default.createElement(List, {
+    className: "drawer__list"
+  }, Array.isArray(drawerList) && drawerList.map((_ref2, index) => {
+    let {
+      name,
+      icon,
+      path
+    } = _ref2;
+    return /*#__PURE__*/React__default.createElement(ListItem, {
+      button: true,
+      key: index.toString(),
+      onClick: () => {
+        if (path.indexOf('http') > -1) {
+          window.location = path;
+        } else {
+          history.push({
+            pathname: `${url}${path}`
+          });
+        }
+        setOpen(false);
+      }
+    }, icon && /*#__PURE__*/React__default.createElement(ListItemIcon, {
+      style: {
+        marginRight: 24
+      }
+    }, icon), /*#__PURE__*/React__default.createElement(ListItemText, {
+      primary: name
+    }));
+  }));
+};
+DrawerList.defaultProps = {};
+DrawerList.propTypes = {
+  drawerList: PropTypes.arrayOf(PropTypes.any).isRequired,
+  setOpen: PropTypes.func.isRequired
+};
+
+var css_248z = ".drawer__icon {\n  display: none !important; }\n\n.drawer__header {\n  display: flex;\n  align-items: center;\n  padding: 20px; }\n  .drawer__header-title {\n    font-size: 18px;\n    font-weight: bold; }\n\n.drawer__list {\n  padding: 10px !important; }\n  .drawer__list .MuiSvgIcon-root {\n    margin-left: 8px; }\n\n.drawer__lang {\n  margin: 24px 36px !important; }\n\n@media screen and (max-width: 768px) {\n  .drawer {\n    display: flex;\n    justify-content: flex-end; }\n    .drawer__icon {\n      display: flex !important; } }\n";
+styleInject(css_248z);
+
+var Drawer = function Drawer(_ref) {
+  var title = _ref.title,
+    logo = _ref.logo,
+    locale = _ref.locale,
+    supportLanguages = _ref.supportLanguages,
+    drawerList = _ref.drawerList,
+    onLanguageChange = _ref.onLanguageChange;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "drawer"
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
+    className: "drawer__icon",
+    onClick: function onClick() {
+      return setOpen(true);
+    }
+  }, /*#__PURE__*/React__default.createElement(DehazeRounded, {
+    fontSize: "large"
+  })), /*#__PURE__*/React__default.createElement(Drawer$1, {
+    anchor: "right",
+    open: open,
+    onClose: function onClose() {
+      return setOpen(false);
+    },
+    onKeyDown: function onKeyDown() {
+      return setOpen(false);
+    }
+  }, (logo || title) && /*#__PURE__*/React__default.createElement("div", {
+    className: "drawer__header"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "drawer__header-logo"
+  }, logo), /*#__PURE__*/React__default.createElement("div", {
+    className: "drawer__header-title"
+  }, title)), /*#__PURE__*/React__default.createElement(Divider, null), /*#__PURE__*/React__default.createElement(DrawerList, {
+    drawerList: (Array.isArray(drawerList) ? drawerList : []).filter(function (_ref2) {
+      var showInHeader = _ref2.showInHeader;
+      return showInHeader;
+    }),
+    setOpen: setOpen
+  }), /*#__PURE__*/React__default.createElement(Divider, null), Array.isArray(supportLanguages) && supportLanguages.length > 0 && /*#__PURE__*/React__default.createElement(Select, {
+    className: "drawer__lang",
+    defaultValue: checkLanguageSupport({
+      language: locale,
+      supportLanguages: supportLanguages
+    }),
+    onChange: function onChange(value) {
+      return onLanguageChange(value);
+    },
+    options: supportLanguages
+  })));
+};
+Drawer.defaultProps = {
+  title: undefined,
+  logo: undefined,
+  locale: undefined,
+  supportLanguages: [{
+    value: 'en',
+    label: 'English'
+  }, {
+    value: 'zh-tw',
+    label: '繁體中文'
+  }, {
+    value: 'zh-cn',
+    label: '簡體中文'
+  }],
+  drawerList: undefined,
+  onLanguageChange: function onLanguageChange() {}
+};
+Drawer.propTypes = {
+  title: PropTypes.string,
+  logo: PropTypes.node,
+  locale: PropTypes.string,
+  supportLanguages: PropTypes.arrayOf(PropTypes.any),
+  drawerList: PropTypes.arrayOf(PropTypes.any),
+  onLanguageChange: PropTypes.func
+};
+
+export { Drawer as D, checkLanguageSupport as c, defaultSupportLanguage as d };

package/lib/components/Drawer.js

@@ -0,0 +1,11 @@
+export { D as default } from './Drawer-df3535c2.js';
+import './_rollupPluginBabelHelpers-3d9c8289.js';
+import 'react';
+import 'prop-types';
+import '@material-ui/core';
+import '@material-ui/icons';
+import './Select-113372b2.js';
+import './index-66babe67.js';
+import './Empty-7318f658.js';
+import './style-inject.es-1f59c1d0.js';
+import 'react-router-dom';

package/lib/components/Dropdown.js

@@ -0,0 +1,134 @@
+import { a as _slicedToArray } from './_rollupPluginBabelHelpers-3d9c8289.js';
+import React__default, { useRef, useState } from 'react';
+import { c as classNames } from './index-66babe67.js';
+import PropTypes from 'prop-types';
+import { Button, Menu, Divider, MenuItem, ListItemIcon, ListItemText } from '@material-ui/core';
+import { makeStyles } from '@material-ui/styles';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+
+var css_248z = "";
+styleInject(css_248z);
+
+var buttonType = {
+  default: 'outlined',
+  primary: 'contained',
+  link: 'text'
+};
+var Dropdown = function Dropdown(props) {
+  var className = props.className,
+    type = props.type,
+    disabled = props.disabled; // Attributes
+
+  var children = props.children,
+    icon = props.icon; // Node/Elements
+
+  var options = props.options; // Data List
+
+  var onOpen = props.onOpen,
+    _onClose = props.onClose,
+    getPopupContainer = props.getPopupContainer; // Callback List
+
+  var buttonRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var useStyles = makeStyles(function () {
+    return {
+      root: {
+        opacity: 0.6,
+        pointerEvents: 'none',
+        cursor: 'pointer'
+      },
+      disabled: true
+    };
+  });
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNames('dropdown', className)
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    id: "basic-button",
+    ref: buttonRef,
+    "aria-controls": "basic-menu",
+    "aria-haspopup": "true",
+    "aria-expanded": open ? 'true' : undefined,
+    onClick: function onClick() {
+      if (options && Array.isArray(options) && options.length > 0) {
+        setOpen(true);
+        if (onOpen) onOpen();
+      }
+    },
+    variant: buttonType[type] || 'text',
+    startIcon: icon || null,
+    disabled: disabled || false
+  }, children || null), /*#__PURE__*/React__default.createElement(Menu, {
+    id: "basic-menu",
+    getContentAnchorEl: null,
+    container: getPopupContainer || buttonRef.current,
+    anchorOrigin: {
+      vertical: 'bottom',
+      horizontal: 'center'
+    },
+    transformOrigin: {
+      vertical: 'top',
+      horizontal: 'center'
+    },
+    anchorEl: buttonRef.current,
+    open: open,
+    onClose: function onClose() {
+      setOpen(false);
+      if (_onClose) _onClose();
+    },
+    MenuListProps: {
+      'aria-labelledby': 'basic-button'
+    }
+  }, options && Array.isArray(options) && options.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      key: index.toString()
+    }, item.divider && /*#__PURE__*/React__default.createElement(Divider, null), /*#__PURE__*/React__default.createElement(MenuItem, {
+      className: item.disabled ? useStyles().root : '',
+      onClick: function onClick() {
+        setOpen(false);
+        if (_onClose) _onClose();
+        if (item.onClick) item.onClick({
+          label: item.label,
+          value: item.value
+        });
+      }
+    }, item.icon && /*#__PURE__*/React__default.createElement(ListItemIcon, null, item.icon), item.label && /*#__PURE__*/React__default.createElement(ListItemText, null, item.label)));
+  })));
+};
+Dropdown.defaultProps = {
+  className: undefined,
+  children: undefined,
+  icon: undefined,
+  type: 'link',
+  disabled: undefined,
+  options: undefined,
+  getPopupContainer: undefined,
+  onOpen: undefined,
+  onClose: undefined
+};
+
+/* Write props detail information and 'npm run updateStory' will help you generate stories's argTypes */
+Dropdown.propTypes = {
+  /** Css Name */
+  className: PropTypes.string,
+  /** 按鈕內容 */
+  children: PropTypes.node,
+  /** 按鈕左側Icon */
+  icon: PropTypes.node,
+  /** 按鈕類型 */
+  type: PropTypes.oneOf(Object.keys(buttonType)),
+  /** Menu按鈕是否禁用 */
+  disabled: PropTypes.bool,
+  /** Menu Data list */
+  options: PropTypes.arrayOf(PropTypes.any),
+  /** Menu content render by node */
+  getPopupContainer: PropTypes.func,
+  /** Menu 開啟 Callback */
+  onOpen: PropTypes.func,
+  /** Menu 關閉 Callback */
+  onClose: PropTypes.func
+};
+
+export { Dropdown as default };

package/lib/components/Empty-7318f658.js

@@ -0,0 +1,45 @@
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { c as classNames } from './index-66babe67.js';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+
+var img = "data:image/svg+xml,%3csvg class='ant-empty-img-default' width='184' height='152' viewBox='0 0 184 152' xmlns='http://www.w3.org/2000/svg'%3e %3cg fill='none' fill-rule='evenodd'%3e %3cg transform='translate(24 31.67)'%3e %3cellipse fill='%23f5f5f5' fill-opacity='0.8' cx='67.797' cy='106.89' rx='67.797' ry='12.668'%3e%3c/ellipse%3e %3cpath fill='%23aeb8c2' d='M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z'%3e%3c/path%3e %3cpath fill='url(%23linearGradient-1)' d='M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z' transform='translate(13.56)'%3e%3c/path%3e %3cpath fill='%23f5f5f7' d='M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z'%3e%3c/path%3e %3cpath fill='%23dce0e6' d='M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z'%3e%3c/path%3e %3c/g%3e %3cpath fill='%23dce0e6' d='M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z'%3e%3c/path%3e %3cg fill='white' transform='translate(149.65 15.383)'%3e %3cellipse cx='20.654' cy='3.167' rx='2.849' ry='2.815'%3e%3c/ellipse%3e %3cpath d='M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z'%3e%3c/path%3e %3c/g%3e %3c/g%3e%3c/svg%3e";
+
+var css_248z = ".antd-empty {\n  width: 100%;\n  font-size: 1rem;\n  line-height: 1.5715;\n  text-align: center;\n  overflow: hidden;\n  height: 100%; }\n  .antd-empty .ant-empty-image {\n    height: 100px;\n    margin-bottom: 8px; }\n    .antd-empty .ant-empty-image img {\n      height: calc(100% - 22px);\n      margin: auto; }\n  .antd-empty .antd-empty-description {\n    color: rgba(0, 0, 0, 0.85); }\n";
+styleInject(css_248z);
+
+var Empty = function Empty(_ref) {
+  var className = _ref.className,
+    description = _ref.description,
+    emptySrc = _ref.emptySrc,
+    imageStyle = _ref.imageStyle;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNames('antd-empty', className)
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "ant-empty-image"
+  }, /*#__PURE__*/React__default.createElement("img", {
+    src: emptySrc || img,
+    alt: description,
+    style: imageStyle
+  }), description && /*#__PURE__*/React__default.createElement("div", {
+    className: "ant-empty-description"
+  }, description)));
+};
+Empty.defaultProps = {
+  className: undefined,
+  emptySrc: undefined,
+  description: 'No Data',
+  imageStyle: {}
+};
+Empty.propTypes = {
+  /** Css名稱 */
+  className: PropTypes.string,
+  /** 空白時圖案的Src */
+  emptySrc: PropTypes.string,
+  /** 描述 */
+  description: PropTypes.node,
+  /** 圖案的style */
+  imageStyle: PropTypes.objectOf(PropTypes.any)
+};
+
+export { Empty as E };

package/lib/components/Empty.js

@@ -0,0 +1,5 @@
+export { E as default } from './Empty-7318f658.js';
+import 'react';
+import 'prop-types';
+import './index-66babe67.js';
+import './style-inject.es-1f59c1d0.js';

package/lib/components/ExportButton.js

@@ -0,0 +1,112 @@
+import { a as _slicedToArray } from './_rollupPluginBabelHelpers-3d9c8289.js';
+import React__default, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { c as classNames } from './index-66babe67.js';
+import { ExitToApp } from '@material-ui/icons';
+import { Dialog, DialogContent, DialogContentText, DialogActions, Button } from '@material-ui/core';
+import { f as fileDownload, j as jsonTxt, a as jsonExcel } from './dataExport-d55d6fa3.js';
+import { getIntl } from './globalConfig';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+
+var css_248z = ".exportButton {\n  display: flex;\n  align-items: center;\n  font-size: 1.5rem;\n  transition: color 0.3s ease-in-out;\n  -webkit-user-select: none;\n          user-select: none; }\n  .exportButton--right {\n    justify-content: flex-end; }\n  .exportButton__text {\n    display: flex;\n    align-items: center;\n    text-decoration: underline;\n    cursor: pointer; }\n    .exportButton__text__icon {\n      font-size: 2rem;\n      margin-right: 4px; }\n    .exportButton__text:hover {\n      font-weight: bold; }\n";
+styleInject(css_248z);
+
+var ExportButton = function ExportButton(_ref) {
+  var className = _ref.className,
+    color = _ref.color,
+    right = _ref.right,
+    forceTxt = _ref.forceTxt,
+    exportText = _ref.exportText,
+    exportTypeText = _ref.exportTypeText,
+    data = _ref.data;
+  var _getIntl = getIntl(),
+    formatMessage = _getIntl.formatMessage;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var buttons = [{
+    type: 'CSV',
+    click: function click() {
+      return fileDownload("\uFEFF".concat(jsonExcel(data)), 'output.csv');
+    }
+  }, {
+    type: 'EXCEL',
+    click: function click() {
+      return fileDownload("\uFEFF".concat(jsonExcel(data)), 'output.xls');
+    }
+  }, {
+    type: 'TXT',
+    click: function click() {
+      return fileDownload("\uFEFF".concat(jsonTxt(data)), 'output.txt');
+    }
+  }];
+  return /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      color: color
+    },
+    className: classNames('exportButton', {
+      'exportButton--right': right
+    }, className)
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "exportButton__text",
+    onClick: function onClick() {
+      return forceTxt ? fileDownload("\uFEFF".concat(jsonTxt(data)), 'output.txt') : setOpen(true);
+    }
+  }, /*#__PURE__*/React__default.createElement(ExitToApp, {
+    className: "exportButton__text__icon"
+  }), exportText || formatMessage({
+    id: 'common.export'
+  })), /*#__PURE__*/React__default.createElement(Dialog, {
+    open: open,
+    keepMounted: true,
+    onClose: function onClose() {
+      return setOpen(false);
+    },
+    "aria-labelledby": "alert-dialog-slide-title",
+    "aria-describedby": "alert-dialog-slide-description"
+  }, /*#__PURE__*/React__default.createElement(DialogContent, null, /*#__PURE__*/React__default.createElement(DialogContentText, null, exportTypeText || formatMessage({
+    id: 'common.export.type'
+  }))), /*#__PURE__*/React__default.createElement(DialogActions, null, buttons.map(function (_ref2) {
+    var type = _ref2.type,
+      click = _ref2.click;
+    return /*#__PURE__*/React__default.createElement(Button, {
+      key: type,
+      variant: "text",
+      onClick: function onClick() {
+        click();
+        setOpen(false);
+      }
+    }, type);
+  }))));
+};
+ExportButton.defaultProps = {
+  className: undefined,
+  color: '#4e3a16',
+  right: undefined,
+  forceTxt: true,
+  // 聽說Excel怪怪的 先強制隱藏
+  exportText: undefined,
+  exportTypeText: 'Export Type',
+  data: undefined
+};
+
+/* Write props detail information and 'npm run updateStory' will help you generate stories's argTypes */
+ExportButton.propTypes = {
+  /** Css Name */
+  className: PropTypes.string,
+  /** 主題顏色 */
+  color: PropTypes.string,
+  /** 靠右起來 */
+  right: PropTypes.bool,
+  /** 匯出是否強制txt */
+  forceTxt: PropTypes.bool,
+  /** 匯出的文字 */
+  exportText: PropTypes.string,
+  /** 匯出類型的文字 */
+  exportTypeText: PropTypes.string,
+  /** 要匯出的JSON資料 */
+  data: PropTypes.oneOfType([PropTypes.objectOf(PropTypes.any), PropTypes.arrayOf(PropTypes.any)])
+};
+
+export { ExportButton as default };