Skip to content

Instantly share code, notes, and snippets.

@idkjs
Forked from pdonadeo/inputDialog.re
Created December 4, 2017 12:20
Show Gist options
  • Save idkjs/5e7a9badbb92758d424c041aa632e4cd to your computer and use it in GitHub Desktop.
Save idkjs/5e7a9badbb92758d424c041aa632e4cd to your computer and use it in GitHub Desktop.
open ReasonReact;
open Utils;
type state = {
shown : bool,
value : string
};
let file_dialog = ReasonReact.reducerComponent("InputDialog");
let make = (~initValue, ~onSubmit, ~title, ~inputType, ~placeholder, ~dialogId, _) => {
let getShow = (self) => {
if (self.state.shown == true) { "show" } else { "" }
};
let handle_sumbit = (self, evt) => {
ReactEventRe.Form.preventDefault(evt);
self.reduce(((_) => self.state.value), evt);
};
{
...file_dialog,
initialState: () => { shown: true, value: initValue },
reducer: (action: string, _ : state) =>
ReasonReact.UpdateWithSideEffects(({shown: false, value: action}), (self) => {
Js_global.setTimeout(() => {onSubmit(self.state.value);}, 100) |> ignore;
}),
render: (self) => {
<div className=("modal fade " ++ getShow(self)) tabIndex=(-1) role="dialog"
id=(dialogId)
style=(ReactDOMRe.Style.make(~display="block", ()))>
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title">(s_to_el(title))</h5>
</div>
<div className="modal-body">
<form action="#" onSubmit=(handle_sumbit(self))>
<div className="form-group bmd-form-group is-filled">
<label htmlFor="recipient-name" className="form-control-label bmd-label-static">(s_to_el("Recipient:"))</label>
<input
id="recipient-name"
_type=inputType
value=self.state.value
className="form-control"
placeholder=placeholder
onChange=(self.reduce((e) => value_of_form_e(e)))
/>
</div>
</form>
</div>
</div>
</div>
</div>
}
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment