@laser-ui/components 0.6.3 → 0.6.5

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.6.5](https://github.com/laser-ui/laser-ui/compare/v0.6.4...v0.6.5) (2024-06-11)
+
+### Bug Fixes
+
+- **components:** fix close tree-select ([6b0fca1](https://github.com/laser-ui/laser-ui/commit/6b0fca121cd15b5f218c0d363309e085d26291b1))
+
+## [0.6.4](https://github.com/laser-ui/laser-ui/compare/v0.6.3...v0.6.4) (2024-05-27)
+
+### Bug Fixes
+
+- **components:** use custom title if provide customSelected ([0dbdb2f](https://github.com/laser-ui/laser-ui/commit/0dbdb2f285900c45cccdd5fed47eb3429f238d73))
+
+### Features
+
+- **components:** transfer custom item even if no option ([9706ec5](https://github.com/laser-ui/laser-ui/commit/9706ec5e4aea60329b1cf9718b05a214acae3958))
+
 ## [0.6.3](https://github.com/laser-ui/laser-ui/compare/v0.6.2...v0.6.3) (2024-05-24)
 
 ### Features

package/cascader/Cascader.js

@@ -383,8 +383,11 @@ function CascaderFC(props, ref) {
         else {
             if (!isNull(selected)) {
                 const node = nodesMap.get(selected);
-                selectedLabel = node ? getTreeNodeLabel(node) : String(selected);
-                selectedNode = customSelected ? customSelected(selected, node === null || node === void 0 ? void 0 : node.origin) : selectedLabel;
+                selectedNode = selectedLabel = customSelected
+                    ? customSelected(selected, node === null || node === void 0 ? void 0 : node.origin)
+                    : node
+                        ? getTreeNodeLabel(node)
+                        : String(selected);
             }
         }
         return [selectedNode, suffixNode, selectedLabel];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laser-ui/components",
-  "version": "0.6.3",
+  "version": "0.6.5",
   "description": "React components.",
   "keywords": [
     "ui",
@@ -40,5 +40,5 @@
     "access": "public",
     "directory": "../../dist/libs/components"
   },
-  "gitHead": "6530707d94520350ae2c3fe412c98f879d84902b"
+  "gitHead": "4a94e6ec5bcfa6f04633956dd74c71203bb2e00f"
 }

package/select/Select.js

@@ -394,8 +394,7 @@ function SelectFC(props, ref) {
         else {
             if (!isNull(selected)) {
                 const item = itemsMap.get(selected);
-                selectedLabel = item ? item.label : String(selected);
-                selectedNode = customSelected ? customSelected(selected, item) : selectedLabel;
+                selectedNode = selectedLabel = customSelected ? customSelected(selected, item) : item ? item.label : String(selected);
             }
         }
         return [selectedNode, suffixNode, selectedLabel];

package/transfer/Transfer.js

@@ -5,7 +5,7 @@ import KeyboardArrowRightOutlined from '@material-design-icons/svg/outlined/keyb
 import { isUndefined } from 'lodash';
 import { useMemo } from 'react';
 import { TransferPanel } from './internal/TransferPanel';
-import { CLASSES, IS_SELECTED } from './vars';
+import { CLASSES, IS_SELECTED, NO_MATCH } from './vars';
 import { Button } from '../button';
 import { useComponentProps, useControlled, useDesign, useNamespace, useScopedProps, useStyled } from '../hooks';
 import { Icon } from '../icon';
@@ -41,29 +41,41 @@ export function Transfer(props) {
             : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                 (item, searchValue) => customSearch.filter(searchValue, item);
         const sortFn = customSearch === null || customSearch === void 0 ? void 0 : customSearch.sort;
-        listProp.forEach((item) => {
-            const index = valueRight.has(item.value) ? 1 : 0;
-            const newItem = Object.assign({ [IS_SELECTED]: false }, item);
-            const search = searchValue[index];
-            if (!search || filterFn(item, search)) {
-                if (selected.has(item.value)) {
-                    newItem[IS_SELECTED] = true;
-                    selectedCount[index] += 1;
-                    if (!item.disabled) {
-                        hasSelected[index] = true;
-                    }
-                }
-                else {
-                    if (!item.disabled) {
-                        allSelected[index] = false;
-                    }
+        const handleItem = (item, index, noMatch) => {
+            const newItem = Object.assign({ [IS_SELECTED]: false, [NO_MATCH]: noMatch }, item);
+            if (selected.has(item.value)) {
+                newItem[IS_SELECTED] = true;
+                selectedCount[index] += 1;
+                if (!item.disabled) {
+                    hasSelected[index] = true;
                 }
-                list[index].push(newItem);
+            }
+            else {
                 if (!item.disabled) {
-                    empty[index] = false;
+                    allSelected[index] = false;
+                }
+            }
+            list[index].push(newItem);
+            if (!item.disabled) {
+                empty[index] = false;
+            }
+        };
+        listProp.forEach((item) => {
+            if (!valueRight.has(item.value)) {
+                if (!searchValue[0] || filterFn(item, searchValue[0])) {
+                    handleItem(item, 0, false);
                 }
             }
         });
+        _valueRight.forEach((value) => {
+            const item = itemsMap.get(value);
+            if (!searchValue[1]) {
+                handleItem(item !== null && item !== void 0 ? item : { label: value, value }, 1, !item);
+            }
+            else if (item && filterFn(item, searchValue[0])) {
+                handleItem(item, 1, false);
+            }
+        });
         if (searchValue[0] && sortFn) {
             list[0].sort(sortFn);
         }
@@ -103,18 +115,24 @@ export function Transfer(props) {
     };
     const handleButtonClick = (isLeft) => {
         changeValueRight((draft) => {
-            const newValueRight = new Set(draft);
-            (isLeft ? list[0] : list[1]).forEach((item) => {
-                if (item[IS_SELECTED]) {
-                    if (isLeft) {
+            if (isLeft) {
+                const newValueRight = new Set();
+                list[0].forEach((item) => {
+                    if (item[IS_SELECTED]) {
                         newValueRight.add(item.value);
                     }
-                    else {
+                });
+                return Array.from(newValueRight).concat(draft);
+            }
+            else {
+                const newValueRight = new Set(draft);
+                list[1].forEach((item) => {
+                    if (item[IS_SELECTED]) {
                         newValueRight.delete(item.value);
                     }
-                }
-            });
-            return Array.from(newValueRight);
+                });
+                return Array.from(newValueRight);
+            }
         });
         changeSelected((draft) => {
             const newSelected = new Set(draft);

package/transfer/internal/TransferPanel.d.ts

@@ -12,7 +12,7 @@ export interface TransferPanelProps<V extends React.Key, T extends TransferItem<
     loading: boolean;
     searchable: boolean;
     virtual: boolean | number;
-    customItem: ((item: T) => React.ReactNode) | undefined;
+    customItem?: (value: V, item?: T) => React.ReactNode;
     onSelectedChange: (value: V) => void;
     onAllSelectedChange: (selected: boolean) => void;
     onSearch: (value: string) => void;

package/transfer/internal/TransferPanel.js

@@ -11,7 +11,7 @@ import { Icon } from '../../icon';
 import { Input } from '../../input';
 import { CircularProgress } from '../../internal/circular-progress';
 import { VirtualScroll } from '../../virtual-scroll';
-import { IS_SELECTED } from '../vars';
+import { IS_SELECTED, NO_MATCH } from '../vars';
 export function TransferPanel(props) {
     const { namespace, styled, list, selectedCount, state, title, loading, searchable, virtual, customItem, onSelectedChange, onAllSelectedChange, onSearch, onScrollBottom, } = props;
     const { t } = useTranslation();
@@ -27,16 +27,13 @@ export function TransferPanel(props) {
     }), [canSelectedItem, list, virtual]);
     return (_jsxs("div", Object.assign({}, styled('transfer__panel'), { children: [_jsxs("div", Object.assign({}, styled('transfer__header'), { children: [_jsxs(Checkbox, { model: state === true, indeterminate: state === 'mixed', disabled: list.length === 0, onModelChange: (checked) => {
                             onAllSelectedChange(checked);
-                        }, children: [selectedCount, "/", list.length] }), checkNodeExist(title) && _jsx("div", Object.assign({}, styled('transfer__header-title'), { children: title }))] })), searchable && (_jsx("div", Object.assign({}, styled('transfer__search'), { children: _jsx(Input, { style: { display: 'flex' }, placeholder: t('Search'), prefix: _jsx(Icon, { children: _jsx(SearchOutlined, {}) }), clearable: true, onModelChange: onSearch }) }))), _jsxs("div", Object.assign({}, styled('transfer__list-container'), { children: [loading && (_jsx("div", Object.assign({}, styled('transfer__loading'), { children: _jsx(Icon, { children: _jsx(CircularProgress, {}) }) }))), _jsx(VirtualScroll, Object.assign({}, vsProps, { ref: vsRef, enable: virtual !== false, listSize: 192, listPadding: 0, itemRender: (item, index, props) => {
-                            const { label: itemLabel, value: itemValue, disabled: itemDisabled } = item;
-                            return (_createElement("li", Object.assign({}, styled('transfer__option', {
-                                'transfer__option.is-disabled': itemDisabled,
-                            }), props, { key: itemValue, id: getItemId(itemValue), title: itemLabel, onClick: () => {
-                                    if (!itemDisabled) {
-                                        onSelectedChange === null || onSelectedChange === void 0 ? void 0 : onSelectedChange(itemValue);
-                                    }
-                                } }),
-                                _jsx("div", Object.assign({}, styled('transfer__option-prefix'), { children: _jsx(Checkbox, { model: item[IS_SELECTED], disabled: itemDisabled }) })),
-                                _jsx("div", Object.assign({}, styled('transfer__option-content'), { children: customItem ? customItem(item) : itemLabel }))));
-                        }, placeholder: "li", onScrollEnd: onScrollBottom, children: (vsList, onScroll) => (_jsx("ul", Object.assign({}, styled('transfer__list'), { onScroll: onScroll, children: list.length === 0 ? _jsx(Empty, { style: { marginTop: 32 }, image: Empty.SIMPLE_IMG }) : vsList }))) }))] }))] })));
+                        }, children: [selectedCount, "/", list.length] }), checkNodeExist(title) && _jsx("div", Object.assign({}, styled('transfer__header-title'), { children: title }))] })), searchable && (_jsx("div", Object.assign({}, styled('transfer__search'), { children: _jsx(Input, { style: { display: 'flex' }, placeholder: t('Search'), prefix: _jsx(Icon, { children: _jsx(SearchOutlined, {}) }), clearable: true, onModelChange: onSearch }) }))), _jsxs("div", Object.assign({}, styled('transfer__list-container'), { children: [loading && (_jsx("div", Object.assign({}, styled('transfer__loading'), { children: _jsx(Icon, { children: _jsx(CircularProgress, {}) }) }))), _jsx(VirtualScroll, Object.assign({}, vsProps, { ref: vsRef, enable: virtual !== false, listSize: 192, listPadding: 0, itemRender: (item, index, props) => (_createElement("li", Object.assign({}, styled('transfer__option', {
+                            'transfer__option.is-disabled': item.disabled,
+                        }), props, { key: item.value, id: getItemId(item.value), title: item.label, onClick: () => {
+                                if (!item.disabled) {
+                                    onSelectedChange === null || onSelectedChange === void 0 ? void 0 : onSelectedChange(item.value);
+                                }
+                            } }),
+                            _jsx("div", Object.assign({}, styled('transfer__option-prefix'), { children: _jsx(Checkbox, { model: item[IS_SELECTED], disabled: item.disabled }) })),
+                            _jsx("div", Object.assign({}, styled('transfer__option-content'), { children: customItem ? customItem(item.value, item[NO_MATCH] ? undefined : item) : item.label })))), placeholder: "li", onScrollEnd: onScrollBottom, children: (vsList, onScroll) => (_jsx("ul", Object.assign({}, styled('transfer__list'), { onScroll: onScroll, children: list.length === 0 ? _jsx(Empty, { style: { marginTop: 32 }, image: Empty.SIMPLE_IMG }) : vsList }))) }))] }))] })));
 }

package/transfer/types.d.ts

@@ -22,7 +22,7 @@ export interface TransferProps<V extends React.Key, T extends TransferItem<V>> e
     loading?: [boolean?, boolean?];
     disabled?: boolean;
     virtual?: boolean | number;
-    customItem?: (item: T) => React.ReactNode;
+    customItem?: (value: V, item?: T) => React.ReactNode;
     customSearch?: {
         filter?: (value: string, item: T) => boolean;
         sort?: (a: T, b: T) => number;

package/transfer/vars.d.ts

@@ -15,3 +15,4 @@ export declare const CLASSES: {
     'transfer__option-content': string;
 };
 export declare const IS_SELECTED: unique symbol;
+export declare const NO_MATCH: unique symbol;

package/transfer/vars.js

@@ -15,3 +15,4 @@ export const CLASSES = {
     'transfer__option-content': '^transfer__option-content',
 };
 export const IS_SELECTED = Symbol();
+export const NO_MATCH = Symbol();

package/tree-select/TreeSelect.js

@@ -88,8 +88,6 @@ function TreeSelectFC(props, ref) {
         else {
             if (node.isLeaf || !onlyLeafSelectable) {
                 changeSelected(node.id);
-            }
-            if (node.isLeaf) {
                 changeVisible(false);
             }
         }
@@ -405,8 +403,11 @@ function TreeSelectFC(props, ref) {
         else {
             if (!isNull(selected)) {
                 const node = nodesMap.get(selected);
-                selectedLabel = node ? getTreeNodeLabel(node) : String(selected);
-                selectedNode = customSelected ? customSelected(selected, node === null || node === void 0 ? void 0 : node.origin) : selectedLabel;
+                selectedNode = selectedLabel = customSelected
+                    ? customSelected(selected, node === null || node === void 0 ? void 0 : node.origin)
+                    : node
+                        ? getTreeNodeLabel(node)
+                        : String(selected);
             }
         }
         return [selectedNode, suffixNode, selectedLabel];