@daoyi/nmtl-ui 2.0.1-beta.1 → 2.0.1-beta.100

package/lib/components/Modal-777fe87d.js

@@ -0,0 +1,116 @@
+import React__default from 'react';
+import { c as classNames } from './index-b76a85f4.js';
+import PropTypes from 'prop-types';
+import { Dialog, DialogTitle, IconButton, DialogContent, DialogActions, CircularProgress } from '@material-ui/core';
+import { CloseSharp } from '@material-ui/icons';
+import { B as Button } from './Button-305b69a0.js';
+import { S as Spin } from './Spin-8dc60bfe.js';
+import { getIntl } from './globalConfig';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+
+var css_248z = ".modal__title h2 {\n  display: flex;\n  align-items: center;\n}\n.modal__title__text {\n  flex: 1;\n  font-size: 16px;\n  padding: 8px 0;\n  color: inherit;\n}\n.modal__title__close {\n  cursor: pointer;\n  color: inherit;\n}\n.modal--transparent .MuiPaper-root {\n  background: transparent !important;\n  box-shadow: none;\n}\n.modal--transparent .modal__title {\n  background: transparent !important;\n}";
+styleInject(css_248z);
+
+var Modal = function Modal(props) {
+  var className = props.className,
+    title = props.title,
+    children = props.children,
+    footer = props.footer,
+    cancelText = props.cancelText,
+    okText = props.okText,
+    visible = props.visible,
+    onOk = props.onOk,
+    onCancel = props.onCancel;
+  var closable = props.closable,
+    loading = props.loading,
+    fullWidth = props.fullWidth,
+    transparent = props.transparent;
+  var endIcon = loading && /*#__PURE__*/React__default.createElement(CircularProgress, {
+    size: 14
+  });
+  return /*#__PURE__*/React__default.createElement(Dialog, {
+    className: classNames('modal', {
+      'modal--transparent': transparent
+    }, className),
+    fullWidth: fullWidth,
+    open: visible || false,
+    onClose: function onClose() {
+      return closable && onCancel();
+    }
+    // WCAG 4.1.2 對話框需有可及名稱
+    ,
+    "aria-label": typeof title === 'string' ? title : undefined
+  }, /*#__PURE__*/React__default.createElement(DialogTitle, {
+    className: "modal__title"
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "modal__title__text"
+  }, title), closable && /*#__PURE__*/React__default.createElement(IconButton, {
+    "aria-label": getIntl().formatMessage({
+      id: 'aria.modal.close'
+    }),
+    onClick: onCancel
+  }, /*#__PURE__*/React__default.createElement(CloseSharp, {
+    className: "modal__title__close",
+    "aria-hidden": "true"
+  }))), /*#__PURE__*/React__default.createElement(DialogContent, null, /*#__PURE__*/React__default.createElement(Spin, {
+    spinning: loading
+  }, children)), footer !== null && /*#__PURE__*/React__default.createElement(DialogActions, null, footer === undefined && (cancelText || okText) ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, cancelText && /*#__PURE__*/React__default.createElement(Button, {
+    onClick: onCancel,
+    color: "default",
+    endIcon: endIcon,
+    disabled: loading
+  }, cancelText), okText && /*#__PURE__*/React__default.createElement(Button, {
+    onClick: onOk,
+    color: "primary",
+    endIcon: endIcon,
+    disabled: loading,
+    autoFocus: true
+  }, okText)) : footer));
+};
+Modal.defaultProps = {
+  className: undefined,
+  loading: undefined,
+  transparent: undefined,
+  closable: true,
+  title: undefined,
+  children: undefined,
+  fullWidth: undefined,
+  footer: undefined,
+  cancelText: 'Cancel',
+  okText: 'Ok',
+  visible: undefined,
+  onOk: function onOk() {},
+  onCancel: function onCancel() {}
+};
+
+/* Write props detail information and 'npm run updateStory' will help you generate stories's argTypes */
+Modal.propTypes = {
+  /** Css Name */
+  className: PropTypes.string,
+  /** 是否正在載入中 */
+  loading: PropTypes.bool,
+  /** 是否正透明模式 */
+  transparent: PropTypes.bool,
+  /** 是否可以取消關閉(含close icon) */
+  closable: PropTypes.bool,
+  /** Modal Title */
+  title: PropTypes.node,
+  /** Modal 內容 */
+  children: PropTypes.node,
+  /** 版面是否滿版 */
+  fullWidth: PropTypes.bool,
+  /** Footer */
+  footer: PropTypes.node,
+  /** 取消文字 */
+  cancelText: PropTypes.string,
+  /** 確認文字 */
+  okText: PropTypes.string,
+  /** 是否出現 */
+  visible: PropTypes.bool,
+  /** 完成的callback */
+  onOk: PropTypes.func,
+  /** 關閉Modal */
+  onCancel: PropTypes.func
+};
+
+export { Modal as M };

package/lib/components/Modal.js

@@ -0,0 +1,10 @@
+export { M as default } from './Modal-777fe87d.js';
+import 'react';
+import './index-b76a85f4.js';
+import 'prop-types';
+import '@material-ui/core';
+import '@material-ui/icons';
+import './Button-305b69a0.js';
+import './style-inject.es-1f59c1d0.js';
+import './Spin-8dc60bfe.js';
+import './globalConfig';

package/lib/components/MoreButton-493f7c82.js

@@ -0,0 +1,148 @@
+import { a as _slicedToArray } from './_rollupPluginBabelHelpers-a52356f6.js';
+import React__default, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { c as classNames } from './index-b76a85f4.js';
+import { ExpandLess, ExpandMore } from '@material-ui/icons';
+import { getIntl } from './globalConfig';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+
+var css_248z = ".moreButton {\n  width: -moz-fit-content;\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  position: relative;\n  margin: 1rem 0rem;\n  border-radius: 8px;\n  padding: 1rem 2.5rem;\n  -webkit-user-select: none;\n          user-select: none;\n  cursor: pointer;\n}\n.moreButton__mask {\n  transition: all 0.3s ease-in-out;\n  position: absolute;\n  left: 0;\n  top: 0;\n  border-radius: 8px;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n}\n.moreButton:hover .moreButton__mask {\n  opacity: 1;\n}\n.moreButton--shadow {\n  transition: all 0.3s ease-in-out;\n  border: 3px solid #ffffff;\n  position: relative;\n  left: 0px;\n  top: 0px;\n}\n.moreButton--shadow:hover {\n  box-shadow: initial !important;\n  left: 3px;\n  top: 3px;\n}\n.moreButton--small {\n  border: 0;\n  padding: 0;\n  left: 0px !important;\n  top: 0px !important;\n  background: transparent !important;\n  box-shadow: initial !important;\n}\n.moreButton--small .moreButton__mask {\n  opacity: 0 !important;\n}\n.moreButton__icon {\n  display: flex;\n  z-index: 1;\n}\n.moreButton__icon--small {\n  font-size: 1.5rem;\n  border-radius: 45px;\n  color: white !important;\n}\n.moreButton__text {\n  z-index: 1;\n  font-size: 1.5rem;\n  line-height: 1.5rem;\n  transition: color 0.3s ease-in-out;\n}\n.moreButton__text--small {\n  margin-left: 0.75rem;\n  font-size: 1.5rem;\n  color: #0c2a4d;\n}\n.moreButton__text--small:hover {\n  text-decoration: underline;\n}";
+styleInject(css_248z);
+
+var MoreButton = function MoreButton(props) {
+  var primaryColor = props.primaryColor,
+    secondaryColor = props.secondaryColor,
+    shadowColor = props.shadowColor;
+  var small = props.small,
+    enableShadow = props.enableShadow,
+    customExpandIcon = props.customExpandIcon;
+  var expand = props.expand,
+    setExpand = props.setExpand,
+    onClick = props.onClick,
+    formatMessage = props.formatMessage;
+  /* WCAG 4.1.3 點選後結果在原頁面更新，需播報（實測回饋 R9） */
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    liveMessage = _useState2[0],
+    setLiveMessage = _useState2[1];
+  var smallIcon = expand ? /*#__PURE__*/React__default.createElement(ExpandLess, {
+    className: "moreButton__icon--small",
+    style: {
+      background: shadowColor || primaryColor
+    }
+  }) : /*#__PURE__*/React__default.createElement(ExpandMore, {
+    className: "moreButton__icon--small",
+    style: {
+      background: shadowColor || primaryColor
+    }
+  });
+  var smallMessage = expand ? 'common.show.less' : 'common.show.more';
+  var message = small ? smallMessage : 'common.watch.more';
+  var largeIcon = customExpandIcon && /*#__PURE__*/React__default.createElement("img", {
+    src: customExpandIcon,
+    alt: "",
+    "aria-hidden": "true"
+  });
+  var icon = small ? smallIcon : largeIcon;
+  var handleAction = function handleAction() {
+    setExpand(!expand);
+    onClick();
+    setLiveMessage(getIntl().formatMessage({
+      id: expand ? 'aria.moreButton.collapsed' : 'aria.moreButton.loaded'
+    }));
+    setTimeout(function () {
+      return setLiveMessage('');
+    }, 3000);
+  };
+  var messageText = formatMessage ? formatMessage({
+    id: message
+  }) : message;
+  return (
+    /*#__PURE__*/
+    /* WCAG 2.1.1/4.1.2 看更多為互動元件：role="button" + tabIndex + 鍵盤操作，
+       報讀補「點選後載入更多結果」預先提示、aria-expanded 表達展開狀態 */
+    React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      role: "status",
+      className: "visually-hidden"
+    }, liveMessage), /*#__PURE__*/React__default.createElement("div", {
+      className: classNames('moreButton', {
+        'moreButton--shadow': enableShadow
+      }, {
+        'moreButton--small': small
+      }),
+      role: "button",
+      tabIndex: 0,
+      "aria-expanded": expand,
+      "aria-label": "".concat(messageText).concat(getIntl().formatMessage({
+        id: 'aria.moreButton.hint'
+      })),
+      style: {
+        color: shadowColor || 'white',
+        background: primaryColor,
+        boxShadow: enableShadow ? "3px 3px 0 0 ".concat(shadowColor) : undefined
+      },
+      onClick: handleAction,
+      onKeyDown: function onKeyDown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault();
+          handleAction();
+        }
+      }
+    }, !enableShadow && /*#__PURE__*/React__default.createElement("div", {
+      className: "moreButton__mask",
+      style: {
+        background: secondaryColor
+      }
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: "moreButton__icon"
+    }, icon), /*#__PURE__*/React__default.createElement("div", {
+      className: classNames('moreButton__text', {
+        'moreButton__text--small': small
+      }),
+      style: {
+        color: small ? shadowColor || primaryColor : undefined,
+        marginLeft: icon ? '0.5rem' : undefined
+      }
+    }, messageText)))
+  );
+};
+MoreButton.defaultProps = {
+  primaryColor: '#271702',
+  // default為文學網站的主色系
+  secondaryColor: '#aa8859',
+  // default為文學網站的次色系
+  shadowColor: undefined,
+  small: false,
+  enableShadow: false,
+  expand: false,
+  customExpandIcon: undefined,
+  formatMessage: undefined,
+  setExpand: function setExpand() {},
+  onClick: function onClick() {}
+};
+MoreButton.propTypes = {
+  /** 按鈕主色系顏色 */
+  primaryColor: PropTypes.string,
+  /** 按鈕次色系顏色 */
+  secondaryColor: PropTypes.string,
+  /** 按鈕影子顏色 */
+  shadowColor: PropTypes.string,
+  /** 展開是否為小圖示 */
+  small: PropTypes.bool,
+  /** 是否啟動陰影模式 */
+  enableShadow: PropTypes.bool,
+  /** 客製化自己的大圖標 */
+  customExpandIcon: PropTypes.node,
+  /** 是否展開(僅有在small=true作動) */
+  expand: PropTypes.bool,
+  /** 語系翻譯的formateMessag(useIntl) */
+  formatMessage: PropTypes.func,
+  /** 設定是否展開 */
+  setExpand: PropTypes.func,
+  /** 點擊的callback */
+  onClick: PropTypes.func
+};
+
+export { MoreButton as M };

package/lib/components/MoreButton.js

@@ -0,0 +1,8 @@
+export { M as default } from './MoreButton-493f7c82.js';
+import './_rollupPluginBabelHelpers-a52356f6.js';
+import 'react';
+import 'prop-types';
+import './index-b76a85f4.js';
+import '@material-ui/icons';
+import './globalConfig';
+import './style-inject.es-1f59c1d0.js';