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

package/lib/components/Breadcrumbs.js

@@ -1 +1,124 @@
-import e from"react";import{s as t,c as r}from"./vendor-851c6356.js";import a from"prop-types";import{NavLink as n}from"react-router-dom";import{Typography as o,Breadcrumbs as i}from"@material-ui/core";import"react-is";import"@material-ui/styles";import"react-dom";t(".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");const c=t=>{let{className:a,icon:n,text:i,lastItem:c,onClick:m}=t;return e.createElement(o,{color:"textPrimary",className:a,onClick:m},e.createElement("div",{className:r("breadcrumbItem",{"breadcrumbItem--last":c})},n&&e.createElement("span",{className:"breadcrumbItem__icon"},n),e.createElement("span",{className:"breadcrumbItem__text"},i)))};c.defaultProps={className:void 0,icon:void 0,text:void 0,lastItem:void 0,onClick:()=>{}},c.propTypes={className:a.string,icon:a.node,text:a.string,lastItem:a.bool,onClick:a.func};t(".breadcrumbs__link {\n  cursor: pointer;\n  text-decoration: none !important; }\n");var m=function(t){var a=t.className,o=t.links,m=t.separator;return e.createElement(i,{className:r("breadcrumbs",a),"aria-label":"breadcrumb",separator:m&&m.length>0?m:void 0},Array.isArray(o)&&o.length>0&&o.map((function(t,r){var a=t.icon,i=t.text,m=t.href,s=t.onClick;return r===o.length-1?e.createElement(c,{key:r.toString(),lastItem:!0,icon:a,text:i,onClick:s}):0===r?e.createElement(n,{className:"breadcrumbs__link",key:r.toString(),to:m||"/",onClick:s},e.createElement(c,{icon:a,text:i})):m?e.createElement(n,{className:"breadcrumbs__link",key:r.toString(),to:m,onClick:s},e.createElement(c,{icon:a,text:i})):e.createElement(c,{key:r.toString(),lastItem:!0,icon:a,text:i,onClick:s})})))};m.defaultProps={className:void 0,links:void 0,separator:void 0},m.propTypes={className:a.string,links:a.arrayOf(a.any),separator:a.string};export{m as default};
+import React__default from 'react';
+import { s as styleInject, c as classNames } from './vendor-851c6356.js';
+import PropTypes from 'prop-types';
+import { NavLink } from 'react-router-dom';
+import { Typography, Breadcrumbs as Breadcrumbs$1 } from '@material-ui/core';
+import 'react-is';
+import '@material-ui/styles';
+import 'react-dom';
+
+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-63c7e9f3.js

@@ -1 +1,91 @@
-import o from"react";import e from"prop-types";import{s as n,c as t}from"./vendor-851c6356.js";import{Button as i,CircularProgress as a}from"@material-ui/core";n(".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");var r=function(e){var n=e.style,r=e.className,d=e.tabIndex,l=e.alt,s=e.text,c=e.size,p=e.variant,f=e.type,m=e.color,b=e.loading,u=e.disabled,v=e.icon,y=e.endIcon,x=e.children,g=e.onClick;return o.createElement(i,{style:n,className:t("button",r),tabIndex:d,alt:l,size:c,variant:p,color:f||m,disabled:b||u,onClick:g,startIcon:v,endIcon:b?o.createElement(a,{size:16}):y},s,x)};r.defaultProps={style:void 0,className:void 0,tabIndex:void 0,alt:void 0,text:void 0,loading:!1,disabled:!1,variant:void 0,size:"small",color:"primary",type:void 0,children:void 0,icon:void 0,endIcon:void 0,onClick:function(){}},r.propTypes={style:e.objectOf(e.any),className:e.string,tabIndex:e.number,alt:e.string,text:e.string,loading:e.bool,disabled:e.bool,variant:e.oneOf(["contained","outlined","text"]),size:e.oneOf(["small","medium","large"]),color:e.oneOf(["default","inherit","primary","secondary"]),type:e.oneOf(["default","inherit","primary","secondary"]),children:e.node,icon:e.node,endIcon:e.node,onClick:e.func};export{r as B};
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { s as styleInject, c as classNames } from './vendor-851c6356.js';
+import { Button as Button$1, CircularProgress } from '@material-ui/core';
+
+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

@@ -1 +1,8 @@
-export{B as default}from"./Button-63c7e9f3.js";import"react";import"prop-types";import"./vendor-851c6356.js";import"react-is";import"@material-ui/styles";import"react-dom";import"@material-ui/core";
+export { B as default } from './Button-63c7e9f3.js';
+import 'react';
+import 'prop-types';
+import './vendor-851c6356.js';
+import 'react-is';
+import '@material-ui/styles';
+import 'react-dom';
+import '@material-ui/core';

package/lib/components/Carousel.js

@@ -1 +1,61 @@
-import{c as a,b as e,_ as r}from"./_rollupPluginBabelHelpers-fde6d1c6.js";import s,{forwardRef as o,useRef as l,useImperativeHandle as t}from"react";import{s as i,S as n,c}from"./vendor-851c6356.js";import p from"prop-types";import"react-is";import"@material-ui/styles";import"react-dom";i(".carousel .slick-arrow {\n  display: none !important; }\n");var u=["className","autoplay","children"],m=o((function(o,i){var p=o.className,m=o.autoplay,d=o.children,f=a(o,u),y=l(null),v=e({dots:!0,fade:!0,infinite:!0,slidesToShow:1,slidesToScroll:1,autoplay:m,speed:500,autoplaySpeed:2e3,cssEase:"linear"},f);return t(i,(function(){return{prev:function(){y.current.slickPrev()},next:function(){y.current.slickNext()}}})),s.createElement(n,r({className:c("carousel",p),ref:y},v),d)}));m.defaultProps={className:void 0,autoplay:!1,children:void 0},m.propTypes={className:p.string,autoplay:p.bool,children:p.arrayOf(p.any)};export{m as default};
+import { c as _objectWithoutProperties, b as _objectSpread2, _ as _extends } from './_rollupPluginBabelHelpers-fde6d1c6.js';
+import React__default, { forwardRef, useRef, useImperativeHandle } from 'react';
+import { s as styleInject, S as Slider, c as classNames } from './vendor-851c6356.js';
+import PropTypes from 'prop-types';
+import 'react-is';
+import '@material-ui/styles';
+import 'react-dom';
+
+var css_248z = ".carousel .slick-arrow {\n  display: none !important; }\n";
+styleInject(css_248z);
+
+var _excluded = ["className", "autoplay", "children"];
+var Carousel = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    autoplay = _ref.autoplay,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var sliderRef = useRef(null);
+  var settings = _objectSpread2({
+    dots: true,
+    fade: true,
+    infinite: true,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    autoplay: autoplay,
+    speed: 500,
+    autoplaySpeed: 2000,
+    cssEase: 'linear'
+  }, props);
+  useImperativeHandle(ref, function () {
+    return {
+      prev: function prev() {
+        sliderRef.current.slickPrev();
+      },
+      next: function next() {
+        sliderRef.current.slickNext();
+      }
+    };
+  });
+  return /*#__PURE__*/React__default.createElement(Slider, _extends({
+    className: classNames('carousel', className),
+    ref: sliderRef
+  }, settings), children);
+});
+Carousel.defaultProps = {
+  className: undefined,
+  autoplay: false,
+  children: undefined
+};
+
+/* Write props detail information and 'npm run updateStory' will help you generate stories's argTypes */
+Carousel.propTypes = {
+  /** Css Name */
+  className: PropTypes.string,
+  /** 自動撥放 */
+  autoplay: PropTypes.bool,
+  /** 子元件 */
+  children: PropTypes.arrayOf(PropTypes.any)
+};
+
+export { Carousel as default };

package/lib/components/Checkbox.js

@@ -1 +1,37 @@
-import{c as e,_ as o}from"./_rollupPluginBabelHelpers-fde6d1c6.js";import r from"react";import a from"prop-types";import{FormControlLabel as t,Checkbox as n}from"@material-ui/core";var l=["onCheck","disabled","children"],c=function(a){var c=a.onCheck,d=a.disabled,i=a.children,p=e(a,l);return r.createElement(t,{control:r.createElement(n,o({},p,{disabled:d,onChange:function(e){c(e&&e.target&&e.target.checked),e.stopPropagation()}})),label:i})};c.defaultProps={disabled:void 0,children:void 0,onCheck:function(){}},c.propTypes={disabled:a.bool,children:a.node,onCheck:a.func};export{c as default};
+import { c as _objectWithoutProperties, _ as _extends } from './_rollupPluginBabelHelpers-fde6d1c6.js';
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { FormControlLabel, Checkbox as Checkbox$1 } from '@material-ui/core';
+
+var _excluded = ["onCheck", "disabled", "children"];
+var Checkbox = function Checkbox(_ref) {
+  var onCheck = _ref.onCheck,
+    disabled = _ref.disabled,
+    children = _ref.children,
+    prop = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__default.createElement(FormControlLabel, {
+    control: /*#__PURE__*/React__default.createElement(Checkbox$1, _extends({}, prop, {
+      disabled: disabled,
+      onChange: function onChange(event) {
+        onCheck(event && event.target && event.target.checked);
+        event.stopPropagation();
+      }
+    })),
+    label: children
+  });
+};
+Checkbox.defaultProps = {
+  disabled: undefined,
+  children: undefined,
+  onCheck: function onCheck() {}
+};
+Checkbox.propTypes = {
+  /** 是否禁止使用 */
+  disabled: PropTypes.bool,
+  /** 顯示的內容值 */
+  children: PropTypes.node,
+  /** 勾選時的callback */
+  onCheck: PropTypes.func
+};
+
+export { Checkbox as default };

package/lib/components/CollapseContent.js

@@ -1 +1,181 @@
-import{a as e}from"./_rollupPluginBabelHelpers-fde6d1c6.js";import t,{useState as n,useRef as o,useEffect as l}from"react";import{s as r,c as a}from"./vendor-851c6356.js";import i from"prop-types";import{Typography as s}from"@material-ui/core";import{M as c}from"./MoreButton-f15ca38e.js";import"react-is";import"@material-ui/styles";import"react-dom";import"@material-ui/icons";const p=new(0,require("html-to-react").Parser),m=require("markdown-it")({html:!0,xhtmlOut:!0,breaks:!0,langPrefix:"language-",linkify:!1,typographer:!1,quotes:"“”‘’",highlight:()=>""});var d=e=>e&&0!==e.length?t.createElement("div",null,(e=>void 0===e?"":p.parse(m.render(e)))(e.replaceAll("\n\n","\n").split("\n").join("<div/><br/><div>"))):e;r(".collapseContent__desc {\n  font-size: 1.5rem !important;\n  text-indent: 3rem;\n  font-family: 'Noto Sans TC', 'Arial', sans-serif !important;\n  display: -webkit-box;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n  white-space: pre-wrap;\n  word-break: break-all; }\n  .collapseContent__desc p,\n  .collapseContent__desc pre {\n    margin: 0; }\n  .collapseContent__desc--1 {\n    -webkit-line-clamp: 1; }\n  .collapseContent__desc--2 {\n    -webkit-line-clamp: 2; }\n  .collapseContent__desc--3 {\n    -webkit-line-clamp: 3; }\n  .collapseContent__desc--4 {\n    -webkit-line-clamp: 4; }\n  .collapseContent__desc--5 {\n    -webkit-line-clamp: 5; }\n  .collapseContent__desc--10 {\n    -webkit-line-clamp: 10; }\n  .collapseContent__desc--lightHeight {\n    line-height: 2.25; }\n  .collapseContent__desc--expand {\n    -webkit-line-clamp: initial; }\n  .collapseContent__desc--indent {\n    text-indent: 3rem; }\n");var C=function(r){var i=r.className,p=r.content,m=r.textColor,C=r.lineClamp,_=r.useLightHeight,g=r.useTextIndent,h=r.formatMessage,u=r.primaryColor,f=r.secondaryColor,v=r.shadowColor;if(!p)return t.createElement(t.Fragment,null);var b=n(),w=e(b,2),x=w[0],y=w[1],k=n(),H=e(k,2),E=H[0],M=H[1],N=o();return l((function(){if(p&&N&&N.current){var e=N.current||{},t=e.clientHeight,n=e.scrollHeight;M(n>t)}}),[N,p]),t.createElement("div",{className:a("collapseContent",i)},t.createElement(s,{ref:N,variant:"inherit",className:a("collapseContent__desc","collapseContent__desc--".concat(C<=5?C:10),{"collapseContent__desc--indent":g},{"collapseContent__desc--expand":x},{"collapseContent__desc--lightHeight":_}),color:"textSecondary",style:{color:m}},d(p)),E&&t.createElement(c,{small:!0,primaryColor:u,secondaryColor:f,shadowColor:v,formatMessage:h,expand:x,setExpand:y}))};C.defaultProps={className:void 0,content:void 0,textColor:void 0,lineClamp:2,useLightHeight:void 0,useTextIndent:!0,formatMessage:void 0,primaryColor:"#271702",secondaryColor:"#aa8859",shadowColor:void 0},C.propTypes={className:i.string,content:i.string,textColor:i.string,lineClamp:i.number,useLightHeight:i.bool,useTextIndent:i.bool,formatMessage:i.func,primaryColor:i.string,secondaryColor:i.string,shadowColor:i.string};export{C as default};
+import { a as _slicedToArray } from './_rollupPluginBabelHelpers-fde6d1c6.js';
+import React__default, { useState, useRef, useEffect } from 'react';
+import { s as styleInject, c as classNames } from './vendor-851c6356.js';
+import PropTypes from 'prop-types';
+import { Typography } from '@material-ui/core';
+import { M as MoreButton } from './MoreButton-f15ca38e.js';
+import 'react-is';
+import '@material-ui/styles';
+import 'react-dom';
+import '@material-ui/icons';
+
+const HtmlToReactParser = require('html-to-react').Parser;
+const htmlToReactParser = new HtmlToReactParser();
+
+// full options list (defaults)
+const md = require('markdown-it')({
+  html: true,
+  // Enable HTML tags in source
+  xhtmlOut: true,
+  // Use '/' to close single tags (<br />).
+  // This is only for full CommonMark compatibility.
+  breaks: true,
+  // Convert '\n' in paragraphs into <br>
+  langPrefix: 'language-',
+  // CSS language prefix for fenced blocks. Can be
+  // useful for external highlighters.
+  linkify: false,
+  // Autoconvert URL-like text to links
+
+  // Enable some language-neutral replacement + quotes beautification
+  // For the full list of replacements, see https://github.com/markdown-it/markdown-it/blob/master/lib/rules_core/replacements.js
+  typographer: false,
+  // Double + single quotes replacement pairs, when typographer enabled,
+  // and smartquotes on. Could be either a String or an Array.
+  //
+  // For example, you can use '«»„“' for Russian, '„“‚‘' for German,
+  // and ['«\xA0', '\xA0»', '‹\xA0', '\xA0›'] for French (including nbsp).
+  quotes: '“”‘’',
+  // Highlighter function. Should return escaped HTML,
+  // or '' if the source string is not changed and should be escaped externally.
+  // If result starts with <pre... internal wrapper is skipped.
+  highlight( /* str, lang */
+  ) {
+    return '';
+  }
+});
+
+// eslint-disable-next-line import/prefer-default-export
+const convert2HtmlEntities = text => {
+  if (text === undefined) return '';
+  return htmlToReactParser.parse(md.render(text));
+};
+
+/* eslint-disable react/no-danger */
+var textDivider = (text => {
+  if (!text || text.length === 0) return text;
+  return (
+    /*#__PURE__*/
+    // <div
+    // 	dangerouslySetInnerHTML={{
+    // 		__html: `<div>${convert2HtmlEntities(text.replaceAll('\n\n', '\n').split('\n').join('<div/><br/><div>'))}</div>`,
+    // 	}}
+    // />
+    React__default.createElement("div", null, convert2HtmlEntities(text.replaceAll('\n\n', '\n').split('\n').join('<div/><br/><div>')))
+  );
+});
+
+var css_248z = ".collapseContent__desc {\n  font-size: 1.5rem !important;\n  text-indent: 3rem;\n  font-family: 'Noto Sans TC', 'Arial', sans-serif !important;\n  display: -webkit-box;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n  white-space: pre-wrap;\n  word-break: break-all; }\n  .collapseContent__desc p,\n  .collapseContent__desc pre {\n    margin: 0; }\n  .collapseContent__desc--1 {\n    -webkit-line-clamp: 1; }\n  .collapseContent__desc--2 {\n    -webkit-line-clamp: 2; }\n  .collapseContent__desc--3 {\n    -webkit-line-clamp: 3; }\n  .collapseContent__desc--4 {\n    -webkit-line-clamp: 4; }\n  .collapseContent__desc--5 {\n    -webkit-line-clamp: 5; }\n  .collapseContent__desc--10 {\n    -webkit-line-clamp: 10; }\n  .collapseContent__desc--lightHeight {\n    line-height: 2.25; }\n  .collapseContent__desc--expand {\n    -webkit-line-clamp: initial; }\n  .collapseContent__desc--indent {\n    text-indent: 3rem; }\n";
+styleInject(css_248z);
+
+// const remUnit = 16;
+
+var CollapseContent = function CollapseContent(props) {
+  var className = props.className,
+    content = props.content,
+    textColor = props.textColor,
+    lineClamp = props.lineClamp,
+    useLightHeight = props.useLightHeight,
+    useTextIndent = props.useTextIndent;
+  var formatMessage = props.formatMessage,
+    primaryColor = props.primaryColor,
+    secondaryColor = props.secondaryColor,
+    shadowColor = props.shadowColor;
+  if (!content) return /*#__PURE__*/React__default.createElement(React__default.Fragment, null); // 元件不可以回傳undefined storybook會該該叫
+
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    expand = _useState2[0],
+    setExpand = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    overflow = _useState4[0],
+    setOverflow = _useState4[1];
+  var contentRef = useRef();
+  useEffect(function () {
+    if (!content) return;
+    if (contentRef && contentRef.current) {
+      // const childrenDOM = contentRef.current.children || [];
+      // const dom = childrenDOM.length === 1 ? contentRef.current.children[0] : contentRef.current;
+      var dom = contentRef.current;
+      var _ref = dom || {},
+        clientHeight = _ref.clientHeight,
+        scrollHeight = _ref.scrollHeight;
+      setOverflow(scrollHeight > clientHeight);
+    }
+  }, [contentRef, content]);
+
+  // const { fontSizeRem, textIndent } = useMemo(
+  // 	() => ({ fontSizeRem: `${fontSize / remUnit}rem`, textIndent: `${(fontSize / remUnit) * 2}rem` }),
+  // 	[fontSize]
+  // );
+
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNames('collapseContent', className)
+  }, /*#__PURE__*/React__default.createElement(Typography, {
+    ref: contentRef,
+    variant: "inherit",
+    className: classNames('collapseContent__desc', "collapseContent__desc--".concat(lineClamp <= 5 ? lineClamp : 10), {
+      'collapseContent__desc--indent': useTextIndent
+    }, {
+      'collapseContent__desc--expand': expand
+    }, {
+      'collapseContent__desc--lightHeight': useLightHeight
+    }),
+    color: "textSecondary",
+    style: {
+      color: textColor
+    }
+  }, textDivider(content)), overflow && /*#__PURE__*/React__default.createElement(MoreButton, {
+    small: true,
+    primaryColor: primaryColor,
+    secondaryColor: secondaryColor,
+    shadowColor: shadowColor,
+    formatMessage: formatMessage,
+    expand: expand,
+    setExpand: setExpand
+  }));
+};
+CollapseContent.defaultProps = {
+  className: undefined,
+  content: undefined,
+  textColor: undefined,
+  // fontSize: 24,
+  lineClamp: 2,
+  useLightHeight: undefined,
+  useTextIndent: true,
+  formatMessage: undefined,
+  primaryColor: '#271702',
+  // default為文學網站的主色系
+  secondaryColor: '#aa8859',
+  // default為文學網站的次色系
+  shadowColor: undefined
+};
+
+/* Write props detail information and 'npm run updateStory' will help you generate stories's argTypes */
+CollapseContent.propTypes = {
+  /** Css Name */
+  className: PropTypes.string,
+  /** 內文 */
+  content: PropTypes.string,
+  /** 內文字體顏色 */
+  textColor: PropTypes.string,
+  /** 內文字大小 */
+  // fontSize: PropTypes.number,
+  /** 多行文字縮減 */
+  lineClamp: PropTypes.number,
+  /** 是否增加lightHeight(2.25) */
+  useLightHeight: PropTypes.bool,
+  /** 文字前面是否空格 */
+  useTextIndent: PropTypes.bool,
+  /** 語系翻譯的formateMessag(useIntl) */
+  formatMessage: PropTypes.func,
+  /** 顯示更多按鈕主色系顏色 */
+  primaryColor: PropTypes.string,
+  /** 顯示更多按鈕次色系顏色 */
+  secondaryColor: PropTypes.string,
+  /** 顯示更多按鈕影子顏色 */
+  shadowColor: PropTypes.string
+};
+
+export { CollapseContent as default };