diginet-core-ui 1.4.50-beta.4 → 1.4.51

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/components/form-control/dropdown-box/index.js

@@ -1,15 +1,13 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
-import { ButtonIcon, InputBase, Label, Popover, PopoverBody, HelperText } from "../..";
+import { ButtonIcon, InputBase, Label, Popover, PopoverBody } from "../..";
 import PropTypes from 'prop-types';
-import { Fragment, forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, useMemo } from 'react';
+import { Fragment, forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
 import { animation, borderColor, displayBlock, overflowHidden, parseHeight, parseMinWidth, positionRelative, scaleX } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import useThemeProps from "../../../theme/utils/useThemeProps";
 import { classNames, getProp } from "../../../utils";
-const regexBetween = /[^{}]+(?=})/g;
-const regexInclude = /{|}/g;
 const DropdownBox = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
@@ -24,14 +22,10 @@ const DropdownBox = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, referenc
   });
   const {
     action = {},
-    allowInput,
     bgColor: bgColorProp,
     children,
     className,
     delayOnInput,
-    disabled,
-    displayExpr: displayExprProp,
-    error,
     endIcon,
     inputProps,
     inputRef,
@@ -45,19 +39,10 @@ const DropdownBox = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, referenc
     placeholder,
     startIcon,
     style,
-    value: valueProps,
-    valueExpr,
-    viewType,
-    helperTextProps
+    value,
+    viewType
   } = props;
-  let displayExpr = displayExprProp;
   const bgColor = typeof bgColorProp === 'string' ? getProp(colors, bgColorProp, bgColorProp) : bgColorProp;
-  const ErrorView = useMemo(() => {
-    return error ? jsx(HelperText, {
-      ...helperTextProps,
-      disabled: disabled
-    }, error) : null;
-  }, [disabled, error, helperTextProps]);
   const ref = useRef(null);
   const dropdownBoxRef = useRef(null);
   const timer = useRef(null);
@@ -100,28 +85,6 @@ const DropdownBox = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, referenc
       onClosed === null || onClosed === void 0 ? void 0 : onClosed();
     }
   };
-
-  /**
-   * Chuyển đổi data thành giá trị cần hiện thị dựa vào displayExpr [string, string object {field} - {field}], renderSelectedItem, displayExpr, valueExpr
-   * @param data {object} rowData of dataSource
-   * @return {string}
-   */
-  const displayValue = data => {
-    let text = '';
-    if (data || data === 0) {
-      displayExpr = displayExpr || valueExpr;
-      let mask = data === null || data === void 0 ? void 0 : data[displayExpr];
-      // convert {id} - {name} to {<data[id]>} - {<data[name]>}
-      if (!mask && regexBetween.test(displayExpr)) {
-        var _displayExpr;
-        mask = (_displayExpr = displayExpr) === null || _displayExpr === void 0 ? void 0 : _displayExpr.replace(regexBetween, _ => (data === null || data === void 0 ? void 0 : data[_]) || '');
-      } else if (!mask) {
-        mask = typeof data !== 'object' ? data : '';
-      }
-      text = mask.toString().replace(regexInclude, '');
-    }
-    return text;
-  };
   useLayoutEffect(() => {
     if (ref.current) {
       const {
@@ -167,17 +130,15 @@ const DropdownBox = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, referenc
       onClick: openOnClickAt === 'icon' ? onTriggerDropdown : null
     }) : null;
   };
-  const value = displayValue(valueProps);
   return jsx(Fragment, null, jsx("div", {
     ref: ref,
     css: _DropdownBoxRootCSS,
-    className: classNames('DGN-UI-Dropdown-Box', className, error && 'error'),
+    className: classNames('DGN-UI-Dropdown-Box', className),
     style: style
   }, label ? jsx(Label, {
     ...labelProps
   }, label) : null, jsx(InputBase, {
     ...inputProps,
-    readOnly: !allowInput,
     style: inputStyle,
     viewType: viewType,
     inputRef: inputRef,
@@ -196,7 +157,7 @@ const DropdownBox = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, referenc
     anchor: ref.current,
     width: popoverWidth,
     onClose: closeDropdownBox
-  }, jsx(PopoverBody, null, children)), ErrorView);
+  }, jsx(PopoverBody, null, children)));
 }));
 const DropdownBoxRootCSS = (bgColorProp, {
   colors
@@ -205,17 +166,6 @@ const DropdownBoxRootCSS = (bgColorProp, {
     ${positionRelative};
     ${parseMinWidth(150)};
     ${parseHeight('max-content')};
-    &.error {
-        .DGN-UI-InputBase {
-            ${borderColor(getProp(colors, 'semantic/danger'))};
-            &::before {
-                ${borderColor(getProp(colors, 'semantic/danger'))};
-            }
-            &::after {
-                ${borderColor(getProp(colors, 'semantic/danger'))};
-            }
-        }
-    }
     .DGN-UI-InputBase {
         background: ${bgColorProp ? bgColorProp === true ? getProp(colors, 'fill/disabled') : bgColorProp : 'inherit'} !important;
         ${openState && css`
@@ -233,6 +183,20 @@ const DropdownBoxCSS = ({
     margin-top: ${spacing([1])};
     ${overflowHidden};
 `;
+
+// DropdownBox.defaultProps = {
+//     className: '',
+//     label: '',
+//     placeholder: '',
+//     startIcon: 'Search',
+//     endIcon: 'ArrowDown',
+//     openOnClickAt: 'icon',
+//     viewType: 'underlined',
+//     inputProps: {},
+//     delayOnInput: 700,
+//     zIndex: zIndexCORE(1),
+// };
+
 DropdownBox.propTypes = {
   /** class for dropdown */
   className: PropTypes.string,
@@ -269,12 +233,6 @@ DropdownBox.propTypes = {
   /** the function will run after open */
   onOpened: PropTypes.func,
   /** the function will run after close */
-  onClosed: PropTypes.func,
-  /** Error message displayed below the input. */
-  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  /** If `true`, the component is disabled. */
-  disabled: PropTypes.bool,
-  /** If `true`, the input is enable. */
-  allowInput: PropTypes.bool
+  onClosed: PropTypes.func
 };
 export default DropdownBox;

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,78 +1,44 @@
-{
-  "name": "diginet-core-ui",
-  "version": "1.4.50-beta.4",
-  "description": "",
-  "main": "index.js",
-  "license": "UNLICENSED",
-  "scripts": {
-    "start": "npm-run-all --parallel start-sb eslint-test",
-    "start-sb": "start-storybook -p 9050",
-    "build-storybook": "build-storybook -c .storybook -s src",
-    "build": "run-script-os",
-    "build:windows": "rimraf dist && mkdirp dist/components && npm run compile && sass --style=compressed src/scss:dist/css && xcopy src\\\\assets dist\\\\assets\\ /e /y",
-    "build:darwin:linux:default": "rm -rf dist && npm run compile && sass --style=compressed src/scss:dist/css && cp -rf src/assets dist/assets",
-    "compile": "babel src --out-dir dist --ignore **/*.stories.js",
-    "pack": "npm run build && cp *.md dist/ && npm run version:bump --silent && npm run version:add --silent && cd dist && npm pack",
-    "production-keep-version": "npm run build && cp *.md dist/ && cp package.json dist/ && cd dist && npm publish",
-    "beta": "npm run build && cp *.md dist/ && cp package.json dist/ && cd dist && npm publish --tag beta",
-    "production": "npm run build && cp *.md dist/ && npm run version:bump --silent && npm run version:add --silent && cd dist && npm publish",
-    "version:add": "run-script-os",
-    "version:add:windows": "cat package.json.tmp | sed \"s/0.0.0/%npm_package_version%/g\" > dist/package.json",
-    "version:add:darwin:linux:default": "VERSION=$(npm run version:extract --silent) && cat package.json.tmp | sed \"s/0.0.0/${VERSION}/g\" > dist/package.json",
-    "version:bump": "npm version patch --no-git-tag-version --silent",
-    "version:extract": "cat package.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]'",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "lint": "eslint --fix --config .eslintrc.js \"**/*.js\"",
-    "eslint-test": "onchange \"src/**/*.{js,jsx,json}\" -- eslint . --fix",
-    "freshtall": "npm cache clean --force && rm -rf node_modules && rm -f package-lock.json && npm install",
-    "test-storybook": "test-storybook --url http://localhost:9050",
-    "preinstall": "echo {} > package-lock.json"
-  },
-  "dependencies": {
-    "@emotion/core": "^10.0.35",
-    "@emotion/css": "^11.11.0",
-    "@emotion/react": "^11.10.6",
-    "babel-plugin-module-resolver": "^4.1.0",
-    "date-fns": "^2.30.0",
-    "prop-types": "^15.7.2"
-  },
-  "lint-staged": {
-    "*/**/*.{js,jsx,json}": [
-      "prettier --write",
-      "git add"
-    ]
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.14.3",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/plugin-proposal-logical-assignment-operators": "^7.16.0",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.0",
-    "@babel/plugin-proposal-optional-chaining": "^7.14.2",
-    "@babel/plugin-proposal-private-methods": "^7.18.6",
-    "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
-    "@babel/preset-react": "^7.13.13",
-    "@storybook/addon-actions": "6.2.9",
-    "@storybook/addon-essentials": "6.2.9",
-    "@storybook/addon-links": "6.2.9",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/react": "6.2.9",
-    "@storybook/test-runner": "^0.7.1",
-    "autoprefixer": "^10.3.1",
-    "babel-loader": "^8.2.2",
-    "eslint": "^8.4.1",
-    "eslint-plugin-react": "^7.27.1",
-    "eslint-plugin-regex": "^1.10.0",
-    "husky": "^7.0.4",
-    "jest": "^27.5.1",
-    "lint-staged": "^12.1.2",
-    "mkdirp": "^1.0.4",
-    "npm-run-all": "^4.1.5",
-    "onchange": "^7.1.0",
-    "postcss-flexbugs-fixes": "^5.0.2",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "rimraf": "^3.0.2",
-    "run-script-os": "^1.1.6",
-    "sass": "1.58.3"
-  }
-}
+{
+  "name": "diginet-core-ui",
+  "version": "1.4.51",
+  "description": "The DigiNet core ui",
+  "homepage": "https://diginet.com.vn",
+  "main": "index.js",
+  "scripts": {
+    "start-js": "react-scripts start --max_old_space_size=4096",
+    "start": "npx npm-run-all -p start-js",
+    "build": "GENERATE_SOURCEMAP=false && react-scripts build --env=production --max_old_space_size=8192",
+    "eject": "react-scripts eject",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "@emotion/core": "^10.0.35",
+    "prop-types": "^15.7.2",
+    "@emotion/css": "^11.11.0",
+    "@emotion/react": "^11.10.6"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://diginetvn@bitbucket.org/diginetvn/diginet-core-ui.git"
+  },
+  "keywords": [
+    "core ui",
+    "diginet"
+  ],
+  "author": "rocachien",
+  "contributors": [
+    {
+      "name": "Chien Do",
+      "email": "rocachien@gmail.com"
+    },
+    {
+      "name": "Nhat Tran",
+      "email": "tranminhnhat1005@gmail.com"
+    },
+    {
+      "name": "Thuan Nguyen",
+      "email": "nt.thuan.hutech@gmail.com"
+    }
+  ],
+  "license": "MIT"
+}

package/readme.md

@@ -42,6 +42,13 @@ npm test
 
 ## Changelog
 
+## 1.4.51
+- \[Changed\]: Treeview - Treeview keeps the search bar visible while scrolling
+- \[Changed\]: DateRangePicker -  Quick-selection in DateRangePicker
+- \[Fixed\]: Dropdown – Dropdown data lost in the Filter bar on the Web
+- \[Fixed\]: DateRangePicker – When clearing the value in DateRangePicker CORE, the UI still displays the old value.
+- \[Fixed\]: NumberInput  – NumberInput Core when changing 'decimalDigit'
+
 ## 1.4.50
 - \[Added\]: Icon – Add IconMenu MHRP39N0025, MHRP39N0027, MHRP39N0028 
 - \[Added\]: Attachment – Add HEIF support to getFileType in Attachment