diginet-core-ui 1.3.24

package/components/alert/index.js

@@ -0,0 +1,264 @@
+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, useState, useEffect, useMemo, useRef, forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import { info1, info9, success1, success9, warning1, warning9, danger1, danger9 } from '../../styles/colors';
+import theme from '../../theme/settings';
+import { Close, Archive, Info, Warning, Block } from '../../icons';
+import LinearProgress from '../progress/linear';
+const icons = {
+  primary: jsx(Info, null),
+  success: jsx(Archive, null),
+  warning: jsx(Warning, null),
+  danger: jsx(Block, {
+    color: 'currentColor'
+  })
+};
+const colors = {
+  color: {
+    primary: theme.colors.info,
+    success: theme.colors.success,
+    warning: theme.colors.warning,
+    danger: theme.colors.danger
+  },
+  backgroundColor: {
+    primary: info1,
+    success: success1,
+    warning: warning1,
+    danger: danger1
+  },
+  borderColor: {
+    primary: theme.colors.info,
+    success: theme.colors.success,
+    warning: theme.colors.warning,
+    danger: theme.colors.danger
+  },
+  hover: {
+    primary: info9,
+    success: success9,
+    warning: warning9,
+    danger: danger9
+  }
+};
+const Alert = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  color,
+  text,
+  secondary,
+  size,
+  className,
+  progressing,
+  autoDisappear,
+  duration,
+  clearAble,
+  refs,
+  onClose,
+  usedByNotify,
+  children,
+  ...props
+}, ref) => {
+  const clearIconRef = useRef(null);
+  const [percentState, setPercentState] = useState(100);
+  const AlertContainer = css`
+        position: relative;
+        display: block;
+        margin-bottom: 1rem;
+        transition: opacity ${progressing ? duration / 2 + 1 : duration * 1}s ease ${progressing ? duration / 2 : 0}s;
+        pointer-events: auto;
+        z-index: 9001;
+    `;
+  const AlertInfo = css`
+        display: flex;
+        position: relative;
+        width: 100%;
+        min-width: 333px;
+        border: 1px solid ${colors.borderColor[color]};
+        color: ${colors.color[color]};
+        background-color: ${colors.backgroundColor[color]};
+        box-sizing: border-box;
+        border-radius: 4px;
+        padding: 8px 16px;
+        opacity: 1;
+        word-break: break-word;
+    `;
+  const AlertIcon = css`
+        display: inherit;
+        margin-right: 10px;
+        max-width: ${/^(small|sm)$/i.test(size) ? 16 : 24}px;
+        max-height: ${/^(small|sm)$/i.test(size) ? 16 : 24}px;
+    `;
+  const AlertText = css`
+        display: block;
+        margin-right: 10px;
+    `;
+  const AlertPrimary = css`
+        display: flex;
+        position: relative;
+        align-items: center;
+        justify-content: flex-start;
+        font-family: ${theme.typography.fontFamily};
+        font-style: normal;
+        font-weight: 500;
+        font-size: ${/^(small|sm)$/i.test(size) ? 14 : 16}px;
+        line-height: ${/^(small|sm)$/i.test(size) ? 16 : 24}px;
+        user-select: none;
+    `;
+  const AlertSecondary = css`
+        display: block;
+        margin-right: 10px;
+        font-family: ${theme.typography.fontFamily};
+        font-style: normal;
+        font-weight: 500;
+        font-size: ${/^(small|sm)$/i.test(size) ? 12 : 14}px;
+        line-height: 16px;
+        user-select: none;
+    `;
+  const AlertClearIcon = css`
+        display: inherit;
+        margin-left: auto;
+        color: ${colors.color[color]};
+        cursor: pointer;
+        max-width: ${/^(small|sm)$/i.test(size) ? 16 : 24}px;
+        max-height: ${/^(small|sm)$/i.test(size) ? 16 : 24}px;
+        &:hover {
+            color: ${colors.hover[color]};
+        }
+    `;
+  const linearProgressStyle = css`
+        display: block;
+        position: relative;
+        margin-top: ${/^(small|sm)$/i.test(size) ? 2 : 6}px;
+        padding: 0 5px;
+    `;
+
+  const onClearAlert = (el, urgency) => {
+    var _el$parentNode;
+
+    if (!el) return;
+    el.style.pointerEvent = 'none';
+    const alertNode = el === null || el === void 0 ? void 0 : (_el$parentNode = el.parentNode) === null || _el$parentNode === void 0 ? void 0 : _el$parentNode.parentNode;
+
+    if (alertNode) {
+      if (urgency) {
+        alertNode.style.transition = `opacity 1s ease`;
+        alertNode.style.opacity = 1;
+      }
+
+      setTimeout(() => {
+        alertNode.style.opacity = 0;
+      }, 0);
+      setTimeout(() => {
+        if (onClose) onClose(alertNode);
+        alertNode.remove();
+      }, !urgency && progressing ? duration * 1000 + 300 : duration * 1000);
+    }
+  };
+
+  const AlertView = useMemo(() => jsx("div", _extends({
+    css: AlertInfo,
+    className: ['DGN-UI-Alert', className].join(' ').trim()
+  }, props), jsx("span", {
+    css: AlertIcon
+  }, icons[color]), jsx("span", {
+    css: AlertText
+  }, jsx("span", {
+    css: AlertPrimary
+  }, children ? typeof children === 'string' ? children : jsx("children", null) : text), secondary && jsx("span", {
+    css: AlertSecondary
+  }, secondary)), jsx("span", {
+    css: AlertClearIcon,
+    onClick: e => onClearAlert(e.currentTarget, true),
+    ref: clearIconRef
+  }, clearAble ? jsx(Close, {
+    color: 'currentColor',
+    height: /small/.test(size) ? 16 : 24,
+    width: /small/.test(size) ? 16 : 24,
+    viewBox: true
+  }) : null)), [color, text, clearAble]);
+  const LinearView = useMemo(() => {
+    return progressing ? jsx("span", {
+      css: linearProgressStyle
+    }, jsx(LinearProgress, {
+      determinate: true,
+      background: 'transparent',
+      color: colors.color[color],
+      percent: percentState,
+      duration: duration,
+      height: /^(small|sm)$/i.test(size) ? 2 : 4,
+      style: {
+        boxShadow: 'none'
+      }
+    })) : null;
+  }, [percentState]);
+  useEffect(() => {
+    if (refs) refs(ref);
+
+    if (progressing) {
+      setTimeout(() => {
+        setPercentState(0);
+      }, 1);
+    }
+
+    if (autoDisappear) {
+      onClearAlert(clearIconRef.current);
+    }
+  }, []);
+  return jsx("div", {
+    css: AlertContainer,
+    ref: ref
+  }, AlertView, LinearView);
+}));
+Alert.defaultProps = {
+  color: 'primary',
+  size: 'medium',
+  className: '',
+  clearAble: true,
+  progressing: false,
+  usedByNotify: false,
+  autoDisappear: false,
+  duration: 5
+};
+Alert.propTypes = {
+  /** color is a string, it's background color of Alert */
+  color: PropTypes.oneOf(['primary', 'success', 'warning', 'danger']),
+
+  /** class for Alert component */
+  className: PropTypes.string,
+
+  /** The text to show in alert */
+  text: PropTypes.string,
+
+  /** The secondary text to show in alert (under primary) */
+  secondary: PropTypes.string,
+
+  /** size is a string, size of Alert */
+  size: PropTypes.oneOf(['small', 'medium']),
+
+  /** Display clear icon to close alert */
+  clearAble: PropTypes.bool,
+
+  /** use to display linear progress in duration time show Alert */
+  progressing: PropTypes.bool,
+
+  /** Automatically remove the Alert component after the timer ends (duration) */
+  autoDisappear: PropTypes.bool,
+
+  /** The amount of time the alert is displayed. The unit is the second */
+  duration: PropTypes.number,
+
+  /** refs is a function, use to get ref of Alert component */
+  refs: PropTypes.func,
+
+  /** The function will run after remove an Alert component */
+  onClose: PropTypes.func,
+
+  /** The element to display in alert like text props (priority) */
+  children: PropTypes.node,
+
+  /** any props else */
+  props: PropTypes.any
+};
+export default Alert;

package/components/alert/notify.js

@@ -0,0 +1,192 @@
+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); }
+
+import React, { memo, useEffect, forwardRef, useImperativeHandle } from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import Alert from './';
+import { randomString } from '../../utils';
+const positions = {
+  general: {
+    position: 'fixed',
+    zIndex: 9002,
+    backgroundColor: 'transparent',
+    pointerEvents: 'none'
+  },
+  vertical: {
+    top: {
+      top: '15px'
+    },
+    center: {
+      top: '50%',
+      transform: 'translateY(-50%)'
+    },
+    bottom: {
+      display: 'flex',
+      flexDirection: 'column-reverse',
+      bottom: 0
+    }
+  },
+  horizontal: {
+    left: {
+      left: '15px'
+    },
+    center: {
+      left: '50%',
+      transform: 'translateX(-50%)'
+    },
+    right: {
+      right: '15px'
+    }
+  }
+};
+const str = randomString(6, {
+  allowSymbol: false
+});
+const AlertNotify = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  position,
+  getAddNotify,
+  width,
+  maxWidth,
+  height,
+  maxHeight,
+  ...props
+}, reference) => {
+  // Return true if it's a new position
+  const checkPosition = pos => {
+    if (pos === position || pos.vertical === (position.vertical || 'bottom') && pos.horizontal === (position.horizontal || 'center')) {
+      return false;
+    }
+
+    if (pos === 'center') {
+      pos = {
+        vertical: 'center',
+        horizontal: 'center'
+      };
+    }
+
+    if (pos.vertical && pos.horizontal && /^top|center|bottom$/.test(pos.vertical) && /^left|center|right$/.test(pos.horizontal)) {
+      return true;
+    }
+
+    return false;
+  };
+
+  const renderNotifyAlertPosition = (pos, className) => {
+    if (pos === 'center') {
+      pos = {
+        vertical: 'center',
+        horizontal: 'center'
+      };
+    }
+
+    const el = document.createElement('div');
+    el.className = `Notify-Alert-${className || pos.vertical + '-' + pos.horizontal}`;
+    Object.assign(el.style, positions.general, positions.vertical[pos.vertical || 'bottom'], positions.horizontal[pos.horizontal || 'center'], pos.vertical === pos.horizontal ? {
+      transform: 'translate(-50%, -50%)'
+    } : {}, {
+      width,
+      maxWidth,
+      height,
+      maxHeight
+    });
+    document.body.appendChild(el);
+  };
+
+  const onClose = (e, removePosition) => {
+    var _e$parentNode;
+
+    (_e$parentNode = e.parentNode) === null || _e$parentNode === void 0 ? void 0 : _e$parentNode.remove();
+
+    if (removePosition) {
+      const node = document.querySelector(`div[class^="Notify-Alert-${removePosition.vertical}-${removePosition.horizontal}"]`);
+
+      if (node && node.childNodes && !node.childNodes.length) {
+        node.remove();
+      }
+    }
+  };
+
+  const onAddAlert = (message, {
+    position,
+    ...options
+  } = {}) => {
+    options = typeof options === 'object' ? options : {};
+    const el = document.createElement('div');
+    el.className = `Notify-Alert-${str}-item`;
+
+    if (position && checkPosition(position)) {
+      if (!document.querySelector(`div[class^="Notify-Alert-${position.vertical}-${position.horizontal}"]`)) {
+        renderNotifyAlertPosition(position);
+      }
+
+      ReactDOM.render( /*#__PURE__*/React.createElement(Alert, _extends({
+        onClose: e => onClose(e, position),
+        usedByNotify: true
+      }, props, options), message), document.querySelector(`div[class^="Notify-Alert-${position.vertical}-${position.horizontal}"]`).appendChild(el));
+    } else {
+      ReactDOM.render( /*#__PURE__*/React.createElement(Alert, _extends({
+        onClose: onClose,
+        usedByNotify: true
+      }, props, options), message), document.querySelector(`div[class^="Notify-Alert-"]`).appendChild(el));
+    }
+  };
+
+  useEffect(() => {
+    if (getAddNotify && typeof getAddNotify === 'function') getAddNotify(onAddAlert);
+  }, [props]);
+  useEffect(() => {
+    renderNotifyAlertPosition(position, str);
+    return () => {
+      document.querySelector(`div[class^="Notify-Alert-${str}"]`).remove();
+    };
+  }, [position, width, maxWidth, height, maxHeight]);
+  useImperativeHandle(reference, () => ({
+    add: onAddAlert
+  }));
+  return null;
+}));
+AlertNotify.defaultProps = {
+  position: {
+    vertical: 'bottom',
+    horizontal: 'center'
+  }
+};
+AlertNotify.propTypes = {
+  /**
+   * 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({
+    vertical: PropTypes.oneOf(['top', 'center', 'bottom']).isRequired,
+    horizontal: PropTypes.oneOf(['left', 'center', 'right']).isRequired
+  })]),
+
+  /**
+   * get the function used to add a new alert<br />
+   * 2 parameters:<br />
+   * + message: message for notify<br />
+   * + options: is an object insist {<br />
+   *      position: position other than the default (if necessary)<br />
+   *      duration: new duration,<br />
+   *      color: new color,<br />
+   *      progressing: new progressing value,<br />
+   *      autoDisappear: new autoDisappear value,<br />
+   *      size: new autoDisappear,<br />
+   *      and any props else in Alert component <br />
+   * }
+   */
+  getAddNotify: PropTypes.func.isRequired,
+
+  /** the width of the alert box  */
+  width: PropTypes.string,
+
+  /** the maximum width of the alert box */
+  maxWidth: PropTypes.string,
+
+  /** the height of the alert box */
+  height: PropTypes.string,
+
+  /** the maximum height of the alert box */
+  maxHeight: PropTypes.string
+};
+export default AlertNotify;