@ioca/react 1.3.79 → 1.3.81

package/lib/index.js

@@ -1483,6 +1483,7 @@ const Editor = (props) => {
     };
     useImperativeHandle(ref, () => {
         return {
+            input: editorRef.current,
             setValue(html) {
                 if (!editorRef.current)
                     return;
@@ -1660,6 +1661,7 @@ class IFormInstance {
                 rule.validator = o;
             }
             else if (o === true) {
+                rule.validator = (v) => ![undefined, null, ""].includes(v);
                 rule.message = "required";
             }
             else {
@@ -1692,6 +1694,7 @@ class IFormInstance {
                 rule.validator = o;
             }
             else if (o === true) {
+                rule.validator = (v) => ![undefined, null, ""].includes(v);
                 rule.message = "required";
             }
             else {
@@ -1825,7 +1828,7 @@ function DefaultContent(props) {
     const showHeader = title || !hideCloseButton;
     const handleOk = async () => {
         const ret = await onOk?.();
-        if (ret)
+        if (ret === false)
             return;
         onClose?.();
     };
@@ -2499,7 +2502,7 @@ const Image = (props) => {
     useEffect(() => {
         if (!src)
             return;
-        if (!ref.current?.complete && observe) {
+        if (!ref.current?.complete && observe && lazyload) {
             state.status = "loading";
         }
         if (!lazyload || !ref.current || !observe)
@@ -2537,7 +2540,7 @@ function InputContainer(props) {
 }
 
 const Number = (props) => {
-    const { ref, label, name, value = props.initValue ?? "", initValue, labelInline, step = 1, min = -Infinity, max = Infinity, thousand, precision, type, className, status = "normal", append, border, prepend, message, tip, hideControl, style, onChange, onEnter, onInput, onBlur, ...restProps } = props;
+    const { ref, label, name, value = props.initValue ?? "", initValue, labelInline, step = 1, min = -Infinity, max = Infinity, thousand, precision, type, className, width, status = "normal", append, border, prepend, message, tip, hideControl, style, onChange, onEnter, onInput, onBlur, ...restProps } = props;
     const state = useReactive({
         value,
     });
@@ -2573,14 +2576,14 @@ const Number = (props) => {
         onChange: handleChange,
         ...restProps,
     };
-    return (jsx(InputContainer, { label: label, labelInline: labelInline, className: className, style: style, tip: message ?? tip, status: status, children: jsxs("div", { className: classNames("i-input-item", {
+    return (jsx(InputContainer, { label: label, labelInline: labelInline, className: className, style: { width, ...style }, tip: message ?? tip, status: status, children: jsxs("div", { className: classNames("i-input-item", {
                 [`i-input-${status}`]: status !== "normal",
                 "i-input-borderless": !border,
             }), children: [prepend && jsx("div", { className: 'i-input-prepend', children: prepend }), !hideControl && (jsx(Helpericon, { active: true, icon: jsx(MinusRound, {}), onClick: () => handleOperate(-step) })), jsx("input", { ...inputProps }), !hideControl && (jsx(Helpericon, { active: true, icon: jsx(PlusRound, {}), onClick: () => handleOperate(step) })), append && jsx("div", { className: 'i-input-append', children: append })] }) }));
 };
 
 const Range = (props) => {
-    const { label, name, value = props.initValue ?? "", initValue, labelInline, min = -Infinity, max = Infinity, type, className, status = "normal", message, tip, append, prepend, step = 1, thousand, precision, hideControl, placeholder, border, onChange, onBlur, style, ...restProps } = props;
+    const { label, name, value = props.initValue ?? "", initValue, labelInline, min = -Infinity, max = Infinity, type, className, status = "normal", message, tip, append, prepend, step = 1, width, thousand, precision, hideControl, placeholder, border, autoSwitch, onChange, onBlur, style, ...restProps } = props;
     const state = useReactive({
         value,
     });
@@ -2597,7 +2600,7 @@ const Range = (props) => {
         const { value } = e.target;
         const v = formatInputValue(value.replace(/[^\d\.-]/g, ""));
         const range = Array.isArray(state.value) ? state.value : [];
-        range[i] = +v;
+        range[i] = v;
         state.value = range;
         onChange?.(range, e);
     };
@@ -2612,8 +2615,8 @@ const Range = (props) => {
         onChange?.(range, e);
     };
     const handleSwitch = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
+        e?.preventDefault();
+        e?.stopPropagation();
         const range = state.value ? state.value : [];
         const v = range[0];
         range[0] = range[1];
@@ -2629,14 +2632,24 @@ const Range = (props) => {
         className: "i-input i-input-number",
         ...restProps,
     };
-    return (jsx(InputContainer, { label: label, labelInline: labelInline, className: className, style: style, tip: message ?? tip, status: status, children: jsxs("div", { className: classNames("i-input-item", {
+    const handleBlur = () => {
+        const range = Array.isArray(state.value) ? state.value : [];
+        if (range.length < 2)
+            return;
+        const l = +range[0];
+        const r = +range[1];
+        if (l <= r)
+            return;
+        handleSwitch();
+    };
+    return (jsx(InputContainer, { label: label, labelInline: labelInline, className: className, style: { width, ...style }, tip: message ?? tip, status: status, children: jsxs("div", { className: classNames("i-input-item", {
                 [`i-input-${status}`]: status !== "normal",
                 "i-input-borderless": !border,
-            }), children: [prepend && jsx("div", { className: 'i-input-prepend', children: prepend }), !hideControl && (jsx(Helpericon, { active: true, icon: jsx(MinusRound, {}), onClick: (e) => handleOperate(e, -step, 0) })), jsx("input", { value: state.value?.[0] || "", placeholder: placeholder?.[0], ...inputProps, onChange: (e) => handleChange(e, 0) }), !hideControl && (jsx(Helpericon, { active: true, icon: jsx(PlusRound, {}), onClick: (e) => handleOperate(e, step, 0) })), jsx(Helpericon, { active: true, icon: jsx(SyncAltRound, {}), style: { margin: 0 }, onClick: handleSwitch }), !hideControl && (jsx(Helpericon, { active: true, icon: jsx(MinusRound, {}), onClick: (e) => handleOperate(e, -step, 1) })), jsx("input", { value: state.value?.[1] || "", placeholder: placeholder?.[1], ...inputProps, onChange: (e) => handleChange(e, 1) }), !hideControl && (jsx(Helpericon, { active: true, icon: jsx(PlusRound, {}), onClick: (e) => handleOperate(e, step, 1) })), append && jsx("div", { className: 'i-input-append', children: append })] }) }));
+            }), children: [prepend && jsx("div", { className: 'i-input-prepend', children: prepend }), !hideControl && (jsx(Helpericon, { active: true, icon: jsx(MinusRound, {}), onClick: (e) => handleOperate(e, -step, 0) })), jsx("input", { value: state.value?.[0] || "", placeholder: placeholder?.[0], ...inputProps, onBlur: handleBlur, onChange: (e) => handleChange(e, 0) }), !hideControl && (jsx(Helpericon, { active: true, icon: jsx(PlusRound, {}), onClick: (e) => handleOperate(e, step, 0) })), jsx(Helpericon, { active: true, icon: jsx(SyncAltRound, {}), style: { margin: 0 }, onClick: handleSwitch }), !hideControl && (jsx(Helpericon, { active: true, icon: jsx(MinusRound, {}), onClick: (e) => handleOperate(e, -step, 1) })), jsx("input", { value: state.value?.[1] || "", placeholder: placeholder?.[1], ...inputProps, onBlur: handleBlur, onChange: (e) => handleChange(e, 1) }), !hideControl && (jsx(Helpericon, { active: true, icon: jsx(PlusRound, {}), onClick: (e) => handleOperate(e, step, 1) })), append && jsx("div", { className: 'i-input-append', children: append })] }) }));
 };
 
 const Textarea = (props) => {
-    const { ref, label, name, value = props.initValue, initValue, labelInline, className, status = "normal", message, tip, autoSize, border, style, onChange, onEnter, ...restProps } = props;
+    const { ref, label, name, value = props.initValue, initValue, labelInline, className, status = "normal", message, tip, autoSize, border, width, style, onChange, onEnter, ...restProps } = props;
     const state = useReactive({
         value,
     });
@@ -2668,14 +2681,14 @@ const Textarea = (props) => {
         onKeyDown: handleKeydown,
         ...restProps,
     };
-    return (jsx(InputContainer, { label: label, labelInline: labelInline, className: className, style: style, tip: message ?? tip, status: status, children: jsx("div", { ref: refTextarea, className: classNames("i-input-item", {
+    return (jsx(InputContainer, { label: label, labelInline: labelInline, className: className, style: { width, ...style }, tip: message ?? tip, status: status, children: jsx("div", { ref: refTextarea, className: classNames("i-input-item", {
                 [`i-input-${status}`]: status !== "normal",
                 "i-input-borderless": !border,
             }), children: jsx("textarea", { ...inputProps }) }) }));
 };
 
 const Input = ((props) => {
-    const { ref, type = "text", label, name, value = props.initValue ?? "", initValue = "", prepend, append, labelInline, className, status = "normal", message, tip, clear, hideVisible, border, required, onChange, onEnter, style, ...restProps } = props;
+    const { ref, type = "text", label, name, value = props.initValue ?? "", initValue = "", prepend, append, labelInline, className, status = "normal", message, tip, clear, width, hideVisible, border, required, onChange, onEnter, style, ...restProps } = props;
     const state = useReactive({
         value,
         type,
@@ -2721,7 +2734,7 @@ const Input = ((props) => {
     };
     const clearable = clear && state.value;
     const showHelper = type === "password" && !!state.value;
-    return (jsx(InputContainer, { label: label, labelInline: labelInline, className: className, style: style, tip: message ?? tip, status: status, required: required, children: jsxs("div", { className: classNames("i-input-item", {
+    return (jsx(InputContainer, { label: label, labelInline: labelInline, className: className, style: { width, ...style }, tip: message ?? tip, status: status, required: required, children: jsxs("div", { className: classNames("i-input-item", {
                 [`i-input-${status}`]: status !== "normal",
                 "i-input-borderless": !border,
             }), children: [prepend && jsx("div", { className: 'i-input-prepend', children: prepend }), jsx("input", { ...inputProps }), jsx(Helpericon, { active: !!clearable || showHelper, icon: HelperIcon, onClick: handleHelperClick }), append && jsx("div", { className: 'i-input-append', children: append })] }) }));
@@ -3846,7 +3859,7 @@ const Swiper = ((props) => {
                         }, onMouseDown: handleMouseDown, onTouchStart: handleMouseDown, children: displayItems.map((item, i) => {
                             const { props: itemProps } = item;
                             return (jsx(Item$1, { index: i, itemIndex: (i - extra + size) % size, active: i - extra === state.current, type: type, gap: gap, transition: transition, itemHeight: itemHeight, vertical: vertical, onItemClick: onItemClick, ...itemProps }, i));
-                        }) }), arrow && (jsxs(Fragment, { children: [(loop || state.current !== 0) && (jsx("a", { className: 'i-swiper-arrow i-swiper-prev', onClick: swipePrev, children: prev })), (loop || state.current < size - display) && (jsx("a", { className: 'i-swiper-arrow i-swiper-next', onClick: swipeNext, children: next }))] }))] }), indicator && (jsx("div", { className: classNames("i-swiper-indicators", {
+                        }) }), arrow && size > 1 && (jsxs(Fragment, { children: [(loop || state.current !== 0) && (jsx("a", { className: 'i-swiper-arrow i-swiper-prev', onClick: swipePrev, children: prev })), (loop || state.current < size - display) && (jsx("a", { className: 'i-swiper-arrow i-swiper-next', onClick: swipeNext, children: next }))] }))] }), indicator && (jsx("div", { className: classNames("i-swiper-indicators", {
                     "i-swiper-indicators-fixed": fixedIndicator,
                 }), children: indicatorsLoop.map((_, i) => {
                     return (jsx("a", { className: classNames("i-swiper-indicator", {

package/lib/types/components/editor/type.d.ts

@@ -12,6 +12,7 @@ interface IEditor extends Omit<HTMLAttributes<HTMLDivElement>, "onInput"> {
     onInput?: (html: string, e: FormEvent<HTMLDivElement>) => void;
 }
 interface RefEditor {
+    input: HTMLDivElement | null;
     getSafeValue: () => string;
     setValue: (html: string) => void;
 }

package/lib/types/components/input/type.d.ts

@@ -12,6 +12,7 @@ interface IInput extends BaseInput, Omit<InputHTMLAttributes<HTMLInputElement>,
 interface ITextarea extends Omit<BaseInput, "ref">, Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "defaultValue" | "onChange"> {
     ref?: RefObject<HTMLTextAreaElement | null>;
     autoSize?: boolean;
+    width?: string | number;
 }
 interface IInputNumber extends BaseInput, Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "defaultValue"> {
     value?: string | number;
@@ -35,6 +36,7 @@ interface IInputRange extends Omit<BaseInput, "value" | "onChange">, Omit<InputH
     thousand?: string;
     precision?: number;
     hideControl?: boolean;
+    autoSwitch?: boolean;
     onChange?: (value: (number | string | undefined)[], e?: ChangeEvent<HTMLInputElement> | MouseEvent<Element>) => void;
 }
 type CompositionInput = ForwardRefExoticComponent<IInput> & {

package/lib/types/components/modal/type.d.ts

@@ -21,7 +21,7 @@ interface IModal extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
     keepDOM?: boolean;
     disableEsc?: boolean;
     onVisibleChange?: (visible: boolean) => void;
-    onOk?: () => void | Promise<any>;
+    onOk?: () => (void | boolean) | Promise<any>;
     onClose?: () => void;
 }
 interface CompositionModal extends FC<IModal> {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ioca/react",
-	"version": "1.3.79",
+	"version": "1.3.81",
 	"type": "module",
 	"scripts": {
 		"dev": "vite",