@antscorp/antsomi-ui 1.3.3-beta.91 → 1.3.3-beta.92

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

@@ -22,6 +22,7 @@ import { DatePickerCustomInput, DatePickerHeader, DropdownContent, DropdownHeade
 // Constants
 import { CALCULATION_DATES, CALCULATION_TYPES, DATE_TYPES, DEFAULT_DATE_FORMAT, VALUE_TYPES, ADVANCED_PICKER_TYPE, WEEK_ARR, QUARTER_PLACEHOLDER, WEEK_PLACEHOLDER, DAY_LABEL_SHORT, MONTH_LABEL_FULL, DAY_OF_MONTH, ANCHOR_LEAP_YEAR, GRANULARITY_MAPPING, } from './constants';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { useOutsideClick } from '@antscorp/antsomi-ui/es/hooks/useOutsideClick';
 const PATH = '@antscorp/antsomi-ui/es/components/molecules/DatePicker/components/Advanced/DatePickerAdvanced.tsx';
 const { useToken } = theme;
 const { Text } = Typography;
@@ -177,9 +178,11 @@ export const AdvancedPicker = props => {
                         date: newDate,
                         option: {
                             dateType: newDateType.value,
-                            calculationDate: newDateType.value === 'fix' ? '' : newCalculationDate.value,
-                            calculationType: newDateType.value === 'fix' ? '' : newCalculationType.value,
-                            value: newDateType.value === 'fix' ? 0 : value,
+                            calculationDate: newDateType.value === 'fixed' ? '' : newCalculationDate.value,
+                            calculationType: newDateType.value === 'fixed'
+                                ? ''
+                                : newCalculationType.value,
+                            value: newDateType.value === 'fixed' ? 0 : value,
                         },
                     });
                 }
@@ -196,9 +199,11 @@ export const AdvancedPicker = props => {
     }, [propsOption, newCalculationDates, propsDate, format]);
     // Handlers
     const disableDate = current => current > dayjs(disableAfterDate, format) || current < dayjs(disableBeforeDate, format);
-    const toggleOpenDropdown = () => {
+    const toggleOpenDropdown = (isOpen) => {
         try {
-            setState(() => (Object.assign(Object.assign({}, state), { isOpen: !state.isOpen })));
+            setState(() => (Object.assign(Object.assign({}, state), { 
+                // isOpen: !state.isOpen,
+                isOpen: isOpen != null ? isOpen : !state.isOpen })));
         }
         catch (error) {
             handleError(error, {
@@ -208,6 +213,7 @@ export const AdvancedPicker = props => {
             });
         }
     };
+    const { ref } = useOutsideClick(() => toggleOpenDropdown(false));
     const onClickApply = () => {
         try {
             const draftOption = {
@@ -253,9 +259,9 @@ export const AdvancedPicker = props => {
         React.createElement(DropdownFooter, null,
             React.createElement(Space, null,
                 React.createElement(Button, { type: "primary", onClick: () => onClickApply() }, "Apply"),
-                React.createElement(Button, { type: "default", onClick: () => toggleOpenDropdown() }, "Cancel")),
+                React.createElement(Button, { type: "default", onClick: () => toggleOpenDropdown(false) }, "Cancel")),
             option.dateType.value === 'fixed' && React.createElement(Button, { onClick: () => onClickNow() }, "Now"))));
-    const renderDateTypeOptions = () => (React.createElement(Select, { options: newDateTypes, value: option.dateType.value, onChange: value => {
+    const renderDateTypeOptions = () => (React.createElement(Select, { getPopupContainer: triggerNode => triggerNode.parentNode, options: newDateTypes, value: option.dateType.value, onChange: value => {
             const dateType = newDateTypes.find(dateType => dateType.value === value);
             onChangeOption({ dateType });
             // toggleOpenDropdown(true);
@@ -299,9 +305,9 @@ export const AdvancedPicker = props => {
                     return dayjs(date);
             }
         };
-        return (React.createElement("div", { style: contentStyle },
+        return (React.createElement("div", { style: contentStyle, ref: ref },
             React.createElement(DropdownHeader, { className: "dropdown-header" },
-                React.createElement(DropdownLabel, { valueType: valueType, date: date, format: format, type: type, showTime: showTime, operatorKey: operatorKey, formatInputDisplay: formatInputDisplay })),
+                React.createElement(DropdownLabel, { valueType: valueType, date: date, format: format, type: type, showTime: showTime, operatorKey: operatorKey, formatInputDisplay: formatInputDisplay, dateType: option.dateType.value })),
             React.createElement(DropdownContent, { className: "dropdown-content" },
                 renderDateTypeOptions(),
                 option.dateType.value === 'fixed' ? (React.createElement(React.Fragment, null,
@@ -371,7 +377,7 @@ export const AdvancedPicker = props => {
                 onChangeDatePicker(current);
             } }, getCellRender(current, valueType, info)));
     }, [valueType, format, date]);
-    return (React.createElement(Space, { direction: "vertical", size: 5, className: "antsomi-advanced-picker-container" },
+    return (React.createElement(Space, { direction: "vertical", size: 5, className: "antsomi-advanced-picker-container", ref: ref },
         !!label && typeof label === 'string' ? (React.createElement(Text, { style: { color: '#666666' } }, label)) : (label),
         option.dateType.value === 'fixed' &&
             !['WEEK', 'DAY_OF_WEEK', 'MONTH_DAY', 'DAY'].includes(valueType) ? (React.createElement(Tooltip, { title: selectedDateTitle },
@@ -400,7 +406,12 @@ export const AdvancedPicker = props => {
                     : undefined, suffixIcon: React.createElement(CalendarIconWrapper, { style: {
                         pointerEvents: disabled ? 'none' : 'all',
                     }, onClick: () => toggleOpenDropdown() },
-                    React.createElement(EventIcon, { width: 20, height: 20, fill: errorMessage ? (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorError : (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw10 })), cellRender: cellRender }))) : (React.createElement(Dropdown, { disabled: disabled, open: !disabled && isOpen, dropdownRender: dropdownRender, trigger: ['click'], onOpenChange: () => toggleOpenDropdown(), overlayStyle: { width: 'fit-content', minWidth: 'auto' } },
+                    React.createElement(EventIcon, { width: 20, height: 20, fill: errorMessage ? (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorError : (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw10 })), cellRender: cellRender }))) : (React.createElement(Dropdown, { disabled: disabled, open: !disabled && isOpen, dropdownRender: dropdownRender, trigger: ['click'], 
+            // onOpenChange={(open, info) => {
+            //   console.log('🚀🚀🚀 ', 4, { open, info });
+            //   toggleOpenDropdown();
+            // }}
+            overlayStyle: { width: 'fit-content', minWidth: 'auto' } },
             React.createElement(Tooltip, { title: selectedDateTitle },
                 React.createElement(Input, { disabled: disabled, onClick: () => toggleOpenDropdown(), readOnly: true, suffix: React.createElement(CalendarIconWrapper, { style: {
                             pointerEvents: disabled ? 'none' : 'all',

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TAdvancedType, TOperatorKey, ValueTypes } from '../AdvancedPicker/types';
+import { TAdvancedType, TDateType, TOperatorKey, ValueTypes } from '../AdvancedPicker/types';
 interface DropdownLabelProps {
     valueType?: ValueTypes;
     date?: string;
@@ -8,6 +8,7 @@ interface DropdownLabelProps {
     showTime?: boolean;
     operatorKey?: TOperatorKey;
     formatInputDisplay?: string;
+    dateType?: TDateType;
 }
 export declare const DropdownLabel: React.FC<DropdownLabelProps>;
 export {};

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

@@ -8,7 +8,7 @@ import { ADVANCED_PICKER_TYPE, DEFAULT_DATE_FORMAT, HIDE_TIME_LABEL_ARR, QUARTER
 // Instance
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 import { getFormatDisplay, getLabelQuarterRange } from '../AdvancedPicker/utils';
-export const DropdownLabel = React.memo(({ valueType, date, format, type, showTime, operatorKey, formatInputDisplay }) => {
+export const DropdownLabel = React.memo(({ valueType, date, format, type, showTime, operatorKey, formatInputDisplay, dateType }) => {
     var _a;
     const { t } = i18nInstance;
     const title = (_a = Object.values(ADVANCED_PICKER_TYPE).find(({ value }) => value === type)) === null || _a === void 0 ? void 0 : _a.label;
@@ -31,8 +31,10 @@ export const DropdownLabel = React.memo(({ valueType, date, format, type, showTi
             const dayObj = dayjs(date || new Date(), format).locale('en');
             // const dayObj = dayjs(date || new Date(), format).locale(locale || 'en');
             formatLabel = `${WEEK_PLACEHOLDER}W, YYYY`;
-            subLabel = `${dayjs(dayObj).day(0).format('MMMM DD, YYYY')} - ${dayjs(dayObj)
-                .day(6)
+            subLabel = `${dayjs(dayObj)
+                .day(['today', 'first_day_of_week_mon_sun'].includes(dateType || '') ? 1 : 0)
+                .format('MMMM DD, YYYY')} - ${dayjs(dayObj)
+                .day(['today', 'first_day_of_week_mon_sun'].includes(dateType || '') ? 7 : 6)
                 .format('MMMM DD, YYYY')}`;
             break;
         }

package/es/hooks/useOutsideClick.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const useOutsideClick: (callback: any) => {
+    ref: import("react").MutableRefObject<any>;
+};

package/es/hooks/useOutsideClick.js

@@ -0,0 +1,18 @@
+import { useEffect, useRef } from 'react';
+export const useOutsideClick = callback => {
+    const ref = useRef(null);
+    const handleClickOutside = event => {
+        if (ref.current && !ref.current.contains(event.target)) {
+            if (callback && typeof callback === 'function') {
+                callback();
+            }
+        }
+    };
+    useEffect(() => {
+        document.addEventListener('click', handleClickOutside, true);
+        return () => {
+            document.removeEventListener('click', handleClickOutside, true);
+        };
+    });
+    return { ref };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.3-beta.91",
+  "version": "1.3.3-beta.92",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",