onekijs-ui 0.9.2 → 0.15.2

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

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

package/src/components/list/hooks/useListView.tsx

@@ -0,0 +1,103 @@
+import { Item, LoadingStatus } from 'onekijs-framework';
+import { RefObject, useCallback, useEffect, useReducer } from 'react';
+import { useVirtual } from '../../../vendor/reactVirtual';
+//import { useVirtual } from 'react-virtual';
+import { CollectionListProps, ListCollection, VirtualItem } from '../typings';
+import { canFetchMore } from '../utils';
+
+const defaultItemHeight = 37;
+const defaultPreload = 50;
+const defaultIncrement = 50;
+const defaultOverscan = 1;
+
+const defaultKeyExtractor = (index: number) => index;
+
+const useListView: <T = any, I extends Item<T> = Item<T>>(
+  props: Pick<CollectionListProps<T, I>, 'height' | 'itemHeight' | 'overscan' | 'preload' | 'increment' | 'virtual'> & {
+    ref: RefObject<HTMLDivElement>;
+    controller: ListCollection<T, I>;
+    scrollToFn?: (offset: number, defaultScrollToFn?: (offset: number) => void) => void;
+    keyExtractor?: (index: number) => number | string;
+  },
+) => {
+  isVirtual: boolean;
+  items: (I | undefined)[];
+  scrollToIndex: (index: number, options?: { align: 'start' | 'center' | 'end' | 'auto' }) => void;
+  scrollToOffset: (offsetInPixels: number, options?: { align: 'start' | 'center' | 'end' | 'auto' }) => void;
+  totalSize: number;
+  virtualItems: VirtualItem[];
+  measure: () => void;
+} = ({
+  controller,
+  height,
+  itemHeight = defaultItemHeight,
+  overscan = defaultOverscan,
+  preload = defaultPreload,
+  increment = defaultIncrement,
+  keyExtractor,
+  ref,
+  virtual,
+}) => {
+  const isVirtual = virtual === undefined ? height !== undefined : virtual;
+  const [force, forceMeasure] = useReducer((x) => x + 1, 0);
+
+  const estimatedItemHeight = useCallback(
+    (index: number) => {
+      if (typeof itemHeight === 'function') {
+        return itemHeight(index) || defaultItemHeight;
+      }
+      return itemHeight;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [itemHeight],
+  );
+
+  // Trick for force recalcutate position without losing measurementCache
+  // In the react-virtual code, the position are recalculate if the forceExtractor function change
+  const forceKeyExtractor = useCallback(
+    (index: number) => {
+      const fn = keyExtractor || defaultKeyExtractor;
+      return fn(index);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [keyExtractor, force],
+  );
+
+  const state = controller.state;
+
+  const { totalSize, virtualItems, scrollToIndex, scrollToOffset } = useVirtual({
+    size: state.items?.length || 0,
+    estimateSize: estimatedItemHeight,
+    parentRef: ref,
+    overscan: overscan,
+    keyExtractor: forceKeyExtractor,
+  });
+
+  useEffect(() => {
+    if (isVirtual) {
+      if (state.status === LoadingStatus.NotInitialized) {
+        controller.load(preload);
+      } else if (canFetchMore(controller)) {
+        const lastVirtualItem = virtualItems[virtualItems.length - 1];
+        const lastVirtualItemIndex = lastVirtualItem ? lastVirtualItem.index : 0;
+        if (lastVirtualItemIndex >= (state.items?.length || 0) - preload / 2) {
+          controller.load(increment, ((state.items || []) as any[]).length);
+        }
+      }
+    } else if (controller.status === LoadingStatus.NotInitialized) {
+      controller.load();
+    }
+  }, [controller, state, preload, virtualItems, increment, isVirtual]);
+
+  return {
+    items: state.items || [],
+    isVirtual,
+    scrollToIndex,
+    scrollToOffset,
+    measure: forceMeasure,
+    totalSize,
+    virtualItems,
+  };
+};
+
+export default useListView;

package/src/components/list/typings.ts

@@ -1,46 +1,184 @@
-import { FC } from 'react';
-import { Collection, ItemMeta, Item } from 'onekijs-core';
+import {
+  Collection,
+  CollectionProxy,
+  CollectionState,
+  Item,
+  ItemAdaptee,
+  ItemAdapter,
+  UseCollectionOptions,
+} from 'onekijs-framework';
+import React, { FC } from 'react';
 
-export type ListItems<T = any, M extends ItemMeta = ItemMeta> = T[] | Collection<T, M>;
+export type ArrayListProps<T = any, I extends ListItem<T> = ListItem<T>> = ListConfig<T, I> & {
+  adapter?: ListItemAdapter<T>;
+  dataSource: T[] | string;
+  fetchOnce?: boolean;
+};
 
-export type ListItemHandler<T = any, M extends ItemMeta = ItemMeta> = (item: Item<T, M>, index: number) => void;
+export type ListBodyProps<
+  T = any,
+  I extends ListItem<T> = ListItem<T>,
+  S extends ListState<T, I> = ListState<T, I>,
+  C extends ListCollection<T, I, S> = ListCollection<T, I, S>,
+> = Pick<
+  CollectionListProps<T, I>,
+  | 'onItemSelect'
+  | 'onItemUnselect'
+  | 'onItemActivate'
+  | 'onItemDeactivate'
+  | 'onItemHighlight'
+  | 'onItemUnhighlight'
+  | 'multiSelect'
+  | 'ItemComponent'
+  | 'NotFoundComponent'
+  | 'height'
+  | 'keyboardNavigable'
+> & {
+  bodyRef?: React.RefObject<HTMLDivElement>;
+  className?: string;
+  ItemLoadingComponent?: FC;
+  ItemComponent?: FC<ListItemProps<T, I>>;
+  ItemContentComponent?: FC<ListItemProps<T, I>>;
+  items: (I | undefined)[];
+  ListComponent?: FC<StandardListProps<T, I>>;
+  parentRef?: React.RefObject<HTMLDivElement>;
+  service: C;
+  state: S;
+  style?: React.CSSProperties;
+  totalSize?: number;
+  scrollToIndex?: (index: number, options?: { align: 'start' | 'center' | 'end' | 'auto' }) => void;
+  virtualItems?: VirtualItem[];
+  VirtualListComponent?: FC<VirtualListProps<T, I>>;
+};
+
+export type CollectionListProps<
+  T = any,
+  I extends ListItem<T> = ListItem<T>,
+  S extends ListState<T, I> = ListState<T, I>,
+  C extends ListCollection<T, I, S> = ListCollection<T, I, S>,
+> = ListConfig<T, I> & {
+  controller: CollectionProxy<T, I, S, C>;
+};
+
+export type ListCollection<
+  T,
+  I extends ListItem<T> = ListItem<T>,
+  S extends ListState<T, I> = ListState<T, I>,
+> = Collection<T, I, S>;
+
+export type ListFooterProps = {
+  className?: string;
+  style?: React.CSSProperties;
+};
 
-export interface ListItemProps<T = any, M extends ItemMeta = ItemMeta> {
+export type ListHeaderProps = {
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export type ListItem<T = any> = Item<T>;
+
+export type ListItemAdaptee = ItemAdaptee;
+
+export type ListItemAdapter<T = any> = ItemAdapter<T>;
+
+export type ListItemHandler<T = any, I extends ListItem<T> = ListItem<T>> = (item: I, index: number) => void;
+
+export interface ListItemProps<T = any, I extends ListItem<T> = ListItem<T>> {
   index: number;
-  item: Item<T, M>;
-  onClick?: ListItemHandler<T, M>;
-  onMouseOver?: ListItemHandler<T, M>;
+  item: I;
+  data: T;
+  ItemContentComponent?: FC<ListItemProps<T, I>>;
+  onClick?: ListItemHandler<T, I>;
+  onMouseEnter?: ListItemHandler<T, I>;
+  onMouseLeave?: ListItemHandler<T, I>;
 }
 
-export interface ListProps<T = any, M extends ItemMeta = ItemMeta> {
+export type ListItems<T = any, I extends ListItem<T> = ListItem<T>> = T[] | ListCollection<T, I>;
+
+export type ListConfig<T = any, I extends ListItem<T> = ListItem<T>> = {
   className?: string;
-  items: ListItems<T, M>;
   height?: number | string;
-  ItemComponent?: FC<ListItemProps<T, M>>;
+  increment?: number;
+  ItemLoadingComponent?: FC;
+  ItemComponent?: FC<ListItemProps<T, I>>;
+  ItemContentComponent?: FC<ListItemProps<T, I>>;
+  NotFoundComponent?: FC<ListNotFoundProps>;
   itemHeight?: number | ((index: number) => number);
+  keyboardNavigable?: boolean;
+  multiSelect?: boolean;
+  onItemActivate?: ListItemHandler<T, I>;
+  onItemDeactivate?: ListItemHandler<T, I>;
+  onItemHighlight?: ListItemHandler<T, I>;
+  onItemUnhighlight?: ListItemHandler<T, I>;
+  onItemSelect?: ListItemHandler<T, I>;
+  onItemUnselect?: ListItemHandler<T, I>;
+  overscan?: number;
   preload?: number;
-  increment?: number;
-  onItemClick?: ListItemHandler<T, M>;
-  onItemMouseOver?: ListItemHandler<T, M>;
-}
+  style?: React.CSSProperties;
+  virtual?: boolean;
+};
 
-export type ListInternalProps<T = any, M extends ItemMeta = ItemMeta> = Omit<ListProps, 'items'> & {
-  collection: Collection<T, M>;
+export type ListNotFoundProps = {
+  text?: string;
 };
 
+export type ListProps<
+  T = any,
+  I extends ListItem<T> = ListItem<T>,
+  S extends ListState<T, I> = ListState<T, I>,
+  C extends ListCollection<T, I, S> = ListCollection<T, I, S>,
+> = ListConfig<T, I> & {
+  adapter?: ListItemAdapter<T>;
+  controller?: CollectionProxy<T, I, S, C>;
+  dataSource?: T[] | string;
+  fetchOnce?: boolean;
+};
+
+export type ListState<T, I extends ListItem<T> = ListItem<T>> = CollectionState<T, I>;
+
 export enum ListStatus {
   NotInitialized = 'not initialized',
   NotLoaded = 'not loaded',
   Loading = 'loading',
-  Deprecated = 'deprecate',
-  PartialDeprecated = 'partial deprecated',
+  Fetching = 'fetching',
+  PartialFetching = 'partial fetching',
   PartialLoading = 'partial loading',
   Loaded = 'loaded',
 }
 
-export type StandardListProps<T = any, M extends ItemMeta = ItemMeta> = Omit<
-  ListInternalProps<T, M>,
-  'height' | 'itemHeight'
->;
+export type StandardListProps<T = any, I extends ListItem<T> = ListItem<T>> = Pick<
+  ListBodyProps<T, I>,
+  'items' | 'ItemComponent' | 'ItemLoadingComponent' | 'ItemContentComponent'
+> & {
+  onItemClick?: ListItemHandler<T, I>;
+  onItemMouseEnter?: ListItemHandler<T, I>;
+  onItemMouseLeave?: ListItemHandler<T, I>;
+};
+
+export type UseListOptions<T, I extends ListItem<T> = ListItem<T>> = UseCollectionOptions<T, I> & {
+  adapter?: ListItemAdapter<T>;
+};
+
+export type VirtualItem = {
+  end: number;
+  index: number;
+  start: number;
+  size: number;
+  measureRef: (el: HTMLElement | null) => void;
+};
+
+export type VirtualListProps<T = any, I extends ListItem<T> = ListItem<T>> = StandardListProps<T, I> & {
+  virtualItems: VirtualItem[];
+};
 
-export type VirtualListProps<T = any, M extends ItemMeta = ItemMeta> = ListInternalProps<T, M>;
+export type VirtualItemWrapperProps<T = any, I extends ListItem<T> = ListItem<T>> = {
+  ItemLoadingComponent?: FC;
+  ItemComponent?: FC<ListItemProps<T, I>>;
+  ItemContentComponent?: FC<ListItemProps<T, I>>;
+  listItem: any;
+  onItemClick?: ListItemHandler<T, I>;
+  onItemMouseEnter?: ListItemHandler<T, I>;
+  onItemMouseLeave?: ListItemHandler<T, I>;
+  virtualItem: VirtualItem;
+};

package/src/components/list/utils.ts

@@ -1,62 +1,24 @@
-import { Collection, CollectionStatus, ItemMeta, LoadingStatus, Item, isCollection } from 'onekijs-core';
+import {
+  Collection,
+  CollectionProxy,
+  CollectionState,
+  CollectionStatus,
+  isCollection,
+  Item,
+  LoadingStatus,
+} from 'onekijs-framework';
 
-// export const adapt = <T, M extends ItemMeta>(
-//   item: Item<T, M>,
-//   meta: ItemMeta,
-//   adapter?: ListItemAdapter<T, M>,
-// ): ListItem<T, M> => {
-//   const loading = isLoading(meta);
-//   const deprecated = isDeprecated(meta);
-//   const result: ListItem<T> = { loading, deprecated, item };
-
-//   let adaptee;
-//   if (item !== undefined) {
-//     if (adapter) {
-//       adaptee = adapter(item);
-//     } else if (['string', 'number', 'boolean'].includes(typeof item)) {
-//       adaptee = {
-//         id: item,
-//         text: String(item),
-//       };
-//     } else {
-//       adaptee = {
-//         id: (item as any).id,
-//         text: (item as any).text,
-//       };
-//     }
-//   } else {
-//     adaptee = {
-//       id: undefined,
-//       text: undefined,
-//     };
-//   }
-//   Object.assign(result, adaptee);
-//   return result;
-// };
-
-// export const canFetchMore = (data: any[] | Collection<any>): boolean => {
-//   if (
-//     isCollection(data) &&
-//     ![ListStatus.Loading, ListStatus.PartialLoading, ListStatus.Deprecated, ListStatus.PartialDeprecated].includes(
-//       getListStatus(data),
-//     )
-//   ) {
-//     return data.total === undefined;
-//   }
-//   return false;
-// };
-
-export const emptyListItem: Item<any, ItemMeta> = {};
-
-export const canFetchMore = (collection: any[] | Collection<unknown, ItemMeta>): boolean => {
-  return (
-    isCollection(collection) && (collection as Collection<unknown, ItemMeta>).status === LoadingStatus.PartialLoaded
-  );
+export const canFetchMore = <T, I extends Item<T>, S extends CollectionState<T, I>>(
+  collection: T[] | Collection<T, I, S>,
+): boolean => {
+  return isCollection(collection) && (collection as Collection<T, I, S>).status === LoadingStatus.PartialLoaded;
 };
 
-export const getListStatus = (collection: any[] | Collection<unknown, ItemMeta>): CollectionStatus => {
+export const getListStatus = <T, I extends Item<T>, S extends CollectionState<T, I>>(
+  collection: T[] | CollectionProxy<T, I, S>,
+): CollectionStatus => {
   if (isCollection(collection)) {
-    return (collection as Collection<unknown, ItemMeta>).status;
+    return (collection as CollectionProxy<T, I, S>).status;
   }
   return LoadingStatus.Loaded;
 };

package/src/components/modal/components/ModalComponent.tsx

@@ -0,0 +1,132 @@
+import { FCC, useEventListener } from 'onekijs-framework';
+import React, { useContext, useRef } from 'react';
+import { CSSTransition } from 'react-transition-group';
+import { ThemeContext } from 'styled-components';
+import { useClickOutside } from '../../../utils/event';
+import { addClassname } from '../../../utils/style';
+import { ModalProps } from '../typings';
+import ReactDOM from 'react-dom';
+
+const ModalComponent: FCC<ModalProps> = ({
+  attachToBody = false,
+  className,
+  children,
+  open,
+  animationDuration = 150,
+  closeIcon = true,
+  onClose,
+  onClosed,
+  title,
+  buttons = [],
+  closeOnClickOutside,
+  closeOnEscape = true,
+}) => {
+  const theme = useContext(ThemeContext);
+  const maskOpacity = theme.modal.maskOpacity;
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  const onEntering = (node: HTMLElement): void => {
+    node.style.opacity = '0';
+    node.style.transition = `opacity ${animationDuration}ms ease-out`;
+    if (ref.current) {
+      ref.current.style.transform = 'translateY(-40px)';
+      ref.current.style.transition = `transform ${animationDuration}ms ease-out`;
+    }
+    setTimeout(() => {
+      node.style.opacity = maskOpacity;
+      if (ref.current) {
+        ref.current.style.transform = 'translateY(0px)';
+      }
+    }, 0);
+  };
+
+  const onExiting = (node: HTMLElement): void => {
+    node.style.opacity = maskOpacity;
+    node.style.transition = `opacity ${animationDuration}ms ease-out`;
+    if (ref.current) {
+      ref.current.style.transform = 'translateY(0px)';
+      ref.current.style.transition = `transform ${animationDuration}ms ease-out`;
+    }
+    setTimeout(() => {
+      node.style.opacity = '0';
+      if (ref.current) {
+        ref.current.style.transform = 'translateY(-40px)';
+      }
+    }, 0);
+  };
+
+  const onEntered = (node: HTMLElement): void => {
+    node.style.opacity = '';
+    node.style.transition = '';
+    if (ref.current) {
+      ref.current.style.transition = '';
+      ref.current.style.transform = '';
+    }
+  };
+
+  const onExited = (node: HTMLElement): void => {
+    node.style.opacity = '';
+    node.style.transition = '';
+    if (ref.current) {
+      ref.current.style.transition = '';
+      ref.current.style.transform = '';
+    }
+    if (onClosed) {
+      onClosed();
+    }
+  };
+
+  useClickOutside(ref, () => {
+    if (closeOnClickOutside) {
+      onClose();
+    }
+  });
+
+  useEventListener('keyup', (e) => {
+    if (closeOnEscape && e.key === 'Escape') {
+      onClose();
+    }
+  });
+
+  const element = (
+    <CSSTransition
+      in={open}
+      classNames="o-modal"
+      timeout={animationDuration}
+      unmountOnExit={true}
+      onEntering={onEntering}
+      onEntered={onEntered}
+      onExiting={onExiting}
+      onExited={onExited}
+    >
+      <div className={addClassname('o-modal', className)}>
+        <div ref={ref} className="o-modal-dialog">
+          {closeIcon && (
+            <span onClick={onClose} className="o-modal-close-icon">
+              &#10006;
+            </span>
+          )}
+          {title && <div className="o-modal-header">{title}</div>}
+          <div className="o-modal-content">{children}</div>
+          {buttons.length > 0 && (
+            <div className="o-modal-footer">
+              {buttons.map((b, index) => (
+                <span key={`button-${index}`} className="o-modal-button">
+                  {b}
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </CSSTransition>
+  );
+
+  if (attachToBody) {
+    return <>{ReactDOM.createPortal(element, document.body)}</>;
+  } else {
+    return <>{element}</>;
+  }
+};
+
+export default ModalComponent;

package/src/components/modal/index.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+import ModalComponent from './components/ModalComponent';
+import { modalStyle } from './style';
+
+const Modal = styled(ModalComponent)`
+  ${modalStyle}
+`;
+
+export default Modal;

package/src/components/modal/style.ts

@@ -0,0 +1,135 @@
+import { HeightProperty } from 'csstype';
+import { get } from 'onekijs-framework';
+import { css } from 'styled-components';
+import { alignItems, justifyContent } from '../../styles/alignment';
+import { backgroundColor, backgroundOpacity } from '../../styles/background';
+import { borderRadius, boxShadow } from '../../styles/border';
+import { display } from '../../styles/display';
+import { opacity } from '../../styles/effects';
+import { flexDirection, flexGrow } from '../../styles/flex';
+import { cursor } from '../../styles/interactivity';
+import { overflow } from '../../styles/overflow';
+import { bottom, left, position, right, top, zIndex } from '../../styles/position';
+import { height, maxHeight, maxWidth, width } from '../../styles/size';
+import { marginLeft, padding } from '../../styles/spacing';
+import { transform } from '../../styles/transform';
+import { ComponentStyle, SizePropertyTheme, TLength } from '../../styles/typings';
+import { color, fontSize, fontWeight, lineHeight } from '../../styles/typography';
+import { ModalProps } from './typings';
+
+export const modalStyle: ComponentStyle<ModalProps> = ({ width: w, height: h, size = 'medium', theme }) => {
+  const t = theme.modal;
+  w = w ?? size;
+  h = h ?? size;
+
+  const themeWidth: SizePropertyTheme | HeightProperty<TLength> = get(t, `${w}Size`) ?? w;
+  const themeHeight: SizePropertyTheme | HeightProperty<TLength> = get(t, `${h}Size`) ?? h;
+  const themeFontColor = theme.palette.colors[theme.colors.primary];
+
+  return css`
+    ${position('fixed')}
+    ${top(0)}
+    ${bottom(0)}
+    ${right(0)}
+    ${left(0)}
+    ${zIndex(t.zIndex)}
+    ${display('flex')}
+    ${flexDirection('column')}
+    ${justifyContent('center')}
+    ${alignItems('center')}
+    ${padding('5xl')}
+    ${backgroundColor(t.maskColor)}
+    ${opacity(0)}
+
+    .o-modal-dialog {
+      ${backgroundColor(t.bgColor)}
+      ${position('relative')}
+      ${zIndex(t.zIndex)}
+      ${boxShadow(t.boxShadow)}
+      ${maxHeight('full')}
+      ${maxWidth('full')}
+      ${width(themeWidth)}
+      ${height(themeHeight)}
+      ${borderRadius(t.borderRadius)}
+      ${display('flex')}
+      ${flexDirection('column')}
+      transform: translateY(-40px);
+      ${opacity(1)}
+    }
+
+    .o-modal-close-icon {
+      ${padding('lg')}
+      ${position('absolute')}
+      ${top(0)}
+      ${right(0)}
+      ${color('transparent')}
+      text-shadow: 0 0 0 ${themeFontColor};
+      ${cursor('pointer')}
+      ${transform('rotate(45deg)')}
+    }
+    .o-modal-header {
+      ${fontSize('4xl')}
+      ${fontWeight('light')}
+      ${color('black')}
+      ${lineHeight('4xl')}
+      ${padding('2xl')}
+    }
+
+    .o-modal-content {
+      ${flexGrow(1)}
+      ${overflow('auto')}
+      ${display('flex')}
+      ${width('full')}
+      ${flexDirection('column')}
+    }
+    .o-modal-footer {
+      ${display('flex')}
+      ${flexDirection('row')}
+      ${justifyContent('flex-end')}
+      ${padding('2xl')}
+    }
+
+    .o-modal-button {
+      ${marginLeft('sm')}
+    }
+
+    &.o-modal-enter-done,
+    &.o-modal-exit {
+      ${backgroundOpacity(t.maskOpacity)}
+      ${opacity(1)}
+      .o-modal-dialog {
+        transform: translateY(0px);
+      }
+    }
+
+    .o-form {
+      ${flexGrow(1)}
+    }
+
+    .o-wizard {
+      ${height('100%')}
+    }
+    .o-wizard-content-panel {
+      ${height('100%')}
+    }
+
+    .o-wizard-step-panel,
+    .o-wizard-content {
+      ${overflow('auto')}
+      ${height('100%')}
+      scrollbar-width: thin;
+      scrollbar-color: ${(props) => props.theme.palette.colors[props.theme.colors.light]}
+        ${(props) => props.theme.colors[props.theme.colors.lighter]};
+      &::-webkit-scrollbar {
+        width: 12px;
+      }
+      &::-webkit-scrollbar-track {
+        background: ${(props) => props.theme.palette.colors[props.theme.colors.lighter]};
+      }
+      &::-webkit-scrollbar-thumb {
+        background-color: ${(props) => props.theme.palette.colors[props.theme.colors.light]};
+        border: 3px solid ${(props) => props.theme.palette.colors[props.theme.colors.lighter]};
+      }
+    }
+  `;
+};