@antscorp/antsomi-ui 1.3.5-beta.364 → 1.3.5-beta.365

package/es/assets/css/main.scss

@@ -20,3 +20,7 @@
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
+
+.rc-virtual-list-scrollbar {
+  width: 4px !important;
+}

package/es/components/molecules/CalendarSelection/CalendarSelection.js

@@ -1,6 +1,6 @@
 /* eslint-disable react/jsx-no-constructed-context-values */
 import React, { useLayoutEffect, useReducer, useRef } from 'react';
-import { Divider } from 'antd';
+import { Divider, ConfigProvider as AntdConfigProvider } from 'antd';
 import { ActionContext, StateContext } from './context';
 import { reducer, INITIAL_STATE } from './reducer';
 import { StyledPopover, StyledPopoverBody, StyledPopoverContainer } from './styled';
@@ -34,12 +34,21 @@ export const CalendarSelection = props => {
         React.createElement(Divider, { style: { margin: 0 } }),
         React.createElement(Footer, null)));
     // console.log(state.value.current.rangeValue);
-    return (React.createElement(StateContext.Provider, { value: Object.assign(Object.assign({}, state), { rangeLimit,
-            timezone }) },
-        React.createElement(ActionContext.Provider, { value: { dispatch } },
-            React.createElement(StyledPopover, Object.assign({}, popoverProps, { open: state.open, arrow: false, trigger: ['click'], content: popoverContent, destroyTooltipOnHide: true, overlayInnerStyle: { padding: 0 }, onOpenChange: isOpen => {
-                    if (!isOpen)
-                        dispatch({ type: 'toggle_popover' });
-                } }),
-                React.createElement(TimeRangeDisplay, Object.assign({}, timeDisplayProps))))));
+    return (React.createElement(AntdConfigProvider, { theme: {
+            components: {
+                Popover: {
+                    borderRadiusLG: 0,
+                    borderRadius: 0,
+                    borderRadiusOuter: 0,
+                },
+            },
+        } },
+        React.createElement(StateContext.Provider, { value: Object.assign(Object.assign({}, state), { rangeLimit,
+                timezone }) },
+            React.createElement(ActionContext.Provider, { value: { dispatch } },
+                React.createElement(StyledPopover, Object.assign({}, popoverProps, { open: state.open, arrow: false, trigger: ['click'], content: popoverContent, destroyTooltipOnHide: true, overlayInnerStyle: { padding: 0 }, onOpenChange: isOpen => {
+                        if (!isOpen)
+                            dispatch({ type: 'toggle_popover' });
+                    } }),
+                    React.createElement(TimeRangeDisplay, Object.assign({}, timeDisplayProps)))))));
 };

package/es/components/molecules/CalendarSelection/components/CustomPicker/CustomPicker.js

@@ -65,44 +65,45 @@ export const CustomPicker = props => {
         return React.createElement(StyledCellDate, { rangeColor: cellBgColor }, originNode);
     }, [rangeValue]);
     return (React.createElement(StyledCustomPickerRoot, null,
-        React.createElement("div", { className: "range-inputs" }, rangeValue.map((range, rangeIdx) => (React.createElement(ConfigProvider, { key: rangeIdx, theme: {
-                components: {
-                    DatePicker: Object.assign({ cellHeight: 20 }, (range.color && {
-                        hoverBorderColor: range.color,
-                        colorBorder: range.color,
-                        colorPrimary: range.color,
-                        colorPrimaryActive: range.color,
-                        cellActiveWithRangeBg: new TinyColor(range.color).lighten(40).toHexString(),
-                    })),
-                },
-            } },
-            React.createElement("div", { className: "range-input" },
-                React.createElement("div", { className: "range-input-label" }, generateRangeInputLabel(rangeIdx, range.label)),
-                React.createElement(RangePicker, Object.assign({}, rest, { open: true, value: [dayjs(range.start), dayjs(range.end)], onClick: () => setActiveRangeIdx(rangeIdx), getPopupContainer: () => popupContainer.current || document.body, panelRender: originalPanel => {
-                        if (activeRangeIdx !== rangeIdx)
-                            return null;
-                        return originalPanel;
-                    }, cellRender: (current, info) => {
-                        if (typeof current === 'number' || info.type !== 'date') {
-                            return info.originNode;
-                        }
-                        return renderCellDate(current, info.originNode);
-                    }, onCalendarChange: value => {
-                        var _a, _b;
-                        let start = '';
-                        let end = '';
-                        const valueFirst = dayjs((_a = value === null || value === void 0 ? void 0 : value.at(0)) === null || _a === void 0 ? void 0 : _a.toDate());
-                        const valueSecond = dayjs((_b = value === null || value === void 0 ? void 0 : value.at(1)) === null || _b === void 0 ? void 0 : _b.toDate());
-                        if (valueFirst.isBefore(valueSecond)) {
-                            start = valueFirst.toISOString();
-                            end = valueSecond.toISOString();
-                        }
-                        else {
-                            start = valueSecond.toISOString();
-                            end = valueFirst.toISOString();
-                        }
-                        handleCalendarChange(start, end);
-                    } }))))))),
-        React.createElement(AutoUpdateTo, null),
+        React.createElement("div", { className: "section-input" },
+            React.createElement("div", { className: "range-inputs" }, rangeValue.map((range, rangeIdx) => (React.createElement(ConfigProvider, { key: rangeIdx, theme: {
+                    components: {
+                        DatePicker: Object.assign({ cellHeight: 20 }, (range.color && {
+                            hoverBorderColor: range.color,
+                            colorBorder: range.color,
+                            colorPrimary: range.color,
+                            colorPrimaryActive: range.color,
+                            cellActiveWithRangeBg: new TinyColor(range.color).lighten(40).toHexString(),
+                        })),
+                    },
+                } },
+                React.createElement("div", { className: "range-input" },
+                    React.createElement("div", { className: "range-input-label" }, generateRangeInputLabel(rangeIdx, range.label)),
+                    React.createElement(RangePicker, Object.assign({}, rest, { open: true, value: [dayjs(range.start), dayjs(range.end)], onClick: () => setActiveRangeIdx(rangeIdx), getPopupContainer: () => popupContainer.current || document.body, panelRender: originalPanel => {
+                            if (activeRangeIdx !== rangeIdx)
+                                return null;
+                            return originalPanel;
+                        }, cellRender: (current, info) => {
+                            if (typeof current === 'number' || info.type !== 'date') {
+                                return info.originNode;
+                            }
+                            return renderCellDate(current, info.originNode);
+                        }, onCalendarChange: value => {
+                            var _a, _b;
+                            let start = '';
+                            let end = '';
+                            const valueFirst = dayjs((_a = value === null || value === void 0 ? void 0 : value.at(0)) === null || _a === void 0 ? void 0 : _a.toDate());
+                            const valueSecond = dayjs((_b = value === null || value === void 0 ? void 0 : value.at(1)) === null || _b === void 0 ? void 0 : _b.toDate());
+                            if (valueFirst.isBefore(valueSecond)) {
+                                start = valueFirst.toISOString();
+                                end = valueSecond.toISOString();
+                            }
+                            else {
+                                start = valueSecond.toISOString();
+                                end = valueFirst.toISOString();
+                            }
+                            handleCalendarChange(start, end);
+                        } }))))))),
+            React.createElement(AutoUpdateTo, null)),
         React.createElement(CalendarContainerStyled, { className: "calendar-container", ref: popupContainer })));
 };

package/es/components/molecules/CalendarSelection/components/CustomPicker/styled.js

@@ -20,17 +20,23 @@ export const StyledCustomPickerRoot = styled.div `
   display: flex;
   flex-direction: column;
   gap: 8px;
-  padding: 8px 12px;
 
-  .range-inputs {
+  .section-input {
+    padding: 8px 12px;
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 4px;
 
-    .range-input {
+    .range-inputs {
       display: flex;
       flex-direction: column;
-      gap: 4px;
+      gap: 8px;
+
+      .range-input {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
     }
   }
 
@@ -68,83 +74,8 @@ export const CalendarContainerStyled = styled.div `
 
     /* Content */
     .antsomi-picker-content {
-      /* Rectangle */
-      & td,
-      & th,
-      & .antsomi-picker-cell-inner,
-      & td::before {
-        /* width: var(--cellWidth);
-        height: var(--cellHeight); */
-      }
-
-      /* Date node */
-      .antsomi-picker-cell-inner {
-      }
-
-      /* Today node */
-      .antsomi-picker-cell-today {
-        .antsomi-picker-cell-inner {
-          &::before {
-            border-radius: 18px;
-            border: 0.0001rem solid var(--colorToDay);
-          }
-        }
-      }
-
-      /* Selected node */
-      .antsomi-picker-cell-in-view {
-        &.antsomi-picker-cell-selected,
-        &.antsomi-picker-cell-range-start,
-        &.antsomi-picker-cell-range-end {
-          .antsomi-picker-cell-inner {
-            background: var(--colorSelected) !important;
-            border-radius: 18px !important;
-          }
-        }
-      }
-
-      /* In Range */
-      .antsomi-picker-cell-in-range.antsomi-picker-cell-in-view {
-        &::before {
-          background: var(--colorInRange) !important;
-        }
-        .antsomi-picker-cell-inner {
-          /* background: var(--colorInRange) !important; */
-          &::after {
-            content: none !important;
-            background: var(--colorInRange) !important;
-          }
-        }
-      }
-
-      /* In Range Start End */
-      .antsomi-picker-cell-in-view.antsomi-picker-cell-range-start:not(
-          .antsomi-picker-cell-range-start-single
-        ) {
-        &::before {
-          background: var(--colorInRange) !important;
-        }
-      }
-      .antsomi-picker-cell-in-view.antsomi-picker-cell-range-end:not(
-          .antsomi-picker-cell-range-end-single
-        ) {
-        &::before {
-          background: var(--colorInRange) !important;
-        }
-      }
-
-      /* Hover */
-      .antsomi-picker-cell-in-view {
-        &.antsomi-picker-cell-range-hover,
-        &.antsomi-picker-cell-range-hover-start,
-        &.antsomi-picker-cell-range-hover-end {
-          &:not(.antsomi-picker-cell-in-range)::after {
-            content: none !important;
-            border: none;
-          }
-        }
-      }
     }
+
     .antsomi-picker-range-arrow {
       display: none !important;
     }

package/es/components/molecules/CalendarSelection/components/RangePicker/RangePicker.js

@@ -1,4 +1,4 @@
 import React from 'react';
 import { StyledRangePicker } from './styled';
 const DATE_FORMAT = 'DD/MM/YYYY';
-export const RangePicker = props => (React.createElement(StyledRangePicker, Object.assign({}, props, { allowEmpty: [true, true], allowClear: false, autoFocus: false, size: "large", suffixIcon: false, format: DATE_FORMAT })));
+export const RangePicker = props => (React.createElement(StyledRangePicker, Object.assign({}, props, { allowEmpty: [true, true], allowClear: false, autoFocus: false, bordered: false, size: "middle", suffixIcon: false, format: DATE_FORMAT })));

package/es/components/molecules/CalendarSelection/components/RangePicker/styled.js

@@ -1,13 +1,26 @@
 import { DatePicker } from '@antscorp/antsomi-ui/es/components/molecules';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 import styled from 'styled-components';
 const { RangePicker } = DatePicker;
 export const StyledRangePicker = styled(RangePicker) `
-  font-size: 12px;
-  padding-right: 8px;
+  &.antsomi-picker {
+    font-size: 12px;
+    padding: 0;
 
-  .ant-picker-input {
-    input {
-      width: 80px;
+    .antsomi-picker-active-bar {
+      display: none;
+    }
+
+    .antsomi-picker-input {
+      padding: 4px 10px;
+
+      &.antsomi-picker-input-active {
+        border-bottom: 2px solid ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary};
+      }
+
+      input {
+        font-size: inherit;
+      }
     }
   }
 `;

package/es/components/molecules/CalendarSelection/components/TimeRangeDisplay/TimeRangeDisplay.js

@@ -10,22 +10,16 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import cls from 'clsx';
-import React, { forwardRef, useEffect, useState } from 'react';
+import React, { forwardRef } from 'react';
 import { Typography } from '@antscorp/antsomi-ui/es/components/atoms';
 import { ACTION_TYPES } from '../../actions';
 import { useCalendarSelectionContext } from '../../hooks';
 import { getRangeTypeSelectedTitle, getRangeValueSelctedTitle } from '../../utils';
 import { StyledBtnDisplayWrapper } from './styled';
-import Icon from '@antscorp/icons';
 const { Text } = Typography;
 export const TimeRangeDisplay = forwardRef((props, ref) => {
     const { showType = true, formatStart, formatEnd, operator } = props, rest = __rest(props, ["showType", "formatStart", "formatEnd", "operator"]);
     const { state, action } = useCalendarSelectionContext();
-    // console.log({ state, action });
-    const [collapse, setCollapse] = useState(false);
-    useEffect(() => {
-        setCollapse(false);
-    }, []);
     const { rangeInfo, rangeValue } = state.value.original;
     const handleOpenPopover = () => {
         action.dispatch({ type: ACTION_TYPES.togglePopover });
@@ -36,14 +30,14 @@ export const TimeRangeDisplay = forwardRef((props, ref) => {
         formatEnd,
         operator,
     });
-    // console.log({ rangeSelectedTitle, rangeValueTitles });
+    const renderDateTitle = (title) => (React.createElement(Text, { className: "range-date-title", ellipsis: {
+            tooltip: title,
+        } }, title));
     return (React.createElement(StyledBtnDisplayWrapper, Object.assign({ ref: ref }, rest, { onClick: handleOpenPopover, role: "button" }),
         showType && (React.createElement(Text, { className: "range-type", ellipsis: { tooltip: rangeSelectedTitle } }, rangeSelectedTitle)),
-        React.createElement("div", { className: cls('range-date', { collapse: state.open }) },
-            rangeValue.length > 0 && (React.createElement(Text, { className: "range-date-title", ellipsis: { tooltip: rangeValueTitles[0] } },
-                rangeValueTitles[0],
-                React.createElement(Icon, { className: "collapse-btn", type: "icon-ants-angle-down", style: { fontSize: 9 } }))),
+        React.createElement("div", { className: cls('range-date') },
+            rangeValue.length > 0 && renderDateTitle(rangeValueTitles[0]),
             rangeValue.length > 1 && (React.createElement("div", { className: cls('collapse-wrapper') }, rangeValueTitles.slice(1).map(title => (React.createElement(React.Fragment, { key: title },
                 React.createElement("div", { className: "compare-title" }, "Compare"),
-                React.createElement(Text, { className: "range-date-title", ellipsis: { tooltip: title } }, title)))))))));
+                renderDateTitle(title)))))))));
 });

package/es/components/molecules/CalendarSelection/components/TimeRangeDisplay/styled.js

@@ -1,70 +1,29 @@
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 import styled from 'styled-components';
 export const StyledBtnDisplayWrapper = styled.div `
   display: flex;
   overflow: hidden;
   text-overflow: ellipsis;
-  background-color: transparent;
   cursor: pointer;
   width: fit-content;
+  flex-direction: column;
+  gap: 4px;
+  line-height: 1.4;
 
   .range-type {
-    /* font-size: 0.75rem;
-    width: fit-content;
-    padding: 2px 8px; */
-
     display: block;
-    font-size: 0.813rem;
-    margin-right: 0.5rem;
-    color: rgb(127, 127, 127);
+    font-size: 11px;
+    padding: 3px 5px;
+    border-radius: 3px;
+    width: fit-content;
+    background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw2};
+    line-height: inherit;
   }
 
-  .range-date {
-    border-top: none;
-    border-right: none;
-    border-left: none;
-    border-image: initial;
-    background: transparent;
-    border-bottom: 1px solid rgb(184, 207, 230);
-    text-align: left;
-    display: flex;
-    -webkit-box-pack: justify;
-    justify-content: space-between;
-    -webkit-box-align: center;
-    align-items: center;
-    font-size: 0.75rem;
-    padding: 2px 8px;
-    max-width: unset;
-
-    .range-date-title {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .collapse-wrapper {
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-      overflow: hidden;
-
-      .compare-title {
-        font-size: 11px;
-        color: #878d93;
-      }
-    }
-
-    .collapse-btn {
-      padding: 4px;
-    }
-
-    &.collapse {
-      .collapse-wrapper {
-        height: 0;
-      }
-
-      .collapse-btn {
-        transform: rotate(180deg);
-      }
-    }
+  .range-date-title {
+    padding: 3px 5px;
+    border-radius: 3px;
+    background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue1_1};
+    line-height: inherit;
   }
 `;

package/es/components/molecules/CalendarSelection/index.d.ts

@@ -28,3 +28,29 @@ export declare const CalendarSelectionConstants: {
     };
 };
 export type { TriggerOutInfo, CalendarSelectionValue } from './types';
+export declare const CalendarSelectionUtils: {
+    getDefaultDate: () => {
+        toDay: string;
+        yesterday: string;
+        startWeekSS: string;
+        startWeekMS: string;
+        last7Days: string;
+        startLastWeekSS: string;
+        startLastWeekMS: string;
+        endLastWeekSS: string;
+        endLastWeekMS: string;
+        last14Days: string;
+        startOfThisMonth: string;
+        endOfThisMonth: string;
+        last30Days: string;
+        lastMonthFirstDate: string;
+        lastMonthLastDate: string;
+        thisQuaterFirstDate: string;
+        thisQuaterLastDate: string;
+        lastQuaterFirstDate: string;
+        lastQuaterLastDate: string;
+        maxSub: number;
+        todayUptoCount: (val: number) => string;
+        yesterdayUptoCount: (val: number) => string;
+    };
+};

package/es/components/molecules/CalendarSelection/index.js

@@ -1,7 +1,11 @@
 import { TRIGGER_OUT_MODE, SELECTION_KEY, AUTO_UPDATE_TO_KEY } from './constants';
+import { getDefaultDate } from './utils';
 export { CalendarSelection } from './CalendarSelection';
 export const CalendarSelectionConstants = {
     TRIGGER_OUT_MODE,
     SELECTION_KEY,
     AUTO_UPDATE_TO_KEY,
 };
+export const CalendarSelectionUtils = {
+    getDefaultDate,
+};

package/es/components/molecules/index.d.ts

@@ -48,6 +48,7 @@ export { ModalSelect } from './ModalSelect';
 export { EditableName } from './EditableName';
 export { VirtualizedMenu } from './VirtualizedMenu';
 export { SearchPopover, PopoverAddField } from './SearchPopover';
+export { CalendarSelection, CalendarSelectionConstants, CalendarSelectionUtils, } from './CalendarSelection';
 export * from './EmptyData';
 export * from './PreviewModal';
 export * from './Drawer';
@@ -55,7 +56,6 @@ export * from './DrawerDetail';
 export * from './ThumbnailCard';
 export * from './ProcessLoading';
 export { EditorScript } from './EditorScript';
-export { CalendarSelection, CalendarSelectionConstants } from './CalendarSelection';
 export { EditorTab } from './EditorTab';
 export { SelectAccount } from './SelectAccount';
 export type { AdvancedPickerProps, TAdvancedPickerOption, TAdvancedRangePickerTimeRange, } from './DatePicker';

package/es/components/molecules/index.js

@@ -48,6 +48,7 @@ export { ModalSelect } from './ModalSelect';
 export { EditableName } from './EditableName';
 export { VirtualizedMenu } from './VirtualizedMenu';
 export { SearchPopover, PopoverAddField } from './SearchPopover';
+export { CalendarSelection, CalendarSelectionConstants, CalendarSelectionUtils, } from './CalendarSelection';
 export * from './EmptyData';
 export * from './PreviewModal';
 export * from './Drawer';
@@ -55,6 +56,5 @@ export * from './DrawerDetail';
 export * from './ThumbnailCard';
 export * from './ProcessLoading';
 export { EditorScript } from './EditorScript';
-export { CalendarSelection, CalendarSelectionConstants } from './CalendarSelection';
 export { EditorTab } from './EditorTab';
 export { SelectAccount } from './SelectAccount';

package/es/components/organism/LeftMenu/components/common/ChildMenu/index.js

@@ -30,7 +30,7 @@ const styles = {
 };
 export const ChildMenu = memo(props => {
     const { items = [], onMenuClick } = props;
-    const auth = useLeftMenuStore(store => { var _a; return (_a = store.state.appConfig) === null || _a === void 0 ? void 0 : _a.auth; });
+    const { auth, env } = useLeftMenuStore(store => store.state.appConfig) || {};
     const activeAppCode = useLeftMenuStore(store => store.state.activeAppCode);
     const menuItems = useLeftMenuStore(store => store.state.menuItems);
     const customItems = useLeftMenuStore(store => store.state.customItems);
@@ -57,7 +57,12 @@ export const ChildMenu = memo(props => {
         else {
             const url = `${pathname}${hash}`;
             // Active menu item by current url
-            const activeMenuItem = (_a = findLastMatchedItemByUrl({ url, menuItems, auth })) === null || _a === void 0 ? void 0 : _a.menu_item_code;
+            const activeMenuItem = (_a = findLastMatchedItemByUrl({
+                url,
+                menuItems,
+                auth,
+                env,
+            })) === null || _a === void 0 ? void 0 : _a.menu_item_code;
             if (activeMenuItem && activeMenuItem !== currentActiveItem) {
                 setCurrentActiveItem(activeMenuItem);
                 // Find parent key of active menu item to open it

package/es/components/organism/LeftMenu/utils/index.d.ts

@@ -32,7 +32,7 @@ export declare const getGeneratePath: (path: string, params?: Partial<PayloadInf
  * This is used to delete the hash of the path returned from the api,
  * the purpose of which is to compare with the url to activate the app
  */
-export declare const getComparePath: (path: string) => string;
+export declare const getComparePath: (path: string, env?: string) => string;
 /**
  * Creates an initial feature menu item object with default values.
  * @param {Partial<TFeatureMenu>} featureMenuItem - The partial feature menu item object.
@@ -82,6 +82,7 @@ export declare const findLastMatchedItemByUrl: (args: {
     url: string;
     menuItems: TFeatureMenu[];
     auth?: Partial<PayloadInfo>;
+    env?: string;
 }) => TFeatureMenu | undefined;
 export declare const findPathOfActiveItem: (args: {
     activeMenuItem: TFeatureMenu;

package/es/components/organism/LeftMenu/utils/index.js

@@ -16,6 +16,7 @@ import { APP_KEYS, MARKETING_CHANNEL_KEY, HOME_MENU_ITEMS, MARKETING_ROUTES, MEN
 import { MARKETING_CHANNEL_CODE } from '../../../template/Layout/constants';
 // Utils
 import { handleError } from '@antscorp/antsomi-ui/es/utils';
+import { ENV } from '@antscorp/antsomi-ui/es/config';
 const PATH = 'src/components/organism/LeftMenu/utils/index.ts';
 /**
  * Converts a feature menu item to a menu item suitable for rendering in the UI.
@@ -101,8 +102,11 @@ export const getGeneratePath = (path, params) => {
  * This is used to delete the hash of the path returned from the api,
  * the purpose of which is to compare with the url to activate the app
  */
-export const getComparePath = (path) => {
+export const getComparePath = (path, env) => {
     var _a;
+    if (env !== ENV.DEV) {
+        return path;
+    }
     if (path === null || path === void 0 ? void 0 : path.includes('#')) {
         const customPath = ((_a = path === null || path === void 0 ? void 0 : path.split('#')) === null || _a === void 0 ? void 0 : _a[1]) || '';
         return customPath;

package/package.json

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