@zat-design/sisyphus-react 4.7.1 → 4.7.2-beta.1

package/es/ProForm/components/render/ConfirmWrapper.js

@@ -1,7 +1,7 @@
 import { Fragment, jsx } from "react/jsx-runtime";
 import isFunction from "lodash/isFunction";
 import isObject from "lodash/isObject";
-import React from "react";
+import React, { useLayoutEffect, useRef, useState } from "react";
 import { Modal } from "antd";
 import ProForm from "../../index";
 import locale from "../../../locale";
@@ -9,45 +9,154 @@ const defaultConfirmProps = {
   title: locale.ProForm.confirmTitle,
   content: locale.ProForm.confirmContent
 };
+const isTextEvent = (event) => {
+  const target = event == null ? void 0 : event.target;
+  return (target == null ? void 0 : target.tagName) === "TEXTAREA" || (target == null ? void 0 : target.tagName) === "INPUT" && ["text", "search", "password", "email", "tel", "url"].includes(target.type);
+};
 const ConfirmWrapper = (props) => {
   const { onChange, children, confirm, otherProps, ...rest } = props;
   const { form, namePath, name, index, listName } = ProForm.useFieldProps() || {};
+  const [draft, setDraft] = useState();
+  const composing = useRef(false);
+  const compositionValue = useRef(void 0);
+  const revision = useRef(0);
+  useLayoutEffect(() => {
+    revision.current += 1;
+    composing.current = false;
+    compositionValue.current = void 0;
+    setDraft(void 0);
+    return () => {
+      revision.current += 1;
+    };
+  }, [rest.value]);
   const handleChange = async (value, ...other) => {
-    const _value = (value == null ? void 0 : value.target) ? value.target.value : value;
-    const confirmProps = isFunction(confirm) ? await confirm(value, form.getFieldsValue(), {
-      option: other[0],
-      form,
-      namePath,
-      name,
-      index,
-      preValue: form.getFieldValue(listName || name)
-    }) : confirm;
-    if (confirmProps === false) {
+    var _a;
+    const target = typeof value === "object" && value !== null && "target" in value ? value.target : void 0;
+    const _value = typeof target === "object" && target !== null ? "value" in target ? target.value : void 0 : value;
+    const text = isTextEvent(value);
+    const currentRevision = text ? ++revision.current : revision.current;
+    const isCurrent = () => !text || currentRevision === revision.current;
+    const rollback = () => {
+      if (text && isCurrent())
+        setDraft(void 0);
+    };
+    const cancel = () => {
+      rollback();
+      if (text && isCurrent())
+        revision.current += 1;
+    };
+    const commit = () => {
+      if (!isCurrent())
+        return;
+      rollback();
       onChange == null ? void 0 : onChange(_value, ...other);
+    };
+    if (text) {
+      setDraft(value.target.value);
+      if (composing.current)
+        return;
+    }
+    try {
+      const confirmProps = isFunction(confirm) ? await confirm(value, form.getFieldsValue(), {
+        option: other[0],
+        form,
+        namePath,
+        name,
+        index,
+        preValue: form.getFieldValue(listName || name)
+      }) : confirm;
+      if (!isCurrent())
+        return;
+      if (confirmProps === false) {
+        commit();
+      } else if (confirmProps === true) {
+        Modal.confirm({
+          ...defaultConfirmProps,
+          onOk: commit,
+          ...text ? { onCancel: cancel } : {}
+        });
+      } else if (isObject(confirmProps)) {
+        Modal.confirm({
+          ..."title" in confirmProps || "content" in confirmProps ? {} : defaultConfirmProps,
+          ...confirmProps,
+          ...text ? {
+            // Modal uses callback arity to decide who closes the dialog.
+            onCancel: ((_a = confirmProps.onCancel) == null ? void 0 : _a.length) ? (close) => {
+              var _a2;
+              cancel();
+              return (_a2 = confirmProps.onCancel) == null ? void 0 : _a2.call(confirmProps, close);
+            } : () => {
+              var _a2;
+              cancel();
+              return (_a2 = confirmProps.onCancel) == null ? void 0 : _a2.call(confirmProps);
+            }
+          } : {},
+          onOk: async (...arg) => {
+            var _a2;
+            if (!isCurrent())
+              return;
+            try {
+              await ((_a2 = confirmProps.onOk) == null ? void 0 : _a2.call(confirmProps, ...arg));
+              commit();
+            } catch (error) {
+              rollback();
+              throw error;
+            }
+          }
+        });
+      } else {
+        rollback();
+      }
+    } catch (error) {
+      rollback();
+      throw error;
+    }
+  };
+  const childProps = React.isValidElement(children) ? children.props : {};
+  const onCompositionStart = (event) => {
+    var _a;
+    if (isTextEvent(event)) {
+      revision.current += 1;
+      composing.current = true;
+      compositionValue.current = void 0;
+      setDraft(event.currentTarget.value);
     }
-    if (confirmProps === true) {
-      Modal.confirm({
-        ...defaultConfirmProps,
-        onOk: () => onChange == null ? void 0 : onChange(_value, ...other)
-      });
+    (_a = rest.onCompositionStart ?? childProps.onCompositionStart) == null ? void 0 : _a(event);
+  };
+  const onCompositionEnd = (event) => {
+    var _a;
+    let result;
+    if (isTextEvent(event) && composing.current) {
+      composing.current = false;
+      compositionValue.current = event.currentTarget.value;
+      result = handleChange(event);
+    }
+    (_a = rest.onCompositionEnd ?? childProps.onCompositionEnd) == null ? void 0 : _a(event);
+    return result;
+  };
+  const onInputChange = (value, ...other) => {
+    if (isTextEvent(value) && compositionValue.current !== void 0) {
+      const previousComposition = compositionValue.current;
+      compositionValue.current = void 0;
+      if (value.target.value === previousComposition)
+        return;
     }
-    if (isObject(confirmProps)) {
-      Modal.confirm({
-        ..."title" in confirmProps || "content" in confirmProps ? {} : defaultConfirmProps,
-        ...confirmProps,
-        onOk: async (...arg) => {
-          var _a;
-          await ((_a = confirmProps.onOk) == null ? void 0 : _a.call(confirmProps, ...arg));
-          onChange == null ? void 0 : onChange(_value, ...other);
-        }
-      });
+    return handleChange(value, ...other);
+  };
+  const onKeyPress = (event) => {
+    var _a;
+    if (isTextEvent(event) && event.key === "Enter" && (composing.current || event.nativeEvent.isComposing || event.keyCode === 229)) {
+      event.stopPropagation();
     }
+    (_a = rest.onKeyPress ?? childProps.onKeyPress) == null ? void 0 : _a(event);
   };
   return /* @__PURE__ */ jsx(Fragment, { children: React.isValidElement(children) && React.cloneElement(children, {
     ...rest,
-    // @ts-ignore
-    value: rest.value === void 0 ? null : rest.value,
-    onChange: handleChange
+    value: draft !== void 0 ? draft : rest.value === void 0 ? null : rest.value,
+    onChange: onInputChange,
+    onCompositionStart,
+    onCompositionEnd,
+    onKeyPress
   }) });
 };
 var ConfirmWrapper_default = ConfirmWrapper;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zat-design/sisyphus-react",
-  "version": "4.7.1",
+  "version": "4.7.2-beta.1",
   "license": "MIT",
   "publishConfig": {
     "access": "public",