import classNames from "classnames" ; import * as React from "react" ; import { polyfill } from "react-lifecycles-compat" ; import { AbstractPureComponent2 , Classes } from "../../common" ; import { DISPLAYNAME_PREFIX , Props } from "../../common/props" ; export type FileInputProps = IFileInputProps ; deprecated export interface IFileInputProps extends React . LabelHTMLAttributes < HTMLLabelElement > , Props { /**
     * Whether the file input is non-interactive.
     * Setting this to `true` will automatically disable the child input too.
     */ disabled ? : boolean ; /**
     * Whether the file input should take up the full width of its container.
     */ fill ? : boolean ; default hasSelection ? : boolean ; /**
     * The props to pass to the child input.
     * `disabled` will be ignored in favor of the top-level prop.
     * `type` will be ignored, because the input _must_ be `type="file"`.
     * Pass `onChange` here to be notified when the user selects a file.
     */ inputProps ? : React . HTMLProps < HTMLInputElement > ; /**
     * Whether the file input should appear with large styling.
     */ large ? : boolean ; /**
     * Callback invoked on `<input>` `change` events.
     *
     * This callback is offered as a convenience; it is equivalent to passing
     * `onChange` to `inputProps`.
     *
     * __Note:__ The top-level `onChange` prop is passed to the wrapping
     * `<label>` rather than the `<input>`, which may not be what you expect.
     */ onInputChange ? : React . FormEventHandler < HTMLInputElement > ; default text ? : React . ReactNode ; default buttonText ? : string ; } @ polyfill export class FileInput extends AbstractPureComponent2 < FileInputProps > { public static displayName = `${ DISPLAYNAME_PREFIX }.FileInput` ; public static defaultProps : FileInputProps = { hasSelection : false , inputProps : { } , text : "Choose file..." , } ; public render ( ) { const { buttonText , className , disabled , fill , hasSelection , inputProps , large , onInputChange , text , ... htmlProps } = this . props ; const rootClasses = classNames ( Classes . FILE_INPUT , { [ Classes . FILE_INPUT_HAS_SELECTION ] : hasSelection , [ Classes . DISABLED ] : disabled , [ Classes . FILL ] : fill , [ Classes . LARGE ] : large , } , className ) ; const NS = Classes . getClassNamespace ( ) ; const uploadProps = { [ `${ NS }-button-text` ] : buttonText , className : classNames ( Classes . FILE_UPLOAD_INPUT , { [ Classes . FILE_UPLOAD_INPUT_CUSTOM_TEXT ] : ! ! buttonText , } ) , } ; return ( < label { ... htmlProps } className = { rootClasses } > < input { ... inputProps } onChange = { this . handleInputChange } type = "file" disabled = { disabled } / > < span { ... uploadProps } > { text } < /span> < /label>); } private handleInputChange = ( e ) => { this . props . onInputChange ?. ( e ) ; this . props . inputProps ?. onChange ?. ( e ) ; } ; }