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,49 +178,11 @@ export default function RRuleEteSync(props: PropsType) {
                 <MenuItem value={-1}>Last</MenuItem>
               </Select>}
         </div>}
-      <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>
-              <InputLabel>Weekdays</InputLabel>
-              <Select
-                value={options.byday ? options.byday : []}
-                multiple
-                style={{ width: 200 }}
-                onChange={(event: React.ChangeEvent<{ value: unknown }>) => {
-                  const value = event.target.value as string[];
-                  if (value) {
-                    updateRule({ byday: value.map((day) => Number(day)) });
-                  }
-                }}>
-                {menuItemsWeekDays}
-              </Select>
-            </FormControl>
-          </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;
@@ -280,6 +227,64 @@ export default function RRuleEteSync(props: PropsType) {
           }}
         />
       }
+      <div>
+        {(options.freq && options.freq !== 'DAILY') &&
+          <div>
+            <FormControl>
+              <InputLabel>Weekdays</InputLabel>
+              <Select
+                value={options.byday ? options.byday : []}
+                multiple
+                style={styles.multiSelect}
+                onChange={(event: React.ChangeEvent<{ value: unknown }>) => {
+                  const value = event.target.value as string[];
+                  if (value) {
+                    updateRule({ byday: value.map((day) => Number(day)) });
+                  }
+                }}>
+                {menuItemsWeekDays}
+              </Select>
+            </FormControl>
+          </div>
+        }
+        {options.freq === 'MONTHLY' &&
+          <TextField
+            type="number"
+            value={options.bymonthday ? options.bymonthday[0] : undefined}
+            label="Month day"
+            style={styles.width}
+            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] });
+              }
+            }}
+          />
+        }
+        {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>
     </>
   );