@hanwenbo/x-taro-ui 0.0.1

package/lib/components/dialog/dialog.js

@@ -0,0 +1,574 @@
+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/dialog/dialog.tsx
+var dialog_exports = {};
+__export(dialog_exports, {
+  Alert: () => Alert,
+  Confirm: () => Confirm,
+  Dialog: () => Dialog,
+  default: () => dialog_default,
+  dialog: () => dialog
+});
+module.exports = __toCommonJS(dialog_exports);
+var import_react = __toESM(require("react"));
+var import_components = require("@tarojs/components");
+var import_taro = __toESM(require("@tarojs/taro"));
+var import_miniapp = require("../../adapters/miniapp");
+var import_design_system = require("../../theme/generated/design-system.generated");
+var import_theme = require("../../theme");
+var import_utils = require("../../utils");
+var import_button = require("../button");
+var import_configProvider = require("../configProvider");
+var import_icon = require("../icon");
+var import_tokens = require("./tokens");
+function isPresent(value) {
+  return value !== void 0 && value !== null && value !== false;
+}
+function isPromiseLike(value) {
+  return Boolean(value) && typeof value.then === "function";
+}
+function isActionsConfig(value) {
+  return value != null && !Array.isArray(value) && typeof value === "object" && "items" in value;
+}
+function actionKey(action, index) {
+  return action.key ?? `dialog-action-${index}`;
+}
+function actionText(action) {
+  return normalizeDialogText(action.text) || String(action.key ?? "action");
+}
+function getActionVariant(type) {
+  switch (type) {
+    case "danger":
+      return "destructive";
+    case "warning":
+      return "secondary";
+    case "primary":
+      return "default";
+    case "default":
+    default:
+      return "ghost";
+  }
+}
+function getAlignmentStyle(verticalAlign, horizontalAlign, visible) {
+  const vertical = verticalAlign === "middle" ? "center" : verticalAlign;
+  if (vertical === "center" && horizontalAlign === "center") return void 0;
+  const style = {};
+  const transforms = [];
+  if (vertical === "top") {
+    style.top = 16;
+  } else if (vertical === "bottom") {
+    style.top = "auto";
+    style.bottom = 16;
+  } else {
+    style.top = "50%";
+    transforms.push("translateY(-50%)");
+  }
+  if (horizontalAlign === "left") {
+    style.left = 16;
+  } else if (horizontalAlign === "right") {
+    style.left = "auto";
+    style.right = 16;
+  } else {
+    style.left = "50%";
+    transforms.push("translateX(-50%)");
+  }
+  transforms.push(`scale(${visible ? 1 : 0.98})`);
+  style.transform = transforms.join(" ");
+  return style;
+}
+var Dialog = ({
+  visible = false,
+  title,
+  content,
+  body,
+  confirmText = "OK",
+  cancelText = "Cancel",
+  showCancel = true,
+  closeIcon = false,
+  maskClosable,
+  size: sizeProp,
+  type = "default",
+  confirmProps,
+  cancelProps,
+  actions,
+  actionLayout = "horizontal",
+  actionsGap,
+  actionShape = "default",
+  contentAlign = "center",
+  onConfirm,
+  onCancel,
+  onClose,
+  afterClose,
+  afterShow,
+  image,
+  header,
+  onAction,
+  closeOnAction = false,
+  onPress,
+  bodyStyle,
+  maskStyle,
+  footerStyle: footerStyleOverride,
+  verticalAlign = "center",
+  horizontalAlign = "center",
+  className,
+  style
+}) => {
+  const config = (0, import_configProvider.useConfigProvider)();
+  const size = sizeProp ?? config.size;
+  const disabled = config.disabled;
+  const [actionLoadingKey, setActionLoadingKey] = (0, import_react.useState)(null);
+  const tokens = (0, import_tokens.useDialogTokens)(size);
+  const typeColors = (0, import_tokens.useDialogColors)(type);
+  const typeIcon = (0, import_tokens.useDialogIcon)(type);
+  const dialogStyle = (0, import_tokens.useDialogStyle)(size);
+  const { colors } = (0, import_theme.useTokens)();
+  const afterShowRef = (0, import_react.useRef)(afterShow);
+  const afterCloseRef = (0, import_react.useRef)(afterClose);
+  const wasVisibleRef = (0, import_react.useRef)(false);
+  afterShowRef.current = afterShow;
+  afterCloseRef.current = afterClose;
+  (0, import_react.useEffect)(() => {
+    let timer;
+    if (visible && !wasVisibleRef.current) {
+      timer = setTimeout(
+        () => {
+          var _a;
+          return (_a = afterShowRef.current) == null ? void 0 : _a.call(afterShowRef);
+        },
+        import_design_system.designSystemMotion.durationsMs.overlayEnter
+      );
+    } else if (!visible && wasVisibleRef.current) {
+      timer = setTimeout(
+        () => {
+          var _a;
+          return (_a = afterCloseRef.current) == null ? void 0 : _a.call(afterCloseRef);
+        },
+        import_design_system.designSystemMotion.durationsMs.overlayExit
+      );
+    }
+    wasVisibleRef.current = visible;
+    return () => {
+      if (timer) clearTimeout(timer);
+    };
+  }, [visible]);
+  const close = (0, import_react.useCallback)(() => {
+    void (onClose == null ? void 0 : onClose());
+  }, [onClose]);
+  const handleCancel = (0, import_react.useCallback)(async () => {
+    await (onCancel == null ? void 0 : onCancel());
+    await (onClose == null ? void 0 : onClose());
+  }, [onCancel, onClose]);
+  const generatedActions = [
+    ...showCancel ? [
+      {
+        key: "cancel",
+        text: cancelText,
+        type: "default",
+        disabled: cancelProps == null ? void 0 : cancelProps.disabled,
+        loading: cancelProps == null ? void 0 : cancelProps.loading,
+        onPress: handleCancel
+      }
+    ] : [],
+    {
+      key: "confirm",
+      text: confirmText,
+      type: type === "danger" ? "danger" : type === "warning" ? "warning" : "primary",
+      disabled: confirmProps == null ? void 0 : confirmProps.disabled,
+      loading: confirmProps == null ? void 0 : confirmProps.loading,
+      onPress: onConfirm
+    }
+  ];
+  const parsedActions = isActionsConfig(actions) ? {
+    items: actions.items,
+    direction: actions.direction ?? "row",
+    gap: actions.gap ?? 0,
+    showDivider: actions.showDivider !== false,
+    className: actions.className,
+    rounded: actions.rounded ?? false
+  } : {
+    items: actions ?? generatedActions,
+    direction: actionLayout === "vertical" ? "column" : "row",
+    gap: actionsGap ?? (actions === void 0 ? 12 : 8),
+    showDivider: false,
+    rounded: actionShape === "rounded"
+  };
+  const flatActionCount = parsedActions.items.reduce(
+    (count, item) => count + (Array.isArray(item) ? item.length : 1),
+    0
+  );
+  const effectiveMaskClosable = maskClosable ?? flatActionCount === 0;
+  const handleAction = (0, import_react.useCallback)(
+    async (action, index) => {
+      var _a;
+      if (disabled || action.disabled || action.loading || actionLoadingKey !== null) return;
+      const key = actionKey(action, index);
+      let localResult;
+      let globalResult;
+      try {
+        const localPending = (_a = action.onPress ?? action.onClick) == null ? void 0 : _a();
+        if (isPromiseLike(localPending)) {
+          setActionLoadingKey(key);
+          localResult = await localPending;
+        } else {
+          localResult = localPending;
+        }
+        const globalPending = onAction == null ? void 0 : onAction(action, index);
+        if (isPromiseLike(globalPending)) {
+          setActionLoadingKey(key);
+          globalResult = await globalPending;
+        } else {
+          globalResult = globalPending;
+        }
+        if (closeOnAction && localResult !== false && globalResult !== false) {
+          await (onClose == null ? void 0 : onClose());
+        }
+      } finally {
+        setActionLoadingKey(null);
+      }
+    },
+    [actionLoadingKey, closeOnAction, disabled, onAction, onClose]
+  );
+  const renderedContent = body ?? content;
+  const hasTop = isPresent(image) || isPresent(header) || isPresent(title) || Boolean(typeIcon);
+  const alignmentStyle = getAlignmentStyle(verticalAlign, horizontalAlign, visible);
+  const gapStyle = typeof parsedActions.gap === "number" ? `${parsedActions.gap}px` : parsedActions.gap;
+  let actionOffset = 0;
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_miniapp.OverlayHost,
+    {
+      visible,
+      placement: "center",
+      config: {
+        zIndex: 2e3,
+        backdrop: true,
+        closeOnBackdrop: effectiveMaskClosable,
+        contentAnimation: "scale",
+        backdropStyle: maskStyle,
+        contentStyle: alignmentStyle
+      },
+      onBackdropClick: close
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        role: "dialog",
+        ariaLabel: normalizeDialogText(title) || normalizeDialogText(content) || "Dialog",
+        className: (0, import_utils.classNames)(
+          `${config.prefixCls}-dialog`,
+          `${config.prefixCls}-dialog--${size}`,
+          `${config.prefixCls}-dialog--${type}`,
+          className
+        ),
+        onClick: onPress,
+        style: {
+          ...dialogStyle,
+          maxWidth: "calc(100vw - 32px)",
+          pointerEvents: "auto",
+          ...style
+        }
+      },
+      typeof image === "string" ? /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          className: `${config.prefixCls}-dialog__image`,
+          style: { padding: tokens.padding, paddingBottom: 0 }
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          import_components.Image,
+          {
+            src: image,
+            mode: "aspectFit",
+            style: {
+              display: "block",
+              width: "100%",
+              height: 200,
+              borderRadius: "var(--x-dialog-button-radius)"
+            }
+          }
+        )
+      ) : isPresent(image) ? /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: `${config.prefixCls}-dialog__image` }, image) : null,
+      (isPresent(header) || isPresent(title) || closeIcon || typeIcon) && /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          className: `${config.prefixCls}-dialog__header`,
+          style: {
+            boxSizing: "border-box",
+            width: "100%",
+            paddingTop: tokens.padding,
+            paddingRight: tokens.padding,
+            paddingBottom: typeIcon ? 4 : 0,
+            paddingLeft: tokens.padding,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            position: "relative"
+          }
+        },
+        typeIcon ? /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            className: `${config.prefixCls}-dialog__status-icon`,
+            style: {
+              width: 48,
+              height: 48,
+              borderRadius: "var(--x-radius-full)",
+              marginBottom: 12,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: typeColors.confirmBackground
+            }
+          },
+          /* @__PURE__ */ import_react.default.createElement(import_icon.Icon, { name: typeIcon, size: 24, color: typeColors.icon, block: true })
+        ) : null,
+        isPresent(header) ? /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            className: `${config.prefixCls}-dialog__custom-header`,
+            style: { width: "100%", display: "flex", justifyContent: "center" }
+          },
+          header
+        ) : null,
+        isPresent(title) ? typeof title === "string" || typeof title === "number" ? /* @__PURE__ */ import_react.default.createElement(
+          import_components.Text,
+          {
+            className: `${config.prefixCls}-dialog__title`,
+            style: {
+              width: "100%",
+              fontSize: tokens.titleFontSize,
+              fontWeight: 600,
+              color: colors.foreground,
+              lineHeight: 1.3,
+              textAlign: "center"
+            }
+          },
+          title
+        ) : title : null,
+        closeIcon ? /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            role: "button",
+            ariaLabel: "关闭对话框",
+            className: `${config.prefixCls}-dialog__close`,
+            style: {
+              position: "absolute",
+              right: 8,
+              top: 8,
+              minWidth: 32,
+              minHeight: 32,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              borderRadius: "var(--x-dialog-button-radius)"
+            },
+            onClick: (event) => {
+              var _a;
+              (_a = event == null ? void 0 : event.stopPropagation) == null ? void 0 : _a.call(event);
+              close();
+            }
+          },
+          /* @__PURE__ */ import_react.default.createElement(import_icon.Icon, { name: "X", size: 16, color: colors["muted-foreground"] })
+        ) : null
+      ),
+      isPresent(renderedContent) ? /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          className: `${config.prefixCls}-dialog__body`,
+          style: {
+            boxSizing: "border-box",
+            paddingTop: hasTop ? typeIcon ? 8 : tokens.padding : 20,
+            paddingRight: tokens.padding,
+            paddingBottom: tokens.padding,
+            paddingLeft: tokens.padding,
+            textAlign: contentAlign,
+            ...bodyStyle
+          }
+        },
+        typeof renderedContent === "string" || typeof renderedContent === "number" ? /* @__PURE__ */ import_react.default.createElement(
+          import_components.Text,
+          {
+            style: {
+              fontSize: tokens.contentFontSize,
+              color: colors["muted-foreground"],
+              lineHeight: 1.5,
+              whiteSpace: "pre-wrap"
+            }
+          },
+          renderedContent
+        ) : renderedContent
+      ) : null,
+      flatActionCount > 0 ? /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          className: (0, import_utils.classNames)(`${config.prefixCls}-dialog__footer`, parsedActions.className),
+          style: {
+            boxSizing: "border-box",
+            display: "flex",
+            flexDirection: parsedActions.direction,
+            alignItems: "stretch",
+            gap: gapStyle,
+            padding: gapStyle,
+            borderTopWidth: parsedActions.showDivider ? 1 : 0,
+            borderTopStyle: "solid",
+            borderTopColor: colors.border,
+            ...footerStyleOverride
+          }
+        },
+        parsedActions.items.map((item, groupIndex) => {
+          const groupActions = Array.isArray(item) ? item : [item];
+          const groupBaseIndex = actionOffset;
+          actionOffset += groupActions.length;
+          return /* @__PURE__ */ import_react.default.createElement(
+            import_components.View,
+            {
+              key: `dialog-action-group-${groupIndex}`,
+              className: `${config.prefixCls}-dialog__action-group`,
+              style: {
+                minWidth: 0,
+                flex: parsedActions.direction === "row" ? 1 : void 0,
+                width: parsedActions.direction === "column" ? "100%" : void 0,
+                display: "flex",
+                flexDirection: parsedActions.direction,
+                alignItems: "stretch",
+                gap: gapStyle
+              }
+            },
+            groupActions.map((action, actionIndex) => {
+              const flatIndex = groupBaseIndex + actionIndex;
+              const key = actionKey(action, flatIndex);
+              const loading = action.loading || actionLoadingKey === key;
+              const separator = parsedActions.showDivider && parsedActions.gap === 0 && flatIndex < flatActionCount - 1;
+              return /* @__PURE__ */ import_react.default.createElement(
+                import_components.View,
+                {
+                  key: typeof key === "bigint" ? key.toString() : key,
+                  className: `${config.prefixCls}-dialog__action`,
+                  style: {
+                    minWidth: 0,
+                    flex: parsedActions.direction === "row" ? 1 : void 0,
+                    width: parsedActions.direction === "column" ? "100%" : void 0,
+                    display: "flex",
+                    borderRightWidth: separator && parsedActions.direction === "row" ? 1 : 0,
+                    borderRightStyle: "solid",
+                    borderRightColor: colors.border,
+                    borderBottomWidth: separator && parsedActions.direction === "column" ? 1 : 0,
+                    borderBottomStyle: "solid",
+                    borderBottomColor: colors.border
+                  },
+                  onClick: (event) => {
+                    var _a;
+                    return (_a = event == null ? void 0 : event.stopPropagation) == null ? void 0 : _a.call(event);
+                  }
+                },
+                /* @__PURE__ */ import_react.default.createElement(
+                  import_button.Button,
+                  {
+                    block: true,
+                    size,
+                    variant: getActionVariant(action.type),
+                    loading,
+                    loadingText: action.text,
+                    disabled: disabled || action.disabled,
+                    ariaLabel: actionText(action),
+                    onClick: () => void handleAction(action, flatIndex),
+                    shape: parsedActions.rounded ? "rounded" : "default",
+                    style: {
+                      flex: 1,
+                      width: "100%",
+                      height: "auto",
+                      minHeight: tokens.buttonMinHeight,
+                      paddingTop: 10,
+                      paddingBottom: 10,
+                      borderWidth: 0,
+                      borderRadius: parsedActions.rounded ? "var(--x-radius-full)" : void 0,
+                      fontSize: tokens.buttonFontSize,
+                      lineHeight: 1.4,
+                      ...action.type === "warning" ? { backgroundColor: colors.warning, color: colors.white } : void 0
+                    }
+                  },
+                  action.text
+                )
+              );
+            })
+          );
+        })
+      ) : null
+    )
+  );
+};
+Dialog.displayName = "Dialog";
+var Alert = (props) => /* @__PURE__ */ import_react.default.createElement(Dialog, { ...props, showCancel: false });
+var Confirm = (props) => /* @__PURE__ */ import_react.default.createElement(Dialog, { ...props, showCancel: true });
+function normalizeDialogText(content) {
+  if (typeof content === "string" || typeof content === "number") {
+    return String(content);
+  }
+  if (Array.isArray(content)) {
+    return content.map((item) => normalizeDialogText(item)).filter(Boolean).join(" ");
+  }
+  if (import_react.default.isValidElement(content)) {
+    return normalizeDialogText(content.props.children);
+  }
+  return "";
+}
+var dialog = {
+  show: async (options) => {
+    const {
+      title,
+      content,
+      confirmText = "OK",
+      cancelText = "Cancel",
+      showCancel = true,
+      onConfirm,
+      onCancel,
+      onClose
+    } = options;
+    const result = await import_taro.default.showModal({
+      title: normalizeDialogText(title) || "提示",
+      content: normalizeDialogText(content),
+      confirmText: normalizeDialogText(confirmText),
+      cancelText: normalizeDialogText(cancelText),
+      showCancel
+    });
+    if (result.confirm) await (onConfirm == null ? void 0 : onConfirm());
+    if (result.cancel) await (onCancel == null ? void 0 : onCancel());
+    await (onClose == null ? void 0 : onClose());
+    return result;
+  },
+  alert: (options) => dialog.show({ ...options, showCancel: false }),
+  confirm: (options) => dialog.show({ ...options, showCancel: options.showCancel ?? true })
+};
+var dialog_default = Dialog;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Alert,
+  Confirm,
+  Dialog,
+  dialog
+});

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

@@ -0,0 +1,6 @@
+export { Dialog, Confirm, dialog } from './dialog';
+export type { DialogShowOptions } from './dialog';
+export { Alert as DialogAlert } from './dialog';
+export type { DialogProps, AlertProps as DialogAlertProps, ConfirmProps, DialogType, DialogAction, DialogActionItem, DialogActionsConfig, DialogActionResult, DialogActionDirection, DialogActionLayout, DialogActionShape, DialogContentAlign } from './types';
+export { useDialogTokens, useDialogColors, useDialogIcon, useDialogStyle } from './tokens';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/dialog/index.js

@@ -0,0 +1,45 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/dialog/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Confirm: () => import_dialog.Confirm,
+  Dialog: () => import_dialog.Dialog,
+  DialogAlert: () => import_dialog2.Alert,
+  dialog: () => import_dialog.dialog,
+  useDialogColors: () => import_tokens.useDialogColors,
+  useDialogIcon: () => import_tokens.useDialogIcon,
+  useDialogStyle: () => import_tokens.useDialogStyle,
+  useDialogTokens: () => import_tokens.useDialogTokens
+});
+module.exports = __toCommonJS(index_exports);
+var import_dialog = require("./dialog");
+var import_dialog2 = require("./dialog");
+var import_tokens = require("./tokens");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Confirm,
+  Dialog,
+  DialogAlert,
+  dialog,
+  useDialogColors,
+  useDialogIcon,
+  useDialogStyle,
+  useDialogTokens
+});

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

@@ -0,0 +1,38 @@
+/**
+ * Dialog Component Tokens
+ * Defines how Dialog consumes design system tokens
+ */
+/// <reference types="react" />
+import type { SizeVariant } from '../../theme/types';
+import type { DialogType } from './types';
+export interface DialogTokens {
+    width: string;
+    maxWidth: number;
+    padding: number;
+    titleFontSize: number;
+    contentFontSize: number;
+    buttonFontSize: number;
+    buttonMinHeight: number;
+    footerPadding: number;
+}
+/**
+ * Get dialog size tokens
+ */
+export declare function useDialogTokens(size?: SizeVariant): DialogTokens;
+/**
+ * Get dialog colors for type
+ */
+export declare function useDialogColors(type?: DialogType): {
+    confirmColor: string;
+    confirmBackground: string;
+    icon: string;
+};
+/**
+ * Get dialog type icon
+ */
+export declare function useDialogIcon(type?: DialogType): string | null;
+/**
+ * Build dialog style object
+ */
+export declare function useDialogStyle(size: SizeVariant): React.CSSProperties;
+//# sourceMappingURL=tokens.d.ts.map