taro-uno-ui 1.0.1 → 1.0.2

package/src/components/feedback/Modal/Modal.tsx

@@ -1,269 +0,0 @@
-import React, { forwardRef, useRef, useState, useEffect, useCallback } from 'react';
-import { View, Text } from '@tarojs/components';
-import { modalStyles } from './Modal.styles';
-import type { ModalProps, ModalRef, ModalButton, ModalStatic } from './Modal.types';
-
-/** Modal组件 */
-export const ModalComponent = forwardRef<ModalRef, ModalProps>((props, ref) => {
-  const {
-    visible: controlledVisible,
-    defaultVisible = false,
-    title,
-    content,
-    buttons = [],
-    closable = true,
-    mask = true,
-    maskClosable = true,
-    keyboard = true,
-    centered = true,
-    size = 'default',
-    position = 'center',
-    width,
-    height,
-    fullscreen = false,
-    animated = true,
-    animationDuration = 300,
-    destroyOnClose = false,
-    forceRender = false,
-    getContainer,
-    onMaskClick,
-    onShow,
-    onHide,
-    onOk,
-    onCancel,
-    onButtonClick,
-    onClose,
-    className,
-    style,
-    ...restProps
-  } = props;
-
-  const modalRef = useRef<any>(null);
-  const [internalVisible, setInternalVisible] = useState(defaultVisible);
-  const [internalTitle, setInternalTitle] = useState(title);
-  const [internalContent, setInternalContent] = useState(content);
-  const [internalButtons, setInternalButtons] = useState<ModalButton[]>(buttons);
-
-  // 处理受控模式
-  useEffect(() => {
-    if (controlledVisible !== undefined) {
-      setInternalVisible(controlledVisible);
-    }
-  }, [controlledVisible]);
-
-  useEffect(() => {
-    setInternalTitle(title);
-  }, [title]);
-
-  useEffect(() => {
-    setInternalContent(content);
-  }, [content]);
-
-  useEffect(() => {
-    setInternalButtons(buttons);
-  }, [buttons]);
-
-  // 处理显示/隐藏
-  useEffect(() => {
-    if (internalVisible) {
-      onShow?.();
-      // 添加键盘事件监听
-      if (keyboard) {
-        document.addEventListener('keydown', handleKeyDown);
-      }
-    } else {
-      onHide?.();
-      // 移除键盘事件监听
-      document.removeEventListener('keydown', handleKeyDown);
-    }
-
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [internalVisible, keyboard, onShow, onHide]);
-
-  // 处理键盘事件
-  const handleKeyDown = useCallback((event: KeyboardEvent) => {
-    if (event.key === 'Escape') {
-      handleCancel();
-    }
-  }, []);
-
-  // 处理遮罩点击
-  const handleMaskClick = useCallback(
-    (event: React.MouseEvent) => {
-      if (maskClosable) {
-        onMaskClick?.(event);
-        handleCancel();
-      }
-    },
-    [maskClosable, onMaskClick],
-  );
-
-  // 处理关闭
-  const handleClose = useCallback(() => {
-    if (controlledVisible === undefined) {
-      setInternalVisible(false);
-    }
-    onClose?.();
-  }, [controlledVisible, onClose]);
-
-  // 处理取消
-  const handleCancel = useCallback(() => {
-    onCancel?.();
-    handleClose();
-  }, [onCancel, handleClose]);
-
-  // 处理按钮点击
-  const handleButtonClick = useCallback(
-    async (button: ModalButton) => {
-      try {
-        await button.onClick?.();
-        onButtonClick?.(button);
-        handleClose();
-      } catch (error) {
-        // 处理异步操作中的错误
-        console.error('Modal button onClick error:', error);
-      }
-    },
-    [onButtonClick, handleClose],
-  );
-
-  // 渲染按钮
-  const renderButtons = () => {
-    return internalButtons.map((button, index) => {
-      const isDisabled = button.disabled || false;
-      const isLoading = button.loading || false;
-
-      return (
-        <View
-          key={button.key || index}
-          className={`taro-uno-modal__button ${modalStyles.button} ${button.type === 'primary' ? modalStyles.primary : button.type === 'danger' ? modalStyles.danger : modalStyles.secondary} ${
-            isDisabled ? 'taro-uno-modal__button--disabled' : ''
-          } ${isLoading ? 'taro-uno-modal__button--loading' : ''}`}
-          onClick={() => !isDisabled && !isLoading && handleButtonClick(button)}
-        >
-          {isLoading ? '加载中...' : button.text}
-        </View>
-      );
-    });
-  };
-
-  // 渲染关闭按钮
-  const renderCloseButton = () => {
-    if (!closable) return null;
-
-    return (
-      <View className={`taro-uno-modal__close ${modalStyles.close}`} onClick={handleClose}>
-        ×
-      </View>
-    );
-  };
-
-  // 计算样式
-  const modalStyle = {
-    ...style,
-  };
-
-  // 计算类名
-  const modalClassName = `${modalStyles.container} ${modalStyles.content} ${className || ''}`;
-
-  // 暴露给外部的引用方法
-  React.useImperativeHandle(
-    ref,
-    () => ({
-      element: modalRef.current,
-      show: () => {
-        if (controlledVisible === undefined) {
-          setInternalVisible(true);
-        }
-      },
-      hide: () => {
-        if (controlledVisible === undefined) {
-          setInternalVisible(false);
-        }
-      },
-      toggle: () => {
-        if (controlledVisible === undefined) {
-          setInternalVisible(!internalVisible);
-        }
-      },
-      isVisible: () => internalVisible,
-      setTitle: (newTitle) => {
-        setInternalTitle(newTitle);
-      },
-      setContent: (newContent) => {
-        setInternalContent(newContent);
-      },
-      setButtons: (newButtons) => {
-        setInternalButtons(newButtons);
-      },
-      addButton: (newButton) => {
-        setInternalButtons((prev) => [...prev, newButton]);
-      },
-      removeButton: (key) => {
-        setInternalButtons((prev) => prev.filter((btn) => btn.key !== key));
-      },
-      focus: () => {
-        modalRef.current?.focus();
-      },
-    }),
-    [internalVisible, controlledVisible],
-  );
-
-  // 如果销毁关闭且不显示，则不渲染
-  if (destroyOnClose && !internalVisible && !forceRender) {
-    return null;
-  }
-
-  return (
-    <>
-      {mask && internalVisible && <View className="taro-uno-modal__mask" onClick={handleMaskClick} />}
-      {internalVisible && (
-        <View ref={modalRef} className={modalClassName} style={modalStyle} {...restProps}>
-          {renderCloseButton()}
-          {internalTitle && (
-            <View className={`taro-uno-modal__header ${modalStyles.header}`}>
-              <Text className="taro-uno-modal__title">{internalTitle}</Text>
-            </View>
-          )}
-          <View className={`taro-uno-modal__body ${modalStyles.body}`}>{internalContent}</View>
-          {internalButtons.length > 0 && (
-            <View className={`taro-uno-modal__footer ${modalStyles.footer}`}>{renderButtons()}</View>
-          )}
-        </View>
-      )}
-    </>
-  );
-});
-
-/** Modal组件显示名称 */
-ModalComponent.displayName = 'Modal';
-
-/** 导出Modal组件 */
-const Modal = ModalComponent as any as ModalStatic;
-
-/** 静态方法 */
-Modal.confirm = (_config: ModalProps) => {
-  // 这里可以实现一个全局的确认框
-  // 需要配合全局状态管理或Portal实现
-};
-
-Modal.info = (_config: ModalProps) => {
-  // 信息提示框
-};
-
-Modal.success = (_config: ModalProps) => {
-  // 成功提示框
-};
-
-Modal.error = (_config: ModalProps) => {
-  // 错误提示框
-};
-
-Modal.warning = (_config: ModalProps) => {
-  // 警告提示框
-};
-
-export { Modal };
-export default ModalComponent;

package/src/components/feedback/Modal/Modal.types.ts

@@ -1,151 +0,0 @@
-import { ReactNode } from 'react';
-import { Size } from '../../../types';
-import { BaseComponentProps as StandardBaseComponentProps } from '../../../types/component-props';
-
-/** Modal静态方法接口 */
-export interface ModalStatic {
-  confirm: (config: ModalProps) => void;
-  info: (config: ModalProps) => void;
-  success: (config: ModalProps) => void;
-  error: (config: ModalProps) => void;
-  warning: (config: ModalProps) => void;
-}
-
-/** Modal尺寸 */
-export type ModalSize = Size | 'small' | 'medium' | 'large' | 'fullscreen';
-
-/** Modal位置 */
-export type ModalPosition = 'center' | 'top' | 'bottom' | 'left' | 'right';
-
-/** Modal按钮类型 */
-export type ModalButtonType = 'default' | 'primary' | 'danger' | 'text';
-
-/** Modal按钮接口 */
-export interface ModalButton {
-  /** 按钮文本 */
-  text: string;
-  /** 按钮类型 */
-  type?: ModalButtonType;
-  /** 按钮键值 */
-  key?: string;
-  /** 是否禁用 */
-  disabled?: boolean;
-  /** 是否加载中 */
-  loading?: boolean;
-  /** 点击事件 */
-  onClick?: () => void | Promise<void>;
-}
-
-/** Modal引用 */
-export interface ModalRef {
-  /** 获取元素引用 */
-  element: any | null;
-  /** 显示Modal */
-  show: () => void;
-  /** 隐藏Modal */
-  hide: () => void;
-  /** 切换显示状态 */
-  toggle: () => void;
-  /** 获取显示状态 */
-  isVisible: () => boolean;
-  /** 设置标题 */
-  setTitle: (_title: ReactNode) => void;
-  /** 设置内容 */
-  setContent: (_content: ReactNode) => void;
-  /** 设置按钮 */
-  setButtons: (_buttons: ModalButton[]) => void;
-  /** 添加按钮 */
-  addButton: (_button: ModalButton) => void;
-  /** 移除按钮 */
-  removeButton: (_key: string) => void;
-  /** 聚焦 */
-  focus: () => void;
-}
-
-/** Modal组件属性 */
-export interface ModalProps extends StandardBaseComponentProps {
-  /** 是否显示 */
-  visible?: boolean;
-  /** 默认是否显示 */
-  defaultVisible?: boolean;
-  /** 标题 */
-  title?: ReactNode;
-  /** 内容 */
-  content?: ReactNode;
-  /** 按钮列表 */
-  buttons?: ModalButton[];
-  /** 是否显示关闭按钮 */
-  closable?: boolean;
-  /** 是否显示遮罩 */
-  mask?: boolean;
-  /** 点击遮罩是否关闭 */
-  maskClosable?: boolean;
-  /** 是否显示键盘 */
-  keyboard?: boolean;
-  /** 是否居中 */
-  centered?: boolean;
-  /** 尺寸 */
-  size?: ModalSize;
-  /** 位置 */
-  position?: ModalPosition;
-  /** 宽度 */
-  width?: number | string;
-  /** 高度 */
-  height?: number | string;
-  /** 是否全屏 */
-  fullscreen?: boolean;
-  /** 是否动画效果 */
-  animated?: boolean;
-  /** 动画持续时间 */
-  animationDuration?: number;
-  /** 销毁时是否关闭 */
-  destroyOnClose?: boolean;
-  /** 强制渲染 */
-  forceRender?: boolean;
-  /** 获取容器 */
-  getContainer?: () => HTMLElement;
-  /** 点击遮罩事件 */
-  onMaskClick?: (_event: React.MouseEvent) => void;
-  /** 显示事件 */
-  onShow?: () => void;
-  /** 隐藏事件 */
-  onHide?: () => void;
-  /** 确定事件 */
-  onOk?: () => void | Promise<void>;
-  /** 取消事件 */
-  onCancel?: () => void;
-  /** 按钮点击事件 */
-  onButtonClick?: (_button: ModalButton) => void;
-  /** 关闭事件 */
-  onClose?: () => void;
-}
-
-/** Modal确认配置 */
-export interface ModalConfirmConfig {
-  /** 标题 */
-  title?: ReactNode;
-  /** 内容 */
-  content?: ReactNode;
-  /** 确定按钮文本 */
-  okText?: string;
-  /** 取消按钮文本 */
-  cancelText?: string;
-  /** 确定按钮类型 */
-  okType?: ModalButtonType;
-  /** 确定按钮是否禁用 */
-  okButtonProps?: ModalButton;
-  /** 取消按钮是否禁用 */
-  cancelButtonProps?: ModalButton;
-  /** 图标类型 */
-  icon?: ReactNode;
-  /** 宽度 */
-  width?: number | string;
-  /** 居中 */
-  centered?: boolean;
-  /** 确定事件 */
-  onOk?: () => void | Promise<void>;
-  /** 取消事件 */
-  onCancel?: () => void;
-  /** 关闭事件 */
-  onClose?: () => void;
-}

package/src/components/feedback/Modal/index.tsx

@@ -1,11 +0,0 @@
-export { Modal, ModalComponent } from './Modal';
-export type {
-  ModalProps,
-  ModalRef,
-  ModalSize,
-  ModalPosition,
-  ModalButtonType,
-  ModalButton,
-  ModalConfirmConfig,
-} from './Modal.types';
-export { modalStyles } from './Modal.styles';