All files / src/components output-format-picker.tsx

0% Statements 0/19
0% Branches 0/5
0% Functions 0/6
0% Lines 0/18

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74                                                                                                                                                   
import React, { ChangeEvent, useMemo } from 'react';
import { Scheduler } from '../handler';
 
export interface OutputFormatOption {
  readonly name: string;
  readonly label: string;
}
 
export type OutputFormatPickerProps = {
  name: string;
  id: string;
  environment: string;
  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
  value: OutputFormatOption[];
  // CSS classes for output elements
  rowClassName: string;
  labelClassName: string;
  inputClassName: string;
};
 
export function outputFormatsForEnvironment(
  environment: string
): OutputFormatOption[] | null {
  // Retrieve the environment data from session storage.
  const environmentsData = sessionStorage.getItem('environments');
  Iif (environmentsData === null) {
    return null;
  }
 
  const environments = JSON.parse(
    environmentsData
  ) as Array<Scheduler.IRuntimeEnvironment>;
  const environmentObj = environments.find(env => env.name === environment);
  Iif (!environmentObj || !environmentObj['output_formats']) {
    return null;
  }
 
  return environmentObj['output_formats'] as OutputFormatOption[];
}
 
export function OutputFormatPicker(props: OutputFormatPickerProps) {
  const outputFormats = useMemo(
    () => outputFormatsForEnvironment(props.environment),
    [props.environment]
  );
  Iif (outputFormats === null) {
    return null;
  }
 
  return (
    <div className={props.rowClassName}>
      <label className={props.labelClassName}>Output formats</label>
      <div className={props.inputClassName}>
        <ul className="jp-notebook-job-output-formats-options">
          {outputFormats.map((of, idx) => (
            <li key={idx}>
              <label>
                <input
                  type="checkbox"
                  id={`${props.id}-${of.name}`}
                  value={of.name}
                  onChange={props.onChange}
                  checked={props.value.some(sof => of.name === sof.name)}
                />{' '}
                {of.label}
              </label>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}