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

package/lib/components/ContactModal-a59bc808.js

@@ -1,924 +0,0 @@
-import { _ as _extends, a as _slicedToArray, b as _objectSpread2, e as _defineProperty, f as _asyncToGenerator, g as _regeneratorRuntime } from './_rollupPluginBabelHelpers-fde6d1c6.js';
-import React__default, { useState, useEffect, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import { G as moment, J as JSZip, s as styleInject, H as GoogleLogin, I as FacebookLogin, K as default_1, L as default_1$1, M as Field, c as classNames, N as ErrorMessage, O as useFormik, P as FormikProvider } from './vendor-851c6356.js';
-import axios from 'axios';
-import { M as Modal } from './Modal-a7591b98.js';
-import { Input, Button, IconButton, Box, Typography, FormControl, RadioGroup, FormControlLabel, Radio, TextField, TextareaAutosize } from '@material-ui/core';
-import { S as Select } from './Select-98a8e973.js';
-import { getIntl } from './globalConfig';
-
-// const sendMail = {
-// 	from: "orient.cc.noreply@gmail.com",
-// 	to: email,
-// 	subject: `ATC_${card_id}`+" card status has been changed (Orient-CC)",
-// 	text: context,
-// };
-//
-// apiUrl: "https://api.daoyidh.com/mail"
-const sendEmail = function (sendMail, apiUrl, onSuccess) {
-  let timeout = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 5000;
-  // timeout
-  axios.defaults.timeout = timeout;
-  try {
-    // axios api
-    return axios.post(apiUrl, {
-      sendMail
-    }).then(res => onSuccess({
-      state: res && res.status === 200
-    })).catch(err => {
-      console.error('api:axios:catch:error: ', err.message);
-      return {
-        state: false,
-        error: err.message
-      };
-    });
-  } catch (err) {
-    console.error('api:axios:try:catch:error: ', err.message);
-    return {
-      state: false,
-      error: err.message
-    };
-  }
-};
-
-const EMAIL_TYPE = {
-  PROVIDER: 'DATA_PROVIDER',
-  PROBLEM: 'PROBLEM'
-};
-const contactTemplate = _ref => {
-  let {
-    formatMessage,
-    formType
-  } = _ref;
-  const headerColumn = [
-  // 主旨
-  {
-    name: 'subject',
-    type: 'radio',
-    label: formatMessage({
-      id: 'common.form.subject'
-    }),
-    options: [{
-      label: formatMessage({
-        id: 'common.has.problem'
-      }),
-      value: EMAIL_TYPE.PROBLEM,
-      desc: formatMessage({
-        id: 'common.has.problem.hint'
-      })
-    }, {
-      label: formatMessage({
-        id: 'common.form.dataProvide'
-      }),
-      value: EMAIL_TYPE.PROVIDER,
-      desc: formatMessage({
-        id: 'common.form.dataProvide.hint'
-      })
-    }],
-    required: true,
-    initialValue: formType
-  },
-  // 姓名
-  {
-    name: 'name',
-    type: 'input',
-    label: formatMessage({
-      id: 'common.form.name'
-    }),
-    required: true
-  },
-  // 電話
-  {
-    name: 'phone',
-    type: 'input',
-    label: formatMessage({
-      id: 'common.form.phone'
-    })
-  },
-  // e-mail
-  {
-    name: 'email',
-    type: 'email',
-    label: 'e-mail',
-    required: true
-  },
-  // 年齡
-  {
-    name: 'age',
-    type: 'select',
-    label: formatMessage({
-      id: 'common.form.age'
-    }),
-    options: ['0-9', '10-19', '20-29', '30-39', '40-49', '50-59', '60-69', '70-79', '80-89', '90-99']
-  },
-  // 職業
-  {
-    name: 'job',
-    type: 'input',
-    label: formatMessage({
-      id: 'common.form.job'
-    })
-  }];
-
-  // 資料提供
-  const dataProvider = [
-  // 資料名稱
-  {
-    name: 'dataName',
-    type: 'input',
-    label: formatMessage({
-      id: 'common.form.dataname'
-    }),
-    placeholder: formatMessage({
-      id: 'common.form.dataname.placeholder'
-    })
-  },
-  // 作者
-  {
-    name: 'author',
-    type: 'input',
-    label: formatMessage({
-      id: 'common.form.author'
-    })
-  },
-  // 日期
-  {
-    name: 'date',
-    type: 'datePicker',
-    label: formatMessage({
-      id: 'common.form.datadate'
-    }),
-    initialValue: moment().format('yyyy-MM-DD')
-  },
-  // 提供者名稱
-  {
-    name: 'offer',
-    type: 'input',
-    label: formatMessage({
-      id: 'common.form.providername'
-    }),
-    placeholder: formatMessage({
-      id: 'common.form.provider.notice'
-    })
-  }];
-  const footerColumn = [
-  // 附件上傳
-  {
-    name: 'files',
-    type: 'upload',
-    label: formatMessage({
-      id: 'common.form.attachment'
-    }),
-    hint: formatMessage({
-      id: 'common.form.attachment.hint'
-    })
-  },
-  // 內容
-  {
-    name: 'message',
-    type: 'textarea',
-    label: formatMessage({
-      id: 'common.content'
-    })
-  },
-  // 驗證碼
-  {
-    name: 'vcode',
-    type: 'vcode',
-    label: formatMessage({
-      id: 'common.form.code'
-    }),
-    initialValue: false,
-    required: true
-  }];
-  return headerColumn.concat(formType === EMAIL_TYPE.PROVIDER ? dataProvider : []).concat(footerColumn);
-};
-const zipFiles = files => new Promise((resolve, reject) => {
-  const zip = new JSZip();
-  for (let i = 0; i < files.length; i += 1) {
-    const file = files[i];
-    zip.file(file.name, file);
-  }
-  zip.generateAsync({
-    type: 'base64'
-  }).then(resolve).catch(reject);
-});
-
-// eslint-disable-next-line no-nested-ternary
-const convert = v => String.fromCharCode(v > 57 && v < 84 ? v + 7 : v < 57 ? v : v + 13);
-const getRandom = (max, min, num) => {
-  // eslint-disable-next-line no-bitwise
-  const asciiNum = ~~(Math.random() * (max - min + 1) + min);
-  if (!num) {
-    return asciiNum;
-  }
-  const arr = [];
-  for (let i = 0; i < num; i += 1) {
-    arr.push(getRandom(max, min));
-  }
-  return arr;
-};
-const canvas = () => {
-  const canvasImg = document.getElementById('bgi');
-  const ctx = canvasImg.getContext('2d');
-  ctx.strokeStyle = `rgb(${getRandom(100, 10, 3).toString()})`;
-  for (let i = 0; i < 7; i += 1) {
-    ctx.lineTo(getRandom(200, 0), getRandom(200, 10));
-    ctx.moveTo(getRandom(200, 0), getRandom(200, 0));
-    ctx.stroke();
-  }
-};
-const getConfig = () => ({
-  data: getRandom(109, 48, 4),
-  rotate: getRandom(75, -75, 4),
-  fz: getRandom(24, 30, 4),
-  color: [getRandom(100, 255, 3), getRandom(100, 255, 4), getRandom(100, 255, 3), getRandom(100, 255, 3)]
-});
-
-var css_248z$2 = ".vcode {\n  display: block;\n  align-items: center; }\n  .vcode__image {\n    margin-top: 10px;\n    background: rgba(0, 0, 0, 0.8);\n    width: 160px;\n    overflow: hidden;\n    height: 50px;\n    text-align: center;\n    position: relative; }\n    .vcode__image:hover .vcode__mask {\n      opacity: 0.8; }\n    .vcode__image__mask {\n      position: absolute;\n      width: 100%;\n      top: 0;\n      line-height: 50px;\n      background-color: rgba(0, 0, 0, 0.95);\n      opacity: 0;\n      z-index: 1;\n      transition: opacity 0.3s ease-in-out;\n      cursor: pointer; }\n    .vcode__image__itemStr {\n      float: left;\n      margin-left: 20px; }\n\n#bgi {\n  top: 0;\n  left: 0;\n  position: absolute;\n  width: 100%;\n  height: 100%; }\n";
-styleInject(css_248z$2);
-
-const VCode = _ref => {
-  let {
-    visible,
-    placeholder,
-    onChange,
-    formatMessage
-  } = _ref;
-  const [codeConfig, setCodeConfig] = useState(getConfig());
-  const {
-    data,
-    rotate,
-    fz,
-    color
-  } = codeConfig;
-  const refresh = () => {
-    canvas();
-    setCodeConfig(getConfig());
-  };
-  useEffect(() => {
-    refresh();
-  }, [visible]);
-  const vcodeNumber = `${convert(data[0])}${convert(data[1])}${convert(data[2])}${convert(data[3])}`;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "vcode"
-  }, /*#__PURE__*/React__default.createElement(Input, {
-    placeholder: placeholder,
-    onChange: e => onChange(e.target.value === vcodeNumber)
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "vcode__image"
-  }, /*#__PURE__*/React__default.createElement("canvas", {
-    id: "bgi",
-    width: "200",
-    height: "200"
-  }), data.map((v, i) => /*#__PURE__*/React__default.createElement("div", {
-    key: i.toString(),
-    className: "vcode__image__itemStr",
-    style: {
-      transform: `rotate(${rotate[i]}deg)`,
-      fontSize: `${fz[i]}px`,
-      color: `rgb(${color[i].toString()})`
-    }
-  }, convert(v))), /*#__PURE__*/React__default.createElement("div", {
-    className: "vcode__image__mask",
-    onClick: refresh
-  }, formatMessage({
-    id: 'common.click.refresh'
-  }))));
-};
-VCode.defaultProps = {
-  visible: false,
-  placeholder: undefined,
-  onChange: () => {},
-  formatMessage: () => {}
-};
-VCode.propTypes = {
-  visible: PropTypes.bool,
-  placeholder: PropTypes.string,
-  onChange: PropTypes.func,
-  formatMessage: PropTypes.func
-};
-
-var css_248z$1 = ".emailInput__loginSDK {\n  display: flex;\n  align-items: center; }\n  .emailInput__loginSDK__google {\n    padding: 6px 10px 4px !important;\n    border: 1px solid black !important; }\n    .emailInput__loginSDK__google div {\n      padding: 0 !important; }\n    .emailInput__loginSDK__google span {\n      padding: 0 !important; }\n  .emailInput__loginSDK__fb {\n    padding: 9px 10px !important;\n    border-radius: 3px;\n    margin-left: 10px;\n    background-color: #4c69ba;\n    border: 1px solid black;\n    color: white; }\n    .emailInput__loginSDK__fb i {\n      margin-right: 10px; }\n\n.emailInput__operator {\n  margin-top: 10px; }\n";
-styleInject(css_248z$1);
-
-const EmailInput = _ref => {
-  let {
-    value,
-    placeholder,
-    onChange,
-    onNotify
-  } = _ref;
-  const [init, setInit] = useState(false); // google login 在init時會先failed
-  useMemo(() => () => setTimeout(() => setInit(true), 1000), []); // 故延遲一秒後再給google call(最非最佳解 可優化)
-
-  const handleGoogleLogin = response => {
-    if (response && response.profileObj && response.profileObj.email) {
-      // setEmail(response.profileObj.email);
-      onChange(response.profileObj.email);
-    } else if (init) {
-      onNotify({
-        type: 'error',
-        message: 'common.action.failed'
-      });
-    }
-  };
-  const handleFBLogin = response => {
-    if (response && response.email) {
-      // setEmail(response.email);
-      onChange(response.email);
-    } else {
-      onNotify({
-        type: 'error',
-        message: 'common.action.failed'
-      });
-    }
-  };
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "emailInput"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "emailInput__loginSDK"
-  }, /*#__PURE__*/React__default.createElement(GoogleLogin, {
-    clientId: "593080210200-cfmvk6ikbfv0thudsidgi4n63stuqrrg.apps.googleusercontent.com",
-    buttonText: "Google",
-    onSuccess: handleGoogleLogin,
-    onFailure: handleGoogleLogin,
-    className: "emailInput__loginSDK__google",
-    cookiePolicy: "single_host_origin"
-  }), /*#__PURE__*/React__default.createElement(FacebookLogin, {
-    appId: "1391837967649911",
-    autoLoad: false,
-    fields: "name,email,picture",
-    callback: handleFBLogin,
-    icon: "fa-facebook",
-    cssClass: "emailInput__loginSDK__fb",
-    size: "small",
-    textButton: "Facebook"
-  })), /*#__PURE__*/React__default.createElement("div", {
-    className: "emailInput__operator"
-  }, /*#__PURE__*/React__default.createElement(Input, {
-    value: value,
-    placeholder: placeholder,
-    onChange: e => onChange(e.target.value)
-  })));
-};
-EmailInput.defaultProps = {
-  value: undefined,
-  placeholder: undefined,
-  onChange: () => {},
-  onNotify: () => {}
-};
-EmailInput.propTypes = {
-  value: PropTypes.string,
-  placeholder: PropTypes.string,
-  onChange: PropTypes.func,
-  onNotify: PropTypes.func
-};
-
-const Upload = _ref => {
-  let {
-    onChange
-  } = _ref;
-  const [selectedFiles, setSelectedFiles] = useState([]);
-  const handleFileInput = e => {
-    setSelectedFiles([...selectedFiles, ...e.target.files]);
-    onChange([...selectedFiles, ...e.target.files]);
-  };
-  const handleRemoveFile = index => {
-    const newFiles = [...selectedFiles];
-    newFiles.splice(index, 1);
-    setSelectedFiles(newFiles);
-    onChange(newFiles);
-  };
-  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Button, {
-    variant: "outlined",
-    color: "primary"
-  }, /*#__PURE__*/React__default.createElement("label", {
-    htmlFor: "fileInput",
-    style: {
-      display: 'flex',
-      cursor: 'pointer'
-    }
-  }, /*#__PURE__*/React__default.createElement(default_1, null), "Upload Files", /*#__PURE__*/React__default.createElement("input", {
-    id: "fileInput",
-    type: "file",
-    multiple: true,
-    onChange: handleFileInput,
-    style: {
-      display: 'none'
-    }
-  }))), selectedFiles.length > 0 && /*#__PURE__*/React__default.createElement("div", null, selectedFiles.map((file, index) => /*#__PURE__*/React__default.createElement("div", {
-    key: index.toString()
-  }, /*#__PURE__*/React__default.createElement("span", null, file.name), /*#__PURE__*/React__default.createElement(IconButton, {
-    "aria-label": "delete",
-    onClick: () => handleRemoveFile(index)
-  }, /*#__PURE__*/React__default.createElement(default_1$1, null))))));
-};
-Upload.propTypes = {
-  onChange: PropTypes.func.isRequired
-};
-
-var css_248z = ".formItem {\n  width: 100%;\n  margin-bottom: 16px; }\n  .formItem:last-child {\n    margin-bottom: initial; }\n  .formItem__title {\n    display: flex;\n    font-size: 16px;\n    font-weight: bold; }\n    .formItem__title__star {\n      margin-left: 3px;\n      color: #d93333; }\n  .formItem__operator {\n    margin: 2px 0;\n    font-size: 14px; }\n    .formItem__operator__radio__desc {\n      margin-left: 35px !important; }\n    .formItem__operator--unsupport {\n      border: 1px solid #d93333;\n      background: pink;\n      color: black;\n      padding: 5px 10px; }\n  .formItem__error {\n    color: #d93333;\n    font-weight: bold; }\n  .formItem textarea {\n    border: 1px solid #d9d9d9;\n    border-radius: 3px;\n    width: 100%;\n    background: transparent;\n    padding: 6px 10px; }\n  .formItem ::-webkit-calendar-picker-indicator {\n    filter: invert(1); }\n";
-styleInject(css_248z);
-
-const FormItem = _ref => {
-  let {
-    name,
-    type,
-    options,
-    label,
-    hint,
-    placeholder,
-    required,
-    setFieldValue,
-    formatMessage,
-    onNotify
-  } = _ref;
-  const currentPlaceholder = placeholder || `${formatMessage({
-    id: 'common.enter'
-  })} ${label}`;
-  const render = field => {
-    let component;
-    switch (type) {
-      case 'input':
-        component = /*#__PURE__*/React__default.createElement(Input, _extends({}, field, {
-          placeholder: currentPlaceholder
-        }));
-        break;
-      case 'textarea':
-        component = /*#__PURE__*/React__default.createElement(TextareaAutosize, _extends({}, field, {
-          minRows: 3,
-          placeholder: currentPlaceholder
-        }));
-        break;
-      case 'select':
-        component = /*#__PURE__*/React__default.createElement(Select, _extends({}, field, {
-          options: options,
-          placeholder: currentPlaceholder
-        }));
-        break;
-      case 'datePicker':
-        component = /*#__PURE__*/React__default.createElement(TextField, _extends({}, field, {
-          type: "date",
-          onChange: event => setFieldValue(field.name, event.target.value)
-        }));
-        break;
-      case 'email':
-        component = /*#__PURE__*/React__default.createElement(EmailInput, _extends({}, field, {
-          placeholder: currentPlaceholder,
-          onChange: email => setFieldValue(field.name, email),
-          onNotify: onNotify
-        }));
-        break;
-      case 'radio':
-        component = /*#__PURE__*/React__default.createElement(FormControl, {
-          component: "fieldset"
-        }, /*#__PURE__*/React__default.createElement(RadioGroup, field, options.map(option => /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(FormControlLabel, {
-          key: option.value,
-          value: option.value,
-          control: /*#__PURE__*/React__default.createElement(Radio, null),
-          label: option.label
-        }), option && option.desc && /*#__PURE__*/React__default.createElement(Typography, {
-          variant: "caption",
-          className: "formItem__operator__radio__desc"
-        }, option.desc)))));
-        break;
-      case 'upload':
-        component = /*#__PURE__*/React__default.createElement(Upload, _extends({}, field, {
-          onChange: files => setFieldValue(field.name, files)
-        }));
-        break;
-      case 'vcode':
-        component = /*#__PURE__*/React__default.createElement(VCode, {
-          placeholder: currentPlaceholder,
-          onChange: pass => setFieldValue(field.name, pass),
-          formatMessage: formatMessage
-        });
-        break;
-      default:
-        component = null;
-    }
-    return component;
-  };
-  return /*#__PURE__*/React__default.createElement(Field, {
-    name: name,
-    render: _ref2 => {
-      let {
-        field
-      } = _ref2;
-      const component = render(field);
-      return /*#__PURE__*/React__default.createElement("div", {
-        id: `form-${name}`,
-        className: "formItem"
-      }, label && /*#__PURE__*/React__default.createElement("div", {
-        className: "formItem__title"
-      }, label, required && /*#__PURE__*/React__default.createElement("div", {
-        className: "formItem__title__star"
-      }, "*")), hint && /*#__PURE__*/React__default.createElement(Box, {
-        my: 1
-      }, /*#__PURE__*/React__default.createElement(Typography, {
-        variant: "body2"
-      }, hint)), /*#__PURE__*/React__default.createElement("div", {
-        className: classNames('formItem__operator', {
-          'formItem__operator--unsupport': !component
-        })
-      }, component || 'Check component type is support on FormItem'), /*#__PURE__*/React__default.createElement(ErrorMessage, {
-        className: "formItem__error",
-        name: name,
-        component: "div"
-      }));
-    }
-  });
-};
-FormItem.defaultProps = {
-  label: undefined,
-  placeholder: undefined,
-  hint: undefined,
-  options: [],
-  required: false,
-  setFieldValue: () => {},
-  formatMessage: () => {},
-  onNotify: () => {}
-};
-FormItem.propTypes = {
-  name: PropTypes.string.isRequired,
-  type: PropTypes.string.isRequired,
-  label: PropTypes.string,
-  hint: PropTypes.string,
-  options: PropTypes.arrayOf(PropTypes.any),
-  placeholder: PropTypes.string,
-  required: PropTypes.bool,
-  setFieldValue: PropTypes.func,
-  formatMessage: PropTypes.func,
-  onNotify: PropTypes.func
-};
-
-/* 資料提供 - 郵件內容 */
-const dataProvideMail = _ref => {
-  let {
-    formatMessage,
-    values
-  } = _ref;
-  const body = [];
-  Object.keys(values).forEach(key => {
-    switch (key) {
-      case 'subject':
-        {
-          const title = formatMessage({
-            id: 'common.form.dataProvide'
-          });
-          if (values[key]) body.push(`${title}-${formatMessage({
-            id: 'header.title'
-          })}`);
-          break;
-        }
-      case 'name':
-        if (values[key]) body.push(`${formatMessage({
-          id: 'common.form.name'
-        })}:${values[key]}`);
-        break;
-      case 'email':
-        if (values[key]) body.push(`e-mail:${values[key]}`);
-        break;
-      case 'phone':
-        if (values[key]) body.push(`${formatMessage({
-          id: 'common.form.phone'
-        })}:${values[key]}`);
-        break;
-      case 'age':
-        if (values[key]) body.push(`${formatMessage({
-          id: 'common.form.age'
-        })}:${values[key]}`);
-        break;
-      case 'job':
-        if (values[key]) body.push(`${formatMessage({
-          id: 'common.form.job'
-        })}:${values[key]}`);
-        break;
-      case 'dataName':
-        if (values[key]) body.push(`${formatMessage({
-          id: 'common.form.dataname'
-        })}:${values[key]}`);
-        break;
-      case 'author':
-        if (values[key]) body.push(`${formatMessage({
-          id: 'common.form.author'
-        })}:${values[key]}`);
-        break;
-      case 'date':
-        if (values[key]) body.push(`${formatMessage({
-          id: 'common.form.datadate'
-        })}:${values[key]}`);
-        break;
-      case 'offer':
-        if (values[key]) body.push(`${formatMessage({
-          id: 'common.form.providername'
-        })}:${values[key]}`);
-        break;
-      case 'message':
-        if (values[key]) body.push(`${formatMessage({
-          id: 'common.content'
-        })}:${values[key]}`);
-        break;
-    }
-  });
-  return body.join('<br />');
-};
-
-/* 我有問題 - 郵件內容 */
-const problemMail = _ref2 => {
-  let {
-    formatMessage,
-    values
-  } = _ref2;
-  const body = [];
-  Object.keys(values).forEach(key => {
-    switch (key) {
-      case 'subject':
-        {
-          const title = formatMessage({
-            id: 'common.has.problem'
-          });
-          if (values[key]) body.push(`${title}-${formatMessage({
-            id: 'header.title'
-          })}`);
-          break;
-        }
-      case 'name':
-        if (values[key]) body.push(`${formatMessage({
-          id: 'common.form.name'
-        })}:${values[key]}`);
-        break;
-      case 'email':
-        if (values[key]) body.push(`e-mail:${values[key]}`);
-        break;
-      case 'phone':
-        if (values[key]) body.push(`${formatMessage({
-          id: 'common.form.phone'
-        })}:${values[key]}`);
-        break;
-      case 'age':
-        if (values[key]) body.push(`${formatMessage({
-          id: 'common.form.age'
-        })}:${values[key]}`);
-        break;
-      case 'job':
-        if (values[key]) body.push(`${formatMessage({
-          id: 'common.form.job'
-        })}:${values[key]}`);
-        break;
-      case 'message':
-        if (values[key]) body.push(`${formatMessage({
-          id: 'common.content'
-        })}:${values[key]}`);
-        break;
-    }
-  });
-  return body.join('<br />');
-};
-
-var errorId;
-var ContactModal = function ContactModal(_ref) {
-  var type = _ref.type,
-    mailto = _ref.mailto,
-    open = _ref.open,
-    emailAPI = _ref.emailAPI,
-    setOpen = _ref.setOpen,
-    onNotify = _ref.onNotify;
-  var _getIntl = getIntl(),
-    formatMessage = _getIntl.formatMessage;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    submitting = _useState2[0],
-    setSubmitting = _useState2[1];
-  var _useState3 = useState(type),
-    _useState4 = _slicedToArray(_useState3, 2),
-    formType = _useState4[0],
-    setFormType = _useState4[1];
-
-  /* 建立表單設定檔 */
-  var template = contactTemplate({
-    formatMessage: formatMessage,
-    formType: formType
-  });
-
-  /* 表單控制元件 */
-  var formik = useFormik({
-    initialValues: template.reduce(function (obj, item) {
-      return _objectSpread2(_objectSpread2({}, obj), {}, _defineProperty({}, item.name, item.initialValue || ''));
-    }, {}),
-    validate: function validate(values) {
-      var errors = {};
-      /* 取出必填的欄位 並檢查該欄位是否有填寫 若無則顯示錯誤訊息(請輸入xxx) */
-      var necessaryList = template.filter(function (_ref2) {
-        var required = _ref2.required;
-        return required;
-      });
-      necessaryList.forEach(function (_ref3) {
-        var name = _ref3.name,
-          label = _ref3.label;
-        if (!values[name]) errors[name] = "".concat(formatMessage({
-          id: 'common.enter'
-        }), " ").concat(label);
-      });
-
-      /* 檢查是否符合 email格式 - 您輸入無效的email */
-      if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
-        errors.email = formatMessage({
-          id: 'common.form.valid.error.email'
-        });
-      }
-      /* 檢查是否正確 - 驗證碼錯誤 */
-      if (!values.vcode) errors.vcode = formatMessage({
-        id: 'common.form.code.error'
-      });
-      setFormType(values.subject);
-
-      /* 如果附件Size超過10MB - 檔案大小上限為10MB! */
-      if (Array.isArray(values.files)) {
-        var totalsize = values.files.reduce(function (total, file) {
-          return total + file.size;
-        }, 0);
-        if (totalsize > 10 * 1024 * 1024) errors.files = formatMessage({
-          id: 'common.form.attachment.valid.error'
-        });
-      }
-
-      /* 取得第一個錯誤的id */
-      errorId = Object.keys(errors).length > 0 ? Object.keys(errors).shift() : null;
-      return errors;
-    },
-    onSubmit: function () {
-      var _onSubmit = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(values) {
-        var title, subject, body, zipFile;
-        return _regeneratorRuntime().wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              title = values.subject === EMAIL_TYPE.PROBLEM ? formatMessage({
-                id: 'common.has.problem'
-              }) : formatMessage({
-                id: 'common.form.dataProvide'
-              });
-              subject = "".concat(title, "-").concat(formatMessage({
-                id: 'header.title'
-              }), "-").concat(values.name);
-              body = formType === EMAIL_TYPE.PROBLEM ? problemMail({
-                formatMessage: formatMessage,
-                values: values
-              }) : dataProvideMail({
-                formatMessage: formatMessage,
-                values: values
-              });
-              setSubmitting(true);
-
-              // const fileName = values.files && values.files[0] && values.files[0].name;
-              if (!(values.files && values.files.length > 0)) {
-                _context.next = 11;
-                break;
-              }
-              _context.next = 7;
-              return zipFiles(values.files);
-            case 7:
-              zipFile = _context.sent;
-              sendEmail({
-                from: values.email,
-                to: mailto,
-                subject: subject,
-                html: body,
-                attachments: [{
-                  // stream as an attachment
-                  filename: 'zipFile.zip',
-                  content: zipFile
-                }]
-              }, emailAPI, function (_ref4) {
-                var state = _ref4.state;
-                if (state) {
-                  setSubmitting(false);
-                  formik.resetForm();
-                  setOpen(false);
-                  onNotify({
-                    message: 'common.action.success'
-                  });
-                } else {
-                  onNotify({
-                    type: 'error',
-                    message: 'common.action.error'
-                  });
-                }
-              });
-              _context.next = 12;
-              break;
-            case 11:
-              sendEmail({
-                from: values.email,
-                to: mailto,
-                subject: subject,
-                html: body
-              }, emailAPI, function (_ref5) {
-                var state = _ref5.state;
-                if (state) {
-                  setSubmitting(false);
-                  formik.resetForm();
-                  setOpen(false);
-                  onNotify({
-                    message: 'common.action.success'
-                  });
-                } else {
-                  onNotify({
-                    type: 'error',
-                    message: 'common.action.error'
-                  });
-                }
-              });
-            case 12:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee);
-      }));
-      function onSubmit(_x) {
-        return _onSubmit.apply(this, arguments);
-      }
-      return onSubmit;
-    }()
-  });
-
-  /* 關閉表單 */
-  var handleClose = function handleClose() {
-    formik.resetForm();
-    setOpen(false);
-  };
-
-  /* 送出郵件 */
-  var handleSubmit = function handleSubmit() {
-    formik.handleSubmit();
-    /* 滾動過去錯誤的地方 */
-    var errorElement = document.getElementById("form-".concat(errorId));
-    if (errorElement) {
-      var offsetY = errorElement.offsetTop - 65;
-      if (errorElement.parentElement.scrollTo) {
-        errorElement.parentElement.scrollTo({
-          top: offsetY,
-          behavior: 'smooth'
-        });
-      } else {
-        errorElement.parentElement.scrollTop = offsetY;
-      }
-    }
-    if (errorId) onNotify({
-      type: 'error',
-      message: 'common.form.error'
-    });
-  };
-  return /*#__PURE__*/React__default.createElement(Modal, {
-    fullWidth: true,
-    visible: open,
-    loading: submitting,
-    title: formatMessage({
-      id: 'common.form.contactUs'
-    }),
-    onCancel: handleClose,
-    onOk: handleSubmit,
-    cancelText: formatMessage({
-      id: 'common.cancel'
-    }),
-    okText: formatMessage({
-      id: 'common.submit'
-    })
-  }, /*#__PURE__*/React__default.createElement(FormikProvider, {
-    value: formik
-  }, template.map(function (schema) {
-    return /*#__PURE__*/React__default.createElement(FormItem, _extends({
-      key: schema.name
-    }, schema, {
-      setFieldValue: formik.setFieldValue,
-      formatMessage: formatMessage,
-      onNotify: onNotify
-    }));
-  })));
-};
-ContactModal.defaultProps = {
-  type: EMAIL_TYPE.PROBLEM,
-  mailto: 'twp@nmtl.gov.tw',
-  open: false,
-  emailAPI: 'https://api2.daoyidh.com/nmtl/mail',
-  setOpen: function setOpen() {},
-  onNotify: function onNotify() {}
-};
-ContactModal.propTypes = {
-  /** 我有問題的種類為(DATA_PROVIDER or PROBLEM) */
-  type: PropTypes.oneOf(['DATA_PROVIDER', 'PROBLEM']),
-  /** 傳送的email位置 */
-  mailto: PropTypes.string,
-  /** Modal是否開啟 */
-  open: PropTypes.bool,
-  /** 寄信用的api url */
-  emailAPI: PropTypes.string,
-  /** 設定Modal是否開啟 */
-  setOpen: PropTypes.func,
-  /** 錯誤或成功時的提示 */
-  onNotify: PropTypes.func
-};
-
-export { ContactModal as C };