diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx new file mode 100644 index 0000000..129e9c8 --- /dev/null +++ b/src/components/FileUpload.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import { css } from '@emotion/css'; +import type { GrafanaTheme2 } from '@grafana/data'; +import { useStyles2 } from '@grafana/ui'; + +interface Props { + onFileUpload: (e: React.ChangeEvent) => void; + accept?: string; +} + +export const FileUpload = ({ onFileUpload, accept }: Props) => { + const styles = useStyles2(getStyles()); + + return ( + <> + + + ); +}; + +const getStyles = () => (theme: GrafanaTheme2) => { + return { + input: css({ + padding: theme.spacing(2), + }), + }; +}; diff --git a/src/components/PanelOptions/ImportExport.tsx b/src/components/PanelOptions/ImportExport.tsx index 9f4c3e4..3d1a5ca 100644 --- a/src/components/PanelOptions/ImportExport.tsx +++ b/src/components/PanelOptions/ImportExport.tsx @@ -2,9 +2,10 @@ import React from 'react'; import { StandardEditorProps } from '@grafana/data'; import { CodeEditorOptionSettings } from 'types'; import { CodeEditor } from 'components/CodeEditor'; -import { Button, FileUpload } from '@grafana/ui'; +import { Button } from '@grafana/ui'; import { exportFile, contentType } from 'utils/exportFile'; import { readFile } from 'utils/readFile'; +import { FileUpload } from 'components/FileUpload'; interface Props extends StandardEditorProps {} @@ -48,7 +49,7 @@ export const ImportExportOption: React.FC = ({ value, item, onChange, con return (
- importPanelOptions(e.currentTarget.files)} showFileName accept=".json" /> + importPanelOptions(e.currentTarget.files)} accept=".json" />