@medplum/react 0.9.19 → 0.9.20

package/dist/cjs/index.js

@@ -25,7 +25,7 @@
         const className = 'medplum-input';
         const issues = getIssuesForExpression(props.outcome, props.name);
         const invalid = issues && issues.length > 0;
-        return (React__default["default"].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__default["default"].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);
                 }
@@ -876,6 +876,18 @@
         return React__default["default"].createElement(React__default["default"].Fragment, null, builder.join('').trim());
     }
 
+    function ContactDetailDisplay(props) {
+        var _a;
+        const contactDetail = props.value;
+        if (!contactDetail) {
+            return null;
+        }
+        return (React__default["default"].createElement(React__default["default"].Fragment, null,
+            contactDetail.name,
+            contactDetail.name && ': ', (_a = contactDetail.telecom) === null || _a === void 0 ? void 0 :
+            _a.map((telecom, index) => (React__default["default"].createElement(ContactPointDisplay, { key: 'telecom-' + index, value: telecom })))));
+    }
+
     function DateTimeDisplay(props) {
         if (!props.value) {
             return null;
@@ -1024,6 +1036,8 @@
                 return React__default["default"].createElement(CodeableConceptDisplay, { value: value });
             case core.PropertyType.Coding:
                 return React__default["default"].createElement(CodingDisplay, { value: value });
+            case core.PropertyType.ContactDetail:
+                return React__default["default"].createElement(ContactDetailDisplay, { value: value });
             case core.PropertyType.ContactPoint:
                 return React__default["default"].createElement(ContactPointDisplay, { value: value });
             case core.PropertyType.HumanName:
@@ -1193,19 +1207,34 @@
         const ref = React.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__default["default"].createElement(InputRow, null,
             React__default["default"].createElement(Select, { defaultValue: contactPoint === null || contactPoint === void 0 ? void 0 : contactPoint.system, onChange: setSystem, testid: "system" },
@@ -1226,6 +1255,36 @@
             React__default["default"].createElement(Input, { placeholder: "Value", defaultValue: contactPoint === null || contactPoint === void 0 ? void 0 : contactPoint.value, onChange: setValue })));
     }
 
+    function ContactDetailInput(props) {
+        var _a;
+        const [contactPoint, setContactDetail] = React.useState(props.defaultValue);
+        const ref = React.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__default["default"].createElement(InputRow, null,
+            React__default["default"].createElement(Input, { name: props.name + '-name', placeholder: "Name", style: { width: 180 }, defaultValue: contactPoint === null || contactPoint === void 0 ? void 0 : contactPoint.name, onChange: setName }),
+            React__default["default"].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.
@@ -1640,6 +1699,8 @@
                 return React__default["default"].createElement(CodeableConceptInput, { property: property, name: name, defaultValue: value, onChange: props.onChange });
             case core.PropertyType.Coding:
                 return React__default["default"].createElement(CodingInput, { property: property, name: name, defaultValue: value, onChange: props.onChange });
+            case core.PropertyType.ContactDetail:
+                return React__default["default"].createElement(ContactDetailInput, { name: name, defaultValue: value, onChange: props.onChange });
             case core.PropertyType.ContactPoint:
                 return React__default["default"].createElement(ContactPointInput, { name: name, defaultValue: value, onChange: props.onChange });
             case core.PropertyType.Extension:
@@ -5232,7 +5293,7 @@
 
     function GoogleButton(props) {
         const medplum = useMedplum();
-        const { handleAuthResponse } = props;
+        const { handleGoogleCredential } = props;
         const googleClientId = getGoogleClientId(props.googleClientId);
         const parentRef = React.useRef(null);
         const [scriptLoaded, setScriptLoaded] = React.useState(typeof google !== 'undefined');
@@ -5246,7 +5307,7 @@
             if (!initialized) {
                 google.accounts.id.initialize({
                     client_id: googleClientId,
-                    callback: (response) => medplum.startGoogleLogin(response).then(handleAuthResponse),
+                    callback: handleGoogleCredential,
                 });
                 setInitialized(true);
             }
@@ -5254,7 +5315,7 @@
                 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;
         }
@@ -5285,19 +5346,24 @@
                 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__default["default"].createElement(Document, { width: 450 }, (() => {
             if (!login) {
-                return (React__default["default"].createElement(AuthenticationForm, { googleClientId: props.googleClientId, onForgotPassword: props.onForgotPassword, onRegister: props.onRegister, handleAuthResponse: handleAuthResponse }, props.children));
+                return (React__default["default"].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__default["default"].createElement(ProfileForm, { login: login, memberships: memberships, handleAuthResponse: handleAuthResponse });
@@ -5314,6 +5380,9 @@
         return (React__default["default"].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',
@@ -5340,7 +5409,18 @@
                 React__default["default"].createElement("div", null,
                     React__default["default"].createElement(Button, { type: "submit", testid: "submit" }, "Sign in"))),
             React__default["default"].createElement("div", { className: "medplum-signin-google-container" },
-                React__default["default"].createElement(GoogleButton, { googleClientId: props.googleClientId, handleAuthResponse: props.handleAuthResponse }))));
+                React__default["default"].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();
@@ -5426,6 +5506,8 @@
     exports.CodeInput = CodeInput;
     exports.CodeableConceptDisplay = CodeableConceptDisplay;
     exports.CodeableConceptInput = CodeableConceptInput;
+    exports.ContactDetailDisplay = ContactDetailDisplay;
+    exports.ContactDetailInput = ContactDetailInput;
     exports.ContactPointDisplay = ContactPointDisplay;
     exports.ContactPointInput = ContactPointInput;
     exports.DateTimeDisplay = DateTimeDisplay;