@daoyi/nmtl-ui 2.0.1-beta.5 → 2.0.1-beta.51

package/lib/components/Select-113372b2.js

@@ -0,0 +1,115 @@
+import { b as _objectSpread2, d as _typeof } from './_rollupPluginBabelHelpers-3d9c8289.js';
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { c as classNames } from './index-66babe67.js';
+import { FormControl, Select as Select$1, CircularProgress, MenuItem } from '@material-ui/core';
+import { E as Empty } from './Empty-7318f658.js';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+
+var css_248z = ".select__placeholder {\n  color: #999; }\n\n.select--small {\n  width: 100%; }\n  .select--small .MuiSelect-root {\n    padding: 0.5rem 1.5rem 0.25rem;\n    color: white; }\n    .select--small .MuiSelect-root .select__placeholder {\n      color: white; }\n    .select--small .MuiSelect-root:hover, .select--small .MuiSelect-root:focus {\n      background: transparent; }\n  .select--small .MuiSvgIcon-root {\n    color: white; }\n  .select--small .MuiOutlinedInput-root {\n    border-radius: 45px; }\n";
+styleInject(css_248z);
+
+var Select = function Select(props) {
+  var style = props.style,
+    className = props.className,
+    labelInValue = props.labelInValue,
+    disabled = props.disabled,
+    loading = props.loading,
+    placeholder = props.placeholder,
+    variantSmall = props.variantSmall,
+    background = props.background,
+    menuItemClass = props.menuItemClass;
+  var options = props.options,
+    value = props.value,
+    defaultValue = props.defaultValue,
+    _onChange = props.onChange;
+  var itemFind = function itemFind(key) {
+    return (options || []).find(function (option) {
+      return _typeof(option) === 'object' ? key === option.value : key === option;
+    }) || key;
+  };
+  return /*#__PURE__*/React__default.createElement(FormControl, {
+    className: classNames('select', {
+      'select--small': variantSmall
+    }, className),
+    variant: "outlined"
+  }, /*#__PURE__*/React__default.createElement(Select$1, {
+    style: _objectSpread2(_objectSpread2({}, style || {}), {}, {
+      background: background
+    }),
+    displayEmpty: true,
+    disabled: disabled || loading,
+    renderValue: function renderValue(id) {
+      var finder = itemFind(id);
+      var content = _typeof(finder) === 'object' ? finder.label : finder;
+      if (!id && id !== 0 || id.length === 0) content = /*#__PURE__*/React__default.createElement("span", {
+        className: "select__placeholder"
+      }, placeholder);
+      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, content, loading && /*#__PURE__*/React__default.createElement(CircularProgress, {
+        size: 16,
+        style: {
+          marginLeft: 8,
+          marginRight: 4
+        }
+      }));
+    },
+    value: value,
+    defaultValue: defaultValue,
+    onChange: function onChange(event) {
+      return _onChange(labelInValue ? itemFind(event.target.value) : event.target.value);
+    }
+  }, Array.isArray(options) && options.length > 0 ? options.map(function (option) {
+    var key = _typeof(option) === 'object' ? option.value : option;
+    var text = _typeof(option) === 'object' ? option.label : option;
+    return /*#__PURE__*/React__default.createElement(MenuItem, {
+      key: key,
+      value: key,
+      ListItemClasses: menuItemClass
+    }, text);
+  }) : /*#__PURE__*/React__default.createElement(Empty, null)));
+};
+Select.defaultProps = {
+  style: undefined,
+  className: undefined,
+  value: undefined,
+  defaultValue: undefined,
+  options: undefined,
+  labelInValue: undefined,
+  disabled: undefined,
+  loading: undefined,
+  placeholder: 'Please select...',
+  variantSmall: undefined,
+  background: undefined,
+  menuItemClass: undefined,
+  onChange: function onChange() {}
+};
+Select.propTypes = {
+  /** 樣式 */
+  style: PropTypes.objectOf(PropTypes.any),
+  /** Css Name */
+  className: PropTypes.string,
+  /** 選擇的id */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /** 預設選擇的id */
+  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /** 下拉選單清單 */
+  options: PropTypes.arrayOf(PropTypes.any),
+  /** onChange時 label value 一起回傳 */
+  labelInValue: PropTypes.bool,
+  /** 是否禁止使用 */
+  disabled: PropTypes.bool,
+  /** 是否載入中 */
+  loading: PropTypes.bool,
+  /** 下拉選單提示字 */
+  placeholder: PropTypes.string,
+  /** 是否使用小size */
+  variantSmall: PropTypes.bool,
+  /** 使用變體後的顏色 */
+  background: PropTypes.string,
+  /** override menuItem class */
+  menuItemClass: PropTypes.objectOf(PropTypes.any),
+  /** 點選後的返回 */
+  onChange: PropTypes.func
+};
+
+export { Select as S };

package/lib/components/Select.js

@@ -1 +1,8 @@
-import{b as e,d as l}from"./_rollupPluginBabelHelpers-ec4e2a53.js";import a from"react";import t from"prop-types";import{c as n}from"./index-b2745105.js";import{FormControl as o,Select as r,CircularProgress as s,MenuItem as i}from"@material-ui/core";import c from"./Empty.js";import{s as u}from"./style-inject.es-1f59c1d0.js";u(".select__placeholder {\n  color: #999; }\n\n.select--small {\n  width: 100%; }\n  .select--small .MuiSelect-root {\n    padding: 0.5rem 1.5rem 0.25rem;\n    color: white; }\n    .select--small .MuiSelect-root .select__placeholder {\n      color: white; }\n    .select--small .MuiSelect-root:hover, .select--small .MuiSelect-root:focus {\n      background: transparent; }\n  .select--small .MuiSvgIcon-root {\n    color: white; }\n  .select--small .MuiOutlinedInput-root {\n    border-radius: 45px; }\n");var m=function(t){var u=t.style,m=t.className,d=t.labelInValue,p=t.disabled,b=t.loading,f=t.placeholder,v=t.variantSmall,g=t.background,y=t.menuItemClass,h=t.options,j=t.value,E=t.defaultValue,I=t.onChange,S=function(e){return(h||[]).find((function(a){return"object"===l(a)?e===a.value:e===a}))||e};return a.createElement(o,{className:n("select",{"select--small":v},m),variant:"outlined"},a.createElement(r,{style:e(e({},u||{}),{},{background:g}),displayEmpty:!0,disabled:p||b,renderValue:function(e){var t=S(e),n="object"===l(t)?t.label:t;return(!e&&0!==e||0===e.length)&&(n=a.createElement("span",{className:"select__placeholder"},f)),a.createElement(a.Fragment,null,n,b&&a.createElement(s,{size:16,style:{marginLeft:8,marginRight:4}}))},value:j,defaultValue:E,onChange:function(e){return I(d?S(e.target.value):e.target.value)}},Array.isArray(h)&&h.length>0?h.map((function(e){var t="object"===l(e)?e.value:e,n="object"===l(e)?e.label:e;return a.createElement(i,{key:t,value:t,ListItemClasses:y},n)})):a.createElement(c,null)))};m.defaultProps={style:void 0,className:void 0,value:void 0,defaultValue:void 0,options:void 0,labelInValue:void 0,disabled:void 0,loading:void 0,placeholder:"Please select...",variantSmall:void 0,background:void 0,menuItemClass:void 0,onChange:function(){}},m.propTypes={style:t.objectOf(t.any),className:t.string,value:t.oneOfType([t.string,t.number]),defaultValue:t.oneOfType([t.string,t.number]),options:t.arrayOf(t.any),labelInValue:t.bool,disabled:t.bool,loading:t.bool,placeholder:t.string,variantSmall:t.bool,background:t.string,menuItemClass:t.objectOf(t.any),onChange:t.func};export{m as default};
+export { S as default } from './Select-113372b2.js';
+import './_rollupPluginBabelHelpers-3d9c8289.js';
+import 'react';
+import 'prop-types';
+import './index-66babe67.js';
+import '@material-ui/core';
+import './Empty-7318f658.js';
+import './style-inject.es-1f59c1d0.js';

package/lib/components/Spin-8a5a600d.js

@@ -0,0 +1,75 @@
+import React__default, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { c as classNames } from './index-66babe67.js';
+import { Fade, CircularProgress } from '@material-ui/core';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+
+var css_248z = ".customSpin {\n  width: 100%;\n  min-height: 100px;\n  position: relative; }\n  .customSpin__spin {\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    z-index: 2;\n    display: flex;\n    justify-content: center;\n    align-items: center; }\n";
+styleInject(css_248z);
+
+var stringSize = {
+  small: 16,
+  middle: 24,
+  large: 40
+};
+var Spin = function Spin(props) {
+  var className = props.className,
+    spinning = props.spinning,
+    children = props.children,
+    size = props.size,
+    style = props.style;
+  var maxValue = function maxValue(val) {
+    // 極大極小值限制 300/16
+    var min = val < 16 ? 16 : val;
+    var max = min > 300 ? 300 : min;
+    return max;
+  };
+  var matchSize = useMemo(function () {
+    if (typeof size === 'string') {
+      if (Number(size) && typeof Number(size) === 'number') {
+        return maxValue(Number(size));
+      }
+      return stringSize[size] || 40;
+    }
+    if (typeof size === 'number') {
+      return maxValue(size);
+    }
+    // default size is large
+    return 40;
+  }, [size]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNames('customSpin', className),
+    style: style || {}
+  }, /*#__PURE__*/React__default.createElement(Fade, {
+    in: spinning,
+    style: {
+      transitionDelay: '300ms'
+    },
+    unmountOnExit: true
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "customSpin__spin"
+  }, /*#__PURE__*/React__default.createElement(CircularProgress, {
+    size: matchSize
+  }))), children);
+};
+Spin.defaultProps = {
+  className: undefined,
+  spinning: false,
+  children: null,
+  size: undefined,
+  style: undefined
+};
+Spin.propTypes = {
+  /** Css Name */
+  className: PropTypes.string,
+  /** 是否載入中 */
+  spinning: PropTypes.bool,
+  /** 內容 */
+  children: PropTypes.node,
+  /** 自訂尺寸 */
+  size: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(stringSize)), PropTypes.number]),
+  /** 自訂Style設置 */
+  style: PropTypes.objectOf(PropTypes.any)
+};
+
+export { Spin as S };

package/lib/components/Spin.js

@@ -1 +1,6 @@
-import e,{useMemo as n}from"react";import t from"prop-types";import{c as i}from"./index-b2745105.js";import{Fade as s,CircularProgress as r}from"@material-ui/core";import{s as o}from"./style-inject.es-1f59c1d0.js";o(".customSpin {\n  width: 100%;\n  min-height: 100px;\n  position: relative; }\n  .customSpin__spin {\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    z-index: 2;\n    display: flex;\n    justify-content: center;\n    align-items: center; }\n");var m={small:16,middle:24,large:40},a=function(t){var o=t.className,a=t.spinning,l=t.children,p=t.size,c=t.style,u=function(e){var n=e<16?16:e;return n>300?300:n},d=n((function(){return"string"==typeof p?Number(p)&&"number"==typeof Number(p)?u(Number(p)):m[p]||40:"number"==typeof p?u(p):40}),[p]);return e.createElement("div",{className:i("customSpin",o),style:c||{}},e.createElement(s,{in:a,style:{transitionDelay:"300ms"},unmountOnExit:!0},e.createElement("div",{className:"customSpin__spin"},e.createElement(r,{size:d}))),l)};a.defaultProps={className:void 0,spinning:!1,children:null,size:void 0,style:void 0},a.propTypes={className:t.string,spinning:t.bool,children:t.node,size:t.oneOfType([t.oneOf(Object.keys(m)),t.number]),style:t.objectOf(t.any)};export{a as default};
+export { S as default } from './Spin-8a5a600d.js';
+import 'react';
+import 'prop-types';
+import './index-66babe67.js';
+import '@material-ui/core';
+import './style-inject.es-1f59c1d0.js';

package/lib/components/Table.js

@@ -1 +1,51 @@
-import{c as e}from"./_rollupPluginBabelHelpers-ec4e2a53.js";import r from"react";import a from"prop-types";import{TableContainer as t,Paper as n,Table as l,TableHead as m,TableRow as o,TableCell as c,TableBody as s}from"@material-ui/core";var p=["render"],u=function(a){var u=a.className,i=a.columns,y=a.data;return r.createElement(t,{className:u,component:n},r.createElement(l,{className:"customTable"},r.createElement(m,null,r.createElement(o,null,Array.isArray(i)&&i.map((function(e){var a=e.field,t=e.headerName;return r.createElement(c,{key:a},t)})))),r.createElement(s,null,Array.isArray(y)&&y.map((function(a,t){return r.createElement(o,{key:t.toString()},Array.isArray(i)&&i.map((function(t){var n=t.render,l=e(t,p).field;return r.createElement(c,{key:l,component:"th",scope:"row"},n&&n(a)||a[l])})))})))))};u.defaultProps={className:void 0,columns:[],data:[]},u.propTypes={className:a.string,columns:a.arrayOf(a.any),data:a.arrayOf(a.any)};export{u as default};
+import { c as _objectWithoutProperties } from './_rollupPluginBabelHelpers-3d9c8289.js';
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { TableContainer, Paper, Table as Table$1, TableHead, TableRow, TableCell, TableBody } from '@material-ui/core';
+
+var _excluded = ["render"];
+var Table = function Table(_ref) {
+  var className = _ref.className,
+    columns = _ref.columns,
+    data = _ref.data;
+  return /*#__PURE__*/React__default.createElement(TableContainer, {
+    className: className,
+    component: Paper
+  }, /*#__PURE__*/React__default.createElement(Table$1, {
+    className: "customTable"
+  }, /*#__PURE__*/React__default.createElement(TableHead, null, /*#__PURE__*/React__default.createElement(TableRow, null, Array.isArray(columns) && columns.map(function (_ref2) {
+    var field = _ref2.field,
+      headerName = _ref2.headerName;
+    return /*#__PURE__*/React__default.createElement(TableCell, {
+      key: field
+    }, headerName);
+  }))), /*#__PURE__*/React__default.createElement(TableBody, null, Array.isArray(data) && data.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement(TableRow, {
+      key: index.toString()
+    }, Array.isArray(columns) && columns.map(function (_ref3) {
+      var render = _ref3.render,
+        columnProps = _objectWithoutProperties(_ref3, _excluded);
+      var field = columnProps.field;
+      return /*#__PURE__*/React__default.createElement(TableCell, {
+        key: field,
+        component: "th",
+        scope: "row"
+      }, render && render(item) || item[field]);
+    }));
+  }))));
+};
+Table.defaultProps = {
+  className: undefined,
+  columns: [],
+  data: []
+};
+Table.propTypes = {
+  /** Css Name */
+  className: PropTypes.string,
+  /** 欄位列表 */
+  columns: PropTypes.arrayOf(PropTypes.any),
+  /** 表格內容 */
+  data: PropTypes.arrayOf(PropTypes.any)
+};
+
+export { Table as default };

package/lib/components/Tooltip-abe1205f.js

@@ -0,0 +1,70 @@
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { Tooltip as Tooltip$1 } from '@material-ui/core';
+import { _ as _extends } from './_rollupPluginBabelHelpers-3d9c8289.js';
+import { c as classNames } from './index-66babe67.js';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+
+const TooltipContent = /*#__PURE__*/React__default.forwardRef((props, ref) => /*#__PURE__*/React__default.createElement("div", _extends({}, props, {
+  className: classNames('tooltip', props.className),
+  ref: ref
+}), props.children));
+TooltipContent.defaultProps = {
+  children: undefined,
+  className: undefined
+};
+TooltipContent.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string
+};
+
+var css_248z = ".tooltip {\n  width: -moz-fit-content;\n  width: fit-content; }\n";
+styleInject(css_248z);
+
+var placements = {
+  top: 'top',
+  left: 'left',
+  right: 'right',
+  bottom: 'bottom',
+  topLeft: 'top-start',
+  topRight: 'top-end',
+  bottomLeft: 'bottom-start',
+  bottomRight: 'bottom-end',
+  leftTop: 'left-start',
+  leftBottom: 'left-end',
+  rightTop: 'right-start',
+  rightBottom: 'right-end'
+};
+var Tooltip = function Tooltip(_ref) {
+  var title = _ref.title,
+    className = _ref.className,
+    placement = _ref.placement,
+    children = _ref.children;
+  return /*#__PURE__*/React__default.createElement(Tooltip$1, {
+    arrow: true,
+    title: title || '',
+    placement: placements[placement] || 'top'
+  }, /*#__PURE__*/React__default.createElement(TooltipContent, {
+    className: className
+  }, children));
+};
+Tooltip.defaultProps = {
+  className: undefined,
+  title: undefined,
+  children: 'Tooltip',
+  placement: undefined
+};
+
+/* Write props detail information and 'npm run updateStory' will help you generate stories's argTypes */
+Tooltip.propTypes = {
+  /** Css Name */
+  className: PropTypes.node,
+  /** 跳出的內容 */
+  title: PropTypes.node,
+  /** 子層 */
+  children: PropTypes.node,
+  /** 位置 */
+  placement: PropTypes.oneOf(Object.keys(placements))
+};
+
+export { Tooltip as T, placements as p };

package/lib/components/Tooltip.js

@@ -1 +1,7 @@
-import t from"react";import e from"prop-types";import{Tooltip as o}from"@material-ui/core";import{_ as r}from"./_rollupPluginBabelHelpers-ec4e2a53.js";import{c as i}from"./index-b2745105.js";import{s as l}from"./style-inject.es-1f59c1d0.js";const a=t.forwardRef(((e,o)=>t.createElement("div",r({},e,{className:i("tooltip",e.className),ref:o}),e.children)));a.defaultProps={children:void 0,className:void 0},a.propTypes={children:e.node,className:e.string};l(".tooltip {\n  width: -moz-fit-content;\n  width: fit-content; }\n");var s={top:"top",left:"left",right:"right",bottom:"bottom",topLeft:"top-start",topRight:"top-end",bottomLeft:"bottom-start",bottomRight:"bottom-end",leftTop:"left-start",leftBottom:"left-end",rightTop:"right-start",rightBottom:"right-end"},m=function(e){var r=e.title,i=e.className,l=e.placement,m=e.children;return t.createElement(o,{arrow:!0,title:r||"",placement:s[l]||"top"},t.createElement(a,{className:i},m))};m.defaultProps={className:void 0,title:void 0,children:"Tooltip",placement:void 0},m.propTypes={className:e.node,title:e.node,children:e.node,placement:e.oneOf(Object.keys(s))};export{m as default,s as placements};
+export { T as default, p as placements } from './Tooltip-abe1205f.js';
+import 'react';
+import 'prop-types';
+import '@material-ui/core';
+import './_rollupPluginBabelHelpers-3d9c8289.js';
+import './index-66babe67.js';
+import './style-inject.es-1f59c1d0.js';

package/lib/components/_commonjsHelpers-70de2c37.js

@@ -0,0 +1,28 @@
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+function getAugmentedNamespace(n) {
+  var f = n.default;
+	if (typeof f == "function") {
+		var a = function () {
+			return f.apply(this, arguments);
+		};
+		a.prototype = f.prototype;
+  } else a = {};
+  Object.defineProperty(a, '__esModule', {value: true});
+	Object.keys(n).forEach(function (k) {
+		var d = Object.getOwnPropertyDescriptor(n, k);
+		Object.defineProperty(a, k, d.get ? d : {
+			enumerable: true,
+			get: function () {
+				return n[k];
+			}
+		});
+	});
+	return a;
+}
+
+export { getDefaultExportFromCjs as a, commonjsGlobal as c, getAugmentedNamespace as g };