@tiny-codes/react-easy 1.2.0 → 1.2.2

package/CHANGELOG.md

@@ -2,6 +2,34 @@
 
 # Changelog
 
+## 1.2.2
+
+2025-7-22
+
+### Bug Fixes
+
+#### ModalAction
+
+- 🐞 `defaultProps` priority issue fixed
+
+## 1.2.1
+
+2025-7-17
+
+### Features
+
+#### ConfirmAction
+
+- 🔥 Add `withConfirmAction` hoc
+
+#### DeleteConfirmAction
+
+- 🔥 Add `withDeleteConfirmAction` hoc
+
+#### ModalAction
+
+- ✨ `withModalAction` allows to access the incoming props in the defaultProps function, and the result will override the incoming props. `withConfirmAction` and `withDeleteConfirmAction` have the same behavior.
+
 ## 1.2.0
 
 2025-7-16

package/es/components/ConfirmAction/index.d.ts

@@ -1,17 +1,19 @@
 import type { ComponentType, ForwardedRef, PropsWithoutRef, ReactElement, ReactNode, RefAttributes } from 'react';
 import type { ButtonProps, ModalFuncProps, SwitchProps } from 'antd';
 import type { ModalFunc } from 'antd/es/modal/confirm';
-import type confirm from 'antd/es/modal/confirm';
 import type { LinkProps } from 'antd/es/typography/Link';
 import type { TextProps } from 'antd/es/typography/Text';
-export type ConfirmActionProps<TP extends object, E extends keyof TP> = Omit<ModalFuncProps, 'onOk'> & ConfirmActionTrigger<TP, E> & {
+export type ConfirmActionProps<TriggerProp extends object, Event extends keyof TriggerProp> = Omit<ModalFuncProps, 'onOk'> & ConfirmActionTrigger<TriggerProp, Event> & {
     /**
      * - **EN:** Whether to display in red danger mode, which will automatically affect the color of
      *   the title, icon, and confirm button. Default is `false`, for DeleteConfirmAction, the
      *   defaults is `true`.
-     * - You can explicitly set `titleColor`, `iconColor`, and `okButtonProps.type` to override
+     *
+     * > You can explicitly set `titleColor`, `iconColor`, and `okButtonProps.type` to override
+     *
      * - **CN:** 是否显示为红色危险模式，会自动影响标题、图标和确认按钮的颜色。默认`false`，DeleteConfirmAction组件的默认值为`true`。
-     * - 可以显式设置`titleColor`、`iconColor`和`okButtonProps.type`来覆盖
+     *
+     * > 可以显式设置`titleColor`、`iconColor`和`okButtonProps.type`来覆盖
      */
     danger?: boolean;
     /**
@@ -33,7 +35,7 @@ export type ConfirmActionProps<TP extends object, E extends keyof TP> = Omit<Mod
      * - **EN:** Callback when click confirm button
      * - **CN:** 点击确认按钮的回调
      */
-    onOk?: (...args: Parameters<TP[E]>) => unknown | Promise<unknown>;
+    onOk?: (...args: Parameters<TriggerProp[Event]>) => unknown | Promise<unknown>;
     /**
      * - **EN:** Callback after confirm event, won't trigger if failed, the argument is the return
      *   value of `onOk`
@@ -41,32 +43,34 @@ export type ConfirmActionProps<TP extends object, E extends keyof TP> = Omit<Mod
      */
     afterOk?: (data?: any) => void;
 };
-export interface ConfirmActionTrigger<TP extends object, E extends keyof TP> {
+export interface ConfirmActionTrigger<TriggerProp extends object, Event extends keyof TriggerProp> {
     /**
      * - **EN:** Trigger component, trigger to show confirm box
      * - **CN:** 触发器组件，触发显示确认弹框
      */
-    triggerComponent?: ComponentType<TP>;
+    triggerComponent?: ComponentType<TriggerProp>;
     /**
      * - **EN:** Props of trigger component
      * - **CN:** 触发器组件的Props属性
      */
-    triggerProps?: TP;
+    triggerProps?: TriggerProp;
     /**
-     * - **EN:** The event name that triggers the dialog
-     * - **CN:** 触发弹窗的事件名称
+     * **EN:** The event name that triggers the dialog
+     *
+     * **CN:** 触发弹窗的事件名称
+     *
      * - `Button`: 'onClick'
      * - `Switch`: 'onChange'
      * - `Link`: 'onClick'
      */
-    triggerEvent?: E;
+    triggerEvent?: Event;
     /**
      * - **EN:** Custom trigger content
      * - **CN:** 自定义触发器内容
      */
     children?: ReactNode;
 }
-export type ConfirmActionRef = ReturnType<typeof confirm> & {
+export type ConfirmActionRef<R = {}> = R & ReturnType<ModalFunc> & {
     /**
      * - **EN:** Show confirm box
      * - **CN:** 显示确认弹框
@@ -84,24 +88,28 @@ export type ConfirmActionRef = ReturnType<typeof confirm> & {
 export declare const genRenderer: (defaultProps: Partial<ConfirmActionProps<any, never>> & {
     confirmType: 'normal' | 'delete';
 }) => {
-    <TP extends object, E extends keyof TP>(props: ConfirmActionProps<TP, E>, ref: ForwardedRef<ConfirmActionRef>): import("react/jsx-runtime").JSX.Element;
+    <TriggerProp extends object, Event extends keyof TriggerProp>(props: ConfirmActionProps<TriggerProp, Event>, ref: ForwardedRef<ConfirmActionRef>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 /**
  * - **EN:** Add default properties to the ConfirmAction component
  * - **CN:** 给ConfirmAction组件添加默认属性
  *
- * @param WrappedComponent ConfirmAction component | ConfirmAction组件
- * @param defaultProps Default properties | 默认属性
+ * @param RenderComponent The component that renders the ConfirmAction | 实际渲染组件
+ * @param defaultProps Add some default values based on the props passed to the component |
+ *   在组件传入的props基础上，添加一些默认值
  */
-export declare const withDefaultConfirmActionProps: <TP extends object, E extends keyof TP>(WrappedComponent: ComponentType<PropsWithoutRef<ConfirmActionProps<TP, E>> & RefAttributes<ConfirmActionRef>>, defaultProps?: Partial<ConfirmActionProps<TP, E>>) => import("react").ForwardRefExoticComponent<Omit<ModalFuncProps, "onOk"> & ConfirmActionTrigger<TP, E> & {
+export declare const withDefaultConfirmActionProps: <P extends ActionCompConstraint, TriggerProp extends object, Event extends keyof TriggerProp, Ref extends object>(RenderComponent: ComponentType<PropsWithoutRef<P & ConfirmActionProps<TriggerProp, Event>> & RefAttributes<ConfirmActionRef<Ref>>>, defaultProps?: Partial<Omit<P, keyof ActionCompConstraint> & Omit<ModalFuncProps, "onOk"> & ConfirmActionTrigger<TriggerProp, Event> & {
     /**
      * - **EN:** Whether to display in red danger mode, which will automatically affect the color of
      *   the title, icon, and confirm button. Default is `false`, for DeleteConfirmAction, the
      *   defaults is `true`.
-     * - You can explicitly set `titleColor`, `iconColor`, and `okButtonProps.type` to override
+     *
+     * > You can explicitly set `titleColor`, `iconColor`, and `okButtonProps.type` to override
+     *
      * - **CN:** 是否显示为红色危险模式，会自动影响标题、图标和确认按钮的颜色。默认`false`，DeleteConfirmAction组件的默认值为`true`。
-     * - 可以显式设置`titleColor`、`iconColor`和`okButtonProps.type`来覆盖
+     *
+     * > 可以显式设置`titleColor`、`iconColor`和`okButtonProps.type`来覆盖
      */
     danger?: boolean | undefined;
     /**
@@ -123,29 +131,95 @@ export declare const withDefaultConfirmActionProps: <TP extends object, E extend
      * - **EN:** Callback when click confirm button
      * - **CN:** 点击确认按钮的回调
      */
-    onOk?: ((...args: Parameters<TP[E]>) => unknown | Promise<unknown>) | undefined;
+    onOk?: ((...args: Parameters<TriggerProp[Event]>) => unknown | Promise<unknown>) | undefined;
     /**
      * - **EN:** Callback after confirm event, won't trigger if failed, the argument is the return
      *   value of `onOk`
      * - **CN:** 确认事件完成后的回调，失败时不会触发，参数为`onOk`的返回值
      */
     afterOk?: ((data?: any) => void) | undefined;
-} & RefAttributes<ConfirmActionRef>>;
+}> | ((actualProps: Omit<P, keyof ActionCompConstraint> & ConfirmActionProps<TriggerProp, Event>) => Partial<Omit<P, keyof ActionCompConstraint> & ConfirmActionProps<TriggerProp, Event>>) | undefined) => import("react").ForwardRefExoticComponent<PropsWithoutRef<Omit<P, keyof ActionCompConstraint> & Omit<ModalFuncProps, "onOk"> & ConfirmActionTrigger<TriggerProp, Event> & {
+    /**
+     * - **EN:** Whether to display in red danger mode, which will automatically affect the color of
+     *   the title, icon, and confirm button. Default is `false`, for DeleteConfirmAction, the
+     *   defaults is `true`.
+     *
+     * > You can explicitly set `titleColor`, `iconColor`, and `okButtonProps.type` to override
+     *
+     * - **CN:** 是否显示为红色危险模式，会自动影响标题、图标和确认按钮的颜色。默认`false`，DeleteConfirmAction组件的默认值为`true`。
+     *
+     * > 可以显式设置`titleColor`、`iconColor`和`okButtonProps.type`来覆盖
+     */
+    danger?: boolean | undefined;
+    /**
+     * - **EN:** The color of confirm box title, default is `warning`
+     * - **CN:** 弹框标题颜色，默认`warning`
+     */
+    titleColor?: TextProps['type'] | 'primary';
+    /**
+     * - **EN:** The color of confirm box content
+     * - **CN:** 弹框内容文本颜色
+     */
+    contentColor?: TextProps['type'] | 'primary';
+    /**
+     * - **EN:** The color of confirm box title icon, default is the same as `titleColor`
+     * - **CN:** 弹框标题图标颜色，默认与`titleColor`相同
+     */
+    iconColor?: TextProps['type'] | 'primary';
+    /**
+     * - **EN:** Callback when click confirm button
+     * - **CN:** 点击确认按钮的回调
+     */
+    onOk?: ((...args: Parameters<TriggerProp[Event]>) => unknown | Promise<unknown>) | undefined;
+    /**
+     * - **EN:** Callback after confirm event, won't trigger if failed, the argument is the return
+     *   value of `onOk`
+     * - **CN:** 确认事件完成后的回调，失败时不会触发，参数为`onOk`的返回值
+     */
+    afterOk?: ((data?: any) => void) | undefined;
+}> & RefAttributes<ConfirmActionRef<Ref>>>;
+/**
+ * - **EN:** Confirm box component with trigger
+ * - **CN:** 带触发器的确认框组件
+ */
+declare const ConfirmAction: ConfirmActionWithStatic;
+export interface ActionCompConstraint extends ReturnType<ModalFunc> {
+    /**
+     * - **EN:** Register the confirm action save event, the passed callback function will be called
+     *   when the confirm button is clicked, supports asynchronous saving
+     * - **CN:** 注册确认框保存事件，传入的回调函数会在点击确认按钮时调用，支持异步保存
+     *
+     * @param handler Event handler | 事件处理函数
+     */
+    setOK: (handler: (
+    /**
+     * - **EN:** Trigger click event data, for example, for the `Switch` type trigger, you can get
+     *   the value of the switch; for the `Button` type trigger, you can get the click event
+     *   object of the button
+     * - **CN:** 触发器点击的事件数据，例如，对于`Switch`类型的触发器，可以获取点击开关的值；对于`Button`类型的触发器，可以获取按钮的点击事件对象
+     */
+    ...triggerEventArgs: any[]) => unknown | Promise<unknown>) => void;
+    /**
+     * - **EN:** Default trigger DOM element used to render the trigger
+     * - **CN:** 默认的触发器组件的 DOM 元素，用于渲染触发器
+     */
+    triggerDom: ReactNode;
+}
 /**
  * - **EN:** Interface of generic type component
  * - **CN:** 泛型组件的接口
  */
-export type GenericConfirmActionInterface = <TP extends object, E extends keyof TP>(props: PropsWithoutRef<TypedConfirmActionProps<TP, E>> & RefAttributes<ConfirmActionRef>) => ReactElement;
+export type GenericConfirmActionInterface = <TriggerProp extends object, Event extends keyof TriggerProp>(props: PropsWithoutRef<TypedConfirmActionProps<TriggerProp, Event>> & RefAttributes<ConfirmActionRef>) => ReactElement;
 /**
  * - **EN:** Interface of specific type component
  * - **CN:** 具体类型组件的接口
  */
-export type TypedConfirmActionInterface<TP extends object, E extends keyof TP> = ComponentType<PropsWithoutRef<TypedConfirmActionProps<TP, E>> & RefAttributes<ConfirmActionRef>>;
+export type TypedConfirmActionInterface<TriggerProp extends object, Event extends keyof TriggerProp> = ComponentType<PropsWithoutRef<TypedConfirmActionProps<TriggerProp, Event>> & RefAttributes<ConfirmActionRef>>;
 /**
  * - **EN:** Props definition of specific type component
  * - **CN:** 具体类型组件的Props定义
  */
-type TypedConfirmActionProps<TP extends object, E extends keyof TP> = Omit<ConfirmActionProps<TP, E>, 'triggerComponent' | 'triggerEvent'>;
+type TypedConfirmActionProps<TriggerProp extends object, Event extends keyof TriggerProp> = Omit<ConfirmActionProps<TriggerProp, Event>, 'triggerComponent' | 'triggerEvent'>;
 export type ConfirmActionWithStatic = GenericConfirmActionInterface & {
     /**
      * - **EN:** Confirm box with button trigger
@@ -163,17 +237,4 @@ export type ConfirmActionWithStatic = GenericConfirmActionInterface & {
      */
     Link: TypedConfirmActionInterface<LinkProps, 'onClick'>;
 };
-/**
- * - **EN:** Confirm box component with trigger
- * - **CN:** 带触发器的确认框组件
- */
-declare const ConfirmAction: ConfirmActionWithStatic;
-/**
- * - **EN:** Generate a confirm box component with custom trigger and default props
- * - **CN:** 基于自定义触发器和默认属性生成一个确认弹框组件
- *
- * @param actionComponent Custom trigger component | 自定义触发器组件
- * @param defaultProps Default properties of the confirm box | 确认弹框的默认属性
- */
-export declare function withConfirmAction<TP extends object, E extends keyof TP>(actionComponent: ComponentType<TP>, defaultProps?: Partial<ConfirmActionProps<TP, E>> | (() => Partial<ConfirmActionProps<TP, E>>)): ComponentType<Omit<ConfirmActionProps<TP, E>, "triggerComponent"> & RefAttributes<ConfirmActionRef>>;
 export default ConfirmAction;

package/es/components/ConfirmAction/index.js

@@ -28,6 +28,8 @@ import useContextValidator from "../../hooks/useContextValidator";
 import useLocalizedText from "../../hooks/useLocalizedText";
 import useRefFunction from "../../hooks/useRefFunction";
 import ReactEasyContext from "../ConfigProvider/context";
+
+// eslint-disable-next-line @typescript-eslint/ban-types
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * - **EN:** Generate a confirm box component
@@ -125,6 +127,7 @@ export var genRenderer = function genRenderer(defaultProps) {
         content: coloredText(content, contentColor),
         icon: coloredText(icon, (_ref2 = iconColor !== null && iconColor !== void 0 ? iconColor : fallbackColor) !== null && _ref2 !== void 0 ? _ref2 : 'warning'),
         autoFocusButton: null,
+        closable: true,
         okButtonProps: okProps,
         cancelButtonProps: cancelProps,
         onOk: function () {
@@ -135,7 +138,7 @@ export var genRenderer = function genRenderer(defaultProps) {
                 case 0:
                   _context.prev = 0;
                   api.update({
-                    closable: true,
+                    closable: false,
                     okButtonProps: _objectSpread({
                       loading: true
                     }, okProps),
@@ -151,7 +154,7 @@ export var genRenderer = function genRenderer(defaultProps) {
                 case 6:
                   _context.prev = 6;
                   api.update({
-                    closable: false,
+                    closable: true,
                     okButtonProps: _objectSpread({
                       loading: false
                     }, okProps),
@@ -207,41 +210,35 @@ export var genRenderer = function genRenderer(defaultProps) {
  * - **EN:** Add default properties to the ConfirmAction component
  * - **CN:** 给ConfirmAction组件添加默认属性
  *
- * @param WrappedComponent ConfirmAction component | ConfirmAction组件
- * @param defaultProps Default properties | 默认属性
+ * @param RenderComponent The component that renders the ConfirmAction | 实际渲染组件
+ * @param defaultProps Add some default values based on the props passed to the component |
+ *   在组件传入的props基础上，添加一些默认值
  */
-export var withDefaultConfirmActionProps = function withDefaultConfirmActionProps(WrappedComponent, defaultProps) {
+export var withDefaultConfirmActionProps = function withDefaultConfirmActionProps(RenderComponent, defaultProps) {
   var WithDefaultProps = /*#__PURE__*/forwardRef(function (props, ref) {
-    var mergedProps = _objectSpread(_objectSpread(_objectSpread({}, defaultProps), props), {}, {
-      triggerProps: _objectSpread(_objectSpread({}, defaultProps === null || defaultProps === void 0 ? void 0 : defaultProps.triggerProps), props.triggerProps)
+    var actualProps = props;
+    var useDefaultProps = typeof defaultProps === 'function' ? defaultProps : function () {
+      return defaultProps;
+    };
+    var defaults = useDefaultProps(actualProps);
+    var mergedProps = typeof defaultProps === 'function' ? _objectSpread(_objectSpread(_objectSpread({}, actualProps), defaults), {}, {
+      triggerProps: _objectSpread(_objectSpread({}, actualProps.triggerProps), defaults === null || defaults === void 0 ? void 0 : defaults.triggerProps)
+    }) : _objectSpread(_objectSpread(_objectSpread({}, defaults), actualProps), {}, {
+      triggerProps: _objectSpread(_objectSpread({}, defaults === null || defaults === void 0 ? void 0 : defaults.triggerProps), actualProps.triggerProps)
     });
-    return /*#__PURE__*/_jsx(WrappedComponent, _objectSpread({
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return /*#__PURE__*/_jsx(RenderComponent, _objectSpread({
       ref: ref
     }, mergedProps));
   });
-  WithDefaultProps.displayName = 'ForwardedRef(WithDefaultProps)';
+  WithDefaultProps.displayName = 'ForwardRef(WithDefaultProps)';
   return WithDefaultProps;
 };
 var renderConfirmAction = genRenderer({
   confirmType: 'normal'
 });
 var forwarded = /*#__PURE__*/forwardRef(renderConfirmAction);
-forwarded.displayName = 'ForwardedRef(ConfirmAction)';
-
-/**
- * - **EN:** Interface of generic type component
- * - **CN:** 泛型组件的接口
- */
-
-/**
- * - **EN:** Interface of specific type component
- * - **CN:** 具体类型组件的接口
- */
-
-/**
- * - **EN:** Props definition of specific type component
- * - **CN:** 具体类型组件的Props定义
- */
+forwarded.displayName = 'ForwardRef(ConfirmAction)';
 
 /**
  * - **EN:** Confirm box component with trigger
@@ -249,22 +246,28 @@ forwarded.displayName = 'ForwardedRef(ConfirmAction)';
  */
 var ConfirmAction = forwarded;
 // Type of button
+// eslint-disable-next-line @typescript-eslint/ban-types
+ConfirmAction.Button = withDefaultConfirmActionProps(
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-ConfirmAction.Button = withDefaultConfirmActionProps(forwarded, {
+forwarded, {
   triggerComponent: Button,
   triggerEvent: 'onClick',
   triggerProps: {}
 });
 // Type of switch
+// eslint-disable-next-line @typescript-eslint/ban-types
+ConfirmAction.Switch = withDefaultConfirmActionProps(
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-ConfirmAction.Switch = withDefaultConfirmActionProps(forwarded, {
+forwarded, {
   triggerComponent: Switch,
   triggerEvent: 'onChange',
   triggerProps: {}
 });
 // Type of link
+// eslint-disable-next-line @typescript-eslint/ban-types
+ConfirmAction.Link = withDefaultConfirmActionProps(
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-ConfirmAction.Link = withDefaultConfirmActionProps(forwarded, {
+forwarded, {
   triggerComponent: Typography.Link,
   triggerEvent: 'onClick',
   triggerProps: {
@@ -274,19 +277,20 @@ ConfirmAction.Link = withDefaultConfirmActionProps(forwarded, {
   }
 });
 
-// todo: 实现hoc
 /**
- * - **EN:** Generate a confirm box component with custom trigger and default props
- * - **CN:** 基于自定义触发器和默认属性生成一个确认弹框组件
- *
- * @param actionComponent Custom trigger component | 自定义触发器组件
- * @param defaultProps Default properties of the confirm box | 确认弹框的默认属性
+ * - **EN:** Interface of generic type component
+ * - **CN:** 泛型组件的接口
+ */
+
+/**
+ * - **EN:** Interface of specific type component
+ * - **CN:** 具体类型组件的接口
  */
-export function withConfirmAction(actionComponent, defaultProps) {
-  var withTrigger = withDefaultConfirmActionProps(forwarded, _objectSpread({
-    triggerComponent: actionComponent
-  }, typeof defaultProps === 'function' ? defaultProps() : defaultProps));
-  return withTrigger;
-}
+
+/**
+ * - **EN:** Props definition of specific type component
+ * - **CN:** 具体类型组件的Props定义
+ */
+
 export default ConfirmAction;
 //# sourceMappingURL=index.js.map