Merge branch '561-date-picker-on-mobile'

Author: RafaelGB

docs/docs/changelog.md

@@ -1,4 +1,11 @@
-
+## 2.8.2
+### Visual
+- UX improvements for date picker and time picker
+- Checkbox design improvements [randomsnowflake](https://github.com/randomsnowflake)
+### No longer broken
+- Tags are now properly saved when it's a number with decimals with zero at the end (e.g. 1.0, 1.00, 1.000, etc.)
+- Datepicker clear button now works properly [ISSUE#564](https://github.com/RafaelGB/obsidian-db-folder/issues/564)
+- Vertical scroll on mobile improved [ISSUE#488](https://github.com/RafaelGB/obsidian-db-folder/issues/488)
 ## 2.8.1
 ### Shiny new things
 - New rollup functions: Count unique values,Truthy count, Falsy count, Percent empty, Percent filled, Task TODO, Task completed

package.json

@@ -50,21 +50,21 @@
 	"dependencies": {
 		"@emotion/styled": "11.10.5",
 		"@mui/icons-material": "5.10.9",
-		"@mui/material": "5.10.11",
+		"@mui/material": "5.10.13",
 		"@popperjs/core": "2.11.6",
 		"@tanstack/match-sorter-utils": "8.5.14",
-		"@tanstack/react-table": "8.5.21",
+		"@tanstack/react-table": "8.5.22",
 		"eventemitter3": "4.0.7",
 		"fuse.js": "6.6.2",
-		"luxon": "3.0.4",
+		"luxon": "3.1.0",
 		"monkey-around": "2.3.0",
-		"obsidian-dataview": "0.5.47",
+		"obsidian-dataview": "0.5.51",
 		"react": "18.2.0",
 		"react-csv": "2.2.2",
 		"react-datepicker": "4.8.0",
 		"react-dom": "18.2.0",
 		"react-popper": "2.3.0",
-		"react-select": "5.5.8",
+		"react-select": "5.6.0",
 		"react-window": "1.8.8",
 		"zustand": "4.1.4"
 	}

src/components/cellTypes/CalendarCell.tsx

@@ -1,4 +1,9 @@
-import React, { useState } from "react";
+import React, {
+  DetailedHTMLProps,
+  forwardRef,
+  InputHTMLAttributes,
+  useState,
+} from "react";
 import { DateTime } from "luxon";
 import DatePicker from "react-datepicker";
 import { Portal } from "@mui/material";
@@ -7,6 +12,7 @@ import { CellComponentProps } from "cdm/ComponentsModel";
 import { TableColumn } from "cdm/FolderModel";
 import { ParseService } from "services/ParseService";
 import { InputType } from "helpers/Constants";
+import { Platform } from "obsidian";
 
 const CalendarCell = (calendarProps: CellComponentProps) => {
   const { defaultCell } = calendarProps;
@@ -51,7 +57,6 @@ const CalendarCell = (calendarProps: CellComponentProps) => {
       columnsInfo.getAllColumns(),
       configInfo.getLocalSettings()
     );
-    setShowDatePicker(false);
   }
 
   const CalendarContainer = (containerProps: any) => {
@@ -60,21 +65,31 @@ const CalendarCell = (calendarProps: CellComponentProps) => {
     );
   };
 
-  const onClickOutside = () => {
-    setShowDatePicker(false);
+  const closeEditCalendarCell = () => {
+    // We need a delay to allow the click event of clearing the date to propagate
+    setTimeout(() => {
+      setShowDatePicker(false);
+    }, 100);
   };
 
+  const ReactDatePickerInput = forwardRef<
+    HTMLInputElement,
+    DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>
+  >((props, ref) => <input ref={ref} {...props} readOnly />);
+
   return showDatePicker ? (
     <DatePicker
-      dateFormat="yyyy-MM-dd"
+      dateFormat={configInfo.getLocalSettings().date_format}
       selected={
         DateTime.isDateTime(calendarCell)
           ? (calendarCell as unknown as DateTime).toJSDate()
           : null
       }
       onChange={handleCalendarChange}
       popperContainer={CalendarContainer}
-      onClickOutside={onClickOutside}
+      onClickOutside={closeEditCalendarCell}
+      onCalendarClose={closeEditCalendarCell}
+      customInput={Platform.isMobile ? <ReactDatePickerInput /> : null}
       autoFocus
       isClearable
       ariaLabelClose="Clear"

src/components/cellTypes/CalendarTimeCell.tsx

@@ -1,4 +1,9 @@
-import React, { useState } from "react";
+import React, {
+  DetailedHTMLProps,
+  forwardRef,
+  InputHTMLAttributes,
+  useState,
+} from "react";
 import { DateTime } from "luxon";
 import DatePicker from "react-datepicker";
 import { Portal } from "@mui/material";
@@ -7,6 +12,7 @@ import { TableColumn } from "cdm/FolderModel";
 import { ParseService } from "services/ParseService";
 import { InputType } from "helpers/Constants";
 import { c } from "helpers/StylesHelper";
+import { Platform } from "obsidian";
 
 const CalendarTimeCell = (calendarTimeProps: CellComponentProps) => {
   const { defaultCell } = calendarTimeProps;
@@ -52,7 +58,6 @@ const CalendarTimeCell = (calendarTimeProps: CellComponentProps) => {
       columnsInfo.getAllColumns(),
       configInfo.getLocalSettings()
     );
-    setShowDatePicker(false);
   }
 
   const CalendarContainer = (containerProps: any) => {
@@ -61,6 +66,18 @@ const CalendarTimeCell = (calendarTimeProps: CellComponentProps) => {
     );
   };
 
+  const closeEditCalendarTimeCell = () => {
+    // We need a delay to allow the click event of clearing the date to propagate
+    setTimeout(() => {
+      setShowDatePicker(false);
+    }, 100);
+  };
+
+  const ReactDatePickerInput = forwardRef<
+    HTMLInputElement,
+    DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>
+  >((props, ref) => <input ref={ref} {...props} readOnly />);
+
   return showDatePicker &&
     (tableColumn.isMetadata === undefined || !tableColumn.isMetadata) ? (
     <DatePicker
@@ -72,7 +89,9 @@ const CalendarTimeCell = (calendarTimeProps: CellComponentProps) => {
       }
       onChange={handleCalendarChange}
       popperContainer={CalendarContainer}
-      onClickOutside={() => setShowDatePicker(false)}
+      onClickOutside={closeEditCalendarTimeCell}
+      onCalendarClose={closeEditCalendarTimeCell}
+      customInput={Platform.isMobile ? <ReactDatePickerInput /> : null}
       timeFormat="HH:mm"
       timeCaption="time"
       showTimeSelect

src/components/cellTypes/TagsCell.tsx

@@ -82,7 +82,7 @@ const TagsCell = (tagsProps: CellComponentProps) => {
     newValue: OnChangeValue<SelectValue, true>,
     actionMeta: ActionMeta<RowSelectOption>
   ) => {
-    const arrayTags = newValue.map((tag) => tag.value);
+    const arrayTags = newValue.map((tag) => `${tag.value}`);
     const newCell = ParseService.parseRowToLiteral(
       tagsRow,
       tableColumn,
@@ -153,7 +153,7 @@ const TagsCell = (tagsProps: CellComponentProps) => {
                 <div key={`key-${tag}`}>
                   <Relationship
                     key={`tags-${row.index}-${tableColumn.key}-${tag}`}
-                    value={tag}
+                    value={tag.toString()}
                     backgroundColor={getColor(tag)}
                   />
                 </div>

src/parsers/RowDatabaseFieldsToFile.ts

@@ -58,7 +58,7 @@ function stringifyDbYaml(literal: Literal, level: number, localSettings: LocalSe
     else if (key) {
         literalBlock.push(`${" ".repeat(level)}${key}: ${ParseService.parseLiteral(literal, InputType.MARKDOWN, localSettings)}`);
     } else {
-        literalBlock.push(`${" ".repeat(level)}- ${ParseService.parseLiteral(literal, InputType.MARKDOWN, localSettings)}`);
+        literalBlock.push(`${" ".repeat(level)}- ${ParseService.parseLiteral(literal, InputType.MARKDOWN, { ...localSettings, frontmatter_quote_wrap: true })}`);
     }
     return literalBlock;
 }

styles.css

@@ -1,5 +1,14 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
-
+/*****************
+* Plugin variables
+******************/
+body {
+  --react-datepicker-navigation-height: 24px;
+  --react-datepicker-navigation-width: 24px;
+}
+/*****************
+*      Base
+******************/
 .database-plugin__html {
   box-sizing: border-box;
 }
@@ -145,7 +154,7 @@ div.database-plugin__checkbox {
   color: currentColor;
   width: 1.15em;
   height: 1.15em;
-  border: 0.15em solid currentColor;
+  border: 0.05em solid currentColor;
   border-radius: 0.15em;
   transform: translateY(-0.075em);
 
@@ -179,6 +188,10 @@ div.database-plugin__checkbox {
   outline-offset: max(2px, 0.15em);
 }
 
+.database-plugin__checkbox input[type="checkbox"]:checked:after {
+  background-color: var(--form-background);
+}
+
 .database-plugin__md_cell {
   vertical-align: middle;
 }
@@ -671,9 +684,9 @@ div.database-plugin__checkbox {
   color: var(--text-on-accent);
 }
 
-/*
+/*************************
 *  React-datepicker styles
-*/
+**************************/
 .react-datepicker__year-read-view--down-arrow,
 .react-datepicker__month-read-view--down-arrow,
 .react-datepicker__month-year-read-view--down-arrow,
@@ -920,8 +933,8 @@ div.database-plugin__checkbox {
   padding: 0;
   border: none;
   z-index: 4;
-  height: 32px;
-  width: 32px;
+  height: var(--react-datepicker-navigation-height);
+  width: var(--react-datepicker-navigation-width);
   text-indent: -999em;
   overflow: hidden;
 }
@@ -1544,37 +1557,3 @@ div.database-plugin__checkbox {
   padding: 5px 0;
   clear: left;
 }
-
-.react-datepicker__portal {
-  position: fixed;
-  width: 100vw;
-  height: 100vh;
-  background-color: var(--background-primary);
-  left: 0;
-  top: 0;
-  justify-content: center;
-  align-items: center;
-  display: flex;
-  z-index: 4;
-}
-
-.react-datepicker__portal .react-datepicker__day-name,
-.react-datepicker__portal .react-datepicker__day,
-.react-datepicker__portal .react-datepicker__time-name {
-  width: 3rem;
-  line-height: 3rem;
-}
-
-@media (max-width: 400px), (max-height: 550px) {
-  .react-datepicker__portal .react-datepicker__day-name,
-  .react-datepicker__portal .react-datepicker__day,
-  .react-datepicker__portal .react-datepicker__time-name {
-    width: 2rem;
-    line-height: 2rem;
-  }
-}
-
-.react-datepicker__portal .react-datepicker__current-month,
-.react-datepicker__portal .react-datepicker-time__header {
-  font-size: 1.44rem;
-}