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 _fetchDrugAutocomplete = require("./utils/fetch-drug-autocomplete");
|
11 |
|
12 | var _formFields = require("./form-fields");
|
13 |
|
14 | var _ = require("./");
|
15 |
|
16 | var _drugLookupUi = _interopRequireDefault(require("./drug-lookup-ui"));
|
17 |
|
18 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
19 |
|
20 | 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; }
|
21 |
|
22 | 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; }
|
23 |
|
24 | 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; }
|
25 |
|
26 | class MedicationEntryField extends _preact.Component {
|
27 | constructor(props) {
|
28 | super(props);
|
29 | this.focusOnInput = this.focusOnInput.bind(this);
|
30 | this.originalState = {
|
31 | term: '',
|
32 | loading: false
|
33 | };
|
34 | this.state = Object.assign({}, this.originalState);
|
35 | }
|
36 |
|
37 | componentDidUpdate(prevProps, prevState) {
|
38 | const term = this.state.term;
|
39 |
|
40 | if (term !== prevState.term && term) {
|
41 | this.setState({
|
42 | loading: true
|
43 | });
|
44 | (0, _fetchDrugAutocomplete.fetchDrugAutocomplete)(term).then(results => {
|
45 | this.setState({
|
46 | ["term_".concat(term)]: results,
|
47 | loading: false
|
48 | });
|
49 | });
|
50 | }
|
51 | }
|
52 |
|
53 | focusOnInput() {
|
54 | const input = this.base && this.base.querySelector('input');
|
55 |
|
56 | if (input) {
|
57 | input.focus();
|
58 | }
|
59 | }
|
60 |
|
61 | addDrug(drug) {
|
62 | const {
|
63 | item,
|
64 | updateValue
|
65 | } = this.props;
|
66 | const {
|
67 | value
|
68 | } = item;
|
69 | const valueIsEmptyArray = typeof value === 'string';
|
70 | const drugs = value && !valueIsEmptyArray ? value : [];
|
71 | const copy = drugs.slice();
|
72 | copy.push(drug);
|
73 | updateValue(copy);
|
74 | this.setState({
|
75 | term: '',
|
76 | ["term_".concat(this.state.term)]: undefined
|
77 | });
|
78 | }
|
79 |
|
80 | render() {
|
81 | const {
|
82 | item,
|
83 | updateValue
|
84 | } = this.props;
|
85 | const {
|
86 | loading
|
87 | } = this.state;
|
88 | const {
|
89 | value
|
90 | } = item;
|
91 | const {
|
92 | term
|
93 | } = this.state;
|
94 | const optsForTerm = this.state["term_".concat(term)];
|
95 | const valueIsEmptyArray = Array.isArray(value) && !value.length;
|
96 | const itemCopy = Object.assign({}, item);
|
97 | delete itemCopy.subLabel;
|
98 | const modifiedItemForLabel = value ? _objectSpread(_objectSpread({}, item), {}, {
|
99 | buttons: null
|
100 | }) : item;
|
101 | let drugLookupStatus;
|
102 |
|
103 | if (term && optsForTerm && !optsForTerm.length) {
|
104 | drugLookupStatus = 'noResults';
|
105 | } else if (!term && (!optsForTerm || optsForTerm.length === 0) && !value.length) {
|
106 | drugLookupStatus = 'ready';
|
107 | } else if (loading) {
|
108 | drugLookupStatus = 'searching';
|
109 | }
|
110 |
|
111 | return (0, _preact.h)("div", null, (0, _preact.h)("div", null, (0, _preact.h)(_formFields.Label, {
|
112 | item: modifiedItemForLabel,
|
113 | updateValue: val => {
|
114 | if (val === 'none') {
|
115 | updateValue([]);
|
116 | }
|
117 | }
|
118 | }), !valueIsEmptyArray && (0, _preact.h)(_.Input, {
|
119 | style: {
|
120 | width: 'calc(100% - 18px)'
|
121 | },
|
122 | value: term,
|
123 | "data-e2e": "".concat(item.name, "Input"),
|
124 | onKeyDown: e => {
|
125 | if (e.key === 'Enter') {
|
126 | e.preventDefault();
|
127 |
|
128 | if (optsForTerm && optsForTerm.length > 0) {
|
129 | this.addDrug(optsForTerm[0]);
|
130 | }
|
131 | }
|
132 | },
|
133 | onInput: e => {
|
134 | const term = e.target.value || '';
|
135 | this.setState({
|
136 | term
|
137 | });
|
138 | }
|
139 | })), optsForTerm && optsForTerm.length > 0 && (0, _preact.h)("div", {
|
140 | key: "opts",
|
141 | className: "overflow-x-scroll nowrap pv2"
|
142 | }, optsForTerm.map(drug => (0, _preact.h)(_.Button, {
|
143 | key: drug.name,
|
144 | className: "mr2",
|
145 | type: "button",
|
146 | "data-e2e": "".concat(item.name, "SuggestionButton"),
|
147 | onClick: e => {
|
148 | e.preventDefault();
|
149 | this.addDrug(drug);
|
150 | this.focusOnInput();
|
151 | }
|
152 | }, drug.name))), (0, _preact.h)(_drugLookupUi.default, {
|
153 | term: term,
|
154 | status: drugLookupStatus
|
155 | }), (0, _preact.h)("div", {
|
156 | className: "mb2"
|
157 | }, valueIsEmptyArray && (0, _preact.h)(_.Button, {
|
158 | type: "button",
|
159 | className: "mb2",
|
160 | onClick: e => {
|
161 | e.preventDefault();
|
162 | updateValue(null);
|
163 | }
|
164 | }, (0, _preact.h)("span", {
|
165 | className: "flex items-center"
|
166 | }, "none ", (0, _preact.h)(_.Icon, {
|
167 | className: "ml2",
|
168 | icon: "close",
|
169 | size: "24"
|
170 | }))), value && !valueIsEmptyArray && value.length !== 0 && (0, _preact.h)("div", null, (0, _preact.h)("div", {
|
171 | className: "mb2 fw3 f6 pt2"
|
172 | }, "Chosen Medications:"), value.map(drug => (0, _preact.h)("div", {
|
173 | key: drug.name
|
174 | }, drug.name, ' ', (0, _preact.h)(_.Button, {
|
175 | className: "mr2 mb2",
|
176 | type: "button",
|
177 | tiny: true,
|
178 | stop: true,
|
179 | "data-e2e": "drugRemoveButton",
|
180 | onClick: e => {
|
181 | e.preventDefault();
|
182 | const newVal = value.filter(item => item.id !== drug.id);
|
183 | updateValue(newVal);
|
184 | }
|
185 | }, (0, _preact.h)("span", {
|
186 | className: "flex items-center"
|
187 | }, (0, _preact.h)(_.Icon, {
|
188 | className: "mr2",
|
189 | icon: "delete",
|
190 | size: "16"
|
191 | }), (0, _preact.h)("span", {
|
192 | className: "mr1"
|
193 | }, "remove"))))))));
|
194 | }
|
195 |
|
196 | }
|
197 |
|
198 | var _default = MedicationEntryField;
|
199 | exports.default = _default; |
\ | No newline at end of file |