@oliasoft-open-source/react-ui-library 1.0.0

package/src/components/list/list.jsx

@@ -0,0 +1,276 @@
+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

@@ -0,0 +1,256 @@
+@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;
+  }
+}