@os-design/core 1.0.198 → 1.0.200

package/src/List/index.tsx

@@ -0,0 +1,255 @@
+import { useIsMinWidth } from '@os-design/media';
+import { useTheme } from '@os-design/theming';
+import {
+  useFontSize,
+  useForwardedRef,
+  useSafeAreaInset,
+  useSize,
+} from '@os-design/utils';
+
+import React, {
+  CSSProperties,
+  forwardRef,
+  useCallback,
+  useContext,
+  useMemo,
+} from 'react';
+import {
+  FixedSizeList,
+  ListChildComponentProps,
+  ListProps as RWListProps,
+} from 'react-window';
+import LayoutContext from '../Layout/LayoutContext';
+
+import WindowScroller, { ScrollPosition } from './WindowScroller';
+import useRWLoadNext from './utils/useRWLoadNext';
+
+export interface ListProps extends Partial<RWListProps> {
+  /**
+   * Total number of items in the list.
+   */
+  itemCount: number;
+  /**
+   * The item height in em.
+   * @default 4
+   */
+  itemHeight?: number;
+  /**
+   * A threshold N means that the onLoadNext function calls when a user scrolls all items except N.
+   * @default 10
+   */
+  threshold?: number;
+  /**
+   * Defines how many items outside of the visible "window" to render at all times.
+   * @default 10
+   */
+  overscanCount?: number;
+  /**
+   * The height of the list in px.
+   * @default undefined
+   */
+  height?: number;
+  /**
+   * The top padding in em.
+   * @default 0
+   */
+  paddingTop?: number;
+  /**
+   * The bottom padding in em.
+   * @default 0
+   */
+  paddingBottom?: number;
+  /**
+   * The inline css style.
+   * @default undefined
+   */
+  style?: CSSProperties;
+  /**
+   * The component that renders if the list is empty.
+   * @default undefined
+   */
+  empty?: React.ReactNode;
+  /**
+   * The callback to load more items.
+   * @default undefined
+   */
+  onLoadNext?: () => void;
+  /**
+   * The callback to render items.
+   * @default () => null
+   */
+  itemRenderer?: React.FC<ListChildComponentProps>;
+}
+
+/**
+ * Virtualized list.
+ * Used the react-window library.
+ */
+const List = forwardRef<FixedSizeList, ListProps>(
+  (
+    {
+      itemCount,
+      itemHeight = 4,
+      threshold = 10,
+      overscanCount = 10,
+      height: heightProp,
+      paddingTop = 0,
+      paddingBottom = 0,
+      style = {},
+      empty,
+      onLoadNext = () => {},
+      itemRenderer = () => null,
+      ...rest
+    },
+    ref
+  ) => {
+    const [listRef, mergedListRef] = useForwardedRef(ref);
+    const size = useSize();
+    const fontSize = useFontSize(document.body);
+    const { hasNavigation, hasPageHeader } = useContext(LayoutContext);
+    const { theme } = useTheme();
+    const isMinMd = useIsMinWidth('md');
+    const safeAreaInset = useSafeAreaInset();
+
+    const itemSize = useMemo(
+      () => itemHeight * fontSize,
+      [itemHeight, fontSize]
+    );
+
+    const paddingTopSize = useMemo(
+      () =>
+        ((hasPageHeader ? theme.pageHeaderHeight[isMinMd ? 1 : 0] : 0) +
+          paddingTop) *
+        fontSize,
+      [hasPageHeader, theme.pageHeaderHeight, isMinMd, paddingTop, fontSize]
+    );
+
+    const paddingBottomSize = useMemo(
+      () =>
+        ((hasNavigation && !isMinMd ? theme.navigationTabHeight : 0) +
+          paddingBottom) *
+          fontSize +
+        safeAreaInset.bottom,
+      [
+        hasNavigation,
+        theme.navigationTabHeight,
+        isMinMd,
+        paddingBottom,
+        fontSize,
+        safeAreaInset.bottom,
+      ]
+    );
+
+    const height = useMemo(
+      () => heightProp || size.height,
+      [heightProp, size.height]
+    );
+
+    const loadNextHandler = useRWLoadNext({
+      itemCount,
+      threshold,
+      itemSize,
+      paddingTop: paddingTopSize,
+      height,
+      onLoadNext,
+    });
+
+    const windowScrollHandler = useCallback(
+      ({ top }: ScrollPosition) => {
+        // Set the scroll position to the list
+        if (listRef.current) listRef.current.scrollTo(top);
+        loadNextHandler(top);
+      },
+      [listRef, loadNextHandler]
+    );
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const InnerElement = useCallback(
+      ({ style: innerStyle, ...innerRest }) => (
+        <div
+          style={{
+            ...innerStyle,
+            height: `${
+              parseFloat(innerStyle.height) + paddingTopSize + paddingBottomSize
+            }px`,
+          }}
+          {...innerRest}
+        />
+      ),
+      [paddingBottomSize, paddingTopSize]
+    );
+
+    const listChildren = useCallback<RWListProps['children']>(
+      ({ style: childrenStyle, ...childrenRest }) =>
+        itemRenderer({
+          style: {
+            ...childrenStyle,
+            top: `${
+              parseFloat(
+                childrenStyle.top ? childrenStyle.top.toString() : '0'
+              ) + paddingTopSize
+            }px`,
+          },
+          ...childrenRest,
+        }),
+      [itemRenderer, paddingTopSize]
+    );
+
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    const EmptyComponent = useCallback(() => <>{empty}</>, [empty]);
+
+    const renderList = useCallback(
+      () => (
+        <FixedSizeList
+          ref={mergedListRef}
+          itemCount={itemCount}
+          width='100%'
+          height={height}
+          itemSize={itemSize}
+          style={heightProp ? style : { ...style, height: '100% important!' }}
+          overscanCount={overscanCount}
+          onScroll={
+            heightProp
+              ? ({ scrollOffset }) => loadNextHandler(scrollOffset)
+              : undefined
+          }
+          innerElementType={itemCount > 0 ? InnerElement : EmptyComponent}
+          {...rest}
+        >
+          {listChildren}
+        </FixedSizeList>
+      ),
+      [
+        EmptyComponent,
+        InnerElement,
+        height,
+        heightProp,
+        itemCount,
+        itemSize,
+        listChildren,
+        loadNextHandler,
+        mergedListRef,
+        overscanCount,
+        rest,
+        style,
+      ]
+    );
+
+    if (heightProp) {
+      return renderList();
+    }
+
+    return (
+      <WindowScroller onScroll={windowScrollHandler}>
+        {renderList()}
+      </WindowScroller>
+    );
+  }
+);
+
+List.displayName = 'List';
+
+export { default as WindowScroller } from './WindowScroller';
+export { default as useRWLoadNext } from './utils/useRWLoadNext';
+
+export default List;

package/src/List/utils/bodyPointerEvents.ts

@@ -0,0 +1,24 @@
+import { clearFrameTimeout, Frame, setFrameTimeout } from './frameTimeout';
+
+let originalBodyPointerEvents: string | null = null;
+let timeoutId: Frame | null = null;
+
+export const disableBodyPointerEvents = (): void => {
+  if (originalBodyPointerEvents === null) {
+    originalBodyPointerEvents = document.body.style.pointerEvents;
+    document.body.style.pointerEvents = 'none';
+  }
+};
+
+export const enableBodyPointerEvents = (): void => {
+  timeoutId = null;
+  if (originalBodyPointerEvents !== null) {
+    document.body.style.pointerEvents = originalBodyPointerEvents;
+    originalBodyPointerEvents = null;
+  }
+};
+
+export const enableBodyPointerEventsAfterDelay = (delay: number): void => {
+  if (timeoutId) clearFrameTimeout(timeoutId);
+  timeoutId = setFrameTimeout(enableBodyPointerEvents, delay);
+};

package/src/List/utils/frameTimeout.ts

@@ -0,0 +1,36 @@
+export interface Frame {
+  id: number;
+}
+
+/**
+ * Cancels a timeout previously created by setFrameTimeout.
+ */
+export const clearFrameTimeout = (frame: Frame): void => {
+  window.cancelAnimationFrame(frame.id);
+};
+
+/**
+ * Sets a timeout using requestAnimationFrame.
+ */
+export const setFrameTimeout = (
+  handler: () => void,
+  timeout: number
+): Frame => {
+  let start = 0;
+  const frame = { id: 0 };
+
+  const frameRequestCallback = (timestamp: number) => {
+    if (!start) start = timestamp;
+    const timePassed = timestamp - start;
+
+    if (timePassed >= timeout) {
+      clearFrameTimeout(frame);
+      handler();
+    } else {
+      frame.id = window.requestAnimationFrame(frameRequestCallback);
+    }
+  };
+
+  frame.id = window.requestAnimationFrame(frameRequestCallback);
+  return frame;
+};

package/src/List/utils/useRWLoadNext.ts

@@ -0,0 +1,38 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+interface UseRWLoadNextProps {
+  itemCount: number;
+  threshold: number;
+  itemSize: number;
+  paddingTop: number;
+  height: number;
+  onLoadNext: () => void;
+}
+
+type OnScroll = (scrollOffset: number) => void;
+
+/**
+ * Creates the onScroll callback for react-window to implement
+ * the onLoadNext function.
+ */
+const useRWLoadNext = (props: UseRWLoadNextProps): OnScroll => {
+  const propsRef = useRef(props);
+
+  useEffect(() => {
+    propsRef.current = props;
+  }, [props]);
+
+  return useCallback<OnScroll>((scrollOffset) => {
+    const { itemCount, threshold, itemSize, paddingTop, height, onLoadNext } =
+      propsRef.current;
+
+    const maxItemBeforeLoad = itemCount - threshold;
+    const maxScrollOffsetBeforeLoad =
+      maxItemBeforeLoad * itemSize + paddingTop - height;
+
+    if (scrollOffset < maxScrollOffsetBeforeLoad) return;
+    onLoadNext();
+  }, []);
+};
+
+export default useRWLoadNext;

package/src/ListItem/index.tsx

@@ -0,0 +1,92 @@
+import styled from '@emotion/styled';
+import { ellipsisStyles, horizontalPaddingStyles } from '@os-design/styles';
+import { clr } from '@os-design/theming';
+import React, { forwardRef } from 'react';
+import ListItemActions, { ListItemActionsProps } from '../ListItemActions';
+
+export interface ListItemProps extends ListItemActionsProps {
+  /**
+   * The title of the item.
+   */
+  title: string;
+  /**
+   * The description of the item.
+   * @default undefined
+   */
+  description?: string;
+  /**
+   * The component located on the left side.
+   * For example, avatar, button, checkbox.
+   * @default undefined
+   */
+  left?: React.ReactNode;
+  /**
+   * The component located on the right side.
+   * For example, date.
+   */
+  right?: React.ReactNode;
+}
+
+const Container = styled(ListItemActions)`
+  box-sizing: border-box;
+  min-height: 4em;
+  overflow: hidden;
+
+  display: flex;
+  align-items: center;
+
+  &:not(:last-of-type) {
+    border-bottom: 1px solid ${(p) => clr(p.theme.listItemColorBorder)};
+  }
+
+  ${horizontalPaddingStyles()};
+`;
+
+const Content = styled.div`
+  overflow: hidden;
+`;
+
+const Title = styled.div`
+  color: ${(p) => clr(p.theme.colorText)};
+  font-weight: 500;
+  ${ellipsisStyles};
+`;
+
+const Description = styled.div`
+  color: ${(p) => clr(p.theme.listItemColorDescription)};
+  font-size: ${(p) => p.theme.sizes.small}em;
+  ${ellipsisStyles};
+`;
+
+const LeftAddon = styled.div`
+  color: ${(p) => clr(p.theme.colorText)};
+  padding-right: ${(p) => p.theme.listItemAddonPaddingHorizontal}em;
+`;
+
+const RightAddon = styled.div`
+  color: ${(p) => clr(p.theme.colorText)};
+  margin-left: auto;
+  padding-left: ${(p) => p.theme.listItemAddonPaddingHorizontal}em;
+`;
+
+/**
+ * The base list item.
+ */
+const ListItem = forwardRef<HTMLDivElement, ListItemProps>(
+  ({ title, description, left, right, ...rest }, ref) => (
+    <Container {...rest} ref={ref}>
+      {left && <LeftAddon>{left}</LeftAddon>}
+
+      <Content>
+        <Title>{title}</Title>
+        {description && <Description>{description}</Description>}
+      </Content>
+
+      {right && <RightAddon>{right}</RightAddon>}
+    </Container>
+  )
+);
+
+ListItem.displayName = 'ListItem';
+
+export default ListItem;

package/src/ListItemActions/index.tsx

@@ -0,0 +1,207 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { sizeStyles, transitionStyles, WithSize } from '@os-design/styles';
+import { clr, Color } from '@os-design/theming';
+import {
+  isTouchDevice,
+  omitEmotionProps,
+  useForwardedRef,
+  useSwipe,
+} from '@os-design/utils';
+import React, {
+  forwardRef,
+  useCallback,
+  useLayoutEffect,
+  useMemo,
+  useState,
+} from 'react';
+import Button, { ButtonProps } from '../Button';
+
+export interface ListItemAction extends Omit<ButtonProps, 'type' | 'wide'> {
+  icon: React.ReactElement;
+}
+
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export interface ListItemActionsProps extends JsxDivProps, WithSize {
+  /**
+   * Buttons to control the item.
+   * For example, edit, delete.
+   * @default undefined
+   */
+  actions?: ListItemAction[];
+}
+
+const Container = styled.div`
+  position: relative;
+
+  @media (hover: hover) {
+    // Hide actions by default
+    & > nav {
+      opacity: 0;
+    }
+
+    // Display actions either on focus, or on hover
+    &:hover,
+    &:focus-within {
+      & > nav {
+        opacity: 1;
+      }
+    }
+  }
+`;
+
+const swipeableStyles = (p) =>
+  p.swipeable &&
+  css`
+    transform: translateX(100%);
+    ${transitionStyles('transform')(p)};
+  `;
+
+const openedStyles = (p) =>
+  p.opened &&
+  css`
+    transform: translateX(0);
+  `;
+
+interface ActionsProps extends WithSize {
+  swipeable: boolean;
+  opened: boolean;
+  paddingRight: number;
+}
+const Actions = styled(
+  'nav',
+  omitEmotionProps('swipeable', 'opened', 'paddingRight', 'size')
+)<ActionsProps>`
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+
+  display: flex;
+  align-items: center;
+
+  padding-left: ${(p) => p.theme.listItemActionsPaddingLeft}em;
+  padding-right: ${(p) => p.paddingRight}px;
+
+  background: linear-gradient(
+    to right,
+    ${(p) => clr([...p.theme.colorBg.slice(0, 3), 0] as Color)},
+    ${(p) => clr(p.theme.colorBg)}
+      ${(p) => p.theme.listItemActionsPaddingLeft}em
+  );
+
+  ${swipeableStyles};
+  ${openedStyles};
+  ${sizeStyles}
+`;
+
+let actionIndex = 0;
+
+/**
+ * Shows the menu in the list item.
+ */
+const ListItemActions = forwardRef<HTMLDivElement, ListItemActionsProps>(
+  (
+    {
+      actions = [],
+      onTouchStart = () => {},
+      onTouchMove = () => {},
+      onTouchEnd = () => {},
+      children,
+      size,
+      ...rest
+    },
+    ref
+  ) => {
+    const [containerRef, mergedContainerRef] = useForwardedRef(ref);
+    const { opened, handlers } = useSwipe();
+    const swipeable = useMemo(() => isTouchDevice(), []);
+
+    const touchStartHandler = useCallback(
+      (e) => {
+        handlers.onTouchStart(e);
+        onTouchStart(e);
+      },
+      [handlers, onTouchStart]
+    );
+
+    const touchMoveHandler = useCallback(
+      (e) => {
+        handlers.onTouchMove(e);
+        onTouchMove(e);
+      },
+      [handlers, onTouchMove]
+    );
+
+    const touchEndHandler = useCallback(
+      (e) => {
+        handlers.onTouchEnd(e);
+        onTouchEnd(e);
+      },
+      [handlers, onTouchEnd]
+    );
+
+    const [paddingRight, setPaddingRight] = useState(0);
+    useLayoutEffect(() => {
+      if (!containerRef.current) return;
+      const value = Number(
+        window
+          .getComputedStyle(containerRef.current)
+          .getPropertyValue('padding-right')
+          .replace('px', '')
+      );
+      setPaddingRight(value);
+    }, [containerRef]);
+
+    const actionsComponent = useMemo(() => {
+      if (actions.length === 0) return null;
+      const items = actions.map(
+        ({ icon, onClick = () => {}, ...actionRest }) => {
+          actionIndex += 1;
+          return (
+            <Button
+              key={actionIndex}
+              type='ghost'
+              wide='never'
+              size={size}
+              onClick={(e) => {
+                e.preventDefault();
+                onClick(e);
+              }}
+              {...actionRest}
+            >
+              {icon}
+            </Button>
+          );
+        }
+      );
+      return (
+        <Actions
+          swipeable={swipeable}
+          opened={opened}
+          paddingRight={paddingRight}
+          size={size}
+        >
+          {items}
+        </Actions>
+      );
+    }, [actions, opened, paddingRight, size, swipeable]);
+
+    return (
+      <Container
+        onTouchStart={touchStartHandler}
+        onTouchMove={touchMoveHandler}
+        onTouchEnd={touchEndHandler}
+        {...rest}
+        ref={mergedContainerRef}
+      >
+        {children}
+        {actionsComponent}
+      </Container>
+    );
+  }
+);
+
+ListItemActions.displayName = 'ListItemActions';
+
+export default ListItemActions;

package/src/ListItemLink/index.tsx

@@ -0,0 +1,63 @@
+import styled from '@emotion/styled';
+import { resetFocusStyles } from '@os-design/styles';
+import { clr, Color } from '@os-design/theming';
+import React, { forwardRef } from 'react';
+import { LinkProps, ReactRouterLinkProps } from '../Link';
+import ListItem, { ListItemProps } from '../ListItem';
+
+type JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;
+export type ListItemLinkProps = JsxAProps &
+  ReactRouterLinkProps &
+  Pick<LinkProps, 'as'> &
+  ListItemProps;
+
+const Link = styled.a`
+  ${resetFocusStyles};
+
+  cursor: pointer;
+  text-decoration: none;
+
+  &:not(:last-of-type) {
+    border-bottom: 1px solid ${(p) => clr(p.theme.listItemColorBorder)};
+  }
+
+  @media (hover: hover) {
+    &:hover,
+    &:focus-within {
+      & > div {
+        background-color: ${(p) => clr(p.theme.listItemColorBgHover)};
+
+        & > nav {
+          background: linear-gradient(
+            to right,
+            ${(p) =>
+              clr([...p.theme.listItemColorBgHover.slice(0, 3), 0] as Color)},
+            ${(p) => clr(p.theme.listItemColorBgHover)}
+              ${(p) => p.theme.listItemActionsPaddingLeft}em
+          );
+        }
+      }
+    }
+  }
+`;
+
+/**
+ * The list item with a link.
+ */
+const ListItemLink = forwardRef<HTMLAnchorElement, ListItemLinkProps>(
+  ({ title, description, left, right, actions, ...rest }, ref) => (
+    <Link {...rest} ref={ref}>
+      <ListItem
+        title={title}
+        description={description}
+        left={left}
+        right={right}
+        actions={actions}
+      />
+    </Link>
+  )
+);
+
+ListItemLink.displayName = 'ListItemLink';
+
+export default ListItemLink;