diginet-core-ui 1.3.90-beta.3 → 1.3.90-beta.5

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

@@ -1,35 +1,28 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-
 import { css, jsx } from '@emotion/core';
+import { Button, ButtonIcon, HelperText, InputBase, Label, Tooltip } from "../..";
+import { getGlobal } from "../../../global";
+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 { getGlobal } from "../../../global";
-import { date as moment, capitalizeSentenceCase, randomString, updatePosition } from "../../../utils";
+import { bgColor, borderRadius4px, cursorPointer, displayBlock, displayFlex, displayNone, flexRow, itemsCenter, justifyEnd, left, mg, parseMaxWidth, parseMinWidth, parseWidthHeight, positionFixed, scale, top, z } from "../../../styles/general";
+import { useTheme } from "../../../theme";
+import { capitalizeSentenceCase, date as moment, randomString, updatePosition } from "../../../utils";
 import CalendarComp from "../calendar";
-import ControlComp from "../control";
-import { ButtonIcon, HelperText, InputBase, Label } from "../../index";
-import Button from "../../button";
-import Tooltip from "../../tooltip";
 import { isValidDate } from "../calendar/function";
-import { itemsCenter, borderRadius4px, cursorPointer, displayBlock, displayNone, flexRow, justifyEnd, parseWidth, positionFixed } from "../../../styles/general";
-import theme from "../../../theme/settings";
+import ControlComp from "../control";
 const {
-  colors: {
-    system: {
-      white
-    }
-  },
-  spacing,
   zIndex: zIndexCORE
-} = theme;
+} = useTheme();
 const confirmText = getGlobal(['confirm']);
 const cancelText = getGlobal(['cancel']);
 const formatValue = (value, format, utc = false) => {
   return moment(value).format(format, utc);
 };
 const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   actionIconAt,
   clearAble,
   controls,
@@ -153,16 +146,6 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
     return PickerCSS.picker(style, left + 400 > innerWidth ? innerWidth - 400 : left, width).styles;
   };
-  // const createPortal = () => {
-  //     let portal = document.getElementById(unique.portal);
-  //     if (!portal) {
-  //         portal = document.createElement('div');
-  //         portal.id = unique.portal;
-  //         document.body.appendChild(portal);
-  //     }
-  //     portal.style.cssText = pickerCSS.portal;
-  //     return portal;
-  // };
   const createBackground = () => {
     let background = document.getElementById(unique.backGr);
     if (!background) {
@@ -256,26 +239,6 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     // iconRef.current && onSwap(true);
     ipRef.current && ipRef.current.blur();
   };
-  // const updatePicker = () => {
-  //     const portal = document.body.querySelector(`#${unique.portal}`);
-  //     if (!portal) return;
-  //     const backGr = portal.querySelector(`#${unique.backGr}`);
-  //     if (!backGr) return;
-  //     const node = portal.querySelector(`#${unique.picker}`);
-  //     if (!node || !node.firstChild) return;
-  //     unmountComponentAtNode(node);
-  //     render(
-  //         <CalendarComp
-  //             ref={calRef}
-  //             actions={footerMemo}
-  //             defaultValue={displayValue.current}
-  //             value={focusedValue.current}
-  //             max={max}
-  //             min={min}
-  //             displayAnotherMonth={displayAnotherMonth}
-  //             onClick={onCalendarClick}
-  //         />, node);
-  // };
   const onSwap = open => {
     const t = iconRef.current.childNodes[+open];
     if (open) {
@@ -448,6 +411,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     const _instance = {
+      ...action,
       get: () => {
         return ref.current;
       },
@@ -479,11 +443,11 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     error: isError,
     ref: ref,
     style: style
-  }, !!label && jsx(Label, {
+  }, label ? jsx(Label, {
     disabled: disabled,
     required: required,
     ...labelProps
-  }, label), jsx(Tooltip, {
+  }, label) : null, 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 : ''
   }, jsx(InputBase, {
     inputProps: {
@@ -502,7 +466,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     endIcon: endIcon,
     onKeyDown: e => e.preventDefault(),
     readOnly: true
-  })), isError && jsx(HelperText, {
+  })), isError ? jsx(HelperText, {
     ...errorProps,
     style: {
       minHeight: 16,
@@ -510,7 +474,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       top: '100%'
     },
     disabled: disabled
-  }, error));
+  }, error) : null);
 }));
 const hiddenStyle = {
   opacity: 0,
@@ -522,6 +486,7 @@ const activeStyle = {
   display: 'block'
 };
 const IconAreaCSS = unique => css`
+    ${displayFlex};
     ${flexRow};
     ${itemsCenter};
     color: inherit;
@@ -538,27 +503,28 @@ const IconAreaCSS = unique => css`
     }
 `;
 const ControlContainerCSS = css`
+    ${displayFlex};
     ${flexRow};
     ${justifyEnd};
-    margin: ${spacing([0, 4, 4])};
+    ${mg([0, 4, 4])};
 `;
 const PickerCSS = {
   backGr: `background-color: transparent; inset: 0px; pointer-events: auto; position: fixed; z-index: ${zIndexCORE(1)};`,
-  picker: (position, left, width) => css`
+  picker: (position, positionLeft, width) => css`
         ${positionFixed};
         ${borderRadius4px};
-        ${parseWidth(width)};
-        background-color: ${white};
-        height: max-content;
-        left: ${left}px;
-        top: ${position.top}px;
+        ${bgColor('system.white')};
+        ${parseWidthHeight(width, 'max-content')};
+        ${parseMinWidth(window.innerWidth <= 599 ? 280 : 314)};
+        ${parseMaxWidth(400)};
+        ${scale(0)};
+        ${left(positionLeft)};
+        ${top(position.top)};
         transform-origin: ${position.transformOrigin};
-        max-width: 400px;
-        min-width: ${window.innerWidth <= 599 ? 280 : 314}px;
         opacity: 0;
         transform: scale(0);
         transition: opacity 120ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-        z-index: ${zIndexCORE(2)};
+        ${z(2)};
     `,
   active: {
     opacity: 1,
@@ -576,12 +542,12 @@ DatePicker.defaultProps = {
   controls: false,
   disabled: false,
   displayAnotherMonth: true,
-  displayFormat: 'dddd, DD MMMM YYYY',
+  displayFormat: locale.get() === 'vi' ? 'DD/MM/YYYY' : 'MM/DD/YYYY',
   pressESCToClose: true,
   readOnly: false,
   required: false,
-  textAlign: 'start',
   returnFormat: 'YYYY-MM-DD',
+  textAlign: 'start',
   viewType: 'underlined'
 };
 DatePicker.propTypes = {

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

@@ -7,17 +7,12 @@ 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 { itemsCenter, borderRadius4px, cursorPointer, displayBlock, displayNone, flexCol, flexRow, justifyEnd, parseHeight, parseMaxWidth, parseMinWidth, parseWidth, parseWidthHeight, pointerEventsNone, positionFixed, textCenter, userSelectNone, whiteSpaceNoWrap } from "../../../styles/general";
+import { bgColor, borderRadius4px, cursorPointer, displayBlock, displayFlex, displayNone, flexCol, flexRow, justifyEnd, left, mg, parseHeight, parseMaxWidth, parseMinWidth, parseWidthHeight, pd, pointerEventsNone, positionFixed, textCenter, top, userSelectNone, whiteSpaceNoWrap } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import { capitalizeSentenceCase, classNames, date as moment, isEqual, randomString, updatePosition } from "../../../utils";
 import { generateCalendarCSS, onUpdateNavigator, renderHeader, renderNavigator } from "../calendar/function";
 import ControlComp from "../control";
 const {
-  colors: {
-    system: {
-      white: systemWhite
-    }
-  },
   boxShadows: {
     large: boxShadowsLarge
   },
@@ -811,32 +806,11 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (ipRef.current.value !== '') {
       update(values.current);
     }
-    // if (disabled) {
-    //     iconRef.current.childNodes[0].style.pointerEvents = 'none';
-    //     closePicker();
-    // } else if (!readOnly) {
-    //     ipRef.current.addEventListener('focus', onInputFocus);
-    // } else {
-    //     iconRef.current.childNodes[0].style.pointerEvents = 'none';
-    //     closePicker();
-    // }
-
     if (isEnable) {
-      // iconRef.current.childNodes[0].style.pointerEvents = 'none';
       closePicker();
     }
     return () => {
       if (!iconRef.current || !ipRef.current) return;
-      // if (disabled) {
-      //     iconRef.current.childNodes[0].style.pointerEvents = null;
-      // } else if (!readOnly) {
-      //     ipRef.current.removeEventListener('focus', onInputFocus);
-      // } else {
-      //     iconRef.current.childNodes[0].style.pointerEvents = null;
-      // }
-      // if (isEnable) {
-      //     iconRef.current.childNodes[0].style.pointerEvents = null;
-      // }
       closePicker();
     };
   }, [actionIconAt, clearAble, controls, disabled, displayFormat, max, min, pressESCToClose, readOnly, startFromZero, unitCount, viewType]);
@@ -861,7 +835,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onClick: triggerFocus,
     className: `${unique.icon} ${unique.icon}-accept`,
     viewBox: true,
-    name: 'CalendarNew'
+    name: 'Calendar'
   }), jsx(ButtonIcon, {
     viewType: 'ghost',
     onClick: onClear,
@@ -911,7 +885,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     className: unique.tooltip,
     ref: tooltipRef
   }, jsx(Typography, {
-    color: systemWhite,
+    color: 'system.white',
     type: 'p2'
   }));
   const pickerComp = jsx("div", {
@@ -1021,13 +995,6 @@ const buttonProps = {
   }
 };
 const IconAreaCSS = css`
-    ${flexRow};
-    ${itemsCenter};
-    ${parseWidth(24)};
-    color: inherit;
-    & span {
-        padding: 0;
-    }
     .${unique.icon} {
         ${displayNone};
         ${cursorPointer};
@@ -1041,9 +1008,10 @@ const IconAreaCSS = css`
     }
 `;
 const ControlContainerCSS = css`
+    ${displayFlex};
     ${flexRow};
     ${justifyEnd};
-    margin: ${spacing([0, 4, 4])};
+    ${mg([0, 4, 4])};
 `;
 const pickerCSS = {
   backGr: `
@@ -1052,11 +1020,13 @@ const pickerCSS = {
         position: fixed; 
         z-index: ${zIndexCORE(1)};`,
   container: css`
+        ${displayFlex};
         ${flexCol};
         ${borderRadius4px};
-        background-color: ${systemWhite};
+        ${bgColor('system.white')};
         box-shadow: ${boxShadowsLarge};
         .${unique.wrapper} {
+            ${displayFlex};
             ${flexRow};
             ${parseMinWidth(633)};
         }
@@ -1069,8 +1039,8 @@ const pickerCSS = {
             ${whiteSpaceNoWrap};
             ${parseHeight(18)};
             ${parseMinWidth(65)};
-            background-color: rgba(21, 26, 48, 0.9);
-            padding: ${spacing([0.75, 1.5])};
+            ${bgColor('rgba(21, 26, 48, 0.9)')};
+            ${pd([0.75, 1.5])};
             transition: left 0.05s ease-in, top 0.05s ease-in;
             vertical-align: middle;
             visibility: hidden;
@@ -1080,7 +1050,8 @@ const pickerCSS = {
         @media only screen and (max-width: 599px) {
             ${parseMaxWidth(400)};
             .${unique.wrapper} {
-                flex-direction: column;
+                ${displayFlex};
+                ${flexCol};
                 ${parseMinWidth(260)};
             }
             .${unique.divider} {
@@ -1096,8 +1067,8 @@ const pickerCSS = {
         ${parseWidthHeight(width, 'max-content')};
         ${parseMinWidth(window.innerWidth <= 633 ? 300 : 633)};
         ${parseMaxWidth(805)};
-        top: ${position.top}px;
-        left: ${position.left}px;
+        ${top(position.top)};
+        ${left(position.left)};
         opacity: 0;
         transform: scale(0);
         transform-origin: ${position.transformOrigin};
@@ -1138,8 +1109,6 @@ DateRangePicker.propTypes = {
   clearAble: PropTypes.bool,
   /** If `true`, the calendar will have a footer controls. */
   controls: PropTypes.bool,
-  /** The count unit when select. */
-  unitCount: PropTypes.oneOf(['day', 'night']),
   /** Default value of the component. */
   defaultValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.instanceOf(Date)), PropTypes.arrayOf(PropTypes.string)]),
   /** If `true`, the component is disabled. */
@@ -1158,10 +1127,10 @@ DateRangePicker.propTypes = {
   label: PropTypes.string,
   /** [Props](https://core.diginet.com.vn/ui/?path=/docs/form-control-text-label--simple) of label. */
   labelProps: PropTypes.object,
-  /** Min value of date picker. */
-  min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
   /** Max value of date picker. */
   max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+  /** Min value of date picker. */
+  min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
   /** Callback fired when the value is changed. */
   onChange: PropTypes.func,
   /** The short hint displayed in the input before the user enters a value. */
@@ -1182,6 +1151,8 @@ DateRangePicker.propTypes = {
   style: PropTypes.object,
   /** Text align of the input. */
   textAlign: PropTypes.oneOf(['center', 'end', 'start']),
+  /** The count unit when select. */
+  unitCount: PropTypes.oneOf(['day', 'night']),
   /** The value of the input element, required for a controlled component. String must be [Date string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date): YYYY/MM/DD, MM/DD/YYYY,...*/
   value: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string])),
   /** The variant to use. */

package/components/typography/index.js

@@ -2,7 +2,6 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { Popover } from "./..";
-import OptionWrapper from "../others/option-wrapper";
 import PropTypes from 'prop-types';
 import { forwardRef, Fragment, memo, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { breakAll, breakWord, cursorPointer, displayBlock, displayInlineBlock, italic, overflowHidden, parseHeight, parseMaxWidth, parseMinWidth, pd, positionRelative, textCapitalize, textCenter, textColor, textLineThrough, textLowercase, textunderline, textUppercase, whiteSpaceBreakSpaces } from "../../styles/general";
@@ -184,5 +183,4 @@ Typography.propTypes = {
   /** Applies the theme typography styles. */
   type: PropTypes.oneOf(arrTypeTypography)
 };
-export { Typography };
-export default OptionWrapper(Typography);
+export default Typography;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.90-beta.3",
+  "version": "1.3.90-beta.5",
   "description": "",
   "main": "index.js",
   "license": "UNLICENSED",