diginet-core-ui 1.3.87 → 1.3.88

package/components/chip/attach.js

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { Fragment, memo, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
@@ -42,8 +43,10 @@ const AttachChip = /*#__PURE__*/memo(({
             display: flex;
         }
     `;
+
   const getStartIcon = () => {
     var _file$FileName;
+
     const lastIndexOfDot = (_file$FileName = file.FileName) === null || _file$FileName === void 0 ? void 0 : _file$FileName.lastIndexOf('.');
     if (!lastIndexOfDot) return null;
     const fileExt = file.FileName.slice(lastIndexOfDot + 1);
@@ -55,16 +58,19 @@ const AttachChip = /*#__PURE__*/memo(({
       viewBox: true
     });
   };
+
   const clickOutAction = event => {
     if (!moreActionRef.current) {
       document.removeEventListener('click', clickOutAction);
       return;
     }
+
     if (!moreActionRef.current.contains(event.target)) {
       moreActionRef.current.classList.remove('DGN-UI-Chip-show');
       document.removeEventListener('click', clickOutAction);
     }
   };
+
   const onShowMoreOption = () => {
     if (!moreActionRef.current.classList.contains('DGN-UI-Chip-show')) {
       moreActionRef.current.classList.add('DGN-UI-Chip-show');
@@ -73,6 +79,7 @@ const AttachChip = /*#__PURE__*/memo(({
       }, 100);
     }
   };
+
   const viewAction = (e, file) => {
     if (onView) {
       onView(e, file);
@@ -80,14 +87,15 @@ const AttachChip = /*#__PURE__*/memo(({
       setOpen(true);
     }
   };
+
   const downloadAction = (e, file = {}) => {
     if (onDownload) onDownload(e, file);else if (file.URL) {
       fetch(file.URL).then(resp => resp.blob()).then(blob => {
         const url = window.URL.createObjectURL(blob);
         const a = document.createElement('a');
         a.style.display = 'none';
-        a.href = url;
-        // the filename you want
+        a.href = url; // the filename you want
+
         a.download = file.FileName;
         document.body.appendChild(a);
         a.click();
@@ -95,18 +103,22 @@ const AttachChip = /*#__PURE__*/memo(({
       }).catch(() => alert('File not found'));
     }
   };
+
   const deleteAction = (e, file) => {
     if (onRemove) onRemove(e, file);
     setTimeout(() => {
       if (moreActionRef.current && moreActionRef.current.parentNode) moreActionRef.current.parentNode.remove();
     }, 0);
   };
+
   const renderLabel = label => {
     if (maxLength && label && label.length > maxLength) {
       label = label.slice(0, maxLength) + '...';
     }
+
     return label;
   };
+
   const attachView = useMemo(() => {
     return jsx(ModalSample, {
       open: open,
@@ -116,8 +128,7 @@ const AttachChip = /*#__PURE__*/memo(({
       url: file.URL
     })));
   }, [open]);
-  return jsx(Fragment, null, jsx(Chip, {
-    ...props,
+  return jsx(Fragment, null, jsx(Chip, { ...props,
     clearAble: false,
     label: renderLabel(file.FileName),
     startIcon: getStartIcon(),
@@ -145,18 +156,20 @@ const AttachChip = /*#__PURE__*/memo(({
   }))), attachView);
 });
 AttachChip.propTypes = {
-  /** the file info, such as:<br/>
-   * {<br/>
-   *  URL: https://url.com/pathname,<br/>
-   *  FileName: file.name,<br/>
-   * }
+  /** the file info, such as:<br/>
+   * {<br/>
+   *  URL: https://url.com/pathname,<br/>
+   *  FileName: file.name,<br/>
+   * }
    */
   file: PropTypes.shape({
     URL: PropTypes.string.isRequired,
     FileName: PropTypes.string.isRequired
   }).isRequired,
+
   /** max length content to display was allowed */
   maxLength: PropTypes.number,
+
   /** any props else of Chip component */
   props: PropTypes.any
 };

package/components/chip/index.js

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { memo, useRef, forwardRef, useMemo, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
@@ -69,25 +70,30 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     const _instance = {}; // methods
+
     _instance.__proto__ = {}; // hidden methods
+
     currentRef.instance = _instance;
     return currentRef;
   });
+
   const onRemoveHandler = () => {
     if (onRemove || disabled) onRemove(ref.current);
   };
+
   const _onClick = event => {
     onClick && event.stopPropagation();
     if (disabled) return;
     onClick && onClick(event);
   };
+
   const _onDbClick = event => {
     onDbClick && event.stopPropagation();
     if (disabled) return;
     onDbClick && onDbClick(event);
-  };
+  }; // Start Icon
+
 
-  // Start Icon
   const startIconView = useMemo(() => {
     if (typeof startIcon === 'string') {
       return jsx(Icon, {
@@ -99,9 +105,8 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     } else return jsx("div", {
       css: ChipIconCSS(infoChip)
     }, startIcon);
-  }, [startIcon, size]);
+  }, [startIcon, size]); // Label
 
-  // Label
   const labelView = useMemo(() => {
     return jsx(Typography, {
       css: ChipLabelCSS,
@@ -110,11 +115,11 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       lineClamp: 1,
       ...labelProps
     }, label);
-  }, [label, size, startIcon, endIcon, clearAble]);
+  }, [label, size, startIcon, endIcon, clearAble]); // End Icon
 
-  // End Icon
   const endIconView = useMemo(() => {
     let node = endIcon;
+
     if (typeof node === 'string') {
       return jsx(Icon, {
         name: node,
@@ -124,6 +129,7 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         viewBox: true
       });
     }
+
     return clearAble ? jsx(ButtonIcon, {
       ref: IconRef,
       className: 'end-icon',
@@ -156,6 +162,7 @@ const ChipLabelCSS = css`
     ${positionRelative};
     ${userSelectNone};
 `;
+
 const ChipRootCSS = (onClick, onDbClick, colorProps, info) => css`
     ${displayInlineFlex};
     ${itemsCenter};
@@ -218,6 +225,7 @@ const ChipRootCSS = (onClick, onDbClick, colorProps, info) => css`
         ${cursorNotAllowed}
     }
 `;
+
 const ChipIconCSS = info => css`
     ${flexRow};
     ${justifyCenter};
@@ -232,6 +240,7 @@ const ChipIconCSS = info => css`
     min-height: ${info === null || info === void 0 ? void 0 : info.iconSize};
     max-height: ${info === null || info === void 0 ? void 0 : info.iconSize};
 `;
+
 Chip.defaultProps = {
   viewType: 'outlined',
   size: 'medium',
@@ -240,39 +249,57 @@ Chip.defaultProps = {
 Chip.propTypes = {
   /** content to display in Chip */
   label: PropTypes.string,
+
   /** class of Chip element */
   className: PropTypes.string,
+
   /** max length content to display was allowed */
+
   /** style inline of component */
   style: PropTypes.object,
+
   /** the icon display at head of Chip */
   startIcon: PropTypes.any,
+
   /** the icon display at last of Chip */
   endIcon: PropTypes.any,
+
   /** type of chip */
   viewType: PropTypes.oneOf(['ghost', 'outlined', 'filled']),
+
   /** color for text or background of Chip */
   color: PropTypes.oneOfType([PropTypes.oneOf(['default', 'primary', 'info', 'success', 'warning', 'danger']), PropTypes.string]),
+
   /** size of Chip */
   size: PropTypes.oneOf(['small', 'medium', 'large']),
+
   /** show clear icon if true */
   clearAble: PropTypes.bool,
+
   /** prevent all event and change color if true */
   disabled: PropTypes.bool,
+
   /** prevent all event if true */
   readOnly: PropTypes.bool,
+
   /** the function to get ref of Chip */
   refs: PropTypes.func,
+
   /** the function will run after remove chip */
   onRemove: PropTypes.func,
+
   /** the function will run when click on chip */
   onClick: PropTypes.func,
+
   /** the function will run when double click on chip */
   onDbClick: PropTypes.func,
+
   /** like onDbClick (priority onDbClick) */
   onDoubleClick: PropTypes.func,
+
   /** content to display on Chip (the same to label) */
   children: PropTypes.node,
+
   /** props for Typography of label */
   labelProps: PropTypes.object
 };

package/components/collapse/index.js

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import { css, jsx } from '@emotion/core';
@@ -15,10 +16,12 @@ const Collapse = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }, reference) => {
   const ref = useRef(null);
   const timer = useRef(null);
+
   const _onOpen = () => {
     if (timer.current) {
       clearTimeout(timer.current);
     }
+
     const scrollHeight = ref.current.scrollHeight;
     const duration = Math.min(scrollHeight, 1500);
     ref.current.style.transitionDuration = duration + 'ms';
@@ -27,24 +30,29 @@ const Collapse = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       if (ref.current) {
         ref.current.style.height = 'auto';
       }
+
       onOpened && onOpened(ref.current);
     }, duration);
   };
+
   const _onClose = () => {
     if (ref.current) {
       if (timer.current) {
         clearTimeout(timer.current);
       }
+
       const scrollHeight = ref.current.scrollHeight;
       ref.current.style.height = scrollHeight + 'px';
       timer.current = setTimeout(() => {
         if (ref.current) {
           ref.current.style.height = null;
         }
+
         onClosed && onClosed(ref.current);
       });
     }
   };
+
   useEffect(() => {
     if (open) {
       _onOpen();
@@ -79,14 +87,19 @@ Collapse.defaultProps = {
 Collapse.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
+
   /** Class for component. */
   className: PropTypes.string,
+
   /** Callback fired when the component closed. */
   onClosed: PropTypes.func,
+
   /** Callback fired when the component opened. */
   onOpened: PropTypes.func,
+
   /** If `true`, the content is shown. */
   open: PropTypes.bool,
+
   /** Style inline of component. */
   style: PropTypes.object
 };

package/components/divider/index.js

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
@@ -25,14 +26,17 @@ const Divider = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }, reference) => {
   if (!reference) reference = useRef(null);
   const ref = useRef(null);
+
   const _DividerRoot = DividerRoot(color, width, height);
+
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
-    const _instance = {
-      ...action
+    const _instance = { ...action
     }; // methods
+
     _instance.__proto__ = {}; // hidden methods
+
     currentRef.instance = _instance;
     return currentRef;
   });
@@ -44,6 +48,7 @@ const Divider = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     className: classNames('DGN-UI-Divider', direction, className)
   }), [className, color, direction, height, id, style, width]);
 }));
+
 const DividerRoot = (color, width, height) => css`
     ${noBorder}
     flex-shrink: 0;
@@ -56,6 +61,7 @@ const DividerRoot = (color, width, height) => css`
         ${parseWidthHeight(width || '100%', height || '1px')};
     }
 `;
+
 Divider.defaultProps = {
   className: '',
   color: systemDisabled,
@@ -65,14 +71,19 @@ Divider.defaultProps = {
 Divider.propTypes = {
   /** Class for component. */
   className: PropTypes.string,
+
   /** The color of the component. */
   color: PropTypes.string,
+
   /** direction of divider */
   direction: PropTypes.oneOf(['vertical', 'horizontal']),
+
   /** Height oof the component. */
   height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
   /** Style inline of component. */
   style: PropTypes.object,
+
   /** Width of the component. */
   width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };