Function ExampleApp

packages/dev/docs/pages/react-aria/home/ExampleApp.tsx:94–541

()

let hideOnScroll = typeof document !== 'undefined' ? document.getElementById('hideOnScroll') : null;

export function ExampleApp(): React.ReactNode {
  let [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>({
    column: 'common_name',
    direction: 'ascending'
  });

  let [allItems, setAllItems] = useState<Plant[]>(() =>
    plants.map(p => ({...p, isFavorite: false}))
  );
  let [search, setSearch] = useState('');
  let [favorite, setFavorite] = useState(false);
  let [cycles, setCycles] = useState<Selection>(new Set());
  let [sunlight, setSunlight] = useState<Selection>(new Set());
  let [watering, setWatering] = useState<Selection>(new Set());

  let {contains} = useFilter({sensitivity: 'base'});
  let collator = useCollator();
  let dir = sortDescriptor.direction === 'descending' ? -1 : 1;
  let items = allItems
    .filter(
      item =>
        (contains(item.common_name, search) || contains(item.scientific_name.join(''), search)) &&
        (!favorite || item.isFavorite) &&
        (cycles === 'all' || cycles.size === 0 || cycles.has(item.cycle)) &&
        (sunlight === 'all' || sunlight.size === 0 || sunlight.has(getSunlight(item))) &&
        (watering === 'all' || watering.size === 0 || watering.has(item.watering))
    )
    .sort(
      (a: any, b: any) =>
        collator.compare(a[sortDescriptor.column!], b[sortDescriptor.column!]) * dir
    );

  let [visibleColumns, setVisibleColumns] = useState<Selection>(
    new Set(['favorite', 'common_name', 'sunlight', 'watering', 'actions'])
  );
  let columns = useMemo(() => {
    let res = allColumns.filter(c => visibleColumns === 'all' || visibleColumns.has(c.id!));
    res[1] = {...res[1], isRowHeader: true};
    return res;
  }, [visibleColumns]);

  let filters = 0;
  if (favorite) {
    filters++;
  }
  if (cycles !== 'all') {
    filters += cycles.size;
  }
  if (sunlight !== 'all') {
    filters += sunlight.size;
  }
  if (watering !== 'all') {
    filters += watering.size;
  }

  let clearFilters = () => {
    setFavorite(false);
    setCycles(new Set());