diginet-core-ui 1.3.43 → 1.3.45

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

@@ -9,15 +9,28 @@ import { getGlobal } from '../../../global';
 import { date as moment, capitalizeSentenceCase, randomString, updatePosition } from '../../../utils';
 import CalendarComp from '../calendar';
 import ControlComp from '../control';
-import theme from '../../../theme/settings';
 import { ButtonIcon, HelperText, InputBase, Label } from '../../index';
 import Button from '../../button';
 import Tooltip from '../../tooltip';
 import { isValidDate } from '../calendar/function';
+import { alignCenter, borderRadius4px, cursorPointer, displayBlock, displayNone, flexRow, justifyEnd, positionFixed } from '../../../styles/general';
+import { color as colors } from '../../../styles/colors';
 import { useTheme } from '../../../theme';
 const {
   zIndex
 } = useTheme();
+const {
+  system: {
+    white
+  }
+} = colors;
+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(({
   actionIconAt,
   clearAble,
@@ -74,91 +87,8 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [, setDisplayValue] = useState(Date.now());
   const [, setFocusedValue] = useState(Date.now()); // const [actionsState, setActionsState] = useState(true);
 
-  useImperativeHandle(reference, () => ({
-    get: () => {
-      return ref.current;
-    },
-    getInputContainer: () => {
-      return ipConRef.current;
-    },
-    getInput: () => {
-      return ipRef.current;
-    },
-    getCalendar: () => {
-      return calRef.current;
-    },
-    getIcon: () => {
-      return iconRef.current;
-    }
-  }));
-  const confirmText = getGlobal(['confirm']);
-  const cancelText = getGlobal(['cancel']);
-  const iconAreaCSS = css`
-                align-items: center;
-                color: inherit;
-                display: flex;
-                .${unique.icon} {
-                    cursor: pointer;
-                    opacity: 0;
-                    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;
-                    display: block;
-                }
-            `;
-  const hiddenStyle = {
-    opacity: 0,
-    display: 'none'
-  };
-  const activeStyle = {
-    opacity: 1,
-    pointerEvents: 'none',
-    display: 'block'
-  };
-  const pickerCSS = {
-    backGr: `background-color: transparent; inset: 0px; pointer-events: auto; position: fixed; z-index: ${zIndex(1)};`,
-    picker: (position, left, width) => css`
-                    background-color: ${theme.colors.white};
-                    border-radius: ${theme.border.radius};
-                    height: max-content;
-                    left: ${left}px;
-                    max-width: 400px;
-                    min-width: ${window.innerWidth <= 599 ? 280 : 314}px;
-                    opacity: 0;
-                    position: fixed;
-                    top: ${position.top}px;
-                    transform: scale(0);
-                    transform-origin: ${position.transformOrigin};
-                    transition: opacity 120ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
-                        transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-                    width: ${width}px;
-                    z-index: ${zIndex(2)};
-                `,
-    active: {
-      opacity: 1,
-      transform: 'scale(1)'
-    },
-    remove: {
-      opacity: 0,
-      pointerEvents: 'none',
-      transform: 'scale(0)'
-    }
-  };
-  const controlContainerCSS = css`
-                display: flex;
-                justify-content: flex-end;
-                margin: 0 16px 16px;
-            `;
-  const buttonProps = {
-    style: {
-      margin: '0 2px',
-      padding: '7px 8px'
-    }
-  };
+  const _iconAreaCSS = iconAreaCSS(unique);
+
   const handleDisplayValue = useCallback(value => {
     displayValue.current = new Date(value);
     setDisplayValue();
@@ -190,10 +120,6 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     closePicker();
   };
 
-  const formatValue = (value, format, utc = false) => {
-    return moment(value).format(format, utc);
-  };
-
   const setInputValue = e => {
     ipRef.current.value = capitalizeSentenceCase(formatValue(e.value, displayFormat));
     if (clearAble) onSwap(false);
@@ -213,7 +139,8 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const getPickerStyle = () => {
     const {
-      innerHeight
+      innerHeight,
+      innerWidth
     } = window;
     const {
       left,
@@ -233,7 +160,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
 
-    return pickerCSS.picker(style, left, width).styles;
+    return pickerCSS.picker(style, left + 400 > innerWidth ? innerWidth - 400 : left, width).styles;
   }; // const createPortal = () => {
   //     let portal = document.getElementById(unique.portal);
   //     if (!portal) {
@@ -268,7 +195,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const pressESCHandler = event => {
-    if (event.key === 'Escape') {
+    if (event.key === 'Escape' || event.key === 'Tab') {
       onClickOutside({
         target: null
       });
@@ -437,15 +364,17 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const iconComp = jsx("div", {
-    css: iconAreaCSS,
+    css: _iconAreaCSS,
     ref: iconRef
   }, jsx(ButtonIcon, {
+    disabled: disabled || readOnly,
     viewType: 'ghost',
     onClick: triggerFocus,
     className: `${unique.icon} ${unique.icon}-accept`,
     viewBox: true,
     name: 'CalendarNew'
   }), jsx(ButtonIcon, {
+    disabled: disabled || readOnly,
     viewType: 'ghost',
     onClick: onClear,
     className: `${unique.icon} ${unique.icon}-cancel`,
@@ -552,6 +481,23 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       closePicker();
     };
   }, [actionIconAt, clearAble, controls, disabled, displayFormat, displayAnotherMonth, max, min, readOnly, returnFormat, viewType]);
+  useImperativeHandle(reference, () => ({
+    get: () => {
+      return ref.current;
+    },
+    getInputContainer: () => {
+      return ipConRef.current;
+    },
+    getInput: () => {
+      return ipRef.current;
+    },
+    getCalendar: () => {
+      return calRef.current;
+    },
+    getIcon: () => {
+      return iconRef.current;
+    }
+  }));
   return jsx(ControlComp, { ...props,
     disabled: disabled,
     error: isError,
@@ -586,6 +532,72 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     disabled: disabled
   }, error));
 }));
+const hiddenStyle = {
+  opacity: 0,
+  display: 'none'
+};
+const activeStyle = {
+  opacity: 1,
+  pointerEvents: 'none',
+  display: 'block'
+};
+const buttonProps = {
+  style: {
+    margin: '0 2px',
+    padding: '7px 8px'
+  }
+};
+
+const iconAreaCSS = unique => css`
+    ${flexRow};
+    ${alignCenter};
+    color: inherit;
+    .${unique.icon} {
+        ${displayNone};
+        ${cursorPointer};
+        opacity: 0;
+        transition: display 50ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 50ms;
+        will-change: display, opacity;
+    }
+    .${unique.icon}-accept {
+        ${displayBlock};
+        opacity: 1;
+    }
+`;
+
+const controlContainerCSS = css`
+    ${flexRow};
+    ${justifyEnd};
+    margin: 0 16px 16px;
+`;
+const pickerCSS = {
+  backGr: `background-color: transparent; inset: 0px; pointer-events: auto; position: fixed; z-index: ${zIndex(1)};`,
+  picker: (position, left, width) => css`
+        ${positionFixed};
+        ${borderRadius4px};
+        background-color: ${white};
+        height: max-content;
+        width: ${width}px;
+        left: ${left}px;
+        top: ${position.top}px;
+        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: ${zIndex(2)};
+    `,
+  active: {
+    opacity: 1,
+    transform: 'scale(1)'
+  },
+  remove: {
+    opacity: 0,
+    pointerEvents: 'none',
+    transform: 'scale(0)'
+  }
+};
 DatePicker.defaultProps = {
   actionIconAt: 'end',
   clearAble: false,
@@ -601,76 +613,76 @@ DatePicker.defaultProps = {
   viewType: 'underlined'
 };
 DatePicker.propTypes = {
-  /** action icons position */
+  /** Action icons position. */
   actionIconAt: PropTypes.oneOf(['end', 'start']),
 
-  /** display the clear icon if true */
+  /** Display the clear icon if true. */
   clearAble: PropTypes.bool,
 
-  /** if 'true' the calendar will have a footer controls */
+  /** If 'true' the calendar will have a footer controls. */
   controls: PropTypes.bool,
 
-  /** the default value of the component */
+  /** The default value of the component. */
   defaultValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.object]),
 
-  /** if 'true' the form control will be disabled */
+  /** If 'true' the form control will be disabled. */
   disabled: PropTypes.bool,
 
-  /** format to display value   */
+  /** Format to display value. */
   displayFormat: PropTypes.oneOfType([PropTypes.oneOf(['DD/MM/YYYY', 'MM/DD/YYYY', 'YYYY/MM/DD', 'DD-MM-YYYY', 'MM-DD-YYYY', 'YYYY-MM-DD']), PropTypes.string]),
 
-  /** view days of previous or next month */
+  /** View days of previous or next month. */
   displayAnotherMonth: PropTypes.bool,
 
-  /** error of the form control */
-  error: PropTypes.string,
+  /** Error of the form control. */
+  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
 
-  /** inputProps are properties of the input element */
+  /** InputProps are properties of the input element. */
   inputProps: PropTypes.object,
 
-  /** inputStyle is style of input element */
+  /** InputStyle is style of input element. */
   inputStyle: PropTypes.object,
 
-  /** content of the label element */
+  /** Content of the label element. */
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
-  /** labelProps are properties if the label element */
+  /** LabelProps are properties if the label element. */
   labelProps: PropTypes.object,
 
-  /** min value of date picker */
+  /** Min value of date picker. */
   min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.object]),
 
-  /** max value of date picker */
+  /** Max value of date picker. */
   max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.object]),
 
-  /** a callback function when value input change */
+  /** A callback function when value input change. */
   onChange: PropTypes.func,
 
-  /** hints for input */
+  /** Hints for input. */
   placeholder: PropTypes.string,
 
-  /** allow close Popup when press ESC */
+  /** Allow close Popup when press ESC. */
   pressESCToClose: PropTypes.bool,
 
-  /** status read only of input */
+  /** Status read only of input. */
   readOnly: PropTypes.bool,
 
-  /** required state of the form control */
+  /** Required state of the form control. */
   required: PropTypes.bool,
 
-  /** format of the returned value   */
+  /** Format of the returned value. */
   returnFormat: PropTypes.oneOfType([PropTypes.oneOf(['DD/MM/YYYY', 'MM/DD/YYYY', 'YYYY/MM/DD', 'DD-MM-YYYY', 'MM-DD-YYYY', 'YYYY-MM-DD']), PropTypes.string]),
 
-  /** style of the component */
+  /** Style inline of component. */
   style: PropTypes.object,
 
-  /** text align of the input */
+  /** Text align of the input. */
   textAlign: PropTypes.oneOf(['center', 'end', 'start']),
 
-  /** value of the component */
+  /** Value of the component. */
   value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.array, PropTypes.object]),
 
-  /** view type of the form control */
+  /** View type of the form control. */
   viewType: PropTypes.oneOf(['outlined', 'underlined'])
 };
 export default DatePicker;

package/components/form-control/dropdown/index.js

@@ -459,7 +459,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       const icon = getIconFromData(data);
 
       if (multiple && selectBox) {
-        const checked = currentValue[unique].includes(value);
+        const checked = Array.isArray(currentValue[unique]) ? currentValue[unique].includes(value) : [currentValue[unique]].includes(value);
         items.push(jsx("div", {
           key: index,
           css: !itemDisabled ? _DropdownItemCSS : [DisabledCSS, _DropdownItemCSS],
@@ -616,7 +616,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       let item = null;
 
       if (multiple && selectBox) {
-        const checked = currentValue[unique].includes(value);
+        const checked = Array.isArray(currentValue[unique]) ? currentValue[unique].includes(value) : [currentValue[unique]].includes(value);
         item = jsx(Checkbox, {
           defaultChecked: checked,
           style: {
@@ -899,7 +899,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
 
-    if (closeAfterSelect) {
+    if (closeAfterSelect === true || closeAfterSelect === undefined && !multiple) {
       closeDropdown();
     }
   };
@@ -1757,7 +1757,6 @@ Dropdown.defaultProps = {
   multiple: false,
   allowSearch: false,
   selectBox: false,
-  closeAfterSelect: true,
   inputProps: {},
   formStyle: {},
   dataSource: [],

package/components/form-control/dropdown-box/index.js

@@ -77,7 +77,7 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const pressESCHandler = event => {
-    if (event.key === 'Escape' || event.key === 'Tab') {
+    if (event.key === 'Escape') {
       closeDropdownBox();
     }
   };

package/components/form-control/helper-text/index.js

@@ -5,66 +5,68 @@ import { memo, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { Typography } from '../../';
-import theme from '../../../theme/settings';
 import { getGlobal } from '../../../global';
+import theme from '../../../theme/settings';
+const {
+  colors: {
+    system: {
+      disabled: systemDisabled
+    },
+    semantic: {
+      success,
+      warning,
+      danger,
+      info
+    }
+  },
+  spacing
+} = theme;
+const colorMap = new Map([['default', danger], ['success', success], ['warning', warning], ['danger', danger], ['info', info]]);
 const HelperText = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   disabled,
   status,
   className,
+  style,
   children,
-  ...props
+  id
 }, ref) => {
-  /* Start styled */
-  const HelperTextRoot = css`
-        margin-top: 4px;
-        &.info {
-            color: ${theme.colors.info};
-        }
-        &.success {
-            color: ${theme.colors.success};
-        }
-        &.warning {
-            color: ${theme.colors.warning};
-        }
-        &.danger {
-            color: ${theme.colors.danger};
-        }
-        &.disabled {
-            color: ${theme.colors.disabled};
-        }
-    `;
-  /* End styled */
-
+  const color = colorMap.get(status);
   return jsx(Typography, {
     ref: ref,
+    id: id,
     type: 'p3',
-    color: theme.colors.danger,
+    color: disabled ? systemDisabled : color,
     fullWidth: false,
-    css: HelperTextRoot,
-    className: ['DGN-UI-HelperText', className, status, disabled ? 'disabled' : ''].join(' ').trim(),
-    ...props
+    css: HelperTextRootCSS,
+    className: ['DGN-UI-HelperText', className].join(' ').trim().replace(/\s+/g, ' '),
+    style: style,
+    lineClamp: 1
   }, typeof children === 'boolean' ? getGlobal('thisFieldIsRequired') : children);
 }));
+const HelperTextRootCSS = css`
+    margin-top: ${spacing()}px;
+`;
 HelperText.defaultProps = {
   disabled: false,
   status: 'default',
   className: '',
+  style: {},
   children: ''
 };
 HelperText.propTypes = {
-  /** prevent all event if true */
+  /** If true, the component is disabled. */
   disabled: PropTypes.bool,
 
   /** status type to display color for input (only available for type is inform) */
   status: PropTypes.oneOf(['default', 'warning', 'success', 'danger', 'info']),
 
-  /** class use in for helper text */
+  /** Class for component. */
   className: PropTypes.string,
 
-  /** the content to display in HelperText */
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  /** Style inline of component. */
+  style: PropTypes.object,
 
-  /** any props else */
-  props: PropTypes.any
+  /** Content to display in component. */
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
 };
 export default HelperText;