@spaced-out/ui-design-system/lib/components/Timeline/Timeline.js.flow

Sense UI components library

// @flow strict
import * as React from 'react';

import {classify} from '../../utils/classify';

import css from './Timeline.module.css';


export const ORIENTATION = Object.freeze({
  left: 'left',
  right: 'right',
});

type ClassNames = $ReadOnly<{wrapper?: string}>;
export type Orientation = $Values<typeof ORIENTATION>;

export type TimelineProps = {
  children: React.Node,
  classNames?: ClassNames,
  orientation?: Orientation,
};

const Timeline_ = (
  {classNames, orientation = ORIENTATION.left, children}: TimelineProps,
  ref,
): React.Node => {
  const childrenArray = React.Children.toArray(children).filter(Boolean);
  const timelineItems = childrenArray.map((timelineItem) =>
    React.cloneElement(timelineItem, {
      ...timelineItem.props,
      orientation,
    }),
  );
  return (
    <div
      ref={ref}
      className={classify(css.timelineWrapper, classNames?.wrapper)}
      data-testid="Timeline"
    >
      {timelineItems}
    </div>
  );
};

export const Timeline = (React.forwardRef<TimelineProps, HTMLDivElement>(
  Timeline_,
): React$AbstractComponent<TimelineProps, HTMLDivElement>);