inputDialog.re

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>
    }
  }
};