@daoyi/nmtl-ui 2.0.1-beta.14 → 2.0.1-beta.140

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,235 @@
-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-c33afcb5.js';
+import PropTypes from 'prop-types';
+import { Typography } from '@material-ui/core';
+import { M as MoreButton } from './MoreButton-0b5aaef3.js';
+import { getIntl } from './globalConfig';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+import '@material-ui/icons';
+
+/*
+ * 在 HTML 字串裡另開新視窗的連結文字後面補「（另開新視窗）」
+ * （數位部人工檢測 HM1240404E，2026-10-07：要直接寫在連結文字上，不能只放 title）。
+ * convert2HtmlEntities 與時間軸資料處理共用；不對外匯出。
+ */
+const HINT_CLASS = 'newwindow-hint';
+const hasHint = text => /另開新視窗|另开新窗口|new window/i.test(text);
+const newWindowHintText = () => getIntl().formatMessage({
+  id: 'aria.newWindow'
+});
+
+/**
+ * @param {string} html
+ * @param {object} [options]
+ * @param {boolean} [options.treatMissingTargetAsBlank] 沒寫 target 的連結也當成另開新視窗
+ *   （@daoyi/timeline 的 DOMPurify 會把它們強制改成 _blank）
+ * @param {string} [options.className] 提示 span 的 class
+ */
+const addNewWindowHint = function (html) {
+  let {
+    treatMissingTargetAsBlank = false,
+    className = HINT_CLASS
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const hasLinks = typeof html === 'string' && (html.indexOf('<a') !== -1 || html.indexOf('data-goto') !== -1);
+  if (!hasLinks || typeof DOMParser === 'undefined') return html;
+  const doc = new DOMParser().parseFromString(`<body>${html}</body>`, 'text/html');
+  const hint = newWindowHintText();
+  let changed = false;
+  /* 時間軸的站內明細連結是不輸出 href 的 span role="link" data-goto（各站 Chronology 以 window.open 另開分頁），
+     同樣要提示（2026-10-08 人工測試回饋） */
+  const selector = treatMissingTargetAsBlank ? 'a[href], [data-goto]' : 'a[href]';
+  doc.body.querySelectorAll(selector).forEach(a => {
+    const target = a.hasAttribute('data-goto') ? '_blank' : (a.getAttribute('target') || (treatMissingTargetAsBlank ? '_blank' : '')).toLowerCase();
+    if (target !== '_blank') return;
+    if (a.tagName === 'A' && !a.getAttribute('rel')) a.setAttribute('rel', 'noopener noreferrer');
+    if (hasHint(a.textContent)) return;
+    const span = doc.createElement('span');
+    span.className = className;
+    span.textContent = hint;
+    a.appendChild(span);
+    changed = true;
+  });
+  return changed ? doc.body.innerHTML : html;
+};
+
+const HtmlToReactParser = require('html-to-react').Parser;
+const DOMPurify = require('dompurify');
+const htmlToReactParser = new HtmlToReactParser();
+
+/* 後台文稿以 markdown-it（html: true）轉換，原始 HTML 會直接放行；轉成 React 之前必須先消毒，
+   擋掉 <script>、onerror、javascript: 等 XSS 向量（內容雖來自後台，仍做縱深防禦；比照主站 nmtl-web htmlEntities.js）。
+   用獨立實例：@daoyi/timeline 在全域 DOMPurify 掛了 hook，會把所有沒寫 target 的連結強制改成另開新視窗 */
+const purify = DOMPurify(typeof window !== 'undefined' ? window : undefined);
+const sanitize = html => purify.isSupported ? purify.sanitize(html, {
+  ADD_ATTR: ['target']
+}) : html;
+
+// 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 '';
+  /* 先消毒，再替 target="_blank" 的連結文字補「（另開新視窗）」（HM1240404E，2026-10-07） */
+  return htmlToReactParser.parse(addNewWindowHint(sanitize(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}\n.collapseContent__desc p,\n.collapseContent__desc pre {\n  margin: 0;\n}\n.collapseContent__desc--1 {\n  -webkit-line-clamp: 1;\n}\n.collapseContent__desc--2 {\n  -webkit-line-clamp: 2;\n}\n.collapseContent__desc--3 {\n  -webkit-line-clamp: 3;\n}\n.collapseContent__desc--4 {\n  -webkit-line-clamp: 4;\n}\n.collapseContent__desc--5 {\n  -webkit-line-clamp: 5;\n}\n.collapseContent__desc--10 {\n  -webkit-line-clamp: 10;\n}\n.collapseContent__desc--lightHeight {\n  line-height: 2.25;\n}\n.collapseContent__desc--expand {\n  -webkit-line-clamp: initial;\n}\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 };