diginet-core-ui 1.3.66 → 1.3.68

package/readme.md

@@ -38,6 +38,26 @@ npm test
 ```
 
 ## Changelog
+## 1.3.68
+- \[Changed\]: PagingInfo – Update design
+- \[Changed\]: InputBase – Add func auto scale width, apply for NumberInput, TextInput
+- \[Changed\]: PagingSelector – Update functions in PagingSelector
+- \[Changed\]: NumberInput, MoneyInput, PhoneInput – Add prop labelProps
+
+## 1.3.67
+- \[Added\]: Icon – ListAlt, PersonSetting, Undo, ViewHeadline
+- \[Changed\]: OptionWrapper – Update OptionWrapper
+- \[Changed\]: Accordion – Change align AccordionSummary content to center
+- \[Changed\]: Dropdown – Add props searchExpr, searchMode
+- \[Changed\]: Row, Container – Update row spacing, Add component Container
+- \[Changed\]: Dropdown – Add hover tooltip when selected text value too long
+- \[Changed\]: Card – Update design
+- \[Changed\]: HelperText – Add props of Typography
+- \[Changed\]: Dropdown – Add hidden render item
+- \[Fixed\]: Button – Fix typography by size
+- \[Fixed\]: TECH – Fix babel warning
+- \[Fixed\]: Dropdown – Fix dropdown render out of screen
+
 ## 1.3.66
 - \[Changed\]: THEME – Update makestyles
 - \[Changed\]: THEME – Refactoring makeStyles

package/styles/color-helper.js

@@ -1,12 +1,12 @@
 /* eslint-disable no-undef */
 
-/**
- * Returns a number whose value is limited to the given range.
- *
- * @param {number} value The value to be clamped
- * @param {number} min The lower boundary of the output range
- * @param {number} max The upper boundary of the output range
- * @returns {number} A number in the range [min, max]
+/**
+ * Returns a number whose value is limited to the given range.
+ *
+ * @param {number} value The value to be clamped
+ * @param {number} min The lower boundary of the output range
+ * @param {number} max The upper boundary of the output range
+ * @returns {number} A number in the range [min, max]
  */
 const clamp = (value, min = 0, max = 1) => {
   if (process.env.NODE_ENV !== 'production') {
@@ -17,11 +17,11 @@ const clamp = (value, min = 0, max = 1) => {
 
   return Math.min(Math.max(min, value), max);
 };
-/**
- * Converts a color from CSS hex format to CSS rgb format.
- *
- * @param {string} color - Hex color, i.e. #nnn or #nnnnnn
- * @returns {string} A CSS rgb color string
+/**
+ * Converts a color from CSS hex format to CSS rgb format.
+ *
+ * @param {string} color - Hex color, i.e. #nnn or #nnnnnn
+ * @returns {string} A CSS rgb color string
  */
 
 
@@ -43,11 +43,11 @@ const intToHex = int => {
   const hex = int.toString(16);
   return hex.length === 1 ? `0${hex}` : hex;
 };
-/**
- * Converts a color from CSS rgb format to CSS hex format.
- *
- * @param {string} color - RGB color, i.e. rgb(n, n, n)
- * @returns {string} A CSS rgb color string, i.e. #nnnnnn
+/**
+ * Converts a color from CSS rgb format to CSS hex format.
+ *
+ * @param {string} color - RGB color, i.e. rgb(n, n, n)
+ * @returns {string} A CSS rgb color string, i.e. #nnnnnn
  */
 
 
@@ -61,11 +61,11 @@ export const rgbToHex = color => {
   } = decomposeColor(color);
   return `#${values.map(n => intToHex(n)).join('')}`;
 };
-/**
- * Converts a color from CSS rgb format to CSS hex format.
- *
- * @param {string} color - RGBA color, i.e. rgba(n, n, n, f)
- * @returns {string} A CSS rgb A color string, i.e. #nnnnnnnn
+/**
+ * Converts a color from CSS rgb format to CSS hex format.
+ *
+ * @param {string} color - RGBA color, i.e. rgba(n, n, n, f)
+ * @returns {string} A CSS rgb A color string, i.e. #nnnnnnnn
  */
 
 export const rgbaToHexA = color => {
@@ -98,11 +98,11 @@ export const rgbaToHexA = color => {
   if (a.length == 1) a = '0' + a;
   return '#' + r + g + b + a;
 };
-/**
- * Converts a color from hsl format to rgb format.
- *
- * @param {string} color - HSL color values
- * @returns {string} rgb color values
+/**
+ * Converts a color from hsl format to rgb format.
+ *
+ * @param {string} color - HSL color values
+ * @returns {string} rgb color values
  */
 
 export const hslToRgb = color => {
@@ -130,13 +130,13 @@ export const hslToRgb = color => {
     values: rgb
   });
 };
-/**
- * Returns an object with the type and values of a color.
- *
- * Note: Does not support rgb % values.
- *
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
- * @returns {object} - A  color object: {type: string, values: number[]}
+/**
+ * Returns an object with the type and values of a color.
+ *
+ * Note: Does not support rgb % values.
+ *
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @returns {object} - A  color object: {type: string, values: number[]}
  */
 
 export const decomposeColor = color => {
@@ -162,13 +162,13 @@ export const decomposeColor = color => {
     values
   };
 };
-/**
- * Converts a color object with type and values to a string.
- *
- * @param {object} color - Decomposed color
- * @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla'
- * @param {array} color.values - [n,n,n] or [n,n,n,n]
- * @returns {string} A CSS color string
+/**
+ * Converts a color object with type and values to a string.
+ *
+ * @param {object} color - Decomposed color
+ * @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla'
+ * @param {array} color.values - [n,n,n] or [n,n,n,n]
+ * @returns {string} A CSS color string
  */
 
 export const recomposeColor = color => {
@@ -189,14 +189,14 @@ export const recomposeColor = color => {
 
   return `${type}(${values.join(', ')})`;
 };
-/**
- * Calculates the contrast ratio between two colors.
- *
- * Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
- *
- * @param {string} foreground - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
- * @param {string} background - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
- * @returns {number} A contrast ratio value in the range 0 - 21.
+/**
+ * Calculates the contrast ratio between two colors.
+ *
+ * Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+ *
+ * @param {string} foreground - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @param {string} background - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @returns {number} A contrast ratio value in the range 0 - 21.
  */
 
 export const getContrastRatio = (foreground, background) => {
@@ -204,14 +204,14 @@ export const getContrastRatio = (foreground, background) => {
   const lumB = getLuminance(background);
   return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05);
 };
-/**
- * The relative brightness of any point in a color space,
- * normalized to 0 for darkest black and 1 for lightest white.
- *
- * Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
- *
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
- * @returns {number} The relative brightness of the color in the range 0 - 1
+/**
+ * The relative brightness of any point in a color space,
+ * normalized to 0 for darkest black and 1 for lightest white.
+ *
+ * Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+ *
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @returns {number} The relative brightness of the color in the range 0 - 1
  */
 
 export const getLuminance = color => {
@@ -225,25 +225,25 @@ export const getLuminance = color => {
 
   return Number((0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]).toFixed(3));
 };
-/**
- * Darken or lighten a color, depending on its luminance.
- * Light colors are darkened, dark colors are lightened.
- *
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
- * @param {number} coefficient=0.15 - multiplier in the range 0 - 1
- * @returns {string} A CSS color string. Hex input values are returned as rgb
+/**
+ * Darken or lighten a color, depending on its luminance.
+ * Light colors are darkened, dark colors are lightened.
+ *
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @param {number} coefficient=0.15 - multiplier in the range 0 - 1
+ * @returns {string} A CSS color string. Hex input values are returned as rgb
  */
 
 export const emphasize = (color, coefficient = 0.15) => {
   return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient);
 };
-/**
- * Set the absolute transparency of a color.
- * Any existing alpha values are overwritten.
- *
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
- * @param {number} value - value to set the alpha channel to in the range 0 -1
- * @returns {string} A CSS color string. Hex input values are returned as rgb
+/**
+ * Set the absolute transparency of a color.
+ * Any existing alpha values are overwritten.
+ *
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @param {number} value - value to set the alpha channel to in the range 0 -1
+ * @returns {string} A CSS color string. Hex input values are returned as rgb
  */
 
 export const fade = (color, value) => {
@@ -257,12 +257,12 @@ export const fade = (color, value) => {
   color.values[3] = value;
   return recomposeColor(color);
 };
-/**
- * Darkens a color.
- *
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
- * @param {number} coefficient - multiplier in the range 0 - 1
- * @returns {string} A CSS color string. Hex input values are returned as rgb
+/**
+ * Darkens a color.
+ *
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @param {number} coefficient - multiplier in the range 0 - 1
+ * @returns {string} A CSS color string. Hex input values are returned as rgb
  */
 
 export const darken = (color, coefficient) => {
@@ -281,12 +281,12 @@ export const darken = (color, coefficient) => {
 
   return recomposeColor(color);
 };
-/**
- * Lightens a color.
- *
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
- * @param {number} coefficient - multiplier in the range 0 - 1
- * @returns {string} A CSS color string. Hex input values are returned as rgb
+/**
+ * Lightens a color.
+ *
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @param {number} coefficient - multiplier in the range 0 - 1
+ * @returns {string} A CSS color string. Hex input values are returned as rgb
  */
 
 export const lighten = (color, coefficient) => {
@@ -305,22 +305,22 @@ export const lighten = (color, coefficient) => {
 
   return recomposeColor(color);
 };
-/**
- * Validate a color string.
- *
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
- * @returns {boolean} is a color
+/**
+ * Validate a color string.
+ *
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @returns {boolean} is a color
  */
 
 export const isColor = color => {
   const regex = /(^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$|^(rgb|hsl)a\((\d{1,3}%?,\s?){3}(1|0|0?\.\d+)\)$|^(rgb|hsl)\(\d{1,3}%?(,\s?\d{1,3}%?){2}\)$)/gim;
   return regex.test(color);
 };
-/**
- * Detect a color string type.
- *
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
- * @returns {string | false} color type, string or false
+/**
+ * Detect a color string type.
+ *
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @returns {string | false} color type, string or false
  */
 
 export const detectColor = color => {
@@ -335,11 +335,11 @@ export const detectColor = color => {
 
   return null;
 };
-/**
- * Validate a color name.
- *
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
- * @returns {boolean} is a color
+/**
+ * Validate a color name.
+ *
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @returns {boolean} is a color
  */
 
 export const isColorName = color => {
@@ -347,11 +347,11 @@ export const isColorName = color => {
   ctx.fillStyle = color;
   return ctx.fillStyle === '#000000' ? false : ctx.fillStyle;
 };
-/**
- * Convert from #ffffff to rgba()
- * @param hex color - #ffffff
- * @param {number} alpha - 0.5
- * @returns {string} color - rgba()
+/**
+ * Convert from #ffffff to rgba()
+ * @param hex color - #ffffff
+ * @param {number} alpha - 0.5
+ * @returns {string} color - rgba()
  */
 
 export const hexToRGBA = (hex, alpha) => {

package/styles/utils.js

@@ -1,10 +1,22 @@
+import { color as colors } from './colors';
 /**
- * parse to pixel
+ * Parse to pixel
  *
- * @param {number} value
+ * @param {number} vl
  * @returns {string}
  */
+
 export const parseToPixel = vl => {
   if (!vl) return '1px';
   return typeof vl === 'string' ? vl : `${vl}px`;
+};
+/**
+ * Get color from CORE colors
+ *
+ * @param {string} cl
+ * @returns {string}
+ */
+
+export const getColor = cl => {
+  return colors[cl] || cl;
 };

package/utils/classNames.js

@@ -0,0 +1,30 @@
+const hasOwn = {}.hasOwnProperty;
+
+const classNames = (...args) => {
+  args = args.flat();
+  let classes = [];
+
+  for (let i = 0; i < args.length; i++) {
+    let arg = args[i];
+    if (!arg) continue;
+    let argType = typeof arg;
+
+    if (argType === 'string' || argType === 'number') {
+      classes.push(arg);
+    } else if (argType === 'object') {
+      if (arg.toString === Object.prototype.toString) {
+        for (let key in arg) {
+          if (hasOwn.call(arg, key) && arg[key]) {
+            classes.push(key);
+          }
+        }
+      } else {
+        classes.push(arg.toString());
+      }
+    }
+  }
+
+  return classes.join(' ');
+};
+
+export default classNames;

package/utils/error/error.js

@@ -1,8 +1,8 @@
 import { extend } from '../object/extend';
 import { logger } from '../console';
 import { format } from '../string/string';
-/**
- * future
+/**
+ * future
  */
 
 const ERROR_URL = 'http://core.diginet.com.vn/ui/error/';

package/utils/index.js

@@ -19,4 +19,5 @@ export { default as useOnClickOutside } from './useOnClickOutside';
 export { default as usePortal } from './usePortal';
 export * from './validate';
 export { default as onValidate } from './validate';
+export { default as classNames } from './classNames';
 export default utils;

package/utils/renderIcon.js

@@ -5,11 +5,11 @@ import { jsx } from '@emotion/core';
 import { ButtonIcon } from '../components';
 import * as Icons from '../icons';
 import { parseTextToHTML, capitalize } from './';
-/**
- * render icon form source (dynamic type)
- * @param {String|jsx} source data of icon, maybe svg text | image link | name of icon in icons store or a jsx element
- * @param {String} type text to parse text to HTML, img link to use img tag, name to use icon form icons store
- * @param {Object} options properties of Icon component if us type is name {width, height, color, viewBox, ...}
+/**
+ * render icon form source (dynamic type)
+ * @param {String|jsx} source data of icon, maybe svg text | image link | name of icon in icons store or a jsx element
+ * @param {String} type text to parse text to HTML, img link to use img tag, name to use icon form icons store
+ * @param {Object} options properties of Icon component if us type is name {width, height, color, viewBox, ...}
  */
 
 const renderIcon = (source, type, options = {}) => {

package/utils/useInput.js

@@ -1,13 +1,6 @@
 import { useState, useRef } from 'react';
 
-const useInput = props => {
-  let {
-    defaultValue,
-    valueProp,
-    delayOnChange,
-    onChange,
-    onInput
-  } = props || {};
+const useInput = (defaultValue, valueProp, onChange, onInput, delayOnChange) => {
   const [value, setValue] = useState(defaultValue || valueProp);
   const timer = useRef(null);
   delayOnChange = Number(delayOnChange || 0);

package/components/card/body-card.js

@@ -1,65 +0,0 @@
-/** @jsxRuntime classic */
-
-/** @jsx jsx */
-import { memo, useMemo, useEffect, forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
-import theme from '../../theme/settings';
-const CardBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  children,
-  background,
-  style,
-  refs,
-  ...props
-}, ref) => {
-  const CardBodyBox = css`
-        display: block;
-        position: relative;
-        background-color: ${background};
-        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-        border-radius: 4px;
-        box-sizing: border-box;
-        padding: 12px 24px;
-        overflow: auto;
-        order: 2;
-        height: auto;
-        width: 100%;
-        img{
-            object-fit: cover;
-            max-width: 100%;
-            height: 100%;
-            border-radius: 20px;
-        }
-        &::-webkit-scrollbar {
-            width: 8px;
-            height: 8px;
-        }
-        &::-webkit-scrollbar-thumb{
-                border-radius: 10px;
-                mix-blend-mode: normal;
-                background-color: ${theme.colors.dark12};
-                background-clip: content-box;
-        }
-    `;
-  useEffect(() => {
-    !!refs && refs(ref);
-  }, []);
-  const Body = useMemo(() => jsx("div", {
-    css: CardBodyBox,
-    ...props,
-    style: style,
-    ref: ref
-  }, children), [children, style]);
-  return Body;
-}));
-CardBody.propTypes = {
-  /** customize style inline */
-  style: PropTypes.object,
-
-  /** get card header ref by function */
-  refs: PropTypes.func,
-
-  /** child content in header (like title) */
-  children: PropTypes.node
-};
-export default CardBody;

package/components/card/card.js

@@ -1,125 +0,0 @@
-/* eslint-disable no-undef */
-
-/** @jsxRuntime classic */
-
-/** @jsx jsx */
-import { memo, useRef, forwardRef, useMemo } from 'react';
-import { createPortal } from 'react-dom';
-import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
-import CardContext from './context';
-const Card = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  // open,
-  // type,
-  // title,
-  style,
-  top,
-  // pressESCToClose,
-  // darkTheme,
-  // autoFocus,
-  // refs,
-  onClose,
-  // onConfirm,
-  // onCancel,
-  children,
-  width,
-  ...props
-}, ref) => {
-  if (!ref) {
-    ref = useRef(null);
-  }
-
-  const cardBoxRef = useRef(null);
-  const CardBox = css`
-                background-color: white;
-                border-radius: 4px;
-                box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-                box-sizing: border-box;
-                border-radius: 10px;
-                display: flex;
-                position: relative;
-                max-height: calc(100% - ${isNaN(top) ? top : +top + 'px'});
-                min-width: 150px;
-                max-width: 90%;
-                margin: 0 auto;
-                height: max-content;
-                width: ${isNaN(width) ? width : width + 'px'};
-                flex-direction: column;
-                -webkit-box-orient: vertical;
-                -webkit-box-direction: normal;
-                /* min-height: 152px; */
-                cursor: 'initial';
-            `;
-
-  const onShowCard = () => {
-    setOpenState(true);
-  };
-
-  const onCloseCard = () => {
-    if (onClose) onClose();else {
-      setTimeout(() => {
-        setOpenState(false);
-      }, 500);
-    }
-
-    if (ref.current) {
-      ref.current.style.opacity = null;
-      ref.current.firstChild.classList.remove('show');
-    }
-  };
-
-  const CardView = useMemo(() => {
-    const node = jsx("div", {
-      className: 'DGN-UI-Card'
-    }, jsx("div", {
-      css: CardBox,
-      ref: cardBoxRef,
-      ...props,
-      style: style
-    }, jsx(CardContext.Provider, {
-      value: {
-        show: onShowCard,
-        close: onCloseCard
-      }
-    }, children)));
-    return /*#__PURE__*/createPortal(node, document.body);
-  });
-  return CardView;
-}));
-Card.defaultProps = {
-  autoFocus: true,
-  top: '',
-  width: '70%'
-};
-Card.propTypes = {
-  /** park a good colored background under the card box if true */
-  darkTheme: PropTypes.bool,
-
-  /** show card if true */
-  open: PropTypes.bool,
-
-  /** focusing after open card */
-  autoFocus: PropTypes.bool,
-
-  /** customize the vertical position of the screen, if not set, the card will be fixed in the middle of the screen */
-  top: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
-  /** width of the card */
-  width: PropTypes.string,
-
-  /** customize style inline */
-  style: PropTypes.object,
-
-  /** get card ref by function */
-  refs: PropTypes.func,
-
-  /** the function to run when close card */
-  onClose: PropTypes.func,
-
-  /** child content in body */
-  children: PropTypes.node,
-
-  /** any props else */
-  props: PropTypes.any
-};
-export default Card;

package/components/card/context.js

@@ -1,6 +0,0 @@
-import { createContext } from 'react';
-const CardContext = /*#__PURE__*/createContext({
-  show: () => {},
-  close: () => {}
-});
-export default CardContext;