@medplum/react 2.0.12 → 2.0.13

package/dist/cjs/index.cjs

@@ -2671,7 +2671,7 @@
 
     const daysOfWeek = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
     function TimingInput(props) {
-        const [value, setValue] = React.useState(props.defaultValue || {});
+        const [value, setValue] = React.useState(props.defaultValue);
         const [open, setOpen] = React.useState(false);
         const valueRef = React.useRef();
         valueRef.current = value;
@@ -2687,8 +2687,14 @@
                     setOpen(false);
                 }, onCancel: () => setOpen(false) })));
     }
+    const defaultValue = {
+        repeat: {
+            period: 1,
+            periodUnit: 'd',
+        },
+    };
     function TimingEditorDialog(props) {
-        const [value, setValue] = React.useState(props.defaultValue || {});
+        const [value, setValue] = React.useState(props.defaultValue || defaultValue);
         const valueRef = React.useRef();
         valueRef.current = value;
         function setStart(newStart) {
@@ -2703,44 +2709,32 @@
         function setPeriodUnit(newPeriodUnit) {
             setRepeat({ ...valueRef.current?.repeat, periodUnit: newPeriodUnit });
         }
-        function setDayOfWeek(day, enabled) {
-            if (enabled) {
-                addDayOfWeek(day);
-            }
-            else {
-                removeDayOfWeek(day);
-            }
-        }
-        function addDayOfWeek(day) {
-            const existing = valueRef.current?.repeat?.dayOfWeek || [];
-            if (!existing.includes(day)) {
-                setRepeat({ ...valueRef.current?.repeat, dayOfWeek: [...existing, day] });
-            }
-        }
-        function removeDayOfWeek(day) {
-            const existing = valueRef.current?.repeat?.dayOfWeek || [];
-            if (existing.includes(day)) {
-                setRepeat({ ...valueRef.current?.repeat, dayOfWeek: existing.filter((d) => d !== day) });
-            }
+        function setDaysOfWeek(newDaysOfWeek) {
+            setRepeat({ ...valueRef.current?.repeat, dayOfWeek: newDaysOfWeek });
         }
         return (React.createElement(core$1.Modal, { title: "Timing", closeButtonProps: { 'aria-label': 'Close' }, opened: props.visible, onClose: () => props.onCancel() },
-            React.createElement("div", { style: { padding: '5px 20px', textAlign: 'left' } },
+            React.createElement(core$1.Stack, null,
                 React.createElement(FormSection, { title: "Starts on", htmlFor: 'timing-dialog-start' },
                     React.createElement(DateTimeInput, { name: 'timing-dialog-start', onChange: (newValue) => setStart(newValue) })),
-                React.createElement(FormSection, { title: "Repeat every", htmlFor: 'timing-dialog-period' },
-                    React.createElement(core$1.Group, { spacing: "xs", grow: true, noWrap: true },
-                        React.createElement(core$1.TextInput, { type: "number", step: 1, id: "timing-dialog-period", name: "timing-dialog-period", defaultValue: value?.repeat?.period, onChange: (e) => setPeriod(parseInt(e.currentTarget.value)) }),
-                        React.createElement(core$1.NativeSelect, { id: "timing-dialog-periodUnit", name: "timing-dialog-periodUnit", defaultValue: value?.repeat?.periodUnit, onChange: (e) => setPeriodUnit(e.currentTarget.value), data: [
-                                { label: 'day', value: 'd' },
-                                { label: 'week', value: 'wk' },
-                                { label: 'month', value: 'mo' },
-                                { label: 'year', value: 'a' },
-                            ] }))),
-                React.createElement(FormSection, { title: "Repeat on" },
-                    React.createElement(core$1.Group, { spacing: "xs", grow: true, noWrap: true }, daysOfWeek.map((day) => (React.createElement(React.Fragment, { key: day },
-                        React.createElement("label", { htmlFor: 'timing-dialog-repeat-' + day }, day.charAt(0).toUpperCase()),
-                        React.createElement(core$1.Checkbox, { id: 'timing-dialog-repeat-' + day, name: 'timing-dialog-repeat-' + day, onChange: (e) => setDayOfWeek(day, e.currentTarget.checked) }))))))),
-            React.createElement(core$1.Button, { onClick: () => props.onOk(value) }, "OK")));
+                React.createElement(core$1.Switch, { label: "Repeat", checked: !!value.repeat, onChange: (e) => setRepeat(e.currentTarget.checked ? defaultValue.repeat : undefined) }),
+                value.repeat && (React.createElement(React.Fragment, null,
+                    React.createElement(FormSection, { title: "Repeat every", htmlFor: 'timing-dialog-period' },
+                        React.createElement(core$1.Group, { spacing: "xs", grow: true, noWrap: true },
+                            React.createElement(core$1.TextInput, { type: "number", step: 1, id: "timing-dialog-period", name: "timing-dialog-period", defaultValue: value?.repeat?.period || 1, onChange: (e) => setPeriod(parseInt(e.currentTarget.value) || 1) }),
+                            React.createElement(core$1.NativeSelect, { id: "timing-dialog-periodUnit", name: "timing-dialog-periodUnit", defaultValue: value?.repeat?.periodUnit, onChange: (e) => setPeriodUnit(e.currentTarget.value), data: [
+                                    { label: 'second', value: 's' },
+                                    { label: 'minute', value: 'min' },
+                                    { label: 'hour', value: 'h' },
+                                    { label: 'day', value: 'd' },
+                                    { label: 'week', value: 'wk' },
+                                    { label: 'month', value: 'mo' },
+                                    { label: 'year', value: 'a' },
+                                ] }))),
+                    value.repeat?.periodUnit === 'wk' && (React.createElement(FormSection, { title: "Repeat on" },
+                        React.createElement(core$1.Chip.Group, { multiple: true, onChange: setDaysOfWeek },
+                            React.createElement(core$1.Group, { position: "apart", mt: "md", spacing: "xs" }, daysOfWeek.map((day) => (React.createElement(core$1.Chip, { key: day, value: day, size: "xs", radius: "xl" }, day.charAt(0).toUpperCase()))))))))),
+                React.createElement(core$1.Group, { position: "right" },
+                    React.createElement(core$1.Button, { onClick: () => props.onOk(value) }, "OK")))));
     }
 
     function ResourcePropertyInput(props) {