@medplum/react 0.9.19 → 0.9.20

package/dist/esm/index.js

@@ -19,7 +19,7 @@ function Input(props) {
     const className = 'medplum-input';
     const issues = getIssuesForExpression(props.outcome, props.name);
     const invalid = issues && issues.length > 0;
-    return (React.createElement("input", { id: props.name, name: props.name, type: getInputType(props.type), size: props.size, step: props.step, className: className, defaultValue: props.defaultValue || '', required: props.required, autoCapitalize: props.autoCapitalize, autoComplete: props.autoComplete, autoFocus: props.autoFocus, ref: props.inputRef, "aria-invalid": invalid, "aria-describedby": invalid ? props.name + '-errors' : '', placeholder: props.placeholder, "data-testid": props.testid, disabled: props.disabled, onChange: (e) => {
+    return (React.createElement("input", { id: props.name, name: props.name, type: getInputType(props.type), size: props.size, step: props.step, className: className, style: props.style, defaultValue: props.defaultValue || '', required: props.required, autoCapitalize: props.autoCapitalize, autoComplete: props.autoComplete, autoFocus: props.autoFocus, ref: props.inputRef, "aria-invalid": invalid, "aria-describedby": invalid ? props.name + '-errors' : '', placeholder: props.placeholder, "data-testid": props.testid, disabled: props.disabled, onChange: (e) => {
             if (props.onChange) {
                 props.onChange(e.currentTarget.value);
             }
@@ -870,6 +870,18 @@ function ContactPointDisplay(props) {
     return React.createElement(React.Fragment, null, builder.join('').trim());
 }
 
+function ContactDetailDisplay(props) {
+    var _a;
+    const contactDetail = props.value;
+    if (!contactDetail) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null,
+        contactDetail.name,
+        contactDetail.name && ': ', (_a = contactDetail.telecom) === null || _a === void 0 ? void 0 :
+        _a.map((telecom, index) => (React.createElement(ContactPointDisplay, { key: 'telecom-' + index, value: telecom })))));
+}
+
 function DateTimeDisplay(props) {
     if (!props.value) {
         return null;
@@ -1018,6 +1030,8 @@ function ResourcePropertyDisplay(props) {
             return React.createElement(CodeableConceptDisplay, { value: value });
         case PropertyType.Coding:
             return React.createElement(CodingDisplay, { value: value });
+        case PropertyType.ContactDetail:
+            return React.createElement(ContactDetailDisplay, { value: value });
         case PropertyType.ContactPoint:
             return React.createElement(ContactPointDisplay, { value: value });
         case PropertyType.HumanName:
@@ -1187,19 +1201,34 @@ function ContactPointInput(props) {
     const ref = useRef();
     ref.current = contactPoint;
     function setContactPointWrapper(newValue) {
+        if (newValue && Object.keys(newValue).length === 0) {
+            newValue = undefined;
+        }
         setContactPoint(newValue);
         if (props.onChange) {
             props.onChange(newValue);
         }
     }
     function setSystem(system) {
-        setContactPointWrapper(Object.assign(Object.assign({}, ref.current), { system: system ? system : undefined }));
+        const newValue = Object.assign(Object.assign({}, ref.current), { system });
+        if (!system) {
+            delete newValue.system;
+        }
+        setContactPointWrapper(newValue);
     }
     function setUse(use) {
-        setContactPointWrapper(Object.assign(Object.assign({}, ref.current), { use: use ? use : undefined }));
+        const newValue = Object.assign(Object.assign({}, ref.current), { use });
+        if (!use) {
+            delete newValue.use;
+        }
+        setContactPointWrapper(newValue);
     }
     function setValue(value) {
-        setContactPointWrapper(Object.assign(Object.assign({}, ref.current), { value: value ? value : undefined }));
+        const newValue = Object.assign(Object.assign({}, ref.current), { value });
+        if (!value) {
+            delete newValue.value;
+        }
+        setContactPointWrapper(newValue);
     }
     return (React.createElement(InputRow, null,
         React.createElement(Select, { defaultValue: contactPoint === null || contactPoint === void 0 ? void 0 : contactPoint.system, onChange: setSystem, testid: "system" },
@@ -1220,6 +1249,36 @@ function ContactPointInput(props) {
         React.createElement(Input, { placeholder: "Value", defaultValue: contactPoint === null || contactPoint === void 0 ? void 0 : contactPoint.value, onChange: setValue })));
 }
 
+function ContactDetailInput(props) {
+    var _a;
+    const [contactPoint, setContactDetail] = useState(props.defaultValue);
+    const ref = useRef();
+    ref.current = contactPoint;
+    function setContactDetailWrapper(newValue) {
+        setContactDetail(newValue);
+        if (props.onChange) {
+            props.onChange(newValue);
+        }
+    }
+    function setName(name) {
+        const newValue = Object.assign(Object.assign({}, ref.current), { name });
+        if (!name) {
+            delete newValue.name;
+        }
+        setContactDetailWrapper(newValue);
+    }
+    function setTelecom(telecom) {
+        const newValue = Object.assign(Object.assign({}, ref.current), { telecom: telecom && [telecom] });
+        if (!telecom) {
+            delete newValue.telecom;
+        }
+        setContactDetailWrapper(newValue);
+    }
+    return (React.createElement(InputRow, null,
+        React.createElement(Input, { name: props.name + '-name', placeholder: "Name", style: { width: 180 }, defaultValue: contactPoint === null || contactPoint === void 0 ? void 0 : contactPoint.name, onChange: setName }),
+        React.createElement(ContactPointInput, { name: props.name + '-telecom', defaultValue: (_a = contactPoint === null || contactPoint === void 0 ? void 0 : contactPoint.telecom) === null || _a === void 0 ? void 0 : _a[0], onChange: setTelecom })));
+}
+
 /**
  * The DateTimeInput component is a wrapper around the HTML5 input type="datetime-local".
  * The main purpose is to reconcile time zones.
@@ -1634,6 +1693,8 @@ function ElementDefinitionTypeInput(props) {
             return React.createElement(CodeableConceptInput, { property: property, name: name, defaultValue: value, onChange: props.onChange });
         case PropertyType.Coding:
             return React.createElement(CodingInput, { property: property, name: name, defaultValue: value, onChange: props.onChange });
+        case PropertyType.ContactDetail:
+            return React.createElement(ContactDetailInput, { name: name, defaultValue: value, onChange: props.onChange });
         case PropertyType.ContactPoint:
             return React.createElement(ContactPointInput, { name: name, defaultValue: value, onChange: props.onChange });
         case PropertyType.Extension:
@@ -5226,7 +5287,7 @@ function createScriptTag(src, onload) {
 
 function GoogleButton(props) {
     const medplum = useMedplum();
-    const { handleAuthResponse } = props;
+    const { handleGoogleCredential } = props;
     const googleClientId = getGoogleClientId(props.googleClientId);
     const parentRef = useRef(null);
     const [scriptLoaded, setScriptLoaded] = useState(typeof google !== 'undefined');
@@ -5240,7 +5301,7 @@ function GoogleButton(props) {
         if (!initialized) {
             google.accounts.id.initialize({
                 client_id: googleClientId,
-                callback: (response) => medplum.startGoogleLogin(response).then(handleAuthResponse),
+                callback: handleGoogleCredential,
             });
             setInitialized(true);
         }
@@ -5248,7 +5309,7 @@ function GoogleButton(props) {
             google.accounts.id.renderButton(parentRef.current, {});
             setButtonRendered(true);
         }
-    }, [medplum, googleClientId, initialized, scriptLoaded, parentRef, buttonRendered, handleAuthResponse]);
+    }, [medplum, googleClientId, initialized, scriptLoaded, parentRef, buttonRendered, handleGoogleCredential]);
     if (!googleClientId) {
         return null;
     }
@@ -5279,19 +5340,24 @@ function SignInForm(props) {
             setMemberships(response.memberships);
         }
         if (response.code) {
-            medplum
-                .processCode(response.code)
-                .then(() => {
-                if (props.onSuccess) {
-                    props.onSuccess();
-                }
-            })
-                .catch(console.log);
+            if (props.onCode) {
+                props.onCode(response.code);
+            }
+            else {
+                medplum
+                    .processCode(response.code)
+                    .then(() => {
+                    if (props.onSuccess) {
+                        props.onSuccess();
+                    }
+                })
+                    .catch(console.log);
+            }
         }
     }
     return (React.createElement(Document, { width: 450 }, (() => {
         if (!login) {
-            return (React.createElement(AuthenticationForm, { googleClientId: props.googleClientId, onForgotPassword: props.onForgotPassword, onRegister: props.onRegister, handleAuthResponse: handleAuthResponse }, props.children));
+            return (React.createElement(AuthenticationForm, { clientId: props.clientId, scope: props.scope, nonce: props.nonce, googleClientId: props.googleClientId, onForgotPassword: props.onForgotPassword, onRegister: props.onRegister, handleAuthResponse: handleAuthResponse }, props.children));
         }
         else if (memberships) {
             return React.createElement(ProfileForm, { login: login, memberships: memberships, handleAuthResponse: handleAuthResponse });
@@ -5308,6 +5374,9 @@ function AuthenticationForm(props) {
     return (React.createElement(Form, { style: { maxWidth: 400 }, onSubmit: (formData) => {
             medplum
                 .startLogin({
+                clientId: props.clientId,
+                scope: props.scope,
+                nonce: props.nonce,
                 email: formData.email,
                 password: formData.password,
                 remember: formData.remember === 'true',
@@ -5334,7 +5403,18 @@ function AuthenticationForm(props) {
             React.createElement("div", null,
                 React.createElement(Button, { type: "submit", testid: "submit" }, "Sign in"))),
         React.createElement("div", { className: "medplum-signin-google-container" },
-            React.createElement(GoogleButton, { googleClientId: props.googleClientId, handleAuthResponse: props.handleAuthResponse }))));
+            React.createElement(GoogleButton, { googleClientId: props.googleClientId, handleGoogleCredential: (response) => {
+                    medplum
+                        .startGoogleLogin({
+                        clientId: props.clientId,
+                        scope: props.scope,
+                        nonce: props.nonce,
+                        googleClientId: response.clientId,
+                        googleCredential: response.credential,
+                    })
+                        .then(props.handleAuthResponse)
+                        .catch(setOutcome);
+                } }))));
 }
 function ProfileForm(props) {
     const medplum = useMedplum();
@@ -5406,5 +5486,5 @@ function TabSwitch(props) {
     })));
 }
 
-export { AddressDisplay, AddressInput, AttachmentArrayDisplay, AttachmentArrayInput, AttachmentInput, Autocomplete, Avatar, BackboneElementInput, Button, Checkbox, CheckboxFormSection, CodeInput, CodeableConceptDisplay, CodeableConceptInput, ContactPointDisplay, ContactPointInput, DateTimeDisplay, DateTimeInput, DefaultResourceTimeline, DiagnosticReportDisplay, Document, ElementDefinitionInputSelector, ElementDefinitionTypeInput, EncounterTimeline, ErrorBoundary, FhirPathTable, FooterLinks, Form, FormSection, Header, HumanNameDisplay, HumanNameInput, IdentifierInput, Input, Loading, Logo, MedplumLink, MedplumProvider, MemoizedFhirPathTable, MemoizedSearchControl, MenuItem, ObservationTable, PatientTimeline, PlanDefinitionBuilder, Popup, QuestionnaireBuilder, QuestionnaireForm, QuestionnaireFormItem, QuestionnaireItemType, RangeDisplay, RangeInput, ReferenceInput, RequestGroupDisplay, ResourceArrayDisplay, ResourceArrayInput, ResourceBadge, ResourceBlame, ResourceDiff, ResourceForm, ResourceHistoryTable, ResourceInput, ResourceName, ResourcePropertyDisplay, ResourcePropertyInput, ResourceTable, ResourceTimeline, Scrollable, SearchChangeEvent, SearchClickEvent, SearchControl, SearchFieldEditor, SearchFilterEditor, SearchLoadEvent, Select, ServiceRequestTimeline, SignInForm, StatusBadge, Tab, TabList, TabPanel, TabSwitch, TextArea, Timeline, TimelineItem, TitleBar, UploadButton, addDateEqualsFilter, addDateFilter, addDateFilterBetween, addField, addFilter, addLastMonthFilter, addMissingFilter, addNextMonthFilter, addQuestionnaireInitialValues, addThisMonthFilter, addTodayFilter, addTomorrowFilter, addYearToDateFilter, addYesterdayFilter, buildFieldNameString, clearFilters, clearFiltersOnField, convertIsoToLocal, convertLocalToIso, createScriptTag, deleteFilter, formatRangeString, getOpString, getSearchOperators, getSortField, getTimeString, getValueAndType, hasFilterOnField, isChoiceQuestion, isSortDescending, movePage, parseForm, renderValue, setFilters, setOffset, setPropertyValue, setSort, sortByDateAndPriority, toggleSort, useMedplum, useMedplumContext, useMedplumProfile, useResource };
+export { AddressDisplay, AddressInput, AttachmentArrayDisplay, AttachmentArrayInput, AttachmentInput, Autocomplete, Avatar, BackboneElementInput, Button, Checkbox, CheckboxFormSection, CodeInput, CodeableConceptDisplay, CodeableConceptInput, ContactDetailDisplay, ContactDetailInput, ContactPointDisplay, ContactPointInput, DateTimeDisplay, DateTimeInput, DefaultResourceTimeline, DiagnosticReportDisplay, Document, ElementDefinitionInputSelector, ElementDefinitionTypeInput, EncounterTimeline, ErrorBoundary, FhirPathTable, FooterLinks, Form, FormSection, Header, HumanNameDisplay, HumanNameInput, IdentifierInput, Input, Loading, Logo, MedplumLink, MedplumProvider, MemoizedFhirPathTable, MemoizedSearchControl, MenuItem, ObservationTable, PatientTimeline, PlanDefinitionBuilder, Popup, QuestionnaireBuilder, QuestionnaireForm, QuestionnaireFormItem, QuestionnaireItemType, RangeDisplay, RangeInput, ReferenceInput, RequestGroupDisplay, ResourceArrayDisplay, ResourceArrayInput, ResourceBadge, ResourceBlame, ResourceDiff, ResourceForm, ResourceHistoryTable, ResourceInput, ResourceName, ResourcePropertyDisplay, ResourcePropertyInput, ResourceTable, ResourceTimeline, Scrollable, SearchChangeEvent, SearchClickEvent, SearchControl, SearchFieldEditor, SearchFilterEditor, SearchLoadEvent, Select, ServiceRequestTimeline, SignInForm, StatusBadge, Tab, TabList, TabPanel, TabSwitch, TextArea, Timeline, TimelineItem, TitleBar, UploadButton, addDateEqualsFilter, addDateFilter, addDateFilterBetween, addField, addFilter, addLastMonthFilter, addMissingFilter, addNextMonthFilter, addQuestionnaireInitialValues, addThisMonthFilter, addTodayFilter, addTomorrowFilter, addYearToDateFilter, addYesterdayFilter, buildFieldNameString, clearFilters, clearFiltersOnField, convertIsoToLocal, convertLocalToIso, createScriptTag, deleteFilter, formatRangeString, getOpString, getSearchOperators, getSortField, getTimeString, getValueAndType, hasFilterOnField, isChoiceQuestion, isSortDescending, movePage, parseForm, renderValue, setFilters, setOffset, setPropertyValue, setSort, sortByDateAndPriority, toggleSort, useMedplum, useMedplumContext, useMedplumProfile, useResource };
 //# sourceMappingURL=index.js.map