Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
N
nexpie-grafana-theme
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Registry
Registry
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Kornkitt Poolsup
nexpie-grafana-theme
Commits
c3d4e69a
Unverified
Commit
c3d4e69a
authored
Jul 02, 2020
by
Alex Khomenko
Committed by
GitHub
Jul 02, 2020
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Grafana UI: Make FileUpload button size customizable (#26013)
parent
3e9e2db3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
23 additions
and
4 deletions
+23
-4
packages/grafana-ui/src/components/FileUpload/FileUpload.story.tsx
+4
-0
packages/grafana-ui/src/components/FileUpload/FileUpload.tsx
+12
-4
packages/grafana-ui/src/utils/storybook/useSize.ts
+7
-0
No files found.
packages/grafana-ui/src/components/FileUpload/FileUpload.story.tsx
View file @
c3d4e69a
...
@@ -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
])
}
/>
/>
);
);
...
...
packages/grafana-ui/src/components/FileUpload/FileUpload.tsx
View file @
c3d4e69a
...
@@ -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;
...
...
packages/grafana-ui/src/utils/storybook/useSize.ts
0 → 100644
View file @
c3d4e69a
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
);
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment