@antscorp/antsomi-ui 1.3.8 → 1.3.10

package/es/components/common/ConfigProvider/ConfigProvider.js

@@ -12,7 +12,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 // Libraries
 import { StyleProvider } from '@ant-design/cssinjs';
 import { ConfigProvider as AntdConfigProvider } from 'antd';
+import dayjs from 'dayjs';
 import React, { useEffect } from 'react';
+import weekday from 'dayjs/plugin/weekday';
+import localeData from 'dayjs/plugin/localeData';
+/** dayjs plugins for timezone */
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 // Style
@@ -21,6 +27,11 @@ import '@antscorp/antsomi-ui/es/assets/css/main.scss';
 // Initialize languages
 // import '@antscorp/antsomi-ui/es/locales/i18n';
 import i18next from '@antscorp/antsomi-ui/es/locales/i18n';
+// NOTE: HOT fix DatePicker Advanced
+dayjs.extend(weekday);
+dayjs.extend(localeData);
+dayjs.extend(utc);
+dayjs.extend(timezone);
 const ConfigProvider = props => {
     // Props
     const { children, locale } = props, restOfProps = __rest(props, ["children", "locale"]);

package/es/components/common/ConfigProvider/GlobalStyle.js

@@ -11,7 +11,7 @@ import { fab } from '@fortawesome/free-brands-svg-icons';
 library.add(fas, far, fab);
 const { accent6, accent7, scrollBarSize } = THEME.token || {};
 export const GlobalStyle = () => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35;
     return (React.createElement(Global, { styles: css `
       @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
 
@@ -282,13 +282,150 @@ export const GlobalStyle = () => {
           flex-direction: column-reverse;
           padding-bottom: 60px;
 
-          .antsomi-picker-date-panel {
+          .antsomi-picker-date-panel,
+          .antsomi-picker-quarter-panel {
             width: 280px !important;
 
             .antsomi-picker-cell {
               pointer-events: none !important;
             }
           }
+
+          .antsomi-picker-date-panel {
+            position: relative;
+          }
+
+          .antsomi-picker-date-panel::before {
+            content: 'Hours';
+            position: absolute;
+            top: 0;
+            right: 0;
+            transform: translateX(100%);
+            width: 61px;
+            /* width: 53.5px; */
+            font-weight: bold;
+            border-right: 1px solid rgba(5, 5, 5, 0.06);
+            height: 38px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+
+          .antsomi-picker-time-panel {
+            .antsomi-picker-time-panel-column:after {
+              height: 8px;
+            }
+
+            .antsomi-picker-time-panel-cell-selected {
+              background-color: ${(_8 = THEME.token) === null || _8 === void 0 ? void 0 : _8.colorPrimary};
+              color: #fff;
+            }
+            .antsomi-picker-time-panel-cell-selected:hover {
+              background-color: ${(_9 = THEME.token) === null || _9 === void 0 ? void 0 : _9.colorPrimary};
+            }
+
+            .antsomi-picker-cell-inner {
+              text-align: center;
+              cursor: pointer;
+            }
+            .antsomi-picker-cell-inner:hover {
+              background: rgba(34, 34, 34, 0.04);
+            }
+
+            .antsomi-picker-header {
+              display: none;
+            }
+
+            .antsomi-picker-content {
+              position: relative;
+
+              .antsomi-picker-time-panel-column {
+                margin-top: 38px;
+                width: 60px;
+              }
+            }
+
+            .antsomi-picker-content::after,
+            .antsomi-picker-content::before {
+              content: 'Minutes';
+              position: absolute;
+              top: 0;
+              left: 61px;
+              /* left: 53.5px; */
+              width: 60px;
+              /* width: 52.5px; */
+              height: 38px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-weight: bold;
+            }
+
+            .antsomi-picker-content::before {
+              border-right: 1px solid rgba(5, 5, 5, 0.06);
+            }
+            .antsomi-picker-content::after {
+              content: 'Seconds';
+              left: 120px;
+            }
+          }
+
+          /* Custom css scrollbar */
+          ul {
+            padding-left: 8px;
+            scrollbar-gutter: stable;
+          }
+        }
+
+        &.hide-picker-header {
+          .antsomi-picker-month-panel,
+          .antsomi-picker-quarter-panel {
+            .antsomi-picker-header {
+              display: none;
+            }
+          }
+        }
+
+        &.only-show-time-picker {
+          .antsomi-picker-date-panel {
+            display: none;
+          }
+          .antsomi-picker-time-panel {
+            border: none;
+            /* NOTE: production prod show unexpected border */
+            border-inline-start: none !important;
+          }
+          > .antsomi-picker-panel-container > .antsomi-picker-panel-layout > .antsomi-picker-panel {
+            width: 250px;
+            .antsomi-picker-datetime-panel {
+              justify-content: center;
+            }
+
+            ul {
+              ::-webkit-scrollbar {
+                width: 0;
+              }
+              padding: 0;
+            }
+
+            .antsomi-picker-content::after {
+              display: none;
+            }
+            .antsomi-picker-content::before {
+              content: 'Hours';
+              border: none;
+              left: 0;
+            }
+          }
+          &.is-minutes-picker {
+            > .antsomi-picker-panel-container
+              > .antsomi-picker-panel-layout
+              > .antsomi-picker-panel {
+              .antsomi-picker-content::before {
+                content: 'Minutes';
+              }
+            }
+          }
         }
 
         &.--error
@@ -302,9 +439,22 @@ export const GlobalStyle = () => {
           .antsomi-picker-footer-extra {
             padding: 0 !important;
           }
+
+          /*
+          * NOTE: UI broken when add showTime props to <DatePicker />
+          * Unexpected header control (comment code below to see bug)
+          * Temporary solution: hide the verbose element
+          */
+          .antsomi-picker-ranges {
+            display: none;
+          }
         }
       }
 
+      .antsomi-advanced-picker-container .input__wrapper {
+        display: inline-block;
+      }
+
       // Slider
       .antsomi-slider {
         margin: 0 !important;
@@ -329,14 +479,14 @@ export const GlobalStyle = () => {
         .antsomi-slider-rail {
           border-radius: 2px !important;
           transition: background-color 0.3s !important;
-          background-color: ${(_8 = THEME.token) === null || _8 === void 0 ? void 0 : _8.accent1} !important;
+          background-color: ${(_10 = THEME.token) === null || _10 === void 0 ? void 0 : _10.accent1} !important;
         }
 
         .antsomi-slider-track {
           position: absolute !important;
           border-radius: 2px !important;
           transition: background-color 0.3s !important;
-          background-color: ${(_9 = THEME.token) === null || _9 === void 0 ? void 0 : _9.colorPrimary} !important;
+          background-color: ${(_11 = THEME.token) === null || _11 === void 0 ? void 0 : _11.colorPrimary} !important;
         }
 
         .antsomi-slider-step {
@@ -370,16 +520,16 @@ export const GlobalStyle = () => {
         }
 
         .antsomi-slider-handle::after {
-          background-color: ${(_10 = THEME.token) === null || _10 === void 0 ? void 0 : _10.colorPrimary} !important;
+          background-color: ${(_12 = THEME.token) === null || _12 === void 0 ? void 0 : _12.colorPrimary} !important;
         }
 
         &:hover {
           .antsomi-slider-track {
-            background-color: ${(_11 = THEME.token) === null || _11 === void 0 ? void 0 : _11.colorPrimary} !important;
+            background-color: ${(_13 = THEME.token) === null || _13 === void 0 ? void 0 : _13.colorPrimary} !important;
           }
 
           .antsomi-slider-rail {
-            background-color: ${(_12 = THEME.token) === null || _12 === void 0 ? void 0 : _12.accent1} !important;
+            background-color: ${(_14 = THEME.token) === null || _14 === void 0 ? void 0 : _14.accent1} !important;
           }
 
           .antsomi-slider-handle::after {
@@ -387,7 +537,7 @@ export const GlobalStyle = () => {
           }
 
           .antsomi-slider-handle {
-            border-color: ${(_13 = THEME.token) === null || _13 === void 0 ? void 0 : _13.colorPrimary} !important;
+            border-color: ${(_15 = THEME.token) === null || _15 === void 0 ? void 0 : _15.colorPrimary} !important;
           }
         }
 
@@ -397,8 +547,8 @@ export const GlobalStyle = () => {
 
         &.antsomi-slider-disabled {
           .antsomi-slider-handle {
-            background-color: ${(_14 = THEME.token) === null || _14 === void 0 ? void 0 : _14.accent2} !important;
-            border-color: ${(_15 = THEME.token) === null || _15 === void 0 ? void 0 : _15.accent2} !important;
+            background-color: ${(_16 = THEME.token) === null || _16 === void 0 ? void 0 : _16.accent2} !important;
+            border-color: ${(_17 = THEME.token) === null || _17 === void 0 ? void 0 : _17.accent2} !important;
           }
         }
       }
@@ -412,8 +562,8 @@ export const GlobalStyle = () => {
           padding-left: 20px;
           padding-right: 20px;
           font-family: 'Roboto';
-          color: ${(_16 = THEME.token) === null || _16 === void 0 ? void 0 : _16.colorTextBase};
-          font-size: ${(_17 = THEME.token) === null || _17 === void 0 ? void 0 : _17.fontSize}px;
+          color: ${(_18 = THEME.token) === null || _18 === void 0 ? void 0 : _18.colorTextBase};
+          font-size: ${(_19 = THEME.token) === null || _19 === void 0 ? void 0 : _19.fontSize}px;
 
           &:focus-within {
             --tw-shadow: 0 0 #0000;
@@ -423,31 +573,31 @@ export const GlobalStyle = () => {
           }
 
           &:first-child {
-            border-top-left-radius: ${(_18 = THEME.token) === null || _18 === void 0 ? void 0 : _18.borderRadius}px;
-            border-bottom-left-radius: ${(_19 = THEME.token) === null || _19 === void 0 ? void 0 : _19.borderRadius}px;
+            border-top-left-radius: ${(_20 = THEME.token) === null || _20 === void 0 ? void 0 : _20.borderRadius}px;
+            border-bottom-left-radius: ${(_21 = THEME.token) === null || _21 === void 0 ? void 0 : _21.borderRadius}px;
           }
 
           &:last-child {
-            border-top-right-radius: ${(_20 = THEME.token) === null || _20 === void 0 ? void 0 : _20.borderRadius}px;
-            border-bottom-right-radius: ${(_21 = THEME.token) === null || _21 === void 0 ? void 0 : _21.borderRadius}px;
+            border-top-right-radius: ${(_22 = THEME.token) === null || _22 === void 0 ? void 0 : _22.borderRadius}px;
+            border-bottom-right-radius: ${(_23 = THEME.token) === null || _23 === void 0 ? void 0 : _23.borderRadius}px;
           }
 
           &.antsomi-radio-button-wrapper-checked {
-            border-color: ${(_22 = THEME.token) === null || _22 === void 0 ? void 0 : _22.accent1};
-            background-color: ${(_23 = THEME.token) === null || _23 === void 0 ? void 0 : _23.colorTextActive};
-            color: ${(_24 = THEME.token) === null || _24 === void 0 ? void 0 : _24.colorPrimary};
+            border-color: ${(_24 = THEME.token) === null || _24 === void 0 ? void 0 : _24.accent1};
+            background-color: ${(_25 = THEME.token) === null || _25 === void 0 ? void 0 : _25.colorTextActive};
+            color: ${(_26 = THEME.token) === null || _26 === void 0 ? void 0 : _26.colorPrimary};
             font-weight: 700;
 
             &::before {
-              background-color: ${(_25 = THEME.token) === null || _25 === void 0 ? void 0 : _25.accent1};
+              background-color: ${(_27 = THEME.token) === null || _27 === void 0 ? void 0 : _27.accent1};
             }
           }
         }
 
         .antsomi-radio-wrapper {
           font-family: 'Roboto';
-          color: ${(_26 = THEME.token) === null || _26 === void 0 ? void 0 : _26.colorTextBase};
-          font-size: ${(_27 = THEME.token) === null || _27 === void 0 ? void 0 : _27.fontSize}px;
+          color: ${(_28 = THEME.token) === null || _28 === void 0 ? void 0 : _28.colorTextBase};
+          font-size: ${(_29 = THEME.token) === null || _29 === void 0 ? void 0 : _29.fontSize}px;
           margin-right: 0;
 
           .antsomi-radio-disabled {
@@ -478,12 +628,12 @@ export const GlobalStyle = () => {
             .antsomi-radio-inner {
               width: 16px;
               height: 16px;
-              border-color: ${(_28 = THEME.token) === null || _28 === void 0 ? void 0 : _28.colorPrimary};
+              border-color: ${(_30 = THEME.token) === null || _30 === void 0 ? void 0 : _30.colorPrimary};
               border-width: 2px;
-              background-color: ${(_29 = THEME.token) === null || _29 === void 0 ? void 0 : _29.bw0};
+              background-color: ${(_31 = THEME.token) === null || _31 === void 0 ? void 0 : _31.bw0};
 
               &::after {
-                background-color: ${(_30 = THEME.token) === null || _30 === void 0 ? void 0 : _30.colorPrimary};
+                background-color: ${(_32 = THEME.token) === null || _32 === void 0 ? void 0 : _32.colorPrimary};
               }
             }
           }
@@ -541,7 +691,7 @@ export const GlobalStyle = () => {
 
       .antsomi-collapse {
         &.antsomi-collapse-borderless {
-          border-bottom: 1px solid ${(_31 = THEME.token) === null || _31 === void 0 ? void 0 : _31.gray5};
+          border-bottom: 1px solid ${(_33 = THEME.token) === null || _33 === void 0 ? void 0 : _33.gray5};
         }
 
         > .antsomi-collapse-item > .antsomi-collapse-header .antsomi-collapse-arrow {
@@ -551,12 +701,12 @@ export const GlobalStyle = () => {
 
       /* Switch */
       .antsomi-switch {
-        border: 2px solid ${(_32 = THEME.token) === null || _32 === void 0 ? void 0 : _32.colorPrimary} !important;
+        border: 2px solid ${(_34 = THEME.token) === null || _34 === void 0 ? void 0 : _34.colorPrimary} !important;
 
         &.antsomi-switch-checked {
           > .antsomi-switch-handle {
             &::before {
-              background-color: ${(_33 = THEME.token) === null || _33 === void 0 ? void 0 : _33.bw0} !important;
+              background-color: ${(_35 = THEME.token) === null || _35 === void 0 ? void 0 : _35.bw0} !important;
             }
           }
         }

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

@@ -1,13 +1,13 @@
 import React from 'react';
-import { TAdvancedType, TCalculationType, TOperatorKey, TOption, TShowCalculationTypeCondition } from './types';
+import { TAdvancedType, TCalculationType, TOperatorKey, TOption, TShowCalculationTypeCondition, ValueTypes } from './types';
 export interface AdvancedPickerProps {
     label?: string;
+    valueType?: ValueTypes;
     disabled?: boolean;
     dateTypeKeysShow?: string[];
     showCalculationTypeCondition?: TShowCalculationTypeCondition;
     calculationTypeKeysShow?: TCalculationType[];
     defaultDateTypeKey?: string;
-    valueType?: string;
     option?: TOption;
     operatorKey?: TOperatorKey;
     type?: TAdvancedType;
@@ -19,7 +19,11 @@ export interface AdvancedPickerProps {
     disableBeforeDate?: string;
     errorMessage?: string;
     showTime?: boolean;
-    onUpdatedNewDate?: (newDate: any) => void;
+    timezone?: string;
+    onUpdatedNewDate?: ({ date, option }: {
+        date: string;
+        option: TOption;
+    }) => void;
     onApply?: ({ date, option }: {
         date: string;
         option: TOption;