docs(website): change checkboxes to dropdown in AST Viewer

armano2 · armano2 · commit ab13bc0cbb8f · 2021-12-03T05:51:51.000+01:00
diff --git a/packages/website/src/components/ASTTsViewer.tsx b/packages/website/src/components/ASTTsViewer.tsx
@@ -4,7 +4,7 @@ import ASTViewer, { ASTViewerBaseProps } from './ast/ASTViewer';
 import { isRecord } from './ast/utils';
 
 export interface ASTTsViewerProps extends ASTViewerBaseProps {
-  readonly ts: string;
+  readonly version: string;
 }
 
 function extractEnum(
@@ -41,7 +41,7 @@ export default function ASTTsViewer(props: ASTTsViewerProps): JSX.Element {
     setSyntaxKind(extractEnum(window.ts.SyntaxKind));
     setNodeFlags(extractEnum(window.ts.NodeFlags));
     setTokenFlags(extractEnum(window.ts.TokenFlags));
-  }, [props.ts]);
+  }, [props.version]);
 
   return (
     <ASTViewer
diff --git a/packages/website/src/components/OptionsSelector.tsx b/packages/website/src/components/OptionsSelector.tsx
@@ -18,12 +18,7 @@ import type { RuleDetails } from './types';
 
 import styles from './OptionsSelector.module.css';
 
-import type {
-  CompilerFlags,
-  ConfigModel,
-  SourceType,
-  RulesRecord,
-} from './types';
+import type { CompilerFlags, ConfigModel, RulesRecord } from './types';
 
 export interface OptionsSelectorParams {
   readonly ruleOptions: RuleDetails[];
@@ -33,6 +28,12 @@ export interface OptionsSelectorParams {
   readonly isLoading: boolean;
 }
 
+const ASTOptions = [
+  { value: false, label: 'Disabled' },
+  { value: 'es', label: 'ESTree' },
+  { value: 'ts', label: 'TypeScript' },
+] as const;
+
 function OptionsSelector({
   ruleOptions,
   state,
@@ -134,29 +135,20 @@ function OptionsSelector({
           />
         </label>
         <label className={styles.optionLabel}>
-          Show ESTree
-          <Checkbox
-            name="es-ast"
-            checked={state.showAST === 'es' || state.showAST === true}
-            onChange={(e): void => setState({ showAST: e && 'es' })}
-            className={styles.optionCheckbox}
-          />
-        </label>
-        <label className={styles.optionLabel}>
-          Show TS AST
-          <Checkbox
-            name="ts-ast"
-            checked={state.showAST === 'ts'}
-            onChange={(e): void => setState({ showAST: e && 'ts' })}
-            className={styles.optionCheckbox}
+          AST Viewer
+          <Dropdown
+            name="showAST"
+            value={state.showAST}
+            onChange={(e): void => setState({ showAST: e })}
+            options={ASTOptions}
           />
         </label>
         <label className={styles.optionLabel}>
           Source type
           <Dropdown
             name="sourceType"
             value={state.sourceType}
-            onChange={(e): void => setState({ sourceType: e as SourceType })}
+            onChange={(e): void => setState({ sourceType: e })}
             options={['script', 'module']}
           />
         </label>
diff --git a/packages/website/src/components/Playground.tsx b/packages/website/src/components/Playground.tsx
@@ -102,6 +102,7 @@ function Playground(): JSX.Element {
                 ast={tsAst}
                 position={position}
                 onSelectNode={updateSelectedNode}
+                version={state.ts}
               />
             )) ||
               (esAst && (
diff --git a/packages/website/src/components/hooks/useHashState.ts b/packages/website/src/components/hooks/useHashState.ts
@@ -92,14 +92,14 @@ function useHashState(
   initialState: ConfigModel,
 ): [ConfigModel, (cfg: Partial<ConfigModel>) => void] {
   const [hash, setHash] = useState<string>(window.location.hash.slice(1));
-  const [state, setState] = useState<ConfigModel>({
+  const [state, setState] = useState<ConfigModel>(() => ({
     ...initialState,
     ...parseStateFromUrl(window.location.hash.slice(1)),
-  });
-  const [tmpState, setTmpState] = useState<Partial<ConfigModel>>({
+  }));
+  const [tmpState, setTmpState] = useState<Partial<ConfigModel>>(() => ({
     ...initialState,
     ...parseStateFromUrl(window.location.hash.slice(1)),
-  });
+  }));
 
   useEffect(() => {
     const newHash = window.location.hash.slice(1);
diff --git a/packages/website/src/components/inputs/Dropdown.tsx b/packages/website/src/components/inputs/Dropdown.tsx
@@ -1,28 +1,52 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import styles from '../OptionsSelector.module.css';
 import clsx from 'clsx';
 
-export interface DropdownProps {
-  readonly onChange: (value: string) => void;
-  readonly options: string[];
-  readonly value: string | undefined;
+export interface DropdownOption<T> {
+  readonly value: T;
+  readonly label: string;
+}
+
+export interface DropdownProps<T> {
+  readonly onChange: (value: T) => void;
+  readonly options: readonly (DropdownOption<T> | T)[];
+  readonly value: T | undefined;
   readonly name: string;
   readonly className?: string;
 }
 
-function Dropdown(props: DropdownProps): JSX.Element {
+function Dropdown<T extends boolean | string | number>(
+  props: DropdownProps<T>,
+): JSX.Element {
+  const [options, setOptions] = useState<DropdownOption<T>[]>([]);
+
+  useEffect(() => {
+    setOptions(
+      props.options.map(option =>
+        typeof option !== 'object'
+          ? { label: String(option), value: option }
+          : option,
+      ),
+    );
+  }, [props.options]);
+
   return (
     <select
       name={props.name}
-      value={props.value}
+      value={String(props.value)}
       className={clsx(styles.optionSelect, props.className)}
       onChange={(e): void => {
-        props.onChange(e.target.value);
+        const selected = options.find(
+          item => String(item.value) === e.target.value,
+        );
+        if (selected) {
+          props.onChange(selected.value);
+        }
       }}
     >
-      {props.options.map(item => (
-        <option key={item} value={item}>
-          {item}
+      {options.map(item => (
+        <option key={String(item.value)} value={String(item.value)}>
+          {item.label}
         </option>
       ))}
     </select>
