ac-patterns/dist/multi-medication-entry-field.js

"use strict";

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

var _preact = require("preact");

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

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

class MedicationEntryField extends _preact.Component {
  constructor(props) {
    super(props);
    this.focusOnInput = this.focusOnInput.bind(this);
    this.originalState = {
      term: '',
      loading: false
    };
    this.state = Object.assign({}, this.originalState);
  }

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

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

  focusOnInput() {
    const input = this.base && this.base.querySelector('input');

    if (input) {
      input.focus();
    }
  }

  addDrug(drug) {
    const {
      item,
      updateValue
    } = this.props;
    const {
      value
    } = item;
    const valueIsEmptyArray = typeof value === 'string';
    const drugs = value && !valueIsEmptyArray ? value : [];
    const copy = drugs.slice();
    copy.push(drug);
    updateValue(copy);
    this.setState({
      term: '',
      ["term_".concat(this.state.term)]: undefined
    });
  }

  render() {
    const {
      item,
      updateValue
    } = this.props;
    const {
      loading
    } = this.state;
    const {
      value
    } = item;
    const {
      term
    } = this.state;
    const optsForTerm = this.state["term_".concat(term)];
    const valueIsEmptyArray = Array.isArray(value) && !value.length;
    const itemCopy = Object.assign({}, item);
    delete itemCopy.subLabel;
    const modifiedItemForLabel = value ? _objectSpread(_objectSpread({}, item), {}, {
      buttons: null
    }) : item;
    let drugLookupStatus;

    if (term && optsForTerm && !optsForTerm.length) {
      drugLookupStatus = 'noResults';
    } else if (!term && (!optsForTerm || optsForTerm.length === 0) && !value.length) {
      drugLookupStatus = 'ready';
    } else if (loading) {
      drugLookupStatus = 'searching';
    }

    return (0, _preact.h)("div", null, (0, _preact.h)("div", null, (0, _preact.h)(_formFields.Label, {
      item: modifiedItemForLabel,
      updateValue: val => {
        if (val === 'none') {
          updateValue([]);
        }
      }
    }), !valueIsEmptyArray && (0, _preact.h)(_.Input, {
      style: {
        width: 'calc(100% - 18px)'
      },
      value: term,
      "data-e2e": "".concat(item.name, "Input"),
      onKeyDown: e => {
        if (e.key === 'Enter') {
          e.preventDefault();

          if (optsForTerm && optsForTerm.length > 0) {
            this.addDrug(optsForTerm[0]);
          }
        }
      },
      onInput: e => {
        const term = e.target.value || '';
        this.setState({
          term
        });
      }
    })), optsForTerm && optsForTerm.length > 0 && (0, _preact.h)("div", {
      key: "opts",
      className: "overflow-x-scroll nowrap pv2"
    }, optsForTerm.map(drug => (0, _preact.h)(_.Button, {
      key: drug.name,
      className: "mr2",
      type: "button",
      "data-e2e": "".concat(item.name, "SuggestionButton"),
      onClick: e => {
        e.preventDefault();
        this.addDrug(drug);
        this.focusOnInput();
      }
    }, drug.name))), (0, _preact.h)(_drugLookupUi.default, {
      term: term,
      status: drugLookupStatus
    }), (0, _preact.h)("div", {
      className: "mb2"
    }, valueIsEmptyArray && (0, _preact.h)(_.Button, {
      type: "button",
      className: "mb2",
      onClick: e => {
        e.preventDefault();
        updateValue(null);
      }
    }, (0, _preact.h)("span", {
      className: "flex items-center"
    }, "none ", (0, _preact.h)(_.Icon, {
      className: "ml2",
      icon: "close",
      size: "24"
    }))), value && !valueIsEmptyArray && value.length !== 0 && (0, _preact.h)("div", null, (0, _preact.h)("div", {
      className: "mb2 fw3 f6 pt2"
    }, "Chosen Medications:"), value.map(drug => (0, _preact.h)("div", {
      key: drug.name
    }, drug.name, ' ', (0, _preact.h)(_.Button, {
      className: "mr2 mb2",
      type: "button",
      tiny: true,
      stop: true,
      "data-e2e": "drugRemoveButton",
      onClick: e => {
        e.preventDefault();
        const newVal = value.filter(item => item.id !== drug.id);
        updateValue(newVal);
      }
    }, (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 = MedicationEntryField;
exports.default = _default;