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

package/lib/components/Breadcrumbs.js

@@ -0,0 +1,122 @@
+import React__default from 'react';
+import { c as classNames } from './index-66babe67.js';
+import PropTypes from 'prop-types';
+import { NavLink } from 'react-router-dom';
+import { Typography, Breadcrumbs as Breadcrumbs$1 } from '@material-ui/core';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+
+var css_248z$1 = ".breadcrumbItem {\n  display: flex;\n  opacity: 0.8;\n  transition: opacity 0.1s ease-in-out; }\n  .breadcrumbItem:hover {\n    opacity: 1; }\n  .breadcrumbItem--last {\n    opacity: 1;\n    font-weight: 500 !important; }\n  .breadcrumbItem__icon {\n    display: flex;\n    align-items: center;\n    margin-right: 4px; }\n    .breadcrumbItem__icon svg {\n      font-size: 18px; }\n";
+styleInject(css_248z$1);
+
+const BreadcrumbItem = _ref => {
+  let {
+    className,
+    icon,
+    text,
+    lastItem,
+    onClick
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement(Typography, {
+    color: "textPrimary",
+    className: className,
+    onClick: onClick
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: classNames('breadcrumbItem', {
+      'breadcrumbItem--last': lastItem
+    })
+  }, icon && /*#__PURE__*/React__default.createElement("span", {
+    className: "breadcrumbItem__icon"
+  }, icon), /*#__PURE__*/React__default.createElement("span", {
+    className: "breadcrumbItem__text"
+  }, text)));
+};
+BreadcrumbItem.defaultProps = {
+  className: undefined,
+  icon: undefined,
+  text: undefined,
+  lastItem: undefined,
+  onClick: () => {}
+};
+BreadcrumbItem.propTypes = {
+  className: PropTypes.string,
+  icon: PropTypes.node,
+  text: PropTypes.string,
+  lastItem: PropTypes.bool,
+  onClick: PropTypes.func
+};
+
+var css_248z = ".breadcrumbs__link {\n  cursor: pointer;\n  text-decoration: none !important; }\n";
+styleInject(css_248z);
+
+var Breadcrumbs = function Breadcrumbs(_ref) {
+  var className = _ref.className,
+    links = _ref.links,
+    separator = _ref.separator;
+  return /*#__PURE__*/React__default.createElement(Breadcrumbs$1, {
+    className: classNames('breadcrumbs', className),
+    "aria-label": "breadcrumb",
+    separator: separator && separator.length > 0 ? separator : undefined
+  }, Array.isArray(links) && links.length > 0 && links.map(function (_ref2, i) {
+    var icon = _ref2.icon,
+      text = _ref2.text,
+      href = _ref2.href,
+      onClick = _ref2.onClick;
+    var lastLink = i === links.length - 1;
+
+    /* 尾巴 */
+    if (lastLink) return /*#__PURE__*/React__default.createElement(BreadcrumbItem, {
+      key: i.toString(),
+      lastItem: true,
+      icon: icon,
+      text: text,
+      onClick: onClick
+    });
+
+    /* 頭 */
+    if (i === 0) {
+      return /*#__PURE__*/React__default.createElement(NavLink, {
+        className: "breadcrumbs__link",
+        key: i.toString(),
+        to: href || '/',
+        onClick: onClick
+      }, /*#__PURE__*/React__default.createElement(BreadcrumbItem, {
+        icon: icon,
+        text: text
+      }));
+    }
+
+    /* 中間 */
+    return href ? /*#__PURE__*/React__default.createElement(NavLink, {
+      className: "breadcrumbs__link",
+      key: i.toString(),
+      to: href,
+      onClick: onClick
+    }, /*#__PURE__*/React__default.createElement(BreadcrumbItem, {
+      icon: icon,
+      text: text
+    })) : /*#__PURE__*/React__default.createElement(BreadcrumbItem, {
+      key: i.toString(),
+      lastItem: true,
+      icon: icon,
+      text: text,
+      onClick: onClick
+    });
+  }));
+};
+Breadcrumbs.defaultProps = {
+  className: undefined,
+  links: undefined,
+  separator: undefined
+};
+
+/* Write props detail information and 'npm run updateStory' will help you generate stories's argTypes */
+Breadcrumbs.propTypes = {
+  /** Css Name */
+  className: PropTypes.string,
+  /** 麵包穴的連結們 */
+  links: PropTypes.arrayOf(PropTypes.any),
+  /** 分割者的符號 */
+  separator: PropTypes.string
+};
+
+export { Breadcrumbs as default };

package/lib/components/Button-433372aa.js

@@ -0,0 +1,92 @@
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { c as classNames } from './index-66babe67.js';
+import { Button as Button$1, CircularProgress } from '@material-ui/core';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+
+var css_248z = ".button {\n  border: 1px solid #ffffff99;\n  border-radius: 45px;\n  padding: 8px 16px;\n  background: #007bff;\n  color: white;\n  cursor: pointer; }\n  .button:hover {\n    opacity: 0.9; }\n";
+styleInject(css_248z);
+
+var Button = function Button(props) {
+  var style = props.style,
+    className = props.className,
+    tabIndex = props.tabIndex,
+    alt = props.alt,
+    text = props.text,
+    size = props.size,
+    variant = props.variant;
+  var type = props.type,
+    color = props.color,
+    loading = props.loading,
+    disabled = props.disabled,
+    icon = props.icon,
+    endIcon = props.endIcon,
+    children = props.children,
+    onClick = props.onClick;
+  return /*#__PURE__*/React__default.createElement(Button$1, {
+    style: style,
+    className: classNames('button', className),
+    tabIndex: tabIndex,
+    alt: alt,
+    size: size,
+    variant: variant,
+    color: type || color,
+    disabled: loading || disabled,
+    onClick: onClick,
+    startIcon: icon,
+    endIcon: loading ? /*#__PURE__*/React__default.createElement(CircularProgress, {
+      size: 16
+    }) : endIcon
+  }, text, children);
+};
+Button.defaultProps = {
+  style: undefined,
+  className: undefined,
+  tabIndex: undefined,
+  alt: undefined,
+  text: undefined,
+  loading: false,
+  disabled: false,
+  variant: undefined,
+  size: 'small',
+  color: 'primary',
+  type: undefined,
+  children: undefined,
+  icon: undefined,
+  endIcon: undefined,
+  onClick: function onClick() {}
+};
+Button.propTypes = {
+  /** 樣式 */
+  style: PropTypes.objectOf(PropTypes.any),
+  /** Css Name */
+  className: PropTypes.string,
+  /** Tab 鍵位置 */
+  tabIndex: PropTypes.number,
+  /** 註解 */
+  alt: PropTypes.string,
+  /** 輸入的文字 */
+  text: PropTypes.string,
+  /** 是否載入中 */
+  loading: PropTypes.bool,
+  /** 是否禁用 */
+  disabled: PropTypes.bool,
+  /** 按鈕種類 */
+  variant: PropTypes.oneOf(['contained', 'outlined', 'text']),
+  /** 按鈕的大小 */
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  /** 按鈕顏色 */
+  color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary']),
+  /** 按鈕樣式(同按鈕顏色) */
+  type: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary']),
+  /** 按鈕內容 */
+  children: PropTypes.node,
+  /** 按鈕圖案(前面) */
+  icon: PropTypes.node,
+  /** 按鈕圖案(後面) */
+  endIcon: PropTypes.node,
+  /** 點擊後的返回 */
+  onClick: PropTypes.func
+};
+
+export { Button as B };

package/lib/components/Button.js

@@ -0,0 +1,6 @@
+export { B as default } from './Button-433372aa.js';
+import 'react';
+import 'prop-types';
+import './index-66babe67.js';
+import '@material-ui/core';
+import './style-inject.es-1f59c1d0.js';