@oliasoft-open-source/react-ui-library 2.4.7 → 3.0.0

package/src/components/list/list.jsx

@@ -1,276 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import { concat, slice } from 'lodash';
-import cx from 'classnames';
-import { DragDropContext, Droppable } from 'react-beautiful-dnd';
-import InfiniteScroll from 'react-infinite-scroll-component';
-import { actionsShape } from '../actions/actions.shape';
-import { Card } from '../card/card';
-import { ListHeading } from './list-row/list-heading';
-import { ListRow } from './list-row/list-row';
-import styles from './list.module.less';
-
-export const List = ({
-  list,
-  bordered,
-  expanding,
-  narrow,
-  toggleNarrow,
-  onToggleNarrow,
-  invokeEditOnRowClick,
-  noHeader,
-  stickyHeader,
-  draggable,
-  onListReorder,
-  marginBottom,
-  height,
-  testId,
-  scrollDetails,
-}) => {
-  const {
-    scrollable,
-    hideScrollbar,
-    triggerScrollToActiveItem,
-    infiniteScroll,
-    infiniteScrollTarget,
-    limit,
-  } = scrollDetails;
-
-  const listHeadingRef = useRef();
-  const listRowRefs = useRef([]);
-  const listContainerRef = useRef();
-  const [items, setItems] = useState(slice(list?.items, 0, limit));
-  const [index, setIndex] = useState(limit);
-  const [hasMore, setHasMore] = useState(index < list?.items.length);
-
-  // update length of ref array if items are added or removed
-  useEffect(() => {
-    listRowRefs.current = listRowRefs.current.slice(0, list.items.length);
-  }, [list.items.length]);
-
-  useEffect(() => {
-    setItems(slice(list?.items, 0, index));
-  }, [list.items]);
-
-  const loadMoreItems = () => {
-    if (index >= list.items.length) {
-      setHasMore(false);
-      return;
-    }
-    const newIndex = index + limit;
-    const newItems = concat(items, slice(list?.items, index, newIndex));
-    setIndex(newIndex);
-    setItems(newItems);
-  };
-
-  const findFirstActiveItemIndex = (items) =>
-    items.findIndex((item) => item.active === true);
-
-  const setScrollToActiveItem = (activeItemIndex) => {
-    // account for list row border length.
-    const itemBorderLength = 1;
-
-    if (triggerScrollToActiveItem && activeItemIndex >= 0) {
-      // add heights from div of items up until the active item
-      const itemOffsets = listRowRefs.current.reduce((acc, val, index) => {
-        if (index < activeItemIndex) {
-          return acc + val.clientHeight + itemBorderLength;
-        }
-        return acc;
-      }, 0);
-
-      // center active item
-      const centerOffset =
-        listContainerRef.current.clientHeight / 2 -
-        listRowRefs.current[activeItemIndex].clientHeight / 2;
-      const scrollOffset = itemOffsets - centerOffset;
-      // if sticky header, offset by half of heading div height
-      if (stickyHeader) {
-        const headingOffset = listHeadingRef?.current?.clientHeight / 2;
-        listContainerRef.current.scrollTop = scrollOffset + headingOffset;
-      }
-
-      // if not sticky header, offset by heading div height
-      const headingOffset = listHeadingRef?.current?.clientHeight;
-      listContainerRef.current.scrollTop = scrollOffset + headingOffset;
-    }
-  };
-
-  useEffect(() => {
-    if (triggerScrollToActiveItem) {
-      const activeItemIndex = findFirstActiveItemIndex(list?.items);
-      setScrollToActiveItem(activeItemIndex);
-    }
-  }, [triggerScrollToActiveItem]);
-
-  return (
-    <DragDropContext
-      onDragEnd={(result) => {
-        const from = result?.source?.index;
-        const to = result?.destination?.index;
-        onListReorder({ from, to });
-      }}
-    >
-      <Droppable droppableId="droppable">
-        {(provided, snapshot) => {
-          return (
-            <div
-              className={cx(
-                narrow ? styles.narrow : '',
-                scrollable ? styles.scrollableList : '',
-                hideScrollbar ? styles.hideScrollbar : '',
-              )}
-              data-testid={testId}
-              id="scrollableDiv"
-              style={{ height, marginBottom }}
-              ref={listContainerRef}
-            >
-              <div
-                ref={provided.innerRef}
-                {...provided.droppableProps} // eslint-disable-line react/jsx-props-no-spreading
-              >
-                <Card bordered={bordered} padding={false}>
-                  {!noHeader && (
-                    <ListHeading
-                      name={list.name}
-                      actions={list.actions}
-                      toggleNarrow={toggleNarrow}
-                      onToggleNarrow={onToggleNarrow}
-                      stickyHeader={stickyHeader}
-                      ref={listHeadingRef}
-                    />
-                  )}
-                  <div
-                    className={cx(styles.list, bordered ? styles.bordered : '')}
-                  >
-                    {infiniteScroll ? (
-                      <InfiniteScroll
-                        dataLength={items.length}
-                        next={loadMoreItems}
-                        hasMore={hasMore}
-                        scrollableTarget={
-                          infiniteScrollTarget || 'scrollableDiv'
-                        }
-                      >
-                        <ListRow
-                          draggable={draggable}
-                          items={items}
-                          expanding={expanding}
-                          invokeEditOnRowClick={invokeEditOnRowClick}
-                          onListReorder={onListReorder}
-                          provided={provided}
-                          snapshot={snapshot}
-                          ref={listRowRefs}
-                        />
-                      </InfiniteScroll>
-                    ) : (
-                      <ListRow
-                        draggable={draggable}
-                        items={list.items}
-                        expanding={expanding}
-                        invokeEditOnRowClick={invokeEditOnRowClick}
-                        onListReorder={onListReorder}
-                        provided={provided}
-                        snapshot={snapshot}
-                        ref={listRowRefs}
-                      />
-                    )}
-                  </div>
-                </Card>
-              </div>
-            </div>
-          );
-        }}
-      </Droppable>
-    </DragDropContext>
-  );
-};
-
-List.defaultProps = {
-  bordered: false,
-  expanding: false,
-  narrow: false,
-  toggleNarrow: false,
-  onToggleNarrow: () => {},
-  invokeEditOnRowClick: true,
-  noHeader: false,
-  draggable: false,
-  onListReorder: () => {},
-  marginBottom: 0,
-  height: undefined,
-  scrollDetails: {
-    scrollable: false,
-    hideScrollbar: false,
-    triggerScrollToActiveItem: false,
-    infiniteScroll: false,
-    limit: 10,
-    infiniteScrollTarget: undefined,
-  },
-  testId: undefined,
-};
-
-List.propTypes = {
-  list: PropTypes.shape({
-    name: PropTypes.string,
-    actions: actionsShape,
-    items: PropTypes.arrayOf(
-      PropTypes.shape({
-        id: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-          .isRequired,
-        name: PropTypes.string.isRequired,
-        title: PropTypes.string,
-        active: PropTypes.bool,
-        details: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-        metadata: PropTypes.string,
-        metaCount: PropTypes.number,
-        invalid: PropTypes.bool,
-        content: PropTypes.element,
-        actions: actionsShape,
-        testId: PropTypes.string,
-        icon: PropTypes.shape({
-          icon: PropTypes.node.isRequired,
-          color: PropTypes.string.isRequired,
-          tooltip: PropTypes.shape({
-            text: PropTypes.oneOfType([
-              PropTypes.string,
-              PropTypes.number,
-              PropTypes.node,
-            ]),
-            error: PropTypes.bool,
-            warning: PropTypes.bool,
-            placement: PropTypes.string,
-            enabled: PropTypes.bool,
-            maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-            triggerOffset: PropTypes.oneOfType([
-              PropTypes.string,
-              PropTypes.number,
-            ]),
-            possiblePlacements: PropTypes.array,
-            fontSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-            padding: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-          }),
-        }),
-      }),
-    ).isRequired,
-  }).isRequired,
-  bordered: PropTypes.bool,
-  expanding: PropTypes.bool,
-  narrow: PropTypes.bool,
-  toggleNarrow: PropTypes.bool,
-  onToggleNarrow: PropTypes.func,
-  invokeEditOnRowClick: PropTypes.bool, //by default clicking row invokes edit action
-  noHeader: PropTypes.bool,
-  draggable: PropTypes.bool,
-  onListReorder: PropTypes.func,
-  marginBottom: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  scrollDetails: PropTypes.shape({
-    scrollable: PropTypes.bool,
-    hideScrollbar: PropTypes.bool,
-    triggerScrollToActiveItem: PropTypes.bool,
-    infiniteScroll: PropTypes.bool,
-    limit: PropTypes.number,
-    infiniteScrollTarget: PropTypes.string,
-  }),
-  testId: PropTypes.string,
-};

package/src/components/list/list.module.less

@@ -1,256 +0,0 @@
-@import '../../style/variables.less';
-
-.header .headerTitle,
-.heading .itemHeader {
-  transition: opacity 0.3s;
-
-  .narrow & {
-    opacity: 0;
-  }
-}
-
-.stickyHeader {
-  position: sticky;
-  top: 0;
-  background-color: var(--color-background);
-  z-index: 10;
-}
-
-.itemHeader {
-  padding: 12px 20px;
-  display: flex;
-  align-items: flex-start;
-
-  .title {
-    margin: 0;
-    padding: 0;
-    flex-grow: 1;
-    min-width: 0;
-  }
-
-  .name {
-    font-weight: 400;
-  }
-
-  .iconTooltipMargin {
-    margin-left: 10px;
-  }
-
-  .bold {
-    font-weight: 900;
-  }
-}
-
-.header {
-  padding: 16px 20px;
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid var(--color-border);
-}
-
-// Deprecated
-.toggleNarrow {
-  margin-right: 16px;
-  margin-left: -5px;
-  color: #c8c8c8;
-  transition: all 0.4s;
-  display: flex;
-  width: 22px;
-  justify-content: center;
-
-  &:hover {
-    color: var(--color-text-primary-hover);
-  }
-
-  &:active {
-    color: var(--color-text-primary-active);
-  }
-
-  .narrow & {
-    transform: scaleX(-1);
-  }
-}
-
-.drag {
-  color: var(--color-text-faint);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 10px;
-  margin-left: -6px;
-  cursor: move;
-  height: 19px;
-  width: 19px;
-
-  path {
-    stroke: var(--color-text-faint);
-  }
-
-  &:hover path {
-    stroke: var(--color-text-primary-hover);
-  }
-
-  &:active path {
-    stroke: var(--color-text-primary-active);
-  }
-}
-
-.list {
-  flex-shrink: 0;
-  background: var(--color-background);
-
-  &.bordered {
-    &:first-child,
-    &:first-child > :first-child {
-      border-top-left-radius: inherit;
-      border-top-right-radius: inherit;
-    }
-
-    &:last-child,
-    &:last-child > :last-child {
-      border-bottom-left-radius: inherit;
-      border-bottom-right-radius: inherit;
-      border-bottom: 0;
-    }
-  }
-}
-
-.item {
-  color: inherit;
-  display: block;
-  transition: background-color 0.2s;
-  position: relative;
-  border-bottom: 1px solid var(--color-border);
-  background-color: var(--color-background-raised);
-  transition: background 0.3s;
-  overflow-wrap: break-word;
-  hyphens: auto;
-
-  &:not(.heading):after {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: 5px;
-    border-top-left-radius: inherit;
-    border-bottom-left-radius: inherit;
-    transition: background 0.3s;
-  }
-
-  &.action {
-    cursor: pointer;
-
-    &:not(.active) {
-      &:hover {
-        background: var(--color-background-listitem-hover);
-
-        &:after {
-          background: rgba(black, 0.1);
-        }
-      }
-    }
-  }
-
-  &.active {
-    cursor: default;
-    position: relative;
-    z-index: 1;
-    background: var(--color-background-listitem-active);
-
-    &:after {
-      background: var(--color-background-primary) !important;
-    }
-  }
-
-  &.disabled {
-    color: var(--color-text-faint);
-    pointer-events: none;
-  }
-
-  &.heading {
-    color: var(--color-text-muted);
-    background-color: transparent;
-
-    &.action {
-      &:hover {
-        color: var(--color-text-primary-hover);
-      }
-    }
-  }
-
-  .label {
-    margin-right: 15px;
-    margin-left: -5px;
-    margin-top: -2px;
-    margin-bottom: -2px;
-    flex-shrink: 0;
-  }
-
-  .details,
-  .metadata {
-    display: block;
-    width: 100%;
-    font-weight: normal;
-    margin-top: 3px;
-  }
-
-  .metadata {
-    color: var(--color-text-muted);
-  }
-
-  .itemContent {
-    padding: 0 20px 12px;
-    cursor: auto;
-  }
-}
-
-.indentIcon {
-  width: 20px;
-  flex-shrink: 0;
-}
-
-.expandIcon {
-  width: 20px;
-  flex-shrink: 0;
-  position: relative;
-  margin-top: 1px;
-
-  &.expanded {
-    svg {
-      transform: rotate(90deg);
-    }
-  }
-}
-
-.right {
-  margin-left: auto;
-  display: flex;
-  align-items: center;
-  margin-top: -2px;
-  margin-bottom: -2px;
-}
-
-.actions {
-  margin-left: 8px;
-  display: flex;
-  align-items: center;
-}
-
-.scrollableList {
-  height: 100%; // match the height of parent
-  overflow-y: auto;
-  scroll-behavior: smooth;
-}
-
-.hideScrollbar {
-  /* Hide scrollbar for Firefox */
-  scrollbar-width: none;
-  /* Hide scrollbar for IE 10+ */
-  -ms-overflow-style: none;
-
-  /* Hide scrollbar for Chrome, Safari and Opera */
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}