@dhis2-ui/file-input 8.15.1 → 8.16.0-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/file-input",
-    "version": "8.15.1",
+    "version": "8.16.0-alpha.2",
     "description": "UI FileInput",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -33,23 +34,25 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/button": "8.15.1",
-        "@dhis2-ui/field": "8.15.1",
-        "@dhis2-ui/label": "8.15.1",
-        "@dhis2-ui/loader": "8.15.1",
-        "@dhis2-ui/status-icon": "8.15.1",
-        "@dhis2/ui-constants": "8.15.1",
-        "@dhis2/ui-icons": "8.15.1",
+        "@dhis2-ui/button": "8.16.0-alpha.2",
+        "@dhis2-ui/field": "8.16.0-alpha.2",
+        "@dhis2-ui/label": "8.16.0-alpha.2",
+        "@dhis2-ui/loader": "8.16.0-alpha.2",
+        "@dhis2-ui/status-icon": "8.16.0-alpha.2",
+        "@dhis2/ui-constants": "8.16.0-alpha.2",
+        "@dhis2/ui-icons": "8.16.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "@dhis2/d2-i18n": "^1.1.0",
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }

package/types/index.d.ts

@@ -0,0 +1,287 @@
+import * as React from 'react'
+
+export interface FileInputEventPayload {
+    files: FileList
+    name?: string
+}
+
+type FileInputEventHandler<Event extends React.SyntheticEvent> = (
+    arg0: FileInputEventPayload,
+    event: Event
+) => void
+
+type FileInputFocusHandler = FileInputEventHandler<
+    React.FocusEvent<HTMLInputElement>
+>
+type FileInputChangeHandler = FileInputEventHandler<
+    React.ChangeEvent<HTMLInputElement>
+>
+type FileInputKeyHandler = FileInputEventHandler<
+    React.KeyboardEvent<HTMLInputElement>
+>
+
+export interface FileInputProps {
+    /**
+     * The `accept` attribute of the [native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept)
+     */
+    accept?: string
+    buttonLabel?: string
+    className?: string
+    dataTest?: string
+    disabled?: boolean
+    /**
+     * Input status. Mutually exclusive with `warning` and `valid`
+     */
+    error?: boolean
+    initialFocus?: boolean
+    /**
+     * Button size. Mutually exclusive with `small`
+     */
+    large?: boolean
+    /**
+     * The `multiple` attribute of the [native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple)
+     */
+    multiple?: boolean
+    name?: string
+    /**
+     * Button size. Mutually exclusive with `large`
+     */
+    small?: boolean
+    tabIndex?: string
+    /**
+     * Input status. Mutually exclusive with `warning` and `error`
+     */
+    valid?: boolean
+    /**
+     * Input status. Mutually exclusive with `valid` and `error`
+     */
+    warning?: boolean
+    /**
+     * Called with signature `(object, event)`
+     */
+    onBlur?: FileInputFocusHandler
+    /**
+     * Called with signature `(object, event)`
+     */
+    onChange?: FileInputChangeHandler
+    /**
+     * Called with signature `(object, event)`
+     */
+    onFocus?: FileInputFocusHandler
+    /**
+     * Called with signature `(object, event)`
+     */
+    onKeyDown?: FileInputKeyHandler
+}
+
+export class FileInput extends React.Component<FileInputProps, any> {
+    render(): JSX.Element
+}
+
+type TranslateableProp = string | ((arg: any) => string)
+
+export interface FileInputFieldProps {
+    /**
+     * The `accept` attribute of the [native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept)
+     */
+    accept?: string
+    /**
+     * Text on the button
+     */
+    buttonLabel?: TranslateableProp
+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+    /**
+     * Disables the button
+     */
+    disabled?: boolean
+    /**
+     * Applies 'error' styling to the validation text. Mutually exclusive with `warning` and `valid` props
+     */
+    error?: boolean
+    /**
+     * Useful guiding text for the user
+     */
+    helpText?: string
+    initialFocus?: boolean
+    /**
+     * A descriptive label above the button
+     */
+    label?: string
+    /**
+     * Size of the button. Mutually exclusive with the `small` prop
+     */
+    large?: boolean
+    /**
+     * The `multiple` attribute of the [native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple)
+     */
+    multiple?: boolean
+    /**
+     * Name associated with input. Passed to event handler callbacks
+     */
+    name?: string
+    /**
+     * Placeholder below the button
+     */
+    placeholder?: TranslateableProp
+    /**
+     * Adds an asterisk to indicate this field is required
+     */
+    required?: boolean
+    /**
+     * Size of the button. Mutually exclusive with the `large` prop
+     */
+    small?: boolean
+    tabIndex?: string
+    /**
+     * Applies 'valid' styling to the validation text. Mutually exclusive with `warning` and `error` props
+     */
+    valid?: boolean
+    /**
+     * Text below the button that provides validation feedback
+     */
+    validationText?: string
+    /**
+     * Applies 'warning' styling to the validation text. Mutually exclusive with `valid` and `error` props
+     */
+    warning?: boolean
+    onBlur?: FileInputFocusHandler
+    /**
+     * Called with signature `({ name: string, files: [] }, event)`
+     */
+    onChange?: FileInputChangeHandler
+    /**
+     * Called with signature `({ name: string, files: [] }, event)`
+     */
+    onFocus?: FileInputFocusHandler
+    /**
+     * Called with signature `({ name: string, files: [] }, event)`
+     */
+    onKeyDown?: FileInputKeyHandler
+}
+
+export const FileInputField: React.FC<FileInputFieldProps>
+
+export interface FileInputFieldWithListProps {
+    /**
+     * The `accept` attribute of the [native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept)
+     */
+    accept?: string
+    /**
+     * Text on the button
+     */
+    buttonLabel?: TranslateableProp
+    className?: string
+    dataTest?: string
+    /**
+     * Disables the button
+     */
+    disabled?: boolean
+    /**
+     * Applies 'error' styling to the button and validation text. Mutually exclusive with `warning` and `valid` props
+     */
+    error?: boolean
+    files?: File[]
+    /**
+     * Useful guiding text for the user
+     */
+    helpText?: string
+    initialFocus?: boolean
+    /**
+     * A descriptive label above the button
+     */
+    label?: string
+    /**
+     * Size of the button. Mutually exclusive with the `small` prop
+     */
+    large?: boolean
+    /**
+     * The `multiple` attribute of the [native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple)
+     */
+    multiple?: boolean
+    /**
+     * Name associated with input. Passed to event handler callbacks
+     */
+    name?: string
+    /**
+     * Placeholder below the button
+     */
+    placeholder?: TranslateableProp
+    /**
+     * Text used for the button that removes a file from the list
+     */
+    removeText?: TranslateableProp
+    /**
+     * Adds an asterisk to indicate this field is required
+     */
+    required?: boolean
+    /**
+     * Size of the button. Mutually exclusive with the `large` prop
+     */
+    small?: boolean
+    tabIndex?: string
+    /**
+     * Applies 'valid' styling to the button and validation text. Mutually exclusive with `warning` and `error` props
+     */
+    valid?: boolean
+    /**
+     * Text below the button that provides validation feedback
+     */
+    validationText?: string
+    /**
+     * Applies 'warning' styling to the button and validation text. Mutually exclusive with `valid` and `error` props
+     */
+    warning?: boolean
+    /**
+     * Called with signature `({ name: string, files: [] }, event)`
+     */
+    onBlur?: FileInputFocusHandler
+    /**
+     * Called with signature `({ name: string, files: [] }, event)`
+     */
+    onChange: FileInputChangeHandler
+    /**
+     * Called with signature `({ name: string, files: [] }, event)`
+     */
+    onFocus?: FileInputFocusHandler
+    /**
+     * Called with signature `({ name: string, files: [] }, event)`
+     */
+    onKeyDown?: FileInputKeyHandler
+}
+
+export class FileInputFieldWithList extends React.Component<
+    FileInputFieldWithListProps,
+    any
+> {
+    render(): JSX.Element
+}
+
+export interface FileListItemProps {
+    onRemove: (arg0: {}, event: React.MouseEvent<HTMLSpanElement>) => void
+    cancelText?: string
+    className?: string
+    dataTest?: string
+    label?: string
+    loading?: boolean
+    removeText?: string
+    onCancel?: (arg0: {}, event: React.MouseEvent<HTMLSpanElement>) => void
+}
+
+export const FileListItem: React.FC<FileListItemProps>
+
+export interface FileListPlaceholderProps {
+    children?: string
+    dataTest?: string
+}
+
+export const FileListPlaceholder: React.FC<FileListPlaceholderProps>
+
+export interface FileListProps {
+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+}
+
+export const FileList: React.FC<FileListProps>