src/FormView.tsx

   1 import { createMemo } from 'solid-js';
   2 import { For } from 'solid-js/dom';
   3 import { TaxReturn, Form } from 'ustaxlib';
   4
   5 const S = require('./FormView.css');
   6
   7 interface FormProps {
   8   tr: TaxReturn;
   9   form: Form<any>;
  10 }
  11
  12 export default function FormView(props: FormProps) {
  13   const lineKeys = createMemo(() => Object.keys(props.form.lines));
  14
  15   return (
  16     <>
  17       <h2 class={S.formName}>Form {props.form.name}</h2>
  18
  19       <table class={S.table}>
  20         <For each={lineKeys()}>
  21           {key => <Line tr={props.tr} line={props.form.lines[key]} />}
  22         </For>
  23       </table>
  24     </>
  25   );
  26 }
  27
  28 function Line(props: { tr, line }) {
  29   const { tr, line } = props;
  30   const value = createMemo(() => {
  31     try {
  32       return line.value(tr);
  33     } catch (e) {
  34       return <span class={S.error} title={e.stack}>{e.message}</span>;
  35     }
  36   });
  37   return (
  38     <tr class={S.line}>
  39       <th class={S.id}>{line.id}</th>
  40       <td class={S.description}>{line.description}</td>
  41       <td class={S.value}>{value()}</td>
  42     </tr>
  43   );
  44 }