diginet-core-ui 1.3.24

package/components/button/more.js

@@ -0,0 +1,135 @@
+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, useState, useEffect, forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import Button from './';
+import Icon from './icon';
+import { ArrowDown, Close } from '../../icons';
+import { Popover } from '../';
+const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  viewType,
+  color,
+  size,
+  disabled,
+  children,
+  loading,
+  ...props
+}, ref) => {
+  if (!ref) {
+    ref = useRef(null);
+  }
+
+  const [open, setOpen] = useState(false);
+  const ButtonMoreStyle = css`
+        display: inline-flex;
+        button {
+            :first-of-type {
+                border-top-right-radius: 0;
+                border-bottom-right-radius: 0;
+                margin-right: 1px;
+            }
+            :last-of-type {
+                border-top-left-radius: 0;
+                border-bottom-left-radius: 0;
+                margin-left: 0;
+            }
+        }
+        .more-icon-close {
+            display: none;
+        }
+    `;
+
+  const showMoreOption = e => {
+    if (!open) {
+      setOpen(true);
+    }
+  };
+
+  useEffect(() => {
+    const iconCloseEl = ref.current.querySelector('.more-icon-close');
+    const iconDownEl = ref.current.querySelector('.more-icon-down');
+
+    if (open) {
+      iconCloseEl.style.display = 'block';
+      iconDownEl.style.display = 'none';
+    }
+
+    return () => {
+      if (open) {
+        iconCloseEl.style.display = null;
+        iconDownEl.style.display = null;
+      }
+    };
+  }, [open]);
+  return jsx("div", {
+    css: ButtonMoreStyle,
+    ref: ref
+  }, jsx(Button, _extends({
+    viewType: viewType,
+    color: color,
+    size: size,
+    disabled: disabled,
+    loading: loading
+  }, props)), jsx(Icon, {
+    viewType: viewType,
+    color: color,
+    size: size,
+    disabled: disabled,
+    onClick: showMoreOption
+  }, jsx("span", {
+    className: 'more-icon-down'
+  }, jsx(ArrowDown, {
+    color: 'currentColor'
+  })), jsx("span", {
+    className: 'more-icon-close'
+  }, jsx(Close, {
+    color: 'currentColor',
+    viewBox: true
+  }))), jsx(Popover, {
+    open: open,
+    anchor: ref,
+    fullScreen: false,
+    onClose: () => setOpen(false),
+    anchorOrigin: {
+      vertical: 'bottom',
+      horizontal: 'left'
+    },
+    transformOrigin: {
+      vertical: 'top',
+      horizontal: 'left'
+    }
+  }, children));
+}));
+ButtonMore.defaultProps = {
+  viewType: 'filled',
+  color: 'primary',
+  size: 'medium',
+  disabled: false
+};
+ButtonMore.propTypes = {
+  /** used to fill background for button */
+  viewType: PropTypes.oneOf(['text', 'outlined', 'filled']),
+
+  /** color for button */
+  color: PropTypes.string,
+
+  /** size button */
+  size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant']),
+
+  /** prevent all event if true */
+  disabled: PropTypes.bool,
+
+  /** more options element to display */
+  children: PropTypes.node,
+
+  /** any props else for Button component */
+  props: PropTypes.any,
+
+  /** status loading of button */
+  loading: PropTypes.bool
+};
+export default ButtonMore;

package/components/button/ripple-effect.js

@@ -0,0 +1,85 @@
+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 { jsx, css } from '@emotion/core';
+import React, { useLayoutEffect, useState } from 'react';
+
+const useDebouncedRippleCleanUp = (rippleCount, duration, cleanUpFunction) => {
+  useLayoutEffect(() => {
+    if (rippleCount > 0) {
+      const bounce = setTimeout(() => cleanUpFunction(), duration);
+      return () => clearTimeout(bounce);
+    }
+
+    return undefined;
+  }, [rippleCount, duration, cleanUpFunction]);
+};
+
+const Ripple = ({
+  duration = 850,
+  color = '#fff',
+  ...props
+}) => {
+  const [rippleArray, setRippleArray] = useState([]);
+  useDebouncedRippleCleanUp(rippleArray.length, duration, () => {
+    setRippleArray([]);
+  });
+  const RippleContainer = css`
+    position: absolute;
+    overflow: hidden;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    span {
+      transform: scale(0);
+      border-radius: 100%;
+      position: absolute;
+      opacity: 0.75;
+      background-color: ${color};
+      animation-name: ripple;
+      animation-duration: ${duration}ms;
+    }
+
+    @keyframes ripple {
+      to {
+        opacity: 0;
+        transform: scale(2);
+      }
+    }
+  `;
+
+  const addRipple = event => {
+    const rippleContainer = event.currentTarget.getBoundingClientRect();
+    const size = rippleContainer.width > rippleContainer.height ? rippleContainer.width : rippleContainer.height;
+    const x = event.pageX - rippleContainer.x - rippleContainer.width / 2;
+    const y = event.pageY - rippleContainer.y - rippleContainer.width / 2;
+    const newRippleArray = {
+      x,
+      y,
+      size
+    };
+    setRippleArray(prevState => [...prevState, newRippleArray]);
+  };
+
+  return jsx("span", _extends({
+    css: RippleContainer
+  }, props, {
+    onMouseDown: addRipple
+  }), rippleArray.length > 0 && rippleArray.map((ripple, index) => {
+    return jsx("span", {
+      key: 'ripple_' + index,
+      style: {
+        top: ripple.y,
+        left: ripple.x,
+        width: ripple.size,
+        height: ripple.size
+      }
+    });
+  }));
+};
+
+export default /*#__PURE__*/React.memo(Ripple);

package/components/card/body-card.js

@@ -0,0 +1,67 @@
+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, useMemo, useEffect, forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import theme from '../../theme/settings';
+const CardBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  children,
+  background,
+  style,
+  refs,
+  ...props
+}, ref) => {
+  const CardBodyBox = css`
+        display: block;
+        position: relative;
+        background-color: ${background};
+        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+        border-radius: 4px;
+        box-sizing: border-box;
+        padding: 12px 24px;
+        overflow: auto;
+        order: 2;
+        height: auto;
+        width: 100%;
+        img{
+            object-fit: cover;
+            max-width: 100%;
+            height: 100%;
+            border-radius: 20px;
+        }
+        &::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+        &::-webkit-scrollbar-thumb{
+                border-radius: 10px;
+                mix-blend-mode: normal;
+                background-color: ${theme.colors.bgDisabled};
+                background-clip: content-box;
+        }
+    `;
+  useEffect(() => {
+    !!refs && refs(ref);
+  }, []);
+  const Body = useMemo(() => jsx("div", _extends({
+    css: CardBodyBox
+  }, props, {
+    style: style,
+    ref: ref
+  }), children), [children, style]);
+  return Body;
+}));
+CardBody.propTypes = {
+  /** customize style inline */
+  style: PropTypes.object,
+
+  /** get card header ref by function */
+  refs: PropTypes.func,
+
+  /** child content in header (like title) */
+  children: PropTypes.node
+};
+export default CardBody;

package/components/card/card.js

@@ -0,0 +1,127 @@
+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, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import CardContext from './context';
+import theme from '../../theme/settings';
+const Card = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  open,
+  type,
+  title,
+  style,
+  top,
+  pressESCToClose,
+  darkTheme,
+  autoFocus,
+  refs,
+  onClose,
+  onConfirm,
+  onCancel,
+  children,
+  width,
+  ...props
+}, ref) => {
+  if (!ref) {
+    ref = useRef(null);
+  }
+
+  const cardBoxRef = useRef(null);
+  const CardBox = css`
+        background-color: white;
+        border-radius: 4px;
+        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+        box-sizing: border-box;
+        border-radius: 10px;
+        display: flex;
+        position: relative;
+        max-height: calc(100% - ${isNaN(top) ? top : +top + 'px'});
+        min-width: 150px;
+        max-width: 90%;
+        margin: 0 auto;
+        height: max-content;
+        width: ${isNaN(width) ? width : width + 'px'};
+        flex-direction: column;
+        font-family: ${theme.typography.fontFamily};
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: normal;
+        /* min-height: 152px; */
+        cursor: 'initial';
+    `;
+
+  const onShowCard = () => {
+    setOpenState(true);
+  };
+
+  const onCloseCard = () => {
+    if (onClose) onClose();else {
+      setTimeout(() => {
+        setOpenState(false);
+      }, 500);
+    }
+
+    if (ref.current) {
+      ref.current.style.opacity = null;
+      ref.current.firstChild.classList.remove('show');
+    }
+  };
+
+  const CardView = useMemo(() => {
+    const node = jsx("div", {
+      className: 'DGN-UI-Card'
+    }, jsx("div", _extends({
+      css: CardBox,
+      ref: cardBoxRef
+    }, props, {
+      style: style
+    }), jsx(CardContext.Provider, {
+      value: {
+        show: onShowCard,
+        close: onCloseCard
+      }
+    }, children)));
+    return /*#__PURE__*/createPortal(node, document.body);
+  });
+  return CardView;
+}));
+Card.defaultProps = {
+  autoFocus: true,
+  top: '',
+  width: '70%'
+};
+Card.propTypes = {
+  /** park a good colored background under the card box if true */
+  darkTheme: PropTypes.bool,
+
+  /** show card if true */
+  open: PropTypes.bool,
+
+  /** focusing after open card */
+  autoFocus: PropTypes.bool,
+
+  /** customize the vertical position of the screen, if not set, the card will be fixed in the middle of the screen */
+  top: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  /** width of the card */
+  width: PropTypes.string,
+
+  /** customize style inline */
+  style: PropTypes.object,
+
+  /** get card ref by function */
+  refs: PropTypes.func,
+
+  /** the function to run when close card */
+  onClose: PropTypes.func,
+
+  /** child content in body */
+  children: PropTypes.node,
+
+  /** any props else */
+  props: PropTypes.any
+};
+export default Card;

package/components/card/context.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+const CardContext = /*#__PURE__*/createContext({
+  show: () => {},
+  close: () => {}
+});
+export default CardContext;

package/components/card/index.js

@@ -0,0 +1,50 @@
+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, useRef, forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import Card from './card';
+import BodyCard from './body-card';
+const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  style,
+  bodyStyle,
+  refs,
+  children,
+  ...props
+}, ref) => {
+  if (!ref) {
+    ref = useRef(null);
+  }
+
+  useEffect(() => {
+    if (refs) refs(ref);
+  }, []);
+  return /*#__PURE__*/React.createElement(Card, _extends({
+    ref: ref,
+    style: style
+  }, props), /*#__PURE__*/React.createElement(BodyCard, {
+    style: bodyStyle
+  }, children));
+}));
+Popup.defaultProps = {
+  title: ''
+};
+Popup.propTypes = {
+  /** customize style inline */
+  style: PropTypes.object,
+
+  /** custom style inline for body */
+  bodyStyle: PropTypes.object,
+
+  /** get card ref by function */
+  refs: PropTypes.func,
+
+  /** title for header */
+  title: PropTypes.node,
+
+  /** child content in body */
+  children: PropTypes.node,
+
+  /** any props else */
+  props: PropTypes.any
+};
+export default Popup;