@hanwenbo/x-taro-ui 0.0.1

package/lib/components/showMoreText/showMoreText.js

@@ -0,0 +1,329 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/showMoreText/showMoreText.tsx
+var showMoreText_exports = {};
+__export(showMoreText_exports, {
+  default: () => showMoreText_default
+});
+module.exports = __toCommonJS(showMoreText_exports);
+var import_react = __toESM(require("react"));
+var import_taro = __toESM(require("@tarojs/taro"));
+var import_components = require("@tarojs/components");
+var import_measure = require("../../adapters/miniapp/measure");
+var import_theme = require("../../theme");
+var import_utils = require("../../utils");
+var import_locale = require("../../utils/locale");
+var import_configProvider = require("../configProvider");
+var MOBILE_ROOT_REM_SCALE = 14 / 16;
+function getTextContent(content) {
+  if (typeof content === "string" || typeof content === "number") return String(content);
+  if (Array.isArray(content)) {
+    const text = content.map(getTextContent).filter(Boolean).join(" ").trim();
+    return text || null;
+  }
+  if (import_react.default.isValidElement(content)) return getTextContent(content.props.children);
+  return null;
+}
+function actionAlignment(position) {
+  if (position === "left") return "flex-start";
+  if (position === "center") return "center";
+  return "flex-end";
+}
+var ShowMoreText = (props) => {
+  const hasExpandedProp = Object.prototype.hasOwnProperty.call(props, "expanded");
+  const {
+    content,
+    children,
+    lines,
+    numberOfLines = lines ?? 3,
+    charsPerLine,
+    expanded,
+    defaultExpanded = false,
+    moreText,
+    lessText,
+    togglePosition = "bottom",
+    onExpandedChange,
+    onToggle,
+    className,
+    style,
+    textStyle,
+    buttonStyle,
+    actionTextStyle,
+    actionPosition = "right",
+    actionContainerClassName,
+    actionContainerStyle,
+    textContainerClassName,
+    textContainerStyle,
+    disabled = false,
+    testID,
+    onClick
+  } = props;
+  const config = (0, import_configProvider.useConfigProvider)();
+  const { colors, spacing, motion, typography } = (0, import_theme.useTokens)();
+  const resolvedContent = content ?? children ?? "";
+  const plainText = getTextContent(resolvedContent);
+  const lineCount = Math.max(1, Math.floor(numberOfLines) || 1);
+  const fallbackOverflow = plainText !== null && plainText.length > lineCount * Math.max(1, charsPerLine ?? 20);
+  const [innerExpanded, setInnerExpanded] = (0, import_react.useState)(defaultExpanded);
+  const [isOverflowing, setIsOverflowing] = (0, import_react.useState)(fallbackOverflow);
+  const isExpanded = hasExpandedProp ? Boolean(expanded) : innerExpanded;
+  const mountedRef = (0, import_react.useRef)(true);
+  const reactId = (0, import_react.useId)();
+  const componentId = (0, import_react.useMemo)(
+    () => `${config.prefixCls}-show-more-${reactId.replace(/[^a-zA-Z0-9_-]/g, "")}`,
+    [config.prefixCls, reactId]
+  );
+  const contentId = `${componentId}-body`;
+  const collapsedMeasureId = `${componentId}-measure-collapsed`;
+  const fullMeasureId = `${componentId}-measure-full`;
+  const finalMoreText = moreText ?? (0, import_locale.resolveLocaleText)(config.locale, "common.expand", "展开");
+  const finalLessText = lessText ?? (0, import_locale.resolveLocaleText)(config.locale, "common.collapse", "收起");
+  const checkOverflow = (0, import_react.useCallback)(() => {
+    if (plainText === null) {
+      if (mountedRef.current) setIsOverflowing(false);
+      return;
+    }
+    const runtime = globalThis;
+    const ownerDocument = runtime["document"];
+    const readDomHeight = (id) => {
+      var _a, _b;
+      const element = (_a = ownerDocument == null ? void 0 : ownerDocument.getElementById) == null ? void 0 : _a.call(ownerDocument, id);
+      if (!element) return 0;
+      return Math.max(((_b = element.getBoundingClientRect) == null ? void 0 : _b.call(element).height) ?? 0, element.clientHeight ?? 0);
+    };
+    const collapsedHeight = readDomHeight(collapsedMeasureId);
+    const fullHeight = readDomHeight(fullMeasureId);
+    if (collapsedHeight > 0 && fullHeight > 0) {
+      if (mountedRef.current) setIsOverflowing(fullHeight > collapsedHeight + 1);
+      return;
+    }
+    if (mountedRef.current) setIsOverflowing(fallbackOverflow);
+    void Promise.all([
+      (0, import_measure.measureNode)(`#${collapsedMeasureId}`),
+      (0, import_measure.measureNode)(`#${fullMeasureId}`)
+    ]).then(([collapsedRect, fullRect]) => {
+      if (!mountedRef.current || !collapsedRect || !fullRect) return;
+      if (collapsedRect.height <= 0 || fullRect.height <= 0) return;
+      setIsOverflowing(fullRect.height > collapsedRect.height + 1);
+    });
+  }, [collapsedMeasureId, fallbackOverflow, fullMeasureId, plainText, textStyle]);
+  (0, import_react.useEffect)(() => {
+    mountedRef.current = true;
+    let frame;
+    let timer;
+    const runtime = globalThis;
+    const scheduleFrame = runtime["requestAnimationFrame"];
+    const cancelFrame = runtime["cancelAnimationFrame"];
+    const scheduleCheck = () => {
+      var _a, _b;
+      checkOverflow();
+      (_b = (_a = import_taro.default).nextTick) == null ? void 0 : _b.call(_a, checkOverflow);
+      if (typeof scheduleFrame === "function") {
+        if (frame !== void 0) cancelFrame == null ? void 0 : cancelFrame(frame);
+        frame = scheduleFrame(() => {
+          frame = void 0;
+          checkOverflow();
+        });
+      }
+      if (timer !== void 0) clearTimeout(timer);
+      timer = setTimeout(checkOverflow, 40);
+    };
+    scheduleCheck();
+    if (typeof import_taro.default.onWindowResize === "function") import_taro.default.onWindowResize(scheduleCheck);
+    return () => {
+      var _a, _b;
+      mountedRef.current = false;
+      if (frame !== void 0) cancelFrame == null ? void 0 : cancelFrame(frame);
+      if (timer !== void 0) clearTimeout(timer);
+      (_b = (_a = import_taro.default).offWindowResize) == null ? void 0 : _b.call(_a, scheduleCheck);
+    };
+  }, [checkOverflow]);
+  const handleToggle = (event) => {
+    var _a;
+    (_a = event == null ? void 0 : event.stopPropagation) == null ? void 0 : _a.call(event);
+    if (disabled) return;
+    const nextExpanded = !isExpanded;
+    if (!hasExpandedProp) setInnerExpanded(nextExpanded);
+    onExpandedChange == null ? void 0 : onExpandedChange(nextExpanded);
+    onToggle == null ? void 0 : onToggle(nextExpanded);
+  };
+  const sharedTextStyle = {
+    boxSizing: "border-box",
+    width: "100%",
+    minWidth: 0,
+    overflowWrap: "anywhere",
+    color: `var(--x-show-more-text-foreground, ${colors.foreground})`,
+    fontSize: typography.sizes.sm,
+    lineHeight: "22px",
+    ...textStyle
+  };
+  const contentStyle = {
+    ...sharedTextStyle,
+    display: isExpanded ? "block" : "-webkit-box",
+    overflow: isExpanded ? "visible" : "hidden",
+    WebkitBoxOrient: isExpanded ? void 0 : "vertical",
+    WebkitLineClamp: isExpanded ? void 0 : lineCount
+  };
+  const measurementBaseStyle = {
+    ...sharedTextStyle,
+    pointerEvents: "none"
+  };
+  const toggleNode = isOverflowing ? /* @__PURE__ */ import_react.default.createElement(
+    import_components.Text,
+    {
+      "data-slot": "show-more-text-action-button",
+      "data-expanded": isExpanded ? "true" : "false",
+      role: "button",
+      ariaLabel: getTextContent(isExpanded ? finalLessText : finalMoreText) ?? (isExpanded ? "收起" : "展开"),
+      className: `${config.prefixCls}-show-more-text__action-button`,
+      onClick: handleToggle,
+      style: {
+        color: `var(--x-show-more-text-action, ${colors.primary})`,
+        cursor: disabled ? "not-allowed" : "pointer",
+        fontSize: typography.sizes.sm,
+        lineHeight: "20px",
+        fontWeight: "500",
+        opacity: disabled ? 0.5 : 1,
+        transition: `color ${motion.durationsMs.emphasis}ms ${motion.easing.standard}`,
+        ...buttonStyle,
+        ...actionTextStyle
+      }
+    },
+    isExpanded ? finalLessText : finalMoreText
+  ) : null;
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_components.View,
+    {
+      "data-slot": "show-more-text",
+      "data-expanded": isExpanded ? "true" : "false",
+      "data-overflowing": isOverflowing ? "true" : "false",
+      "data-disabled": disabled ? "true" : void 0,
+      "data-testid": testID,
+      className: (0, import_utils.classNames)(`${config.prefixCls}-show-more-text`, className),
+      onClick,
+      style: {
+        boxSizing: "border-box",
+        display: "flex",
+        width: "100%",
+        maxWidth: "100%",
+        minWidth: 0,
+        flexDirection: "column",
+        gap: spacing[2] * MOBILE_ROOT_REM_SCALE,
+        color: `var(--x-show-more-text-foreground, ${colors.foreground})`,
+        fontSize: typography.sizes.sm,
+        lineHeight: "22px",
+        ...style
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        "data-slot": "show-more-text-content",
+        className: (0, import_utils.classNames)(
+          `${config.prefixCls}-show-more-text__content`,
+          textContainerClassName
+        ),
+        style: {
+          position: "relative",
+          boxSizing: "border-box",
+          width: "100%",
+          minWidth: 0,
+          ...textContainerStyle
+        }
+      },
+      plainText === null ? resolvedContent : /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          id: contentId,
+          "data-slot": "show-more-text-body",
+          className: `${config.prefixCls}-show-more-text__body`,
+          style: contentStyle
+        },
+        /* @__PURE__ */ import_react.default.createElement(import_components.Text, { style: { color: "inherit", fontSize: "inherit", lineHeight: "inherit" } }, plainText),
+        togglePosition === "inline" && toggleNode ? /* @__PURE__ */ import_react.default.createElement(import_components.Text, null, " ", toggleNode) : null
+      ),
+      plainText === null ? null : /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          style: {
+            position: "absolute",
+            zIndex: -1,
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: 0,
+            overflow: "hidden",
+            visibility: "hidden",
+            pointerEvents: "none"
+          }
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            id: collapsedMeasureId,
+            style: {
+              ...measurementBaseStyle,
+              display: "-webkit-box",
+              overflow: "hidden",
+              WebkitBoxOrient: "vertical",
+              WebkitLineClamp: lineCount
+            }
+          },
+          /* @__PURE__ */ import_react.default.createElement(import_components.Text, { style: { color: "inherit", fontSize: "inherit", lineHeight: "inherit" } }, plainText)
+        ),
+        /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            id: fullMeasureId,
+            style: { ...measurementBaseStyle, display: "block", overflow: "visible" }
+          },
+          /* @__PURE__ */ import_react.default.createElement(import_components.Text, { style: { color: "inherit", fontSize: "inherit", lineHeight: "inherit" } }, plainText)
+        )
+      )
+    ),
+    togglePosition === "bottom" && toggleNode ? /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        "data-slot": "show-more-text-action",
+        className: (0, import_utils.classNames)(
+          `${config.prefixCls}-show-more-text__action`,
+          actionContainerClassName
+        ),
+        style: {
+          display: "flex",
+          justifyContent: actionAlignment(actionPosition),
+          ...actionContainerStyle
+        }
+      },
+      toggleNode
+    ) : null
+  );
+};
+ShowMoreText.displayName = "ShowMoreText";
+var showMoreText_default = ShowMoreText;

package/lib/components/showMoreText/types.d.ts

@@ -0,0 +1,33 @@
+import type { CSSProperties, ReactNode } from 'react';
+export interface ShowMoreTextProps {
+    /** Backward-compatible shortcut for children. */
+    content?: ReactNode;
+    children?: ReactNode;
+    /** Backward-compatible alias for numberOfLines. */
+    lines?: number;
+    numberOfLines?: number;
+    /** Pre-layout overflow fallback; H5 and mini-program runtimes still use real node measurement. */
+    charsPerLine?: number;
+    expanded?: boolean;
+    defaultExpanded?: boolean;
+    moreText?: ReactNode;
+    lessText?: ReactNode;
+    /** Backward-compatible action placement alias. */
+    togglePosition?: 'bottom' | 'inline';
+    onExpandedChange?: (expanded: boolean) => void;
+    onToggle?: (expanded: boolean) => void;
+    className?: string;
+    style?: CSSProperties;
+    textStyle?: CSSProperties;
+    buttonStyle?: CSSProperties;
+    actionTextStyle?: CSSProperties;
+    actionPosition?: 'left' | 'center' | 'right';
+    actionContainerClassName?: string;
+    actionContainerStyle?: CSSProperties;
+    textContainerClassName?: string;
+    textContainerStyle?: CSSProperties;
+    disabled?: boolean;
+    testID?: string;
+    onClick?: (event: unknown) => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/components/showMoreText/types.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/showMoreText/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

package/lib/components/sideBar/index.d.ts

@@ -0,0 +1,5 @@
+export * from './types';
+export { SideBar, SideBarItem } from './sideBar';
+export { SideBar as Sidebar } from './sideBar';
+export { default } from './sideBar';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/sideBar/index.js

@@ -0,0 +1,49 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/sideBar/index.ts
+var index_exports = {};
+__export(index_exports, {
+  SideBar: () => import_sideBar.SideBar,
+  SideBarItem: () => import_sideBar.SideBarItem,
+  Sidebar: () => import_sideBar2.SideBar,
+  default: () => import_sideBar3.default
+});
+module.exports = __toCommonJS(index_exports);
+__reExport(index_exports, require("./types"), module.exports);
+var import_sideBar = require("./sideBar");
+var import_sideBar2 = require("./sideBar");
+var import_sideBar3 = __toESM(require("./sideBar"));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SideBar,
+  SideBarItem,
+  Sidebar,
+  ...require("./types")
+});

package/lib/components/sideBar/sideBar.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { SideBarItemProps, SideBarProps } from './types';
+export declare const SideBarItem: React.FC<SideBarItemProps>;
+export declare const SideBar: React.FC<SideBarProps> & {
+    Item: typeof SideBarItem;
+};
+export default SideBar;
+//# sourceMappingURL=sideBar.d.ts.map