Merge branch 'input-styling'

Author: RafaelGB

src/components/HeaderMenu.tsx

@@ -13,6 +13,7 @@ import { HeaderMenuProps } from "cdm/HeaderModel";
 import Box from "@mui/material/Box";
 import ClickAwayListener from "@mui/material/ClickAwayListener";
 import { Platform } from "obsidian";
+import { dynamic_t, t } from "lang/helpers";
 
 const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
   const { table, column } = headerMenuProps.headerProps;
@@ -156,7 +157,7 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
                       color: StyleVariables.TEXT_FAINT,
                     }}
                   >
-                    Property Type
+                    {t("header_menu_property_type")}
                   </span>
                 </div>
                 {/** Type of column section */}
@@ -179,7 +180,7 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
                       {propertyIcon}
                     </span>
                     <span style={{ textTransform: "capitalize" }}>
-                      {getLabelHeader(input)}
+                      {dynamic_t(input)}
                     </span>
                   </div>
                   <Popper
@@ -246,7 +247,7 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
                   <span className="svg-icon svg-text icon-margin">
                     <AdjustmentsIcon />
                   </span>
-                  <span>Settings</span>
+                  <span>{t("header_menu_settings")}</span>
                 </div>
               </div>
             </div>

src/components/cellTypes/CalendarCell.tsx

@@ -14,6 +14,7 @@ import { ParseService } from "services/ParseService";
 import { DEFAULT_SETTINGS, InputType } from "helpers/Constants";
 import { Platform } from "obsidian";
 import { parseLuxonDateToString } from "helpers/LuxonHelper";
+import { OBSIDIAN_LOCALE } from "lang/helpers";
 
 const CalendarCell = (calendarProps: CellComponentProps) => {
   const { defaultCell } = calendarProps;
@@ -95,6 +96,8 @@ const CalendarCell = (calendarProps: CellComponentProps) => {
       isClearable
       ariaLabelClose="Clear"
       placeholderText="Pick a date..."
+      locale={OBSIDIAN_LOCALE}
+      calendarStartDay={1}
     />
   ) : (
     <span

src/components/cellTypes/CalendarTimeCell.tsx

@@ -14,6 +14,7 @@ import { DEFAULT_SETTINGS, InputType } from "helpers/Constants";
 import { c } from "helpers/StylesHelper";
 import { Platform } from "obsidian";
 import { parseLuxonDatetimeToString } from "helpers/LuxonHelper";
+import { OBSIDIAN_LOCALE } from "lang/helpers";
 
 const CalendarTimeCell = (calendarTimeProps: CellComponentProps) => {
   const { defaultCell } = calendarTimeProps;
@@ -96,6 +97,8 @@ const CalendarTimeCell = (calendarTimeProps: CellComponentProps) => {
       isClearable
       ariaLabelClose="Clear"
       placeholderText="Pick a moment..."
+      locale={OBSIDIAN_LOCALE}
+      calendarStartDay={1}
     />
   ) : (
     <span

src/components/cellTypes/EditorCell.tsx

@@ -4,6 +4,7 @@ import React, { ChangeEventHandler, useCallback, useRef } from "react";
 import { useState } from "react";
 import { MarkdownEditor } from "components/cellTypes/Editor/MarkdownEditor";
 import { c } from "helpers/StylesHelper";
+import useAutosizeTextArea from "components/styles/hooks/useAutosizeTextArea";
 
 const EditorCell = (props: EditorCellComponentProps) => {
   const { defaultCell, persistChange, textCell } = props;
@@ -35,7 +36,6 @@ const EditorCell = (props: EditorCellComponentProps) => {
       editableMdRef.current.blur();
     }
   };
-
   /**
    * Close editor undoing any changes realised
    */
@@ -50,6 +50,7 @@ const EditorCell = (props: EditorCellComponentProps) => {
     persistChange(editorValue?.toString());
   };
 
+  useAutosizeTextArea(editableMdRef.current, editorValue);
   return (
     <>
       <MarkdownEditor

src/components/contextMenu/CellContextMenu.tsx

@@ -36,7 +36,7 @@ export default function CellContextMenu(
     );
   };
 
-  const index = Number(row.index) + 1;
+  const index = Number(table.getRowModel().flatRows.indexOf(row)) + 1;
 
   return (
     <>

src/components/styles/hooks/useAutosizeTextArea.tsx

@@ -0,0 +1,25 @@
+import { useEffect } from "react";
+
+/**
+ * Updates the height of a <textarea> when the value changes.
+ * @param textAreaRef
+ * @param value
+ */
+const useAutosizeTextArea = (
+  textAreaRef: HTMLTextAreaElement | null,
+  value: string
+) => {
+  useEffect(() => {
+    if (textAreaRef) {
+      // We need to reset the height momentarily to get the correct scrollHeight for the textarea
+      textAreaRef.style.height = "0px";
+      const scrollHeight = textAreaRef.scrollHeight;
+
+      // We then set the height directly, outside of the render loop
+      // Trying to set this with state or a ref will product an incorrect value.
+      textAreaRef.style.height = scrollHeight + "px";
+    }
+  }, [textAreaRef, value]);
+};
+
+export default useAutosizeTextArea;

src/lang/helpers.ts

@@ -22,7 +22,11 @@ import tr from 'lang/locale/tr';
 import uk from 'lang/locale/tr';
 import zhCN from 'lang/locale/zh-cn';
 import zhTW from 'lang/locale/zh-tw';
+
+import * as Locales from 'date-fns/locale';
+
 import { LOGGER } from 'services/Logger';
+import { registerLocale } from 'react-datepicker';
 
 const localeMap: { [k: string]: Partial<typeof en> } = {
   ar,
@@ -51,8 +55,8 @@ const localeMap: { [k: string]: Partial<typeof en> } = {
   zh: zhCN,
 };
 
-const lang = localStorage.getItem('language');
-const locale = localeMap[lang || 'en'];
+export const OBSIDIAN_LOCALE = localStorage.getItem('language');
+const locale = localeMap[OBSIDIAN_LOCALE || 'en'];
 
 /**
  * Translate a string to the current language or English if not found.
@@ -64,7 +68,7 @@ const locale = localeMap[lang || 'en'];
  */
 export function t(str: keyof typeof en, ...args: string[]): string {
   if (!locale) {
-    LOGGER.error('Error: database locale not found', lang);
+    LOGGER.error('Error: database locale not found', OBSIDIAN_LOCALE);
   }
   const translated = (locale && locale[str]) || en[str];
 
@@ -76,3 +80,25 @@ export function t(str: keyof typeof en, ...args: string[]): string {
   // Replace any arguments in the string
   return args.reduce((acc, arg, i) => acc.replace(`{${i}}`, arg), translated);
 }
+
+/**
+ * If you trust the string to be in the current language (e.g. variable names) then use this.
+ * @param str 
+ * @param args 
+ * @returns 
+ */
+export function dynamic_t(str: string, ...args: string[]): string {
+  return t(str as keyof typeof en, ...args);
+}
+
+/**
+ * Looks up a date-fns locale from the Expo localization object.  This falls back to `en-US`
+ * @param localization Expo Localization object containing the locale and region.
+ * @returns date-fns locale.
+ */
+export function registerDateFnLocale() {
+  const dynamicLocale =
+    Locales[OBSIDIAN_LOCALE as keyof typeof Locales] || Locales.enUS;
+
+  registerLocale(OBSIDIAN_LOCALE, dynamicLocale);
+}

src/lang/locale/en.ts

@@ -60,6 +60,8 @@ export default {
   "header_menu_hide_column": "Hide",
   "header_menu_insert_column_left": "Insert left",
   "header_menu_insert_column_right": "Insert right",
+  "header_menu_settings": "Settings",
+  "header_menu_property_type": "Property Type",
   /** INPUT LABELS */
   "number": "Number",
   "text": "Text",