1 | "use strict";
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 | exports.default = void 0;
|
7 |
|
8 | var _preact = require("preact");
|
9 |
|
10 | var _classnames = _interopRequireDefault(require("classnames"));
|
11 |
|
12 | var _tryit = _interopRequireDefault(require("tryit"));
|
13 |
|
14 | var _fetchDrugAutocomplete = require("./utils/fetch-drug-autocomplete");
|
15 |
|
16 | var _formFields = require("./form-fields");
|
17 |
|
18 | var _ = require("./");
|
19 |
|
20 | var _drugLookupUi = _interopRequireDefault(require("./drug-lookup-ui"));
|
21 |
|
22 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
23 |
|
24 | class MedicationInput extends _preact.Component {
|
25 | constructor(props) {
|
26 | super(props);
|
27 | this.state = {
|
28 | term: '',
|
29 | loading: false
|
30 | };
|
31 | }
|
32 |
|
33 | componentDidMount() {
|
34 | setTimeout(() => {
|
35 | (0, _tryit.default)(() => {
|
36 | this.base.querySelector('input').focus();
|
37 | });
|
38 | }, 100);
|
39 | }
|
40 |
|
41 | componentDidUpdate(prevProps, prevState) {
|
42 | const term = this.state.term;
|
43 |
|
44 | if (term && term !== prevState.term) {
|
45 | this.setState({
|
46 | loading: true
|
47 | });
|
48 | (0, _fetchDrugAutocomplete.fetchDrugAutocomplete)(term).then(results => {
|
49 | if (term === this.state.term) {
|
50 | const toSet = {
|
51 | ["term_".concat(term)]: results,
|
52 | loading: false
|
53 | };
|
54 | this.setState(toSet);
|
55 | }
|
56 | });
|
57 | }
|
58 | }
|
59 |
|
60 | drugSelected(drug) {
|
61 | const {
|
62 | updateValue
|
63 | } = this.props;
|
64 | updateValue(drug);
|
65 | this.setState({
|
66 | term: '',
|
67 | ["term_".concat(this.state.term)]: undefined
|
68 | });
|
69 | }
|
70 |
|
71 | focusOnInput() {
|
72 | this.base.querySelector('input').focus();
|
73 | }
|
74 |
|
75 | render({
|
76 | item,
|
77 | updateValue,
|
78 | className,
|
79 | resultsClassName
|
80 | }, {
|
81 | term,
|
82 | loading
|
83 | }) {
|
84 | const optsForTerm = this.state["term_".concat(term)];
|
85 | const hasOptsForTerm = optsForTerm && optsForTerm.length > 0;
|
86 | const noResults = !loading && term && !hasOptsForTerm;
|
87 | const isEmpty = !term && !loading;
|
88 | const showMessage = noResults || isEmpty || loading;
|
89 | const showResults = hasOptsForTerm && !showMessage;
|
90 | let drugLookupStatus;
|
91 |
|
92 | if (noResults) {
|
93 | drugLookupStatus = 'noResults';
|
94 | } else if (isEmpty) {
|
95 | drugLookupStatus = 'ready';
|
96 | } else if (loading) {
|
97 | drugLookupStatus = 'searching';
|
98 | }
|
99 |
|
100 | const drugName = item.value && item.value.name;
|
101 | return (0, _preact.h)("div", {
|
102 | className: className
|
103 | }, (0, _preact.h)(_formFields.Label, {
|
104 | item: item,
|
105 | updateValue: updateValue
|
106 | }), !drugName && (0, _preact.h)(_preact.Fragment, null, (0, _preact.h)(_.Input, {
|
107 | className: "w-100 border-box mv1",
|
108 | value: term,
|
109 | "data-e2e": "".concat(item.name, "Input"),
|
110 | onKeyDown: e => {
|
111 | if (e.key === 'Enter') {
|
112 | e.preventDefault();
|
113 |
|
114 | if (optsForTerm && optsForTerm.length > 0) {
|
115 | this.drugSelected(optsForTerm[0]);
|
116 | }
|
117 | }
|
118 | },
|
119 | onInput: e => {
|
120 | const term = e.target.value || '';
|
121 | this.setState({
|
122 | term
|
123 | });
|
124 | }
|
125 | }), showResults && (0, _preact.h)("div", {
|
126 | key: "opts",
|
127 | className: (0, _classnames.default)(resultsClassName)
|
128 | }, optsForTerm.map(drug => (0, _preact.h)(_.Button, {
|
129 | key: drug.name,
|
130 | className: "mr2 mv1",
|
131 | type: "button",
|
132 | "data-e2e": "".concat(item.name, "SuggestionButton"),
|
133 | onClick: e => {
|
134 | e.preventDefault();
|
135 | this.drugSelected(drug);
|
136 | }
|
137 | }, drug.name))), (0, _preact.h)("div", null, (0, _preact.h)(_drugLookupUi.default, {
|
138 | term: term,
|
139 | status: drugLookupStatus
|
140 | }))), drugName && (0, _preact.h)("div", null, drugName, ' ', (0, _preact.h)(_.Button, {
|
141 | className: "mr2 mb2",
|
142 | type: "button",
|
143 | tiny: true,
|
144 | stop: true,
|
145 | "data-e2e": "drugRemoveButton",
|
146 | onClick: e => {
|
147 | e.preventDefault();
|
148 | updateValue('');
|
149 | setTimeout(() => this.focusOnInput(), 200);
|
150 | }
|
151 | }, (0, _preact.h)("span", {
|
152 | className: "flex items-center"
|
153 | }, (0, _preact.h)(_.Icon, {
|
154 | className: "mr2",
|
155 | icon: "delete",
|
156 | size: "16"
|
157 | }), (0, _preact.h)("span", {
|
158 | className: "mr1"
|
159 | }, "remove")))));
|
160 | }
|
161 |
|
162 | }
|
163 |
|
164 | var _default = MedicationInput;
|
165 | exports.default = _default; |
\ | No newline at end of file |