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> ); } |