Enhancement: Support for numbers (int) in Snippets

Fixes #973

Author: estruyf

src/dashboardWebView/components/Common/NumberField.tsx

@@ -0,0 +1,68 @@
+import { XCircleIcon } from '@heroicons/react/24/solid';
+import * as React from 'react';
+
+export interface INumberFieldProps {
+  name: string;
+  value?: string;
+  placeholder?: string;
+  description?: string;
+  icon?: JSX.Element;
+  disabled?: boolean;
+  autoFocus?: boolean;
+  onChange?: (value: string) => void;
+  onReset?: () => void;
+}
+
+export const NumberField: React.FunctionComponent<INumberFieldProps> = ({
+  name,
+  value,
+  placeholder,
+  description,
+  icon,
+  autoFocus,
+  disabled,
+  onChange,
+  onReset
+}: React.PropsWithChildren<INumberFieldProps>) => {
+  return (
+    <>
+      <div className="relative flex justify-center">
+        {
+          icon && (
+            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+              {icon}
+            </div>
+          )
+        }
+
+        <input
+          type="number"
+          name={name}
+          className={`block w-full py-2 ${icon ? "pl-10" : "pl-2"} pr-2 sm:text-sm appearance-none disabled:opacity-50 rounded bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] placeholder-[var(--vscode-input-placeholderForeground)] border-[var(--frontmatter-border)] focus:border-[var(--vscode-focusBorder)] focus:outline-0`}
+          style={{
+            boxShadow: "none"
+          }}
+          placeholder={placeholder || ""}
+          value={value}
+          autoFocus={!!autoFocus}
+          onChange={(e) => onChange && onChange(e.target.value)}
+          disabled={!!disabled}
+        />
+
+        {(value && onReset) && (
+          <button onClick={onReset} className="absolute inset-y-0 right-0 pr-3 flex items-center text-[var(--vscode-input-foreground)] hover:text-[var(--vscode-textLink-activeForeground)]">
+            <XCircleIcon className={`h-5 w-5`} aria-hidden="true" />
+          </button>
+        )}
+      </div>
+
+      {
+        description && (
+          <p className="text-xs text-[var(--vscode--settings-headerForeground)] opacity-75 mt-2 mx-2">
+            {description}
+          </p>
+        )
+      }
+    </>
+  );
+};

src/dashboardWebView/components/SnippetsView/SnippetInputField.tsx

@@ -3,6 +3,7 @@ import { ChevronDownIcon } from '@heroicons/react/24/outline';
 import { Choice, SnippetField, SnippetInfoField } from '../../../models';
 import { useEffect } from 'react';
 import { TextField } from '../Common/TextField';
+import { NumberField } from '../Common/NumberField';
 
 export interface ISnippetInputFieldProps {
   field: SnippetField;
@@ -78,6 +79,17 @@ export const SnippetInputField: React.FunctionComponent<ISnippetInputFieldProps>
     );
   }
 
+  if (field.type === 'number') {
+    return (
+      <NumberField
+        name={field.name}
+        value={field.value as string || ''}
+        description={field.description}
+        onChange={(e) => onValueChange(field, e)}
+      />
+    );
+  }
+
   return (
     <TextField
       name={field.name}

src/dashboardWebView/components/SnippetsView/Snippets.tsx

@@ -21,9 +21,7 @@ import { DEFAULT_DASHBOARD_FEATURE_FLAGS } from '../../../constants/DefaultFeatu
 
 export interface ISnippetsProps { }
 
-export const Snippets: React.FunctionComponent<ISnippetsProps> = (
-  _: React.PropsWithChildren<ISnippetsProps>
-) => {
+export const Snippets: React.FunctionComponent<ISnippetsProps> = () => {
   const settings = useRecoilValue(SettingsSelector);
   const viewData = useRecoilValue(ViewDataSelector);
   const mode = useRecoilValue(ModeAtom);