diginet-core-ui 1.3.24 → 1.3.29

package/components/form-control/date-picker/index.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -12,10 +10,10 @@ import { date as moment, capitalizeSentenceCase, randomString, updatePosition }
 import CalendarComp from '../calendar';
 import ControlComp from '../control';
 import theme from '../../../theme/settings';
-import Icon from '../../../icons/';
-import { HelperText, InputBase, Label } from '../../index';
+import { ButtonIcon, HelperText, InputBase, Label } from '../../index';
 import Button from '../../button';
 import Tooltip from '../../tooltip';
+import { isValidDate } from '../calendar/function';
 const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   actionIconAt,
   clearAble,
@@ -95,33 +93,26 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         align-items : center;
         color       : inherit;
         display     : flex;
-        width       : 24px;
-        & span {
-            padding: 0;
-        }
         .${unique.icon} {
             cursor     : pointer;
             opacity    : 0;
-            transition : visibility 50ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 50ms;
-            visibility : hidden;
-            will-change: visibility, opacity;
-        }
-        .${unique.icon}-cancel {
-            transform : translateX(-100%);
+            transition : display 50ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 50ms;
+            display : none;
+            will-change: display, opacity;
         }
         .${unique.icon}-accept {
             opacity	  : 1;
-            visibility: visible;
+            display: block;
         }
     `;
   const hiddenStyle = {
     opacity: 0,
-    visibility: 'hidden'
+    display: 'none'
   };
   const activeStyle = {
     opacity: 1,
     pointerEvents: 'none',
-    visibility: 'visible'
+    display: 'block'
   };
   const pickerCSS = {
     backGr: 'background-color: transparent; inset: 0px; pointer-events: auto; position: fixed; z-index: 9001;',
@@ -162,11 +153,6 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       padding: '7px 8px'
     }
   };
-
-  const isValid = time => {
-    return !isNaN(Date.parse(typeof time !== 'date' ? new Date(time) : time));
-  };
-
   const handleDisplayValue = useCallback(value => {
     displayValue.current = new Date(value);
     setDisplayValue();
@@ -177,7 +163,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [focusedValue]);
 
   const setButtonState = () => {
-    if (!footerRef.current || focusedValue.current === undefined || !isValid(focusedValue.current)) return;
+    if (!footerRef.current || focusedValue.current === undefined || !isValidDate(focusedValue.current)) return;
     const isEqual = focusedValue.current === null || Date.parse(new Date(focusedValue.current)) === Date.parse(new Date(displayValue.current));
     footerRef.current.querySelector(`.${unique.cancel}`).disabled = isEqual;
     footerRef.current.querySelector(`.${unique.confirm}`).disabled = isEqual;
@@ -449,12 +435,14 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const iconComp = jsx("div", {
     css: iconAreaCSS,
     ref: iconRef
-  }, jsx(Icon, {
+  }, jsx(ButtonIcon, {
+    viewType: 'ghost',
     onClick: triggerFocus,
     className: `${unique.icon} ${unique.icon}-accept`,
     viewBox: true,
     name: 'CalendarNew'
-  }), jsx(Icon, {
+  }), jsx(ButtonIcon, {
+    viewType: 'ghost',
     onClick: onClear,
     className: `${unique.icon} ${unique.icon}-cancel`,
     viewBox: true,
@@ -466,17 +454,17 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     css: controlContainerCSS,
     className: unique.footer,
     ref: footerRef
-  }, jsx(Button, _extends({}, buttonProps, {
+  }, jsx(Button, { ...buttonProps,
     className: unique.cancel,
     onClick: onCancel
-  }), cancelText), jsx(Button, _extends({}, buttonProps, {
+  }, cancelText), jsx(Button, { ...buttonProps,
     color: 'info',
     className: unique.confirm,
     onClick: onConfirm
-  }), confirmText));
-  const isError = !!error && (!value || !isValid(value));
+  }, confirmText));
+  const isError = !!error && (!value || !isValidDate(value));
   useEffect(() => {
-    if (defaultValue && isValid(defaultValue)) {
+    if (defaultValue && isValidDate(defaultValue)) {
       handleDisplayValue(defaultValue);
       setInputValue({
         value: displayValue.current
@@ -488,7 +476,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     };
   }, []);
   useEffect(() => {
-    if (value && isValid(value)) {
+    if (value && isValidDate(value)) {
       handleFocusedValue(value);
       handleDisplayValue(value);
       setInputValue({
@@ -496,6 +484,14 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       });
       setButtonState();
       closePicker();
+    } else if (defaultValue && isValidDate(defaultValue)) {
+      handleFocusedValue(defaultValue);
+      handleDisplayValue(defaultValue);
+      setInputValue({
+        value: displayValue.current
+      });
+      setButtonState();
+      closePicker();
     } else {
       if (ipRef.current) ipRef.current.value = '';
 
@@ -552,22 +548,22 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       closePicker();
     };
   }, [actionIconAt, clearAble, controls, disabled, displayFormat, displayAnotherMonth, max, min, readOnly, returnFormat, viewType]);
-  return jsx(ControlComp, _extends({}, props, {
+  return jsx(ControlComp, { ...props,
     disabled: disabled,
     error: isError,
     ref: ref,
     style: style
-  }), !!label && jsx(Label, _extends({}, labelProps, {
+  }, !!label && jsx(Label, { ...labelProps,
     disabled: disabled,
     required: required
-  }), label), jsx(Tooltip, {
+  }, label), jsx(Tooltip, {
     title: (ipRef === null || ipRef === void 0 ? void 0 : (_ipRef$current = ipRef.current) === null || _ipRef$current === void 0 ? void 0 : _ipRef$current.clientWidth) < 200 ? ipRef === null || ipRef === void 0 ? void 0 : (_ipRef$current2 = ipRef.current) === null || _ipRef$current2 === void 0 ? void 0 : _ipRef$current2.value : '',
     style: {
       width: 'none'
     }
-  }, jsx(InputBase, _extends({
-    placeholder: placeholder
-  }, inputProps, {
+  }, jsx(InputBase, {
+    placeholder: placeholder,
+    ...inputProps,
     readOnly: true,
     ref: ipConRef,
     inputRef: ipRef,
@@ -582,9 +578,9 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: 'non-effect allow-disabled'
     },
     endIcon: endIcon
-  }))), isError && jsx(HelperText, _extends({}, errorProps, {
+  })), isError && jsx(HelperText, { ...errorProps,
     disabled: disabled
-  }), error));
+  }, error));
 }));
 DatePicker.defaultProps = {
   actionIconAt: 'end',
@@ -611,7 +607,7 @@ DatePicker.propTypes = {
   controls: PropTypes.bool,
 
   /** the default value of the component */
-  defaultValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+  defaultValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.object]),
 
   /** if 'true' the form control will be disabled */
   disabled: PropTypes.bool,
@@ -638,10 +634,10 @@ DatePicker.propTypes = {
   labelProps: PropTypes.object,
 
   /** min value of date picker */
-  min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+  min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.object]),
 
   /** max value of date picker */
-  max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+  max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.object]),
 
   /** a callback function when value input change */
   onChange: PropTypes.func,
@@ -668,7 +664,7 @@ DatePicker.propTypes = {
   textAlign: PropTypes.oneOf(['center', 'end', 'start']),
 
   /** value of the component */
-  value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.array]),
+  value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.array, PropTypes.object]),
 
   /** view type of the form control */
   viewType: PropTypes.oneOf(['outlined', 'underlined'])

package/components/form-control/date-range-picker/index.js

@@ -1,15 +1,12 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { useImperativeHandle, useRef, memo, forwardRef, useEffect, useState, useCallback } from 'react';
-import { Button, Divider, HelperText, InputBase, Label, Typography } from '../..';
+import { Button, ButtonIcon, Divider, HelperText, InputBase, Label, Typography } from '../..';
 import ControlComp from '../control';
 import PropTypes from 'prop-types';
 import theme from '../../../theme/settings';
-import Icon from '../../../icons';
 import { render } from 'react-dom';
 import { randomString, updatePosition, date as moment, capitalizeSentenceCase, isEqual } from '../../../utils';
 import { getGlobal } from '../../../global';
@@ -139,26 +136,23 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         .${unique.icon} {
             cursor     : pointer;
             opacity    : 0;
-            transition : visibility 50ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 50ms;
-            visibility : hidden;
-            will-change: visibility, opacity;
-        }
-        .${unique.icon}-cancel {
-            transform : translateX(-100%);
+            transition : display 50ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 50ms;
+            display : none;
+            will-change: display, opacity;
         }
         .${unique.icon}-accept {
             opacity	  : 1;
-            visibility: visible;
+            display: block;
         }
     `;
   const hiddenStyle = {
     opacity: 0,
-    visibility: 'hidden'
+    display: 'none'
   };
   const activeStyle = {
     opacity: 1,
     pointerEvents: 'none',
-    visibility: 'visible'
+    display: 'block'
   };
   const controlContainerCSS = css`
         display        : flex;
@@ -488,7 +482,8 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         "data-time": Date.parse(day),
         className: `${[unique.table.data, 'this_month', isToday(day), isActive(day), (max && max !== undefined || min && min !== undefined) && isLimit(day, new Date(max).setHours(0, 0, 0, 0), new Date(min).setHours(0, 0, 0, 0)), isBetween(Date.parse(day))].join(' ').trim().replace(/ +(?= )/g, '')}`,
         onClick: onDayClick
-      }, jsx(Typography, typographyProps(unique.day.day), i + 1)));
+      }, jsx(Typography, { ...typographyProps(unique.day.day)
+      }, i + 1)));
     }
     /**
      * days of next month
@@ -1121,12 +1116,14 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const iconComp = jsx("div", {
     css: iconAreaCSS,
     ref: iconRef
-  }, jsx(Icon, {
+  }, jsx(ButtonIcon, {
+    viewType: 'ghost',
     onClick: triggerFocus,
     className: `${unique.icon} ${unique.icon}-accept`,
     viewBox: true,
     name: 'CalendarNew'
-  }), jsx(Icon, {
+  }), jsx(ButtonIcon, {
+    viewType: 'ghost',
     onClick: onClear,
     className: `${unique.icon} ${unique.icon}-cancel`,
     viewBox: true,
@@ -1138,19 +1135,19 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     css: controlContainerCSS,
     className: unique.footer,
     ref: footerRef
-  }, jsx(Button, _extends({}, buttonProps, {
+  }, jsx(Button, { ...buttonProps,
     className: unique.close,
     onClick: () => onClickOutside({
       target: null
     })
-  }), closeText), jsx(Button, _extends({}, buttonProps, {
+  }, closeText), jsx(Button, { ...buttonProps,
     className: unique.cancel,
     onClick: onCancel
-  }), cancelText), jsx(Button, _extends({}, buttonProps, {
+  }, cancelText), jsx(Button, { ...buttonProps,
     color: 'info',
     className: unique.confirm,
     onClick: onConfirm
-  }), confirmText));
+  }, confirmText));
   const leftCalendarComp = jsx("div", {
     css: generateCalendarCSS(unique, false, false)
   }, renderNavigator(unique, navigatorFromRefs, e => setPrevTime(e, 'year', valueFr.current, 'from'), e => setPrevTime(e, 'month', valueFr.current, 'from'), e => setNextTime(e, 'month', valueFr.current, 'from'), e => setNextTime(e, 'year', valueFr.current, 'from')), jsx("div", {
@@ -1179,18 +1176,19 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ref: pickerRef
   }, jsx("div", {
     className: unique.wrapper
-  }, leftCalendarComp, jsx(Divider, dividerProps), rightCalendarComp), tooltipComp, !!controls && footerMemo);
-  return jsx(ControlComp, _extends({}, props, {
+  }, leftCalendarComp, jsx(Divider, { ...dividerProps
+  }), rightCalendarComp), tooltipComp, !!controls && footerMemo);
+  return jsx(ControlComp, { ...props,
     disabled: disabled,
     error: error,
     ref: ref,
     style: style
-  }), !!label && jsx(Label, _extends({}, labelProps, {
+  }, !!label && jsx(Label, { ...labelProps,
     disabled: disabled,
     required: required
-  }), label), jsx(InputBase, _extends({
-    placeholder: placeholder
-  }, inputProps, {
+  }, label), jsx(InputBase, {
+    placeholder: placeholder,
+    ...inputProps,
     readOnly: true,
     ref: ipConRef,
     inputRef: ipRef,
@@ -1206,9 +1204,9 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: 'non-effect allow-disabled'
     },
     endIcon: endIcon
-  })), !!error && jsx(HelperText, _extends({}, errorProps, {
+  }), !!error && jsx(HelperText, { ...errorProps,
     disabled: disabled
-  }), error));
+  }, error));
 }));
 DateRangePickerV2.defaultProps = {
   actionIconAt: 'end',