child.re

open ReactNative;

type _state = {mutable elementRef: option ReasonReact.reactRef};

let setRef theRef {ReasonReact.state: state} => state.elementRef = Js.Null.to_opt theRef;

type item =
  Js.t {
    .
    id : string,
    start : string,
    talk :
      Js.null_undefined (
        Js.t {
          .
          title : string,
          speakers :
            Js.Array.t (
              Js.t {. id : string, name : string, bio : string, photo : Js.t {. secret : string}}
            )
        }
      ),
    title : string
  };

let styles =
  StyleSheet.create
    Style.(
      {
        "item":
          style [
            flex 1.,
            backgroundColor "rgba(255,255,255, .2)",
            marginHorizontal 10.,
            marginTop 10.,
            borderWidth 1.,
            borderColor "white"
          ],
        "row": style [flexDirection `row],
        "titleWrap": style [flex 1., padding 10.]
      }
    );

let component = ReasonReact.statefulComponent "ScheduleItem";

let make
    item::(item: item)
    index::(index: int)
    modalOpen::(modalOpen: bool)
    selectedIndex::(selectedIndex: int)
    ::onPress
    _children => {
  ...component,
  initialState: fun () => {elementRef: None},
  render: fun self =>
    <TouchableOpacity
      style=Style.(style [opacity (modalOpen === true && index === selectedIndex ? 0. : 1.)])
      onPress=(
        fun _ =>
          switch self.state.elementRef {
          | None => Js.log "none"
          | Some r =>
            (ReasonReact.refToJsObj r)##measureInWindow (
              fun x y width height => onPress x y width height item index
            )
          }
      )>
      <View style=styles##item ref=(self.handle setRef)>
        <View style=styles##row>
          <View style=styles##titleWrap>
            (
              switch (Js.Null_undefined.to_opt item##talk) {
              | None => <ScheduleTitle title=item##title />
              | Some talk => <ScheduleTitle title=talk##title />
              }
            )
            (
              switch (Js.Null_undefined.to_opt item##talk) {
              | None => ReasonReact.nullElement
              | Some t => <SpeakerNames talk=t />
              }
            )
          </View>
          (
            switch (Js.Null_undefined.to_opt item##talk) {
            | None => ReasonReact.nullElement
            | Some t => <SpeakerImages talk=t />
            }
          )
        </View>
        <ScheduleTime start=item##start />
      </View>
    </TouchableOpacity>
};