@antscorp/antsomi-ui 1.3.5-beta.710 → 1.3.5-beta.711

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

@@ -12,6 +12,11 @@ export interface AdvancedPickerProps {
     option?: TOption;
     operatorKey?: TOperatorKey;
     type?: TAdvancedType;
+    /**
+     * This is uncontrolled value (default value) and will not update if change outside
+     * only update when re-render component
+     * use ref.forceUpdate() to control value inside
+     */
     date?: string;
     format?: string;
     formatInputDisplay?: string;
@@ -58,4 +63,7 @@ export interface AdvancedPickerProps {
         option: TOption;
     }) => void;
 }
-export declare const AdvancedPicker: React.FC<AdvancedPickerProps>;
+export interface AdvancedPickerHandle {
+    forceUpdate: (date: string) => void;
+}
+export declare const AdvancedPicker: React.ForwardRefExoticComponent<AdvancedPickerProps & React.RefAttributes<AdvancedPickerHandle>>;

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

@@ -1,7 +1,7 @@
 var _a, _b;
 /* eslint-disable react/no-unused-prop-types */
 // Libraries
-import React, { useEffect, useMemo, useCallback, useState } from 'react';
+import React, { useEffect, useMemo, useCallback, useState, useImperativeHandle } from 'react';
 import { Tooltip, theme, DatePicker } from 'antd';
 import dayjs from 'dayjs';
 import clsx from 'clsx';
@@ -41,7 +41,7 @@ const isDisabledSpecificTime = (current, info, disabledTime, date) => {
 const PATH = '@antscorp/antsomi-ui/es/components/molecules/DatePicker/components/Advanced/DatePickerAdvanced.tsx';
 const { useToken } = theme;
 const { Text } = Typography;
-export const AdvancedPicker = props => {
+export const AdvancedPicker = React.forwardRef((props, componentRef) => {
     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, disabledTime, onUpdatedNewDate, onApply, } = props;
@@ -78,10 +78,16 @@ export const AdvancedPicker = props => {
         },
         date: dayjs().tz(timezone).format(format),
         dateDisplay: dayjs().tz(timezone).format(format),
-        // date: dayjs(propsDate).tz(timezone).format(format),
-        // dateDisplay: dayjs(propsDate).tz(timezone).format(format),
     });
     const { isOpen, option, date, dateDisplay } = state;
+    useImperativeHandle(componentRef, () => ({
+        forceUpdate(date) {
+            const newDate = dayjs(date, format, true).isValid()
+                ? dayjs(date, format).format(format)
+                : date;
+            setState(state => (Object.assign(Object.assign({}, state), { date: newDate, dateDisplay: newDate })));
+        },
+    }), [format]);
     const isShowFixed = option.dateType.value === 'fixed' || onlyShowFixed;
     const currDate = dayjs(date, format);
     const currWeek = currDate.isoWeek();
@@ -181,6 +187,9 @@ export const AdvancedPicker = props => {
                 let newDate = '';
                 if (newDateType) {
                     if (newDateType.value === 'fixed') {
+                        // newDate = dayjs(innerDate, format, true).isValid()
+                        //   ? dayjs(innerDate, format).format(format)
+                        //   : innerDate;
                         newDate = dayjs(propsDate, format, true).isValid()
                             ? dayjs(propsDate, format).format(format)
                             : propsDate;
@@ -430,7 +439,7 @@ export const AdvancedPicker = props => {
                         React.createElement(Divider, null),
                         timeFormat && valueType !== 'HOUR' && valueType !== 'MINUTE' ? (React.createElement(TimeLabel, { "$width": timeFormat.length * 30, "$isRangePicker": operatorKey === 'between', "$onlyShowFixed": onlyShowFixed },
                             ['HH', 'HHmm', 'HHmmss'].includes(timeFormat) ? React.createElement("span", null, "Hours") : null,
-                            ['HHmm', 'HHmmss', 'mm'].includes(timeFormat) ? React.createElement("span", null, "Minutes") : null,
+                            ['HHmm', 'HHmmss', 'mm'].includes(timeFormat) ? (React.createElement("span", null, "Minutes")) : null,
                             timeFormat === 'HHmmss' ? React.createElement("span", null, "Seconds") : null)) : null));
                 }, picker: getPickerRender(valueType), showTime: getTimePickerRender(valueType)
                     ? {
@@ -450,7 +459,7 @@ export const AdvancedPicker = props => {
                             pointerEvents: disabled ? 'none' : 'all',
                         }, onClick: () => toggleOpenDropdown() },
                         React.createElement(EventIcon, { width: 19, height: 19 })), style: Object.assign({ textOverflow: 'ellipsis' }, inputStyle), value: selectedDateTitle, status: errorMessage ? 'error' : '' }))))));
-};
+});
 AdvancedPicker.defaultProps = {
     label: '',
     type: ADVANCED_PICKER_TYPE.START_DATE.value,

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

@@ -1,3 +1,3 @@
 export { AdvancedPicker } from './AdvancedPicker';
-export type { AdvancedPickerProps } from './AdvancedPicker';
+export type { AdvancedPickerProps, AdvancedPickerHandle } from './AdvancedPicker';
 export type { TOption as TAdvancedPickerOption } from './types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.710",
+  "version": "1.3.5-beta.711",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -113,10 +113,8 @@
     "react-color": "2.19.3",
     "react-cookie": "^7.1.4",
     "react-custom-scrollbars": "^4.2.1",
-    "react-device-detect": "^2.2.3",
     "react-draggable": "^4.4.5",
     "react-frame-component": "^5.2.6",
-    "react-google-recaptcha": "^3.1.0",
     "react-helmet": "^6.1.0",
     "react-intersection-observer": "^9.10.3",
     "react-konva": "^18.2.10",