widgets: RRule layout and styles

src/widgets/RRule.tsx

@@ -100,6 +100,10 @@ const menuItemsWeekDays = weekdays.map((day) => {
     <MenuItem key={day} value={day}>{WeekDay[day]}</MenuItem>
   );
 });
+const styles = {
+  multiSelect: { minWidth: 120, maxWidth: '100%' },
+  width: { width: 120 },
+};
 export default function RRuleEteSync(props: PropsType) {
   const options = props.rrule;
   function updateRule(newOptions: Partial<RRuleOptions>): void {
@@ -148,25 +152,6 @@ export default function RRuleEteSync(props: PropsType) {
           {menuItemsFrequency}
         </Select>
       </div>
-      {options.bymonthday &&
-        <TextField
-          type="number"
-          value={options.bymonthday[0]}
-          label="Month day"
-          style={{ width: 100 }}
-          inputProps={{ min: 1, step: 1, max: 31 }}
-          onChange={(event: React.FormEvent<{ value: unknown }>) => {
-            event.preventDefault();
-            const value = (event.currentTarget as HTMLInputElement).value;
-            const numberValue = Number(value);
-            if (value === '') {
-              updateRule({ bymonthday: undefined });
-            } else if (numberValue < 32 && numberValue > 0) {
-              updateRule({ bymonthday: [numberValue] });
-            }
-          }}
-        />
-      }
       {
         !disableComplex && <div style={{ display: 'flex' }}>
           {(options.freq === 'MONTHLY') &&
@@ -193,26 +178,56 @@ export default function RRuleEteSync(props: PropsType) {
                 <MenuItem value={-1}>Last</MenuItem>
               </Select>}
         </div>}
+      <FormControl>
+        <InputLabel>Ends</InputLabel>
+        <Select
+          value={getEnds()}
+          style={styles.width}
+          onChange={(event: React.FormEvent<{ value: unknown }>) => {
+            const value = Number((event.target as HTMLSelectElement).value);
+            let updateOptions;
+            if (value === Ends.Date) {
+              updateOptions = { count: undefined, until: ICAL.Time.now() };
+            } else if (value === Ends.After) {
+              updateOptions = { until: undefined, count: 1 };
+            } else {
+              updateOptions = { count: undefined, until: undefined };
+            }
+            updateRule(updateOptions);
+          }}>
+          {menuItemsEnds}
+        </Select>
+      </FormControl>
+      {options.until &&
+        <DateTimePicker
+          dateOnly
+          value={options.until?.toJSDate() || undefined}
+          placeholder="Ends"
+          onChange={(date?: Date) => {
+            const value = date ? date : null;
+            updateRule({ until: ICAL.Time.fromJSDate(value, true) });
+          }}
+        />
+      }
+      {options.count &&
+        <TextField
+          type="number"
+          value={options.count}
+          label="Count"
+          style={{ width: 60 }}
+          inputProps={{ min: 1, step: 1 }}
+          onChange={(event: React.FormEvent<{ value: unknown }>) => {
+            event.preventDefault();
+            const inputNode = event.currentTarget as HTMLInputElement;
+            if (inputNode.value === '') {
+              updateRule({ count: 1 });
+            } else if (inputNode.valueAsNumber) {
+              updateRule({ count: inputNode.valueAsNumber });
+            }
+          }}
+        />
+      }
       <div>
-        {options.freq === 'YEARLY' &&
-          <div>
-            <FormControl>
-              <InputLabel>Months</InputLabel>
-              <Select
-                style={{ width: 200 }}
-                value={options.bymonth ? options.bymonth : []}
-                multiple
-                onChange={(event: React.ChangeEvent<{ value: unknown }>) => {
-                  const value = event.target.value as string[];
-                  if (value) {
-                    updateRule({ bymonth: value.map((month) => Number(month)) });
-                  }
-                }}>
-                {menuItemMonths}
-              </Select>
-            </FormControl>
-          </div>
-        }
         {(options.freq && options.freq !== 'DAILY') &&
           <div>
             <FormControl>
@@ -220,7 +235,7 @@ export default function RRuleEteSync(props: PropsType) {
               <Select
                 value={options.byday ? options.byday : []}
                 multiple
-                style={{ width: 200 }}
+                style={styles.multiSelect}
                 onChange={(event: React.ChangeEvent<{ value: unknown }>) => {
                   const value = event.target.value as string[];
                   if (value) {
@@ -232,54 +247,44 @@ export default function RRuleEteSync(props: PropsType) {
             </FormControl>
           </div>
         }
-        <FormControl>
+        {options.freq === 'MONTHLY' &&
-          <InputLabel>Ends</InputLabel>
-          <Select
-            value={getEnds()}
-            onChange={(event: React.FormEvent<{ value: unknown }>) => {
-              const value = Number((event.target as HTMLSelectElement).value);
-              let updateOptions;
-              if (value === Ends.Date) {
-                updateOptions = { count: undefined, until: ICAL.Time.now() };
-              } else if (value === Ends.After) {
-                updateOptions = { until: undefined, count: 1 };
-              } else {
-                updateOptions = { count: undefined, until: undefined };
-              }
-              updateRule(updateOptions);
-            }}>
-            {menuItemsEnds}
-          </Select>
-        </FormControl>
-        {options.until &&
-          <DateTimePicker
-            dateOnly
-            value={options.until?.toJSDate() || undefined}
-            placeholder="Ends"
-            onChange={(date?: Date) => {
-              const value = date ? date : null;
-              updateRule({ until: ICAL.Time.fromJSDate(value, true) });
-            }}
-          />
-        }
-        {options.count &&
           <TextField
             type="number"
-            value={options.count}
+            value={options.bymonthday ? options.bymonthday[0] : undefined}
-            label="Count"
+            label="Month day"
-            style={{ width: 60 }}
+            style={styles.width}
-            inputProps={{ min: 1, step: 1 }}
+            inputProps={{ min: 1, step: 1, max: 31 }}
             onChange={(event: React.FormEvent<{ value: unknown }>) => {
               event.preventDefault();
-              const inputNode = event.currentTarget as HTMLInputElement;
+              const value = (event.currentTarget as HTMLInputElement).value;
-              if (inputNode.value === '') {
+              const numberValue = Number(value);
-                updateRule({ count: 1 });
+              if (value === '') {
-              } else if (inputNode.valueAsNumber) {
+                updateRule({ bymonthday: undefined });
-                updateRule({ count: inputNode.valueAsNumber });
+              } else if (numberValue < 32 && numberValue > 0) {
+                updateRule({ bymonthday: [numberValue] });
               }
             }}
           />
         }
+        {options.freq === 'YEARLY' &&
+          <div>
+            <FormControl>
+              <InputLabel>Months</InputLabel>
+              <Select
+                style={styles.multiSelect}
+                value={options.bymonth ? options.bymonth : []}
+                multiple
+                onChange={(event: React.ChangeEvent<{ value: unknown }>) => {
+                  const value = event.target.value as string[];
+                  if (value) {
+                    updateRule({ bymonth: value.map((month) => Number(month)) });
+                  }
+                }}>
+                {menuItemMonths}
+              </Select>
+            </FormControl>
+          </div>
+        }
       </div>
     </>
   );