-
Notifications
You must be signed in to change notification settings - Fork 4k
/
types.ts
64 lines (62 loc) · 2.04 KB
/
types.ts
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
/**
* External dependencies
*/
import type { ComponentProps, InputHTMLAttributes, ReactNode } from 'react';
/**
* Internal dependencies
*/
import type Icon from '../icon';
// TODO: Replace `children` and `icon` types with props from Button once Button is typed.
export type FormFileUploadProps = {
/**
* A string passed to `input` element that tells the browser which file types can be
* upload to the upload by the user use. e.g: `image/*,video/*`.
*
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers.
*/
accept?: InputHTMLAttributes< HTMLInputElement >[ 'accept' ];
/**
* Children are passed as children of `Button`.
*/
children?: ReactNode;
/**
* The icon to render in the `Button`.
*/
icon?: ComponentProps< typeof Icon >[ 'icon' ];
/**
* Whether to allow multiple selection of files or not.
*/
multiple?: InputHTMLAttributes< HTMLInputElement >[ 'multiple' ];
/**
* Callback function passed directly to the `input` file element.
*
* Select files will be available in `event.currentTarget.files`.
*/
onChange: InputHTMLAttributes< HTMLInputElement >[ 'onChange' ];
/**
* Callback function passed directly to the `input` file element.
*
* This can be useful when you want to force a `change` event to fire when
* the user chooses the same file again. To do this, set the target value to
* an empty string in the `onClick` function.
*
* ```jsx
* <FormFileUpload
* onClick={ ( event ) => ( event.target.value = '' ) }
* onChange={ onChange }
* >
* Upload
* </FormFileUpload>
* ```
*/
onClick?: InputHTMLAttributes< HTMLInputElement >[ 'onClick' ];
/**
* Optional callback function used to render the UI.
*
* If passed, the component does not render the default UI (a button) and
* calls this function to render it. The function receives an object with
* property `openFileDialog`, a function that, when called, opens the browser
* native file upload modal window.
*/
render?: ( arg: { openFileDialog: () => void } ) => ReactNode;
};