@qoretechnologies/reqore 0.20.1 → 0.20.4

package/src/components/Tabs/index.tsx

@@ -0,0 +1,117 @@
+import React, { ReactElement, useEffect, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { TSizes } from '../../constants/sizes';
+import { IReqoreCustomTheme, IReqoreIntent } from '../../constants/theme';
+import { TReqoreTooltipProp } from '../../types/global';
+import { IReqoreIconName } from '../../types/icons';
+import ReqoreTabsList from './list';
+
+export interface IReqoreTabsListItem {
+  label: string;
+  icon?: IReqoreIconName;
+  as?: any;
+  disabled?: boolean;
+  id: string | number;
+  tooltip?: TReqoreTooltipProp;
+  props?: React.HTMLAttributes<any>;
+  onClick?: (event: any) => any;
+  onCloseClick?: (id: string | number) => any;
+  activeIntent?: IReqoreIntent;
+  intent?: IReqoreIntent;
+  closeIcon?: IReqoreIconName;
+}
+
+export interface IReqoreTabsProps extends React.HTMLAttributes<HTMLDivElement> {
+  tabs: IReqoreTabsListItem[];
+  activeTab?: string | number;
+  onTabChange?: (tabId: string | number) => any;
+  children?: ReactElement<any>[] | ReactElement<any>;
+  fill?: boolean;
+  fillParent?: boolean;
+  vertical?: boolean;
+  activeTabIntent?: IReqoreIntent;
+  wrapTabNames?: boolean;
+  flat?: boolean;
+  size?: TSizes;
+  width?: string;
+  customTheme?: IReqoreCustomTheme;
+  intent?: IReqoreIntent;
+  // Internal prop, ignore!
+  _testWidth?: number;
+}
+
+const StyledTabs = styled.div<Partial<IReqoreTabsProps>>`
+  display: flex;
+  ${({ vertical, fillParent, width }) => css`
+    width: ${width ? `${width}px` : '100%'};
+    height: ${fillParent ? '100%' : undefined};
+    flex-flow: ${vertical ? 'row' : 'column'};
+  `}
+`;
+
+const ReqoreTabs = ({
+  tabs,
+  activeTab,
+  children,
+  className,
+  onTabChange,
+  fill,
+  _testWidth,
+  vertical,
+  activeTabIntent,
+  flat,
+  size = 'normal',
+  width,
+  wrapTabNames,
+  customTheme,
+  intent,
+  ...rest
+}: IReqoreTabsProps) => {
+  const [_activeTab, setActiveTab] = useState<string | number>(activeTab || tabs[0].id);
+
+  useEffect(() => {
+    if (activeTab || activeTab === 0) {
+      setActiveTab(activeTab);
+
+      if (onTabChange) {
+        onTabChange(activeTab);
+      }
+    }
+  }, [activeTab]);
+
+  return (
+    <StyledTabs
+      {...rest}
+      width={width}
+      vertical={vertical}
+      className={`${className || ''} reqore-tabs`}
+    >
+      <ReqoreTabsList
+        tabs={tabs}
+        flat={flat}
+        fill={fill}
+        size={size}
+        width={width}
+        vertical={vertical}
+        _testWidth={_testWidth}
+        activeTab={_activeTab}
+        wrapTabNames={wrapTabNames}
+        activeTabIntent={activeTabIntent}
+        customTheme={customTheme}
+        intent={intent}
+        onTabChange={(tabId: string | number) => {
+          setActiveTab(tabId);
+
+          if (onTabChange) {
+            onTabChange(tabId);
+          }
+        }}
+      />
+      {React.Children.map(children, (child) =>
+        child && child.props?.tabId === _activeTab ? child : null
+      )}
+    </StyledTabs>
+  );
+};
+
+export default ReqoreTabs;

package/src/components/Tabs/item.tsx

@@ -0,0 +1,151 @@
+import { forwardRef, useRef } from 'react';
+import styled, { css } from 'styled-components';
+import { IReqoreTabsListItem } from '.';
+import { TABS_PADDING_TO_PX, TSizes } from '../../constants/sizes';
+import { IReqoreCustomTheme, IReqoreTheme } from '../../constants/theme';
+import { useCombinedRefs } from '../../hooks/useCombinedRefs';
+import { useReqoreTheme } from '../../hooks/useTheme';
+import ReqoreButton from '../Button';
+import ReqoreControlGroup from '../ControlGroup';
+
+export interface IReqoreTabListItemProps extends IReqoreTabsListItem {
+  active?: boolean;
+  vertical?: boolean;
+  onCloseClick?: any;
+  customTheme?: IReqoreCustomTheme;
+  size?: TSizes;
+  wrapTabNames?: boolean;
+  fill?: boolean;
+  className?: string;
+}
+
+export interface IReqoreTabListItemStyle extends IReqoreTabListItemProps {
+  theme: IReqoreTheme;
+  closable?: boolean;
+  activeColor: string;
+}
+
+export const StyledTabListItem = styled.div<IReqoreTabListItemStyle>`
+  ${({ active, disabled, vertical, activeColor, size, fill }: IReqoreTabListItemStyle) => {
+    return css`
+      display: flex;
+      flex-shrink: 0;
+      overflow: hidden;
+      position: relative;
+      align-items: center;
+      width: ${vertical ? `100%` : undefined};
+      padding: ${vertical ? `${TABS_PADDING_TO_PX[size!]}px` : `${TABS_PADDING_TO_PX[size!]}px`};
+      ${active &&
+      css`
+        background-color: ${activeColor}60;
+      `}
+
+      ${fill &&
+      css`
+        flex: 1;
+      `}
+
+      ${disabled &&
+      css`
+        cursor: not-allowed;
+        > * {
+          opacity: 0.5;
+        }
+      `}
+    `;
+  }}
+
+  a {
+    text-decoration: none;
+
+    &:hover > * {
+      text-decoration: underline;
+    }
+  }
+`;
+
+const ReqoreTabsListItem = forwardRef(
+  (
+    {
+      tooltip,
+      label,
+      props,
+      icon,
+      active,
+      as,
+      disabled,
+      vertical,
+      onClick,
+      activeIntent,
+      onCloseClick,
+      fill,
+      intent,
+      size = 'normal',
+      closeIcon,
+      customTheme,
+      className,
+    }: IReqoreTabListItemProps,
+    ref
+  ) => {
+    const innerRef = useRef(null);
+    const combinedRef = useCombinedRefs(innerRef, ref);
+    const theme = useReqoreTheme('main', customTheme);
+    const _intent = activeIntent || intent;
+    const activeColor = _intent ? theme.intents[_intent] : theme.main;
+
+    return (
+      <StyledTabListItem
+        ref={combinedRef}
+        {...props}
+        className={className}
+        intent={intent}
+        activeIntent={activeIntent}
+        activeColor={activeColor}
+        as={as}
+        size={size}
+        active={active}
+        disabled={disabled}
+        vertical={vertical}
+        theme={theme}
+        fill={fill}
+      >
+        {label || icon ? (
+          <ReqoreControlGroup stack size={size} fluid={fill || vertical}>
+            <ReqoreButton
+              flat
+              fluid={fill || vertical}
+              icon={icon}
+              minimal
+              intent={active ? activeIntent || intent : intent}
+              active={active}
+              disabled={disabled}
+              onClick={onClick}
+              tooltip={tooltip}
+              customTheme={customTheme}
+              className={`reqore-tabs-list-item ${active ? 'reqore-tabs-list-item-active' : ''}`}
+            >
+              {label}
+            </ReqoreButton>
+            {onCloseClick && !disabled ? (
+              <ReqoreButton
+                fixed
+                flat
+                icon={closeIcon || 'CloseLine'}
+                intent={active ? activeIntent || intent : intent}
+                minimal
+                className='reqore-tabs-list-item-close'
+                customTheme={customTheme}
+                onClick={(event) => {
+                  event.stopPropagation();
+                  onCloseClick?.();
+                }}
+              />
+            ) : null}
+          </ReqoreControlGroup>
+        ) : null}
+      </StyledTabListItem>
+    );
+  }
+);
+
+export default ReqoreTabsListItem;

package/src/components/Tabs/list.tsx

@@ -0,0 +1,281 @@
+import { isArray } from 'lodash';
+import React from 'react';
+import { useMeasure } from 'react-use';
+import styled, { css } from 'styled-components';
+import { IReqoreTabsListItem, IReqoreTabsProps } from '.';
+import { ReqorePopover } from '../..';
+import { TABS_SIZE_TO_PX, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
+import { IReqoreBreadcrumbsTheme, IReqoreCustomTheme, IReqoreTheme } from '../../constants/theme';
+import ReqoreThemeProvider from '../../containers/ThemeProvider';
+import { changeLightness } from '../../helpers/colors';
+import { calculateStringSizeInPixels } from '../../helpers/utils';
+import { useReqoreTheme } from '../../hooks/useTheme';
+import ReqoreMenu from '../Menu';
+import ReqoreMenuItem, { IReqoreMenuItemProps } from '../Menu/item';
+import { StyledPopover } from '../Popover';
+import ReqoreTabsListItem, { IReqoreTabListItemProps, StyledTabListItem } from './item';
+
+export interface IReqoreTabsListProps
+  extends IReqoreTabsProps,
+    React.HTMLAttributes<HTMLDivElement> {
+  onTabChange?: (tabId: string | number) => any;
+  children?: any;
+  customTheme?: IReqoreCustomTheme | IReqoreBreadcrumbsTheme;
+}
+
+export interface IReqoreTabsListStyle extends Omit<IReqoreTabsListProps, 'tabs'> {
+  theme: IReqoreTheme;
+}
+
+export const StyledReqoreTabsList = styled.div<IReqoreTabsListStyle>`
+  ${({ theme, fill, vertical, size, width }) => css`
+    height: ${vertical ? '100%' : `${TABS_SIZE_TO_PX[size]}px`};
+    width: ${vertical ? width || '200px' : '100%'};
+    flex-flow: ${vertical ? 'column' : 'row'};
+    display: flex;
+    align-items: center;
+    border-${vertical ? 'right' : 'bottom'}: 1px solid ${changeLightness(theme.main, 0.05)};
+
+    ${
+      fill &&
+      css`
+        justify-content: space-around;
+      `
+    }
+
+    ${StyledPopover} {
+      > ${StyledTabListItem} {
+        height: 100%;
+      }
+    }
+  `}
+`;
+
+const isTabHidden = (items: IReqoreTabsListItem[], activeTab?: string | number) =>
+  items.find((item) => item?.id === activeTab);
+
+const getMoreLabel = (items: IReqoreTabsListItem[], activeTab?: string | number) => {
+  if (isTabHidden(items, activeTab)) {
+    return isTabHidden(items, activeTab)?.label;
+  }
+
+  return 'More';
+};
+
+const getLabel = (
+  item: IReqoreTabsListItem | IReqoreTabsListItem[],
+  activeTab?: string | number,
+  tabsSize: TSizes = 'normal'
+) => {
+  if (!item) {
+    return 0;
+  }
+
+  const label: string = isArray(item) ? getMoreLabel(item, activeTab) : item.label;
+  const icon: number = isArray(item) || item.icon ? TEXT_FROM_SIZE[tabsSize] : 0;
+  const closeIconSize = isArray(item) || !item.onCloseClick ? 0 : 30;
+
+  return calculateStringSizeInPixels(label, TEXT_FROM_SIZE[tabsSize]) + icon + closeIconSize;
+};
+
+export const getTabsLength = (
+  items: (IReqoreTabsListItem | IReqoreTabsListItem[])[],
+  type: 'width' | 'height' = 'width',
+  activeTab?: string | number,
+  tabsSize?: TSizes
+): number =>
+  items.reduce((len, item) => {
+    if (type === 'height') {
+      const rows = getLabel(item, activeTab, tabsSize) / 4 || 1;
+
+      return len + rows * 15 + 10;
+    }
+
+    return len + 36 + getLabel(item, activeTab, tabsSize);
+  }, 0);
+
+const getTransformedItems = (
+  items: (IReqoreTabsListItem | IReqoreTabsListItem[])[],
+  size: number,
+  type: 'width' | 'height' = 'width',
+  activeTab?: string | number,
+  tabsSize?: TSizes
+): (IReqoreTabsListItem | IReqoreTabsListItem[])[] => {
+  if (!size) {
+    return items;
+  }
+  let newItems = [...items];
+
+  console.log('SIZES', getTabsLength(newItems, type, activeTab, tabsSize), size);
+
+  while (getTabsLength(newItems, type, activeTab, tabsSize) > size && newItems.length > 1) {
+    if (isArray(newItems[newItems.length - 1])) {
+      (newItems[newItems.length - 1] as IReqoreTabsListItem[]).unshift(
+        newItems[newItems.length - 2] as IReqoreTabsListItem
+      );
+      newItems[newItems.length - 2] = undefined!;
+    } else {
+      const lastItem = newItems[newItems.length - 1];
+      (newItems[newItems.length - 1] as IReqoreTabsListItem[]) = [
+        lastItem,
+      ] as IReqoreTabsListItem[];
+    }
+
+    newItems = newItems.filter((i) => i);
+  }
+
+  return newItems.filter((i) => i);
+};
+
+const ReqoreTabsList = ({
+  tabs,
+  onTabChange,
+  activeTab,
+  _testWidth,
+  fill,
+  vertical,
+  activeTabIntent,
+  customTheme,
+  wrapTabNames,
+  flat,
+  size,
+  intent,
+  ...rest
+}: IReqoreTabsListProps) => {
+  const [ref, { width, height }] = useMeasure();
+  const theme = useReqoreTheme('main', customTheme, intent);
+
+  const transformedItems = vertical
+    ? tabs
+    : getTransformedItems(
+        tabs,
+        vertical ? height : _testWidth || width,
+        vertical ? 'height' : 'width',
+        activeTab,
+        size
+      );
+
+  return (
+    <ReqoreThemeProvider theme={theme}>
+      <StyledReqoreTabsList
+        {...rest}
+        size={size}
+        fill={fill}
+        vertical={vertical}
+        className={`${rest.className || ''} reqore-tabs-list`}
+        ref={ref}
+        flat={flat}
+        theme={theme}
+      >
+        {transformedItems.map((item: IReqoreTabsListItem | IReqoreTabsListItem[], index: number) =>
+          isArray(item) ? (
+            <React.Fragment key={index}>
+              <ReqorePopover
+                key={index}
+                component={ReqoreTabsListItem}
+                componentProps={
+                  {
+                    icon: 'ArrowDownSLine',
+                    id: 'showMore',
+                    label: getMoreLabel(item, activeTab),
+                    active: !!isTabHidden(item, activeTab),
+                    activeIntent: activeTabIntent,
+                    customTheme: theme,
+                    vertical,
+                    flat,
+                    size,
+                    className: 'reqore-tabs-list-item-menu',
+                  } as IReqoreTabListItemProps
+                }
+                closeOnOutsideClick
+                isReqoreComponent
+                handler='hoverStay'
+                content={
+                  <ReqoreMenu customTheme={theme}>
+                    {item.map(
+                      ({
+                        icon,
+                        label,
+                        as,
+                        tooltip,
+                        props,
+                        disabled,
+                        id,
+                        onCloseClick,
+                        intent,
+                        activeIntent,
+                        closeIcon,
+                      }) => (
+                        <ReqoreMenuItem
+                          {...({
+                            ...props,
+                            icon,
+                            as,
+                            intent: activeTab === id ? activeIntent || intent : intent,
+                            disabled,
+                            rightIcon: onCloseClick ? closeIcon || 'CloseLine' : undefined,
+                            onRightIconClick: onCloseClick
+                              ? () => {
+                                  onCloseClick(id);
+                                }
+                              : undefined,
+                            selected: activeTab === id,
+                            onClick: (_id, event: React.MouseEvent<any>) => {
+                              if (!disabled) {
+                                onTabChange?.(id);
+
+                                if (props?.onClick) {
+                                  props.onClick(event);
+                                }
+                              }
+                            },
+                          } as IReqoreMenuItemProps)}
+                          tooltip={tooltip}
+                          key={index + label}
+                        >
+                          {label}
+                        </ReqoreMenuItem>
+                      )
+                    )}
+                  </ReqoreMenu>
+                }
+              />
+            </React.Fragment>
+          ) : (
+            <React.Fragment key={index}>
+              <ReqoreTabsListItem
+                {...item}
+                fill={fill}
+                size={size}
+                activeIntent={activeTabIntent}
+                customTheme={theme}
+                wrapTabNames={wrapTabNames}
+                key={index}
+                vertical={vertical}
+                active={activeTab === item.id}
+                onClick={(event: React.MouseEvent<any>) => {
+                  if (!item.disabled) {
+                    onTabChange?.(item.id);
+
+                    if (item.props?.onClick) {
+                      item.props.onClick(event);
+                    }
+                  }
+                }}
+                onCloseClick={
+                  item.onCloseClick
+                    ? () => {
+                        item.onCloseClick?.(item.id);
+                      }
+                    : undefined
+                }
+              />
+            </React.Fragment>
+          )
+        )}
+      </StyledReqoreTabsList>
+    </ReqoreThemeProvider>
+  );
+};
+
+export default ReqoreTabsList;

package/src/components/Tag/group.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import styled from 'styled-components';
+import { StyledTag } from '.';
+import { TSizes } from '../../constants/sizes';
+
+export interface IReqoreTagGroup extends React.HTMLAttributes<HTMLDivElement> {
+  children: any;
+  size?: TSizes;
+  columns?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+}
+
+const StyledTagGroup = styled.div`
+  ${StyledTag} {
+    margin-right: 5px;
+    margin-bottom: 5px;
+  }
+`;
+
+const ReqoreTagGroup = ({ children, size, className, columns, ...rest }: IReqoreTagGroup) => (
+  <StyledTagGroup {...rest} className={`${className || ''} reqore-tag-group`}>
+    {React.Children.map(children, (child) =>
+      child
+        ? React.cloneElement(child, {
+            size,
+            width: columns ? `calc(${100 / columns}% - 5px)` : child.props.width,
+          })
+        : null
+    )}
+  </StyledTagGroup>
+);
+
+export default ReqoreTagGroup;