@flexis/ui/components/ImageSelect/ImageSelect.babel.js

Styleless React Components

import { __decorate } from "tslib";
import React, { PureComponent, cloneElement } from 'react';
import PropTypes from 'prop-types';
import { Bind, omit } from '../../helpers';
import FileSelect from '../FileSelect';
import SROnly from '../SROnly';
import { style, classes } from './ImageSelect.st.css';
export var DisplayVariant;
(function (DisplayVariant) {
    DisplayVariant["Img"] = "img";
    DisplayVariant["Block"] = "block";
})(DisplayVariant || (DisplayVariant = {}));
export const DisplayValues = Object.values(DisplayVariant);
const defaultResetButton = (<button type='button'>
		&times;
	</button>);
function getDefaultState(props) {
    const { defaultValue } = props;
    return {
        value: defaultValue,
        filename: ''
    };
}
let ImageSelect = /** @class */ (() => {
    class ImageSelect extends PureComponent {
        constructor(props) {
            super(props);
            this.state = getDefaultState(props);
        }
        static getDerivedStateFromProps({ value }, { value: prevValue }) {
            const nextValue = typeof value === 'undefined'
                ? prevValue
                : value;
            if (nextValue === prevValue) {
                return null;
            }
            return {
                value: nextValue
            };
        }
        render() {
            const { className, elementRef, style: styleProp, previewStyle: previewStyleProp, display, name, placeholder, disabled, readOnly, resetButton, ...props } = this.props;
            const { value, filename } = this.state;
            const withPlaceholder = !value && placeholder;
            const previewStyle = { ...previewStyleProp };
            let previewImg = null;
            if (value) {
                if (display === DisplayVariant.Block) {
                    previewStyle.backgroundImage = `url(${value})`;
                }
                else {
                    previewImg = (<img className={classes.img} src={value}/>);
                }
            }
            return (<FileSelect elementRef={elementRef} style={styleProp} className={style(classes.root, className)} name={name} onChange={this.onChange} disabled={disabled || readOnly}>
				<button {...omit(props, [
                'onChange',
                'defaultValue',
                'value'
            ])} className={style(classes.preview, {
                [display]: Boolean(display),
                readOnly,
                disabled
            })} style={previewStyle}>
					{previewImg}
					{withPlaceholder && cloneElement(placeholder, {
                className: style(classes.placeholder, placeholder.props.className)
            })}
					<SROnly>
						<span>{filename}</span>
					</SROnly>
				</button>
				{resetButton && cloneElement(resetButton, {
                className: style(classes.resetButton, {
                    hidden: disabled || readOnly || !value
                }, resetButton.props.className),
                onClick: this.onReset
            })}
			</FileSelect>);
        }
        onChange([image], event) {
            const { value: valueProp, onChange, disabled } = this.props;
            if (disabled || !image) {
                return;
            }
            const { value } = this.state;
            const nextValue = URL.createObjectURL(image);
            if (nextValue === value) {
                return;
            }
            if (typeof valueProp === 'undefined') {
                this.setState(() => ({
                    value: nextValue,
                    filename: image.name
                }));
            }
            if (typeof onChange === 'function') {
                onChange(image, event);
            }
        }
        onReset(event) {
            const { value: valueProp, onChange } = this.props;
            const fileInput = event.target.parentElement.firstElementChild;
            if (typeof valueProp === 'undefined') {
                fileInput.value = null;
                this.setState(() => getDefaultState(this.props));
            }
            if (typeof onChange === 'function') {
                event.target = fileInput;
                onChange(null, event);
            }
        }
    }
    ImageSelect.propTypes = {
        ...FileSelect.propTypes,
        elementRef: PropTypes.func,
        previewStyle: PropTypes.object,
        display: PropTypes.oneOf(DisplayValues),
        name: PropTypes.string,
        placeholder: PropTypes.element,
        defaultValue: PropTypes.string,
        value: PropTypes.string,
        disabled: PropTypes.bool,
        readOnly: PropTypes.bool,
        resetButton: PropTypes.element
    };
    ImageSelect.defaultProps = {
        ...FileSelect.defaultProps,
        display: DisplayVariant.Block,
        disabled: false,
        readOnly: false,
        resetButton: defaultResetButton
    };
    __decorate([
        Bind()
    ], ImageSelect.prototype, "onChange", null);
    __decorate([
        Bind()
    ], ImageSelect.prototype, "onReset", null);
    return ImageSelect;
})();
export default ImageSelect;
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSW1hZ2VTZWxlY3QuanN4Iiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvSW1hZ2VTZWxlY3QvSW1hZ2VTZWxlY3QudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQU9iLGFBQWEsRUFDYixZQUFZLEVBQ1osTUFBTSxPQUFPLENBQUM7QUFDZixPQUFPLFNBQVMsTUFBTSxZQUFZLENBQUM7QUFDbkMsT0FBTyxFQUVOLElBQUksRUFDSixJQUFJLEVBQ0osTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxVQUFVLE1BQU0sZUFBZSxDQUFDO0FBQ3ZDLE9BQU8sTUFBTSxNQUFNLFdBQVcsQ0FBQztBQUMvQixPQUFPLEVBQ04sS0FBSyxFQUNMLE9BQU8sRUFDUCxNQUFNLHNCQUFzQixDQUFDO0FBRTlCLE1BQU0sQ0FBTixJQUFZLGNBR1g7QUFIRCxXQUFZLGNBQWM7SUFDekIsNkJBQVcsQ0FBQTtJQUNYLGlDQUFlLENBQUE7QUFDaEIsQ0FBQyxFQUhXLGNBQWMsS0FBZCxjQUFjLFFBR3pCO0FBNEJELE1BQU0sQ0FBQyxNQUFNLGFBQWEsR0FBYyxNQUFNLENBQUMsTUFBTSxDQUFDLGNBQWMsQ0FBQyxDQUFDO0FBRXRFLE1BQU0sa0JBQWtCLEdBQUcsQ0FDMUIsQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FDcEI7O0NBQ0QsRUFBRSxNQUFNLENBQUMsQ0FDVCxDQUFDO0FBRUYsU0FBUyxlQUFlLENBQUMsS0FBYTtJQUVyQyxNQUFNLEVBQ0wsWUFBWSxFQUNaLEdBQUcsS0FBSyxDQUFDO0lBRVYsT0FBTztRQUNOLEtBQUssRUFBSyxZQUFZO1FBQ3RCLFFBQVEsRUFBRSxFQUFFO0tBQ1osQ0FBQztBQUNILENBQUM7QUFFRDtJQUFBLE1BQXFCLFdBQVksU0FBUSxhQUE2QjtRQTBDckUsWUFBWSxLQUFLO1lBRWhCLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztZQUViLElBQUks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