@daoyi/nmtl-ui 2.0.1-beta.7 → 2.0.1-beta.71

package/lib/components/Checkbox.js

@@ -1 +1,37 @@
-import{c as e,_ as o}from"./_rollupPluginBabelHelpers-ec4e2a53.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,i=a.disabled,d=a.children,p=e(a,l);return r.createElement(t,{control:r.createElement(n,o({},p,{disabled:i,onChange:function(e){c(e&&e.target&&e.target.checked),e.stopPropagation()}})),label:d})};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-a52356f6.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,179 @@
-import e,{useState as n,useRef as t,useEffect as o}from"react";import{c as l}from"./index-11391ca3.js";import a from"prop-types";import{Typography as r}from"@material-ui/core";import s from"./MoreButton.js";import{s as i}from"./style-inject.es-c875d022.js";import"@material-ui/icons";i(".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");const c=a=>{const{className:i,content:c,textColor:p,lineClamp:d,useLightHeight:m,useTextIndent:C}=a,{formatMessage:_,primaryColor:g,secondaryColor:h,shadowColor:f}=a;if(!c)return e.createElement(e.Fragment,null);const[u,b]=n(),[w,x]=n(),v=t();return o((()=>{if(c&&v&&v.current){const e=v.current,{clientHeight:n,scrollHeight:t}=e||{};x(t>n)}}),[v,c]),e.createElement("div",{className:l("collapseContent",i)},e.createElement(r,{ref:v,variant:"inherit",className:l("collapseContent__desc",`collapseContent__desc--${d<=5?d:10}`,{"collapseContent__desc--indent":C},{"collapseContent__desc--expand":u},{"collapseContent__desc--lightHeight":m}),color:"textSecondary",style:{color:p}},(y=c)&&0!==y.length?e.createElement("div",{dangerouslySetInnerHTML:{__html:`<div>${y.replaceAll("\n\n","\n").split("\n").join("<div/><br/><div>")}</div>`}}):y),w&&e.createElement(s,{small:!0,primaryColor:g,secondaryColor:h,shadowColor:f,formatMessage:_,expand:u,setExpand:b}));var 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:a.string,content:a.string,textColor:a.string,lineClamp:a.number,useLightHeight:a.bool,useTextIndent:a.bool,formatMessage:a.func,primaryColor:a.string,secondaryColor:a.string,shadowColor:a.string};export{c as default};
+import { a as _slicedToArray } from './_rollupPluginBabelHelpers-a52356f6.js';
+import React__default, { useState, useRef, useEffect } from 'react';
+import { c as classNames } from './index-ef96775f.js';
+import PropTypes from 'prop-types';
+import { Typography } from '@material-ui/core';
+import { M as MoreButton } from './MoreButton-6b323fe4.js';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+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 };