@ioca/react 1.5.28 → 1.5.30

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

@@ -0,0 +1,192 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { AddRound } from '@ricons/material';
+import classNames from 'classnames';
+import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
+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, hideCreate, ...restProps } = props;
+    const [editingIndex, setEditingIndex] = useState(null);
+    const [loadingSet, setLoadingSet] = useState(new Set());
+    const instRef = useRef({
+        props,
+        editingIndex,
+        loadingSet,
+        setEditingIndex,
+        setLoadingSet,
+    });
+    instRef.current.props = props;
+    instRef.current.editingIndex = editingIndex;
+    instRef.current.loadingSet = loadingSet;
+    instRef.current.setEditingIndex = setEditingIndex;
+    instRef.current.setLoadingSet = setLoadingSet;
+    useEffect(() => {
+        if (editingIndex !== null) {
+            const el = document.querySelector(".i-pill-editing");
+            el?.focus();
+        }
+    }, [editingIndex]);
+    const cleanTagProps = useMemo(() => {
+        if (!tagProps)
+            return {};
+        const { onClose, dot, dotClass, ...rest } = tagProps;
+        return rest;
+    }, [tagProps]);
+    const handleClose = useCallback((index) => {
+        const inst = instRef.current;
+        if (inst.props.readonly)
+            return;
+        const hasAsync = !!inst.props.onUpdate;
+        if (hasAsync)
+            inst.setLoadingSet((prev) => new Set(prev).add(index));
+        setTimeout(async () => {
+            try {
+                const { props } = instRef.current;
+                const values = props.value ?? [];
+                const item = values[index];
+                if (item === undefined)
+                    return;
+                const result = props.onUpdate?.(undefined, item, "delete");
+                if (result instanceof Promise) {
+                    const ok = await result;
+                    if (ok === false)
+                        return;
+                }
+                const next = [...values];
+                next.splice(index, 1);
+                props.onChange?.(next);
+            }
+            finally {
+                if (hasAsync) {
+                    instRef.current.setLoadingSet((prev) => {
+                        const s = new Set(prev);
+                        s.delete(index);
+                        return s;
+                    });
+                }
+            }
+        }, 0);
+    }, []);
+    const handleItemClick = useCallback((e, index) => {
+        if (e.target.closest(".i-helpericon"))
+            return;
+        const inst = instRef.current;
+        if (inst.props.readonly)
+            return;
+        if (index === -1 && inst.props.max !== undefined && (inst.props.value?.length ?? 0) >= inst.props.max)
+            return;
+        inst.setEditingIndex(index);
+    }, []);
+    const commitEdit = useCallback((index, text) => {
+        const inst = instRef.current;
+        const formatted = inst.props.format ? inst.props.format(text) : text;
+        const hasAsync = !!(inst.props.validator || inst.props.onUpdate);
+        if (hasAsync)
+            inst.setLoadingSet((prev) => new Set(prev).add(index));
+        setTimeout(async () => {
+            try {
+                const { props } = instRef.current;
+                if (props.validator) {
+                    const valid = await Promise.resolve(props.validator(formatted));
+                    if (!valid)
+                        return;
+                }
+                const values = props.value ?? [];
+                if (index === -1) {
+                    if (values.includes(formatted))
+                        return;
+                    const result = props.onUpdate?.(formatted, undefined, "create");
+                    if (result instanceof Promise) {
+                        const ok = await result;
+                        if (ok === false)
+                            return;
+                    }
+                    props.onChange?.([...values, formatted]);
+                }
+                else {
+                    const oldValue = values[index];
+                    if (oldValue === formatted)
+                        return;
+                    const result = props.onUpdate?.(formatted, oldValue, "update");
+                    if (result instanceof Promise) {
+                        const ok = await result;
+                        if (ok === false)
+                            return;
+                    }
+                    const next = [...values];
+                    next[index] = formatted;
+                    props.onChange?.(next);
+                }
+            }
+            finally {
+                if (hasAsync) {
+                    instRef.current.setLoadingSet((prev) => {
+                        const s = new Set(prev);
+                        s.delete(index);
+                        return s;
+                    });
+                }
+                instRef.current.setEditingIndex(null);
+            }
+        }, 0);
+    }, []);
+    const handleBlur = useCallback((index) => {
+        const inst = instRef.current;
+        if (inst.loadingSet.has(index))
+            return;
+        const el = document.querySelector(".i-pill-editing");
+        const text = el?.textContent?.trim();
+        if (!text) {
+            if (index !== -1) {
+                handleClose(index);
+            }
+            else {
+                inst.setEditingIndex(null);
+            }
+            return;
+        }
+        commitEdit(index, text);
+    }, []);
+    const handleKeyDown = useCallback((e, index) => {
+        const inst = instRef.current;
+        if (inst.loadingSet.has(index))
+            return;
+        if (e.key === "Enter") {
+            e.preventDefault();
+            const text = e.currentTarget.textContent?.trim();
+            if (!text) {
+                if (index !== -1) {
+                    handleClose(index);
+                }
+                else {
+                    inst.setEditingIndex(null);
+                }
+                return;
+            }
+            commitEdit(index, text);
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            if (index !== -1) {
+                const original = inst.props.value?.[index];
+                if (original !== undefined) {
+                    e.currentTarget.textContent = original;
+                }
+            }
+            inst.setEditingIndex(null);
+        }
+    }, []);
+    const handleStartCreate = useCallback(() => {
+        const inst = instRef.current;
+        if (inst.props.readonly)
+            return;
+        if (inst.props.max !== undefined && (inst.props.value?.length ?? 0) >= inst.props.max)
+            return;
+        inst.setEditingIndex(-1);
+    }, []);
+    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 })] })] }));
+}
+
+export { Pill as default };

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;
@@ -34,7 +32,7 @@ const displayValue = (config) => {
             if (typeof opt === "number")
                 return jsxs(Tag, { children: ["+", opt] }, i);
             const { label, value } = opt;
-            return (jsx(Tag, { hoverShowClose: true, onClose: (e) => {
+            return (jsx(Tag, { onClose: (e) => {
                     e?.stopPropagation();
                     onSelect?.(value, opt);
                 }, children: label }, value));

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/components/tag/tag.js

@@ -3,15 +3,13 @@ import classNames from 'classnames';
 import Helpericon from '../utils/helpericon/helpericon.js';
 
 const Tag = (props) => {
-    const { dot, dotClass, outline, round, size = "normal", hoverShowClose, className, children, onClose, onClick, ...restProps } = props;
+    const { dot, dotClass, outline, round, size = "normal", className, children, onClose, onClick, ...restProps } = props;
     return (jsxs("span", { className: classNames("i-tag", {
             "i-tag-outline": outline,
             "i-tag-clickable": onClick,
             [`i-tag-${size}`]: size !== "normal",
             round,
-        }, className), onClick: onClick, ...restProps, children: [dot && jsx("span", { className: classNames("i-tag-dot", dotClass) }), children, onClose && (jsx(Helpericon, { active: true, className: classNames("i-tag-close", {
-                    "i-tag-hover-close": hoverShowClose,
-                }), onClick: onClose }))] }));
+        }, className), onClick: onClick, ...restProps, children: [dot && jsx("span", { className: classNames("i-tag-dot", dotClass) }), children, onClose && (jsx(Helpericon, { active: true, className: "i-tag-close i-tag-hover-close", onClick: onClose }))] }));
 };
 
 export { Tag as default };

package/lib/es/index.js

@@ -1,7 +1,6 @@
 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 Datagrid } from './components/datagrid/datagrid.js';
@@ -23,6 +22,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';