Record picker

open KitReact.Roles.Palette

let recent: array<KitReact.Roles.RecordPicker.record> = [
  {id: "c-104", name: [Plain("Harbour Dental")], fact: "Leeds"},
  {id: "c-311", name: [Plain("Northgate Pharmacy")], fact: "York"},
  {id: "c-052", name: [Plain("Fern & Finch Florists")], fact: "Harrogate"},
]

@react.component
let make = () =>
  <>
  <KitReact.Roles.FormGroup
    id="react-picker-client" printedValue={React.string("Harbour Dental")}
    label={React.string("Client")}
    help={React.string("The client this job is billed to.")}
    kind={KitReact.Roles.RecordPicker.control({width: Medium,
      name: "client",
      chosen: {id: "c-104", name: [Plain("Harbour Dental")], fact: "Leeds"},
      recent,
      none: [KitReact.Words.Text("No clients match.")],
      onQuery: _ => (),
      clear: true,
    })}
  />
<KitReact.Roles.FormGroup
  id="react-picker-client-disabled" printedValue={React.string("Harbour Dental")}
  label={React.string("Client")}
  help={React.string("Only the owner can change this.")}
  kind={KitReact.Roles.RecordPicker.control({width: Medium,
    name: "client", chosen: {id: "c-104", name: [Plain("Harbour Dental")], fact: "Leeds"}, recent,
    none: [KitReact.Words.Text("No clients match.")], onQuery: _ => (), clear: true, disabled: true,
  })}
/>
  </>

open KitReact.Roles.Palette

let recent: array<KitReact.Roles.RecordPicker.record> = [
  {id: "c-104", name: [Plain("Harbour Dental")], fact: "Leeds"},
  {id: "c-311", name: [Plain("Northgate Pharmacy")], fact: "York"},
  {id: "c-052", name: [Plain("Fern & Finch Florists")], fact: "Harrogate"},
]

let client = (~id, ~recent=?, ~matches=?, ~more=?, ~matching=?) =>
  <KitReact.Roles.FormGroup
    id
    printedValue={React.string("No client chosen")}
    label={React.string("Client")}
    kind={KitReact.Roles.RecordPicker.control({width: Medium,
      name: "client",
      ?recent,
      ?matches,
      ?more,
      none: [KitReact.Words.Text("No clients match.")],
      ?matching,
      onQuery: _ => (),
      new: {kind: "client", dialog: "new-client"},
    })}
  />

@react.component
let make = () => client(~id="react-picker-recent", ~recent)

open KitReact.Roles.Palette

let matches: array<KitReact.Roles.RecordPicker.record> = [
  {id: "c-104", name: [Matched("Har"), Plain("bour Dental")], fact: "Leeds"},
  {id: "c-233", name: [Matched("Har"), Plain("bour Dental")], fact: "York"},
  {id: "c-118", name: [Matched("Har"), Plain("borne Vets")], fact: "Birmingham"},
  {id: "c-310", name: [Matched("Har"), Plain("bourside Physio")], fact: "Bristol"},
  {id: "c-087", name: [Matched("Har"), Plain("court Joinery")], fact: "Leeds"},
  {id: "c-412", name: [Matched("Har"), Plain("dwick Farm Shop")], fact: "Derby"},
  {id: "c-156", name: [Matched("Har"), Plain("low Tyres")], fact: "Harlow"},
  {id: "c-199", name: [Plain("S"), Matched("har"), Plain("p Studio")], fact: "Leeds"},
]

@react.component
let make = () =>
  Role_RecordPicker_Open.client(~id="react-picker-matches", ~matches, ~more=[KitReact.Words.Text("11 more. Keep typing to narrow the list.")])

@react.component
let make = () => Role_RecordPicker_Open.client(~id="react-picker-none", ~matches=[])

@react.component
let make = () => Role_RecordPicker_Open.client(~id="react-picker-matching", ~matching=true)