@ioca/react 1.5.29 → 1.5.31

package/lib/es/components/list/list.js

@@ -4,11 +4,18 @@ import { forwardRef, Children, cloneElement } from 'react';
 import Item from './item.js';
 
 const List = forwardRef((props, ref) => {
-    const { label, type, border, className, children, ...restProps } = props;
-    return (jsx("ul", { ref: ref, className: classNames("i-list", className), ...restProps, children: Children.map(children, (node, i) => {
+    const { label, type, border, padding, className, style, children, ...restProps } = props;
+    return (jsx("ul", { ref: ref, className: classNames("i-list", className, {
+            "i-list-option-type": type === "option",
+        }), style: {
+            ...(padding !== undefined
+                ? { "--option-gap": typeof padding === "number" ? `${padding}px` : padding }
+                : undefined),
+            ...style,
+        }, ...restProps, children: Children.map(children, (node, i) => {
             const renderLabel = typeof label === "function" ? label(i) : label;
-            const { type, props: nodeProps } = node;
-            if (type === Item) {
+            const { type: elementType, props: nodeProps } = node;
+            if (elementType === Item) {
                 return cloneElement(node, {
                     label: renderLabel,
                     ...nodeProps,

package/lib/es/components/modal/hookModal.js

@@ -13,7 +13,17 @@ const HookModal = (props) => {
         },
         close: () => {
             state.visible = false;
-            if (mergedProps.closable ?? true)
+            const canClose = typeof mergedProps.closable === 'function'
+                ? mergedProps.closable()
+                : (mergedProps.closable ?? true);
+            if (canClose instanceof Promise) {
+                canClose.then((result) => {
+                    if (!result)
+                        state.visible = true;
+                });
+                return;
+            }
+            if (canClose)
                 return;
             Promise.resolve().then(() => {
                 state.visible = true;

package/lib/es/components/modal/modal.js

@@ -46,25 +46,33 @@ function Modal(props) {
         if (!toggable.current)
             return;
         toggable.current = false;
-        if (!closable) {
-            setBounced(true);
+        const canClose = typeof closable === 'function' ? closable() : closable;
+        const exec = (result) => {
+            if (!result) {
+                setBounced(true);
+                const timer = setTimeout(() => {
+                    setBounced(false);
+                    toggable.current = true;
+                }, 400);
+                return () => clearTimeout(timer);
+            }
+            setActive(false);
+            updateVisible(mid, false);
             const timer = setTimeout(() => {
-                setBounced(false);
+                if (!keepDOM)
+                    setShow(false);
                 toggable.current = true;
-            }, 400);
+                onVisibleChange?.(false);
+                onClose?.();
+            }, 240);
             return () => clearTimeout(timer);
+        };
+        if (canClose instanceof Promise) {
+            canClose.then(exec);
+            return;
         }
-        setActive(false);
-        updateVisible(mid, false);
-        const timer = setTimeout(() => {
-            if (!keepDOM)
-                setShow(false);
-            toggable.current = true;
-            onVisibleChange?.(false);
-            onClose?.();
-        }, 240);
-        return () => clearTimeout(timer);
-    }, [closable, keepDOM, onClose, onVisibleChange]);
+        return exec(canClose);
+    }, [closable, keepDOM, mid, onClose, onVisibleChange]);
     const handleBackdropClick = () => {
         backdropClosable && handleHide();
     };
@@ -124,7 +132,7 @@ function Modal(props) {
                 e.stopPropagation();
                 handleClick();
                 onClick?.(e);
-            }, role: "dialog", "aria-modal": top, "data-mid": mid, ...restProps, children: jsxs(ModalContext.Provider, { value: true, children: [customized && children, !customized && (jsx(Content, { title: title, hideCloseButton: hideCloseButton, footer: footer, okButtonProps: okButtonProps, cancelButtonProps: cancelButtonProps, children: children, footerLeft: footerLeft, onOk: onOk, onClose: handleHide }))] }) }) }), getContainer());
+            }, role: "dialog", "aria-modal": top, "data-mid": mid, ...restProps, children: jsxs(ModalContext.Provider, { value: true, children: [customized && children, !customized && jsx(Content, { title: title, hideCloseButton: hideCloseButton, footer: footer, okButtonProps: okButtonProps, cancelButtonProps: cancelButtonProps, children: children, footerLeft: footerLeft, onOk: onOk, onClose: handleHide })] }) }) }), getContainer());
 }
 Modal.useModal = useModal;
 

package/lib/es/components/pill/pill.js

@@ -6,7 +6,7 @@ import CreateTag from './create.js';
 import TagItem from './item.js';
 
 function Pill(props) {
-    const { value = [], tagProps, max, icon = jsx(AddRound, {}), className, label, labelInline, readonly, editable, onChange, onUpdate, validator, format, renderItem, ...restProps } = props;
+    const { value = [], tagProps, max, icon = jsx(AddRound, {}), className, label, labelInline, readonly, editable, onChange, onUpdate, validator, format, renderItem, hideCreate, ...restProps } = props;
     const [editingIndex, setEditingIndex] = useState(null);
     const [loadingSet, setLoadingSet] = useState(new Set());
     const instRef = useRef({
@@ -185,7 +185,7 @@ function Pill(props) {
             return;
         inst.setEditingIndex(-1);
     }, []);
-    const canCreate = !readonly && (max === undefined || value.length < max);
+    const canCreate = !hideCreate && !readonly && (max === undefined || value.length < max);
     return (jsxs("div", { className: classNames("i-pills i-input-label", { "i-input-inline": labelInline }, className), ...restProps, children: [label && jsx("span", { className: "i-input-label-text", children: label }), jsxs("div", { className: "i-pill-list", children: [value.map((item, i) => (jsx(TagItem, { item: item, index: i, isEditing: editingIndex === i, isLoading: loadingSet.has(i), tagProps: tagProps, editable: editable, readonly: readonly, renderItem: renderItem, onClose: handleClose, onClick: handleItemClick, onBlur: handleBlur, onKeyDown: handleKeyDown }, i))), canCreate && jsx(CreateTag, { isEditing: editingIndex === -1, isLoading: loadingSet.has(-1), createTagProps: cleanTagProps, tagProps: tagProps, onBlur: handleBlur, onKeyDown: handleKeyDown, onStartCreate: handleStartCreate })] })] }));
 }
 

package/lib/es/components/select/options.js

@@ -7,19 +7,17 @@ import Tag from '../tag/tag.js';
 import Empty from '../utils/empty/index.js';
 
 const Options = (props) => {
-    const { value: val, options, filter, filterPlaceholder, multiple, empty = jsx(Empty, {}), onSelect, onFilter, } = props;
+    const { value: val, options, filter, filterPlaceholder, multiple, empty = jsx(Empty, {}), onSelect, onFilter } = props;
     return (jsxs("div", { className: classNames("i-select-options", {
             "i-select-options-multiple": multiple,
-        }), children: [filter && multiple && (jsxs("div", { className: 'i-select-filter', children: [jsx(Icon, { icon: jsx(SearchRound, {}), className: 'color-8 ml-8 my-auto', size: '1.2em' }), jsx("input", { type: 'text', className: 'i-input', placeholder: filterPlaceholder, onChange: onFilter })] })), options.length === 0 && empty, options.map((option, i) => {
+        }), children: [filter && multiple && (jsxs("div", { className: "i-select-filter", children: [jsx(Icon, { icon: jsx(SearchRound, {}), className: "color-8 ml-8 my-auto", size: "1.2em" }), jsx("input", { type: "text", className: "i-input", placeholder: filterPlaceholder, onChange: onFilter })] })), options.length === 0 && empty, options.map((option, i) => {
                 const { label, value, disabled } = option;
-                const isActive = multiple
-                    ? val?.includes(value)
-                    : val === value;
-                return (jsxs(List.Item, { active: isActive, type: 'option', onClick: () => onSelect?.(value, option), disabled: disabled, children: [multiple && (jsx(Icon, { icon: jsx(CheckRound, {}), className: 'i-select-option-check', size: '1em' })), label] }, value || i));
+                const isActive = multiple ? val?.includes(value) : val === value;
+                return (jsxs(List.Item, { active: isActive, type: "option", onClick: () => onSelect?.(value, option), disabled: disabled, children: [multiple && jsx(Icon, { icon: jsx(CheckRound, {}), className: "i-select-option-check", size: "1em" }), label] }, value || i));
             })] }));
 };
 const activeOptions = (options = [], value = [], max = 3) => {
-    const total = options.flatMap((opt) => value.includes(opt.value) ? [opt] : []);
+    const total = options.flatMap((opt) => (value.includes(opt.value) ? [opt] : []));
     if (max >= total.length)
         return total;
     const rest = total.length - max;

package/lib/es/components/select/select.js

@@ -9,7 +9,7 @@ import Helpericon from '../utils/helpericon/helpericon.js';
 import { displayValue, Options } from './options.js';
 
 const Select = (props) => {
-    const { ref, type = "text", name, label, value = "", placeholder, required, options = [], multiple, prepend, append, labelInline, style, className, message, status = "normal", hideClear, hideArrow, maxDisplay, border, filter, tip, filterPlaceholder = "...", popupProps, onSelect, onChange, ...restProps } = props;
+    const { ref, type = "text", name, label, value = "", placeholder, required, options = [], multiple, prepend, append, labelInline, style, className, message, status = "normal", hideClear, hideArrow, maxDisplay, border = true, filter, tip, filterPlaceholder = "...", popupProps, onSelect, onChange, ...restProps } = props;
     const [filterValue, setFilterValue] = useState("");
     const [selectedValue, setSelectedValue] = useState(value);
     const [active, setActive] = useState(false);
@@ -24,9 +24,7 @@ const Select = (props) => {
         if (!fv || !filter)
             return formattedOptions;
         const lowerFv = fv.toLowerCase();
-        const filterFn = typeof filter === "function"
-            ? filter
-            : (opt) => opt._value.includes(lowerFv) || opt._label.includes(lowerFv);
+        const filterFn = typeof filter === "function" ? filter : (opt) => opt._value.includes(lowerFv) || opt._label.includes(lowerFv);
         return formattedOptions.filter(filterFn);
     }, [formattedOptions, filter, filterValue]);
     const changeValue = (v) => {
@@ -75,9 +73,7 @@ const Select = (props) => {
     useEffect(() => {
         setSelectedValue(value);
     }, [value]);
-    const hasValue = multiple
-        ? selectedValue.length > 0
-        : !!selectedValue;
+    const hasValue = multiple ? selectedValue.length > 0 : !!selectedValue;
     const clearable = !hideClear && active && hasValue;
     const text = message ?? tip;
     return (jsxs("label", { className: classNames("i-input-label", className, {
@@ -94,7 +90,7 @@ const Select = (props) => {
                                 multiple,
                                 maxDisplay,
                                 onSelect: handleSelect,
-                            }) })) : (jsx("input", { className: "i-input i-select", placeholder: placeholder, readOnly: true }))) : null, !multiple && (jsx("input", { value: active ? filterValue : displayLabel, className: "i-input i-select", placeholder: displayLabel || placeholder, onChange: handleInputChange, readOnly: !filter })), jsx(Helpericon, { active: !hideArrow, icon: clearable ? undefined : jsx(UnfoldMoreRound, {}), onClick: handleHelperClick }), append] }) }), text && jsx("span", { className: "i-input-message", children: text })] }));
+                            }) })) : (jsx("input", { className: "i-input i-select", placeholder: placeholder, readOnly: true }))) : null, !multiple && jsx("input", { value: active ? filterValue : displayLabel, className: "i-input i-select", placeholder: displayLabel || placeholder, onChange: handleInputChange, readOnly: !filter }), jsx(Helpericon, { active: !hideArrow, icon: clearable ? undefined : jsx(UnfoldMoreRound, {}), onClick: handleHelperClick }), append] }) }), text && jsx("span", { className: "i-input-message", children: text })] }));
 };
 
 export { Select as default };

package/lib/es/index.js

@@ -1,10 +1,8 @@
 export { default as Affix } from './components/affix/affix.js';
 export { default as Badge } from './components/badge/badge.js';
 export { default as Button } from './components/button/button.js';
-export { default as Card } from './components/card/card.js';
 export { default as Checkbox } from './components/checkbox/checkbox.js';
 export { default as Collapse } from './components/collapse/collapse.js';
-export { default as Pill } from './components/pill/pill.js';
 export { default as Datagrid } from './components/datagrid/datagrid.js';
 export { default as Description } from './components/description/description.js';
 export { default as Drawer } from './components/drawer/drawer.js';
@@ -15,6 +13,7 @@ export { default as Form } from './components/form/form.js';
 export { default as Icon } from './components/icon/icon.js';
 export { default as Image } from './components/image/image.js';
 export { default as Input } from './components/input/input.js';
+export { default as Divider } from './components/divider/divider.js';
 export { default as List } from './components/list/list.js';
 export { default as Loading } from './components/loading/loading.js';
 export { default as Message } from './components/message/index.js';
@@ -24,6 +23,7 @@ export { default as ColorPicker } from './components/picker/colors/index.js';
 export { default as DatePicker } from './components/picker/dates/index.js';
 export { default as TimePicker } from './components/picker/time/index.js';
 export { default as DateRange } from './components/picker/daterange/daterange.js';
+export { default as Pill } from './components/pill/pill.js';
 export { default as Popconfirm } from './components/popconfirm/popconfirm.js';
 export { default as Popup } from './components/popup/popup.js';
 export { default as Progress } from './components/progress/progress.js';