ac-patterns/dist/medication-field.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _preact = require("preact");

var _classnames = _interopRequireDefault(require("classnames"));

var _tryit = _interopRequireDefault(require("tryit"));

var _fetchDrugAutocomplete = require("./utils/fetch-drug-autocomplete");

var _formFields = require("./form-fields");

var _ = require("./");

var _drugLookupUi = _interopRequireDefault(require("./drug-lookup-ui"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

class MedicationInput extends _preact.Component {
  constructor(props) {
    super(props);
    this.state = {
      term: '',
      loading: false
    };
  }

  componentDidMount() {
    setTimeout(() => {
      (0, _tryit.default)(() => {
        this.base.querySelector('input').focus();
      });
    }, 100);
  }

  componentDidUpdate(prevProps, prevState) {
    const term = this.state.term;

    if (term && term !== prevState.term) {
      this.setState({
        loading: true
      });
      (0, _fetchDrugAutocomplete.fetchDrugAutocomplete)(term).then(results => {
        if (term === this.state.term) {
          const toSet = {
            ["term_".concat(term)]: results,
            loading: false
          };
          this.setState(toSet);
        }
      });
    }
  }

  drugSelected(drug) {
    const {
      updateValue
    } = this.props;
    updateValue(drug);
    this.setState({
      term: '',
      ["term_".concat(this.state.term)]: undefined
    });
  }

  focusOnInput() {
    this.base.querySelector('input').focus();
  }

  render({
    item,
    updateValue,
    className,
    resultsClassName
  }, {
    term,
    loading
  }) {
    const optsForTerm = this.state["term_".concat(term)];
    const hasOptsForTerm = optsForTerm && optsForTerm.length > 0;
    const noResults = !loading && term && !hasOptsForTerm;
    const isEmpty = !term && !loading;
    const showMessage = noResults || isEmpty || loading;
    const showResults = hasOptsForTerm && !showMessage;
    let drugLookupStatus;

    if (noResults) {
      drugLookupStatus = 'noResults';
    } else if (isEmpty) {
      drugLookupStatus = 'ready';
    } else if (loading) {
      drugLookupStatus = 'searching';
    }

    const drugName = item.value && item.value.name;
    return (0, _preact.h)("div", {
      className: className
    }, (0, _preact.h)(_formFields.Label, {
      item: item,
      updateValue: updateValue
    }), !drugName && (0, _preact.h)(_preact.Fragment, null, (0, _preact.h)(_.Input, {
      className: "w-100 border-box mv1",
      value: term,
      "data-e2e": "".concat(item.name, "Input"),
      onKeyDown: e => {
        if (e.key === 'Enter') {
          e.preventDefault();

          if (optsForTerm && optsForTerm.length > 0) {
            this.drugSelected(optsForTerm[0]);
          }
        }
      },
      onInput: e => {
        const term = e.target.value || '';
        this.setState({
          term
        });
      }
    }), showResults && (0, _preact.h)("div", {
      key: "opts",
      className: (0, _classnames.default)(resultsClassName)
    }, optsForTerm.map(drug => (0, _preact.h)(_.Button, {
      key: drug.name,
      className: "mr2 mv1",
      type: "button",
      "data-e2e": "".concat(item.name, "SuggestionButton"),
      onClick: e => {
        e.preventDefault();
        this.drugSelected(drug);
      }
    }, drug.name))), (0, _preact.h)("div", null, (0, _preact.h)(_drugLookupUi.default, {
      term: term,
      status: drugLookupStatus
    }))), drugName && (0, _preact.h)("div", null, drugName, ' ', (0, _preact.h)(_.Button, {
      className: "mr2 mb2",
      type: "button",
      tiny: true,
      stop: true,
      "data-e2e": "drugRemoveButton",
      onClick: e => {
        e.preventDefault();
        updateValue('');
        setTimeout(() => this.focusOnInput(), 200);
      }
    }, (0, _preact.h)("span", {
      className: "flex items-center"
    }, (0, _preact.h)(_.Icon, {
      className: "mr2",
      icon: "delete",
      size: "16"
    }), (0, _preact.h)("span", {
      className: "mr1"
    }, "remove")))));
  }

}

var _default = MedicationInput;
exports.default = _default;