@antscorp/antsomi-ui 1.3.5-beta.696 → 1.3.5-beta.698

package/es/components/molecules/DatePicker/components/AdvancedPicker/AdvancedPicker.d.ts

@@ -22,6 +22,19 @@ export interface AdvancedPickerProps {
     showTime?: boolean;
     timezone?: string;
     isViewMode?: boolean;
+    /**
+     *
+     * @example const disabledTime = () => ({
+        disabledHours: () => range(0, 24).splice(4, 20),
+        disabledMinutes: () => range(30, 60),
+        disabledSeconds: () => [55, 56],
+      });
+     */
+    disabledTime?: () => {
+        disabledHours: () => number[];
+        disabledMinutes: () => number[];
+        disabledSeconds: () => number[];
+    };
     /**
      * Only show fixed calendar (hide dynamic and )
      */

package/es/components/molecules/DatePicker/components/AdvancedPicker/AdvancedPicker.js

@@ -30,7 +30,7 @@ const { Text } = Typography;
 export const AdvancedPicker = props => {
     var _a, _b;
     // Props
-    const { label, inputStyle, popupStyle, dateTypeKeysShow, calculationTypeKeysShow, showCalculationTypeCondition, defaultDateTypeKey, valueType, option: propsOption, operatorKey, type, date: propsDate, format, formatInputDisplay, errorMessage, disableAfterDate, disableBeforeDate, showTime, disabled, timezone, isViewMode, onlyShowFixed, onUpdatedNewDate, onApply, } = props;
+    const { label, inputStyle, popupStyle, dateTypeKeysShow, calculationTypeKeysShow, showCalculationTypeCondition, defaultDateTypeKey, valueType, option: propsOption, operatorKey, type, date: propsDate, format, formatInputDisplay, errorMessage, disableAfterDate, disableBeforeDate, showTime, disabled, timezone, isViewMode, onlyShowFixed, disabledTime, onUpdatedNewDate, onApply, } = props;
     // Memo
     const newDateTypes = useMemo(() => {
         if (dateTypeKeysShow && dateTypeKeysShow.length) {
@@ -397,7 +397,7 @@ export const AdvancedPicker = props => {
                 // style={{
                 //   width: 120,
                 // }}
-                disabledDate: disableDate, format: formatDisplay, showToday: false, popupClassName: clsx('antsomi-picker-dropdown__advanced', {
+                disabledDate: disableDate, disabledTime: disabledTime, format: formatDisplay, showToday: false, popupClassName: clsx('antsomi-picker-dropdown__advanced', {
                     '--error': errorMessage,
                     'hide-picker-header': ['QUARTER', 'MONTH'].includes(valueType),
                     'only-show-time-picker': ['HOUR', 'MINUTE'].includes(valueType),

package/es/components/molecules/MatchAnySelect/MatchesAnySelect.js

@@ -30,7 +30,7 @@ import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 // Hooks
 import { useDeepCompareEffect, useDeepCompareMemo, useIntersectionObserver, } from '@antscorp/antsomi-ui/es/hooks';
 // Utils
-import { flatTree, recursiveFindParents, recursiveSearchItems, } from '@antscorp/antsomi-ui/es/utils';
+import { flatTree, recursiveSearchItems } from '@antscorp/antsomi-ui/es/utils';
 import { DataIcon, WarningIcon } from '../../icons';
 import clsx from 'clsx';
 const initialState = {
@@ -40,7 +40,6 @@ const matchesAnyInitialState = {
     searchValue: '',
     selectedItems: [],
     isShowLoadMoreEl: false,
-    selectedExpandedKeys: [],
 };
 const { t } = i18nInstance;
 const { Text } = Typography;
@@ -50,7 +49,7 @@ export function MatchesAny(props) {
     // State
     const [state, setState] = useState(matchesAnyInitialState);
     // Variables
-    const { searchValue, selectedItems, isShowLoadMoreEl, selectedExpandedKeys } = state;
+    const { searchValue, selectedItems, isShowLoadMoreEl } = state;
     const _a = listEmptyProps || {}, { icon: listEmptyIcon, description: listEmptyDescription = t(translations.global.noResultsMatchesKeyWord).toString() } = _a, restListEmptyProps = __rest(_a, ["icon", "description"]);
     const _b = selectedListEmptyProps || {}, { description: selectedListEmptyDescription = t(translations.global.selectItemsFromList).toString(), icon: selectedListEmptyIcon = React.createElement(DataIcon, { color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw5, size: 48 }) } = _b, restSelectedListEmptyProps = __rest(_b, ["description", "icon"]);
     // Refs
@@ -93,11 +92,10 @@ export function MatchesAny(props) {
             setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: [
                     ...(prev.selectedItems || []),
                     ...flattenChild === null || flattenChild === void 0 ? void 0 : flattenChild.filter(item => !item.children),
-                ], selectedExpandedKeys: [...(prev.selectedExpandedKeys || []), item.key] })));
+                ] })));
             return;
         }
-        const parentExpandedKeys = recursiveFindParents(items || [], item, 'key', 'children').map(item => item.key);
-        setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: [...(prev.selectedItems || []), item], selectedExpandedKeys: [...(prev.selectedExpandedKeys || []), ...parentExpandedKeys] })));
+        setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: [...(prev.selectedItems || []), item] })));
     };
     /**
      * Removes an item and its descendants from the list of selected items.
@@ -122,9 +120,7 @@ export function MatchesAny(props) {
     const onSelectAll = () => {
         const flattenTreeData = flatTree(items, 'children').filter(item => !item.children &&
             !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.some(selectedItem => selectedItem.key === item.key || selectedItem.title === item.title)));
-        setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: uniqBy([...(prev.selectedItems || []), ...flattenTreeData], 'key'), selectedExpandedKeys: flatTree(items, 'children')
-                .filter(item => !!item.children)
-                .map(item => item.key) })));
+        setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: uniqBy([...(prev.selectedItems || []), ...flattenTreeData], 'key') })));
     };
     const onRemoveAll = () => {
         setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: [] })));
@@ -205,11 +201,16 @@ export function MatchesAny(props) {
         }
         return { treeData, matchedParents };
     }, [items, searchValue, selectedItems, groupSelectProps, onChangeSearch]);
+    // const selectedTreeData = useDeepCompareMemo(() => [], [items, selectedItems]);
     const selectedTreeData = useDeepCompareMemo(() => {
         var _a;
         const notExtendValueSelectedItems = (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(item => !item.isExtendValue)) || [];
         const extendValueSelectedItems = (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(item => item.isExtendValue)) || [];
-        const lazyLoadSelectedItems = (notExtendValueSelectedItems === null || notExtendValueSelectedItems === void 0 ? void 0 : notExtendValueSelectedItems.filter(selectedItem => !flatTree(items || [], 'children').some(item => item.key === selectedItem.key))) || [];
+        // const lazyLoadSelectedItems =
+        //   notExtendValueSelectedItems?.filter(
+        //     selectedItem =>
+        //       !flatTree(items || [], 'children').some(item => item.key === selectedItem.key),
+        //   ) || [];
         const serializeTreeData = (list) => {
             var _a;
             return ((_a = list
@@ -229,7 +230,7 @@ export function MatchesAny(props) {
                 children: serializeTreeData(item.children),
             })), (!!item.error && { className: 'error-node' }))))) || [];
         };
-        return serializeTreeData(items || []).concat(((_a = [...lazyLoadSelectedItems, ...extendValueSelectedItems]) === null || _a === void 0 ? void 0 : _a.map(item => (Object.assign(Object.assign({}, item), { title: renderItemNodeTitle({ item, mode: 'select', onRemoveItem }) })))) || []);
+        return serializeTreeData(items || []).concat(((_a = [/* ...lazyLoadSelectedItems, */ ...extendValueSelectedItems]) === null || _a === void 0 ? void 0 : _a.map(item => (Object.assign(Object.assign({}, item), { title: renderItemNodeTitle({ item, mode: 'select', onRemoveItem }) })))) || []);
     }, [items, selectedItems]);
     const isDisableRemoveAll = useDeepCompareMemo(() => !(selectedTreeData === null || selectedTreeData === void 0 ? void 0 : selectedTreeData.length), [selectedTreeData]);
     const isDisableSelectAll = useDeepCompareMemo(() => {
@@ -268,7 +269,9 @@ export function MatchesAny(props) {
                         renderExtraValueLabels(),
                         React.createElement(TextButton, { disabled: isDisableSelectAll, onClick: onSelectAll }, t(translations.global.selectAll).toString()))),
                 React.createElement(Spin, { spinning: loading }, (treeData === null || treeData === void 0 ? void 0 : treeData.length) ? (React.createElement(React.Fragment, null,
-                    React.createElement(StyledTree, { key: searchValue, defaultExpandAll: true, defaultExpandedKeys: matchedParents.map(item => item.key), selectable: false, treeData: treeData, switcherIcon: props => (React.createElement(Icon, { type: "icon-ants-caret-down", style: {
+                    React.createElement(StyledTree, { key: searchValue, defaultExpandedKeys: (matchedParents === null || matchedParents === void 0 ? void 0 : matchedParents.length)
+                            ? matchedParents.map(item => item.key)
+                            : items === null || items === void 0 ? void 0 : items.map(item => item.key), selectable: false, treeData: treeData, switcherIcon: props => (React.createElement(Icon, { type: "icon-ants-caret-down", style: {
                                 transform: props.expanded ? 'rotate(0)' : 'rotate(-90deg)',
                                 transition: 'transform 0.3s ease',
                             }, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 })), height: 396 }),
@@ -278,14 +281,10 @@ export function MatchesAny(props) {
         React.createElement(Flex, { className: "matches-any__header", justify: "space-between" },
             React.createElement(Text, { strong: true }, `${t(translations.global.selected)} (${(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) || 0})`),
             React.createElement(TextButton, { disabled: isDisableRemoveAll, onClick: onRemoveAll }, t(translations.global.removeAll).toString())),
-        React.createElement("div", { className: "matches-any__body" }, !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) ? (React.createElement(EmptyData, Object.assign({ icon: selectedListEmptyIcon, description: selectedListEmptyDescription }, restSelectedListEmptyProps))) : (React.createElement(StyledTree, Object.assign({ selectable: false, treeData: selectedTreeData, height: 420, defaultExpandAll: true }, ((selectedExpandedKeys === null || selectedExpandedKeys === void 0 ? void 0 : selectedExpandedKeys.length) && {
-            expandedKeys: selectedExpandedKeys,
-        }), { switcherIcon: props => (React.createElement(Icon, { type: "icon-ants-caret-down", style: {
+        React.createElement("div", { className: "matches-any__body" }, !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) ? (React.createElement(EmptyData, Object.assign({ icon: selectedListEmptyIcon, description: selectedListEmptyDescription }, restSelectedListEmptyProps))) : (React.createElement(StyledTree, { key: items === null || items === void 0 ? void 0 : items.length, defaultExpandedKeys: items === null || items === void 0 ? void 0 : items.map(item => item.key), selectable: false, treeData: selectedTreeData, height: 420, switcherIcon: props => (React.createElement(Icon, { type: "icon-ants-caret-down", style: {
                     transform: props.expanded ? 'rotate(0)' : 'rotate(-90deg)',
                     transition: 'transform 0.3s ease',
-                }, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 })), onExpand: expandedKeys => {
-                setState(prev => (Object.assign(Object.assign({}, prev), { selectedExpandedKeys: expandedKeys })));
-            } }))))));
+                }, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 })) })))));
     // Handlers
     const onApplyExtendValue = (extendValues) => {
         // Filter out values that are already present in selectedItems
@@ -336,6 +335,9 @@ export function MatchesAnySelect(props) {
         }, overlayStyle: { width: 700 }, overlayInnerStyle: {
             padding: 0,
         }, trigger: ['click'], destroyTooltipOnHide: true, onOpenChange: () => setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: !isOpenPopover }))), zIndex: 1400 }, popoverProps),
-        React.createElement(Tooltip, { mouseEnterDelay: 0.5, title: `${selectedItems ? selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map(item => item.title).join(', ') : ''}` },
+        React.createElement(Tooltip, { mouseEnterDelay: 0.5, title: `${selectedItems ? selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map(item => item.title).join(', ') : ''}`, overlayInnerStyle: {
+                maxHeight: 300,
+                overflow: 'auto',
+            } },
             React.createElement(Select, Object.assign({ title: "", value: value, placeholder: placeholder, popupMatchSelectWidth: 700, dropdownStyle: Object.assign(Object.assign({}, dropdownStyle), { display: 'none', padding: 0 }), loading: loading }, restProps)))));
 }

package/es/components/molecules/MatchAnySelect/mock.d.ts

@@ -0,0 +1,21 @@
+export declare const countryItems: {
+    name: string;
+    countryId: number;
+    countryName: string;
+    provinces: {
+        provinceId: number;
+        provinceName: string;
+    }[];
+    value: string;
+    label: string;
+    title: string;
+    key: string;
+    id: number;
+    children: {
+        provinceId: number;
+        provinceName: string;
+        key: string;
+        title: string;
+        value: string;
+    }[];
+}[];