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

package/lib/components/Autocomplete-5439ff22.js

@@ -1 +1,333 @@
-import{_ as e,a as n,b as t}from"./_rollupPluginBabelHelpers-fde6d1c6.js";import o,{useCallback as r,useState as a,useRef as l,useEffect as u}from"react";import i from"prop-types";import{s as c,d as p,c as s}from"./vendor-851c6356.js";import{Autocomplete as f}from"@material-ui/lab";import{Chip as d,TextField as m,CircularProgress as b}from"@material-ui/core";import{Close as g,SearchOutlined as h}from"@material-ui/icons";import{E as y}from"./Empty-70f040a9.js";c(".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  cursor: pointer; }\n\n.autocomplete--showSearchIcon .MuiAutocomplete-inputRoot[class*='MuiOutlinedInput-root'] {\n  display: flex;\n  flex-wrap: nowrap;\n  padding: 4px 8px; }\n");var v=function(i){var c=i.options,v=i.defaultValue,I=i.renderAfterDefaultValueChange,A=i.filterable,V=i.loading,E=i.labelInValue,C=i.disabled,x=i.className,w=i.multiple,O=i.freeTyping,T=i.placeholder,_=i.searchIcon,D=i.renderInput,N=i.renderTags,F=i.onChange,S=i.onSearch,j=i.onFocus,R=i.onBlur,B=i.onEnter,M=a(!0),P=n(M,2),k=P[0],L=P[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],te=ee[1],oe=(n=>{let{options:t,placeholder:a,loading:l,searchIcon:u,labelInValue:i,onEnter:c,currentResult:p,setCurrentDefaultValue:s}=n;const f=r((e=>"object"==typeof e?e.value:e),[]),y=r((e=>{const n=(Array.isArray(t)?t:[]).find((n=>f(n)===f(e)));return n?"object"==typeof n?n.label:n:"object"==typeof e?e.label:e}),[t]),v=r((e=>{if(Array.isArray(t)){if(Array.isArray(e))return e.map((e=>t.find((n=>{let{value:t}=n;return e===t||e.value===t}))||e));const n=t.find((n=>{let{value:t}=n;return e===t}));return i?e:n||{label:e,value:e}}return e}),[t,i]),I=r(((n,t)=>n.map(((n,r)=>o.createElement(d,e({label:y(n),deleteIcon:o.createElement(g,null)},t({index:r})))))),[t]),A=r((n=>o.createElement(m,e({},n,{variant:"outlined",placeholder:a,InputProps:{...n.InputProps,endAdornment:o.createElement(o.Fragment,null,l&&o.createElement(b,{className:"autocomplete__icon",color:"inherit",size:20}),u&&o.createElement(h,{className:"autocomplete__icon",onClick:e=>(s({label:p,value:p}),c(e,{label:p,value:p}))}),n.InputProps.endAdornment)}}))),[l,u]);return{getValue:f,getValueFromOptions:v,defaultTag:I,defaultRenderInput:A}})(t({},{options:c,placeholder:T,loading:V,searchIcon:_,labelInValue:E,currentResult:G,onEnter:B,setCurrentDefaultValue:te})),re=oe.getValue,ae=oe.getValueFromOptions,le=oe.defaultTag,ue=oe.defaultRenderInput,ie=l(p((function(e){return S(e)}),500)).current;return u((function(){te("string"==typeof v&&w?{label:J,value:J}:ae(v))}),[JSON.stringify(v)]),u((function(){I&&L(!1)}),[ne]),u((function(){k||L(!0)}),[k]),u((function(){G&&(K(G),ie(G))}),[G]),o.createElement("div",{className:s("autocomplete",{"autocomplete--showSearchIcon":_},x)},k&&o.createElement(f,{className:"autocomplete__component",options:Array.isArray(c)&&(O&&J?[{label:J,value:J}].concat(c):c)||[],defaultValue:ne,disabled:C,multiple:w,filterOptions:function(e,n){var t=n.inputValue,o=void 0===t?"":t;return(Array.isArray(e)?e:[]).filter((function(e){var n=(e||{}).label;return!A||(void 0===n?"":n).toLowerCase().indexOf(o.toLowerCase())>-1}))},onChange:function(e,n){Array.isArray(n)?F(n.map((function(e){return E?e:re(e)}))):n&&F(E?n:re(n))},onInputChange:function(e,n,t){n&&"string"==typeof n&&"input"===t&&Q(n)},onKeyDown:function(e){switch(e.key){case"ArrowDown":case"ArrowUp":Z(!0);break;case"Enter":if(!Y){var n=O&&!w;B(e,n?{label:J,value:J}:void 0),n&&te({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 D&&D(e)||ue(e)},renderTags:function(e,n){return N&&N(e,n)||le(e,n)},popupIcon:null,noOptionsText:o.createElement(y,null),onFocus:j,onBlur:R}))};v.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(){}},v.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{v as A};
+import { _ as _extends, a as _slicedToArray, b as _objectSpread2 } from './_rollupPluginBabelHelpers-fde6d1c6.js';
+import React__default, { useCallback, useState, useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { s as styleInject, d as debounce_1, c as classNames } from './vendor-851c6356.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 { E as Empty } from './Empty-70f040a9.js';
+
+var useAutocomplete = (_ref => {
+  let {
+    options,
+    placeholder,
+    loading,
+    searchIcon,
+    labelInValue,
+    onEnter,
+    currentResult,
+    setCurrentDefaultValue
+  } = _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]);
+
+  /* 若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({
+    label: getLabel(option),
+    deleteIcon: /*#__PURE__*/React__default.createElement(Close, null)
+  }, getTagProps({
+    index
+  })))), [options]);
+  const defaultRenderInput = useCallback(params => /*#__PURE__*/React__default.createElement(TextField, _extends({}, 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 => {
+          setCurrentDefaultValue({
+            label: currentResult,
+            value: currentResult
+          });
+          return onEnter(event, {
+            label: currentResult,
+            value: currentResult
+          });
+        }
+      }), params.InputProps.endAdornment)
+    }
+  })), [loading, searchIcon]);
+  return {
+    getValue,
+    getValueFromOptions,
+    defaultTag,
+    defaultRenderInput
+  };
+});
+
+var css_248z = ".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  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;
+  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
+    })),
+    getValue = _useAutocomplete.getValue,
+    getValueFromOptions = _useAutocomplete.getValueFromOptions,
+    defaultTag = _useAutocomplete.defaultTag,
+    defaultRenderInput = _useAutocomplete.defaultRenderInput;
+  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) {
+      return _renderTags && _renderTags(tagValue, getTagProps) || defaultTag(tagValue, 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() {}
+};
+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
+};
+
+export { Autocomplete as A };

package/lib/components/Autocomplete.js

@@ -1 +1,12 @@
-export{A as default}from"./Autocomplete-5439ff22.js";import"./_rollupPluginBabelHelpers-fde6d1c6.js";import"react";import"prop-types";import"./vendor-851c6356.js";import"react-is";import"@material-ui/styles";import"react-dom";import"@material-ui/lab";import"@material-ui/core";import"@material-ui/icons";import"./Empty-70f040a9.js";
+export { A as default } from './Autocomplete-5439ff22.js';
+import './_rollupPluginBabelHelpers-fde6d1c6.js';
+import 'react';
+import 'prop-types';
+import './vendor-851c6356.js';
+import 'react-is';
+import '@material-ui/styles';
+import 'react-dom';
+import '@material-ui/lab';
+import '@material-ui/core';
+import '@material-ui/icons';
+import './Empty-70f040a9.js';

package/lib/components/Avatar.js

@@ -1 +1,51 @@
-import r from"react";import{s as a,c as e}from"./vendor-851c6356.js";import o from"prop-types";import{Avatar as s}from"@material-ui/core";import"react-is";import"@material-ui/styles";import"react-dom";a("");var t=function(a){var o=a.className,t=a.shape,c=a.src,i=a.onError;return r.createElement(s,{className:e("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:o.string,shape:o.oneOf(["circle","circular","rounded","square"]),src:o.string,onError:o.func};export{t as default};
+import React__default from 'react';
+import { s as styleInject, c as classNames } from './vendor-851c6356.js';
+import PropTypes from 'prop-types';
+import { Avatar as Avatar$1 } from '@material-ui/core';
+import 'react-is';
+import '@material-ui/styles';
+import 'react-dom';
+
+var css_248z = "";
+styleInject(css_248z);
+
+var Avatar = function Avatar(_ref) {
+  var className = _ref.className,
+    shape = _ref.shape,
+    src = _ref.src,
+    _onError = _ref.onError;
+  return /*#__PURE__*/React__default.createElement(Avatar$1, {
+    className: classNames('avatar', className),
+    variant: shape,
+    src: src
+  }, /*#__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
+};
+
+/* 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
+};
+
+export { Avatar as default };

package/lib/components/BackTop.js

@@ -1 +1,82 @@
-import{a as n}from"./_rollupPluginBabelHelpers-fde6d1c6.js";import o,{useState as e,useRef as t,useEffect as i}from"react";import r from"prop-types";import{s as a,d as c,c as l,a as s}from"./vendor-851c6356.js";import{Fade as p,NoSsr as m,Box as d}from"@material-ui/core";import"react-is";import"@material-ui/styles";import"react-dom";a(".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 u=function(r){var a=r.className,u=r.visibilityHeight,f=r.onClick,b=r.children,v=e(!1),x=n(v,2),y=x[0],h=x[1],w=t(c((function(){var n=window.scrollY;h(n>=u)}),100)).current;return i((function(){return window.addEventListener("scroll",(function(){return w()})),function(){window.removeEventListener("scroll",(function(){return w()}))}}),[]),o.createElement(p,{in:y,timeout:500,unmountOnExit:!0},o.createElement("div",{className:l("backTop",a),onClick:function(){window.scrollTo?window.scrollTo({top:0,left:0,behavior:"smooth"}):window.scrollTop=0,f()}},b?o.createElement("div",null,b):o.createElement(m,null,o.createElement(d,{className:"backTop__default",color:"text.primary",bgcolor:"primary.main",borderColor:"text.secondary"},o.createElement(s,null),"Top"))))};u.defaultProps={className:void 0,visibilityHeight:300,onClick:function(){},children:void 0},u.propTypes={className:r.string,visibilityHeight:r.number,onClick:r.func,children:r.node};export{u as default};
+import { a as _slicedToArray } from './_rollupPluginBabelHelpers-fde6d1c6.js';
+import React__default, { useState, useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { s as styleInject, d as debounce_1, c as classNames, a as default_1 } from './vendor-851c6356.js';
+import { Fade, NoSsr, Box } from '@material-ui/core';
+import 'react-is';
+import '@material-ui/styles';
+import 'react-dom';
+
+var css_248z = ".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";
+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 };

package/lib/components/BarChart.js

@@ -1 +1,132 @@
-import t,{useEffect as r}from"react";import{s as a,c as e,k as n,w as o,A as c,B as i,C as l,D as s}from"./vendor-851c6356.js";import u from"prop-types";import"react-is";import"@material-ui/styles";import"react-dom";a("#barChart {\n  width: 100%; }\n");var d=function(a){var u=a.className,d=a.barChartData,f=a.setSelectedYear,m=a.fontColor,p=a.barColor,h=a.width,y=a.scaleTicks;if(!d||0===d.length)return null;var b=100,g=30,C=90,v=35,w=window.innerWidth<767?2*window.innerWidth-b-C:700-b-C;function k(){var t=document.getElementById("barChart__block");0===t.scrollLeft&&document.getElementById("yaxis").setAttribute("transform","translate(0, 0 )"),t.scrollLeft>0&&document.getElementById("yaxis").setAttribute("transform","translate(".concat(t.scrollLeft,", 0)"))}return r((function(){d.length>0&&function(t){var r=0;t.forEach((function(t){parseInt(t.count,10)>r&&(r=parseInt(t.count,10))})),n("div#barChart").html("");var a=n("#barChart").append("svg").attr("width",h+v+g).attr("height",w+b+C).append("g").attr("transform","translate(".concat(v,",").concat(b,")")),e=o().range([0,h]).domain(t.map((function(t){return t.year}))).padding(.2);a.append("g").attr("id","xaxis").attr("transform","translate(0,".concat(w,")")).call(c(e)).style("color",m).selectAll("text").attr("transform","translate(-10,0)rotate(-45)").style("text-anchor","end").style("color",m).style("font-size",16).style("cursor","pointer").on("click",(function(t){f(t)}));var u=i().domain([0,r]).range([w,0]);a.selectAll("mybar").data(t).enter().append("rect").attr("x",(function(t){return e(t.year)})).attr("width",e.bandwidth()).attr("fill",p).attr("title",(function(t){return t.count})).attr("height",(function(){return w-u(0)})).attr("y",(function(){return u(0)})).style("cursor","pointer").on("click",(function(t){return f(t.year)})).append("svg:title").text((function(t){return"數量:".concat(t.count)})),a.selectAll("rect").transition().duration(800).attr("y",(function(t){return u(t.count)})).attr("height",(function(t){return w-u(t.count)})).delay((function(t,r){return 10*r})),a.append("g").call(l(u).tickValues(s(u.domain()[0],u.domain()[1]+1,y)).tickFormat((function(t){return Math.round(t)}))).attr("id","yaxis").style("color",m).style("font-size",15)}(d),document.getElementById("barChart__block").addEventListener("scroll",k)}),[d]),t.createElement("div",{id:"barChart",className:e("barChart",u)})};d.defaultProps={className:void 0,barChartData:[],setSelectedYear:function(){return null},fontColor:"#000",barColor:"#69b3a2",width:2e3,scaleTicks:1},d.propTypes={className:u.string,barChartData:u.arrayOf(u.any),setSelectedYear:u.func,fontColor:u.string,barColor:u.string,width:u.number,scaleTicks:u.number};export{d as default};
+import React__default, { useEffect } from 'react';
+import { s as styleInject, c as classNames, k as d3Select, w as band, A as axisBottom, B as linear, C as axisLeft, D as sequence } from './vendor-851c6356.js';
+import PropTypes from 'prop-types';
+import 'react-is';
+import '@material-ui/styles';
+import 'react-dom';
+
+var css_248z = "#barChart {\n  width: 100%; }\n";
+styleInject(css_248z);
+
+var BarChart = function BarChart(_ref) {
+  var className = _ref.className,
+    barChartData = _ref.barChartData,
+    setSelectedYear = _ref.setSelectedYear,
+    fontColor = _ref.fontColor,
+    barColor = _ref.barColor,
+    width = _ref.width,
+    scaleTicks = _ref.scaleTicks;
+  if (!barChartData || barChartData.length === 0) {
+    return null;
+  }
+  // set the dimensions and margins of the graph
+  var margin = {
+    top: 100,
+    right: 30,
+    bottom: 90,
+    left: 35
+  };
+  var height = window.innerWidth < 767 ? window.innerWidth * 2 - margin.top - margin.bottom : 700 - margin.top - margin.bottom;
+
+  // Parse the Data
+  var readData = function readData(data) {
+    var maxValue = 0;
+    data.forEach(function (item) {
+      if (parseInt(item.count, 10) > maxValue) {
+        maxValue = parseInt(item.count, 10);
+      }
+    });
+    d3Select('div#barChart').html('');
+    var svg = d3Select('#barChart').append('svg').attr('width', width + margin.left + margin.right).attr('height', height + margin.top + margin.bottom).append('g').attr('transform', "translate(".concat(margin.left, ",").concat(margin.top, ")"));
+    // X axis
+    var x = band().range([0, width]).domain(data.map(function (d) {
+      return d.year;
+    })).padding(0.2);
+    svg.append('g').attr('id', 'xaxis').attr('transform', "translate(0,".concat(height, ")")).call(axisBottom(x)).style('color', fontColor).selectAll('text').attr('transform', 'translate(-10,0)rotate(-45)').style('text-anchor', 'end').style('color', fontColor).style('font-size', 16).style('cursor', 'pointer').on('click', function (d) {
+      setSelectedYear(d);
+    });
+
+    // Add Y axis
+    var y = linear().domain([0, maxValue]).range([height, 0]);
+
+    // Bars
+    svg.selectAll('mybar').data(data).enter().append('rect').attr('x', function (d) {
+      return x(d.year);
+    }).attr('width', x.bandwidth()).attr('fill', barColor).attr('title', function (d) {
+      return d.count;
+    })
+    // no bar at the beginning thus:
+    .attr('height', function () {
+      return height - y(0);
+    }) // always equal to 0
+    .attr('y', function () {
+      return y(0);
+    }).style('cursor', 'pointer').on('click', function (d) {
+      return setSelectedYear(d.year);
+    }).append('svg:title').text(function (d) {
+      return "\u6578\u91CF:".concat(d.count);
+    });
+
+    // Animation
+    svg.selectAll('rect').transition().duration(800).attr('y', function (d) {
+      return y(d.count);
+    }).attr('height', function (d) {
+      return height - y(d.count);
+    }).delay(function (d, i) {
+      return i * 10;
+    });
+    svg.append('g').call(axisLeft(y).tickValues(sequence(y.domain()[0], y.domain()[1] + 1, scaleTicks)).tickFormat(function (d) {
+      return Math.round(d);
+    })).attr('id', 'yaxis').style('color', fontColor).style('font-size', 15);
+  };
+  function shiftYaxis() {
+    var element = document.getElementById('barChart__block');
+    if (element.scrollLeft === 0) {
+      document.getElementById('yaxis').setAttribute('transform', 'translate(0, 0 )');
+    }
+    if (element.scrollLeft > 0) {
+      document.getElementById('yaxis').setAttribute('transform', "translate(".concat(element.scrollLeft, ", 0)"));
+    }
+  }
+  useEffect(function () {
+    if (barChartData.length > 0) {
+      readData(barChartData);
+    }
+    document.getElementById('barChart__block').addEventListener('scroll', shiftYaxis);
+  }, [barChartData]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    id: "barChart",
+    className: classNames('barChart', className)
+  });
+};
+BarChart.defaultProps = {
+  className: undefined,
+  barChartData: [],
+  setSelectedYear: function setSelectedYear() {
+    return null;
+  },
+  fontColor: '#000',
+  barColor: '#69b3a2',
+  width: 2000,
+  scaleTicks: 1
+};
+
+/* Write props detail information and 'npm run updateStory' will help you generate stories's argTypes */
+BarChart.propTypes = {
+  /** Css Name */
+  className: PropTypes.string,
+  /** 資料來源 */
+  barChartData: PropTypes.arrayOf(PropTypes.any),
+  /** 設定點選年分 */
+  setSelectedYear: PropTypes.func,
+  /** X、Y尺度字的顏色 */
+  fontColor: PropTypes.string,
+  /** 長條圖的顏色 */
+  barColor: PropTypes.string,
+  /** 圖表的寬度，影響bar的粗度 */
+  width: PropTypes.number,
+  /** 刻度的級距，以一個刻度相差多少 */
+  scaleTicks: PropTypes.number
+};
+
+export { BarChart as default };