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

package/lib/components/Modal-572e17ea.js

@@ -0,0 +1,108 @@
+import React__default from 'react';
+import { c as classNames } from './index-f491ebce.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-2f8f0493.js';
+import { S as Spin } from './Spin-ebf79c17.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

@@ -1 +1,9 @@
-export{M as default}from"./Modal-a7591b98.js";import"react";import"./vendor-851c6356.js";import"prop-types";import"react-is";import"@material-ui/styles";import"react-dom";import"@material-ui/core";import"@material-ui/icons";import"./Button-63c7e9f3.js";import"./Spin-690a3597.js";
+export { M as default } from './Modal-572e17ea.js';
+import 'react';
+import './index-f491ebce.js';
+import 'prop-types';
+import '@material-ui/core';
+import '@material-ui/icons';
+import './Button-2f8f0493.js';
+import './style-inject.es-1f59c1d0.js';
+import './Spin-ebf79c17.js';

package/lib/components/MoreButton-80996b5f.js

@@ -0,0 +1,110 @@
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { c as classNames } from './index-f491ebce.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

@@ -1 +1,6 @@
-export{M as default}from"./MoreButton-f15ca38e.js";import"react";import"prop-types";import"./vendor-851c6356.js";import"react-is";import"@material-ui/styles";import"react-dom";import"@material-ui/icons";
+export { M as default } from './MoreButton-80996b5f.js';
+import 'react';
+import 'prop-types';
+import './index-f491ebce.js';
+import '@material-ui/icons';
+import './style-inject.es-1f59c1d0.js';

package/lib/components/Radio.js

@@ -1 +1,78 @@
-import{b as e}from"./_rollupPluginBabelHelpers-fde6d1c6.js";import a from"react";import o from"prop-types";import{RadioGroup as r,FormControlLabel as t,Radio as i}from"@material-ui/core";import{s as l}from"./vendor-851c6356.js";import"react-is";import"@material-ui/styles";import"react-dom";l("");var n=function(o){var l=o.className,n=o.name,s=o.defaultValue,m=o.value,u=o.size,d=o.style,c=o.direction,p=o.options,f=o.onChange;return a.createElement(r,{className:"radioGroup",style:e({flexDirection:c},d),name:n,defaultValue:s||void 0,value:m||void 0,onChange:function(e){f&&f(e.target.value)}},Array.isArray(p)&&p.map((function(e){return a.createElement(t,{value:e.value,key:e.value,control:a.createElement(i,{disabled:e.disabled||!1,size:u,className:l}),label:e.label})})))};n.defaultProps={className:void 0,name:void 0,defaultValue:void 0,value:void 0,size:"small",style:void 0,direction:"row",options:void 0,onChange:function(){}},n.propTypes={className:o.string,name:o.string,defaultValue:o.oneOfType([o.string,o.number]),value:o.oneOfType([o.string,o.number]),size:o.oneOf(["small","medium"]),style:o.objectOf(o.any),direction:o.oneOf(["row","column"]),options:o.arrayOf(o.any),onChange:o.func};export{n as default};
+import { b as _objectSpread2 } from './_rollupPluginBabelHelpers-fde6d1c6.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 };