@ioca/react 1.5.5 → 1.5.7

package/lib/cjs/components/picker/colors/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../packages/components/picker/colors/index.tsx"],"sourcesContent":["import ColorsPanel from \"@rc-component/color-picker\";\r\nimport { useEffect, useState } from \"react\";\r\nimport Popup from \"../../popup\";\r\nimport { IColorPicker } from \"../type\";\r\nimport Footer, { ColorMethods } from \"./footer\";\r\nimport Handle from \"./handle\";\r\nimport \"./index.css\";\r\n\r\nexport default function ColorPicker(props: IColorPicker) {\r\n\tconst {\r\n\t\tvalue,\r\n\t\ttype = \"HEX\",\r\n\t\tdisabledAlpha,\r\n\t\tchildren,\r\n\t\tusePanel,\r\n\t\thandle = \"both\",\r\n\t\tplaceholder = \"Colors\",\r\n\t\tpopupProps,\r\n\t\tonChange,\r\n\t} = props;\r\n\r\n\tconst [colorType, setColorType] = useState(type);\r\n\tconst [colorValue, setColorValue] = useState(value);\r\n\tconst [syncValue, setSyncValue] = useState(value);\r\n\tconst [visible, setVisible] = useState<boolean | undefined>(popupProps?.visible);\r\n\r\n\tconst handleChange = (target) => {\r\n\t\tsetSyncValue(target);\r\n\t};\r\n\r\n\tconst handleComplete = (target) => {\r\n\t\tconst method = ColorMethods[colorType];\r\n\r\n\t\tif (target.a !== 1) {\r\n\t\t\ttarget.a = parseFloat(target.a.toFixed(3));\r\n\t\t}\r\n\r\n\t\tsetColorValue(target[method]?.());\r\n\t};\r\n\r\n\tconst handleVisibleChange = (v: boolean) => {\r\n\t\tsetVisible(v);\r\n\t\tpopupProps?.onVisibleChange?.(v);\r\n\t};\r\n\r\n\tconst handleTypeChange = (t) => {\r\n\t\tconst method = ColorMethods[t];\r\n\r\n\t\tsetColorType(t);\r\n\t\tsetColorValue(syncValue?.[method]?.());\r\n\t};\r\n\r\n\tconst handleValueChange = (v) => {\r\n\t\tsetColorValue(v);\r\n\t\tsetSyncValue(v);\r\n\t};\r\n\r\n\tconst handleOk = () => {\r\n\t\tonChange?.(colorValue);\r\n\t\tsetVisible(false);\r\n\t};\r\n\r\n\tuseEffect(() => {\r\n\t\tsetSyncValue(value);\r\n\t\tsetColorValue(value);\r\n\t}, [value]);\r\n\r\n\tuseEffect(() => {\r\n\t\tif (popupProps?.visible !== undefined) {\r\n\t\t\tsetVisible(popupProps.visible);\r\n\t\t}\r\n\t}, [popupProps?.visible]);\r\n\r\n\tif (usePanel) {\r\n\t\treturn <ColorsPanel {...props} />;\r\n\t}\r\n\r\n\treturn (\r\n\t\t<Popup\r\n\t\t\ttrigger='click'\r\n\t\t\ttouchable\r\n\t\t\tposition='bottom'\r\n\t\t\t{...popupProps}\r\n\t\t\tvisible={visible}\r\n\t\t\tcontent={\r\n\t\t\t\t<ColorsPanel\r\n\t\t\t\t\tvalue={syncValue}\r\n\t\t\t\t\tdisabledAlpha={disabledAlpha}\r\n\t\t\t\t\tpanelRender={(panel) => {\r\n\t\t\t\t\t\treturn (\r\n\t\t\t\t\t\t\t<>\r\n\t\t\t\t\t\t\t\t{panel}\r\n\t\t\t\t\t\t\t\t<Footer\r\n\t\t\t\t\t\t\t\t\tvalue={colorValue}\r\n\t\t\t\t\t\t\t\t\ttype={colorType}\r\n\t\t\t\t\t\t\t\t\tonTypeChange={handleTypeChange}\r\n\t\t\t\t\t\t\t\t\tonChange={handleValueChange}\r\n\t\t\t\t\t\t\t\t\tonOk={handleOk}\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t</>\r\n\t\t\t\t\t\t);\r\n\t\t\t\t\t}}\r\n\t\t\t\t\tonChange={handleChange}\r\n\t\t\t\t\tonChangeComplete={handleComplete}\r\n\t\t\t\t/>\r\n\t\t\t}\r\n\t\t\tonVisibleChange={handleVisibleChange}\r\n\t\t>\r\n\t\t\t{children ?? (\r\n\t\t\t\t<Handle\r\n\t\t\t\t\tcolor={value}\r\n\t\t\t\t\thandle={handle}\r\n\t\t\t\t\tplaceholder={placeholder}\r\n\t\t\t\t/>\r\n\t\t\t)}\r\n\t\t</Popup>\r\n\t);\r\n}\r\n"],"names":["handle","useState","ColorMethods","useEffect","_jsx","ColorsPanel","Popup","_jsxs","_Fragment","Footer","Handle"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../packages/components/picker/colors/index.tsx"],"sourcesContent":["import ColorsPanel from \"@rc-component/color-picker\";\r\nimport { useEffect, useState } from \"react\";\r\nimport InputContainer from \"../../input/container\";\r\nimport Popup from \"../../popup\";\r\nimport { IColorPicker } from \"../type\";\r\nimport Footer, { ColorMethods } from \"./footer\";\r\nimport Handle from \"./handle\";\r\nimport \"./index.css\";\r\n\r\nexport default function ColorPicker(props: IColorPicker) {\r\n    const {\r\n        value,\r\n        type = \"HEX\",\r\n        disabledAlpha,\r\n        children,\r\n        usePanel,\r\n        handle = \"both\",\r\n        placeholder = \"Colors\",\r\n        popupProps,\r\n        onChange,\r\n        label,\r\n        required,\r\n        ...restProps\r\n    } = props;\r\n\r\n    const [colorType, setColorType] = useState(type);\r\n    const [colorValue, setColorValue] = useState(value);\r\n    const [syncValue, setSyncValue] = useState(value);\r\n    const [visible, setVisible] = useState<boolean | undefined>(\r\n        popupProps?.visible,\r\n    );\r\n\r\n    const handleChange = (target) => {\r\n        setSyncValue(target);\r\n    };\r\n\r\n    const handleComplete = (target) => {\r\n        const method = ColorMethods[colorType];\r\n\r\n        if (target.a !== 1) {\r\n            target.a = parseFloat(target.a.toFixed(3));\r\n        }\r\n\r\n        setColorValue(target[method]?.());\r\n    };\r\n\r\n    const handleVisibleChange = (v: boolean) => {\r\n        setVisible(v);\r\n        popupProps?.onVisibleChange?.(v);\r\n    };\r\n\r\n    const handleTypeChange = (t) => {\r\n        const method = ColorMethods[t];\r\n\r\n        setColorType(t);\r\n        setColorValue(syncValue?.[method]?.());\r\n    };\r\n\r\n    const handleValueChange = (v) => {\r\n        setColorValue(v);\r\n        setSyncValue(v);\r\n    };\r\n\r\n    const handleOk = () => {\r\n        onChange?.(colorValue);\r\n        setVisible(false);\r\n    };\r\n\r\n    useEffect(() => {\r\n        setSyncValue(value);\r\n        setColorValue(value);\r\n    }, [value]);\r\n\r\n    useEffect(() => {\r\n        if (popupProps?.visible !== undefined) {\r\n            setVisible(popupProps.visible);\r\n        }\r\n    }, [popupProps?.visible]);\r\n\r\n    if (usePanel) {\r\n        return (\r\n            <InputContainer label={label} required={required}>\r\n                <ColorsPanel {...restProps} value={value} onChange={onChange} />\r\n            </InputContainer>\r\n        );\r\n    }\r\n\r\n    return (\r\n        <InputContainer label={label} required={required}>\r\n            <Popup\r\n                trigger=\"click\"\r\n                touchable\r\n                position=\"bottom\"\r\n                {...popupProps}\r\n                visible={visible}\r\n                content={\r\n                    <ColorsPanel\r\n                        {...restProps}\r\n                        value={syncValue}\r\n                        disabledAlpha={disabledAlpha}\r\n                        panelRender={(panel) => {\r\n                            return (\r\n                                <>\r\n                                    {panel}\r\n                                    <Footer\r\n                                        value={colorValue}\r\n                                        type={colorType}\r\n                                        onTypeChange={handleTypeChange}\r\n                                        onChange={handleValueChange}\r\n                                        onOk={handleOk}\r\n                                    />\r\n                                </>\r\n                            );\r\n                        }}\r\n                        onChange={handleChange}\r\n                        onChangeComplete={handleComplete}\r\n                    />\r\n                }\r\n                onVisibleChange={handleVisibleChange}\r\n            >\r\n                {children ?? (\r\n                    <Handle\r\n                        color={value}\r\n                        handle={handle}\r\n                        placeholder={placeholder}\r\n                    />\r\n                )}\r\n            </Popup>\r\n        </InputContainer>\r\n    );\r\n}\r\n"],"names":["handle","useState","ColorMethods","useEffect","_jsx","InputContainer","ColorsPanel","Popup","_jsxs","_Fragment","Footer","Handle"],"mappings":"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"}

package/lib/cjs/components/select/select.js

@@ -17,7 +17,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var classNames__default = /*#__PURE__*/_interopDefaultCompat(classNames);
 
 const Select = (props) => {
-    const { ref, type = "text", name, label, value = "", placeholder, options: options$1 = [], 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: options$1 = [], multiple, prepend, append, labelInline, style, className, message, status = "normal", hideClear, hideArrow, maxDisplay, border, filter, tip, filterPlaceholder = "...", popupProps, onSelect, onChange, ...restProps } = props;
     const [filterValue, setFilterValue] = react.useState("");
     const [selectedValue, setSelectedValue] = react.useState(value);
     const [active, setActive] = react.useState(false);
@@ -84,11 +84,11 @@ const Select = (props) => {
     const text = message ?? tip;
     return (jsxRuntime.jsxs("label", { className: classNames__default("i-input-label", className, {
             "i-input-inline": labelInline,
-        }), style: style, children: [label && jsxRuntime.jsx("span", { className: 'i-input-label-text', children: label }), jsxRuntime.jsx(popup.default, { position: 'bottom', arrow: false, fitSize: true, offset: 0, ...popupProps, visible: active, trigger: 'none', onVisibleChange: handleVisibleChange, content: jsxRuntime.jsx(options.Options, { options: filterOptions, value: selectedValue, multiple: multiple, filter: !!filter, filterPlaceholder: filterPlaceholder, onSelect: handleSelect, onFilter: handleFilterChange }), children: jsxRuntime.jsxs("div", { className: classNames__default("i-input-item", {
+        }), style: style, children: [label && (jsxRuntime.jsxs("span", { className: "i-input-label-text", children: [required && jsxRuntime.jsx("span", { className: "error", children: "*" }), label] })), jsxRuntime.jsx(popup.default, { position: "bottom", arrow: false, fitSize: true, offset: 0, ...popupProps, visible: active, trigger: "none", onVisibleChange: handleVisibleChange, content: jsxRuntime.jsx(options.Options, { options: filterOptions, value: selectedValue, multiple: multiple, filter: !!filter, filterPlaceholder: filterPlaceholder, onSelect: handleSelect, onFilter: handleFilterChange }), children: jsxRuntime.jsxs("div", { className: classNames__default("i-input-item", {
                         [`i-input-${status}`]: status !== "normal",
                         "i-input-borderless": !border,
                         "i-input-focus": active,
-                    }), onClick: () => setActive(true), children: [prepend, jsxRuntime.jsx("input", { ref: ref, type: 'hidden', value: selectedValue, ...restProps }), multiple ? (hasValue ? (jsxRuntime.jsx("div", { className: classNames__default("i-input i-select", {
+                    }), onClick: () => setActive(true), children: [prepend, jsxRuntime.jsx("input", { ref: ref, type: "hidden", value: selectedValue, ...restProps }), multiple ? (hasValue ? (jsxRuntime.jsx("div", { className: classNames__default("i-input i-select", {
                                 "i-select-multiple": multiple,
                             }), children: options.displayValue({
                                 options: formattedOptions,
@@ -96,7 +96,7 @@ const Select = (props) => {
                                 multiple,
                                 maxDisplay,
                                 onSelect: handleSelect,
-                            }) })) : (jsxRuntime.jsx("input", { className: 'i-input i-select', placeholder: placeholder, readOnly: true }))) : null, !multiple && (jsxRuntime.jsx("input", { value: active ? filterValue : displayLabel, className: 'i-input i-select', placeholder: displayLabel || placeholder, onChange: handleInputChange, readOnly: !filter })), jsxRuntime.jsx(helpericon.default, { active: !hideArrow, icon: clearable ? undefined : jsxRuntime.jsx(material.UnfoldMoreRound, {}), onClick: handleHelperClick }), append] }) }), text && jsxRuntime.jsx("span", { className: 'i-input-message', children: text })] }));
+                            }) })) : (jsxRuntime.jsx("input", { className: "i-input i-select", placeholder: placeholder, readOnly: true }))) : null, !multiple && (jsxRuntime.jsx("input", { value: active ? filterValue : displayLabel, className: "i-input i-select", placeholder: displayLabel || placeholder, onChange: handleInputChange, readOnly: !filter })), jsxRuntime.jsx(helpericon.default, { active: !hideArrow, icon: clearable ? undefined : jsxRuntime.jsx(material.UnfoldMoreRound, {}), onClick: handleHelperClick }), append] }) }), text && jsxRuntime.jsx("span", { className: "i-input-message", children: text })] }));
 };
 
 exports.default = Select;

package/lib/cjs/components/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sources":["../../../../packages/components/select/select.tsx"],"sourcesContent":["import { UnfoldMoreRound } from \"@ricons/material\";\r\nimport classNames from \"classnames\";\r\nimport { debounce } from \"radash\";\r\nimport { ChangeEvent, useEffect, useMemo, useState } from \"react\";\r\nimport \"../../css/input.css\";\r\nimport { formatOption } from \"../../js/utils\";\r\nimport { TOption } from \"../../type\";\r\nimport Popup from \"../popup\";\r\nimport Helpericon from \"../utils/helpericon\";\r\nimport \"./index.css\";\r\nimport { Options, displayValue } from \"./options\";\r\nimport { ISelect } from \"./type\";\r\n\r\nconst Select = (props: ISelect) => {\r\n\tconst {\r\n\t\tref,\r\n\t\ttype = \"text\",\r\n\t\tname,\r\n\t\tlabel,\r\n\t\tvalue = \"\",\r\n\t\tplaceholder,\r\n\t\toptions = [],\r\n\t\tmultiple,\r\n\t\tprepend,\r\n\t\tappend,\r\n\t\tlabelInline,\r\n\t\tstyle,\r\n\t\tclassName,\r\n\t\tmessage,\r\n\t\tstatus = \"normal\",\r\n\t\thideClear,\r\n\t\thideArrow,\r\n\t\tmaxDisplay,\r\n\t\tborder,\r\n\t\tfilter,\r\n\t\ttip,\r\n\t\tfilterPlaceholder = \"...\",\r\n\t\tpopupProps,\r\n\t\tonSelect,\r\n\t\tonChange,\r\n\t\t...restProps\r\n\t} = props;\r\n\r\n\tconst [filterValue, setFilterValue] = useState(\"\");\r\n\tconst [selectedValue, setSelectedValue] = useState(value);\r\n\r\n\tconst [active, setActive] = useState<boolean>(false);\r\n\r\n\tconst formattedOptions = useMemo(() => formatOption(options), [options]);\r\n\r\n\tconst filterOptions = useMemo(() => {\r\n\t\tconst fv = filterValue;\r\n\t\tif (!fv || !filter) return formattedOptions;\r\n\r\n\t\tconst filterFn =\r\n\t\t\ttypeof filter === \"function\"\r\n\t\t\t\t? filter\r\n\t\t\t\t: (opt) => opt.value.includes(fv) || opt.label.includes(fv);\r\n\r\n\t\treturn formattedOptions.filter(filterFn);\r\n\t}, [formattedOptions, filter, filterValue]);\r\n\r\n\tconst changeValue = (v: any) => {\r\n\t\tsetSelectedValue(v);\r\n\t\tonChange?.(v);\r\n\t};\r\n\r\n\tconst displayLabel = useMemo(() => {\r\n\t\tif (multiple) {\r\n\t\t\treturn \"\";\r\n\t\t}\r\n\r\n\t\tconst option = formattedOptions.find(\r\n\t\t\t(opt) => opt.value === selectedValue\r\n\t\t);\r\n\t\treturn option ? option.label : selectedValue;\r\n\t}, [selectedValue, formattedOptions]);\r\n\r\n\tconst handleSelect = (value: any, option?: TOption) => {\r\n\t\tonSelect?.(value, option);\r\n\r\n\t\tif (multiple) {\r\n\t\t\tconst values = [...(selectedValue as any[])];\r\n\t\t\tconst i = values.findIndex((v) => v === value);\r\n\r\n\t\t\ti > -1 ? values.splice(i, 1) : values.push(value);\r\n\t\t\tchangeValue(values as any);\r\n\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tsetActive(false);\r\n\t\tchangeValue(value);\r\n\t};\r\n\r\n\tconst handleVisibleChange = (visible: boolean) => {\r\n\t\tsetActive(visible);\r\n\r\n\t\tif (!filter) return;\r\n\r\n\t\tsetFilterValue(\"\");\r\n\t};\r\n\r\n\tconst handleHelperClick = (e) => {\r\n\t\te.stopPropagation();\r\n\t\tsetActive(true);\r\n\t\tif (!active) return;\r\n\r\n\t\tchangeValue(multiple ? [] : \"\");\r\n\t};\r\n\r\n\tconst handleFilterChange = debounce(\r\n\t\t{ delay: 400 },\r\n\t\t(e: ChangeEvent<HTMLInputElement>) => {\r\n\t\t\tconst v = e.target.value;\r\n\t\t\tsetFilterValue(v);\r\n\t\t}\r\n\t);\r\n\r\n\tconst handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {\r\n\t\tsetFilterValue(e.target.value);\r\n\t};\r\n\r\n\tuseEffect(() => {\r\n\t\tsetSelectedValue(value);\r\n\t}, [value]);\r\n\r\n\tconst hasValue = multiple\r\n\t\t? (selectedValue as any[]).length > 0\r\n\t\t: !!selectedValue;\r\n\tconst clearable = !hideClear && active && hasValue;\r\n\tconst text = message ?? tip;\r\n\r\n\treturn (\r\n\t\t<label\r\n\t\t\tclassName={classNames(\"i-input-label\", className, {\r\n\t\t\t\t\"i-input-inline\": labelInline,\r\n\t\t\t})}\r\n\t\t\tstyle={style}\r\n\t\t>\r\n\t\t\t{label && <span className='i-input-label-text'>{label}</span>}\r\n\r\n\t\t\t<Popup\r\n\t\t\t\tposition='bottom'\r\n\t\t\t\tarrow={false}\r\n\t\t\t\tfitSize\r\n\t\t\t\toffset={0}\r\n\t\t\t\t{...popupProps}\r\n\t\t\t\tvisible={active}\r\n\t\t\t\ttrigger='none'\r\n\t\t\t\tonVisibleChange={handleVisibleChange}\r\n\t\t\t\tcontent={\r\n\t\t\t\t\t<Options\r\n\t\t\t\t\t\toptions={filterOptions}\r\n\t\t\t\t\t\tvalue={selectedValue}\r\n\t\t\t\t\t\tmultiple={multiple}\r\n\t\t\t\t\t\tfilter={!!filter}\r\n\t\t\t\t\t\tfilterPlaceholder={filterPlaceholder}\r\n\t\t\t\t\t\tonSelect={handleSelect}\r\n\t\t\t\t\t\tonFilter={handleFilterChange}\r\n\t\t\t\t\t/>\r\n\t\t\t\t}\r\n\t\t\t>\r\n\t\t\t\t<div\r\n\t\t\t\t\tclassName={classNames(\"i-input-item\", {\r\n\t\t\t\t\t\t[`i-input-${status}`]: status !== \"normal\",\r\n\t\t\t\t\t\t\"i-input-borderless\": !border,\r\n\t\t\t\t\t\t\"i-input-focus\": active,\r\n\t\t\t\t\t})}\r\n\t\t\t\t\tonClick={() => setActive(true)}\r\n\t\t\t\t>\r\n\t\t\t\t\t{prepend}\r\n\r\n\t\t\t\t\t<input\r\n\t\t\t\t\t\tref={ref}\r\n\t\t\t\t\t\ttype='hidden'\r\n\t\t\t\t\t\tvalue={selectedValue}\r\n\t\t\t\t\t\t{...restProps}\r\n\t\t\t\t\t/>\r\n\r\n\t\t\t\t\t{multiple ? (\r\n\t\t\t\t\t\thasValue ? (\r\n\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\tclassName={classNames(\"i-input i-select\", {\r\n\t\t\t\t\t\t\t\t\t\"i-select-multiple\": multiple,\r\n\t\t\t\t\t\t\t\t})}\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t{displayValue({\r\n\t\t\t\t\t\t\t\t\toptions: formattedOptions,\r\n\t\t\t\t\t\t\t\t\tvalue: selectedValue,\r\n\t\t\t\t\t\t\t\t\tmultiple,\r\n\t\t\t\t\t\t\t\t\tmaxDisplay,\r\n\t\t\t\t\t\t\t\t\tonSelect: handleSelect,\r\n\t\t\t\t\t\t\t\t})}\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t) : (\r\n\t\t\t\t\t\t\t<input\r\n\t\t\t\t\t\t\t\tclassName='i-input i-select'\r\n\t\t\t\t\t\t\t\tplaceholder={placeholder}\r\n\t\t\t\t\t\t\t\treadOnly\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t)\r\n\t\t\t\t\t) : null}\r\n\r\n\t\t\t\t\t{!multiple && (\r\n\t\t\t\t\t\t<input\r\n\t\t\t\t\t\t\tvalue={active ? filterValue : displayLabel}\r\n\t\t\t\t\t\t\tclassName='i-input i-select'\r\n\t\t\t\t\t\t\tplaceholder={displayLabel || placeholder}\r\n\t\t\t\t\t\t\tonChange={handleInputChange}\r\n\t\t\t\t\t\t\treadOnly={!filter}\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t)}\r\n\r\n\t\t\t\t\t<Helpericon\r\n\t\t\t\t\t\tactive={!hideArrow}\r\n\t\t\t\t\t\ticon={clearable ? undefined : <UnfoldMoreRound />}\r\n\t\t\t\t\t\tonClick={handleHelperClick}\r\n\t\t\t\t\t/>\r\n\r\n\t\t\t\t\t{append}\r\n\t\t\t\t</div>\r\n\t\t\t</Popup>\r\n\r\n\t\t\t{text && <span className='i-input-message'>{text}</span>}\r\n\t\t</label>\r\n\t);\r\n};\r\n\r\nexport default Select;\r\n"],"names":["options","useState","useMemo","formatOption","debounce","useEffect","_jsxs","classNames","_jsx","Popup","Options","displayValue","Helpericon","UnfoldMoreRound"],"mappings":"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"}
+{"version":3,"file":"select.js","sources":["../../../../packages/components/select/select.tsx"],"sourcesContent":["import { UnfoldMoreRound } from \"@ricons/material\";\r\nimport classNames from \"classnames\";\r\nimport { debounce } from \"radash\";\r\nimport { ChangeEvent, useEffect, useMemo, useState } from \"react\";\r\nimport \"../../css/input.css\";\r\nimport { formatOption } from \"../../js/utils\";\r\nimport { TOption } from \"../../type\";\r\nimport Popup from \"../popup\";\r\nimport Helpericon from \"../utils/helpericon\";\r\nimport \"./index.css\";\r\nimport { Options, displayValue } from \"./options\";\r\nimport { ISelect } from \"./type\";\r\n\r\nconst Select = (props: ISelect) => {\r\n    const {\r\n        ref,\r\n        type = \"text\",\r\n        name,\r\n        label,\r\n        value = \"\",\r\n        placeholder,\r\n        required,\r\n        options = [],\r\n        multiple,\r\n        prepend,\r\n        append,\r\n        labelInline,\r\n        style,\r\n        className,\r\n        message,\r\n        status = \"normal\",\r\n        hideClear,\r\n        hideArrow,\r\n        maxDisplay,\r\n        border,\r\n        filter,\r\n        tip,\r\n        filterPlaceholder = \"...\",\r\n        popupProps,\r\n        onSelect,\r\n        onChange,\r\n        ...restProps\r\n    } = props;\r\n\r\n    const [filterValue, setFilterValue] = useState(\"\");\r\n    const [selectedValue, setSelectedValue] = useState(value);\r\n\r\n    const [active, setActive] = useState<boolean>(false);\r\n\r\n    const formattedOptions = useMemo(() => formatOption(options), [options]);\r\n\r\n    const filterOptions = useMemo(() => {\r\n        const fv = filterValue;\r\n        if (!fv || !filter) return formattedOptions;\r\n\r\n        const filterFn =\r\n            typeof filter === \"function\"\r\n                ? filter\r\n                : (opt) => opt.value.includes(fv) || opt.label.includes(fv);\r\n\r\n        return formattedOptions.filter(filterFn);\r\n    }, [formattedOptions, filter, filterValue]);\r\n\r\n    const changeValue = (v: any) => {\r\n        setSelectedValue(v);\r\n        onChange?.(v);\r\n    };\r\n\r\n    const displayLabel = useMemo(() => {\r\n        if (multiple) {\r\n            return \"\";\r\n        }\r\n\r\n        const option = formattedOptions.find(\r\n            (opt) => opt.value === selectedValue,\r\n        );\r\n        return option ? option.label : selectedValue;\r\n    }, [selectedValue, formattedOptions]);\r\n\r\n    const handleSelect = (value: any, option?: TOption) => {\r\n        onSelect?.(value, option);\r\n\r\n        if (multiple) {\r\n            const values = [...(selectedValue as any[])];\r\n            const i = values.findIndex((v) => v === value);\r\n\r\n            i > -1 ? values.splice(i, 1) : values.push(value);\r\n            changeValue(values as any);\r\n\r\n            return;\r\n        }\r\n\r\n        setActive(false);\r\n        changeValue(value);\r\n    };\r\n\r\n    const handleVisibleChange = (visible: boolean) => {\r\n        setActive(visible);\r\n\r\n        if (!filter) return;\r\n\r\n        setFilterValue(\"\");\r\n    };\r\n\r\n    const handleHelperClick = (e) => {\r\n        e.stopPropagation();\r\n        setActive(true);\r\n        if (!active) return;\r\n\r\n        changeValue(multiple ? [] : \"\");\r\n    };\r\n\r\n    const handleFilterChange = debounce(\r\n        { delay: 400 },\r\n        (e: ChangeEvent<HTMLInputElement>) => {\r\n            const v = e.target.value;\r\n            setFilterValue(v);\r\n        },\r\n    );\r\n\r\n    const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {\r\n        setFilterValue(e.target.value);\r\n    };\r\n\r\n    useEffect(() => {\r\n        setSelectedValue(value);\r\n    }, [value]);\r\n\r\n    const hasValue = multiple\r\n        ? (selectedValue as any[]).length > 0\r\n        : !!selectedValue;\r\n    const clearable = !hideClear && active && hasValue;\r\n    const text = message ?? tip;\r\n\r\n    return (\r\n        <label\r\n            className={classNames(\"i-input-label\", className, {\r\n                \"i-input-inline\": labelInline,\r\n            })}\r\n            style={style}\r\n        >\r\n            {label && (\r\n                <span className=\"i-input-label-text\">\r\n                    {required && <span className=\"error\">*</span>}\r\n                    {label}\r\n                </span>\r\n            )}\r\n\r\n            <Popup\r\n                position=\"bottom\"\r\n                arrow={false}\r\n                fitSize\r\n                offset={0}\r\n                {...popupProps}\r\n                visible={active}\r\n                trigger=\"none\"\r\n                onVisibleChange={handleVisibleChange}\r\n                content={\r\n                    <Options\r\n                        options={filterOptions}\r\n                        value={selectedValue}\r\n                        multiple={multiple}\r\n                        filter={!!filter}\r\n                        filterPlaceholder={filterPlaceholder}\r\n                        onSelect={handleSelect}\r\n                        onFilter={handleFilterChange}\r\n                    />\r\n                }\r\n            >\r\n                <div\r\n                    className={classNames(\"i-input-item\", {\r\n                        [`i-input-${status}`]: status !== \"normal\",\r\n                        \"i-input-borderless\": !border,\r\n                        \"i-input-focus\": active,\r\n                    })}\r\n                    onClick={() => setActive(true)}\r\n                >\r\n                    {prepend}\r\n\r\n                    <input\r\n                        ref={ref}\r\n                        type=\"hidden\"\r\n                        value={selectedValue}\r\n                        {...restProps}\r\n                    />\r\n\r\n                    {multiple ? (\r\n                        hasValue ? (\r\n                            <div\r\n                                className={classNames(\"i-input i-select\", {\r\n                                    \"i-select-multiple\": multiple,\r\n                                })}\r\n                            >\r\n                                {displayValue({\r\n                                    options: formattedOptions,\r\n                                    value: selectedValue,\r\n                                    multiple,\r\n                                    maxDisplay,\r\n                                    onSelect: handleSelect,\r\n                                })}\r\n                            </div>\r\n                        ) : (\r\n                            <input\r\n                                className=\"i-input i-select\"\r\n                                placeholder={placeholder}\r\n                                readOnly\r\n                            />\r\n                        )\r\n                    ) : null}\r\n\r\n                    {!multiple && (\r\n                        <input\r\n                            value={active ? filterValue : displayLabel}\r\n                            className=\"i-input i-select\"\r\n                            placeholder={displayLabel || placeholder}\r\n                            onChange={handleInputChange}\r\n                            readOnly={!filter}\r\n                        />\r\n                    )}\r\n\r\n                    <Helpericon\r\n                        active={!hideArrow}\r\n                        icon={clearable ? undefined : <UnfoldMoreRound />}\r\n                        onClick={handleHelperClick}\r\n                    />\r\n\r\n                    {append}\r\n                </div>\r\n            </Popup>\r\n\r\n            {text && <span className=\"i-input-message\">{text}</span>}\r\n        </label>\r\n    );\r\n};\r\n\r\nexport default Select;\r\n"],"names":["options","useState","useMemo","formatOption","debounce","useEffect","_jsxs","classNames","_jsx","Popup","Options","displayValue","Helpericon","UnfoldMoreRound"],"mappings":"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"}

package/lib/cjs/components/tabs/contents.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var react = require('react');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
+
+var classNames__default = /*#__PURE__*/_interopDefaultCompat(classNames);
+
+const TabsContents$1 = (props) => {
+    const { tabs, activeKey, cachedTabKeySet, getContent } = props;
+    return (jsxRuntime.jsx("div", { className: "i-tab-contents", children: tabs.map((tab, i) => {
+            const key = tab.key ?? `${i}`;
+            const content = getContent(key);
+            const isActive = activeKey === key;
+            const show = isActive || cachedTabKeySet.has(key);
+            return (show && (jsxRuntime.jsx("div", { className: classNames__default("i-tab-content", {
+                    "i-tab-active": isActive,
+                }), role: "tabpanel", "aria-hidden": !isActive, children: content }, key)));
+        }) }));
+};
+var TabsContents = react.memo(TabsContents$1);
+
+exports.default = TabsContents;
+//# sourceMappingURL=contents.js.map

package/lib/cjs/components/tabs/contents.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contents.js","sources":["../../../../packages/components/tabs/contents.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { memo, ReactNode } from \"react\";\nimport { ITabItem } from \"./type\";\n\ninterface ITabsContentsProps {\n    tabs: ITabItem[];\n    activeKey?: string;\n    cachedTabKeySet: Set<string>;\n    getContent: (key: string) => ReactNode;\n}\n\nconst TabsContents = (props: ITabsContentsProps) => {\n    const { tabs, activeKey, cachedTabKeySet, getContent } = props;\n\n    return (\n        <div className=\"i-tab-contents\">\n            {tabs.map((tab, i) => {\n                const key = tab.key ?? `${i}`;\n                const content = getContent(key);\n                const isActive = activeKey === key;\n                const show = isActive || cachedTabKeySet.has(key);\n\n                return (\n                    show && (\n                        <div\n                            key={key}\n                            className={classNames(\"i-tab-content\", {\n                                \"i-tab-active\": isActive,\n                            })}\n                            role=\"tabpanel\"\n                            aria-hidden={!isActive}\n                        >\n                            {content}\n                        </div>\n                    )\n                );\n            })}\n        </div>\n    );\n};\n\nexport default memo(TabsContents);\n"],"names":["TabsContents","_jsx","classNames","memo"],"mappings":";;;;;;;;;;;;AAWA,MAAMA,cAAY,GAAG,CAAC,KAAyB,KAAI;IAC/C,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,eAAe,EAAE,UAAU,EAAE,GAAG,KAAK;AAE9D,IAAA,QACIC,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gBAAgB,EAAA,QAAA,EAC1B,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,KAAI;YACjB,MAAM,GAAG,GAAG,GAAG,CAAC,GAAG,IAAI,CAAA,EAAG,CAAC,CAAA,CAAE;AAC7B,YAAA,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,CAAC;AAC/B,YAAA,MAAM,QAAQ,GAAG,SAAS,KAAK,GAAG;YAClC,MAAM,IAAI,GAAG,QAAQ,IAAI,eAAe,CAAC,GAAG,CAAC,GAAG,CAAC;YAEjD,QACI,IAAI,KACAA,cAAA,CAAA,KAAA,EAAA,EAEI,SAAS,EAAEC,mBAAU,CAAC,eAAe,EAAE;AACnC,oBAAA,cAAc,EAAE,QAAQ;AAC3B,iBAAA,CAAC,EACF,IAAI,EAAC,UAAU,iBACF,CAAC,QAAQ,EAAA,QAAA,EAErB,OAAO,EAAA,EAPH,GAAG,CAQN,CACT;QAET,CAAC,CAAC,EAAA,CACA;AAEd,CAAC;AAED,mBAAeC,UAAI,CAACH,cAAY,CAAC;;;;"}

package/lib/cjs/components/tabs/helper.js

@@ -0,0 +1,68 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var material = require('@ricons/material');
+var react = require('react');
+var button = require('../button/button.js');
+var icon = require('../icon/icon.js');
+
+const emptyBarStyle = {
+    height: 0,
+    width: 0,
+};
+const defaultRenderMore = () => (jsxRuntime.jsx(button.default, { flat: true, square: true, size: "small", children: jsxRuntime.jsx(icon.default, { icon: jsxRuntime.jsx(material.MoreHorizRound, {}) }) }));
+const isSameTabs = (prev, next) => prev.length === next.length &&
+    prev.every((tab, index) => {
+        const target = next[index];
+        return (tab.key === target.key &&
+            tab.title === target.title &&
+            tab.keepDOM === target.keepDOM &&
+            tab.closable === target.closable &&
+            tab.intersecting === target.intersecting);
+    });
+const getParsedTabs = (items, children) => {
+    const contents = new Map();
+    if (!items) {
+        const tabs = react.Children.map(children, (node, i) => {
+            const { key, props: nodeProps } = node;
+            const { title, children: tabChildren, content, keepDOM, closable, } = nodeProps;
+            const tabKey = String(key ?? i);
+            contents.set(tabKey, tabChildren ?? content);
+            return {
+                key: tabKey,
+                title,
+                keepDOM,
+                closable,
+            };
+        }) ?? [];
+        return {
+            tabs,
+            contents,
+            keys: new Set(tabs.map((tab) => String(tab.key))),
+        };
+    }
+    const tabs = items.map((item, i) => {
+        if (["string", "number"].includes(typeof item)) {
+            const key = String(item);
+            return { key, title: item };
+        }
+        const key = String(item.key ?? i);
+        contents.set(key, item.content);
+        const { content, ...rest } = item;
+        return {
+            ...rest,
+            key,
+        };
+    });
+    return {
+        tabs,
+        contents,
+        keys: new Set(tabs.map((tab) => String(tab.key))),
+    };
+};
+
+exports.defaultRenderMore = defaultRenderMore;
+exports.emptyBarStyle = emptyBarStyle;
+exports.getParsedTabs = getParsedTabs;
+exports.isSameTabs = isSameTabs;
+//# sourceMappingURL=helper.js.map

package/lib/cjs/components/tabs/helper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helper.js","sources":["../../../../packages/components/tabs/helper.tsx"],"sourcesContent":["import { MoreHorizRound } from \"@ricons/material\";\nimport { Children, ReactNode } from \"react\";\nimport Button from \"../button\";\nimport Icon from \"../icon\";\nimport { ITabItem, ITabs } from \"./type\";\n\nexport type TParsedTabs = {\n    tabs: ITabItem[];\n    contents: Map<string, ReactNode>;\n    keys: Set<string>;\n};\n\nexport const emptyBarStyle = {\n    height: 0,\n    width: 0,\n};\n\nexport const defaultRenderMore = () => (\n    <Button flat square size=\"small\">\n        <Icon icon={<MoreHorizRound />} />\n    </Button>\n);\n\nexport const isSameTabs = (prev: ITabItem[], next: ITabItem[]) =>\n    prev.length === next.length &&\n    prev.every((tab, index) => {\n        const target = next[index];\n\n        return (\n            tab.key === target.key &&\n            tab.title === target.title &&\n            tab.keepDOM === target.keepDOM &&\n            tab.closable === target.closable &&\n            tab.intersecting === target.intersecting\n        );\n    });\n\nexport const getParsedTabs = (\n    items: ITabs[\"tabs\"],\n    children: ITabs[\"children\"],\n): TParsedTabs => {\n    const contents = new Map<string, ReactNode>();\n    type TTabChildNode = {\n        key?: string;\n        props?: Pick<\n            ITabItem,\n            \"title\" | \"content\" | \"keepDOM\" | \"closable\" | \"children\"\n        >;\n    };\n\n    if (!items) {\n        const tabs =\n            (Children.map(children, (node, i) => {\n                const { key, props: nodeProps } = node as TTabChildNode;\n                const {\n                    title,\n                    children: tabChildren,\n                    content,\n                    keepDOM,\n                    closable,\n                } = nodeProps;\n                const tabKey = String(key ?? i);\n\n                contents.set(tabKey, tabChildren ?? content);\n\n                return {\n                    key: tabKey,\n                    title,\n                    keepDOM,\n                    closable,\n                };\n            }) as ITabItem[]) ?? [];\n\n        return {\n            tabs,\n            contents,\n            keys: new Set(tabs.map((tab) => String(tab.key))),\n        };\n    }\n\n    const tabs = items.map((item, i) => {\n        if ([\"string\", \"number\"].includes(typeof item)) {\n            const key = String(item);\n            return { key, title: item };\n        }\n\n        const key = String(item.key ?? i);\n        contents.set(key, item.content);\n        const { content, ...rest } = item;\n\n        return {\n            ...rest,\n            key,\n        };\n    });\n\n    return {\n        tabs,\n        contents,\n        keys: new Set(tabs.map((tab) => String(tab.key))),\n    };\n};\n"],"names":["_jsx","Button","Icon","MoreHorizRound","Children"],"mappings":"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"}

package/lib/cjs/components/tabs/navs.js

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var react = require('react');
+var popup = require('../popup/popup.js');
+var helpericon = require('../utils/helpericon/helpericon.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
+
+var classNames__default = /*#__PURE__*/_interopDefaultCompat(classNames);
+
+const TabsNavs$1 = (props) => {
+    const { tabs, moreTabs, activeKey, vertical, overflow, hideMore, navsJustify = "start", bar, barClass, barStyle, navsRef, renderMore, setNavRef, onOpen, onClose, onMoreTabClick, onKeyAction, } = props;
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { ref: navsRef, className: classNames__default("i-tab-navs", `justify-${navsJustify}`), role: "tablist", "aria-orientation": vertical ? "vertical" : "horizontal", children: [tabs.map((tab, i) => {
+                        const { title, key = `${i}`, closable } = tab;
+                        const isActive = activeKey === key;
+                        return (jsxRuntime.jsxs("a", { ref: (node) => setNavRef(i, node), className: classNames__default("i-tab-nav", {
+                                "i-tab-active": isActive,
+                            }), role: "tab", tabIndex: isActive ? 0 : -1, "aria-selected": isActive, onClick: () => onOpen(key), onKeyDown: (e) => onKeyAction(e, () => onOpen(key)), children: [title, closable && (jsxRuntime.jsx(helpericon.default, { as: "i", active: true, className: "i-tab-nav-close", role: "button", tabIndex: 0, "aria-label": "\u5173\u95ED\u6807\u7B7E\u9875", onClick: (e) => {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        onClose(key);
+                                    }, onKeyDown: (e) => onKeyAction(e, () => onClose(key)) }))] }, key));
+                    }), bar && (jsxRuntime.jsx("span", { className: classNames__default("i-tab-navs-bar", barClass), style: barStyle }))] }), !hideMore && overflow && moreTabs.length > 0 && (jsxRuntime.jsx(popup.default, { arrow: false, position: vertical ? "right" : "bottom", align: "end", touchable: true, hideDelay: 500, content: jsxRuntime.jsx("div", { className: "i-tabs-morelist pd-4", children: moreTabs.map((tab, i) => {
+                        const { key = `${i}`, title } = tab;
+                        const isActive = activeKey === key;
+                        return (jsxRuntime.jsx("a", { className: classNames__default("i-tab-nav", {
+                                "i-tab-active": isActive,
+                            }), role: "button", tabIndex: 0, onClick: () => onMoreTabClick(key), onKeyDown: (e) => onKeyAction(e, () => onMoreTabClick(key)), children: title }, key));
+                    }) }), children: renderMore(moreTabs) }))] }));
+};
+var TabsNavs = react.memo(TabsNavs$1);
+
+exports.default = TabsNavs;
+//# sourceMappingURL=navs.js.map

package/lib/cjs/components/tabs/navs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navs.js","sources":["../../../../packages/components/tabs/navs.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport type { CSSProperties, KeyboardEvent, ReactNode, RefObject } from \"react\";\nimport { memo } from \"react\";\nimport Popup from \"../popup\";\nimport Helpericon from \"../utils/helpericon\";\nimport { ITabItem } from \"./type\";\n\ninterface ITabsNavsProps {\n    tabs: ITabItem[];\n    moreTabs: ITabItem[];\n    activeKey?: string;\n    vertical?: boolean;\n    overflow?: boolean;\n    hideMore?: boolean;\n    navsJustify?: \"start\" | \"center\" | \"end\";\n    bar?: boolean;\n    barClass?: string;\n    barStyle?: CSSProperties;\n    navsRef: RefObject<HTMLDivElement>;\n    renderMore: (moreTabs: ITabItem[]) => ReactNode;\n    setNavRef: (index: number, node: HTMLAnchorElement | null) => void;\n    onOpen: (key: string) => void;\n    onClose: (key: string) => void;\n    onMoreTabClick: (key: string) => void;\n    onKeyAction: (e: KeyboardEvent<HTMLElement>, action: () => void) => void;\n}\n\nconst TabsNavs = (props: ITabsNavsProps) => {\n    const {\n        tabs,\n        moreTabs,\n        activeKey,\n        vertical,\n        overflow,\n        hideMore,\n        navsJustify = \"start\",\n        bar,\n        barClass,\n        barStyle,\n        navsRef,\n        renderMore,\n        setNavRef,\n        onOpen,\n        onClose,\n        onMoreTabClick,\n        onKeyAction,\n    } = props;\n\n    return (\n        <>\n            <div\n                ref={navsRef}\n                className={classNames(\"i-tab-navs\", `justify-${navsJustify}`)}\n                role=\"tablist\"\n                aria-orientation={vertical ? \"vertical\" : \"horizontal\"}\n            >\n                {tabs.map((tab, i) => {\n                    const { title, key = `${i}`, closable } = tab;\n                    const isActive = activeKey === key;\n\n                    return (\n                        <a\n                            key={key}\n                            ref={(node) => setNavRef(i, node)}\n                            className={classNames(\"i-tab-nav\", {\n                                \"i-tab-active\": isActive,\n                            })}\n                            role=\"tab\"\n                            tabIndex={isActive ? 0 : -1}\n                            aria-selected={isActive}\n                            onClick={() => onOpen(key)}\n                            onKeyDown={(e) => onKeyAction(e, () => onOpen(key))}\n                        >\n                            {title}\n\n                            {closable && (\n                                <Helpericon\n                                    as=\"i\"\n                                    active\n                                    className=\"i-tab-nav-close\"\n                                    role=\"button\"\n                                    tabIndex={0}\n                                    aria-label=\"关闭标签页\"\n                                    onClick={(e) => {\n                                        e.preventDefault();\n                                        e.stopPropagation();\n                                        onClose(key);\n                                    }}\n                                    onKeyDown={(e) =>\n                                        onKeyAction(e, () => onClose(key))\n                                    }\n                                />\n                            )}\n                        </a>\n                    );\n                })}\n\n                {bar && (\n                    <span\n                        className={classNames(\"i-tab-navs-bar\", barClass)}\n                        style={barStyle}\n                    />\n                )}\n            </div>\n\n            {!hideMore && overflow && moreTabs.length > 0 && (\n                <Popup\n                    arrow={false}\n                    position={vertical ? \"right\" : \"bottom\"}\n                    align=\"end\"\n                    touchable\n                    hideDelay={500}\n                    content={\n                        <div className=\"i-tabs-morelist pd-4\">\n                            {moreTabs.map((tab, i) => {\n                                const { key = `${i}`, title } = tab;\n                                const isActive = activeKey === key;\n\n                                return (\n                                    <a\n                                        key={key}\n                                        className={classNames(\"i-tab-nav\", {\n                                            \"i-tab-active\": isActive,\n                                        })}\n                                        role=\"button\"\n                                        tabIndex={0}\n                                        onClick={() => onMoreTabClick(key)}\n                                        onKeyDown={(e) =>\n                                            onKeyAction(e, () =>\n                                                onMoreTabClick(key),\n                                            )\n                                        }\n                                    >\n                                        {title}\n                                    </a>\n                                );\n                            })}\n                        </div>\n                    }\n                >\n                    {renderMore(moreTabs)}\n                </Popup>\n            )}\n        </>\n    );\n};\n\nexport default memo(TabsNavs);\n"],"names":["TabsNavs","_jsxs","_Fragment","classNames","_jsx","Helpericon","Popup","memo"],"mappings":"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"}

package/lib/cjs/components/tabs/tabs.js

@@ -3,24 +3,21 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var material = require('@ricons/material');
 var classNames = require('classnames');
 var react = require('react');
 var hooks = require('../../js/hooks.js');
-var button = require('../button/button.js');
-var icon = require('../icon/icon.js');
-var popup = require('../popup/popup.js');
-var helpericon = require('../utils/helpericon/helpericon.js');
+var contents = require('./contents.js');
+var helper = require('./helper.js');
 var item = require('./item.js');
+var navs = require('./navs.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
 
 var classNames__default = /*#__PURE__*/_interopDefaultCompat(classNames);
 
 const Tabs = ((props) => {
-    const { ref, active, tabs: items, type = "default", prepend, append, children, className, vertical, toggable, navsJustify = "start", bar = true, hideMore, barClass, renderMore = () => (jsxRuntime.jsx(button.default, { flat: true, square: true, size: "small", children: jsxRuntime.jsx(icon.default, { icon: jsxRuntime.jsx(material.MoreHorizRound, {}) }) })), onTabChange, ...rest } = props;
+    const { ref, active, tabs: items, type = "default", prepend, append, children, className, vertical, toggable, navsJustify = "start", navsClass, bar = true, hideMore, barClass, renderMore = helper.defaultRenderMore, onTabChange, ...rest } = props;
     const navRefs = react.useRef([]);
-    const barRef = react.useRef(null);
     const navsRef = react.useRef(null);
     const contentsRef = react.useRef(new Map());
     const [activeKey, setActiveKey] = react.useState(active);
@@ -37,42 +34,36 @@ const Tabs = ((props) => {
     activeKeyRef.current = activeKey;
     const prevActiveKeyRef = react.useRef(prevActiveKey);
     prevActiveKeyRef.current = prevActiveKey;
+    const sourceKeysRef = react.useRef(new Set());
+    const hiddenSourceKeysRef = react.useRef(new Set());
+    const parsedTabs = react.useMemo(() => helper.getParsedTabs(items, children), [children, items]);
     react.useEffect(() => {
-        contentsRef.current.clear();
-        if (!items) {
-            if (!children) {
-                setTabs([]);
-                return;
-            }
-            setTabs(react.Children.map(children, (node, i) => {
-                const { key, props: nodeProps } = node;
-                const { title, children: tabChildren, content, keepDOM, closable, } = nodeProps;
-                const tabKey = String(key ?? i);
-                contentsRef.current.set(tabKey, tabChildren ?? content);
-                return {
-                    key: tabKey,
-                    title,
-                    keepDOM,
-                    closable,
-                };
-            }) ?? []);
-            return;
-        }
-        setTabs(items.map((item, i) => {
-            if (["string", "number"].includes(typeof item)) {
-                const key = String(item);
-                return { key, title: item };
+        const prevContents = new Map(contentsRef.current);
+        const nextContents = new Map(parsedTabs.contents);
+        const sourceTabs = parsedTabs.tabs;
+        const sourceKeys = parsedTabs.keys;
+        hiddenSourceKeysRef.current.forEach((key) => {
+            if (!sourceKeys.has(key)) {
+                hiddenSourceKeysRef.current.delete(key);
             }
-            const key = String(item.key ?? i);
-            contentsRef.current.set(key, item.content);
-            const { content, ...rest } = item;
-            return {
-                ...rest,
-                key,
-            };
-        }));
-    }, [children, items]);
-    const add = (tab) => {
+        });
+        const dynamicTabs = tabsRef.current.filter((tab) => {
+            const key = String(tab.key);
+            return !sourceKeysRef.current.has(key) && !sourceKeys.has(key);
+        });
+        dynamicTabs.forEach((tab) => {
+            const key = String(tab.key);
+            nextContents.set(key, prevContents.get(key));
+        });
+        sourceKeysRef.current = sourceKeys;
+        contentsRef.current = nextContents;
+        const nextTabs = [
+            ...sourceTabs.filter((tab) => !hiddenSourceKeysRef.current.has(String(tab.key))),
+            ...dynamicTabs,
+        ];
+        setTabs((currentTabs) => helper.isSameTabs(currentTabs, nextTabs) ? currentTabs : nextTabs);
+    }, [parsedTabs]);
+    const add = (tab, position) => {
         const currentTabs = tabsRef.current;
         const tkey = String(tab.key ?? currentTabs.length);
         const i = currentTabs.findIndex((t) => t.key === tkey);
@@ -82,7 +73,14 @@ const Tabs = ((props) => {
         }
         contentsRef.current.set(tkey, tab.content);
         const { content, ...rest } = tab;
-        setTabs((ts) => [...ts, { ...rest, key: tkey }]);
+        setTabs((ts) => {
+            const nextTabs = [...ts];
+            const index = position === undefined
+                ? nextTabs.length
+                : Math.max(0, Math.min(position, nextTabs.length));
+            nextTabs.splice(index, 0, { ...rest, key: tkey });
+            return nextTabs;
+        });
         open(tkey);
     };
     const close = (key) => {
@@ -90,7 +88,12 @@ const Tabs = ((props) => {
         const i = currentTabs.findIndex((t) => t.key === key);
         if (i < 0)
             return;
-        contentsRef.current.delete(key);
+        if (sourceKeysRef.current.has(key)) {
+            hiddenSourceKeysRef.current.add(key);
+        }
+        else {
+            contentsRef.current.delete(key);
+        }
         const nextTabs = [...currentTabs];
         nextTabs.splice(i, 1);
         setTabs(nextTabs);
@@ -107,10 +110,7 @@ const Tabs = ((props) => {
             onTabChange?.(undefined, activeKey);
             setPrevActiveKey(activeKey);
             setActiveKey(undefined);
-            setBarStyle({
-                height: 0,
-                width: 0,
-            });
+            setBarStyle(helper.emptyBarStyle);
             return;
         }
         if (nextKey === activeKey) {
@@ -118,10 +118,7 @@ const Tabs = ((props) => {
                 return;
             onTabChange?.(undefined, key);
             setActiveKey(undefined);
-            setBarStyle({
-                height: 0,
-                width: 0,
-            });
+            setBarStyle(helper.emptyBarStyle);
             return;
         }
         setPrevActiveKey(activeKey);
@@ -147,6 +144,10 @@ const Tabs = ((props) => {
         open(key);
         scrollToTab(key);
     };
+    const setNavRef = (index, node) => {
+        navRefs.current[index] = node;
+    };
+    const getContent = (key) => contentsRef.current.get(key);
     react.useEffect(() => {
         if (!size || hideMore || !observe || !unobserve)
             return;
@@ -170,7 +171,7 @@ const Tabs = ((props) => {
             return;
         }
         const observed = [];
-        navRefs.current.map((nav, i) => {
+        navRefs.current.forEach((nav, i) => {
             if (!nav)
                 return;
             observed.push(nav);
@@ -185,7 +186,7 @@ const Tabs = ((props) => {
             });
         });
         return () => {
-            observed.map((el) => unobserve(el));
+            observed.forEach((el) => unobserve(el));
         };
     }, [size, hideMore, tabs.length, observe, unobserve]);
     react.useEffect(() => {
@@ -207,7 +208,7 @@ const Tabs = ((props) => {
             const { offsetHeight, offsetLeft, offsetTop, offsetWidth } = nav;
             const isLine = type === "line";
             setBarStyle({
-                height: !vertical && isLine ? ".25em" : offsetHeight,
+                height: !vertical && isLine ? ".25em" : offsetHeight * 0.5,
                 width: vertical && isLine ? ".25em" : offsetWidth,
                 transform: `translate(${offsetLeft}px, ${offsetTop}px)`,
             });
@@ -219,7 +220,8 @@ const Tabs = ((props) => {
     react.useEffect(() => {
         if (active === undefined || activeKey === active)
             return;
-        open(active);
+        setPrevActiveKey(activeKey);
+        setActiveKey(active);
     }, [active]);
     react.useEffect(() => {
         if (!navsRef.current || vertical)
@@ -248,37 +250,13 @@ const Tabs = ((props) => {
         add,
         navs: navsRef,
     }));
-    const moreTabs = !hideMore && overflow
+    const cachedTabKeySet = react.useMemo(() => new Set(cachedTabs), [cachedTabs]);
+    const moreTabs = react.useMemo(() => !hideMore && overflow
         ? tabs.filter((tab) => tab.intersecting === false)
-        : [];
-    return (jsxRuntime.jsxs("div", { className: classNames__default("i-tabs", { flex: vertical, [`i-tabs-${type}`]: type !== "default" }, className), ...rest, children: [jsxRuntime.jsxs("div", { className: classNames__default("i-tab-navs-container", {
+        : [], [hideMore, overflow, tabs]);
+    return (jsxRuntime.jsxs("div", { className: classNames__default("i-tabs", { flex: vertical, [`i-tabs-${type}`]: type !== "default" }, className), ...rest, children: [jsxRuntime.jsxs("div", { className: classNames__default("i-tab-navs-container", navsClass, {
                     "i-tab-navs-vertical": vertical,
-                }), children: [prepend, jsxRuntime.jsxs("div", { ref: navsRef, className: classNames__default("i-tab-navs", `justify-${navsJustify}`), role: "tablist", "aria-orientation": vertical ? "vertical" : "horizontal", children: [tabs.map((tab, i) => {
-                                const { title, key = `${i}`, closable } = tab;
-                                const isActive = activeKey === key;
-                                return (jsxRuntime.jsxs("a", { ref: (ref) => (navRefs.current[i] = ref), className: classNames__default("i-tab-nav", {
-                                        "i-tab-active": isActive,
-                                    }), role: "tab", tabIndex: isActive ? 0 : -1, "aria-selected": isActive, onClick: () => open(key), onKeyDown: (e) => handleKeyAction(e, () => open(key)), children: [title, closable && (jsxRuntime.jsx(helpericon.default, { as: "i", active: true, className: "i-tab-nav-close", role: "button", tabIndex: 0, "aria-label": "\u5173\u95ED\u6807\u7B7E\u9875", onClick: (e) => {
-                                                e.preventDefault();
-                                                e.stopPropagation();
-                                                close(key);
-                                            }, onKeyDown: (e) => handleKeyAction(e, () => close(key)) }))] }, key));
-                            }), bar && (jsxRuntime.jsx("span", { ref: barRef, className: classNames__default("i-tab-navs-bar", barClass), style: barStyle }))] }), !hideMore && overflow && moreTabs.length > 0 && (jsxRuntime.jsx(popup.default, { arrow: false, position: vertical ? "right" : "bottom", align: "end", touchable: true, hideDelay: 500, content: jsxRuntime.jsx("div", { className: "i-tabs-morelist pd-4", children: moreTabs.map((tab, i) => {
-                                const { key = `${i}`, title } = tab;
-                                const isActive = activeKey === key;
-                                return (jsxRuntime.jsx("a", { className: classNames__default("i-tab-nav", {
-                                        "i-tab-active": isActive,
-                                    }), role: "button", tabIndex: 0, onClick: () => handleMoreTabClick(key), onKeyDown: (e) => handleKeyAction(e, () => handleMoreTabClick(key)), children: title }, key));
-                            }) }), children: renderMore(moreTabs) })), append] }), jsxRuntime.jsx("div", { className: "i-tab-contents", children: tabs.map((tab, i) => {
-                    const key = tab.key ?? `${i}`;
-                    const content = contentsRef.current.get(key);
-                    const isActive = activeKey === key;
-                    const show = isActive ||
-                        (key !== undefined && cachedTabs.includes(key));
-                    return (show && (jsxRuntime.jsx("div", { className: classNames__default("i-tab-content", {
-                            "i-tab-active": isActive,
-                        }), role: "tabpanel", "aria-hidden": !isActive, children: content }, key)));
-                }) })] }));
+                }), children: [prepend, jsxRuntime.jsx(navs.default, { tabs: tabs, moreTabs: moreTabs, activeKey: activeKey, vertical: vertical, overflow: overflow, hideMore: hideMore, navsJustify: navsJustify, bar: bar, barClass: barClass, barStyle: barStyle, navsRef: navsRef, renderMore: renderMore, setNavRef: setNavRef, onOpen: open, onClose: close, onMoreTabClick: handleMoreTabClick, onKeyAction: handleKeyAction }), append] }), jsxRuntime.jsx(contents.default, { tabs: tabs, activeKey: activeKey, cachedTabKeySet: cachedTabKeySet, getContent: getContent })] }));
 });
 Tabs.Item = item.default;