in packages/eui/src/components/form/file_picker/file_picker.tsx [142:325]
render() {
const { defaultFullWidth } = this.context as FormContextValue;
return (
<EuiI18n
token="euiFilePicker.removeSelectedAriaLabel"
default="Remove selected files"
>
{(removeSelectedAriaLabel: string) => {
const {
stylesMemoizer,
id,
name,
initialPromptText,
className,
disabled,
compressed,
onChange,
isInvalid,
fullWidth = defaultFullWidth,
isLoading,
display,
...rest
} = this.props;
const promptId = `${id || this.generatedId}-filePicker__prompt`;
const isOverridingInitialPrompt = this.state.promptText != null;
const normalFormControl = display === 'default';
const classes = classNames(
'euiFilePicker',
{
'euiFilePicker-isDroppingFile': this.state.isHoveringDrop,
'euiFilePicker-isInvalid': isInvalid,
'euiFilePicker-isLoading': isLoading,
'euiFilePicker-hasFiles': isOverridingInitialPrompt,
},
className
);
const styles = stylesMemoizer(euiFilePickerStyles);
const cssStyles = [
styles.euiFilePicker,
fullWidth ? styles.fullWidth : styles.formWidth,
this.state.isHoveringDrop && styles.isDroppingFile,
isInvalid && !disabled && styles.invalid,
isOverridingInitialPrompt && !disabled && styles.hasFiles,
isLoading && styles.loading,
];
const inputStyles = [
styles.input.euiFilePicker__input,
!normalFormControl && !disabled && styles.input.largeInteractive,
];
const promptStyles = [
styles.euiFilePicker__prompt,
disabled && styles.disabled,
...(normalFormControl
? [compressed ? styles.compressed : styles.uncompressed]
: [
styles.large.large,
compressed
? styles.large.compressed
: styles.large.uncompressed,
]),
];
const iconStyles = [
styles.icon.euiFilePicker__icon,
...(normalFormControl
? [
styles.icon.normal,
compressed
? styles.icon.compresssed
: styles.icon.uncompressed,
]
: [styles.icon.large]),
];
const rightIconStyles = normalFormControl
? [
styles.rightIcon.euiFilePicker__rightIcon,
compressed
? styles.rightIcon.compressed
: styles.rightIcon.uncompressed,
]
: undefined;
let clearButton;
if (isLoading && normalFormControl) {
// Override clear button with loading spinner if it is in loading state
clearButton = (
<EuiLoadingSpinner
css={rightIconStyles}
className="euiFilePicker__loadingSpinner"
size={compressed ? 's' : 'm'}
/>
);
} else if (isOverridingInitialPrompt && !disabled) {
if (normalFormControl) {
clearButton = (
<EuiFormControlLayoutClearButton
aria-label={removeSelectedAriaLabel}
css={[styles.euiFilePicker__clearButton, rightIconStyles]}
className="euiFilePicker__clearButton"
onClick={this.removeFiles}
size={compressed ? 's' : 'm'}
/>
);
} else {
clearButton = (
<EuiButtonEmpty
aria-label={removeSelectedAriaLabel}
css={styles.euiFilePicker__clearButton}
className="euiFilePicker__clearButton"
size="xs"
onClick={this.removeFiles}
>
<EuiI18n
token="euiFilePicker.removeSelected"
default="Remove"
/>
</EuiButtonEmpty>
);
}
} else {
clearButton = null;
}
const loader = !normalFormControl && isLoading && (
<EuiProgress size="xs" color="accent" position="absolute" />
);
return (
<div css={cssStyles} className={classes}>
<EuiValidatableControl isInvalid={isInvalid}>
<input
type="file"
id={id}
name={name}
css={inputStyles}
className="euiFilePicker__input"
onChange={this.handleChange}
ref={(input) => {
this.fileInput = input;
}}
onDragOver={this.showDrop}
onDragLeave={this.hideDrop}
onDrop={this.hideDrop}
disabled={disabled}
aria-describedby={promptId}
{...rest}
/>
</EuiValidatableControl>
<div
css={promptStyles}
className="euiFilePicker__prompt"
id={promptId}
>
<EuiIcon
css={iconStyles}
className="euiFilePicker__icon"
color={
isInvalid ? 'danger' : disabled ? 'subdued' : 'primary'
}
type={isInvalid ? 'alert' : 'importAction'}
size={normalFormControl ? 'm' : 'l'}
aria-hidden="true"
/>
<span className="euiFilePicker__promptText">
{this.state.promptText || initialPromptText}
</span>
{clearButton}
{loader}
</div>
</div>
);
}}
</EuiI18n>
);
}