ryanflorence

import React, { useState, useEffect } from "react";
import "./packages/combobox/styles.css";
import {
  Combobox,
  ComboboxInput,
  ComboboxList,
  ComboboxOption,
  ComboboxPopup
} from "./packages/combobox/index";

ryanflorence

When it comes to inputs, there are two types of them, "uncontrolled" and "controlled" inputs.

The inputs on the Login/Signup components were uncontrolled, that means that they owned their own state, or more specifically they own their own value.

In practical terms, an uncontrolled component is one whose value is changed exclusively by the user interacting with it.

You can still set the initial state of an uncontrolled component with defaultValue (and defaultChecked).

A controlled component is one that does not own its state, but rather its state is controlled by the component that rendered it.

ryanflorence

// faking the firebase API to get as much as we need
import localforage from "localforage"
import { format } from "date-fns"
// localforage.clear()

// fakeStreamedData()

export const mode = "fake"

const FAKE_LATENCY = true

ryanflorence

import React, { useState } from "react"

function UiButton({ onToggle, isActive: isActiveProp, ...props }) {
  const [isActive, setIsActive] = useState(isActiveProp)

  const isControlled = isActive != null

  const clickHandler = isControlled
    ? onToggle
    : () => {

ryanflorence

import * as React from "react";

const { useState } = React;

const Tab = ({
  disabled = false,
  children,
  style,
  isCurrent = false,
  onClick

ryanflorence

import * as React from "react";

const { useState } = React;

const Tab = ({
  disabled = false,
  children,
  style,
  isCurrent,
  onClick

ryanflorence

const startDate =
  location.state && location.state.startDate ? location.state.startDate : today

const prevStartRef = useRef(startDate)

let transitionDirection
if (prevStartRef.current !== startDate) {
  transitionDirection = startDate < prevStartRef.current ? "earlier" : "later"
  prevStartRef.current = startDate
}

ryanflorence

const transitions = useTransition(
  { weeks, startDate },
  item => item.startDate,
  {
    from: { y: -100 },
    enter: { y: 0 },
    leave: { y: 100 },
    initial: null
  }
)

ryanflorence

animated.DialogOverlay = animated(DialogOverlay)
animated.DialogContent = animated(DialogContent)

function NewPostDialog({ date, show, onDismiss }) {
  const rootRef = useRef(null)

  const transitions = useTransition(show, null, {
    from: { opacity: 0, y: -10, blur: 0 },
    enter: { opacity: 1, y: 0, blur: 8 },
    leave: { opacity: 0, y: -10, blur: 0 },

ryanflorence

import React, {
  useState,
  useRef,
  useContext,
  useLayoutEffect,
  createContext
} from "react";
import "../styles.css";
import { Tabs, TabList, Tab, TabPanels, TabPanel } from "../src";
import { useRect } from "../../rect/src";