diginet-core-ui 1.4.39 → 1.4.40

package/components/alert/index.js

@@ -1,257 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import { ButtonIcon, Icon, LinearProgress } from "./..";
-import PropTypes from 'prop-types';
-import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { animations } from "../../styles/animation";
-import { bgColor, border, borderRadius4px, boxBorder, breakWord, displayBlock, flexRow, itemsCenter, justifyStart, positionRelative, textColor, userSelectNone } from "../../styles/general";
-import { useTheme } from "../../theme";
-import useThemeProps from "../../theme/utils/useThemeProps";
-import { classNames, getProp, hexToRGBA, useDelayUnmount } from "../../utils";
-const iconMap = new Map([['info', 'Info'], ['success', 'ApprovalFilled'], ['warning', 'Warning'], ['danger', 'CancelFilled']]);
-const maxWidthMap = new Map([['tiny', 320], ['small', 400], ['medium', 480]]);
-const primaryTypoMap = new Map([['tiny', 'typography.heading5'], ['small', 'typography.heading4'], ['medium', 'typography.heading3']]);
-const iconSizeMap = new Map([['tiny', 16], ['small', 20], ['medium', 24]]);
-const linearProgressSizeMap = new Map([['tiny', 2], ['small', 3], ['medium', 4]]);
-const transitionTime = 300;
-const Alert = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
-  if (!reference) reference = useRef(null);
-  const theme = useTheme();
-  const {
-    colors
-  } = theme;
-
-  // props priority: `inProps` > `themeDefaultProps`
-  const props = useThemeProps({
-    props: inProps,
-    name: 'Alert'
-  });
-  const {
-    action = {},
-    autoDisappear,
-    children,
-    className,
-    clearAble,
-    color,
-    duration,
-    onClose,
-    progressing,
-    secondary,
-    size,
-    text,
-    type: typeProp
-  } = props;
-  const type = typeProp || color;
-  const ref = useRef(null);
-  const clearIconRef = useRef(null);
-  const [percentState, setPercentState] = useState(100);
-  const [isClose, setIsClose] = useState(false);
-  const showAlert = useDelayUnmount(!isClose, transitionTime);
-  const mainColor = getProp(colors, type, type);
-  const opacityColor = hexToRGBA(getProp(colors, mainColor, mainColor), 0.15);
-  const iconName = iconMap.get(type);
-  const iconSize = iconSizeMap.get(size);
-  const _AlertContainerCSS = AlertContainerCSS(size, theme);
-  const _AlertInfoCSS = AlertInfoCSS(mainColor, opacityColor, theme);
-  const _AlertIconCSS = AlertIconCSS(theme);
-  const _AlertTextCSS = AlertTextCSS(clearAble, theme);
-  const _AlertPrimaryCSS = AlertPrimaryCSS(secondary, size, theme);
-  const _AlertSecondaryCSS = AlertSecondaryCSS(size, theme);
-  const _linearProgressCSS = linearProgressCSS(size, theme);
-  const _onClose = () => {
-    setIsClose(true);
-    onClose === null || onClose === void 0 ? void 0 : onClose();
-  };
-  useEffect(() => {
-    setTimeout(() => {
-      setPercentState(0);
-    }, 100);
-  }, []);
-  useEffect(() => {
-    if (ref.current && isClose) ref.current.style.opacity = 0;
-  }, [isClose]);
-  useEffect(() => {
-    setTimeout(() => {
-      if (autoDisappear) _onClose();
-    }, duration);
-  }, [autoDisappear]);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = {
-      ...action
-    }; // methods
-    _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    return currentRef;
-  });
-  const AlertView = useMemo(() => {
-    let node = children;
-    if (!node) {
-      node = jsx(Icon, {
-        name: iconName,
-        width: iconSize,
-        height: iconSize,
-        color: 'currentColor',
-        viewBox: true
-      });
-    }
-    return jsx("div", {
-      css: _AlertInfoCSS,
-      className: classNames('DGN-UI-Alert', className)
-    }, jsx("span", {
-      css: _AlertIconCSS,
-      className: 'DGN-UI-Alert-Icon'
-    }, node), jsx("span", {
-      css: _AlertTextCSS,
-      className: 'DGN-UI-Alert-Content'
-    }, jsx("span", {
-      css: _AlertPrimaryCSS,
-      className: 'DGN-UI-Alert-Content-Primary'
-    }, children ? typeof children === 'string' ? children : jsx("children", null) : text), secondary && jsx("span", {
-      css: _AlertSecondaryCSS,
-      className: 'DGN-UI-Alert-Content-Secondary'
-    }, secondary)), jsx("span", {
-      css: AlertClearIconCSS,
-      onClick: _onClose,
-      ref: clearIconRef,
-      className: 'DGN-UI-Alert-Clear'
-    }, clearAble ? jsx(ButtonIcon, {
-      circular: true,
-      viewType: 'text',
-      size: size,
-      color: type,
-      name: 'Close'
-    }) : null));
-  }, [children, className, clearAble, color, onClose, secondary, size, text, typeProp, isClose, mainColor, opacityColor, theme]);
-  const LinearView = useMemo(() => {
-    return progressing ? jsx("span", {
-      css: _linearProgressCSS,
-      className: 'DGN-UI-Progress'
-    }, jsx(LinearProgress, {
-      determinate: true,
-      background: 'transparent',
-      color: mainColor,
-      percent: percentState,
-      duration: duration / 1000,
-      height: linearProgressSizeMap.get(size),
-      style: {
-        boxShadow: 'none'
-      }
-    })) : null;
-  }, [duration, size, progressing, percentState, theme]);
-  return showAlert ? jsx("div", {
-    css: _AlertContainerCSS,
-    className: 'DGN-UI-Container-Alert',
-    ref: ref
-  }, AlertView, LinearView) : null;
-}));
-const fadeIn = animations.fadeIn;
-const AlertContainerCSS = (size, {
-  zIndex
-}) => css`
-    ${positionRelative};
-    ${displayBlock};
-    max-width: ${maxWidthMap.get(size)}px;
-    transition: opacity ${transitionTime}ms ease;
-    margin-bottom: 1rem;
-    pointer-events: auto;
-    z-index: ${zIndex(1)};
-    animation: ${fadeIn} ${transitionTime}ms ease;
-`;
-const AlertInfoCSS = (mainColor, opacityColor, {
-  colors,
-  spacing
-}) => css`
-    ${flexRow};
-    ${positionRelative};
-    ${boxBorder};
-    ${borderRadius4px};
-    ${breakWord};
-    ${border(1, mainColor)};
-    ${textColor(mainColor)};
-    background-image: linear-gradient(${opacityColor}, ${opacityColor});
-    ${bgColor(getProp(colors, 'system/standard'))};
-    width: 100%;
-    min-width: 320px;
-    padding: ${spacing([0, 1, 0, 4])};
-    opacity: 1;
-`;
-const AlertIconCSS = ({
-  spacing
-}) => css`
-    display: inherit;
-    margin-right: ${spacing([2.5])};
-    padding: ${spacing([2, 0])};
-`;
-const AlertTextCSS = (clearAble, {
-  spacing
-}) => css`
-    ${displayBlock};
-    margin-right: ${spacing([clearAble ? 2.5 : 0])};
-    padding: ${spacing([2, 0])};
-    align-self: center;
-`;
-const AlertPrimaryCSS = (secondary, size, theme) => css`
-    ${flexRow};
-    ${positionRelative};
-    ${itemsCenter};
-    ${justifyStart};
-    ${userSelectNone};
-    ${secondary ? getProp(theme, primaryTypoMap.get(size)) : getProp(theme, 'typography.paragraph1')};
-`;
-const AlertSecondaryCSS = (size, {
-  typography
-}) => css`
-    ${displayBlock};
-    ${userSelectNone};
-    ${size === 'tiny' ? typography.paragraph3 : typography.paragraph2};
-`;
-const AlertClearIconCSS = css`
-    margin-left: auto;
-`;
-const linearProgressCSS = (size, {
-  spacing
-}) => css`
-    ${displayBlock};
-    ${positionRelative};
-    margin-top: ${spacing([size === 'medium' ? 1 : 0.5])};
-    padding: ${spacing([0, 1.25])};
-`;
-
-// Alert.defaultProps = {
-//     autoDisappear: false,
-//     className: '',
-//     clearAble: true,
-//     color: 'semantic/info',
-//     duration: 2000,
-//     progressing: false,
-//     size: 'medium',
-// };
-
-Alert.propTypes = {
-  /** Automatically remove the Alert component after the timer ends (milliseconds). */
-  autoDisappear: PropTypes.bool,
-  /** The element to display in alert like text props (priority). */
-  children: PropTypes.node,
-  /** Class for component. */
-  className: PropTypes.string,
-  /** If `true`, show clear icon to close alert. */
-  clearAble: PropTypes.bool,
-  /** The amount of time the alert is displayed. The unit is the milliseconds. */
-  duration: PropTypes.number,
-  /** Callback fired when the component closed. */
-  onClose: PropTypes.func,
-  /** If `true`, show linear progress in duration time.*/
-  progressing: PropTypes.bool,
-  /** The secondary text to show in alert (under primary). */
-  secondary: PropTypes.string,
-  /** The size of the component. */
-  size: PropTypes.oneOf(['tiny', 'small', 'medium']),
-  /** The text to show in alert. */
-  text: PropTypes.string,
-  /** Type of the component. */
-  type: PropTypes.oneOf(['info', 'success', 'warning', 'danger'])
-};
-export default Alert;

package/components/alert/notify.js

@@ -1,140 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import PropTypes from 'prop-types';
-import { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import ReactDOM, { createPortal } from 'react-dom';
-import { bgTransparent, pointerEventsNone, positionFixed } from "../../styles/general";
-import { useTheme } from "../../theme";
-import useThemeProps from "../../theme/utils/useThemeProps";
-import { classNames } from "../../utils";
-import Alert from "./";
-const positionVerticalMap = new Map([['top', css`
-            top: 15px;
-        `], ['center', css`
-            top: 50%;
-            transform: translateY(-50%);
-        `], ['bottom', css`
-            display: flex;
-            flex-direction: column-reverse;
-            bottom: 0;
-        `]]);
-const positionHorizontalMap = new Map([['left', css`
-            left: 15px;
-        `], ['center', css`
-            left: 50%;
-            transform: translateX(-50%);
-        `], ['right', css`
-            right: 15px;
-        `]]);
-const Notify = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
-  if (!reference) reference = useRef(null);
-  const theme = useTheme();
-
-  // props priority: `inProps` > `themeDefaultProps`
-  const props = useThemeProps({
-    props: inProps,
-    name: 'Notify'
-  });
-  const {
-    action = {},
-    className,
-    getAddNotify,
-    id,
-    position,
-    style,
-    ...other
-  } = props;
-  const ref = useRef(null);
-  const [positionState, setPositionState] = useState(position);
-  const _AlertCSS = AlertCSS(theme);
-  const PositionVerticalCSS = positionVerticalMap.get((positionState === null || positionState === void 0 ? void 0 : positionState.vertical) || 'bottom');
-  const PositionHorizontalCSS = positionHorizontalMap.get((positionState === null || positionState === void 0 ? void 0 : positionState.horizontal) || 'center');
-  const showNotify = (message, {
-    position,
-    ...options
-  } = {}) => {
-    options = typeof options === 'object' ? options : {};
-    if (position) {
-      setPositionState(position);
-    }
-    const el = document.createElement('div');
-    el.className = 'DGN-UI-Notify-Alert-Item';
-    ReactDOM.render(jsx(Alert
-    // onClose={() => el.remove()}
-    , {
-      secondary: message,
-      ...other,
-      ...options
-    }), ref.current.appendChild(el));
-  };
-  useEffect(() => {
-    if (getAddNotify && typeof getAddNotify === 'function') getAddNotify(showNotify);
-  }, [other]);
-  useEffect(() => {
-    setPositionState(position);
-  }, [position]);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = {
-      show: showNotify,
-      ...action
-    }; // methods
-    _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    currentRef.add = showNotify;
-    return currentRef;
-  });
-  const NotifyContainerView = jsx("div", {
-    ref: ref,
-    css: [_AlertCSS, PositionVerticalCSS, PositionHorizontalCSS],
-    id: id,
-    style: style,
-    className: classNames('DGN-UI-Notify-Alert', (position === null || position === void 0 ? void 0 : position.vertical) || 'center' + '-' + (position === null || position === void 0 ? void 0 : position.horizontal) || 'center', className)
-  });
-  return /*#__PURE__*/createPortal(NotifyContainerView, document.body);
-}));
-const AlertCSS = ({
-  zIndex
-}) => css`
-    ${positionFixed};
-    ${pointerEventsNone};
-    ${bgTransparent};
-    z-index: ${zIndex(2)};
-`;
-
-// Notify.defaultProps = {
-//     className: '',
-//     position: {
-//         vertical: 'bottom',
-//         horizontal: 'center',
-//     },
-//     style: {},
-// };
-
-Notify.propTypes = {
-  /** Class for component. */
-  className: PropTypes.string,
-  /**
-   * used to set position of Alert (is a string or an object)
-   * string is center (obligatory) as {vertical: 'center', horizontal: 'center'}
-   */
-  position: PropTypes.oneOfType([PropTypes.oneOf(['center']), PropTypes.shape({
-    horizontal: PropTypes.oneOf(['center', 'left', 'right']),
-    vertical: PropTypes.oneOf(['bottom', 'center', 'top'])
-  })]),
-  /** Style inline of component. */
-  style: PropTypes.object,
-  /** Any [props](https://core.diginet.com.vn/ui/?path=/docs/alert--basic) of Alert */
-  props: PropTypes.any
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * show(message, option): Show notify
-   *  * @param {message} - number
-   *  * @param {options} - object
-   *      * {[Props](https://core.diginet.com.vn/ui/?path=/docs/alert--basic) applied to the `Alert`.}
-   */
-};
-export default Notify;