@hanwenbo/x-taro-ui 0.0.1

package/lib/components/notification/notification.js

@@ -0,0 +1,568 @@
+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/notification/notification.tsx
+var notification_exports = {};
+__export(notification_exports, {
+  InternalNotification: () => InternalNotification,
+  Notification: () => Notification,
+  NotificationPortalHost: () => NotificationPortalHost,
+  default: () => notification_default
+});
+module.exports = __toCommonJS(notification_exports);
+var import_react = __toESM(require("react"));
+var import_components = require("@tarojs/components");
+var import_patterns = require("../../patterns");
+var import_theme = require("../../theme");
+var import_utils = require("../../utils");
+var import_taroProps = require("../../utils/taroProps");
+var import_configProvider = require("../configProvider");
+var import_icon = require("../icon");
+var import_tokens = require("./tokens");
+var controllers = [];
+function registerController(controller) {
+  controllers.push(controller);
+  return () => {
+    const remainingControllers = controllers.filter((item) => item !== controller);
+    controllers.splice(0, controllers.length, ...remainingControllers);
+  };
+}
+function activeController() {
+  for (let index = controllers.length - 1; index >= 0; index -= 1) {
+    if (controllers[index].fixed) return controllers[index];
+  }
+  return controllers[controllers.length - 1];
+}
+function normalizeTone(value) {
+  if (value === "fail") return "error";
+  if (value === "default" || value === "info" || value === "success" || value === "warning" || value === "error") {
+    return value;
+  }
+  return "info";
+}
+function renderNode(content, textStyle) {
+  if (typeof content === "string" || typeof content === "number") {
+    return /* @__PURE__ */ import_react.default.createElement(import_components.Text, { style: textStyle }, content);
+  }
+  return content;
+}
+function getNodeLabel(content, fallback) {
+  return typeof content === "string" || typeof content === "number" ? String(content) : fallback;
+}
+var NotificationControl = ({
+  ariaLabel,
+  children,
+  className,
+  dataSlot,
+  onPress,
+  scale = 0.97,
+  style
+}) => {
+  const { theme } = (0, import_theme.useTheme)();
+  const [focused, setFocused] = (0, import_react.useState)(false);
+  const pressable = (0, import_patterns.usePressable)({ onPress, scale });
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_components.View,
+    {
+      "data-slot": dataSlot,
+      "data-state": pressable.pressed ? "pressed" : "idle",
+      ...(0, import_taroProps.resolveTaroAccessibilityProps)("button", ariaLabel),
+      tabIndex: 0,
+      className,
+      onFocus: () => setFocused(true),
+      onBlur: () => setFocused(false),
+      onKeyDown: (event) => {
+        var _a;
+        const key = event.key;
+        if (key !== "Enter" && key !== " " && key !== "Spacebar") return;
+        (_a = event.preventDefault) == null ? void 0 : _a.call(event);
+        onPress();
+      },
+      ...pressable.handlers,
+      style: {
+        ...style,
+        ...pressable.style,
+        cursor: "pointer",
+        boxShadow: focused ? `0 0 0 2px ${(0, import_theme.withOpacity)(theme.colors.ring, 0.28)}` : "none"
+      }
+    },
+    children
+  );
+};
+var InternalNotification = (props) => {
+  const {
+    messageKey = "notification",
+    title,
+    description,
+    content,
+    icon,
+    tone = "default",
+    type,
+    variant = "soft",
+    duration = 3e3,
+    visible,
+    fixed = false,
+    placement = "top",
+    closable = false,
+    actions = [],
+    items,
+    emptyText = "暂无通知",
+    onClose,
+    onActionClick,
+    children,
+    className,
+    style
+  } = props;
+  const config = (0, import_configProvider.useConfigProvider)();
+  const { theme } = (0, import_theme.useTheme)();
+  const [hiddenKeys, setHiddenKeys] = (0, import_react.useState)([]);
+  const [imperativeParams, setImperativeParams] = (0, import_react.useState)(null);
+  const [imperativeVisible, setImperativeVisible] = (0, import_react.useState)(false);
+  const imperativeParamsRef = (0, import_react.useRef)(null);
+  const imperativeResetTimerRef = (0, import_react.useRef)(null);
+  const declarativeDescription = content ?? description ?? children;
+  const declarativeTone = normalizeTone(type ?? tone);
+  const controlledVisibility = visible !== void 0;
+  const hasItemCollection = items !== void 0;
+  const previousVisibleRef = (0, import_react.useRef)(visible);
+  const clearImperativeResetTimer = (0, import_react.useCallback)(() => {
+    if (!imperativeResetTimerRef.current) return;
+    clearTimeout(imperativeResetTimerRef.current);
+    imperativeResetTimerRef.current = null;
+  }, []);
+  const scheduleImperativeReset = (0, import_react.useCallback)(() => {
+    clearImperativeResetTimer();
+    imperativeResetTimerRef.current = setTimeout(() => {
+      imperativeParamsRef.current = null;
+      setImperativeParams(null);
+      imperativeResetTimerRef.current = null;
+    }, import_tokens.notificationTypography.transitionDuration);
+  }, [clearImperativeResetTimer]);
+  const closeImperative = (0, import_react.useCallback)(
+    (notify) => {
+      var _a;
+      const current = imperativeParamsRef.current;
+      if (!current) return;
+      setImperativeVisible(false);
+      if (notify) {
+        (_a = current.onClose) == null ? void 0 : _a.call(current);
+        onClose == null ? void 0 : onClose("notification-imperative");
+      }
+      scheduleImperativeReset();
+    },
+    [onClose, scheduleImperativeReset]
+  );
+  const controller = (0, import_react.useMemo)(
+    () => ({
+      fixed,
+      show: (params) => {
+        clearImperativeResetTimer();
+        setHiddenKeys([]);
+        const nextParams = { duration: 3e3, ...params };
+        imperativeParamsRef.current = nextParams;
+        setImperativeParams(nextParams);
+        setImperativeVisible(true);
+      },
+      hide: () => {
+        setHiddenKeys([]);
+        closeImperative(false);
+      }
+    }),
+    [clearImperativeResetTimer, closeImperative, fixed]
+  );
+  (0, import_react.useEffect)(() => registerController(controller), [controller]);
+  (0, import_react.useEffect)(
+    () => () => {
+      clearImperativeResetTimer();
+    },
+    [clearImperativeResetTimer]
+  );
+  (0, import_react.useEffect)(() => {
+    if (visible === true && previousVisibleRef.current === false) {
+      setHiddenKeys([]);
+    }
+    previousVisibleRef.current = visible;
+  }, [visible]);
+  const resolvedItems = (0, import_react.useMemo)(() => {
+    if (imperativeParams) {
+      return [
+        {
+          key: "notification-imperative",
+          title: imperativeParams.title,
+          description: imperativeParams.content,
+          tone: normalizeTone(imperativeParams.type),
+          duration: imperativeParams.duration,
+          closable: false
+        }
+      ];
+    }
+    if (items == null ? void 0 : items.length) {
+      return items.map((item) => ({
+        ...item,
+        tone: normalizeTone(item.type ?? item.tone ?? declarativeTone)
+      }));
+    }
+    if (title === void 0 && declarativeDescription === void 0) {
+      return [];
+    }
+    return [
+      {
+        key: messageKey,
+        title,
+        description: declarativeDescription,
+        icon,
+        tone: declarativeTone,
+        variant,
+        duration,
+        closable,
+        actions
+      }
+    ];
+  }, [
+    actions,
+    closable,
+    declarativeDescription,
+    declarativeTone,
+    duration,
+    icon,
+    imperativeParams,
+    items,
+    messageKey,
+    title,
+    variant
+  ]);
+  (0, import_react.useEffect)(() => {
+    const currentKeys = new Set(resolvedItems.map((item) => item.key));
+    setHiddenKeys((previous) => {
+      const next = previous.filter((key) => currentKeys.has(key));
+      return next.length === previous.length ? previous : next;
+    });
+  }, [resolvedItems]);
+  const notifyClosed = (0, import_react.useCallback)(
+    (key) => {
+      onClose == null ? void 0 : onClose(key);
+    },
+    [onClose]
+  );
+  const closeNotification = (0, import_react.useCallback)(
+    (key) => {
+      if (key === "notification-imperative") {
+        closeImperative(true);
+        return;
+      }
+      if (controlledVisibility && !hasItemCollection) {
+        notifyClosed(key);
+        return;
+      }
+      setHiddenKeys((previous) => Array.from(/* @__PURE__ */ new Set([...previous, key])));
+      notifyClosed(key);
+    },
+    [closeImperative, controlledVisibility, hasItemCollection, notifyClosed]
+  );
+  const visibleItems = (0, import_react.useMemo)(
+    () => resolvedItems.filter((item) => !hiddenKeys.includes(item.key)),
+    [hiddenKeys, resolvedItems]
+  );
+  const isHostVisible = imperativeParams !== null ? imperativeVisible : visible ?? visibleItems.length > 0;
+  (0, import_react.useEffect)(() => {
+    if (!isHostVisible) return void 0;
+    const timers = visibleItems.map((item) => {
+      const currentDuration = item.duration ?? duration;
+      if (!currentDuration || currentDuration <= 0) return void 0;
+      return setTimeout(() => closeNotification(item.key), currentDuration);
+    }).filter(Boolean);
+    return () => timers.forEach((timer) => clearTimeout(timer));
+  }, [closeNotification, duration, isHostVisible, visibleItems]);
+  const shouldShow = imperativeParams !== null || (fixed ? resolvedItems.length > 0 : visible ?? resolvedItems.length > 0);
+  if (resolvedItems.length === 0) {
+    const shouldShowEmpty = Array.isArray(items) && !fixed && (visible ?? true);
+    if (!shouldShowEmpty) return null;
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        "data-slot": "notification-empty",
+        className: (0, import_utils.classNames)(`${config.prefixCls}-notification`, className),
+        style
+      },
+      renderNode(emptyText, { color: theme.colors["muted-foreground"], fontSize: 14 })
+    );
+  }
+  if (!shouldShow) return null;
+  const fixedPositionStyle = placement === "bottom" ? {
+    bottom: 20,
+    transform: `translateY(${isHostVisible ? -import_tokens.notificationTypography.transitionOffset : import_tokens.notificationTypography.transitionOffset}px)`
+  } : {
+    top: 20,
+    transform: `translateY(${isHostVisible ? import_tokens.notificationTypography.transitionOffset : -import_tokens.notificationTypography.transitionOffset}px)`
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_components.View,
+    {
+      "data-slot": "notification-host",
+      "data-placement": fixed ? placement : "inline",
+      "data-visible": isHostVisible ? "true" : "false",
+      className: (0, import_utils.classNames)(
+        `${config.prefixCls}-notification`,
+        fixed && `${config.prefixCls}-notification--fixed`,
+        fixed && `${config.prefixCls}-notification--${placement}`,
+        className
+      ),
+      style: {
+        boxSizing: "border-box",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: fixed ? "center" : "stretch",
+        width: "100%",
+        minWidth: 0,
+        gap: 12,
+        ...fixed ? {
+          position: "fixed",
+          left: 0,
+          right: 0,
+          zIndex: 1200,
+          pointerEvents: "none",
+          opacity: isHostVisible ? 1 : 0,
+          transition: "opacity var(--x-duration-overlayDefault) var(--x-easing-standard), transform var(--x-duration-overlayDefault) var(--x-easing-standard)",
+          ...fixedPositionStyle
+        } : {},
+        ...style
+      }
+    },
+    visibleItems.map((item) => {
+      var _a;
+      const currentTone = normalizeTone(item.type ?? item.tone);
+      const currentVariant = item.variant ?? variant;
+      const presentation = (0, import_tokens.getNotificationPresentation)(currentTone, currentVariant, theme.colors);
+      const descriptionContent = item.description;
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          key: item.key,
+          "data-slot": "notification-card",
+          "data-type": currentTone === "error" ? "fail" : currentTone,
+          "data-tone": currentTone,
+          "data-variant": currentVariant,
+          role: "status",
+          "aria-live": "polite",
+          "aria-atomic": "true",
+          className: `${config.prefixCls}-notification__item`,
+          style: {
+            boxSizing: "border-box",
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "flex-start",
+            width: fixed ? "auto" : "100%",
+            minWidth: fixed ? 300 : 0,
+            maxWidth: 448,
+            marginLeft: fixed ? 14 : 0,
+            marginRight: fixed ? 14 : 0,
+            gap: import_tokens.notificationTypography.gap,
+            paddingLeft: import_tokens.notificationTypography.paddingX,
+            paddingRight: import_tokens.notificationTypography.paddingX,
+            paddingTop: import_tokens.notificationTypography.paddingY,
+            paddingBottom: import_tokens.notificationTypography.paddingY,
+            fontSize: import_tokens.notificationTypography.contentFontSize,
+            lineHeight: "22px",
+            borderRadius: import_tokens.notificationTypography.radius,
+            borderWidth: 1,
+            borderStyle: "solid",
+            pointerEvents: "auto",
+            backdropFilter: "blur(4px)",
+            WebkitBackdropFilter: "blur(4px)",
+            ...presentation.cardStyle
+          }
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            "data-slot": "notification-icon",
+            className: `${config.prefixCls}-notification__icon`,
+            style: {
+              width: import_tokens.notificationTypography.iconSize,
+              height: import_tokens.notificationTypography.iconSize,
+              marginTop: 1.75,
+              flexShrink: 0
+            }
+          },
+          item.icon ?? /* @__PURE__ */ import_react.default.createElement(
+            import_icon.Icon,
+            {
+              name: import_tokens.notificationIconMap[currentTone],
+              size: import_tokens.notificationTypography.iconSize,
+              color: presentation.iconColor,
+              block: true
+            }
+          )
+        ),
+        /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            className: `${config.prefixCls}-notification__body`,
+            style: {
+              flex: 1,
+              minWidth: 0,
+              display: "flex",
+              flexDirection: "column",
+              gap: import_tokens.notificationTypography.contentGap,
+              fontSize: import_tokens.notificationTypography.contentFontSize,
+              lineHeight: import_tokens.notificationTypography.contentLineHeight
+            }
+          },
+          item.title !== void 0 && item.title !== null ? /* @__PURE__ */ import_react.default.createElement(
+            import_components.View,
+            {
+              "data-slot": "notification-title",
+              className: `${config.prefixCls}-notification__title`,
+              style: {
+                fontSize: import_tokens.notificationTypography.titleFontSize,
+                lineHeight: import_tokens.notificationTypography.titleLineHeight,
+                overflowWrap: "anywhere",
+                wordBreak: "break-word"
+              }
+            },
+            renderNode(item.title, {
+              fontSize: import_tokens.notificationTypography.titleFontSize,
+              fontWeight: 600,
+              lineHeight: import_tokens.notificationTypography.titleLineHeight,
+              overflowWrap: "anywhere",
+              wordBreak: "break-word",
+              color: presentation.titleColor
+            })
+          ) : null,
+          descriptionContent !== void 0 && descriptionContent !== null ? /* @__PURE__ */ import_react.default.createElement(
+            import_components.View,
+            {
+              "data-slot": "notification-content",
+              className: `${config.prefixCls}-notification__content`,
+              style: {
+                fontSize: import_tokens.notificationTypography.contentFontSize,
+                lineHeight: import_tokens.notificationTypography.contentLineHeight,
+                overflowWrap: "anywhere",
+                wordBreak: "break-word"
+              }
+            },
+            renderNode(descriptionContent, {
+              fontSize: import_tokens.notificationTypography.contentFontSize,
+              lineHeight: import_tokens.notificationTypography.contentLineHeight,
+              overflowWrap: "anywhere",
+              wordBreak: "break-word",
+              color: presentation.contentColor
+            })
+          ) : null,
+          ((_a = item.actions) == null ? void 0 : _a.length) ? /* @__PURE__ */ import_react.default.createElement(
+            import_components.View,
+            {
+              "data-slot": "notification-actions",
+              style: {
+                display: "flex",
+                flexDirection: "row",
+                flexWrap: "wrap",
+                gap: import_tokens.notificationTypography.actionsGap,
+                marginTop: import_tokens.notificationTypography.actionsTop
+              }
+            },
+            item.actions.map((action) => /* @__PURE__ */ import_react.default.createElement(
+              NotificationControl,
+              {
+                key: action.key,
+                dataSlot: "notification-action",
+                ariaLabel: getNodeLabel(action.label, `通知操作 ${action.key}`),
+                onPress: () => onActionClick == null ? void 0 : onActionClick(action.key, item.key),
+                style: {
+                  paddingTop: 8,
+                  paddingBottom: 8,
+                  paddingLeft: 14,
+                  paddingRight: 14,
+                  borderRadius: "var(--x-radius-full)",
+                  borderWidth: 1,
+                  borderStyle: "solid",
+                  borderColor: presentation.actionBorderColor,
+                  backgroundColor: presentation.actionBackgroundColor,
+                  color: action.danger ? theme.colors.destructive : presentation.titleColor
+                }
+              },
+              renderNode(action.label, {
+                fontSize: import_tokens.notificationTypography.actionFontSize,
+                textAlign: "center",
+                overflowWrap: "anywhere",
+                color: action.danger ? theme.colors.destructive : presentation.titleColor
+              })
+            ))
+          ) : null
+        ),
+        item.closable ?? closable ? /* @__PURE__ */ import_react.default.createElement(
+          NotificationControl,
+          {
+            dataSlot: "notification-close",
+            ariaLabel: "关闭通知",
+            scale: 0.94,
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: 24,
+              height: 24,
+              marginTop: 0,
+              flexShrink: 0,
+              borderRadius: "var(--x-radius-sm)"
+            },
+            onPress: () => closeNotification(item.key)
+          },
+          /* @__PURE__ */ import_react.default.createElement(
+            import_icon.Icon,
+            {
+              name: "X",
+              size: import_tokens.notificationTypography.closeIconSize,
+              color: presentation.closeColor,
+              block: true
+            }
+          )
+        ) : null
+      );
+    })
+  );
+};
+InternalNotification.displayName = "InternalNotification";
+var Notification = InternalNotification;
+Notification.show = (params) => {
+  var _a;
+  (_a = activeController()) == null ? void 0 : _a.show(params);
+};
+Notification.hide = () => {
+  var _a;
+  (_a = activeController()) == null ? void 0 : _a.hide();
+};
+var NotificationPortalHost = ({ zIndex = 1200 }) => /* @__PURE__ */ import_react.default.createElement(Notification, { fixed: true, style: { zIndex } });
+Notification.displayName = "Notification";
+var notification_default = Notification;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  InternalNotification,
+  Notification,
+  NotificationPortalHost
+});

package/lib/components/notification/tokens.d.ts

@@ -0,0 +1,43 @@
+import type { ThemeColors } from '../../theme/types';
+import type { NotificationTone, NotificationVariant } from './types';
+export declare const notificationIconMap: {
+    readonly default: "Bell";
+    readonly info: "Info";
+    readonly success: "CheckCircle2";
+    readonly warning: "AlertCircle";
+    readonly error: "XCircle";
+};
+export declare function getToneAccentColor(tone: NotificationTone, colors: ThemeColors): string;
+export declare function getNotificationPresentation(tone: NotificationTone, variant: NotificationVariant, colors: ThemeColors): {
+    accent: string;
+    cardStyle: {
+        backgroundColor: string;
+        borderColor: string;
+        boxShadow: string;
+    };
+    titleColor: string;
+    contentColor: string;
+    iconColor: string;
+    closeColor: string;
+    actionBorderColor: string;
+    actionBackgroundColor: string;
+};
+export declare const notificationTypography: {
+    readonly titleFontSize: 14;
+    readonly contentFontSize: 14;
+    readonly actionFontSize: 12;
+    readonly titleLineHeight: "20px";
+    readonly contentLineHeight: `${number}px`;
+    readonly iconSize: 17.5;
+    readonly closeIconSize: 16;
+    readonly radius: "var(--x-notification-radius)";
+    readonly paddingX: 14;
+    readonly paddingY: 10.5;
+    readonly gap: 10.5;
+    readonly contentGap: 1.75;
+    readonly actionsGap: 12;
+    readonly actionsTop: 12;
+    readonly transitionOffset: 14;
+    readonly transitionDuration: 300;
+};
+//# sourceMappingURL=tokens.d.ts.map