@qoretechnologies/reqore 0.44.0 → 0.45.0

package/src/components/Collection/index.tsx

@@ -1,426 +0,0 @@
-import { map, size } from 'lodash';
-import { useCallback, useMemo, useState } from 'react';
-import { useUpdateEffect } from 'react-use';
-import styled, { css } from 'styled-components';
-import { useReqoreProperty } from '../..';
-import { TReqorePaginationType } from '../../constants/paging';
-import { PADDING_FROM_SIZE } from '../../constants/sizes';
-import { ReqorePaginationContainer } from '../../containers/Paging';
-import { useQueryWithDelay } from '../../hooks/useQueryWithDelay';
-import { IReqoreIconName } from '../../types/icons';
-import { IReqoreColumnsProps, StyledColumns } from '../Columns';
-import ReqoreControlGroup from '../ControlGroup';
-import ReqoreInput, { IReqoreInputProps } from '../Input';
-import ReqoreMessage from '../Message';
-import {
-  IReqorePanelAction,
-  IReqorePanelProps,
-  IReqorePanelSubAction,
-  ReqorePanel,
-  TReqorePanelActions,
-} from '../Panel';
-import { ReqoreVerticalSpacer } from '../Spacer';
-import { getZoomActions, sizeToZoom, sortTableData, zoomToSize } from '../Table/helpers';
-import { IReqoreCollectionItemProps, ReqoreCollectionItem } from './item';
-
-export interface IReqoreCollectionProps extends IReqorePanelProps, IReqoreColumnsProps {
-  items?: IReqoreCollectionItemProps[];
-  inputProps?: IReqoreInputProps;
-  inputInTitle?: boolean;
-
-  sortButtonProps?: IReqorePanelAction;
-  displayButtonProps?: IReqorePanelAction;
-  stacked?: boolean;
-  rounded?: boolean;
-  height?: string;
-  fill?: boolean;
-  maxItemHeight?: number;
-
-  defaultQuery?: string;
-  defaultZoom?: 0 | 0.5 | 1 | 1.5 | 2;
-  defaultSort?: 'asc' | 'desc';
-  defaultSortBy?: string;
-
-  sortKeys?: Record<string, string>;
-
-  filterable?: boolean;
-  sortable?: boolean;
-  zoomable?: boolean;
-
-  showAs?: 'list' | 'grid';
-  showSelectedFirst?: boolean;
-  selectedIcon?: IReqoreIconName;
-  searchDelay?: number;
-
-  contentRenderer?: (
-    children: React.ReactNode,
-    items: IReqoreCollectionItemProps[],
-    searchInput?: React.ReactNode
-  ) => React.ReactNode;
-
-  onQueryChange?: (query: string | number) => void;
-
-  emptyMessage?: string;
-  sortButtonTooltip?: (sort?: 'asc' | 'desc') => string;
-  displayButtonTooltip?: (display?: 'list' | 'grid') => string;
-  inputPlaceholder?: (items?: IReqoreCollectionItemProps[]) => string;
-
-  paging?: TReqorePaginationType<IReqoreCollectionItemProps>;
-}
-
-export const StyledCollectionWrapper = styled(StyledColumns)`
-  height: ${({ height }) => (height ? `${height}` : 'auto')};
-  flex: ${({ fill }) => (fill ? 1 : undefined)};
-
-  ${({ rounded, stacked }: IReqoreCollectionProps) =>
-    (!rounded || stacked) &&
-    css`
-      border-radius: ${stacked && rounded ? '10px' : undefined};
-    `}
-
-  overflow: auto;
-  position: relative;
-`;
-
-export const zoomToWidth = {
-  0: '200px',
-  0.5: '300px',
-  1: '400px',
-  1.5: '500px',
-  2: '600px',
-};
-
-export const ReqoreCollection = ({
-  items,
-  stacked,
-  rounded = true,
-  fill,
-  maxItemHeight,
-  filterable,
-  inputInTitle = true,
-
-  sortable,
-  zoomable,
-
-  defaultZoom,
-  showSelectedFirst,
-  inputProps,
-  sortButtonProps,
-  displayButtonProps,
-  headerSize = 2,
-  showAs = 'grid',
-  selectedIcon,
-  flat = true,
-  minimal,
-  transparent = true,
-
-  defaultQuery,
-  defaultSort = 'asc',
-  defaultSortBy = 'label',
-
-  sortKeys = {},
-
-  onQueryChange,
-  contentRenderer = (children, _items, searchInput) => (
-    <>
-      {searchInput}
-      {!!searchInput && <ReqoreVerticalSpacer height={PADDING_FROM_SIZE.normal} />}
-      {children}
-    </>
-  ),
-  searchDelay = 300,
-  emptyMessage = 'No data in this collection, try changing your search query or filters',
-  sortButtonTooltip = (sort) => (sort === 'desc' ? 'Sort ascending' : 'Sort descending'),
-  displayButtonTooltip = (display) => (display === 'grid' ? 'Show as list' : 'Show as grid'),
-  inputPlaceholder = (items) => `Search in ${size(items)} items`,
-  paging,
-  height,
-
-  // Columns props
-  minColumnWidth,
-  maxColumnWidth,
-  columns,
-  alignItems,
-  columnsGap = '10px',
-
-  ...rest
-}: IReqoreCollectionProps) => {
-  const [_showAs, setShowAs] = useState<'list' | 'grid'>(showAs);
-  const [sort, setSort] = useState<'asc' | 'desc'>(defaultSort);
-  const [sortBy, setSortBy] = useState<string>(defaultSortBy);
-  const [contentRef, setContentRef] = useState<HTMLDivElement>(undefined);
-  const isMobile = useReqoreProperty('isMobile');
-  const [zoom, setZoom] = useState<number>(defaultZoom || sizeToZoom.normal);
-
-  const { query, setQuery, preQuery, setPreQuery } = useQueryWithDelay(
-    defaultQuery,
-    searchDelay,
-    onQueryChange
-  );
-
-  useUpdateEffect(() => {
-    setShowAs(showAs);
-  }, [showAs]);
-
-  const sortedItems: IReqoreCollectionItemProps[] = useMemo(() => {
-    if (!sortable) {
-      return items;
-    }
-
-    const _sortBy = !!sortKeys[sortBy] ? (v) => v?.metadata?.[sortBy] : sortBy;
-
-    if (showSelectedFirst) {
-      // Filter out the selected items
-      const selectedItems = items.filter((item) => item.selected);
-      // Filter out the unselected items
-      const unselectedItems = items.filter((item) => !item.selected);
-      // Sort the selected items
-      const sortedSelectedItems = sortTableData(selectedItems, {
-        by: _sortBy,
-        direction: sort,
-      });
-      // Sort the unselected items
-      const sortedUnselectedItems = sortTableData(unselectedItems, {
-        by: _sortBy,
-        direction: sort,
-      });
-
-      return [...sortedSelectedItems, ...sortedUnselectedItems];
-    }
-
-    return sortTableData(items, {
-      by: _sortBy,
-      direction: sort,
-    });
-  }, [items, sort, sortBy, showSelectedFirst, sortable]);
-
-  const filteredItems: IReqoreCollectionItemProps[] = useMemo(() => {
-    if (!filterable || query === '') {
-      return sortedItems;
-    }
-
-    return sortedItems.filter((item) => {
-      const text = `${item.label}${item.content?.toString()}${item.expandedContent?.toString()}${
-        item.searchString || ''
-      }`;
-
-      if (!text) {
-        return false;
-      }
-
-      return text.toString().toLowerCase().indexOf(query.toLowerCase()) !== -1;
-    });
-  }, [items, query, sortedItems]);
-
-  const handlePreQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setPreQuery(event.target.value);
-  };
-
-  const finalActions: TReqorePanelActions = useMemo(() => {
-    let actions: TReqorePanelActions = rest.actions ? [...rest.actions] : [];
-
-    const toolbarGroup: IReqorePanelAction = {
-      responsive: false,
-      icon: 'MoreLine',
-      className: 'reqore-collection-more',
-      actions: [
-        {
-          icon: _showAs === 'grid' ? 'ListUnordered' : 'GridLine',
-          onClick: () => setShowAs(_showAs === 'grid' ? 'list' : 'grid'),
-          tooltip: displayButtonTooltip(_showAs),
-          label: displayButtonTooltip(_showAs),
-          disabled: !size(filteredItems),
-          ...displayButtonProps,
-        },
-      ],
-    };
-
-    if (zoomable) {
-      toolbarGroup.actions = [
-        ...toolbarGroup.actions,
-        { divider: true, line: true },
-        ...getZoomActions('reqore-collection', zoom, setZoom, true),
-      ];
-    }
-
-    if (filterable && inputInTitle) {
-      actions = [
-        ...actions,
-        {
-          as: ReqoreInput,
-          props: {
-            key: 'search',
-            fixed: false,
-            placeholder: inputPlaceholder(items),
-            onClearClick: () => {
-              setQuery('');
-              setPreQuery('');
-            },
-            onChange: handlePreQueryChange,
-            value: preQuery,
-            icon: 'Search2Line',
-            minimal: false,
-            ...inputProps,
-          },
-        },
-      ];
-    }
-
-    if (sortable) {
-      const _sortKeys = {
-        label: 'Label',
-        intent: 'Intent',
-        ...sortKeys,
-      };
-
-      actions.push({
-        icon: sort === 'desc' ? 'SortDesc' : 'SortAsc',
-        tooltip: sortButtonTooltip(sort),
-        className: 'reqore-collection-sort',
-        fixed: true,
-        fluid: false,
-        disabled: !size(filteredItems),
-        actions: [
-          {
-            divider: true,
-            label: 'Sort by',
-            dividerAlign: 'left',
-            minimal: true,
-            dividerPadded: 'bottom',
-          },
-          ...map(
-            _sortKeys,
-            (label, key): IReqorePanelSubAction => ({
-              label,
-              selected: sortBy === key,
-              onClick: () => {
-                setSortBy(key);
-                setSort(sort === 'desc' ? 'asc' : 'desc');
-              },
-            })
-          ),
-        ],
-        ...sortButtonProps,
-      });
-    }
-
-    return [...actions, toolbarGroup];
-  }, [
-    filterable,
-    preQuery,
-    query,
-    rest.actions,
-    _showAs,
-    sort,
-    sortable,
-    filteredItems,
-    isMobile,
-    zoom,
-    zoomable,
-  ]);
-
-  const renderContent = useCallback(() => {
-    return contentRenderer(
-      <>
-        <ReqorePaginationContainer
-          key='paging-container'
-          items={filteredItems}
-          type={paging}
-          size={rest.size}
-          scrollContainer={contentRef}
-        >
-          {(finalItems) => (
-            <>
-              {!size(finalItems) ? (
-                <ReqoreMessage flat icon='Search2Line'>
-                  {emptyMessage}
-                </ReqoreMessage>
-              ) : (
-                <StyledCollectionWrapper
-                  columns={columns || (_showAs === 'grid' ? 'auto-fit' : 1)}
-                  columnsGap={stacked ? '0px' : columnsGap}
-                  rounded={rounded}
-                  stacked={stacked}
-                  fill={fill}
-                  ref={setContentRef}
-                  height={height}
-                  alignItems={alignItems}
-                  minColumnWidth={minColumnWidth || zoomToWidth[zoom]}
-                  maxColumnWidth={maxColumnWidth}
-                  className='reqore-collection-content'
-                >
-                  {finalItems?.map((item, index) => (
-                    <ReqoreCollectionItem
-                      size={zoomToSize[zoom]}
-                      responsiveTitle={false}
-                      {...item}
-                      icon={item.icon || (item.selected ? selectedIcon : undefined)}
-                      key={index}
-                      rounded={!stacked}
-                      maxContentHeight={maxItemHeight}
-                    />
-                  ))}
-                </StyledCollectionWrapper>
-              )}
-            </>
-          )}
-        </ReqorePaginationContainer>
-      </>,
-      filteredItems,
-      !inputInTitle && filterable ? (
-        <ReqoreControlGroup>
-          <ReqoreInput
-            key='search'
-            fixed={false}
-            placeholder={inputPlaceholder(items)}
-            onClearClick={() => {
-              setQuery('');
-              setPreQuery('');
-            }}
-            onChange={handlePreQueryChange}
-            value={preQuery}
-            icon='Search2Line'
-            minimal={false}
-            size={rest.size}
-            {...inputProps}
-          />
-        </ReqoreControlGroup>
-      ) : undefined
-    );
-  }, [
-    contentRenderer,
-    filteredItems,
-    _showAs,
-    columnsGap,
-    emptyMessage,
-    maxItemHeight,
-    rest,
-    rounded,
-    selectedIcon,
-    stacked,
-    zoom,
-  ]);
-
-  return (
-    <ReqorePanel
-      {...rest}
-      headerSize={headerSize}
-      style={{
-        ...rest.style,
-      }}
-      fill={fill}
-      contentStyle={{
-        overflow: fill ? 'hidden' : 'auto',
-        display: 'flex',
-        flexFlow: 'column',
-      }}
-      transparent={transparent}
-      minimal={minimal}
-      flat={flat}
-      actions={finalActions}
-      className={`reqore-collection ${rest.className || ''}`}
-    >
-      {renderContent()}
-    </ReqorePanel>
-  );
-};

package/src/components/Collection/item.tsx

@@ -1,267 +0,0 @@
-import { map, size } from 'lodash';
-import { rgba } from 'polished';
-import { useEffect, useRef, useState } from 'react';
-import { useDebounce, useMeasure } from 'react-use';
-import styled, { css } from 'styled-components';
-import { changeDarkness, getMainBackgroundColor } from '../../helpers/colors';
-import { useReqoreProperty } from '../../hooks/useReqoreContext';
-import { useReqoreTheme } from '../../hooks/useTheme';
-import { ReqoreBackdrop } from '../Drawer/backdrop';
-import {
-  IReqorePanelAction,
-  IReqorePanelBottomAction,
-  IReqorePanelProps,
-  ReqorePanel,
-} from '../Panel';
-import { ReqoreP } from '../Paragraph';
-import { ReqoreSpacer } from '../Spacer';
-import ReqoreTag, { IReqoreTagProps } from '../Tag';
-import ReqoreTagGroup from '../Tag/group';
-
-export interface IReqoreCollectionItemProps
-  extends Omit<
-    IReqorePanelProps,
-    | 'children'
-    | 'actions'
-    | 'collapsible'
-    | 'onCollapseChange'
-    | 'isCollapsed'
-    | 'unMountContentOnCollapse'
-    | 'bottomActions'
-    | 'content'
-  > {
-  selected?: boolean;
-  content?: string | number | React.ReactNode;
-  expandable?: boolean;
-  expandedContent?: string | React.ReactNode;
-  expandedActions?: IReqorePanelBottomAction[];
-  image?: string;
-  actions?: IReqorePanelAction[];
-  tags?: IReqoreTagProps[];
-  maxContentHeight?: number;
-  showContentFade?: boolean;
-  searchString?: string;
-  // Used for passing values and sorting
-  metadata?: Record<string, any>;
-}
-
-export const StyledCollectionItemContent = styled.div`
-  max-height: ${({ providedHeight }) => (providedHeight ? `${providedHeight}px` : 'auto')};
-  overflow: ${({ isSelected }) => (isSelected ? 'auto' : 'hidden')};
-  position: relative;
-  transition: 0.3s ease-in-out;
-  flex: 1;
-
-  ${({ contentOverflows, theme, opacity = 1 }) =>
-    contentOverflows &&
-    css`
-      &:after {
-        content: '';
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 100px;
-        transition: 0.3s ease-in-out;
-        background: linear-gradient(
-          to top,
-          ${rgba(changeDarkness(getMainBackgroundColor(theme), 0.03), opacity)} 0%,
-          transparent 100%
-        );
-      }
-    `}
-`;
-
-export const ReqoreCollectionItem = ({
-  flat = true,
-  minimal = true,
-  style,
-  content,
-  actions,
-  tags,
-  expandable,
-  expandedContent,
-  expandedActions,
-  maxContentHeight,
-  showContentFade = true,
-  ...rest
-}: IReqoreCollectionItemProps) => {
-  const [isSelected, setIsSelected] = useState(false);
-  const getAndIncreaseZIndex = useReqoreProperty('getAndIncreaseZIndex');
-  const ref = useRef<HTMLDivElement>(null);
-  const [contentRef, sizes] = useMeasure();
-  const originalDimensions = useRef(null);
-  const [position, setPosition] = useState(undefined);
-  const theme = useReqoreTheme('main', rest.customTheme);
-  const [dimensions, setDimensions] = useState<any>({
-    minWidth: undefined,
-    minHeight: undefined,
-    maxWidth: undefined,
-    maxHeight: undefined,
-    width: undefined,
-    height: undefined,
-    left: undefined,
-    top: undefined,
-    transform: undefined,
-  });
-
-  useEffect(() => {
-    if (isSelected) {
-      setPosition('fixed');
-    }
-  }, [isSelected]);
-
-  useDebounce(
-    () => {
-      if (isSelected) {
-        setDimensions({
-          ...dimensions,
-          width: undefined,
-          height: undefined,
-          left: '50%',
-          minWidth: '500px',
-          minHeight: '300px',
-          maxWidth: '90vw',
-          maxHeight: '90vh',
-          top: '50%',
-          transform: 'translateX(-50%) translateY(-50%)',
-        });
-      }
-    },
-    100,
-    [isSelected]
-  );
-
-  useDebounce(
-    () => {
-      if (!isSelected) {
-        setPosition(undefined);
-        setDimensions({
-          minHeight: undefined,
-          minWidth: undefined,
-          maxWidth: undefined,
-          maxHeight: undefined,
-          left: undefined,
-          top: undefined,
-          transform: 'translateX(0) translateY(0)',
-        });
-      }
-    },
-    220,
-    [isSelected]
-  );
-
-  const renderContent = () => {
-    const handleItemClick = (event?: any) => {
-      if (expandable) {
-        if (isSelected) {
-          setDimensions(originalDimensions.current);
-        } else {
-          originalDimensions.current = {
-            left: ref.current.getBoundingClientRect()?.left,
-            top: ref.current.getBoundingClientRect()?.top,
-            width: ref.current.getBoundingClientRect()?.width,
-            height: ref.current.getBoundingClientRect()?.height,
-            transform: 'translateX(0) translateY(0)',
-          };
-
-          setDimensions({
-            left: ref.current.getBoundingClientRect()?.left,
-            top: ref.current.getBoundingClientRect()?.top,
-            width: ref.current.getBoundingClientRect()?.width,
-            height: ref.current.getBoundingClientRect()?.height,
-            transform: 'translateX(0) translateY(0)',
-          });
-        }
-        setIsSelected(!isSelected);
-      }
-
-      rest.onClick?.(event);
-    };
-
-    const actualContent: string | React.ReactNode =
-      expandedContent && isSelected ? expandedContent : content;
-
-    const actualActions: IReqorePanelAction[] | undefined = isSelected
-      ? ([
-          ...(actions || []),
-          { icon: 'CloseLine', onClick: handleItemClick },
-        ] as IReqorePanelAction[])
-      : size(actions)
-      ? actions
-      : undefined;
-
-    return (
-      <>
-        {position && (
-          <>
-            <div style={{ ...originalDimensions.current }} />
-            <ReqoreBackdrop
-              zIndex={getAndIncreaseZIndex()}
-              blur={5}
-              onClose={() => handleItemClick()}
-            />
-          </>
-        )}
-        <ReqorePanel
-          flat={flat}
-          ref={ref}
-          minimal={minimal}
-          {...rest}
-          responsiveActions={false}
-          bottomActions={isSelected ? expandedActions : undefined}
-          style={{
-            ...style,
-            position,
-            zIndex: isSelected ? getAndIncreaseZIndex() : undefined,
-            ...dimensions,
-            transformOrigin: 'center',
-          }}
-          contentStyle={{
-            ...rest.contentStyle,
-            display: 'flex',
-            flexFlow: 'column',
-            justifyContent: 'space-between',
-          }}
-          onClick={(expandable && !isSelected) || rest.onClick ? handleItemClick : undefined}
-          actions={actualActions}
-          className={`reqore-collection-item ${rest.className || ''}`}
-        >
-          <StyledCollectionItemContent
-            theme={theme}
-            opacity={rest.transparent ? 0 : rest.opacity}
-            providedHeight={isSelected ? undefined : maxContentHeight}
-            isSelected={isSelected}
-            contentOverflows={
-              !rest.transparent &&
-              !rest.contentEffect &&
-              !isSelected &&
-              sizes?.height > maxContentHeight &&
-              showContentFade
-            }
-          >
-            <div ref={contentRef}>{actualContent}</div>
-          </StyledCollectionItemContent>
-          {showContentFade &&
-          (rest.contentEffect || rest.transparent) &&
-          !isSelected &&
-          sizes?.height > maxContentHeight ? (
-            <ReqoreP>...</ReqoreP>
-          ) : null}
-          {size(tags) ? (
-            <>
-              <ReqoreSpacer height={10} />
-              <ReqoreTagGroup size={isSelected ? 'normal' : 'small'}>
-                {map(tags, (tagProps, index) => (
-                  <ReqoreTag key={index} {...tagProps} />
-                ))}
-              </ReqoreTagGroup>
-            </>
-          ) : null}
-        </ReqorePanel>
-      </>
-    );
-  };
-
-  return renderContent();
-};

package/src/components/Columns/column.tsx

@@ -1,27 +0,0 @@
-import styled, { css } from 'styled-components';
-
-export interface IReqoreColumnProps
-  extends Pick<
-    React.CSSProperties,
-    'alignItems' | 'justifyContent' | 'flexFlow' | 'flex' | 'flexShrink' | 'flexGrow'
-  > {}
-
-export const ReqoreColumn = styled.div<IReqoreColumnProps>`
-  ${({
-    alignItems = 'flex-start',
-    justifyContent,
-    flex = '1 0 auto',
-    flexFlow = 'row',
-    flexGrow,
-    flexShrink,
-  }: IReqoreColumnProps) => css`
-    display: flex;
-    align-items: ${alignItems};
-    justify-content: ${justifyContent};
-    flex-flow: ${flexFlow};
-    flex: ${flex};
-    flex-grow: ${flexGrow};
-    flex-shrink: ${flexShrink};
-    overflow-x: hidden;
-  `}
-`;