go.charczuk.com@v0.0.0-20240327042549-bc490516bd1a/projects/nodes/static/_nextjs/src/components/dialogImportCsv.tsx (about)

     1  /**
     2   * Copyright (c) 2024 - Present. Will Charczuk. All rights reserved.
     3   * Use of this source code is governed by a MIT license that can be found in the LICENSE file at the root of the repository.
     4   */
     5  import { Button, Dialog, DialogBody, DialogFooter, FileInput, FormGroup, Intent, Tooltip, getKeyCombo } from "@blueprintjs/core";
     6  import { MODIFIER_BIT_MASKS } from "@blueprintjs/core/lib/esm/components/hotkeys/hotkeyParser";
     7  import { useState } from "react";
     8  
     9  export interface DialogImportCsvProps {
    10    isOpen: boolean;
    11    onClose: () => void;
    12    onLoad: (files?: FileList) => void;
    13  }
    14  
    15  export function DialogImportCsv(props: DialogImportCsvProps) {
    16    const [loadedFiles, setLoadedFiles] = useState<FileList | undefined>();
    17  
    18    const onFileInputChange = (e: any) => {
    19      setLoadedFiles(e.target.files);
    20    }
    21  
    22    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
    23      const combo = getKeyCombo(e.nativeEvent);
    24      if (combo.key === "enter" && combo.modifiers === MODIFIER_BIT_MASKS['shift']) {
    25        e.preventDefault();
    26        e.stopPropagation();
    27        props.onLoad(loadedFiles)
    28      }
    29    }
    30    return (
    31      <div onKeyDown={handleKeyDown}>
    32        <Dialog title={`Load table data from a CSV file`}
    33          autoFocus={false}
    34          isOpen={props.isOpen}
    35          onClose={props.onClose}
    36          icon="cloud-upload"
    37          isCloseButtonShown={false}
    38        >
    39          <DialogBody>
    40            <FormGroup inline={true} label={"File"}>
    41              <FileInput autoFocus={true} tabIndex={0} text={loadedFiles && loadedFiles.length > 0 ? loadedFiles[0].name : "Choose file..."} onInputChange={onFileInputChange} fill={true} />
    42            </FormGroup>
    43          </DialogBody>
    44          <DialogFooter actions={<>
    45            <Tooltip content="Close the dialog and cancel uploading data">
    46              <Button tabIndex={0} onClick={props.onClose} icon="cross">Cancel</Button>
    47            </Tooltip>
    48            <Tooltip content="Upload table csv file">
    49              <Button tabIndex={0} intent={Intent.PRIMARY} onClick={() => props.onLoad(loadedFiles)} icon="floppy-disk">Upload</Button>
    50            </Tooltip>
    51          </>}>
    52          </DialogFooter>
    53        </Dialog>
    54      </div>
    55    )
    56  }