Commit c3d4e69a by Alex Khomenko Committed by GitHub

Grafana UI: Make FileUpload button size customizable (#26013)

parent 3e9e2db3
...@@ -2,6 +2,8 @@ import React from 'react'; ...@@ -2,6 +2,8 @@ import React from 'react';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { FileUpload } from './FileUpload'; import { FileUpload } from './FileUpload';
import mdx from './FileUpload.mdx'; import mdx from './FileUpload.mdx';
import { useSize } from '../../utils/storybook/useSize';
import { ComponentSize } from '../../types/size';
export default { export default {
title: 'Forms/FileUpload', title: 'Forms/FileUpload',
...@@ -15,8 +17,10 @@ export default { ...@@ -15,8 +17,10 @@ export default {
}; };
export const single = () => { export const single = () => {
const size = useSize();
return ( return (
<FileUpload <FileUpload
size={size as ComponentSize}
onFileUpload={({ currentTarget }) => console.log('file', currentTarget?.files && currentTarget.files[0])} onFileUpload={({ currentTarget }) => console.log('file', currentTarget?.files && currentTarget.files[0])}
/> />
); );
......
...@@ -3,12 +3,14 @@ import { GrafanaTheme } from '@grafana/data'; ...@@ -3,12 +3,14 @@ import { GrafanaTheme } from '@grafana/data';
import { css, cx } from 'emotion'; import { css, cx } from 'emotion';
import { getFormStyles, Icon } from '../index'; import { getFormStyles, Icon } from '../index';
import { stylesFactory, useTheme } from '../../themes'; import { stylesFactory, useTheme } from '../../themes';
import { ComponentSize } from '../../types/size';
export interface Props { export interface Props {
onFileUpload: (event: FormEvent<HTMLInputElement>) => void; onFileUpload: (event: FormEvent<HTMLInputElement>) => void;
/** Accepted file extensions */ /** Accepted file extensions */
accept?: string; accept?: string;
className?: string; className?: string;
size?: ComponentSize;
} }
function trimFileName(fileName: string) { function trimFileName(fileName: string) {
...@@ -24,9 +26,15 @@ function trimFileName(fileName: string) { ...@@ -24,9 +26,15 @@ function trimFileName(fileName: string) {
return `${file.substring(0, nameLength)}...${extension}`; return `${file.substring(0, nameLength)}...${extension}`;
} }
export const FileUpload: FC<Props> = ({ onFileUpload, className, children = 'Upload file', accept = '*' }) => { export const FileUpload: FC<Props> = ({
onFileUpload,
className,
children = 'Upload file',
accept = '*',
size = 'md',
}) => {
const theme = useTheme(); const theme = useTheme();
const style = getStyles(theme); const style = getStyles(theme, size);
const [fileName, setFileName] = useState(''); const [fileName, setFileName] = useState('');
const onChange = useCallback((event: FormEvent<HTMLInputElement>) => { const onChange = useCallback((event: FormEvent<HTMLInputElement>) => {
...@@ -60,8 +68,8 @@ export const FileUpload: FC<Props> = ({ onFileUpload, className, children = 'Upl ...@@ -60,8 +68,8 @@ export const FileUpload: FC<Props> = ({ onFileUpload, className, children = 'Upl
); );
}; };
const getStyles = stylesFactory((theme: GrafanaTheme) => { const getStyles = stylesFactory((theme: GrafanaTheme, size: ComponentSize) => {
const buttonFormStyle = getFormStyles(theme, { variant: 'primary', invalid: false, size: 'md' }).button.button; const buttonFormStyle = getFormStyles(theme, { variant: 'primary', invalid: false, size }).button.button;
return { return {
fileUpload: css` fileUpload: css`
display: none; display: none;
......
import { select } from '@storybook/addon-knobs';
import { ComponentSize } from '../../types/size';
export function useSize(size: ComponentSize = 'md') {
const sizes = ['xs', 'sm', 'md', 'lg'];
return select('Size', sizes, size);
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment