diginet-core-ui 1.4.51-beta.0 → 1.4.51-beta.2

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

@@ -7,7 +7,7 @@ import locale from "../../../locale";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { render } from 'react-dom';
-import { bgColor, borderRadius4px, cursorPointer, displayBlock, displayFlex, displayNone, flexCol, flexRow, invisible, justifyEnd, left, parseHeight, parseMaxWidth, parseMinWidth, pointerEventsNone, positionFixed, shadowLarge, textCenter, top, userSelectNone, whiteSpaceNoWrap, z } from "../../../styles/general";
+import { bgColor, borderRadius4px, cursorPointer, displayBlock, displayFlex, displayNone, flexCol, flexRow, invisible, justifyBetween, justifyEnd, left, parseHeight, parseMaxWidth, parseMinWidth, pointerEventsNone, positionFixed, shadowLarge, textCenter, top, userSelectNone, whiteSpaceNoWrap, z } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import { capitalizeSentenceCase, classNames, isEqual, date as moment, randomString, updatePosition } from "../../../utils";
 import { generateCalendarCSS, onUpdateNavigator, renderHeader, renderNavigator } from "../calendar/function";
@@ -128,6 +128,7 @@ const DateRangePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, refe
   const [, setValueFr] = useState(Date.now());
   const [, setValueTo] = useState(Date.now());
   const [, setSelected] = useState(Date.now());
+  const [focusBtn, setFocusBtn] = useState('today');
   const [valueState, setValueState] = useState();
   const navigatorFromRefs = {
     doubleLeft: useRef(null),
@@ -148,7 +149,13 @@ const DateRangePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, refe
   const cancelText = getGlobal(['cancel']);
   const confirmText = getGlobal(['confirm']);
   const unitText = getGlobal([unitCount]);
+  const todayText = getGlobal(['today']);
+  const yesterdayText = getGlobal(['yesterday']);
+  const thisWeekText = getGlobal(['thisWeek']);
+  const thisMonthText = getGlobal(['thisMonth']);
   const _ControlContainerCSS = ControlContainerCSS(theme);
+  const _FooterContainerCSS = FooterContainerCSS(theme);
+  const _DateOptionsCSS = DateOptionsCSS(theme);
   const updateValues = useCallback(v => {
     values.current = v;
     setValues();
@@ -761,6 +768,46 @@ const DateRangePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, refe
     !!onChange && onChange(e);
     onSwap(true);
   };
+  const onClickPresetDate = type => {
+    if (!type) return;
+    setFocusBtn(type);
+    let value = [];
+    const currentDay = new Date();
+    switch (type) {
+      case 'today':
+        value = [new Date(Date.now() - 25200000).valueOf()];
+        break;
+      case 'yesterday':
+        {
+          const yesterday = new Date(Date.now() - 86400000 - 25200000);
+          value = [new Date(Date.now() - 86400000 - 25200000).valueOf()];
+          valueFr.current = yesterday;
+          break;
+        }
+      case 'thisWeek':
+        {
+          const first = currentDay.getDate() - currentDay.getDay() + 1; // First day is the day of the month - the day of the week
+          const last = first + 6; // last day is the first day + 6
+          const firstday = new Date(currentDay.setDate(first)).setHours(0, 0, 0).valueOf();
+          const lastday = new Date(currentDay.setDate(last)).setHours(0, 0, 0).valueOf();
+          value = [firstday, lastday];
+          break;
+        }
+      case 'thisMonth':
+        {
+          let firstday = new Date(currentDay.getFullYear(), currentDay.getMonth(), 1).valueOf();
+          let lastday = new Date(currentDay.getFullYear(), currentDay.getMonth() + 1, 0).valueOf();
+          value = [firstday, lastday];
+          break;
+        }
+      default:
+        break;
+    }
+    updateValues(value);
+    updateSelected(countDay(values.current));
+    renderPicker();
+    controls ? setButtonState() : onChangeValue(values.current);
+  };
   useEffect(() => {
     update(defaultValue);
     return () => {
@@ -768,9 +815,11 @@ const DateRangePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, refe
     };
   }, []);
   useEffect(() => {
-    if (value) {
+    if (value && value[0] && value[1]) {
       update(value);
       closePicker();
+    } else {
+      ipRef.current.value = '';
     }
   }, [value]);
   useEffect(() => {
@@ -856,6 +905,50 @@ const DateRangePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, refe
   const endIcon = actionIconAt === 'end' && iconComp;
   const startIcon = actionIconAt === 'start' && iconComp;
   const footerMemo = jsx("div", {
+    css: _FooterContainerCSS
+  }, jsx("div", {
+    css: _DateOptionsCSS
+  }, jsx(Button, {
+    size: "medium",
+    labelProps: {
+      type: 'h4',
+      style: {
+        textTransform: 'initial'
+      }
+    },
+    onClick: () => onClickPresetDate('today'),
+    color: focusBtn === 'today' && 'primary'
+  }, todayText), jsx(Button, {
+    size: "medium",
+    labelProps: {
+      type: 'h4',
+      style: {
+        textTransform: 'initial'
+      }
+    },
+    onClick: () => onClickPresetDate('yesterday'),
+    color: focusBtn === 'yesterday' && 'primary'
+  }, yesterdayText), jsx(Button, {
+    size: "medium",
+    labelProps: {
+      type: 'h4',
+      style: {
+        textTransform: 'initial'
+      }
+    },
+    onClick: () => onClickPresetDate('thisWeek'),
+    color: focusBtn === 'thisWeek' && 'primary'
+  }, thisWeekText), jsx(Button, {
+    size: "medium",
+    labelProps: {
+      type: 'h4',
+      style: {
+        textTransform: 'initial'
+      }
+    },
+    onClick: () => onClickPresetDate('thisMonth'),
+    color: focusBtn === 'thisMonth' && 'primary'
+  }, thisMonthText)), jsx("div", {
     css: _ControlContainerCSS,
     className: unique.footer,
     ref: footerRef
@@ -874,7 +967,7 @@ const DateRangePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, refe
     color: 'info',
     className: unique.confirm,
     onClick: onConfirm
-  }, confirmText));
+  }, confirmText)));
   const leftCalendarComp = jsx("div", {
     css: generateCalendarCSS(unique, false, false, theme)
   }, 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", {
@@ -1029,6 +1122,16 @@ const ControlContainerCSS = ({
     ${justifyEnd};
     margin: ${spacing([0, 4, 4])};
 `;
+const FooterContainerCSS = () => css`
+    ${displayFlex};
+    ${justifyBetween};
+`;
+const DateOptionsCSS = ({
+  spacing
+}) => css`
+    ${displayFlex};
+    padding-left: ${spacing(4)}px;
+`;
 const pickerCSS = {
   backGr: ({
     zIndex

package/global/index.js

@@ -45,6 +45,11 @@ const globalObject = {
     label: 'Thời gian',
     weekdaysLong: ['Hai', 'Ba', 'Tư', 'Năm', 'Sáu', 'Bảy', 'CN'],
     weekdaysShort: ['H', 'B', 'T', 'N', 'S', 'B', 'C'],
+    // Daterange Picker
+    today: 'Hôm nay',
+    yesterday: 'Hôm qua',
+    thisWeek: 'Tuần này',
+    thisMonth: 'Tháng này',
     // Time Picker
     months: {
       full: ['tháng 01', 'tháng 02', 'tháng 03', 'tháng 04', 'tháng 05', 'tháng 06', 'tháng 07', 'tháng 08', 'tháng 09', 'tháng 10', 'tháng 11', 'tháng 12'],
@@ -120,6 +125,11 @@ const globalObject = {
     label: 'Time',
     weekdaysLong: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
     weekdaysShort: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
+    // Daterange Picker
+    today: 'Today',
+    yesterday: 'Yesterday',
+    thisWeek: 'This week',
+    thisMonth: 'This month',
     // Time Picker
     months: {
       full: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.4.51-beta.0",
+  "version": "1.4.51-beta.2",
   "description": "",
   "main": "index.js",
   "license": "UNLICENSED",