diginet-core-ui 1.3.24

package/components/status/index.js

@@ -0,0 +1,123 @@
+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, useMemo, forwardRef, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import { Typography } from '../';
+import { capitalize } from '../../utils';
+import * as Icons from '../../icons';
+import theme from '../../theme/settings';
+const {
+  colors
+} = theme;
+const Status = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  style,
+  viewType,
+  size,
+  icon,
+  text,
+  color,
+  className,
+  ...props
+}, ref) => {
+  if (!ref) {
+    ref = useRef(null);
+  }
+
+  const StatusRoot = css`
+        color: ${colors[color || 'secondary'] || color || dark6};
+        background-color: transparent;
+        height: 20px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        white-space: nowrap;
+        margin: 0 5px;
+        &.filled {
+            color: #FFF;
+            background-color: ${colors[color || 'secondary'] || color || dark6};
+            padding: 0 12px;
+            border-radius: 12px;
+        }
+        &.small {
+            height: 16px;
+            padding: 0 8px;
+            svg {
+                width: 16px;
+                height: 16px;
+            }
+        }
+        &.large {
+            height: 24px;
+            padding: 0 16px;
+            svg {
+                width: 24px;
+                height: 24px;
+            }
+        }
+    `;
+  const StatusText = useMemo(() => jsx(Typography, {
+    type: size === 'small' ? 'p3' : size === 'large' ? 'p1' : 'p2',
+    color: 'inherit'
+  }, text), [text]);
+  const StatusIcon = useMemo(() => {
+    let iconEl = null;
+
+    if (icon) {
+      if (typeof icon === 'string') {
+        const Icon = Icons[capitalize(icon)];
+
+        if (Icon) {
+          iconEl = jsx(Icon, {
+            height: '100%',
+            color: 'currentColor',
+            viewBox: true
+          });
+        }
+      } else {
+        iconEl = icon;
+      }
+    }
+
+    return iconEl;
+  }, [icon]);
+  return jsx("div", _extends({
+    css: StatusRoot,
+    style: style,
+    className: [viewType, size, className].join(' '),
+    ref: ref
+  }, props), StatusIcon, StatusText);
+}));
+Status.defaultProps = {
+  viewType: 'default',
+  text: '',
+  size: 'medium',
+  className: ''
+};
+Status.propTypes = {
+  /** type of status, has background or none */
+  viewType: PropTypes.oneOf(['filled', 'default']),
+
+  /** size of status */
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+
+  /** content to display in status */
+  text: PropTypes.string,
+
+  /** color of text or background */
+  color: PropTypes.string,
+
+  /** class of Status component */
+  className: PropTypes.string,
+
+  /** style inline for Status */
+  style: PropTypes.object,
+
+  /** icon to display before content, allow name of icons store */
+  icon: PropTypes.any
+};
+export default Status;

package/components/tab/context.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+const TabContext = /*#__PURE__*/createContext({});
+export default TabContext;

package/components/tab/tab-container.js

@@ -0,0 +1,83 @@
+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 React, { forwardRef, useState, memo, useEffect } from 'react';
+import { jsx, css } from '@emotion/core';
+import PropTypes, { oneOf, oneOfType, string, number, node, any } from 'prop-types';
+import { randomString } from '../../utils';
+import TabContext from './context';
+import { isNumeric } from '../../utils/type';
+import Typography from '../typography';
+const TabContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  children,
+  tabIndex,
+  width,
+  direction,
+  level = 'level1',
+  ...props
+}, ref) => {
+  const {
+    value
+  } = props;
+  const [tabIndexState, setTabIndexState] = useState(tabIndex || value);
+  const [id] = useState(randomString(6, {
+    allowNumber: false,
+    allowSymbol: false
+  }));
+  useEffect(() => {
+    if (isNumeric(value)) setTabIndexState(value);else setTabIndexState(tabIndex);
+  }, [value, tabIndex]);
+  const Container = css`
+            display: block;
+            position: relative;
+            flex-direction: column;
+        `;
+  const TabButtonContainer = css`
+            display: ${direction === 'vertical' ? 'flex' : 'block'};
+            flex-direction: ${direction === 'vertical' ? 'row' : 'column'};
+            position: relative;
+            width: ${isNaN(width) ? width : width + 'px'};
+        `;
+  if (level === 'level1') level = 'h3';
+  if (level === 'level2') level = 'p1';
+  return jsx("div", {
+    css: Container
+  }, jsx("div", _extends({
+    css: TabButtonContainer,
+    className: `Tab-Container`,
+    id: `DGN-${id}-tab-button-container`,
+    ref: ref
+  }, props), jsx(TabContext.Provider, {
+    value: {
+      tabIndexState,
+      setTabIndexState,
+      direction
+    }
+  }, React.Children.map(children, child => /*#__PURE__*/React.cloneElement(child, {
+    level
+  })))));
+}));
+TabContainer.defaultProps = {
+  width: '100%',
+  direction: 'horizontal',
+  level: 'level1',
+  tabIndex: 0
+};
+const typesTypography = Typography.propTypes.type;
+TabContainer.propTypes = {
+  width: oneOfType([number, string]),
+  tabIndex: number,
+  children: node,
+
+  /** direction change the position of Tabs */
+  direction: oneOf(['vertical', 'horizontal']),
+
+  /** direction change the size typography of Tab (typesTypography is types of Typography - exp: h1, h2, h3, p1 .....)*/
+  level: PropTypes.oneOfType([PropTypes.oneOf(['level1', 'level2']), typesTypography]),
+
+  /** any props else */
+  props: any
+};
+export default TabContainer;

package/components/tab/tab-header.js

@@ -0,0 +1,133 @@
+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 React, { memo, forwardRef, useContext, useRef, useState } from 'react';
+import { jsx, css } from '@emotion/core';
+import { any, array, object, bool } from 'prop-types';
+import { color } from '../../styles/colors';
+import TabContext from './context';
+import ButtonIcon from '../button/icon';
+const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  children,
+  style,
+  level,
+  scrollButtons,
+  ...props
+}, reference) => {
+  var _ref$current, _ref$current2;
+
+  const ref = useRef(null);
+  const {
+    direction
+  } = useContext(TabContext);
+  const isVertical = direction === 'vertical';
+  const [scrollLeft, setScrollLeft] = useState(0);
+  let showScrollLeftButton = !isVertical && scrollLeft > 0;
+  let showScrollRightButton = !isVertical && (ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.offsetWidth) + scrollLeft < (ref === null || ref === void 0 ? void 0 : (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.scrollWidth);
+  const Container = css`
+            line-height: 1.29;
+            display: flex;
+            overflow: hidden;
+            position: relative;
+            height: auto;
+            min-height: 2.5rem;
+            box-sizing: border-box;
+            flex-direction: ${isVertical ? 'column' : 'row'};
+            max-width: ${isVertical ? 'max-content' : '100%'};
+            width: 100%;
+            padding: 0;
+            ${isVertical ? `border-right: solid 1px ${color.line.tab}` : `border-bottom: solid 1px ${color.line.tab}`};
+        `;
+  const TabHeader = isVertical ? css`
+                  display: flex;
+                  flex-direction: column;
+                  padding: 0 3px 0 0;
+              ` : css`
+                  display: flex;
+                  position: relative;
+                  white-space: nowrap;
+                  margin: 0;
+                  list-style: none;
+                  overflow-x: auto;
+                  scroll-behavior: smooth;
+                  scroll-snap-type: x mandatory;
+                  scroll-padding: 50%;
+                  transition: 0.3s ease-in-out 0.3s;
+                  &::-webkit-scrollbar {
+                      display: none;
+                  }
+              `;
+
+  const scrollButton = scrollPrevious => css`
+            overflow: initial;
+            width: 24px;
+            height: 24px;
+            align-self: center;
+            margin: ${scrollPrevious ? '0 8px 0 0' : '0 0 0 8px'};
+            opacity: ${scrollPrevious && showScrollLeftButton || !scrollPrevious && showScrollRightButton ? '1' : '0'};
+            :disabled {
+                span {
+                    cursor: default !important;
+                }
+            }
+        `;
+
+  const _onClickScrollButton = scrollPrevious => {
+    let scrollValue = scrollPrevious ? ref.current.scrollLeft - (ref.current.offsetWidth + 30) : ref.current.scrollLeft + (ref.current.offsetWidth + 30);
+    ref.current.scrollLeft = scrollValue;
+    setScrollLeft(scrollValue);
+  };
+
+  return jsx("div", _extends({
+    css: Container,
+    id: `DGN-control`,
+    style: style
+  }, props), scrollButtons && jsx(ButtonIcon, {
+    css: scrollButton(true),
+    name: isVertical ? 'ArrowUp' : 'ArrowLeft',
+    viewType: 'text',
+    width: 24,
+    height: 24,
+    viewBox: true,
+    disabled: !showScrollLeftButton,
+    onClick: () => _onClickScrollButton(true)
+  }), jsx("div", {
+    css: TabHeader,
+    ref: ref,
+    onScroll: e => {
+      var _e$target;
+
+      return scrollButtons && setScrollLeft((e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.scrollLeft) || 0);
+    }
+  }, React.Children.map(children, child => /*#__PURE__*/React.cloneElement(child, {
+    level
+  }))), scrollButtons && jsx(ButtonIcon, {
+    css: scrollButton(false),
+    name: isVertical ? 'ArrowDown' : 'ArrowRight',
+    viewType: 'text',
+    width: 24,
+    height: 24,
+    viewBox: true,
+    disabled: !showScrollRightButton,
+    onClick: () => _onClickScrollButton(false)
+  }));
+}));
+TabHeader.defaultProps = {
+  scrollButtons: false
+};
+TabHeader.propTypes = {
+  /** element to display in Tabs (like text) */
+  children: array,
+
+  /** style inline of tabHeader */
+  style: object,
+
+  /** show scroll buttons if true */
+  scrollButtons: bool,
+
+  /** any props else */
+  props: any
+};
+export default TabHeader;

package/components/tab/tab-panel.js

@@ -0,0 +1,51 @@
+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, useContext } from 'react';
+import { jsx, css } from '@emotion/core';
+import { number, node, any } from 'prop-types';
+import { color } from '../../styles/colors';
+import TabContext from './context';
+const TabPanel = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  children,
+  index,
+  ...props
+}, ref) => {
+  const {
+    tabIndexState,
+    direction
+  } = useContext(TabContext);
+  const isVertical = direction === 'vertical';
+  const TabPanel = css`
+            box-sizing: border-box;
+            color: ${color.text.main};
+            display: ${index === tabIndexState ? 'flex' : 'none'};
+            height: ${isVertical ? '300px' : '100%'};
+            position: relative;
+            padding: 0px ${isVertical ? '12px' : '10'};
+            width: 100%;
+            flex-direction: column;
+        `;
+  return jsx("div", _extends({
+    css: TabPanel,
+    "aria-labelledby": `tab-${index}`,
+    id: `tab-panel-${index}`,
+    className: 'tab-panel',
+    role: 'tab-panel',
+    ref: ref
+  }, props), children);
+}));
+TabPanel.defaultProps = {};
+TabPanel.propTypes = {
+  /** element to display in Tabs (like text) */
+  children: node,
+
+  /** index received in position of TabHeaderButton */
+  index: number,
+
+  /** any props else */
+  props: any
+};
+export default TabPanel;

package/components/tab/tab.js

@@ -0,0 +1,206 @@
+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 { forwardRef, memo, useMemo, useContext } from 'react';
+import { jsx, css } from '@emotion/core';
+import { string, number, node, bool, object, func, any } from 'prop-types';
+import * as Icons from '../../icons';
+import { color as colors } from '../../styles/colors';
+import { capitalize } from '../../utils';
+import Ripple from '../button/ripple-effect';
+import Typography from '../typography';
+import TabContext from './context';
+const TabItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  index,
+  children,
+  color,
+  disabled,
+  iconStyle,
+  startIcon,
+  endIcon,
+  label,
+  onClick,
+  level,
+  ...props
+}, ref) => {
+  const {
+    tabIndexState,
+    setTabIndexState
+  } = useContext(TabContext);
+  const TabButton = css`
+            flex: 0 0 auto;
+            overflow: hidden;
+            align-items: center;
+            appearance: none;
+            background-color: #fff;
+            border: 0;
+            box-shadow: none;
+            box-sizing: border-box;
+            color: ${color || colors.system.rest};
+            display: flex;
+            cursor: pointer;
+            justify-content: center;
+            line-height: 1.4285;
+            max-width: 320px;
+            min-width: 80px;
+            word-break: break-word;
+            outline: none;
+            padding: 10px 16px;
+            pointer-events: auto;
+            position: relative;
+            text-decoration: none;
+            text-rendering: auto;
+            transition: all 0.2s ease-in-out, background-color 0.2s ease-in-out;
+            vertical-align: middle;
+            scroll-snap-align: auto;
+            white-space: nowrap;
+            :disabled {
+                background-color: transparent;
+                color: ${colors.system.disabled};
+                cursor: default;
+                pointer-events: none;
+            }
+            :hover,:focus:not(.selected):not(:disabled) {
+                background-color: #fff;
+                color: ${colors.system.rest};
+                .Indicator {
+                    background-color: ${colors.system.rest};
+                    transform: scaleX(1);
+                }
+            }
+            &.selected {
+                background-color: #fff;
+                color: ${colors.fill['tabbar-active']};
+                .Indicator {
+                    background-color: ${colors.fill['tabbar-active']};
+                    transform: scaleX(1);
+                }
+            }
+        `;
+  const Indicator = css`
+            height: 4px;
+            width: 100%;
+            bottom: 0;
+            position: absolute;
+            transform: scaleX(0);
+            transition: transform 0.2s ease-in-out;
+            border-radius: 1px;
+        `;
+  const ButtonIcon = css`
+            display: flex;
+            position: relative;
+            box-sizing: border-box;
+            justify-content: center;
+            align-items: center;
+            max-height: 12px;
+            max-width: 24px;
+            margin-right: 4px;
+            &.end-icon {
+                margin-right: unset;
+                margin-left: 4px;
+            }
+        `;
+  const StartIcon = useMemo(() => {
+    let node = startIcon;
+
+    if (typeof node === 'string') {
+      const IconComp = Icons[capitalize(node)];
+
+      if (IconComp) {
+        node = jsx(IconComp, {
+          color: 'currentColor',
+          viewBox: true,
+          width: 16,
+          height: 16,
+          iconStyle: label ? { ...iconStyle
+          } : {
+            marginLeft: 0,
+            marginRight: 0,
+            ...iconStyle
+          }
+        });
+      }
+    }
+
+    return jsx("span", {
+      css: ButtonIcon
+    }, " ", node, " ");
+  }, [startIcon]);
+  const EndIcon = useMemo(() => {
+    let node = endIcon;
+
+    if (typeof node === 'string') {
+      const IconComp = Icons[capitalize(node)];
+
+      if (IconComp) {
+        node = jsx(IconComp, {
+          color: 'currentColor',
+          viewBox: true,
+          width: 16,
+          height: 16,
+          iconStyle: label ? { ...iconStyle
+          } : {
+            marginLeft: 0,
+            marginRight: 0,
+            ...iconStyle
+          }
+        });
+      }
+    }
+
+    return jsx("span", {
+      css: ButtonIcon,
+      className: 'end-icon'
+    }, " ", node, " ");
+  }, [endIcon]);
+  return jsx("button", _extends({
+    css: TabButton,
+    className: index === tabIndexState && !disabled ? 'selected' : '',
+    disabled: disabled,
+    onClick: onClick ? onClick : () => setTabIndexState(index),
+    ref: ref,
+    index: index
+  }, props), startIcon && StartIcon, jsx(Typography, {
+    type: level,
+    color: 'inherit'
+  }, label), children, endIcon && EndIcon, jsx(Ripple, null), jsx("span", {
+    css: Indicator,
+    className: 'Indicator'
+  }));
+}));
+TabItem.defaultProps = {
+  disabled: false,
+  label: ""
+};
+TabItem.propTypes = {
+  /** color for Tabs */
+  color: string,
+
+  /** prevent all event if true */
+  disabled: bool,
+
+  /** object passed to add effects and to change location icons */
+  iconStyle: object,
+
+  /** index received in position of TabHeaderButton */
+  index: number,
+
+  /** data string, if any */
+  label: string,
+
+  /** element to display in Tabs (like text) */
+  children: node,
+
+  /** icon to the left of the button */
+  startIcon: node,
+
+  /** icon to the right of the button */
+  endIcon: node,
+  onClick: func,
+
+  /** any props else */
+  props: any
+};
+export default TabItem;