diginet-core-ui 1.3.24

package/components/list/list.js

@@ -0,0 +1,155 @@
+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 theme from '../../theme/settings';
+const levels = [0, 1, 'second', 'third', 'fourth', 'fifth'];
+const List = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  className,
+  width,
+  maxWidth,
+  children,
+  style,
+  scrollAble,
+  maxHeight,
+  level,
+  refs,
+  ...props
+}, ref) => {
+  if (!ref) {
+    ref = useRef(null);
+  }
+
+  const ListRoot = css`
+        display: block;
+        position: relative;
+        width: ${isNaN(width) ? width : width + 'px'};
+        max-width: ${isNaN(maxWidth) ? maxWidth : maxWidth + 'px'};
+        height: auto;
+        padding: 5px 0;
+        background-color: #FFF;
+        box-sizing: border-box;
+        &.scroll-able {
+            max-height: ${maxHeight ? isNaN(maxHeight) ? maxHeight : maxHeight + 'px' : '300px'};
+            overflow-y: auto;
+            padding-top: 0;
+            &::-webkit-scrollbar {
+                    width: 6px;
+                    background-color: white;
+                    border-radius: 4px;
+                }
+            &::-webkit-scrollbar-thumb{
+                    border-radius: 10px;
+                    mix-blend-mode: normal;
+                    background-color: ${theme.colors.disabled};
+                    background-clip: content-box;
+            }
+        }
+        .second {
+            padding: 0;
+            .DGN-UI-List-Item {
+                padding-left: 32px;
+            }
+        }
+        .third {
+            padding: 0;
+            .DGN-UI-List-Item {
+                padding-left: 48px;
+            }
+        }
+        .fourth {
+            padding: 0;
+            .DGN-UI-List-Item {
+                padding-left: 64px;
+            }
+        }
+        .fifth {
+            padding: 0;
+            .DGN-UI-List-Item {
+                padding-left: 80px;
+            }
+        }
+    `;
+  useEffect(() => {
+    if (refs) refs(ref);
+  }, []);
+  useEffect(() => {
+    if (level && level > 1 && level < levels.length) {
+      ref.current.classList.add(levels[level]);
+    }
+
+    return () => {
+      if (ref.current && level && level > 1 && level < levels.length) {
+        ref.current.classList.remove(levels[level]);
+      }
+    };
+  }, [level]);
+  useEffect(() => {
+    if (scrollAble || maxHeight) {
+      ref.current.classList.add('scroll-able');
+    }
+
+    return () => {
+      if (ref.current && (scrollAble || maxHeight)) {
+        ref.current.classList.remove('scroll-able');
+      }
+    };
+  }, [scrollAble, maxHeight]);
+  useEffect(() => {
+    if (style) {
+      Object.assign(ref.current.style, style);
+    }
+
+    return () => {
+      if (style && ref.current) {
+        ref.current.style = null;
+      }
+    };
+  }, [style]);
+  const ListView = useMemo(() => jsx("div", _extends({
+    css: ListRoot,
+    ref: ref,
+    className: ('DGN-UI-List ' + className).trim()
+  }, props), children), [children]);
+  return ListView;
+}));
+List.defaultProps = {
+  scrollAble: false,
+  width: '100%',
+  maxWidth: '360px',
+  className: ''
+};
+List.propTypes = {
+  /** fixed height of List and positive scroll list items */
+  scrollAble: PropTypes.bool,
+
+  /** class for List */
+  className: PropTypes.string,
+
+  /** width of list */
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  /** max width */
+  maxWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  /** fixed height of List and positive scroll list items */
+  maxHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  /** represents the level of nested List, The higher the level, the content will be pushed */
+  level: PropTypes.number,
+  // [1,2,3,4,5]
+
+  /** the function to get ref */
+  refs: PropTypes.func,
+
+  /** style inline for List */
+  style: PropTypes.object,
+
+  /** include list subheader, list items */
+  children: PropTypes.node
+};
+export default List;

package/components/list/sub-header.js

@@ -0,0 +1,61 @@
+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 theme from '../../theme/settings';
+import { Typography } from '../';
+const ListSubHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  children,
+  style,
+  refs,
+  ...props
+}, ref) => {
+  if (!ref) {
+    ref = useRef(null);
+  }
+
+  const ListSubHeaderRoot = css`
+        display: block;
+        position: sticky;
+        top: 0;
+        width: 100%;
+        height: auto;
+        padding: 0 16px;
+        background-color: inherit;
+        box-sizing: border-box;
+        user-select: none;
+        text-align: left;
+        z-index: 2;
+    `;
+  useEffect(() => {
+    if (refs) refs(ref);
+  }, []);
+  const ListSubHeaderRootView = useMemo(() => jsx("div", _extends({
+    css: ListSubHeaderRoot,
+    ref: ref,
+    style: style
+  }, props), jsx(Typography, {
+    type: 'h4',
+    color: theme.colors.disabled,
+    style: {
+      textTransform: 'initial',
+      lineHeight: '32px'
+    }
+  }, children)), [children]);
+  return ListSubHeaderRootView;
+}));
+ListSubHeader.propTypes = {
+  /** the function to get ref of ListSubHeader */
+  refs: PropTypes.func,
+
+  /** style inline of ListSubHeader */
+  style: PropTypes.object,
+
+  /** element to display is a subtitle */
+  children: PropTypes.node
+};
+export default ListSubHeader;

package/components/modal/body.js

@@ -0,0 +1,71 @@
+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 { useTheme } from '../../theme';
+const {
+  colors: {
+    scrollbar
+  }
+} = useTheme();
+const ModalBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  children,
+  className,
+  style,
+  refs,
+  ...props
+}, ref) => {
+  const ModalBodyBox = css`
+        display: block;
+        position: relative;
+        width: 100%;
+        height: auto;
+        padding: 2px 24px;
+        margin: 10px 0;
+        box-sizing: border-box;
+        overflow: auto;
+        order: 2;
+        &::-webkit-scrollbar {
+            width: 24px;
+        }
+        &::-webkit-scrollbar-thumb{
+                border-radius: 10px;
+                mix-blend-mode: normal;
+                background-color: ${scrollbar};
+                background-clip: content-box;
+                border: 8px solid transparent;
+        }
+    `;
+  useEffect(() => {
+    !!refs && refs(ref);
+  }, []);
+  const Body = useMemo(() => jsx("div", _extends({
+    css: ModalBodyBox,
+    className: 'DGN-UI-Modal-Body ' + className
+  }, props, {
+    style: style,
+    ref: ref
+  }), children), [children, style]);
+  return Body;
+}));
+ModalBody.defaultProps = {
+  className: ''
+};
+ModalBody.propTypes = {
+  /** customize style inline */
+  style: PropTypes.object,
+
+  /** class of ModalBody */
+  className: PropTypes.string,
+
+  /** get modal header ref by function */
+  refs: PropTypes.func,
+
+  /** child content in header (like title) */
+  children: PropTypes.node
+};
+export default ModalBody;

package/components/modal/context.js

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

package/components/modal/footer.js

@@ -0,0 +1,63 @@
+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, useRef, forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+const ModalFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  children,
+  className,
+  style,
+  refs,
+  ...props
+}, ref) => {
+  if (!ref) {
+    ref = useRef(null);
+  }
+
+  const ModalFooterBox = css`
+        display: flex;
+        position: relative;
+        width: 100%;
+        min-height: 56px;
+        margin-top: 2px;
+        padding: 16px 24px;
+        align-items: center;
+        justify-content: flex-end;
+        border-radius: 0px 0px 4px 4px;
+        box-sizing: border-box;
+        /* box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.25); */
+        box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.25);
+        order: 3;
+    `;
+  useEffect(() => {
+    !!refs && refs(ref);
+  }, []);
+  const Footer = useMemo(() => jsx("div", _extends({
+    css: ModalFooterBox,
+    className: 'DGN-UI-Modal-Footer ' + className
+  }, props, {
+    style: style,
+    ref: ref
+  }), children), [children, style]);
+  return Footer;
+}));
+ModalFooter.defaultProps = {
+  className: ''
+};
+ModalFooter.propTypes = {
+  /** customize style inline */
+  style: PropTypes.object,
+
+  /** class of ModalFooter */
+  className: PropTypes.string,
+
+  /** get modal header ref by function */
+  refs: PropTypes.func,
+
+  /** child content in header (like title) */
+  children: PropTypes.node
+};
+export default ModalFooter;

package/components/modal/header.js

@@ -0,0 +1,108 @@
+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, useContext, useRef, forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import ModalContext from './context';
+import { brand22 } from '../../styles/colors';
+import { Typography } from '../';
+import Icon from '../../icons';
+const ModalHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  title,
+  className,
+  children,
+  style,
+  refs,
+  ...props
+}, ref) => {
+  if (!ref) {
+    ref = useRef(null);
+  }
+
+  const modal = useContext(ModalContext);
+  const ModalHeaderBox = css`
+        display: flex;
+        position: relative;
+        background-color: ${brand22};
+        width: 100%;
+        height: 56px;
+        padding: 16px 24px;
+        margin-bottom: 2px;
+        align-items: center;
+        justify-content: space-between;
+        border-radius: 4px 4px 0px 0px;
+        box-sizing: border-box;
+        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
+        cursor: ${modal.onMoveModal ? 'move' : 'inherit'};
+        order: 1;
+    `;
+  const HeaderTitle = css`
+        display: flex;
+        position: relative;
+        align-items: center;
+        width: calc(100% - 40px);
+    `;
+  const ClearIconBox = css`
+        display: flex;
+        position: relative;
+        width: 24px;
+        height: 24px;
+        justify-content: center;
+        align-items: center;
+        margin-left: 16px;
+    `;
+  useEffect(() => {
+    !!refs && refs(ref);
+  }, []);
+  const Header = useMemo(() => jsx("div", _extends({
+    css: ModalHeaderBox,
+    className: 'DGN-UI-Modal-Header ' + className
+  }, props, {
+    style: style,
+    onMouseDown: modal.onMoveModal,
+    ref: ref
+  }), jsx("div", {
+    css: HeaderTitle
+  }, jsx(Typography, {
+    type: 'h3',
+    style: {
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    }
+  }, children ? children : title)), jsx("div", {
+    css: ClearIconBox
+  }, jsx(Icon, {
+    name: 'close',
+    viewBox: true,
+    onClick: modal.close,
+    style: {
+      padding: 0
+    }
+  }))), [children, title, style]);
+  return Header;
+}));
+ModalHeader.defaultProps = {
+  title: '',
+  className: ''
+};
+ModalHeader.propTypes = {
+  /** customize style inline */
+  style: PropTypes.object,
+
+  /** class of ModalHeader */
+  className: PropTypes.string,
+
+  /** get modal header ref by function */
+  refs: PropTypes.func,
+
+  /** title for header */
+  title: PropTypes.node,
+
+  /** child content in header (like title) */
+  children: PropTypes.node
+};
+export default ModalHeader;