diginet-core-ui 1.3.90 → 1.3.91

package/components/popup/proposals_popup.js

@@ -1,321 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { memo, useEffect, useMemo, useRef, forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
-import theme from "../../theme/settings";
-import { Button, ButtonIcon } from "../";
-import { Close, Approval } from "../../icons";
-import TextInput from "../form-control/text-input";
-import { useTheme } from "../../theme";
-const {
-  zIndex
-} = useTheme();
-const ProposalsPopup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  open,
-  clearAble,
-  pressESCToClose,
-  readOnly,
-  disabled,
-  style,
-  popupStyle,
-  anchor,
-  anchorOrigin,
-  transformOrigin,
-  refs,
-  onClose,
-  onConfirm,
-  onCancel,
-  value,
-  defaultValue,
-  type,
-  viewType,
-  error,
-  label,
-  buttonText,
-  placeholder,
-  ...props
-}, ref) => {
-  if (!ref) {
-    ref = useRef(null);
-  }
-  const PopupContainer = css`
-                display: flex;
-                position: fixed;
-                width: 80%;
-                max-width: 480px;
-                z-index: ${zIndex()};
-                transform: scale(0);
-                transition: transform 0.2s linear;
-                &.open {
-                    transform: scale(1);
-                }
-            `;
-  const PopupFrame = css`
-                display: block;
-                align-items: baseline;
-                position: relative;
-                background: #ffffff;
-                width: 100%;
-                box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-                border-radius: 4px;
-                padding: 24px 16px;
-            `;
-  const PopupContent = css`
-                width: 100%;
-                height: 100%;
-                display: flex;
-                flex-direction: column;
-                justify-content: space-between;
-                padding: 0 24px;
-                box-sizing: border-box;
-            `;
-  const PopupInput = css`
-                display: block;
-                width: 100%;
-            `;
-  const PopupAction = css`
-                display: block;
-                margin-left: auto;
-            `;
-  const PopupClearIcon = css`
-                display: block;
-                position: absolute;
-                width: 24px;
-                height: 24px;
-                top: 16px;
-                right: 24px;
-                color: ${theme.colors.system.rest};
-                cursor: pointer;
-                &:hover {
-                    color: '#404456' !important;
-                }
-            `;
-  const onClosePopup = () => {
-    if (onClose) onClose();
-  };
-  const onProposals = () => {
-    // eslint-disable-next-line no-undef
-    const input = PopupInputRef.current.querySelector('input');
-    if (/^cancel$/i.test(type)) {
-      if (onCancel) onCancel(input);
-    } else if (onConfirm) onConfirm(input);
-  };
-  const pressESCHandler = event => {
-    if (event.key === 'Escape') {
-      onClosePopup();
-    }
-  };
-  const calPosition = (position, originBounding) => {
-    switch (position) {
-      case 'bottom':
-      case 'right':
-        {
-          return [originBounding.height, originBounding.width];
-        }
-      case 'center':
-        {
-          return [originBounding.height / 2, originBounding.width / 2];
-        }
-      default:
-        return [0, 0];
-    }
-  };
-  useEffect(() => {
-    if (refs) refs(ref);
-  }, []);
-  useEffect(() => {
-    if (open && ref.current) {
-      let top = 0,
-        left = 0,
-        vertical = 0,
-        horizontal = 0;
-
-      // Position's anchor
-      if (anchorOrigin && anchor) {
-        if (anchor.current) {
-          anchor = anchor.current;
-        }
-        if (anchorOrigin === 'center') {
-          anchorOrigin = {
-            vertical: 'center',
-            horizontal: 'center'
-          };
-        }
-        const anchorBounding = anchor.getBoundingClientRect();
-        vertical = anchorBounding.y + calPosition(anchorOrigin.vertical, anchorBounding)[0];
-        horizontal = anchorBounding.x + calPosition(anchorOrigin.horizontal, anchorBounding)[1];
-      }
-
-      // Position's transform
-      if (transformOrigin) {
-        if (transformOrigin === 'center') {
-          transformOrigin = {
-            vertical: 'center',
-            horizontal: 'center'
-          };
-        }
-        const offsetHeight = ref.current.offsetHeight;
-        const offsetWidth = ref.current.offsetWidth;
-        switch (transformOrigin.vertical) {
-          case 'center':
-            top = vertical - offsetHeight / 2;
-            break;
-          case 'bottom':
-            top = vertical - offsetHeight;
-            break;
-          default:
-            top = vertical;
-        }
-        switch (transformOrigin.horizontal) {
-          case 'center':
-            left = horizontal - offsetWidth / 2;
-            break;
-          case 'right':
-            left = horizontal - offsetWidth;
-            break;
-          default:
-            left = horizontal;
-        }
-
-        // Reset position if the element overflow window screen size
-        if (top < 0) {
-          top = 0;
-        } else if (top + offsetHeight > window.innerHeight) {
-          top = window.innerHeight - offsetHeight;
-        }
-        if (left < 0) {
-          left = 0;
-        } else if (left + offsetWidth > window.innerWidth) {
-          left = window.innerWidth - offsetWidth;
-        }
-        ref.current.style.top = top + 'px';
-        ref.current.style.left = left + 'px';
-        ref.current.style.transformOrigin = `${transformOrigin.horizontal || 'left'} ${transformOrigin.vertical || 'top'}`;
-      }
-      ref.current.classList.add('open');
-
-      // Allow press ESC to close popup
-      if (pressESCToClose) {
-        document.addEventListener('keydown', pressESCHandler);
-      }
-    }
-    return () => {
-      if (open && ref.current) {
-        ref.current.classList.remove('open');
-        if (pressESCToClose) {
-          document.removeEventListener('keydown', pressESCHandler);
-        }
-      }
-    };
-  }, [open]);
-  const popupInput = useMemo(() => jsx("div", {
-    css: PopupInput
-  }, jsx(TextInput, {
-    error: error,
-    viewType: viewType,
-    label: label,
-    value: value,
-    defaultValue: defaultValue,
-    placeholder: placeholder,
-    disabled: disabled,
-    readOnly: readOnly,
-    style: {
-      marginLeft: 0,
-      marginRight: 0,
-      marginTop: 0
-    }
-  })), [label, placeholder, value, error, disabled]);
-  const popupAction = useMemo(() => {
-    const IconName = /cancel/i.test(type) ? Close : Approval;
-    const text = buttonText || (/cancel/i.test(type) ? 'Từ chối' : 'Duyệt');
-    return jsx("div", {
-      css: PopupAction
-    }, jsx(Button, {
-      viewType: 'outlined',
-      style: {
-        border: 'none',
-        padding: 0,
-        minWidth: 'auto',
-        backgroundColor: 'transparent'
-      },
-      color: /cancel/i.test(type) ? 'danger' : 'success',
-      onClick: onProposals,
-      disabled: disabled,
-      startIcon: jsx(IconName, {
-        color: 'currentColor',
-        viewBox: true,
-        bgFill: 'none',
-        outline: true
-      })
-    }, text));
-  }, [type, buttonText, disabled]);
-  const popupClearIcon = useMemo(() => clearAble && jsx("div", {
-    css: PopupClearIcon
-  }, jsx(ButtonIcon, {
-    viewType: 'ghost',
-    name: 'Close',
-    onClick: onClosePopup
-  })), [clearAble]);
-  return jsx("div", {
-    css: PopupContainer,
-    ref: ref,
-    style: style
-  }, jsx("div", {
-    css: PopupFrame,
-    ...props,
-    style: popupStyle
-  }, jsx("div", {
-    css: PopupContent
-  }, popupInput, popupAction), popupClearIcon));
-}));
-ProposalsPopup.defaultProps = {
-  type: 'confirm',
-  viewType: 'underlined',
-  clearAble: true,
-  open: false,
-  pressESCToClose: true,
-  anchorOrigin: {},
-  transformOrigin: {}
-};
-ProposalsPopup.propTypes = {
-  /** type of Popup, corresponding to the button */
-  type: PropTypes.oneOf(['confirm', 'cancel']),
-  /** type of TextInput */
-  viewType: PropTypes.oneOf(['underlined', 'outlined']),
-  /** placeholder to display in TextInput */
-  placeholder: PropTypes.string,
-  /** label to display on TextInput */
-  label: PropTypes.string,
-  /** the content to display in button */
-  buttonText: PropTypes.string,
-  /** value to display in TextInput */
-  value: PropTypes.string,
-  /** display clear icon if true */
-  clearAble: PropTypes.bool,
-  /** show Popup if true */
-  open: PropTypes.bool,
-  /** allow close Popup when press ESC */
-  pressESCToClose: PropTypes.bool,
-  /** style inline for Popup container */
-  style: PropTypes.object,
-  /** style inline for Popup */
-  popupStyle: PropTypes.object,
-  /** positions are displayed under this object */
-  anchor: PropTypes.object,
-  /** The root is displayed according to the position of the anchor */
-  anchorOrigin: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-  // {vertical: 'top', horizontal: 'left'}
-  /** Popup's native display */
-  transformOrigin: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-  // {vertical: 'bottom', horizontal: 'right'}
-  /** the function to get ref of Popup */
-  refs: PropTypes.func,
-  /** the function run when close Popup */
-  onClose: PropTypes.func,
-  /** the function run when click confirm button */
-  onConfirm: PropTypes.func,
-  /** the function run when click cancel button */
-  onCancel: PropTypes.func
-};
-export default ProposalsPopup;

package/components/tree-view/css.js

@@ -1,107 +0,0 @@
-import { css } from '@emotion/core';
-import { itemsCenter, boxBorder, cursorPointer, displayBlock, displayInlineBlock, flexRow, positionRelative } from "../../styles/general";
-import theme from "../../theme/settings";
-const {
-  colors: {
-    fill: {
-      focus: fillFocus,
-      hover: fillHover,
-      pressed: fillPressed
-    }
-  }
-} = theme;
-export const TreeViewRootCSS = css`
-    ${displayBlock};
-    ${positionRelative};
-    .DGN-UI-Accordion {
-        box-shadow: none !important;
-        .DGN-UI-Accordion-Summary {
-            ${itemsCenter};
-            min-height: 40px;
-            padding: 0;
-            border-radius: 0;
-            &.focus {
-                background-color: ${theme.colors.focus};
-            }
-            .Accordion-Icon-Root {
-                ${flexRow};
-                margin-right: 4px;
-            }
-        }
-        .DGN-UI-Accordion-Details-Content {
-            padding: 0;
-            border-radius: 0;
-        }
-        .Accordion-Icon-Root {
-            ${flexRow};
-            transition: opacity 0.2s ease-out;
-            opacity: 1;
-            &.DGN-Invisible {
-                opacity: 0;
-            }
-        }
-        &.DGN-Hidden {
-            display: none !important;
-        }
-    }
-    .TreeView-All,
-    .TreeView-Content {
-        ${displayBlock};
-        ${positionRelative};
-        .DGN-UI-Accordion {
-            margin-bottom: 0;
-        }
-    }
-    .TreeView-Item-Checkbox {
-        ${displayInlineBlock};
-        ${positionRelative};
-        height: 100%;
-        margin-right: 8px;
-    }
-    .TreeView-Item {
-        ${flexRow};
-        ${positionRelative};
-        ${itemsCenter};
-        ${boxBorder};
-        min-height: 40px;
-        text-align: left;
-        color: ${theme.colors.text.main};
-        width: 100%;
-        &.non-child {
-            ${cursorPointer};
-            transition: background-color 300ms ease;
-            &.disabled {
-                color: ${theme.colors.disabled};
-                cursor: no-drop;
-            }
-            &:not(.disabled) {
-                &:hover {
-                    background-color: ${fillHover};
-                }
-                &:focus {
-                    background-color: ${fillFocus};
-                }
-                &:active {
-                    background-color: ${fillPressed};
-                }
-            }
-            &.DGN-Hidden {
-                display: none !important;
-            }
-        }
-        &.focus {
-            background-color: ${theme.colors.focus};
-        }
-        &.TreeView-Item-active .DGN-UI-Typography {
-            font-weight: bold;
-        }
-    }
-    &.expand-able {
-        .TreeView-All {
-            margin-left: 34px;
-        }
-        .TreeView-Item.non-child {
-            padding-left: 34px;
-        }
-    }
-`;