skeleton of calendar column type

Author: RafaelGB

package.json

@@ -31,6 +31,7 @@
 		"@types/react-dom": "17.0.14",
 		"@types/react-table": "7.7.11",
 		"@types/react-window": "1.8.5",
+		"@types/react-calendar": "3.5.0",
 		"@types/react-beautiful-dnd": "13.1.2",
 		"@types/react-csv": "1.1.2",
 		"@types/luxon": "2.3.2",
@@ -62,6 +63,7 @@
 		"react-popper": "2.3.0",
 		"react-table": "7.7.0",
 		"react-window": "1.8.7",
+		"react-calendar": "3.7.0",
 		"regenerator-runtime": "0.13.9",
 		"luxon": "2.4.0"
 	}

src/components/Cell.tsx

@@ -8,6 +8,7 @@ import NoteInfo from "services/NoteInfo";
 import PopperSelectPortal from "components/portals/PopperSelectPortal";
 import { CellContext } from "components/contexts/CellContext";
 import { c } from "helpers/StylesHelper";
+import CalendarPortal from "./portals/CalendarPortal";
 
 /**
  * Obtain the path of the file inside cellValue
@@ -136,7 +137,13 @@ export default function DefaultCell(cellProperties: Cell) {
             />
           </CellContext.Provider>
         );
-
+      /** Calendar option */
+      case DataTypes.CALENDAR:
+        return (
+          <CellContext.Provider value={{ value, setValue }}>
+            <CalendarPortal state={(cellProperties as any).initialState} />
+          </CellContext.Provider>
+        );
       /** Default option */
       default:
         LOGGER.warn(`Unknown data type: ${dataType}`);

src/components/Columns.tsx

@@ -157,13 +157,23 @@ async function columnOptions(
     };
   }
 
+  function isCalendar(): TableColumn {
+    LOGGER.debug(`<= columnOptions`, `return calendar column`);
+    return {
+      ...tableRow,
+      dataType: DataTypes.CALENDAR,
+      options: options,
+    };
+  }
+
   // Record of options
   let inputs: Record<string, any> = {};
   inputs[DataTypes.TEXT] = isText;
   inputs[DataTypes.NUMBER] = isNumber;
   inputs[DataTypes.SELECT] = isSelect;
   inputs[DataTypes.MARKDOWN] = isMarkdown;
   inputs[DataTypes.NEW_COLUMN] = isNewColumn;
+  inputs[DataTypes.CALENDAR] = isCalendar;
   if (inputs.hasOwnProperty(column.input)) {
     return await inputs[column.input]();
   } else {

src/components/HeaderMenu.tsx

@@ -72,17 +72,22 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
 
   // Manage errors
   const [labelStateInvalid, setLabelStateInvalid] = useState(false);
+
+  /** Event driven actions */
   useEffect(() => {
+    // Throw event if created changed to expand or collapse the menu
     if (created) {
       setExpanded(true);
     }
   }, [created]);
 
   useEffect(() => {
+    // Throw event if label is changed
     setLabelState(labelState);
   }, [labelState]);
 
   useEffect(() => {
+    // Throw event if inputRef changed to focus on when it exists
     if (inputRef) {
       inputRef.focus();
       inputRef.select();

src/components/portals/CalendarPortal.tsx

@@ -0,0 +1,63 @@
+import { TableDataType } from "cdm/FolderModel";
+import { CellContext } from "components/contexts/CellContext";
+import { StyleVariables } from "helpers/Constants";
+import React, { useContext, useState } from "react";
+import Calendar from "react-calendar";
+import ReactDOM from "react-dom";
+import { usePopper } from "react-popper";
+
+type CalendarProps = {
+  intialState: TableDataType;
+};
+const CalendarPortal = (calendarProps: any) => {
+  const [calendarState, setCalendarState] = useState(new Date());
+  const [showCalendar, setShowCalendar] = useState(false);
+  // Selector reference state
+  const [calendarRef, setCalendarRef] = useState(null);
+  // Selector popper state
+  const [selectPop, setSelectPop] = useState(null);
+  const { styles, attributes } = usePopper(calendarRef, selectPop);
+  /** state of cell value */
+  const { value, setValue } = useContext(CellContext);
+  function handleCalendarChange(date: Date) {
+    setCalendarState(date);
+    setShowCalendar(false);
+  }
+  function renderCalendar() {
+    return (
+      <div
+        className="menu"
+        ref={setSelectPop}
+        {...attributes.popper}
+        style={{
+          ...styles.popper,
+          zIndex: 4,
+          minWidth: 200,
+          maxWidth: 320,
+          padding: "0.75rem",
+          background: StyleVariables.BACKGROUND_SECONDARY,
+        }}
+      >
+        <Calendar onChange={handleCalendarChange} value={calendarState} />
+      </div>
+    );
+  }
+  return (
+    <>
+      <div
+        className="data-input calendar"
+        ref={setCalendarRef}
+        onClick={() => setShowCalendar(!showCalendar)}
+        onBlur={() => setShowCalendar(false)}
+      >
+        <span>{value.value}</span>
+      </div>
+      {showCalendar &&
+        ReactDOM.createPortal(
+          renderCalendar(),
+          document.getElementById("popper-container")
+        )}
+    </>
+  );
+};
+export default CalendarPortal;

src/components/portals/PopperSelectPortal.tsx

@@ -176,9 +176,9 @@ const PopperSelectPortal = (popperProps: PopperProps) => {
       </div>
       {domReady
         ? ReactDOM.createPortal(
-          PortalSelect(),
-          document.getElementById("popper-container")
-        )
+            PortalSelect(),
+            document.getElementById("popper-container")
+          )
         : null}
     </>
   );

src/helpers/Constants.ts

@@ -22,6 +22,7 @@ export const DataTypes = Object.freeze({
   TEXT: 'text',
   SELECT: 'select',
   MARKDOWN: 'markdown',
+  CALENDAR: 'calendar',
   NEW_COLUMN: 'new_column'
 });
 
@@ -65,7 +66,7 @@ export const MetadataDatabaseColumns = Object.freeze({
   },
   CREATED: {
     key: MetadataColumns.CREATED,
-    input: DataTypes.TEXT,
+    input: DataTypes.CALENDAR,
     label: MetadataLabels.CREATED,
     accessor: MetadataColumns.CREATED,
     isMetadata: true,
@@ -75,7 +76,7 @@ export const MetadataDatabaseColumns = Object.freeze({
   },
   MODIFIED: {
     key: MetadataColumns.MODIFIED,
-    input: DataTypes.TEXT,
+    input: DataTypes.CALENDAR,
     label: MetadataLabels.MODIFIED,
     accessor: MetadataColumns.MODIFIED,
     isMetadata: true,

styles.css

@@ -1,5 +1,4 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
-
 .database-plugin__html {
   box-sizing: border-box;
 }
@@ -332,4 +331,153 @@
 */
 .configuration-section-container-developer {
   background-color: var(--background-modifier-error)
+}
+
+/*
+*  React calendar styles
+*/
+.react-calendar {
+  width: 350px;
+  max-width: 100%;
+  background: white;
+  border: 1px solid #a0a096;
+  font-family: Arial, Helvetica, sans-serif;
+  line-height: 1.125em;
+}
+
+.react-calendar--doubleView {
+  width: 700px;
+}
+
+.react-calendar--doubleView .react-calendar__viewContainer {
+  display: flex;
+  margin: -0.5em;
+}
+
+.react-calendar--doubleView .react-calendar__viewContainer>* {
+  width: 50%;
+  margin: 0.5em;
+}
+
+.react-calendar,
+.react-calendar *,
+.react-calendar *:before,
+.react-calendar *:after {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.react-calendar button {
+  margin: 0;
+  border: 0;
+  outline: none;
+}
+
+.react-calendar button:enabled:hover {
+  cursor: pointer;
+}
+
+.react-calendar__navigation {
+  height: 44px;
+  margin-bottom: 1em;
+}
+
+.react-calendar__navigation button {
+  min-width: 44px;
+  background: none;
+}
+
+.react-calendar__navigation button:enabled:hover,
+.react-calendar__navigation button:enabled:focus {
+  background-color: #e6e6e6;
+}
+
+.react-calendar__navigation button[disabled] {
+  background-color: #f0f0f0;
+}
+
+.react-calendar__month-view__weekdays {
+  text-align: center;
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 0.75em;
+}
+
+.react-calendar__month-view__weekdays__weekday {
+  padding: 0.5em;
+}
+
+.react-calendar__month-view__weekNumbers {
+  font-weight: bold;
+}
+
+.react-calendar__month-view__weekNumbers .react-calendar__tile {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75em;
+  padding: calc(0.75em / 0.75) calc(0.5em / 0.75);
+}
+
+.react-calendar__month-view__days__day--weekend {
+  color: #d10000;
+}
+
+.react-calendar__month-view__days__day--neighboringMonth {
+  color: #757575;
+}
+
+.react-calendar__year-view .react-calendar__tile,
+.react-calendar__decade-view .react-calendar__tile,
+.react-calendar__century-view .react-calendar__tile {
+  padding: 2em 0.5em;
+}
+
+.react-calendar__tile {
+  max-width: 100%;
+  text-align: center;
+  padding: 0.75em 0.5em;
+  background: none;
+}
+
+.react-calendar__tile:disabled {
+  background-color: #f0f0f0;
+}
+
+.react-calendar__tile:enabled:hover,
+.react-calendar__tile:enabled:focus {
+  background-color: #e6e6e6;
+}
+
+.react-calendar__tile--now {
+  background: #ffff76;
+}
+
+.react-calendar__tile--now:enabled:hover,
+.react-calendar__tile--now:enabled:focus {
+  background: #ffffa9;
+}
+
+.react-calendar__tile--hasActive {
+  background: #76baff;
+}
+
+.react-calendar__tile--hasActive:enabled:hover,
+.react-calendar__tile--hasActive:enabled:focus {
+  background: #a9d4ff;
+}
+
+.react-calendar__tile--active {
+  background: #006edc;
+  color: white;
+}
+
+.react-calendar__tile--active:enabled:hover,
+.react-calendar__tile--active:enabled:focus {
+  background: #1087ff;
+}
+
+.react-calendar--selectRange .react-calendar__tile--hover {
+  background-color: #e6e6e6;
 }