react-native-roster 0.0.0 → 0.1.0

package/src/components/roster/index.tsx

@@ -0,0 +1,108 @@
+import { RosterGap } from '../layers/parts/gap';
+import { RosterInterval } from '../layers/parts/interval';
+import { RosterLaneLabel } from './lanes/parts/lane-label';
+import { RosterLayout } from './layout';
+import { RosterBody } from './parts/body';
+import { RosterCorner } from './parts/corner';
+import { RosterEmpty } from './parts/empty';
+import { RosterGrid } from './parts/grid';
+import { RosterHeader } from './parts/header';
+import { RosterHeaderCell } from './parts/header-cell';
+import { RosterLaneLabelColumn } from './parts/lane-label-column';
+import type { RosterProps } from './roster.types';
+import { useRoster } from './use-roster';
+
+const defaultEmptyZone = <RosterEmpty />;
+const defaultCornerZone = <RosterCorner />;
+
+export function Roster(props: RosterProps) {
+  const {
+    status,
+    orderedLanes,
+    laneState,
+    window,
+    geometryFor,
+    projection,
+    scroll,
+    press,
+    ticks,
+    contentWidth,
+    viewport,
+    onLayout,
+  } = useRoster(props);
+  const {
+    emptyZone = defaultEmptyZone,
+    cornerZone = defaultCornerZone,
+    headerComponent: HeaderComponent = RosterHeader,
+    laneLabelColumnComponent: LaneLabelColumnComponent = RosterLaneLabelColumn,
+    bodyComponent: BodyComponent = RosterBody,
+    headerCellComponent = RosterHeaderCell,
+    laneLabelComponent = RosterLaneLabel,
+    intervalComponent = RosterInterval,
+    gapComponent = RosterGap,
+    gridComponent = RosterGrid,
+    incompleteLabel = 'Availability may be incomplete',
+    neverSetLabel = 'No availability set',
+  } = props;
+  if (status === 'empty') return emptyZone;
+  if (window.start === window.end) return null;
+  return (
+    <RosterLayout
+      style={props.style}
+      headerStyle={props.headerStyle}
+      laneLabelColumnStyle={props.laneLabelColumnStyle}
+      bodyStyle={props.bodyStyle}
+      laneLabelWidth={props.laneLabelWidth}
+      onLayout={onLayout}
+      cornerZone={cornerZone}
+      headerZone={
+        <HeaderComponent
+          ticks={ticks}
+          projection={projection}
+          scroll={scroll}
+          contentWidth={contentWidth}
+          headerCellComponent={headerCellComponent}
+        />
+      }
+      laneLabelColumnZone={
+        <LaneLabelColumnComponent
+          labels={orderedLanes.map((lane) => {
+            const state = laneState.get(lane.id) ?? {
+              flag: 'none',
+              complete: true,
+            };
+            return {
+              lane,
+              ...state,
+              viewTimezone: projection.viewTimezone,
+              incompleteLabel,
+              neverSetLabel,
+            };
+          })}
+          projection={projection}
+          scroll={scroll}
+          laneLabelComponent={laneLabelComponent}
+        />
+      }
+      bodyZone={
+        <BodyComponent
+          lanes={orderedLanes}
+          window={window}
+          geometryFor={geometryFor}
+          projection={projection}
+          scroll={scroll}
+          press={press}
+          ticks={ticks}
+          contentWidth={contentWidth}
+          viewport={viewport}
+          intervalComponent={intervalComponent}
+          gapComponent={gapComponent}
+          gridComponent={gridComponent}
+          highlightSource={props.highlightSource}
+          onIntervalHover={props.onIntervalHover}
+          incompleteLabel={incompleteLabel}
+        />
+      }
+    />
+  );
+}

package/src/components/roster/lanes/interval-hover.tsx

@@ -0,0 +1,5 @@
+import type { IntervalHoverInput, IntervalHoverProps } from './interval-hover.types';
+
+export function intervalHoverProps(_input: IntervalHoverInput): IntervalHoverProps {
+  return {};
+}

package/src/components/roster/lanes/interval-hover.types.ts

@@ -0,0 +1,11 @@
+import type { Lane, LaneGeometry, Rect } from '../../../core';
+import type { PressPointInput } from '../../primitives/press-point.types';
+
+export type IntervalHoverInput = {
+  lane: Lane;
+  geometry: LaneGeometry;
+  onIntervalHover?: (rect: Rect, lane: Lane) => void;
+};
+export type IntervalHoverProps = {
+  onPointerMove?: (input: PressPointInput & { nativeEvent: { pointerType?: string } }) => void;
+};

package/src/components/roster/lanes/interval-hover.web.tsx

@@ -0,0 +1,19 @@
+import { hitTest } from '../../../core/hit-test';
+import { pressPoint } from '../../primitives/press-point.web';
+import type { IntervalHoverInput, IntervalHoverProps } from './interval-hover.types';
+
+export function intervalHoverProps({
+  lane,
+  geometry,
+  onIntervalHover,
+}: IntervalHoverInput): IntervalHoverProps {
+  if (!onIntervalHover) return {};
+  return {
+    onPointerMove(input) {
+      if (input.nativeEvent.pointerType === 'touch') return;
+      const { x, y } = pressPoint(input);
+      const hit = hitTest(lane, geometry, x, y);
+      if (hit?.kind === 'interval') onIntervalHover(hit.rect, lane);
+    },
+  };
+}

package/src/components/roster/lanes/lane.tsx

@@ -0,0 +1,93 @@
+import { Fragment } from 'react';
+import { Pressable } from 'react-native';
+import type { Lane, LaneGeometry } from '../../../core';
+import { pressPoint } from '../../primitives/press-point';
+import type { BodyInput } from '../roster.types';
+import { intervalHoverProps } from './interval-hover';
+import { RosterIncomplete } from './parts/incomplete';
+
+export type LaneRowProps = Pick<
+  BodyInput,
+  | 'press'
+  | 'intervalComponent'
+  | 'gapComponent'
+  | 'highlightSource'
+  | 'onIntervalHover'
+  | 'incompleteLabel'
+> & {
+  lane: Lane;
+  geometry: LaneGeometry;
+  width: number;
+  rowHeight: number;
+};
+
+export function LaneRow({
+  lane,
+  geometry,
+  width,
+  rowHeight,
+  press,
+  intervalComponent: IntervalComponent,
+  gapComponent: GapComponent,
+  highlightSource,
+  onIntervalHover,
+  incompleteLabel = 'Availability may be incomplete',
+}: LaneRowProps) {
+  const layers = [...lane.layers].sort((a, b) => a.z - b.z);
+  return (
+    <Pressable
+      {...intervalHoverProps({ lane, geometry, onIntervalHover })}
+      testID={`roster-lane-${lane.id}`}
+      accessibilityLabel={lane.label}
+      onPress={(input) => {
+        const point = pressPoint(input);
+        press(lane, point.x, point.y);
+      }}
+      style={{ width, height: rowHeight }}
+    >
+      <RosterIncomplete lane={lane} geometry={geometry} width={width} label={incompleteLabel} />
+      {layers.map((layer) => (
+        <Fragment key={layer.id}>
+          {geometry.rects
+            .filter((rect) => rect.layerId === layer.id)
+            .map((rect) => (
+              <Fragment key={`interval-${rect.x}:${rect.width}`}>
+                <IntervalComponent
+                  rect={rect}
+                  layer={layer}
+                  lane={lane}
+                  highlighted={rect.sources.some(
+                    (source) =>
+                      source.kind === highlightSource?.kind && source.id === highlightSource.id,
+                  )}
+                />
+              </Fragment>
+            ))}
+          {geometry.gapRects
+            .filter((rect) => rect.layerId === layer.id)
+            .map((rect) => (
+              <Pressable
+                key={`gap-${rect.x}:${rect.width}`}
+                accessibilityLabel={`${lane.label}: removed time`}
+                onPress={(input) => {
+                  input.stopPropagation();
+                  const point = pressPoint(input);
+                  press(lane, rect.x + point.x, rect.y + point.y);
+                }}
+                style={{
+                  position: 'absolute',
+                  left: rect.x,
+                  top: rect.y,
+                  width: rect.width,
+                  height: rect.height,
+                  zIndex: rect.z,
+                }}
+              >
+                <GapComponent rect={rect} layer={layer} lane={lane} />
+              </Pressable>
+            ))}
+        </Fragment>
+      ))}
+    </Pressable>
+  );
+}

package/src/components/roster/lanes/parts/incomplete.tsx

@@ -0,0 +1,44 @@
+import { Text } from 'react-native';
+import type { Lane, LaneGeometry } from '../../../../core';
+
+export function RosterIncomplete({
+  lane,
+  geometry,
+  width,
+  label,
+}: {
+  lane: Lane;
+  geometry: LaneGeometry;
+  width: number;
+  label: string;
+}) {
+  if (lane.complete !== false) return null;
+  // Choose the first empty span; the notice never covers an interval.
+  let left = 0;
+  let right = width;
+  for (const rect of [...geometry.rects].sort((a, b) => a.x - b.x)) {
+    if (rect.x > left) {
+      right = rect.x;
+      break;
+    }
+    left = Math.max(left, rect.x + rect.width);
+  }
+  if (left >= right) return null;
+  return (
+    <Text
+      testID={`roster-incomplete-${lane.id}`}
+      pointerEvents="none"
+      numberOfLines={1}
+      style={{
+        position: 'absolute',
+        left,
+        width: right - left,
+        top: 4,
+        color: '#64748b',
+        fontSize: 12,
+      }}
+    >
+      {label}
+    </Text>
+  );
+}

package/src/components/roster/lanes/parts/lane-label.tsx

@@ -0,0 +1,41 @@
+import { Text, View } from 'react-native';
+import type { LaneLabelInput } from '../../roster.types';
+
+export function RosterLaneLabel({
+  lane,
+  flag,
+  complete,
+  viewTimezone,
+  incompleteLabel,
+  neverSetLabel,
+}: LaneLabelInput) {
+  const zone =
+    lane.timezone && lane.timezone !== viewTimezone ? (
+      <Text style={{ fontSize: 10, color: '#64748b' }}>{lane.timezone}</Text>
+    ) : null;
+  const flagText =
+    flag === 'never-set' ? (
+      <Text style={{ fontSize: 10, color: '#9a3412' }}>{neverSetLabel}</Text>
+    ) : null;
+  const completeness = complete ? null : (
+    <Text style={{ fontSize: 10, color: '#9a3412' }}>{incompleteLabel}</Text>
+  );
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: 'center',
+        paddingHorizontal: 8,
+        borderBottomWidth: 1,
+        borderBottomColor: '#e2e8f0',
+      }}
+    >
+      <Text numberOfLines={1} style={{ color: '#0f172a', fontSize: 12 }}>
+        {lane.label}
+      </Text>
+      {zone}
+      {flagText}
+      {completeness}
+    </View>
+  );
+}

package/src/components/roster/layout.tsx

@@ -0,0 +1,68 @@
+import type { ReactNode } from 'react';
+import type { LayoutChangeEvent } from 'react-native';
+import { View } from 'react-native';
+import { regionStyle } from '../primitives/region-style';
+import type { RosterStyleProps } from './roster.types';
+
+type RosterLayoutProps = Omit<RosterStyleProps, `${string}ClassName` | 'className'> & {
+  /** Cell above the lane labels, beside the header. */
+  cornerZone: ReactNode;
+  /** Frozen tick row; the layout clips translated header content. */
+  headerZone: ReactNode;
+  /** Frozen lane labels; the layout supplies the label column and clips vertical translation. */
+  laneLabelColumnZone: ReactNode;
+  /** Virtualized body with its horizontal scroller; fills the measured viewport. */
+  bodyZone: ReactNode;
+  onLayout: (input: LayoutChangeEvent) => void;
+};
+
+export function RosterLayout({
+  cornerZone,
+  headerZone,
+  laneLabelColumnZone,
+  bodyZone,
+  onLayout,
+  style,
+  headerStyle,
+  laneLabelColumnStyle,
+  bodyStyle,
+  laneLabelWidth = 180,
+}: RosterLayoutProps) {
+  return (
+    <View style={regionStyle(structure.root, paint.root, style)}>
+      <View style={regionStyle(structure.header, paint.header, headerStyle)}>
+        <View style={{ width: laneLabelWidth }}>{cornerZone}</View>
+        <View style={structure.headerStrip}>{headerZone}</View>
+      </View>
+      <View style={structure.content}>
+        <View
+          style={regionStyle(
+            { ...structure.labels, width: laneLabelWidth },
+            paint.labels,
+            laneLabelColumnStyle,
+          )}
+        >
+          {laneLabelColumnZone}
+        </View>
+        <View onLayout={onLayout} style={regionStyle(structure.body, {}, bodyStyle)}>
+          {bodyZone}
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const structure = {
+  root: { flex: 1, minHeight: 0, overflow: 'hidden' },
+  header: { flexDirection: 'row', height: 40, overflow: 'hidden' },
+  headerStrip: { flex: 1, minWidth: 0, overflow: 'hidden' },
+  content: { flex: 1, minHeight: 0, flexDirection: 'row' },
+  labels: { overflow: 'hidden' },
+  body: { flex: 1, minWidth: 0, overflow: 'hidden' },
+} as const;
+// Paint is what a class replaces; see regionStyle.
+const paint = {
+  root: { backgroundColor: '#fff' },
+  header: { borderBottomWidth: 1, borderBottomColor: '#cbd5e1' },
+  labels: { borderRightWidth: 1, borderRightColor: '#cbd5e1' },
+} as const;

package/src/components/roster/parts/body.tsx

@@ -0,0 +1,24 @@
+import type { ProfilerOnRenderCallback } from 'react';
+import { RosterBodyLayout } from '../body-layout';
+import type { BodyInput } from '../roster.types';
+import { RosterLaneList } from './lane-list';
+
+export function RosterBody(
+  props: BodyInput & {
+    /** Development-only Profiler hook used by the gallery; not a supported customization point. */
+    onRowRender?: ProfilerOnRenderCallback;
+  },
+) {
+  const { viewport, scroll, contentWidth, ticks, gridComponent: GridComponent } = props;
+  // LegendList requires a measured viewport and does not support static rendering.
+  if (viewport.width <= 0 || viewport.height <= 0) return null;
+  return (
+    <RosterBodyLayout
+      scroll={scroll}
+      contentWidth={contentWidth}
+      viewport={viewport}
+      gridZone={<GridComponent ticks={ticks} contentWidth={contentWidth} />}
+      listZone={<RosterLaneList {...props} />}
+    />
+  );
+}

package/src/components/roster/parts/corner.tsx

@@ -0,0 +1,3 @@
+export function RosterCorner() {
+  return null;
+}

package/src/components/roster/parts/empty.tsx

@@ -0,0 +1,5 @@
+import { Text } from 'react-native';
+
+export function RosterEmpty() {
+  return <Text style={{ padding: 24, color: '#475569' }}>No lanes</Text>;
+}

package/src/components/roster/parts/grid.tsx

@@ -0,0 +1,26 @@
+import { View } from 'react-native';
+import type { GridInput } from '../roster.types';
+
+export function RosterGrid({ ticks, contentWidth }: GridInput) {
+  return (
+    <View
+      testID="roster-grid"
+      pointerEvents="none"
+      style={{ position: 'absolute', width: contentWidth, height: '100%' }}
+    >
+      {ticks.map((tick) => (
+        <View
+          key={tick.time}
+          style={{
+            position: 'absolute',
+            left: tick.x,
+            top: 0,
+            bottom: 0,
+            width: 1,
+            backgroundColor: '#e2e8f0',
+          }}
+        />
+      ))}
+    </View>
+  );
+}

package/src/components/roster/parts/header-cell.tsx

@@ -0,0 +1,10 @@
+import { Text } from 'react-native';
+import type { HeaderCellInput } from '../roster.types';
+
+export function RosterHeaderCell({ tick }: HeaderCellInput) {
+  return (
+    <Text numberOfLines={1} style={{ color: '#475569', fontSize: 11, padding: 4 }}>
+      {tick.label}
+    </Text>
+  );
+}

package/src/components/roster/parts/header.tsx

@@ -0,0 +1,23 @@
+import { View } from 'react-native';
+import Animated from 'react-native-reanimated';
+import type { HeaderInput } from '../roster.types';
+
+export function RosterHeader({
+  ticks,
+  contentWidth,
+  scroll,
+  headerCellComponent: HeaderCellComponent,
+}: HeaderInput) {
+  return (
+    <Animated.View
+      testID="roster-header"
+      style={[{ width: contentWidth, height: 40 }, scroll.headerStyle]}
+    >
+      {ticks.map((tick) => (
+        <View key={tick.time} style={{ position: 'absolute', left: tick.x, top: 0 }}>
+          <HeaderCellComponent tick={tick} />
+        </View>
+      ))}
+    </Animated.View>
+  );
+}

package/src/components/roster/parts/lane-label-column.tsx

@@ -0,0 +1,31 @@
+import { View } from 'react-native';
+import Animated from 'react-native-reanimated';
+import type { LabelColumnInput } from '../roster.types';
+
+export function RosterLaneLabelColumn({
+  labels,
+  projection,
+  scroll,
+  laneLabelComponent: LaneLabelComponent,
+}: LabelColumnInput) {
+  return (
+    <Animated.View
+      testID="roster-labels"
+      style={[{ height: labels.length * projection.rowHeight }, scroll.labelStyle]}
+    >
+      {labels.map((label, index) => (
+        <View
+          key={label.lane.id}
+          style={{
+            position: 'absolute',
+            top: index * projection.rowHeight,
+            height: projection.rowHeight,
+            width: '100%',
+          }}
+        >
+          <LaneLabelComponent {...label} />
+        </View>
+      ))}
+    </Animated.View>
+  );
+}

package/src/components/roster/parts/lane-list.tsx

@@ -0,0 +1,74 @@
+import { LegendList } from '@legendapp/list';
+import { Profiler, type ProfilerOnRenderCallback } from 'react';
+import { LaneRow } from '../lanes/lane';
+import type { BodyInput } from '../roster.types';
+import { bodyContentKey } from '../utils/body-content-key';
+
+export function RosterLaneList({
+  lanes,
+  geometryFor,
+  projection,
+  scroll,
+  press,
+  contentWidth,
+  viewport,
+  window,
+  intervalComponent,
+  gapComponent,
+  highlightSource,
+  onIntervalHover,
+  incompleteLabel,
+  onRowRender,
+}: Omit<BodyInput, 'ticks' | 'gridComponent'> & {
+  /** Development-only Profiler hook used by the gallery; not a supported customization point. */
+  onRowRender?: ProfilerOnRenderCallback;
+}) {
+  return (
+    <LegendList
+      testID="roster-vertical-scroll"
+      data={lanes}
+      extraData={bodyContentKey({
+        window,
+        projection,
+        highlightSource,
+        intervalComponent,
+        gapComponent,
+        onIntervalHover,
+        incompleteLabel,
+      })}
+      keyExtractor={(lane) => lane.id}
+      estimatedListSize={{ width: contentWidth, height: viewport.height }}
+      estimatedItemSize={projection.rowHeight}
+      getFixedItemSize={() => projection.rowHeight}
+      drawDistance={0}
+      recycleItems={false}
+      maintainVisibleContentPosition={false}
+      onScroll={scroll.onVerticalScroll}
+      scrollEventThrottle={16}
+      style={{ flex: 1 }}
+      renderItem={({ item }) => {
+        const row = (
+          <LaneRow
+            lane={item}
+            geometry={geometryFor(item)}
+            width={contentWidth}
+            rowHeight={projection.rowHeight}
+            press={press}
+            intervalComponent={intervalComponent}
+            gapComponent={gapComponent}
+            highlightSource={highlightSource}
+            onIntervalHover={onIntervalHover}
+            incompleteLabel={incompleteLabel}
+          />
+        );
+        if (onRowRender)
+          return (
+            <Profiler id={item.id} onRender={onRowRender}>
+              {row}
+            </Profiler>
+          );
+        return row;
+      }}
+    />
+  );
+}