diginet-core-ui 1.3.73 → 1.3.74

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

@@ -7,21 +7,22 @@ import { jsx, css } from '@emotion/core';
 import OptionWrapper from '../../others/option-wrapper';
 import { Typography } from '../../';
 import { flexRow } from '../../../styles/general';
-import theme from '../../../theme/settings';
+import { classNames } from '../../../utils';
+import { arrTypeTypography as typesTypography } from '../../typography';
+import { useTheme } from '../../../theme';
 const {
   colors: {
     system: {
       disabled: systemDisabled
     },
-    semantic: {
-      danger
-    },
     text: {
       normal_label
     }
-  }
-} = theme;
+  },
+  spacing
+} = useTheme();
 const Label = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   disabled,
   readOnly,
   required,
@@ -35,10 +36,17 @@ const Label = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   ...props
 }, reference) => {
   const ref = useRef(null);
-  useImperativeHandle(reference, () => ({
-    element: ref.current,
-    instance: {}
-  }));
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = { ...action
+    }; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   return useMemo(() => jsx("div", {
     css: LabelContainerCSS,
     className: 'DGN-UI-Label-Container'
@@ -52,23 +60,22 @@ const Label = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     lineClamp: lineClamp,
     hoverTooltip: hoverTooltip,
     type: type,
-    className: ['DGN-UI-Label', className, readOnly ? 'read-only' : '', disabled ? 'disabled' : ''].join(' ').trim().replace(/\s+/g, ' '),
+    className: classNames('DGN-UI-Label', className, readOnly && 'read-only', disabled && 'disabled'),
     ...props
-  }, children), required && jsx("span", {
-    className: 'required'
-  }, " *")), [disabled, readOnly, required, className, children, type, lineClamp, hoverTooltip, color, props]);
+  }, children), required && jsx(Typography, {
+    type: type,
+    color: 'danger'
+  }, "*")), [children, className, color, disabled, hoverTooltip, id, lineClamp, readOnly, required, type, props]);
 }));
 const LabelContainerCSS = css`
     ${flexRow};
-    .required {
-        color: ${danger};
+    & + .DGN-UI-InputBase.outlined {
+        margin-top: ${spacing([0.5])};
     }
 `;
 const LabelRootCSS = css`
     min-height: 16px;
-    & + .DGN-UI-InputBase.outlined {
-        margin-top: 2px;
-    }
+    margin: 0;
     word-break: break-all;
 `;
 Label.defaultProps = {
@@ -81,7 +88,6 @@ Label.defaultProps = {
   className: '',
   children: ''
 };
-const arrTypeTypography = ['t1', 't2', 't3', 't4', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p1', 'p2', 'p3', 'title1', 'title2', 'title3', 'title4', 'heading1', 'heading2', 'heading3', 'heading4', 'heading5', 'heading6', 'paragraph1', 'paragraph2', 'paragraph3'];
 Label.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
@@ -108,7 +114,7 @@ Label.propTypes = {
   hoverTooltip: PropTypes.bool,
 
   /** Consult [Typography's](https://core.diginet.com.vn/ui/?path=/docs/typography) documents. */
-  type: PropTypes.oneOf(arrTypeTypography)
+  type: PropTypes.oneOf(typesTypography)
 };
 export { Label };
 export default OptionWrapper(Label);

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

@@ -18,6 +18,7 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   endIconProps,
   error,
   helperTextProps,
+  hoverTooltip,
   icon,
   iconStyle,
   inputProps,
@@ -276,7 +277,8 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onKeyDown: onKeyDown,
     onKeyUp: onKeyUp,
     onPaste: onPaste,
-    value: valueProp
+    value: valueProp,
+    hoverTooltip: hoverTooltip
   }), isError && jsx(HelperText, { ...helperTextProps,
     disabled: disabled,
     status: status
@@ -316,6 +318,7 @@ TextInput.defaultProps = {
   className: '',
   defaultValue: '',
   disabled: false,
+  hoverTooltip: false,
   error: '',
   iconStyle: {},
   label: '',

package/components/grid/Col.js

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
 import Grid from '.';
 import { makeStyles } from '../../theme';
+import { classNames } from '../../utils';
 const useStyles = makeStyles({
   customCol: {
     '& .DGN-UI-Control': {
@@ -34,30 +35,27 @@ const Col = props => {
     className
   } = props;
   return jsx(Grid, { ...props,
-    className: [`DGN-UI-Col ${classes.customCol}`, className].join(' ').trim().replace(/\s+/g, ' '),
+    className: classNames(`DGN-UI-Col ${classes.customCol}`, className),
     item: true
   });
 };
 
 Col.defaultProps = {
-  style: {},
   className: '',
   columns: 12,
   lg: false,
   md: false,
   sm: false,
+  style: {},
+  wrap: 'wrap',
   xl: false,
   xs: true,
-  zeroMinWidth: false,
-  wrap: 'wrap'
+  zeroMinWidth: false
 };
 Col.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
 
-  /** Style inline of component. */
-  style: PropTypes.object,
-
   /** Class for component. */
   className: PropTypes.string,
 
@@ -76,6 +74,9 @@ Col.propTypes = {
   /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `sm` breakpoint and wider screens if not overridden. */
   sm: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
 
+  /** Style inline of component. */
+  style: PropTypes.object,
+
   /** Defines the flex-wrap style property. It's applied for all screen sizes. */
   wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
 

package/components/grid/Container.js

@@ -4,6 +4,7 @@
 import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
 import Grid from '.';
+import { classNames } from '../../utils';
 
 const checkChildren = children => {
   if (!children) return false;
@@ -21,24 +22,14 @@ const Container = props => {
     children
   } = props;
   return checkChildren(children) ? jsx(Grid, { ...props,
-    className: ['DGN-UI-Container', className].join(' ').trim().replace(/\s+/g, ' '),
+    className: classNames('DGN-UI-Container', className),
     container: true
   }) : null;
 };
 
 Container.defaultProps = {
-  style: {},
   className: '',
   columns: 12,
-  lg: false,
-  md: false,
-  sm: false,
-  xl: false,
-  xs: false,
-  zeroMinWidth: false,
-  spacing: 0,
-  direction: 'row',
-  wrap: 'wrap',
   columnSpacing: {
     xs: 4,
     sm: 4,
@@ -46,6 +37,9 @@ Container.defaultProps = {
     lg: 4,
     xl: 6
   },
+  direction: 'row',
+  lg: false,
+  md: false,
   rowSpacing: {
     xs: 4,
     sm: 4,
@@ -53,21 +47,25 @@ Container.defaultProps = {
     lg: 4,
     xl: 4
   },
+  sm: false,
+  spacing: 0,
+  style: {},
   topSpacing: {
     xs: 2,
     sm: 2,
     md: 2,
     lg: 2,
     xl: 2
-  }
+  },
+  wrap: 'wrap',
+  xl: false,
+  xs: false,
+  zeroMinWidth: false
 };
 Container.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
 
-  /** Style inline of component. */
-  style: PropTypes.object,
-
   /** Class for component. */
   className: PropTypes.string,
 
@@ -95,6 +93,9 @@ Container.propTypes = {
   /** Defines the space between the type `Col` components */
   spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
 
+  /** Style inline of component. */
+  style: PropTypes.object,
+
   /** Defines the flex-wrap style property. It's applied for all screen sizes. */
   wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
 

package/components/grid/Row.js

@@ -4,6 +4,7 @@
 import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
 import Grid from '.';
+import { classNames } from '../../utils';
 
 const checkChildren = children => {
   if (!children) return false;
@@ -21,24 +22,14 @@ const Row = props => {
     children
   } = props;
   return checkChildren(children) ? jsx(Grid, { ...props,
-    className: ['DGN-UI-Row', className].join(' ').trim().replace(/\s+/g, ' '),
+    className: classNames('DGN-UI-Row', className),
     container: true
   }) : null;
 };
 
 Row.defaultProps = {
-  style: {},
   className: '',
   columns: 12,
-  lg: false,
-  md: false,
-  sm: false,
-  xl: false,
-  xs: false,
-  zeroMinWidth: false,
-  spacing: 0,
-  direction: 'row',
-  wrap: 'wrap',
   columnSpacing: {
     xs: 4,
     sm: 4,
@@ -46,21 +37,28 @@ Row.defaultProps = {
     lg: 4,
     xl: 6
   },
+  direction: 'row',
+  lg: false,
+  md: false,
   rowSpacing: {
     xs: 4,
     sm: 4,
     md: 4,
     lg: 4,
     xl: 4
-  }
+  },
+  sm: false,
+  spacing: 0,
+  style: {},
+  wrap: 'wrap',
+  xl: false,
+  xs: false,
+  zeroMinWidth: false
 };
 Row.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
 
-  /** Style inline of component. */
-  style: PropTypes.object,
-
   /** Class for component. */
   className: PropTypes.string,
 
@@ -88,6 +86,9 @@ Row.propTypes = {
   /** Defines the space between the type `Col` components */
   spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
 
+  /** Style inline of component. */
+  style: PropTypes.object,
+
   /** Defines the flex-wrap style property. It's applied for all screen sizes. */
   wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
 

package/components/grid/index.js

@@ -8,19 +8,20 @@ import GridContext from './context';
 import theme from '../../theme/settings';
 import { breakpointKeys } from '../../theme/createBreakpoints';
 import { borderBox } from '../../styles/general';
+import { classNames, handleBreakpoints } from '../../utils';
 const {
   breakpoints: themeBreakpoints,
   spacing: themeSpacing
 } = theme;
 const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  id,
-  style,
-  className,
+  action = {},
   children,
+  className,
   columns: columnsProp,
   columnSpacing: columnSpacingProp,
   container,
   direction,
+  id,
   item,
   leftSpacing: leftSpacingProp,
   lg,
@@ -28,6 +29,7 @@ const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   rowSpacing: rowSpacingProp,
   sm,
   spacing,
+  style,
   topSpacing: topSpacingProp,
   wrap,
   xl,
@@ -50,7 +52,9 @@ const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
-    const _instance = {}; // methods
+    currentRef.element = ref.current;
+    const _instance = { ...action
+    }; // methods
 
     _instance.__proto__ = {}; // hidden methods
 
@@ -63,11 +67,11 @@ const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       ref: ref,
       css: [_GridCSS, container && (rowSpacing || columnSpacing) && _GridSpacingCSS, _HandleGridCSS],
       style: style,
-      className: [`DGN-UI-Grid${item ? '-item' : ''}`, className].join(' ').trim().replace(/\s+/g, ' ')
+      className: classNames(`DGN-UI-Grid${item ? '-item' : ''}`, className)
     }, jsx(GridContext.Provider, {
       value: columns
     }, children));
-  }, [id, container, item, direction, leftSpacing, wrap, rowSpacing, columnSpacing, xs, sm, md, lg, xl, spacing, topSpacing, zeroMinWidth, className, columns, children]);
+  }, [columns, columnSpacing, leftSpacing, rowSpacing, topSpacing, children, className, container, direction, id, item, lg, md, sm, spacing, style, wrap, xl, xs, zeroMinWidth]);
 }));
 
 const getOffset = val => {
@@ -75,30 +79,7 @@ const getOffset = val => {
   return `${parse}${String(val).replace(String(parse), '') || 'px'}`;
 };
 
-const handleBreakpoints = (propValue, cssFromPropValue) => {
-  let output = '';
-
-  if (Array.isArray(propValue)) {
-    propValue.map((item, index) => {
-      output = output.concat([themeBreakpoints.up(breakpointKeys[index])]).concat(`{${cssFromPropValue(propValue[index])}} `);
-    });
-    return output;
-  }
-
-  if (typeof propValue === 'object') {
-    Object.keys(propValue).map(item => {
-      if (breakpointKeys.includes(item)) {
-        output = output.concat([themeBreakpoints.up(item)]).concat(`{${cssFromPropValue(propValue[item])}} `);
-      }
-    });
-    return output;
-  }
-
-  output = cssFromPropValue(propValue);
-  return output;
-};
-
-const progessSizeArray = sizeArr => {
+const processSizeArray = sizeArr => {
   let lastValue = false;
   sizeArr = sizeArr.map(item => {
     if (item === false) return lastValue;else lastValue = item;
@@ -208,26 +189,26 @@ const GridSpacingCSS = (rowSpacing, columnSpacing, topSpacing, leftSpacing) => c
 `;
 
 const HandleGridCSS = (sizeArr, columns) => css`
-    ${progessSizeArray(sizeArr).map((item, idx) => {
+    ${processSizeArray(sizeArr).map((item, idx) => {
   return handleGrid(breakpointKeys[idx], item, columns);
 })}
 `;
 
 Grid.defaultProps = {
-  style: {},
   className: '',
   columns: 12,
   container: false,
+  direction: 'row',
   item: false,
   lg: false,
   md: false,
   sm: false,
+  spacing: 0,
+  style: {},
+  wrap: 'wrap',
   xl: false,
   xs: false,
-  zeroMinWidth: false,
-  spacing: 0,
-  direction: 'row',
-  wrap: 'wrap'
+  zeroMinWidth: false
 };
 Grid.propTypes = {
   /** The content of the component. */

package/components/image/index.js

@@ -0,0 +1,164 @@
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { forwardRef, Fragment, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css, keyframes } from '@emotion/core';
+import OptionWrapper from '../others/option-wrapper';
+import { useIntersection } from '../../utils/intersectionObserver';
+import { classNames } from '../../utils';
+import AvatarDefault from '../../assets/avatar/default.svg';
+import { alignCenter, inlineFlex, overflowHidden, parseWidthHeight, positionRelative } from '../../styles/general';
+const blurKeyframe = keyframes`
+    0% { -webkit-filter: blur(4px);}
+    25% { -webkit-filter: blur(3px);}
+    50% { -webkit-filter: blur(2px);}
+    75% { -webkit-filter: blur(1px);}
+    100% { -webkit-filter: blur(0px);}
+`;
+const Image = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
+  alt,
+  circular,
+  className,
+  defaultSrc,
+  height,
+  id,
+  lazyLoading,
+  onError,
+  src,
+  style,
+  width
+}, reference) => {
+  if (!defaultSrc) defaultSrc = AvatarDefault;
+  const ref = useRef(null);
+  const [srcState, setSrcState] = useState(src);
+  const [isInView, setIsInView] = useState(false);
+  const [onLoaded, setOnLoaded] = useState(false);
+  useIntersection(ref, () => {
+    setIsInView(true);
+  });
+
+  const _ImageCSS = ImageCSS(width, height, circular);
+
+  useEffect(() => {
+    if (src) {
+      if (isInView || !lazyLoading) {
+        const img = document.createElement('img');
+        img.src = src;
+        img.alt = '';
+
+        img.onerror = () => {
+          setSrcState(defaultSrc);
+          onError === null || onError === void 0 ? void 0 : onError();
+        };
+
+        img.onload = () => {
+          setSrcState(src);
+        };
+      }
+    }
+  }, [src]);
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = { ...action
+    }; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
+
+  const renderImage = () => {
+    const defaultImage = jsx("img", {
+      src: defaultSrc,
+      alt: '',
+      style: {
+        objectFit: 'cover'
+      },
+      width: width,
+      height: height
+    });
+    const image = jsx(Fragment, null, !onLoaded && defaultImage, jsx("img", {
+      css: blurAnimationCSS,
+      src: srcState,
+      alt: alt || srcState,
+      style: {
+        objectFit: 'cover'
+      },
+      onLoad: () => setOnLoaded(true),
+      width: width,
+      height: height
+    }));
+
+    if (lazyLoading) {
+      return isInView ? image : defaultImage;
+    } else return image;
+  };
+
+  return useMemo(() => {
+    return jsx("div", {
+      ref: ref,
+      css: _ImageCSS,
+      id: id,
+      className: classNames('DGN-UI-Image', className),
+      style: style
+    }, renderImage());
+  }, [alt, circular, className, defaultSrc, height, id, lazyLoading, src, style, width, isInView, onLoaded, srcState]);
+}));
+
+const ImageCSS = (width, height, circular) => css`
+    ${inlineFlex};
+    ${positionRelative};
+    ${alignCenter};
+    ${overflowHidden};
+    ${parseWidthHeight(width, height)};
+    ${circular && `border-radius: 50%`};
+`;
+
+const blurAnimationCSS = css`
+    animation: ${blurKeyframe} 1s ease;
+`;
+Image.defaultProps = {
+  circular: false,
+  className: '',
+  height: 200,
+  lazyLoading: false,
+  style: {},
+  width: 200
+};
+Image.propTypes = {
+  /** Image description. */
+  alt: PropTypes.string,
+
+  /** If `true`, image is circular.*/
+  circular: PropTypes.bool,
+
+  /** Class for component. */
+  className: PropTypes.string,
+
+  /** Default img when src error. */
+  defaultSrc: PropTypes.string,
+
+  /** Height of component. */
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  /** If `true`, lazy loading image.*/
+  lazyLoading: PropTypes.bool,
+
+  /** Callback fired when the src is error. */
+  onError: PropTypes.func,
+
+  /** Image path. */
+  src: PropTypes.string,
+
+  /** Style inline of component. */
+  style: PropTypes.object,
+
+  /** Width of component. */
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+};
+export { Image };
+export default OptionWrapper(Image);

package/components/index.js

@@ -64,7 +64,9 @@ export { default as Row } from './grid/Row';
 export { default as Col } from './grid/Col';
 export { default as Container } from './grid/Container'; //Icon
 
-export { default as Icon } from '../icons/index'; // List
+export { default as Icon } from '../icons/index'; //Image
+
+export { default as Image } from './image'; // List
 
 export { default as List } from './list/list';
 export { default as ListItem } from './list/list-item';