@daoyi/nmtl-ui 2.0.1-beta.52 → 2.0.1-beta.53

package/lib/components/Modal-64c4ab0d.js

@@ -0,0 +1,108 @@
+import React__default from 'react';
+import { c as classNames } from './index-66babe67.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-433372aa.js';
+import { S as Spin } from './Spin-8a5a600d.js';
+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: white; }\n\n.modal__title__close {\n  cursor: pointer;\n  color: white; }\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();
+    }
+  }, /*#__PURE__*/React__default.createElement(DialogTitle, {
+    className: "modal__title"
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "modal__title__text"
+  }, title), closable && /*#__PURE__*/React__default.createElement(IconButton, {
+    onClick: onCancel
+  }, /*#__PURE__*/React__default.createElement(CloseSharp, {
+    className: "modal__title__close"
+  }))), /*#__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,9 @@
+export { M as default } from './Modal-64c4ab0d.js';
+import 'react';
+import './index-66babe67.js';
+import 'prop-types';
+import '@material-ui/core';
+import '@material-ui/icons';
+import './Button-433372aa.js';
+import './style-inject.es-1f59c1d0.js';
+import './Spin-8a5a600d.js';

package/lib/components/MoreButton-6654cc5b.js

@@ -0,0 +1,110 @@
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { c as classNames } from './index-66babe67.js';
+import { ExpandLess, ExpandMore } from '@material-ui/icons';
+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  .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  .moreButton:hover .moreButton__mask {\n    opacity: 1; }\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    .moreButton--shadow:hover {\n      box-shadow: initial !important;\n      left: 3px;\n      top: 3px; }\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    .moreButton--small .moreButton__mask {\n      opacity: 0 !important; }\n  .moreButton__icon {\n    display: flex;\n    z-index: 1; }\n    .moreButton__icon--small {\n      font-size: 1.5rem;\n      border-radius: 45px;\n      color: white !important; }\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    .moreButton__text--small {\n      margin-left: 0.75rem;\n      font-size: 1.5rem;\n      color: #0c2a4d; }\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;
+  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: "more"
+  });
+  var icon = small ? smallIcon : largeIcon;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNames('moreButton', {
+      'moreButton--shadow': enableShadow
+    }, {
+      'moreButton--small': small
+    }),
+    style: {
+      color: shadowColor || 'white',
+      background: primaryColor,
+      boxShadow: enableShadow ? "3px 3px 0 0 ".concat(shadowColor) : undefined
+    },
+    onClick: function onClick() {
+      setExpand(!expand);
+      _onClick();
+    }
+  }, !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
+    }
+  }, formatMessage ? formatMessage({
+    id: message
+  }) : message));
+};
+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,6 @@
+export { M as default } from './MoreButton-6654cc5b.js';
+import 'react';
+import 'prop-types';
+import './index-66babe67.js';
+import '@material-ui/icons';
+import './style-inject.es-1f59c1d0.js';

package/lib/components/Radio.js

@@ -0,0 +1,78 @@
+import { b as _objectSpread2 } from './_rollupPluginBabelHelpers-3d9c8289.js';
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { RadioGroup, FormControlLabel, Radio as Radio$1 } from '@material-ui/core';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+
+var css_248z = "";
+styleInject(css_248z);
+
+var Radio = function Radio(props) {
+  var className = props.className,
+    name = props.name,
+    defaultValue = props.defaultValue,
+    value = props.value,
+    size = props.size,
+    style = props.style,
+    direction = props.direction; // Attributes
+  var options = props.options; // DataList
+  var _onChange = props.onChange; // Call Back functions
+
+  return /*#__PURE__*/React__default.createElement(RadioGroup, {
+    className: "radioGroup",
+    style: _objectSpread2({
+      flexDirection: direction
+    }, style),
+    name: name,
+    defaultValue: defaultValue || undefined,
+    value: value || undefined,
+    onChange: function onChange(event) {
+      if (_onChange) _onChange(event.target.value);
+    }
+  }, Array.isArray(options) && options.map(function (option) {
+    return /*#__PURE__*/React__default.createElement(FormControlLabel, {
+      value: option.value,
+      key: option.value,
+      control: /*#__PURE__*/React__default.createElement(Radio$1, {
+        disabled: option.disabled || false,
+        size: size,
+        className: className
+      }),
+      label: option.label
+    });
+  }));
+};
+Radio.defaultProps = {
+  className: undefined,
+  name: undefined,
+  defaultValue: undefined,
+  value: undefined,
+  size: 'small',
+  style: undefined,
+  direction: 'row',
+  options: undefined,
+  onChange: function onChange() {}
+};
+Radio.propTypes = {
+  /** Css Name */
+  className: PropTypes.string,
+  /** 搭配FormControl 使用的名稱 */
+  name: PropTypes.string,
+  /** 預設內容 */
+  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /** 如果你就是好想要Value */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /** Radio的大小 */
+  // size: PropTypes.string,
+  size: PropTypes.oneOf(['small', 'medium']),
+  /** 樣式 */
+  style: PropTypes.objectOf(PropTypes.any),
+  /** Radio的方向 */
+  direction: PropTypes.oneOf(['row', 'column']),
+  /** Radio的清單 */
+  options: PropTypes.arrayOf(PropTypes.any),
+  /** 選擇時的callback */
+  onChange: PropTypes.func
+};
+
+export { Radio as default };