onekijs-ui 0.9.2 → 0.15.2

package/src/components/list/components/ListBodyComponent.tsx

@@ -0,0 +1,250 @@
+import { get, Item, last, useEventListener } from 'onekijs-framework';
+import React, { useCallback, useEffect, useRef } from 'react';
+import { addStyle } from '../../../utils/style';
+import { ListBodyProps } from '../typings';
+import ListItemComponent, { ListItemContent } from './ListItemComponent';
+import LoadingItem from './LoadingItem';
+import StandardListComponent from './StandardListComponent';
+import DefaultVirtualListComponent from './VirtualListComponent';
+
+const findItemIndex = (items?: (Item<unknown> | undefined)[], uid?: string): number => {
+  if (items === undefined) {
+    return -1;
+  }
+  return items.findIndex((i) => {
+    if (i === undefined) {
+      return false;
+    }
+    if (i.uid === undefined) {
+      return false;
+    }
+    return i.uid === uid;
+  });
+};
+
+const ListBodyComponent: React.FC<ListBodyProps<any, any>> = ({
+  bodyRef,
+  className,
+  height,
+  items,
+  ItemComponent = ListItemComponent,
+  ItemLoadingComponent = LoadingItem,
+  ItemContentComponent = ListItemContent,
+  NotFoundComponent,
+  keyboardNavigable,
+  ListComponent = StandardListComponent,
+  multiSelect,
+  onItemActivate,
+  onItemDeactivate,
+  onItemSelect,
+  onItemUnselect,
+  onItemHighlight,
+  onItemUnhighlight,
+  parentRef,
+  scrollToIndex,
+  service,
+  state,
+  style,
+  totalSize,
+  virtualItems,
+  VirtualListComponent = DefaultVirtualListComponent,
+}) => {
+  const scrollAlignRef = useRef<'center' | 'auto'>('center');
+  const lastActiveItemUid = useRef<string>();
+  const virtualRef = useRef<HTMLDivElement>(null!);
+
+  const onItemClick = useCallback(
+    (item: any, index: number) => {
+      if (item !== undefined && !item.disabled) {
+        if (onItemSelect && !item.selected) {
+          onItemSelect(item, index);
+        } else if (onItemUnselect && item.selected) {
+          onItemUnselect(item, index);
+        } else if (multiSelect && !item.selected) {
+          service.addSelected('item', item);
+        } else if (multiSelect && item.selected) {
+          service.removeSelected('item', item);
+        } else if (!item.selected) {
+          service.setSelected('item', item);
+        } else {
+          service.setSelected('item', []);
+        }
+      }
+    },
+    [multiSelect, onItemSelect, onItemUnselect, service],
+  );
+
+  const onItemMouseEnter = useCallback(
+    (item: any, index: number) => {
+      if (item !== undefined && !item.disabled) {
+        if (onItemHighlight) {
+          onItemHighlight(item, index);
+        } else {
+          service.setHighlighted('item', item);
+        }
+      }
+    },
+    [onItemHighlight, service],
+  );
+
+  const onItemMouseLeave = useCallback(
+    (item: any, index: number) => {
+      if (item !== undefined && !item.disabled) {
+        if (onItemUnhighlight) {
+          onItemUnhighlight(item, index);
+        } else {
+          service.removeHighlighted('item', item);
+        }
+      }
+    },
+    [onItemUnhighlight, service],
+  );
+
+  const onKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (!keyboardNavigable) return;
+      let nextIndex: number | undefined;
+      let nextItem: Item<any> | undefined;
+      if (['ArrowDown', 'ArrowUp', 'Enter', 'Escape'].includes(e.key)) {
+        const activeUid = last(state.active);
+        const activeItem = activeUid !== undefined ? service.getItem(activeUid) : undefined;
+        const activeIndex = findItemIndex(state.items, activeUid);
+        switch (e.key) {
+          case 'ArrowDown':
+          case 'ArrowUp':
+            if (e.key === 'ArrowDown') {
+              nextIndex = activeIndex === -1 ? 0 : activeIndex + 1;
+            } else {
+              nextIndex = activeIndex <= 0 ? 0 : activeIndex - 1;
+            }
+            do {
+              nextItem = get(state.items, nextIndex.toString());
+              if (e.key === 'ArrowDown') {
+                nextIndex++;
+              } else {
+                nextIndex--;
+              }
+            } while (nextItem !== undefined && nextItem.disabled);
+
+            if (nextItem !== undefined) {
+              scrollAlignRef.current = 'auto';
+              if (onItemActivate) {
+                onItemActivate(nextItem, nextIndex);
+              } else {
+                service.setActive('item', nextItem);
+              }
+            }
+            break;
+          case 'Enter':
+            if (activeIndex !== -1) {
+              nextItem = get(state.items, activeIndex.toString());
+              onItemClick(nextItem, activeIndex);
+            }
+            break;
+
+          case 'Escape':
+            if (onItemDeactivate) {
+              onItemDeactivate(activeItem, activeIndex);
+            } else {
+              service.setActive('item', []);
+            }
+            break;
+        }
+      }
+    },
+    [keyboardNavigable, onItemActivate, onItemDeactivate, onItemClick, service, state.active, state.items],
+  );
+
+  useEffect(() => {
+    if (scrollToIndex) {
+      const activeUid = state.active === undefined ? undefined : state.active[0];
+      if (activeUid !== lastActiveItemUid.current) {
+        lastActiveItemUid.current = activeUid;
+        const activeIndex = findItemIndex(state.items, activeUid);
+
+        if (activeIndex >= 0) {
+          scrollToIndex(activeIndex, { align: scrollAlignRef.current });
+        }
+      }
+    }
+  });
+
+  useEventListener('keydown', onKeyDown, false);
+
+  const overflow = parentRef && parentRef !== bodyRef ? 'visible' : 'auto';
+  if (virtualItems !== undefined) {
+    if (virtualItems.length === 0 && NotFoundComponent) {
+      return (
+        <div className={className}>
+          <NotFoundComponent />
+        </div>
+      );
+    }
+    return (
+      <div
+        ref={bodyRef}
+        className={className}
+        style={addStyle(
+          {
+            maxHeight: `${typeof height === 'string' ? height : `${height}px`}`,
+            overflow: overflow,
+          },
+          style,
+        )}
+      >
+        <div
+          ref={virtualRef}
+          className="o-virtualizer"
+          style={{
+            height: `${totalSize}px`,
+            width: '100%',
+            position: 'relative',
+          }}
+        >
+          <VirtualListComponent
+            items={items}
+            ItemComponent={ItemComponent}
+            ItemLoadingComponent={ItemLoadingComponent}
+            ItemContentComponent={ItemContentComponent}
+            virtualItems={virtualItems}
+            onItemMouseEnter={onItemMouseEnter}
+            onItemMouseLeave={onItemMouseLeave}
+            onItemClick={onItemClick}
+          />
+        </div>
+      </div>
+    );
+  } else {
+    if (items.length === 0 && NotFoundComponent) {
+      return (
+        <div className={className}>
+          <NotFoundComponent />
+        </div>
+      );
+    }
+    if (height !== undefined) {
+      style = addStyle(
+        {
+          maxHeight: `${typeof height === 'string' ? height : `${height}px`}`,
+          overflow: 'auto',
+        },
+        style,
+      );
+    }
+    return (
+      <div ref={bodyRef} className={className} style={style}>
+        <ListComponent
+          items={items}
+          ItemComponent={ItemComponent}
+          ItemLoadingComponent={ItemLoadingComponent}
+          ItemContentComponent={ItemContentComponent}
+          onItemMouseEnter={onItemMouseEnter}
+          onItemMouseLeave={onItemMouseLeave}
+          onItemClick={onItemClick}
+        />
+      </div>
+    );
+  }
+};
+
+export default ListBodyComponent;

package/src/components/list/components/ListComponent.tsx

@@ -1,31 +1,17 @@
-import { omit, useCollection } from 'onekijs-core';
-import React, { FC } from 'react';
-import { ListProps, StandardListProps, ListInternalProps } from '../typings';
-import StandardListComponent from './StandardListComponent';
-import VirtualistComponent from './VirtualListComponent';
+import { isCollection } from 'onekijs-framework';
+import React from 'react';
+import { ListProps } from '../typings';
+import ArrayListComponent from './ArrayListComponent';
+import CollectionListComponent from './CollectionListComponent';
 
-const ListComponent: FC<ListProps> = (props) => {
-  const { items, ...listInternalProps } = props;
-  if (Array.isArray(items)) {
-    return <ListDataComponent {...listInternalProps} items={items} />;
+const ListComponent: React.FC<ListProps> = React.memo((props) => {
+  if (isCollection(props.controller)) {
+    return <CollectionListComponent {...props} controller={props.controller} />;
   } else {
-    return <ListInternalComponent {...listInternalProps} collection={items} />;
+    return <ArrayListComponent {...props} dataSource={props.dataSource || []} />;
   }
-};
+});
 
-const ListDataComponent: FC<Omit<ListProps, 'items'> & { items: any[] }> = (props) => {
-  const { items, ...listInternalProps } = props;
-  const collection = useCollection(items);
-  return <ListInternalComponent {...listInternalProps} collection={collection} />;
-};
-
-const ListInternalComponent: FC<ListInternalProps> = (props) => {
-  if (props.height) {
-    return <VirtualistComponent {...props} />;
-  } else {
-    const standardProps: StandardListProps = omit(props, ['itemHeight', 'height', 'preload']);
-    return <StandardListComponent {...standardProps} />;
-  }
-};
+ListComponent.displayName = 'ListComponent';
 
 export default ListComponent;

package/src/components/list/components/ListItemComponent.tsx

@@ -1,11 +1,23 @@
+import { Item } from 'onekijs-framework';
 import React, { FC } from 'react';
 import { ListItemProps } from '../typings';
-import { LoadingStatus } from 'onekijs-core';
 
-const ListItemComponent: FC<ListItemProps> = React.memo(({ item }) => {
+export const ListItemContent: FC<ListItemProps<any, Item<any>>> = ({ item }) => {
+  return <>{item.text || ''}</>;
+};
+
+const ListItemComponent: FC<ListItemProps<any, Item<any>>> = React.memo((props) => {
+  const { item, index, onMouseEnter, onMouseLeave, onClick, ItemContentComponent = ListItemContent } = props;
   return (
-    <div className="o-list-item">
-      {item.data === undefined && item.meta?.loadingStatus === LoadingStatus.Loading ? 'loading' : item.text}
+    <div
+      className={`o-list-item${item?.selected ? ' o-list-item-selected' : ''}${
+        item?.highlighted ? ' o-list-item-highlighted' : ''
+      }${item?.active ? ' o-list-item-active' : ''}${item?.disabled ? ' o-list-item-disabled' : ''}`}
+      onMouseEnter={() => onMouseEnter && item && onMouseEnter(item, index)}
+      onMouseLeave={() => onMouseLeave && item && onMouseLeave(item, index)}
+      onClick={() => onClick && item && onClick(item, index)}
+    >
+      <ItemContentComponent {...props} />
     </div>
   );
 });

package/src/components/list/components/LoadingItem.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+import { height, minHeight, width } from '../../../styles/size';
+import { addClassname } from '../../../utils/style';
+
+const LoadingItem: React.FC<{ className?: string }> = ({ className }) => {
+  return <div className={addClassname('o-loading-item', className)} />;
+};
+
+export default styled(LoadingItem)`
+  ${height('full')}
+  ${width('full')}
+  ${minHeight('20px')}
+  animation: skeleton-loading 1s linear infinite alternate;
+
+  @keyframes skeleton-loading {
+    0% {
+      background-color: hsl(200, 20%, 95%);
+    }
+    100% {
+      background-color: hsl(200, 20%, 80%);
+    }
+  }
+`;

package/src/components/list/components/StandardListComponent.tsx

@@ -1,39 +1,41 @@
-import React, { FC, useEffect } from 'react';
-import { LoadingStatus } from 'onekijs-core';
-import { addClassname } from '../../../utils/style';
+import { LoadingStatus } from 'onekijs-framework';
+import React from 'react';
 import { StandardListProps } from '../typings';
-import ListItemComponent from './ListItemComponent';
-import { emptyListItem } from '../utils';
+import ListItemComponent, { ListItemContent } from './ListItemComponent';
+import LoadingItem from './LoadingItem';
 
-const StandardListComponent: FC<StandardListProps> = ({
-  className,
-  collection,
+const StandardListComponent: React.FC<StandardListProps<any, any>> = ({
+  items,
   ItemComponent = ListItemComponent,
+  ItemLoadingComponent = LoadingItem,
+  ItemContentComponent = ListItemContent,
   onItemClick,
-  onItemMouseOver,
+  onItemMouseEnter,
+  onItemMouseLeave,
 }) => {
-  const items = collection.items ?? [];
-
-  useEffect(() => {
-    if (collection.status === LoadingStatus.NotInitialized) {
-      return collection.load();
-    }
-  }, [collection]);
-
   return (
-    <div className={addClassname('o-list', className)}>
+    <>
       {items.map((item: any, index: number) => {
+        if (item?.loadingStatus === LoadingStatus.Loading) {
+          return <ItemLoadingComponent />;
+        }
+        if (!item || !item.data) {
+          return null;
+        }
         return (
           <ItemComponent
             key={`item-${index}`}
             index={index}
-            item={item || emptyListItem}
+            item={item}
+            data={item.data}
             onClick={onItemClick}
-            onMouseOver={onItemMouseOver}
+            onMouseEnter={onItemMouseEnter}
+            onMouseLeave={onItemMouseLeave}
+            ItemContentComponent={ItemContentComponent}
           />
         );
       })}
-    </div>
+    </>
   );
 };
 

package/src/components/list/components/VirtualListComponent.tsx

@@ -1,134 +1,117 @@
-import React, { FC, useCallback, useEffect, useMemo, useRef } from 'react';
-import { useVirtual } from 'react-virtual';
-import { CollectionStatus, Item, ItemMeta, LoadingStatus, useIsomorphicLayoutEffect, toCollectionItem } from 'onekijs-core';
-import { addClassname } from '../../../utils/style';
-import { VirtualListProps } from '../typings';
-import { canFetchMore, getListStatus, emptyListItem } from '../utils';
-import ListItemComponent from './ListItemComponent';
+import { LoadingStatus, useThrottle } from 'onekijs-framework';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { VirtualItemWrapperProps, VirtualListProps } from '../typings';
+import ListItemComponent, { ListItemContent } from './ListItemComponent';
+import LoadingItem from './LoadingItem';
 
-const defaultHeight = 200;
-const defaultItemHeight = 21;
-const defaultPreload = 100;
-const defaultIncrement = 100;
-
-const VirtualistComponent: FC<VirtualListProps> = ({
-  className,
-  collection,
-  height = defaultHeight,
+const VirtualItemWrapper: React.FC<VirtualItemWrapperProps<any, any>> = ({
+  virtualItem,
+  listItem,
   ItemComponent = ListItemComponent,
-  itemHeight = defaultItemHeight,
-  preload = defaultPreload,
-  increment = defaultIncrement,
+  ItemContentComponent = ListItemContent,
+  ItemLoadingComponent = LoadingItem,
   onItemClick,
-  onItemMouseOver,
+  onItemMouseEnter,
+  onItemMouseLeave,
 }) => {
-  const parentRef = useRef(null);
+  const { index, measureRef, start } = virtualItem;
+  const ref = useRef<HTMLDivElement>(null!);
+  const previousHeightRef = useRef<number | undefined>();
 
-  const estimatedItemHeight = useCallback(
-    (index: number) => {
-      if (typeof itemHeight === 'function') {
-        return itemHeight(index) || defaultItemHeight;
+  const measure = useCallback(
+    (el: HTMLElement | null) => {
+      if (el?.offsetHeight !== previousHeightRef.current && el?.offsetHeight) {
+        previousHeightRef.current = el.offsetHeight;
+        measureRef(el);
       }
-      return defaultItemHeight;
     },
-    [itemHeight],
+    [measureRef],
   );
 
-  const memo = useMemo(() => {
-    const result: {
-      items: (Item<any, ItemMeta> | undefined)[];
-      status: CollectionStatus;
-    } = {
-      items: [],
-      status: getListStatus(collection),
-    };
-
-    if (result.status === LoadingStatus.NotInitialized) {
-      result.items = Array(preload).fill(toCollectionItem(undefined, collection.getAdapter()));
-    } else {
-      result.items = collection.items || [];
-    }
-    return result;
-  }, [collection, preload]);
-
-  const { totalSize, virtualItems, scrollToIndex } = useVirtual({
-    size: memo.items.length,
-    estimateSize: estimatedItemHeight,
-    parentRef,
-  });
+  const measureThrottle = useThrottle(measure, 50);
 
-  useIsomorphicLayoutEffect(() => {
-    const offset = collection.getOffset() || 0;
-    const firstVirualItem = virtualItems[0];
-    const firstVirualItemIndex = firstVirualItem ? firstVirualItem.index : 0;
-    if (
-      collection.status !== LoadingStatus.Loading &&
-      collection.status !== LoadingStatus.Deprecated &&
-      offset === 0 &&
-      firstVirualItemIndex !== 0
-    ) {
-      scrollToIndex(0);
-    }
-  }, [collection]);
+  const resizeObserver = useMemo(() => {
+    return new ResizeObserver(() => {
+      measureThrottle(ref.current);
+    });
+  }, [measureThrottle]);
 
   useEffect(() => {
-    if (collection.status === LoadingStatus.NotInitialized) {
-      collection.load(preload);
-    } else if (canFetchMore(collection)) {
-      const lastVirtualItem = virtualItems[virtualItems.length - 1];
-      const lastVirtualItemIndex = lastVirtualItem ? lastVirtualItem.index : 0;
-      if (lastVirtualItemIndex >= memo.items.length - preload / 2) {
-        collection.load(increment, (collection.items as any[]).length);
-      }
+    const el = ref.current;
+    if (el) {
+      previousHeightRef.current = el.offsetHeight;
+      resizeObserver.observe(el);
     }
-  }, [collection, preload, virtualItems, increment, memo]);
+    return () => {
+      if (el) {
+        resizeObserver.unobserve(el);
+      }
+    };
+  }, [resizeObserver]);
 
   return (
     <div
-      ref={parentRef}
-      className={addClassname('o-list', className)}
+      className="o-virtual-item"
+      id={`virtual-item-${listItem?.uid || index}`}
+      ref={measureRef}
       style={{
-        maxHeight: `${typeof height === 'string' ? height : `${height}px`}`,
-        overflow: 'auto',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        minHeight: '20px',
+        transform: `translateY(${start}px)`,
       }}
     >
-      <div
-        className="o-list-virtualizer"
-        style={{
-          height: `${totalSize}px`,
-          width: '100%',
-          position: 'relative',
-        }}
-      >
-        {virtualItems.map(({ index, measureRef, start }) => {
-          const listItem = memo.items[index];
-          return (
-            <div
-              className="o-list-virtual-item"
-              key={`virtual-item-${index}`}
-              ref={measureRef}
-              style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                minHeight: '20px',
-                transform: `translateY(${start}px)`,
-              }}
-            >
-              <ItemComponent
-                key={`item-${index}`}
-                index={index}
-                item={listItem || emptyListItem}
-                onClick={onItemClick}
-                onMouseOver={onItemMouseOver}
-              />
-            </div>
-          );
-        })}
+      <div ref={ref}>
+        {listItem?.loadingStatus === LoadingStatus.Loading && <ItemLoadingComponent />}
+        {listItem?.loadingStatus !== LoadingStatus.Loading && listItem && listItem.data && (
+          <ItemComponent
+            key={`item-${listItem?.uid || index}`}
+            index={index}
+            item={listItem}
+            data={listItem.data}
+            onClick={onItemClick}
+            onMouseEnter={onItemMouseEnter}
+            onMouseLeave={onItemMouseLeave}
+            ItemContentComponent={ItemContentComponent}
+          />
+        )}
       </div>
     </div>
   );
 };
 
-export default VirtualistComponent;
+const VirtualListComponent: React.FC<VirtualListProps<any, any>> = ({
+  items,
+  ItemComponent = ListItemComponent,
+  ItemLoadingComponent = LoadingItem,
+  ItemContentComponent = ListItemContent,
+  onItemClick,
+  onItemMouseEnter,
+  onItemMouseLeave,
+  virtualItems,
+}) => {
+  return (
+    <>
+      {virtualItems.map((virtualItem) => {
+        const listItem = items[virtualItem.index];
+        return (
+          <VirtualItemWrapper
+            key={`virtual-item-${listItem?.uid || virtualItem.index}`}
+            listItem={listItem}
+            virtualItem={virtualItem}
+            ItemComponent={ItemComponent}
+            ItemLoadingComponent={ItemLoadingComponent}
+            ItemContentComponent={ItemContentComponent}
+            onItemClick={onItemClick}
+            onItemMouseEnter={onItemMouseEnter}
+            onItemMouseLeave={onItemMouseLeave}
+          />
+        );
+      })}
+    </>
+  );
+};
+
+export default VirtualListComponent;

package/src/components/list/hooks/useListController.ts

@@ -0,0 +1,19 @@
+import { CollectionProxy, CollectionService, useCollectionInitialState, useCollectionProxy } from 'onekijs-framework';
+import { ListItem, ListState, UseListOptions } from '../typings';
+
+const useListController = <T = any>(
+  dataSource: T[] | string,
+  options: UseListOptions<T, ListItem<T>> = {},
+): CollectionProxy<
+  T,
+  ListItem<T>,
+  ListState<T, ListItem<T>>,
+  CollectionService<T, ListItem<T>, ListState<T, ListItem<T>>>
+> => {
+  const initialState = useCollectionInitialState(dataSource, options);
+  const collection = useCollectionProxy(dataSource, CollectionService, initialState);
+
+  return collection;
+};
+
+export default useListController;

package/src/components/list/hooks/useListService.ts

@@ -0,0 +1,15 @@
+import React, { useContext } from 'react';
+import { ListCollection, ListItem, ListState } from '../typings';
+
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+export const ListServiceContext = React.createContext<unknown>(null!);
+
+const useListService = <
+  T = any,
+  I extends ListItem<T> = ListItem<T>,
+  S extends ListState<T, I> = ListState<T, I>
+>(): ListCollection<T, I, S> => {
+  return useContext(ListServiceContext) as ListCollection<T, I, S>;
+};
+
+export default useListService;