Merge branch '564-bug-date-picker-removal'

Author: RafaelGB

src/components/cellTypes/CalendarCell.tsx

@@ -59,6 +59,11 @@ const CalendarCell = (calendarProps: CellComponentProps) => {
       <Portal container={activeDocument.body}>{containerProps.children}</Portal>
     );
   };
+
+  const onClickOutside = () => {
+    setShowDatePicker(false);
+  };
+
   return showDatePicker ? (
     <DatePicker
       dateFormat="yyyy-MM-dd"
@@ -69,10 +74,10 @@ const CalendarCell = (calendarProps: CellComponentProps) => {
       }
       onChange={handleCalendarChange}
       popperContainer={CalendarContainer}
-      onBlur={() => setShowDatePicker(false)}
+      onClickOutside={onClickOutside}
       autoFocus
       isClearable
-      clearButtonTitle="Clear"
+      ariaLabelClose="Clear"
       placeholderText="Pick a date..."
     />
   ) : (

src/components/cellTypes/CalendarTimeCell.tsx

@@ -6,6 +6,7 @@ import { CellComponentProps } from "cdm/ComponentsModel";
 import { TableColumn } from "cdm/FolderModel";
 import { ParseService } from "services/ParseService";
 import { InputType } from "helpers/Constants";
+import { c } from "helpers/StylesHelper";
 
 const CalendarTimeCell = (calendarTimeProps: CellComponentProps) => {
   const { defaultCell } = calendarTimeProps;
@@ -35,7 +36,7 @@ const CalendarTimeCell = (calendarTimeProps: CellComponentProps) => {
     setShowDatePicker(true);
   }
 
-  function handleCalendarChange(date: Date) {
+  async function handleCalendarChange(date: Date) {
     const changed = date !== null ? DateTime.fromJSDate(date) : null;
 
     const newCell = ParseService.parseRowToLiteral(
@@ -44,7 +45,7 @@ const CalendarTimeCell = (calendarTimeProps: CellComponentProps) => {
       changed
     );
 
-    dataActions.updateCell(
+    await dataActions.updateCell(
       row.index,
       tableColumn,
       newCell,
@@ -62,36 +63,36 @@ const CalendarTimeCell = (calendarTimeProps: CellComponentProps) => {
 
   return showDatePicker &&
     (tableColumn.isMetadata === undefined || !tableColumn.isMetadata) ? (
-    <div className="calendar-time">
-      <DatePicker
-        dateFormat={configInfo.getLocalSettings().datetime_format}
-        selected={
-          DateTime.isDateTime(calendarCell)
-            ? (calendarCell as unknown as DateTime).toJSDate()
-            : null
-        }
-        onChange={handleCalendarChange}
-        popperContainer={CalendarContainer}
-        onBlur={() => setShowDatePicker(false)}
-        timeFormat="HH:mm"
-        timeCaption="time"
-        showTimeSelect
-        autoFocus
-        isClearable
-        clearButtonTitle="Clear"
-        placeholderText="Pick a moment..."
-      />
-    </div>
+    <DatePicker
+      dateFormat={configInfo.getLocalSettings().datetime_format}
+      selected={
+        DateTime.isDateTime(calendarCell)
+          ? (calendarCell as unknown as DateTime).toJSDate()
+          : null
+      }
+      onChange={handleCalendarChange}
+      popperContainer={CalendarContainer}
+      onClickOutside={() => setShowDatePicker(false)}
+      timeFormat="HH:mm"
+      timeCaption="time"
+      showTimeSelect
+      autoFocus
+      isClearable
+      ariaLabelClose="Clear"
+      placeholderText="Pick a moment..."
+    />
   ) : (
-    <div onClick={handleSpanOnClick}>
-      <span className="calendar-time" style={{ width: column.getSize() }}>
-        {DateTime.isDateTime(calendarCell)
-          ? (calendarCell as DateTime).toFormat(
-              configInfo.getLocalSettings().datetime_format
-            )
-          : null}
-      </span>
-    </div>
+    <span
+      className={`${c("calendar")}`}
+      style={{ width: column.getSize() }}
+      onClick={handleSpanOnClick}
+    >
+      {DateTime.isDateTime(calendarCell)
+        ? (calendarCell as DateTime).toFormat(
+            configInfo.getLocalSettings().datetime_format
+          )
+        : null}
+    </span>
   );
 };
 

src/parsers/RowDatabaseFieldsToFile.ts

@@ -33,7 +33,7 @@ export function parseValuetoSanitizeYamlValue(value: string, localSettings: Loca
 
 function stringifyDbYaml(literal: Literal, level: number, localSettings: LocalSettings, key?: string): string[] {
     const literalBlock: string[] = [];
-    literal = DataviewService.parseDataArray(literal);
+    literal = ParseService.parseDataArray(literal);
     // Manage Arrays
     if (DataviewService.getDataviewAPI().value.isArray(literal)) {
         literalBlock.push(`${" ".repeat(level)}${key}:`);

src/services/DataviewService.ts

@@ -26,17 +26,6 @@ class DataviewProxy {
         return this.getDataviewAPI().value.isTruthy(literal?.toString());
     }
 
-    /**
-     * Check if literal is Proxy DataArray, if so, parse it. If not, return same literal
-     * @param literal 
-     * @returns 
-     */
-    parseDataArray(literal: Literal): Literal {
-        if ((literal as any).values !== undefined && (literal as any).settings !== undefined) {
-            literal = (literal as any).values
-        }
-        return literal;
-    }
     /**
      * Singleton instance
      * @returns {VaultManager}

src/services/ParseService.ts

@@ -78,9 +78,15 @@ class Parse {
      * @returns 
      */
     public parseDataArray(literal: Literal): Literal {
-        if ((literal as any).values !== undefined && (literal as any).settings !== undefined) {
+        if (literal === null || literal === undefined) {
+            return literal;
+        }
+
+        if (typeof literal === 'object' &&
+            (literal as any).values !== undefined && (literal as any).settings !== undefined) {
             literal = (literal as any).values
         }
+
         return literal;
     }
 

styles.css

@@ -1386,8 +1386,8 @@ div.database-plugin__checkbox {
 }
 
 .react-datepicker__input-container {
-  position: relative;
-  display: inline-block;
+  display: flex;
+  justify-content: space-around;
   width: 100%;
 }
 
@@ -1520,17 +1520,13 @@ div.database-plugin__checkbox {
   border: 0;
   box-shadow: none;
   outline: 0;
-  padding: 0 6px 0 0;
-  position: absolute;
-  top: 0;
+  padding: 6px;
   right: 0;
-  display: table-cell;
-  vertical-align: middle;
+  align-self: center;
 }
 
 .react-datepicker__close-icon::after {
   cursor: pointer;
-  background-color: var(--text-accent);
   color: var(--text-primary);
   border-radius: 50%;
   text-align: center;