diginet-core-ui 1.3.24

package/components/chip/attach.js

@@ -0,0 +1,180 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { Fragment, memo, useMemo, useRef, useState, forwardRef as _nonUse } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import Chip from './';
+import Icon from '../../icons';
+import { Pdf, Word, Sheet, Presentation, Image, Compressed, Another } from '../../icons';
+import { capitalize, getFileType } from '../../utils';
+import { ModalSample, Slider, SliderItem } from '../';
+const FileTypeIcon = {
+  Pdf,
+  Word,
+  Sheet,
+  Presentation,
+  Image,
+  Compressed,
+  Another
+};
+const AttachChip = /*#__PURE__*/memo(({
+  file,
+  maxLength,
+  onView,
+  onDownload,
+  onRemove,
+  ...props
+}) => {
+  const moreActionRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const MoreAction = css` 
+        display: none;
+        justify-content: space-evenly;
+        align-items: center;
+        position: absolute;
+        top: -34px;
+        right: -1px;
+        width: 120px;
+        height: 36px;
+        background: #FFFFFF;
+        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+        border-radius: 4px;
+        &.DGN-UI-Chip-show {
+            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);
+    if (!fileExt) return null;
+    const fileType = getFileType(fileExt);
+    const FileIcon = FileTypeIcon[capitalize(fileType)];
+    return jsx(FileIcon, {
+      size: 'small',
+      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');
+      setTimeout(() => {
+        document.addEventListener('click', clickOutAction);
+      }, 100);
+    }
+  };
+
+  const viewAction = (e, file) => {
+    if (onView) {
+      onView(e, file);
+    } else {
+      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.download = file.FileName;
+        document.body.appendChild(a);
+        a.click();
+        window.URL.revokeObjectURL(url);
+      }).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,
+      title: file.FileName,
+      onClose: () => setOpen(false)
+    }, jsx(Slider, null, jsx(SliderItem, {
+      url: file.URL
+    })));
+  }, [open]);
+  return jsx(Fragment, null, jsx(Chip, _extends({}, props, {
+    clearAble: false,
+    label: renderLabel(file.FileName),
+    startIcon: getStartIcon(),
+    endIcon: jsx(Icon, {
+      name: 'more',
+      width: 24,
+      height: 18,
+      viewBox: true,
+      onClick: onShowMoreOption
+    })
+  }), jsx("div", {
+    css: MoreAction,
+    ref: moreActionRef
+  }, jsx(Icon, {
+    name: 'view',
+    viewBox: true,
+    onClick: e => viewAction(e, file)
+  }), jsx(Icon, {
+    name: 'download',
+    viewBox: true,
+    onClick: e => downloadAction(e, file)
+  }), jsx(Icon, {
+    name: 'delete',
+    viewBox: true,
+    onClick: e => deleteAction(e, file)
+  }))), attachView);
+});
+AttachChip.propTypes = {
+  /** 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
+};
+export default AttachChip;

package/components/chip/index.js

@@ -0,0 +1,340 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { memo, useRef, forwardRef, useEffect, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import { Typography } from '../';
+import Icon from '../../icons';
+import theme from '../../theme/settings';
+const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  viewType,
+  color,
+  size,
+  label,
+  className,
+  refs,
+  onRemove,
+  onClick,
+  onDbClick,
+  onDoubleClick,
+  maxLength,
+  startIcon,
+  endIcon,
+  clearAble,
+  disabled,
+  readOnly,
+  children,
+  ...props
+}, ref) => {
+  if (!ref) {
+    ref = useRef(null);
+  }
+
+  const IconRef = useRef(null);
+  const ChipIcon = css`
+        display: flex;
+        position: relative;
+        justify-content: center;
+        align-items: center;
+        padding: 0 2px;
+        color: inherit;
+        box-sizing: border-box;
+        img {
+            border-radius: 50%;
+        }
+        &.small {
+            width: 24px;
+            height: 24px;
+            img {
+                width: 20px;
+                height: 20px;
+            }
+        }
+        &.medium {
+            max-width: 32px;
+            max-height: 32px;
+            img {
+                min-width: 24px;
+                min-height: 24px;
+            }
+            &:not(.end-icon) {
+                margin-right: 4px;
+            }
+            &.end-icon {
+                width: 32px;
+                height: 26px;
+            }
+        }
+        .clear-icon svg {
+            padding: 0 !important;
+        }
+    `;
+  const ChipLabel = css`
+        display: flex;
+        position: relative;
+        align-items: center;
+        padding-right: ${endIcon || clearAble ? 2 : 10}px;
+        padding-left: ${startIcon ? 2 : 10}px;
+        user-select: none;
+        white-space: nowrap;
+        &.small {
+            max-height: 24px;
+        }
+        &.medium {
+            max-height: 32px;
+        }
+    `;
+  const ChipRoot = css`
+        display: inline-flex;
+        position: relative;
+        align-items: center;
+        margin-right: 15px;
+        padding: 0 6px;
+        color: ${theme.colors.secondary};
+        background: #FFFFFF;
+        border: 1px solid ${theme.colors.border};
+        box-sizing: border-box;
+        border-radius: 20px;
+        cursor: ${onClick || onDbClick ? 'pointer' : 'unset'};
+        &.small {
+            height: 24px;
+        }
+        &.medium {
+            min-height: 32px;
+            padding-top: 2px;
+            padding-bottom: 2px;
+        }
+        &:hover {
+            background: ${theme.colors.hover};
+            border-color: ${theme.colors.borderHover};
+        }
+        &.disabled {
+            color: ${theme.colors.disabled} !important;
+            background-color: ${theme.colors.bgDisabled} !important;
+            pointer-events: none !important;
+            .css-${ChipIcon.name} {
+                path {
+                    fill: ${theme.colors.disabled} !important;
+                }
+            }
+        }
+        &.readOnly {
+            cursor: unset !important;
+            .css-${ChipIcon.name} {
+                pointer-events: none !important;
+            }
+        }
+        &.outlined {
+            &.primary {
+                color: ${theme.colors.primary};
+                border-color: ${theme.colors.borderHover};
+            }
+            &.info {
+                color: ${theme.colors.info};
+                border-color: ${theme.colors.borderFocus};
+            }
+            &.success {
+                color: ${theme.colors.success};
+                border-color: ${theme.colors.success};
+            }
+            &.warning {
+                color: ${theme.colors.warning};
+                border-color: ${theme.colors.warning};
+            }
+            &.danger {
+                color: ${theme.colors.danger};
+                border-color: ${theme.colors.danger};
+            }
+        }
+        &.filled {
+            color: #FFF;
+            .clear-icon {
+                color: #FFF;
+                &:hover {
+                    color: ${theme.colors.danger};
+                }
+            }
+            &.primary {
+                background-color: ${theme.colors.primary};
+                border-color: #3D4D9E;
+            }
+            &.info {
+                background-color: ${theme.colors.borderFocus};
+                border-color: ${theme.colors.linkHover};
+            }
+            &.success {
+                background-color: ${theme.colors.success};
+                border-color: ${theme.colors.button.bgFilledHover.success};
+            }
+            &.warning {
+                background-color: ${theme.colors.warning};
+                border-color: ${theme.colors.button.bgFilledHover.warning};
+            }
+            &.danger {
+                background-color: ${theme.colors.danger};
+                border-color: ${theme.colors.button.bgFilledHover.danger};
+            }
+        }
+    `;
+
+  const onRemoveHandler = () => {
+    if (onRemove) onRemove(ref.current);
+    setTimeout(() => {
+      ref.current && ref.current.remove();
+    }, 0);
+  };
+
+  const handleClick = e => {
+    if (!IconRef.current || !IconRef.current.contains(e.target)) {
+      !!onClick && onClick();
+    }
+  };
+
+  const renderLabel = () => {
+    if (maxLength && label && label.length > maxLength) {
+      label = label.slice(0, maxLength) + '...';
+    }
+
+    return label;
+  };
+
+  useEffect(() => {
+    if (refs) refs(ref);
+  }, []);
+  useEffect(() => {
+    if (color && color !== 'default') {
+      ref.current.classList.add(viewType);
+      ref.current.classList.add(color);
+    }
+
+    return () => {
+      if (ref.current && color && color !== 'default') {
+        ref.current.classList.remove(viewType);
+        ref.current.classList.remove(color);
+      }
+    };
+  }, [viewType, color]);
+  useEffect(() => {
+    if (disabled) {
+      ref.current.classList.add('disabled');
+    }
+
+    return () => {
+      if (disabled && ref.current) {
+        ref.current.classList.remove('disabled');
+      }
+    };
+  }, [disabled]);
+  useEffect(() => {
+    if (readOnly) {
+      ref.current.classList.add('readOnly');
+    }
+
+    return () => {
+      if (readOnly && ref.current) {
+        ref.current.classList.remove('readOnly');
+      }
+    };
+  }, [readOnly]);
+  const startIconView = useMemo(() => startIcon && jsx("div", {
+    css: ChipIcon,
+    className: size
+  }, startIcon), [startIcon]);
+  const labelView = useMemo(() => jsx("div", {
+    css: ChipLabel,
+    className: size
+  }, jsx(Typography, {
+    type: size === 'small' ? 'p2' : 'p1',
+    color: 'inherit'
+  }, renderLabel())), [label]);
+  const endIconView = useMemo(() => clearAble ? jsx("div", {
+    css: ChipIcon,
+    className: 'end-icon ' + size,
+    ref: IconRef
+  }, jsx(Icon, {
+    name: 'Close',
+    className: 'clear-icon',
+    color: viewType === 'outlined' && color ? 'inherit' : undefined,
+    width: 10,
+    height: 10,
+    onClick: onRemoveHandler
+  })) : endIcon && jsx("div", {
+    css: ChipIcon,
+    className: 'end-icon ' + size,
+    ref: IconRef
+  }, endIcon), [clearAble]);
+  return jsx("div", _extends({
+    css: ChipRoot,
+    ref: ref
+  }, props, {
+    className: ['DGN-UI-Chip', size, className].join(' ').trim(),
+    onClick: readOnly ? null : handleClick,
+    onDoubleClick: onDbClick || onDoubleClick
+  }), startIconView, labelView, endIconView, children);
+}));
+Chip.defaultProps = {
+  label: '',
+  className: '',
+  viewType: 'outlined',
+  size: 'small',
+  clearAble: false
+};
+Chip.propTypes = {
+  /** content to display in Chip */
+  label: PropTypes.string,
+
+  /** class of Chip element */
+  className: PropTypes.string,
+
+  /** max length content to display was allowed */
+  maxLength: PropTypes.number,
+
+  /** 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(['outlined', 'filled']),
+
+  /** color for text or background of Chip */
+  color: PropTypes.oneOf(['default', 'primary', 'info', 'success', 'warning', 'danger']),
+
+  /** size of Chip */
+  size: PropTypes.oneOf(['small', 'medium']),
+
+  /** 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,
+
+  /** any props else */
+  props: PropTypes.any
+};
+export default Chip;