RRule: layout and style changes

src/widgets/RRule.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
-import { TextField, Select, MenuItem, FormControlLabel, InputLabel, FormControl } from '@material-ui/core';
+import { TextField, Select, MenuItem, InputLabel, FormControl } from '@material-ui/core';
 import DateTimePicker from '../widgets/DateTimePicker';
 import * as ICAL from 'ical.js';
 
 export type RRuleOptions = ICAL.RecurData;
 
 enum Ends {
-  Never,
+  Forever,
-  Date,
+  Until,
   After,
 }
 
@@ -46,9 +46,22 @@ const disableComplex = true;
 const weekdays: WeekDay[] = Array.from(Array(7)).map((_, i) => i + 1);
 const months: Months[] = Array.from(Array(12)).map((_, i) => i + 1);
 
-const menuItemsEnds = [Ends.Never, Ends.Date, Ends.After].map((key) => {
+const menuItemsEnds = [Ends.Forever, Ends.Until, Ends.After].map((key) => {
+  let displayhName;
+  switch (key) {
+    case Ends.Forever:
+      displayhName = 'Forever';
+      break;
+    case Ends.Until:
+      displayhName = 'Until';
+      break;
+    case Ends.After:
+      displayhName = 'For';
+      break;
+  }
+
   return (
-    <MenuItem key={key} value={key}>{Ends[key]}</MenuItem>
+    <MenuItem key={key} value={key}>{displayhName}</MenuItem>
   );
 });
 const menuItemsFrequency = ['YEARLY', 'MONTHLY', 'WEEKLY', 'DAILY'].map((value) => {
@@ -93,25 +106,32 @@ export default function RRule(props: PropsType) {
   }
   function getEnds(): Ends {
     if (options.until && !options.count) {
-      return Ends.Date;
+      return Ends.Until;
     } else if (!options.until && options.count) {
       return Ends.After;
     } else {
-      return Ends.Never;
+      return Ends.Forever;
     }
   }
   return (
-    <>
+    <div style={{ paddingLeft: '2em' }}>
-      <div style={{ display: 'flex' }}>
+      <div style={{ display: 'flex', alignItems: 'center' }}>
-        <FormControlLabel
+        <span>Repeat</span>
-          style={{ marginRight: 0 }}
+        <Select
           value={options.freq}
-          label="Repeat every"
+          style={{ marginLeft: '0.5em' }}
-          labelPlacement="start"
+          onChange={(event: React.FormEvent<{ value: unknown }>) => {
-          control={<TextField
+            const freq = (event.target as HTMLSelectElement).value as ICAL.FrequencyValues;
-            style={{ marginLeft: '0.5em', width: '4em' }}
+            updateRule({ freq: freq });
+          }}
+        >
+          {menuItemsFrequency}
+        </Select>
+        <span style={{ marginLeft: '0.5em' }}>every</span>
+        <TextField
+          style={{ marginLeft: '0.5em', width: '2.2em' }}
           type="number"
-            inputProps={{ min: 1, max: 1000 }}
+          inputProps={{ min: 1, max: 99 }}
           value={options.interval ?? 1}
           onChange={(event: React.FormEvent<{ value: unknown }>) => {
             event.preventDefault();
@@ -122,19 +142,25 @@ export default function RRule(props: PropsType) {
               updateRule({ interval: inputNode.valueAsNumber });
             }
           }}
-          />}
         />
+      </div>
+      {(options.freq && options.freq !== 'DAILY') &&
+        <div>
+          <FormControl>
+            <InputLabel>Weekdays</InputLabel>
             <Select
-          value={options.freq}
+              value={options.byday ? options.byday : []}
-          style={{ marginLeft: '0.5em' }}
+              multiple
-          onChange={(event: React.FormEvent<{ value: unknown }>) => {
+              style={styles.multiSelect}
-            const freq = (event.target as HTMLSelectElement).value as ICAL.FrequencyValues;
+              onChange={(event: React.ChangeEvent<{ value: unknown }>) => {
-            updateRule({ freq: freq });
+                const value = event.target.value as string[];
-          }}
+                updateRule({ byday: value });
-        >
+              }}>
-          {menuItemsFrequency}
+              {menuItemsWeekDays}
             </Select>
+          </FormControl>
         </div>
+      }
       {!disableComplex && (
         <div style={{ display: 'flex' }}>
           {(options.freq === 'MONTHLY') &&
@@ -165,15 +191,53 @@ export default function RRule(props: PropsType) {
           }
         </div>
       )}
+
+      <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>Ends</InputLabel>
+              <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[];
+                  updateRule({ bymonth: value.map((month) => Number(month)) });
+                }}>
+                {menuItemMonths}
+              </Select>
+            </FormControl>
+          </div>
+        }
+      </div>
+      <div style={{ display: 'inline-flex', alignItems: 'center' }}>
         <Select
           value={getEnds()}
-          style={styles.width}
+          style={{ marginRight: '0.5em' }}
           onChange={(event: React.FormEvent<{ value: unknown }>) => {
             const value = Number((event.target as HTMLSelectElement).value);
             let updateOptions;
-            if (value === Ends.Date) {
+            if (value === Ends.Until) {
               updateOptions = { count: undefined, until: ICAL.Time.now() };
             } else if (value === Ends.After) {
               updateOptions = { until: undefined, count: 1 };
@@ -184,7 +248,6 @@ export default function RRule(props: PropsType) {
           }}>
           {menuItemsEnds}
         </Select>
-      </FormControl>
         {options.until &&
           <DateTimePicker
             dateOnly
@@ -197,11 +260,11 @@ export default function RRule(props: PropsType) {
           />
         }
         {options.count &&
+          <>
             <TextField
               type="number"
               value={options.count}
-          label="Count"
+              style={{ width: '4em' }}
-          style={{ width: 60 }}
               inputProps={{ min: 1, step: 1 }}
               onChange={(event: React.FormEvent<{ value: unknown }>) => {
                 event.preventDefault();
@@ -213,62 +276,11 @@ export default function RRule(props: PropsType) {
                 }
               }}
             />
+            <span style={{ marginLeft: '0.5em' }}>events</span>
+          </>
         }
-      <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[];
-                  updateRule({ byday: value });
-                }}>
-                {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[];
-                  updateRule({ bymonth: value.map((month) => Number(month)) });
-                }}>
-                {menuItemMonths}
-              </Select>
-            </FormControl>
       </div>
-        }
+
     </div>
-    </>
   );
 }