Skip to content

Commit

Permalink
Use common SearchBox
Browse files Browse the repository at this point in the history
  • Loading branch information
ryyppy committed Jan 2, 2021
1 parent 8de27ee commit 213668c
Show file tree
Hide file tree
Showing 9 changed files with 233 additions and 407 deletions.
99 changes: 2 additions & 97 deletions src/Packages.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

99 changes: 0 additions & 99 deletions src/Packages.res
Original file line number Diff line number Diff line change
Expand Up @@ -123,105 +123,6 @@ module Resource = {
}
}

module SearchBox = {
@bs.send external focus: Dom.element => unit = "focus"

type state =
| Active
| Inactive

@react.component
let make = (
~completionValues: array<string>=[], // set of possible values
~value: string,
~onClear: unit => unit,
~placeholder: string="",
~onValueChange: string => unit,
) => {
let (state, setState) = React.useState(_ => Inactive)
let textInput = React.useRef(Js.Nullable.null)

let onMouseDownClear = evt => {
ReactEvent.Mouse.preventDefault(evt)
onClear()
}

let focusInput = () =>
textInput.current->Js.Nullable.toOption->Belt.Option.forEach(el => el->focus)

let onAreaFocus = evt => {
let el = ReactEvent.Focus.target(evt)
let isDiv = Js.Null_undefined.isNullable(el["type"])

if isDiv && state === Inactive {
focusInput()
}
}

let onFocus = _ => {
setState(_ => Active)
}

let onBlur = _ => {
setState(_ => Inactive)
}

let onKeyDown = evt => {
let key = ReactEvent.Keyboard.key(evt)
let ctrlKey = ReactEvent.Keyboard.ctrlKey(evt)

let full = (ctrlKey ? "CTRL+" : "") ++ key

switch full {
| "Escape" => onClear()
| "Tab" =>
if Js.Array.length(completionValues) === 1 {
let targetValue = Belt.Array.getExn(completionValues, 0)

if targetValue !== value {
ReactEvent.Keyboard.preventDefault(evt)
onValueChange(targetValue)
} else {
()
}
}
| _ => ()
}
}

let onChange = evt => {
ReactEvent.Form.preventDefault(evt)
let value = ReactEvent.Form.target(evt)["value"]
onValueChange(value)
}

<div
tabIndex={-1}
onFocus=onAreaFocus
onBlur
className={(
state === Active ? "border-fire" : "border-fire-40"
) ++ " flex items-center border rounded-lg py-4 px-5"}>
<Icon.MagnifierGlass
className={(state === Active ? "text-fire" : "text-fire-80") ++ " w-4 h-4"}
/>
<input
value
ref={ReactDOM.Ref.domRef(textInput)}
onFocus
onKeyDown
onChange={onChange}
placeholder
className="text-16 outline-none ml-4 w-full"
type_="text"
/>
<button onFocus className={value === "" ? "hidden" : "block"} onMouseDown=onMouseDownClear>
<Icon.Close className="w-4 h-4 text-fire" />
</button>
</div>
}
}

module Card = {
@react.component
let make = (~value: Resource.t, ~onKeywordSelect: option<string => unit>=?) => {
Expand Down
File renamed without changes.
File renamed without changes.
112 changes: 112 additions & 0 deletions src/components/SearchBox.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 213668c

Please sign in to comment.