diginet-core-ui 1.3.24

package/components/accordion/details.js

@@ -0,0 +1,60 @@
+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, forwardRef } from 'react';
+import { any, string, node, object } from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import theme from '../../theme/settings';
+const AccordionDetails = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  children,
+  className,
+  style,
+  ...props
+}, ref) => {
+  const DetailsRoot = css`
+        display: block;
+        position: relative;
+        height: 0;
+        overflow: hidden;
+        transition: height 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+        .DGN-UI-Accordion-Details-Content {
+            padding: 0 24px 16px 24px;
+            box-sizing: border-box;
+            ${theme.typography.p1}
+            font-family: ${theme.typography.fontFamily};
+            color: ${theme.colors.default};
+            &.disabled {
+                pointer-events: none;
+                user-select: none;
+            }
+        }
+    `;
+  return jsx("div", _extends({
+    css: DetailsRoot,
+    className: 'DGN-UI-Accordion-Details',
+    ref: ref
+  }, props), jsx("div", {
+    style: style,
+    className: ['DGN-UI-Accordion-Details-Content', className].join(' ').trim()
+  }, children));
+}));
+AccordionDetails.defaultProps = {
+  className: '',
+  style: {}
+};
+AccordionDetails.propTypes = {
+  /** The element to display in alert like text props (priority) */
+  children: node,
+
+  /** class for De */
+  className: string,
+
+  /** style inline for Detail */
+  style: object,
+
+  /** any props else */
+  props: any
+};
+export default AccordionDetails;

package/components/accordion/group.js

@@ -0,0 +1,122 @@
+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, Children, cloneElement } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+const AccordionGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  className,
+  children,
+  collapseOther,
+  ...props
+}, ref) => {
+  if (!ref) {
+    ref = useRef(null);
+  }
+
+  const onCollapseOther = (e, onExpand) => {
+    if (collapseOther) {
+      const accordions = ref.current.querySelectorAll('.DGN-UI-Accordion');
+      accordions.forEach(accordion => {
+        if (!accordion.contains(e.target)) {
+          const summary = accordion.querySelector('.DGN-UI-Accordion-Summary.expanding');
+          !!summary && summary.click();
+        }
+      });
+      !!onExpand && onExpand(e);
+    }
+  };
+
+  const AccordionGroupRoot = css`
+        border-radius: 4px;
+        .DGN-UI-Accordion {
+            &:first-of-type {
+                &,
+                .DGN-UI-Accordion-Summary {
+                    border-radius: 4px 4px 0px 0px;
+                }
+                &.expanding {
+                    border-radius: 4px;
+                    margin: 0 0 16px 0;
+                    .DGN-UI-Divider {
+                        display: none !important;
+                    }
+                }
+            }
+            &:last-child {
+                &,
+                .DGN-UI-Accordion-Summary {
+                    border-radius: 0px 0px 4px 4px;
+                }
+                &.expanding {
+                    margin: 16px 0 0 0;
+                    border-radius: 4px;
+                    .DGN-UI-Accordion-Summary {
+                        border-radius: 4px 4px 0px 0px;
+                    }
+                    .DGN-UI-Divider {
+                        display: none !important;
+                    }
+                }
+            }
+            &:not(:first-of-type):not(:last-child) {
+                &,
+                .DGN-UI-Accordion-Summary {
+                    border-radius: 0px;
+                }
+                &.expanding {
+                    margin: 16px 0;
+                    border-radius: 4px;
+                    .DGN-UI-Accordion-Summary {
+                        border-radius: 4px 4px 0px 0px;
+                    }
+                    .DGN-UI-Divider {
+                        display: none !important;
+                    }
+                }
+            }
+            &:not(:last-child) {
+                .DGN-UI-Divider {
+                    display: block !important;
+                }
+                box-shadow: -2px 0px 2px -2px rgba(0, 0, 0, 0.25), 2px 0px 2px -2px rgba(0, 0, 0, 0.25);
+                &.expanding,
+                &.previousExpanding {
+                    border-radius: 4px;
+                    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
+                }
+            }
+        }
+    `;
+  return jsx("div", _extends({
+    css: AccordionGroupRoot,
+    ref: ref
+  }, props, {
+    className: 'DGN-UI-Accordion-Group ' + className
+  }), Children.map(children, child => /*#__PURE__*/cloneElement(child, {
+    onExpand: e => onCollapseOther(e, child.props.onExpand)
+  })));
+}));
+AccordionGroup.defaultProps = {
+  className: '',
+  collapseOther: true
+};
+AccordionGroup.propTypes = {
+  /** collapse other if true */
+  collapseOther: PropTypes.bool,
+
+  /** class on element */
+  className: PropTypes.string,
+
+  /** insist <Accordion /> */
+  children: PropTypes.node.isRequired,
+
+  /** style inline for AccordionGroup */
+  style: PropTypes.object,
+
+  /** any props else */
+  props: PropTypes.any
+};
+export default AccordionGroup;

package/components/accordion/index.js

@@ -0,0 +1,117 @@
+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, useEffect, useRef, forwardRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import AccordionContext from './context';
+import Divider from '../divider';
+import theme from '../../theme/settings';
+const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  disabled,
+  expand,
+  onClick,
+  onExpand,
+  onCollapse,
+  boxShadow,
+  className,
+  children,
+  ...props
+}, ref) => {
+  if (!ref) {
+    ref = useRef(null);
+  }
+
+  const [expandState, setExpandState] = useState(expand);
+  useEffect(() => {
+    if (ref.current) {
+      const previous = ref.current.previousElementSibling;
+
+      if (previous) {
+        expandState ? previous.classList.add('previousExpanding') : previous.classList.remove('previousExpanding');
+      }
+    }
+  }, [expandState]);
+  useEffect(() => {
+    setExpandState(expand);
+  }, [expand]);
+
+  const onClickAccordion = () => {
+    !!onClick && onClick({
+      target: ref.current
+    });
+  };
+
+  const AccordionRoot = css`
+        display: block;
+        position: relative;
+        width: 100%;
+        border-radius: 4px;
+        transition: margin 300ms ease;
+        &.boxShadow {
+            box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
+        }
+        &.disabled {
+            cursor: no-drop;
+            box-shadow: none;
+        }
+    `;
+  return jsx("div", _extends({
+    css: AccordionRoot,
+    ref: ref
+  }, props, {
+    className: ['DGN-UI-Accordion', disabled ? 'disabled' : '', className, boxShadow === true ? 'boxShadow' : '', expandState ? 'expanding' : ''].join(' ').trim()
+  }), jsx(AccordionContext.Provider, {
+    value: {
+      expandState,
+      disabled,
+      onClickAccordion: onClick ? onClickAccordion : null,
+      onExpand,
+      onCollapse,
+      setExpandState
+    }
+  }, children, jsx(Divider, {
+    color: theme.colors.borderTab,
+    style: {
+      margin: 0,
+      display: 'none'
+    }
+  })));
+}));
+Accordion.defaultProps = {
+  expand: false,
+  disabled: false,
+  className: '',
+  boxShadow: true
+};
+Accordion.propTypes = {
+  /** prevent all event if true */
+  disabled: PropTypes.bool,
+
+  /** expand immediate after render if true */
+  expand: PropTypes.bool,
+
+  /** class on element */
+  className: PropTypes.string,
+
+  /** class on element */
+  boxShadow: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+
+  /** The function will run after expand Accordion detail */
+  onExpand: PropTypes.func,
+
+  /** The function will run after collapse Accordion detail */
+  onCollapse: PropTypes.func,
+
+  /** insist <AccordionSummary />, <AccordionDetails /> */
+  children: PropTypes.node,
+
+  /** style inline for Accordion */
+  style: PropTypes.object,
+
+  /** any props else */
+  props: PropTypes.any
+};
+export default Accordion;

package/components/accordion/summary.js

@@ -0,0 +1,175 @@
+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, useEffect, useRef, useContext, forwardRef } from 'react';
+import { any, oneOf, node, string, bool, oneOfType } from 'prop-types';
+import { jsx } from '@emotion/core';
+import { renderIcon } from '../../utils';
+import { SummaryRoot } from './css';
+import AccordionContext from './context';
+const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  expandIcon,
+  collapseIcon,
+  expandIconAt,
+  background,
+  className,
+  onClick,
+  children,
+  expandIconProps,
+  ...props
+}, ref) => {
+  if (!ref) {
+    ref = useRef(null);
+  }
+
+  const expandIconRef = useRef(null);
+  const timer = useRef(null);
+  const {
+    expandState,
+    disabled,
+    onClickAccordion,
+    onExpand,
+    onCollapse,
+    setExpandState
+  } = useContext(AccordionContext);
+
+  const onClickHandler = e => {
+    if (!disabled) {
+      const target = e.target;
+
+      if (onClickAccordion) {
+        onClickAccordion();
+        return;
+      }
+
+      if (onClick && (!expandIconRef.current || !expandIconRef.current.contains(target))) {
+        onClick(e);
+        return;
+      }
+
+      if (expandState) {
+        setExpandState(false);
+        !!onCollapse && onCollapse(e);
+      } else if (!expandState) {
+        setExpandState(true);
+        !!onExpand && onExpand(e);
+      }
+    }
+  };
+
+  const showHideDetailHandler = type => {
+    if (ref.current) {
+      const detailsEl = ref.current.nextElementSibling;
+
+      if (type === 'show') {
+        if (detailsEl) {
+          const scrollHeight = detailsEl.scrollHeight;
+          const duration = Math.max(Math.min(scrollHeight, 1500), 200);
+          detailsEl.style.height = scrollHeight + 'px';
+
+          if (!detailsEl.style.transitionDuration) {
+            detailsEl.style.transitionDuration = duration + 'ms';
+          }
+
+          if (timer.current) {
+            clearTimeout(timer.current);
+          }
+
+          timer.current = setTimeout(() => {
+            detailsEl.style.height = 'auto';
+          }, (detailsEl.firstChild.childNodes.length || 2.5) * 100);
+        }
+      } else {
+        if (detailsEl) {
+          detailsEl.style.height = detailsEl.scrollHeight + 'px';
+
+          if (timer.current) {
+            clearTimeout(timer.current);
+          }
+
+          timer.current = setTimeout(() => {
+            detailsEl.style.height = null;
+          }, 10);
+        }
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (/^(#|rgb)/.test(background)) {
+      if (ref.current) {
+        ref.current.style.backgroundColor = background;
+      }
+
+      return () => {
+        if (ref.current) {
+          ref.current.style.backgroundColor = null;
+        }
+      };
+    }
+  }, [background]);
+  useEffect(() => {
+    if (expandState) {
+      showHideDetailHandler('show');
+    } else {
+      showHideDetailHandler('hide');
+    }
+  }, [expandState]);
+  return jsx("div", _extends({
+    css: SummaryRoot,
+    ref: ref,
+    tabIndex: "-1"
+  }, props, {
+    onClick: onClickHandler,
+    className: ['DGN-UI-Accordion-Summary', disabled ? 'disabled' : '', expandIcon ? expandIconAt : '', className, background === true ? 'background' : '', expandState ? 'expanding' : ''].join(' ').trim()
+  }), jsx("div", {
+    className: 'DGN-UI-Accordion-Summary-Content'
+  }, children), !!expandIcon && jsx("div", {
+    className: 'Accordion-Icon-Root'
+  }, jsx("div", _extends({}, expandIconProps, {
+    ref: expandIconRef,
+    className: ['Accordion-Icon', collapseIcon ? '' : 'rotate-able', expandIconProps.className ? expandIconProps.className : ''].join(' ').trim()
+  }), typeof expandIcon === 'string' ? renderIcon(expandIcon, 'effect', {
+    className: 'Accordion-Expand-Icon'
+  }) : jsx("span", {
+    className: 'Accordion-Expand-Icon effect'
+  }, expandIcon), !!collapseIcon && (typeof collapseIcon === 'string' ? renderIcon(collapseIcon, 'effect', {
+    className: 'Accordion-Collapse-Icon'
+  }) : jsx("span", {
+    className: 'Accordion-Collapse-Icon effect'
+  }, collapseIcon)))));
+}));
+AccordionSummary.defaultProps = {
+  expandIconAt: 'start',
+  expandIconProps: {},
+  className: '',
+  expandIcon: 'ArrowRight'
+};
+AccordionSummary.propTypes = {
+  /** the icon to display for expand icon */
+  expandIcon: any,
+
+  /** the icon to display for collapse icon */
+  collapseIcon: any,
+
+  /** the position to render expand icon */
+  expandIconAt: oneOf(['start', 'end']),
+
+  /** background for label summary */
+  background: oneOfType([string, bool]),
+
+  /** class for Summary component */
+  className: string,
+
+  /** The element to display in alert like text props (priority) */
+  children: node,
+
+  /** props of expand and collapse icons */
+  expandIconProps: any,
+
+  /** any props else */
+  props: any
+};
+export default AccordionSummary;