@daoyi/nmtl-ui 2.0.1-beta.9 → 2.0.1-beta.91

package/lib/components/Autocomplete-887cda6a.js

@@ -0,0 +1,432 @@
+import { _ as _extends$1, a as _slicedToArray, b as _objectSpread2 } from './_rollupPluginBabelHelpers-a52356f6.js';
+import React__default, { useCallback, useState, useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { c as classNames } from './index-ef96775f.js';
+import { d as debounce_1 } from './debounce-127da66c.js';
+import { Autocomplete as Autocomplete$1 } from '@material-ui/lab';
+import { Chip, TextField, CircularProgress } from '@material-ui/core';
+import { Close, SearchOutlined } from '@material-ui/icons';
+import { r as requireCreateSvgIcon, i as interopRequireDefault, a as interopRequireWildcard } from './createSvgIcon-0d38de2e.js';
+import { _ as _extends, m as merge, d as defaultTheme, c as compose, b as borders, a as display, f as flexbox, g as grid, p as positions, e as palette, h as boxShadow, s as sizing, i as spacing, t as typography } from './defaultTheme-ed7746fe.js';
+import 'react-is';
+import { _ as _toConsumableArray } from './toConsumableArray-dbe8af76.js';
+import { styled as styled$1 } from '@material-ui/styles';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+import { E as Empty } from './Empty-94a8d8ff.js';
+
+var ArrowDropDown = {};
+
+function omit(input, fields) {
+  var output = {};
+  Object.keys(input).forEach(function (prop) {
+    if (fields.indexOf(prop) === -1) {
+      output[prop] = input[prop];
+    }
+  });
+  return output;
+}
+
+function styleFunctionSx(styleFunction) {
+  var newStyleFunction = function newStyleFunction(props) {
+    var output = styleFunction(props);
+
+    if (props.css) {
+      return _extends({}, merge(output, styleFunction(_extends({
+        theme: props.theme
+      }, props.css))), omit(props.css, [styleFunction.filterProps]));
+    }
+
+    if (props.sx) {
+      return _extends({}, merge(output, styleFunction(_extends({
+        theme: props.theme
+      }, props.sx))), omit(props.sx, [styleFunction.filterProps]));
+    }
+
+    return output;
+  };
+
+  newStyleFunction.propTypes = {};
+  newStyleFunction.filterProps = ['css', 'sx'].concat(_toConsumableArray(styleFunction.filterProps));
+  return newStyleFunction;
+}
+
+var _interopRequireDefault = interopRequireDefault.exports;
+
+var _interopRequireWildcard = interopRequireWildcard.exports;
+
+Object.defineProperty(ArrowDropDown, "__esModule", {
+  value: true
+});
+var default_1 = ArrowDropDown.default = void 0;
+
+var React = _interopRequireWildcard(React__default);
+
+var _createSvgIcon = _interopRequireDefault(requireCreateSvgIcon());
+
+var _default = (0, _createSvgIcon.default)( /*#__PURE__*/React.createElement("path", {
+  d: "M7 10l5 5 5-5z"
+}), 'ArrowDropDown');
+
+default_1 = ArrowDropDown.default = _default;
+
+var styled = function styled(Component) {
+  var componentCreator = styled$1(Component);
+  return function (style, options) {
+    return componentCreator(style, _extends({
+      defaultTheme: defaultTheme
+    }, options));
+  };
+};
+
+var styleFunction = styleFunctionSx(compose(borders, display, flexbox, grid, positions, palette, boxShadow, sizing, spacing, typography));
+/**
+ * @ignore - do not document.
+ */
+
+var Box = styled('div')(styleFunction, {
+  name: 'MuiBox'
+});
+
+var useAutocomplete = (_ref => {
+  let {
+    options,
+    placeholder,
+    loading,
+    searchIcon,
+    labelInValue,
+    onEnter,
+    currentResult,
+    setCurrentDefaultValue,
+    arrowIcon
+  } = _ref;
+  const getValue = useCallback(data => typeof data === 'object' ? data.value : data, []);
+  const getLabel = useCallback(value => {
+    const finder = (Array.isArray(options) ? options : []).find(item => getValue(item) === getValue(value)
+    // typeof item === 'object' ? item.label === value : item === value
+    );
+
+    // console.log('options', options);
+    // console.log('value', value);
+    // console.log('finder', finder);
+    if (finder) {
+      return typeof finder === 'object' ? finder.label : finder;
+    }
+    return typeof value === 'object' ? value.label : value;
+  }, [options]);
+
+  // Filter duplicate data by each item.value
+  const getUniqueArray = useCallback(result => {
+    if (!Array.isArray(result)) return undefined;
+    return [...new Map(result.map(obj => [obj.value, obj])).values()];
+  }, []);
+
+  /* 若MUI的Autocomplete下方的options列表要勾選已選的項目 必須從options取出才可 */
+  const getValueFromOptions = useCallback(defaultValue => {
+    if (Array.isArray(options)) {
+      if (Array.isArray(defaultValue)) {
+        return defaultValue.map(
+        // item有可能為 object({ label, value }) 或 string(value)
+        item => options.find(_ref2 => {
+          let {
+            value
+          } = _ref2;
+          return item === value || item.value === value;
+        }) || item
+        // if (typeof item === 'object') return options.find(({ value }) => item.value === value) || item;
+        // return item;
+        );
+      }
+
+      const result = options.find(_ref3 => {
+        let {
+          value
+        } = _ref3;
+        return defaultValue === value;
+      });
+      return labelInValue ? defaultValue : result || {
+        label: defaultValue,
+        value: defaultValue
+      };
+    }
+    return defaultValue;
+  }, [options, labelInValue]);
+  const defaultTag = useCallback((tagValue, getTagProps) => tagValue.map((option, index) => /*#__PURE__*/React__default.createElement(Chip, _extends$1({
+    label: getLabel(option),
+    deleteIcon: /*#__PURE__*/React__default.createElement(Close, null)
+  }, getTagProps({
+    index
+  })))), [options]);
+  const defaultRenderInput = useCallback(params => /*#__PURE__*/React__default.createElement(TextField, _extends$1({}, params, {
+    variant: "outlined",
+    placeholder: placeholder,
+    InputProps: {
+      ...params.InputProps,
+      endAdornment: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, loading && /*#__PURE__*/React__default.createElement(CircularProgress, {
+        className: "autocomplete__icon",
+        color: "inherit",
+        size: 20
+      }), searchIcon && /*#__PURE__*/React__default.createElement(SearchOutlined, {
+        className: "autocomplete__icon",
+        onClick: event => {
+          const tmpObj = {
+            labels: currentResult || '',
+            value: currentResult || ''
+          };
+          setCurrentDefaultValue(tmpObj);
+          return onEnter(event, tmpObj);
+        }
+      }), !searchIcon && !loading && arrowIcon && /*#__PURE__*/React__default.createElement(Box, {
+        style: {
+          top: 'calc(50% - 14px)',
+          right: '12px',
+          position: 'absolute'
+        }
+      }, /*#__PURE__*/React__default.createElement(default_1, null)), params.InputProps.endAdornment)
+    }
+  })), [loading, searchIcon, arrowIcon]);
+  return {
+    getValue,
+    getValueFromOptions,
+    defaultTag,
+    defaultRenderInput,
+    getUniqueArray
+  };
+});
+
+var css_248z = ".autocomplete .MuiAutocomplete-inputRoot[class*=MuiOutlinedInput-root] {\n  flex-wrap: wrap;\n  padding: 0px 8px;\n}\n.autocomplete .MuiChip-deleteIcon {\n  width: 16px;\n  height: 16px;\n}\n.autocomplete__icon {\n  font-size: 1.25rem;\n  margin-right: 8px;\n  cursor: pointer;\n}\n.autocomplete--showSearchIcon .MuiAutocomplete-inputRoot[class*=MuiOutlinedInput-root] {\n  display: flex;\n  flex-wrap: nowrap;\n  padding: 4px 8px;\n}";
+styleInject(css_248z);
+
+var Autocomplete = function Autocomplete(props) {
+  var options = props.options,
+    defaultValue = props.defaultValue,
+    renderAfterDefaultValueChange = props.renderAfterDefaultValueChange,
+    filterable = props.filterable,
+    loading = props.loading,
+    labelInValue = props.labelInValue,
+    disabled = props.disabled;
+  var className = props.className,
+    multiple = props.multiple,
+    freeTyping = props.freeTyping,
+    placeholder = props.placeholder,
+    searchIcon = props.searchIcon,
+    _renderInput = props.renderInput,
+    _renderTags = props.renderTags;
+  var _onChange = props.onChange,
+    onSearch = props.onSearch,
+    onFocus = props.onFocus,
+    onBlur = props.onBlur,
+    onEnter = props.onEnter,
+    arrowIcon = props.arrowIcon;
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    rerender = _useState2[0],
+    setRerender = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    keyword = _useState4[0],
+    setKeyword = _useState4[1];
+  var _useState5 = useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    currentResult = _useState6[0],
+    setCurrentResult = _useState6[1];
+  var _useState7 = useState(),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isFocusItem = _useState8[0],
+    setFocusItem = _useState8[1];
+  var _useState9 = useState(),
+    _useState10 = _slicedToArray(_useState9, 2),
+    currentDefaultValue = _useState10[0],
+    setCurrentDefaultValue = _useState10[1];
+  var _useAutocomplete = useAutocomplete(_objectSpread2({}, {
+      options: options,
+      placeholder: placeholder,
+      loading: loading,
+      searchIcon: searchIcon,
+      labelInValue: labelInValue,
+      currentResult: currentResult,
+      onEnter: onEnter,
+      setCurrentDefaultValue: setCurrentDefaultValue,
+      arrowIcon: arrowIcon
+    })),
+    getValue = _useAutocomplete.getValue,
+    getValueFromOptions = _useAutocomplete.getValueFromOptions,
+    defaultTag = _useAutocomplete.defaultTag,
+    defaultRenderInput = _useAutocomplete.defaultRenderInput,
+    getUniqueArray = _useAutocomplete.getUniqueArray;
+  var handleSearch = useRef(debounce_1(function (result) {
+    return onSearch(result);
+  }, 500)).current;
+
+  // 複選時 defaultValue 必須為Array
+  // const currentDefaultValue = typeof defaultValue === 'string' && multiple ? undefined : getValueFromOptions(defaultValue);
+  useEffect(function () {
+    setCurrentDefaultValue(typeof defaultValue === 'string' && multiple ? {
+      label: keyword,
+      value: keyword
+    } : getValueFromOptions(defaultValue));
+  }, [JSON.stringify(defaultValue)]);
+  useEffect(function () {
+    if (renderAfterDefaultValueChange) setRerender(false);
+  }, [currentDefaultValue]); // defaultValue改變時強制rerender
+  useEffect(function () {
+    if (!rerender) setRerender(true);
+  }, [rerender]);
+  /* 監聽result變化時才觸發onSearch */
+  useEffect(function () {
+    if (currentResult) {
+      setKeyword(currentResult);
+      handleSearch(currentResult);
+    }
+  }, [currentResult]);
+
+  /* 這邊邏輯很複雜 變動需再三確認case */
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNames('autocomplete', {
+      'autocomplete--showSearchIcon': searchIcon
+    }, className)
+  }, rerender && /*#__PURE__*/React__default.createElement(Autocomplete$1, {
+    className: "autocomplete__component",
+    options: Array.isArray(options) && (freeTyping && keyword ? [{
+      label: keyword,
+      value: keyword
+    }].concat(options) : options) || []
+    // value="asd"
+    ,
+    defaultValue: currentDefaultValue,
+    disabled: disabled,
+    multiple: multiple
+    // 篩選機制(依據filterable決定是否要render全部)
+    ,
+    filterOptions: function filterOptions(optionList, input) {
+      var _input$inputValue = input.inputValue,
+        inputValue = _input$inputValue === void 0 ? '' : _input$inputValue;
+      return (Array.isArray(optionList) ? optionList : []).filter(function (item) {
+        var _ref = item || {},
+          _ref$label = _ref.label,
+          label = _ref$label === void 0 ? '' : _ref$label;
+        return filterable ? label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1 : true;
+      });
+    },
+    onChange: function onChange(event, result) {
+      if (Array.isArray(result)) {
+        _onChange(result.map(function (item) {
+          return labelInValue ? item : getValue(item);
+        }));
+      } else if (result) {
+        _onChange(labelInValue ? result : getValue(result));
+      }
+    },
+    onInputChange: function onInputChange(event, result, reason) {
+      /* 此callback會經常被觸發  因此需要setState並搭配useEffect穩定觸發 */
+      if (result && typeof result === 'string' && reason === 'input') setCurrentResult(result);
+    },
+    onKeyDown: function onKeyDown(event) {
+      switch (event.key) {
+        case 'ArrowDown':
+        case 'ArrowUp':
+          setFocusItem(true);
+          break;
+        case 'Enter':
+          if (!isFocusItem) {
+            var enterFreeTyping = freeTyping && !multiple;
+            onEnter(event, enterFreeTyping ? {
+              label: keyword,
+              value: keyword
+            } : undefined);
+            if (enterFreeTyping) setCurrentDefaultValue({
+              label: keyword,
+              value: keyword
+            });
+          }
+          break;
+        default:
+          setFocusItem(false);
+      }
+    },
+    getOptionLabel: function getOptionLabel(option) {
+      return option && option.label || '';
+    },
+    getOptionDisabled: function getOptionDisabled(option) {
+      return option.disabled;
+    },
+    renderInput: function renderInput(params) {
+      return _renderInput && _renderInput(params) || defaultRenderInput(params);
+    },
+    renderTags: function renderTags(tagValue, getTagProps) {
+      var uniqueArray = getUniqueArray(tagValue) || tagValue;
+      return _renderTags && _renderTags(uniqueArray, getTagProps) || defaultTag(uniqueArray, getTagProps);
+    }
+    // popupIcon={<ExpandMore />}
+    ,
+    popupIcon: null,
+    noOptionsText: /*#__PURE__*/React__default.createElement(Empty, null),
+    onFocus: onFocus,
+    onBlur: onBlur
+  }));
+};
+Autocomplete.defaultProps = {
+  className: undefined,
+  defaultValue: undefined,
+  renderAfterDefaultValueChange: false,
+  options: undefined,
+  freeTyping: false,
+  loading: false,
+  disabled: false,
+  labelInValue: true,
+  searchIcon: true,
+  multiple: false,
+  placeholder: 'Search...',
+  filterable: false,
+  renderInput: undefined,
+  renderTags: undefined,
+  onChange: function onChange() {},
+  onSearch: function onSearch() {},
+  onFocus: function onFocus() {},
+  onBlur: function onBlur() {},
+  onEnter: function onEnter() {},
+  arrowIcon: false
+};
+Autocomplete.propTypes = {
+  /** Css名稱 */
+  className: PropTypes.string,
+  /** 初始內容值 */
+  defaultValue: PropTypes.any,
+  /** 初始值變動後重新載入元件 */
+  renderAfterDefaultValueChange: PropTypes.bool,
+  /** 下拉選單內容 */
+  options: PropTypes.arrayOf(PropTypes.any),
+  /** 是否允許自由輸入 */
+  freeTyping: PropTypes.bool,
+  /** 是否載入中 */
+  loading: PropTypes.bool,
+  /** 是否禁止使用 */
+  disabled: PropTypes.bool,
+  /** onChange時 label value 一起回傳 */
+  labelInValue: PropTypes.bool,
+  /** 搜尋的圖案是否顯示 */
+  searchIcon: PropTypes.bool,
+  /** 是否複選 */
+  multiple: PropTypes.bool,
+  /** 提示字 */
+  placeholder: PropTypes.string,
+  /** 是否要啟動篩選功能(若關閉則option有什麼即顯示什麼) */
+  filterable: PropTypes.bool,
+  /** input客製化 */
+  renderInput: PropTypes.func,
+  /** 已選選項客製化 */
+  renderTags: PropTypes.func,
+  /** 變動時的callback */
+  onChange: PropTypes.func,
+  /** 搜尋時的callback */
+  onSearch: PropTypes.func,
+  /** Input被聚焦時的callback */
+  onFocus: PropTypes.func,
+  /** Input離開時的callback */
+  onBlur: PropTypes.func,
+  /** 鍵盤輸入Enter的callback */
+  onEnter: PropTypes.func,
+  /** 是否顯示arrow icon */
+  arrowIcon: PropTypes.bool
+};
+
+export { Autocomplete as A };

package/lib/components/Autocomplete.js

@@ -1 +1,19 @@
-import{_ as e,a as n,b as o}from"./_rollupPluginBabelHelpers-ec4e2a53.js";import t,{useCallback as r,useState as a,useRef as l,useEffect as u}from"react";import i from"prop-types";import{c}from"./index-b2745105.js";import{d as p}from"./debounce-c993109b.js";import{Autocomplete as s}from"@material-ui/lab";import{Chip as f,TextField as d,CircularProgress as m}from"@material-ui/core";import{Close as b,SearchOutlined as g}from"@material-ui/icons";import h from"./Empty.js";import{s as y}from"./style-inject.es-1f59c1d0.js";y(".autocomplete .MuiAutocomplete-inputRoot[class*='MuiOutlinedInput-root'] {\n  padding: 0px 8px; }\n\n.autocomplete .MuiChip-deleteIcon {\n  width: 16px;\n  height: 16px; }\n\n.autocomplete__icon {\n  font-size: 1.25rem;\n  margin-right: 8px; }\n\n.autocomplete--showSearchIcon .MuiAutocomplete-inputRoot[class*='MuiOutlinedInput-root'] {\n  display: flex;\n  flex-wrap: nowrap;\n  padding: 4px 8px; }\n");var I=function(i){var y=i.options,I=i.defaultValue,v=i.renderAfterDefaultValueChange,A=i.filterable,V=i.loading,x=i.labelInValue,E=i.disabled,w=i.className,C=i.multiple,O=i.freeTyping,T=i.placeholder,_=i.searchIcon,j=i.renderInput,N=i.renderTags,F=i.onChange,S=i.onSearch,D=i.onFocus,B=i.onBlur,M=i.onEnter,P=a(!0),R=n(P,2),k=R[0],L=R[1],z=a(),H=n(z,2),J=H[0],K=H[1],U=a(),q=n(U,2),G=q[0],Q=q[1],W=a(),X=n(W,2),Y=X[0],Z=X[1],$=a(),ee=n($,2),ne=ee[0],oe=ee[1],te=(n=>{let{options:o,placeholder:a,loading:l,searchIcon:u,labelInValue:i}=n;const c=r((e=>"object"==typeof e?e.value:e),[]),p=r((e=>{const n=(Array.isArray(o)?o:[]).find((n=>c(n)===c(e)));return n?"object"==typeof n?n.label:n:"object"==typeof e?e.label:e}),[o]),s=r((e=>{if(Array.isArray(o)){if(Array.isArray(e))return e.map((e=>o.find((n=>{let{value:o}=n;return e===o||e.value===o}))||e));const n=o.find((n=>{let{value:o}=n;return e===o}));return i?e:n||{label:e,value:e}}return e}),[o,i]),h=r(((n,o)=>n.map(((n,r)=>t.createElement(f,e({label:p(n),deleteIcon:t.createElement(b,null)},o({index:r})))))),[o]),y=r((n=>t.createElement(d,e({},n,{variant:"outlined",placeholder:a,InputProps:{...n.InputProps,endAdornment:t.createElement(t.Fragment,null,l&&t.createElement(m,{className:"autocomplete__icon",color:"inherit",size:20}),u&&t.createElement(g,{className:"autocomplete__icon"}),n.InputProps.endAdornment)}}))),[l,u]);return{getValue:c,getValueFromOptions:s,defaultTag:h,defaultRenderInput:y}})(o({},{options:y,placeholder:T,loading:V,searchIcon:_,labelInValue:x})),re=te.getValue,ae=te.getValueFromOptions,le=te.defaultTag,ue=te.defaultRenderInput,ie=l(p((function(e){return S(e)}),500)).current;return u((function(){oe("string"==typeof I&&C?{label:J,value:J}:ae(I))}),[JSON.stringify(I)]),u((function(){v&&L(!1)}),[ne]),u((function(){k||L(!0)}),[k]),u((function(){G&&(K(G),ie(G))}),[G]),t.createElement("div",{className:c("autocomplete",{"autocomplete--showSearchIcon":_},w)},k&&t.createElement(s,{className:"autocomplete__component",options:Array.isArray(y)&&(O&&J?[{label:J,value:J}].concat(y):y)||[],defaultValue:ne,disabled:E,multiple:C,filterOptions:function(e,n){var o=n.inputValue,t=void 0===o?"":o;return(Array.isArray(e)?e:[]).filter((function(e){var n=(e||{}).label;return!A||(void 0===n?"":n).toLowerCase().indexOf(t.toLowerCase())>-1}))},onChange:function(e,n){Array.isArray(n)?F(n.map((function(e){return x?e:re(e)}))):n&&F(x?n:re(n))},onInputChange:function(e,n,o){n&&"string"==typeof n&&"input"===o&&Q(n)},onKeyDown:function(e){switch(e.key){case"ArrowDown":case"ArrowUp":Z(!0);break;case"Enter":if(!Y){var n=O&&!C;M(e,n?{label:J,value:J}:void 0),n&&oe({label:J,value:J})}break;default:Z(!1)}},getOptionLabel:function(e){return e&&e.label||""},getOptionDisabled:function(e){return e.disabled},renderInput:function(e){return j&&j(e)||ue(e)},renderTags:function(e,n){return N&&N(e,n)||le(e,n)},popupIcon:null,noOptionsText:t.createElement(h,null),onFocus:D,onBlur:B}))};I.defaultProps={className:void 0,defaultValue:void 0,renderAfterDefaultValueChange:!1,options:void 0,freeTyping:!1,loading:!1,disabled:!1,labelInValue:!0,searchIcon:!0,multiple:!1,placeholder:"Search...",filterable:!1,renderInput:void 0,renderTags:void 0,onChange:function(){},onSearch:function(){},onFocus:function(){},onBlur:function(){},onEnter:function(){}},I.propTypes={className:i.string,defaultValue:i.any,renderAfterDefaultValueChange:i.bool,options:i.arrayOf(i.any),freeTyping:i.bool,loading:i.bool,disabled:i.bool,labelInValue:i.bool,searchIcon:i.bool,multiple:i.bool,placeholder:i.string,filterable:i.bool,renderInput:i.func,renderTags:i.func,onChange:i.func,onSearch:i.func,onFocus:i.func,onBlur:i.func,onEnter:i.func};export{I as default};
+export { A as default } from './Autocomplete-887cda6a.js';
+import './_rollupPluginBabelHelpers-a52356f6.js';
+import 'react';
+import 'prop-types';
+import './index-ef96775f.js';
+import './debounce-127da66c.js';
+import './isObjectLike-e111475d.js';
+import './_commonjsHelpers-70de2c37.js';
+import '@material-ui/lab';
+import '@material-ui/core';
+import '@material-ui/icons';
+import './createSvgIcon-0d38de2e.js';
+import './defaultTheme-ed7746fe.js';
+import 'react-is';
+import '@material-ui/styles';
+import 'react-dom';
+import './toConsumableArray-dbe8af76.js';
+import './style-inject.es-1f59c1d0.js';
+import './Empty-94a8d8ff.js';

package/lib/components/Avatar.js

@@ -1 +1,53 @@
-import r from"react";import{c as a}from"./index-b2745105.js";import e from"prop-types";import{Avatar as s}from"@material-ui/core";import{s as o}from"./style-inject.es-1f59c1d0.js";o("");var t=function(e){var o=e.className,t=e.shape,c=e.src,i=e.onError;return r.createElement(s,{className:a("avatar",o),variant:t,src:c},r.createElement("img",{src:c,onError:function(){return i()},alt:"test",style:{display:"none"}}))};t.defaultProps={className:void 0,shape:"circular",src:void 0,onError:void 0},t.propTypes={className:e.string,shape:e.oneOf(["circle","circular","rounded","square"]),src:e.string,onError:e.func};export{t as default};
+import React__default from 'react';
+import { c as classNames } from './index-ef96775f.js';
+import PropTypes from 'prop-types';
+import { Avatar as Avatar$1 } from '@material-ui/core';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+
+var css_248z = "";
+styleInject(css_248z);
+
+var Avatar = function Avatar(_ref) {
+  var className = _ref.className,
+    shape = _ref.shape,
+    src = _ref.src,
+    _onError = _ref.onError,
+    _ref$defaultImg = _ref.defaultImg,
+    defaultImg = _ref$defaultImg === void 0 ? '' : _ref$defaultImg;
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Avatar$1, {
+    className: classNames('avatar', className),
+    variant: shape,
+    src: src
+  }, defaultImg), typeof _onError === 'function' && /*#__PURE__*/React__default.createElement("img", {
+    src: src,
+    onError: function onError() {
+      return _onError();
+    },
+    alt: "test",
+    style: {
+      display: 'none'
+    }
+  }));
+};
+Avatar.defaultProps = {
+  className: undefined,
+  shape: 'circular',
+  src: undefined,
+  onError: undefined,
+  defaultImg: undefined
+};
+
+/* Write props detail information and 'npm run updateStory' will help you generate stories's argTypes */
+Avatar.propTypes = {
+  /** Css Name */
+  className: PropTypes.string,
+  /** 形狀 */
+  shape: PropTypes.oneOf(['circle', 'circular', 'rounded', 'square']),
+  /** 圖片來源 */
+  src: PropTypes.string,
+  /** 圖片有錯誤則callback */
+  onError: PropTypes.func,
+  defaultImg: PropTypes.string
+};
+
+export { Avatar as default };

package/lib/components/BackTop.js

@@ -1 +1,109 @@
-import{a as e}from"./_rollupPluginBabelHelpers-ec4e2a53.js";import n,{useState as o,useRef as t,useEffect as i}from"react";import r from"prop-types";import{u as a,b as l,c}from"./index-b2745105.js";import{d as s}from"./debounce-c993109b.js";import{Fade as p,NoSsr as d,Box as m}from"@material-ui/core";import{i as u,a as f,r as b}from"./createSvgIcon-e24792d4.js";import{s as v}from"./style-inject.es-1f59c1d0.js";import"@material-ui/styles";import"react-dom";var x=a(l((function(e,o){Object.defineProperty(o,"__esModule",{value:!0}),o.default=void 0;var t=u(n),i=(0,f(b).default)(t.createElement("path",{d:"M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14l-6-6z"}),"ExpandLessSharp");o.default=i})));v(".backTop {\n  right: 30px;\n  bottom: 50px;\n  position: fixed;\n  z-index: 10;\n  opacity: 0;\n  cursor: pointer; }\n  .backTop__default {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    width: 70px;\n    height: 70px;\n    border-radius: 45px;\n    opacity: 0.8;\n    transition: opacity 0.3s ease-in-out; }\n    .backTop__default:hover {\n      opacity: 1; }\n    .backTop__default .MuiSvgIcon-root {\n      margin-bottom: -3px; }\n  .backTop:hover {\n    opacity: 0.7; }\n\n@media only screen and (max-width: 484px) {\n  .backTop {\n    right: 15px; } }\n");var y=function(r){var a=r.className,l=r.visibilityHeight,u=r.onClick,f=r.children,b=o(!1),v=e(b,2),y=v[0],h=v[1],w=t(s((function(){var e=window.scrollY;h(e>=l)}),100)).current;return i((function(){return window.addEventListener("scroll",(function(){return w()})),function(){window.removeEventListener("scroll",(function(){return w()}))}}),[]),n.createElement(p,{in:y,timeout:500,unmountOnExit:!0},n.createElement("div",{className:c("backTop",a),onClick:function(){window.scrollTo?window.scrollTo({top:0,left:0,behavior:"smooth"}):window.scrollTop=0,u()}},f?n.createElement("div",null,f):n.createElement(d,null,n.createElement(m,{className:"backTop__default",color:"text.primary",bgcolor:"primary.main",borderColor:"text.secondary"},n.createElement(x,null),"Top"))))};y.defaultProps={className:void 0,visibilityHeight:300,onClick:function(){},children:void 0},y.propTypes={className:r.string,visibilityHeight:r.number,onClick:r.func,children:r.node};export{y as default};
+import { a as _slicedToArray } from './_rollupPluginBabelHelpers-a52356f6.js';
+import React__default, { useState, useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { c as classNames } from './index-ef96775f.js';
+import { d as debounce_1 } from './debounce-127da66c.js';
+import { Fade, NoSsr, Box } from '@material-ui/core';
+import { r as requireCreateSvgIcon, i as interopRequireDefault, a as interopRequireWildcard } from './createSvgIcon-0d38de2e.js';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+import './isObjectLike-e111475d.js';
+import './_commonjsHelpers-70de2c37.js';
+import './defaultTheme-ed7746fe.js';
+import 'react-is';
+import '@material-ui/styles';
+import 'react-dom';
+
+var ExpandLessSharp = {};
+
+var _interopRequireDefault = interopRequireDefault.exports;
+
+var _interopRequireWildcard = interopRequireWildcard.exports;
+
+Object.defineProperty(ExpandLessSharp, "__esModule", {
+  value: true
+});
+var default_1 = ExpandLessSharp.default = void 0;
+
+var React = _interopRequireWildcard(React__default);
+
+var _createSvgIcon = _interopRequireDefault(requireCreateSvgIcon());
+
+var _default = (0, _createSvgIcon.default)( /*#__PURE__*/React.createElement("path", {
+  d: "M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14l-6-6z"
+}), 'ExpandLessSharp');
+
+default_1 = ExpandLessSharp.default = _default;
+
+var css_248z = ".backTop {\n  right: 30px;\n  bottom: 50px;\n  position: fixed;\n  z-index: 10;\n  opacity: 0;\n  cursor: pointer;\n}\n.backTop__default {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 70px;\n  height: 70px;\n  border-radius: 45px;\n  opacity: 0.8;\n  transition: opacity 0.3s ease-in-out;\n}\n.backTop__default:hover {\n  opacity: 1;\n}\n.backTop__default .MuiSvgIcon-root {\n  margin-bottom: -3px;\n}\n.backTop:hover {\n  opacity: 0.7;\n}\n\n@media only screen and (max-width: 484px) {\n  .backTop {\n    right: 15px;\n  }\n}";
+styleInject(css_248z);
+
+var scrollToTop = function scrollToTop() {
+  if (window.scrollTo) {
+    window.scrollTo({
+      top: 0,
+      left: 0,
+      behavior: 'smooth'
+    });
+  } else {
+    window.scrollTop = 0;
+  }
+};
+var BackTop = function BackTop(props) {
+  var className = props.className,
+    visibilityHeight = props.visibilityHeight,
+    _onClick = props.onClick,
+    children = props.children;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    show = _useState2[0],
+    setShow = _useState2[1];
+  var scrollDebounce = useRef(debounce_1(function () {
+    var top = window.scrollY;
+    setShow(top >= visibilityHeight);
+  }, 100)).current;
+  useEffect(function () {
+    // const scrollEvent = () => scrollDebounce.current;
+    window.addEventListener('scroll', function () {
+      return scrollDebounce();
+    });
+    return function () {
+      window.removeEventListener('scroll', function () {
+        return scrollDebounce();
+      });
+    };
+  }, []);
+  return /*#__PURE__*/React__default.createElement(Fade, {
+    in: show,
+    timeout: 500,
+    unmountOnExit: true
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: classNames('backTop', className),
+    onClick: function onClick() {
+      scrollToTop();
+      _onClick();
+    }
+  }, children ? /*#__PURE__*/React__default.createElement("div", null, children) : /*#__PURE__*/React__default.createElement(NoSsr, null, /*#__PURE__*/React__default.createElement(Box, {
+    className: "backTop__default",
+    color: "text.primary",
+    bgcolor: "primary.main",
+    borderColor: "text.secondary"
+  }, /*#__PURE__*/React__default.createElement(default_1, null), "Top"))));
+};
+BackTop.defaultProps = {
+  className: undefined,
+  visibilityHeight: 300,
+  onClick: function onClick() {},
+  children: undefined
+};
+BackTop.propTypes = {
+  /** Css Name */
+  className: PropTypes.string,
+  /** 可視返回Icon的高度偵測 */
+  visibilityHeight: PropTypes.number,
+  /** 點擊後的Callback */
+  onClick: PropTypes.func,
+  /** custom */
+  children: PropTypes.node
+};
+
+export { BackTop as default };