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

Styleless React Components

import { __decorate } from "tslib";
import React, { PureComponent, Children } from 'react';
import PropTypes from 'prop-types';
import { Bind, omit, getAriaLabelProps } from '../../helpers';
import isCurrentValue from '../common/isCurrentValue';
import Dropdown, { DropdownContent } from '../Dropdown';
import CustomFlatSelect from '../CustomFlatSelect';
import { isCustomSelectFace } from './CustomSelectFace';
import { style, classes } from './CustomSelect.st.css';
export * from './CustomSelectFace';
export * from './CustomSelectOption';
let CustomSelect = /** @class */ (() => {
    class CustomSelect extends PureComponent {
        constructor(props) {
            super(props);
            this.dropdownRef = null;
            const { defaultValue } = props;
            this.state = {
                value: defaultValue
            };
        }
        render() {
            const { className, 'aria-labelledby': ariaLabelledBy, 'aria-label': ariaLabel, style: styleProp, name, placeholder, multiple, disabled, children, ...props } = this.props;
            const { value } = this.state;
            const ariaLabelProps = getAriaLabelProps({
                labelledBy: ariaLabelledBy,
                label: ariaLabel || placeholder
            });
            let label = multiple ? [] : '';
            let selectFace = null;
            const options = Children.map(children, (child) => {
                if (!child) {
                    return null;
                }
                if (child.type[isCustomSelectFace]) {
                    selectFace = child;
                    return null;
                }
                const { value: optionValue, children: optionLabel } = child.props;
                const option = typeof optionValue === 'undefined'
                    ? optionLabel
                    : optionValue;
                const checked = isCurrentValue(multiple, value, option);
                if (checked) {
                    if (multiple) {
                        label.push(optionLabel);
                    }
                    else {
                        label = optionLabel;
                    }
                }
                return child;
            });
            return (<Dropdown ref={this.onDropdownRef} className={style(classes.root, className)} style={styleProp} disabled={disabled}>
				{this.face(selectFace, label)}
				<DropdownContent {...ariaLabelProps} className={classes.dropdownContent} role='region' aria-multiselectable={multiple}>
					<CustomFlatSelect {...omit(props, ['elementRef'])} {...ariaLabelProps} className={classes.options} name={name} multiple={multiple} onClick={this.onDropdownHide} onChange={this.onChange} value={value} disabled={disabled}>
						{options}
					</CustomFlatSelect>
				</DropdownContent>
				{name && (<input type='hidden' name={name} value={value || ''}/>)}
			</Dropdown>);
        }
        face(faceChild, label) {
            const { multiple, placeholder, disabled } = this.props;
            const faceLabel = ((multiple ? label.join(', ') : label)
                || placeholder && (<span className={classes.placeholder}>
					{placeholder}
				</span>)
                || (<i>&nbsp;</i>));
            if (!faceChild) {
                return (<button type='button' disabled={disabled}>
					{faceLabel}
				</button>);
            }
            const { children: renderFace, ...props } = faceChild.props;
            const faceProps = {
                multiple,
                disabled,
                ...props
            };
            return renderFace(faceLabel, faceProps);
        }
        onDropdownRef(ref) {
            const { elementRef } = this.props;
            this.dropdownRef = ref;
            if (typeof elementRef === 'function') {
                elementRef(ref);
            }
        }
        onDropdownHide(event) {
            const { multiple } = this.props;
            const { dropdownRef } = this;
            if (!multiple && dropdownRef) {
                dropdownRef.toggleActiveState(false, event);
            }
        }
        onChange(nextValue, event) {
            const { onChange } = this.props;
            this.setState(() => ({
                value: nextValue
            }));
            if (typeof onChange === 'function') {
                onChange(nextValue, event);
            }
        }
    }
    CustomSelect.propTypes = {
        ...CustomFlatSelect.propTypes,
        elementRef: PropTypes.func,
        style: PropTypes.object,
        placeholder: PropTypes.string
    };
    CustomSelect.defaultProps = CustomFlatSelect.defaultProps;
    CustomSelect.getDerivedStateFromProps = CustomFlatSelect.getDerivedStateFromProps;
    __decorate([
        Bind()
    ], CustomSelect.prototype, "onDropdownRef", null);
    __decorate([
        Bind()
    ], CustomSelect.prototype, "onDropdownHide", null);
    __decorate([
        Bind()
    ], CustomSelect.prototype, "onChange", null);
    return CustomSelect;
})();
export default CustomSelect;
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ3VzdG9tU2VsZWN0LmpzeCIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0N1c3RvbVNlbGVjdC9DdXN0b21TZWxlY3QudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQU1iLGFBQWEsRUFDYixRQUFRLEVBQ1IsTUFBTSxPQUFPLENBQUM7QUFDZixPQUFPLFNBQVMsTUFBTSxZQUFZLENBQUM7QUFDbkMsT0FBTyxFQUVOLElBQUksRUFDSixJQUFJLEVBQ0osaUJBQWlCLEVBQ2pCLE1BQU0sZUFBZSxDQUFDO0FBSXZCLE9BQU8sY0FBYyxNQUFNLDBCQUEwQixDQUFDO0FBQ3RELE9BQU8sUUFBUSxFQUFFLEVBRWhCLGVBQWUsRUFDZixNQUFNLGFBQWEsQ0FBQztBQUNyQixPQUFPLGdCQUVOLE1BQU0scUJBQXFCLENBQUM7QUFDN0IsT0FBTyxFQUNOLGtCQUFrQixFQUNsQixNQUFNLG9CQUFvQixDQUFDO0FBQzVCLE9BQU8sRUFDTixLQUFLLEVBQ0wsT0FBTyxFQUNQLE1BQU0sdUJBQXVCLENBQUM7QUFFL0IsY0FBYyxvQkFBb0IsQ0FBQztBQUNuQyxjQUFjLHNCQUFzQixDQUFDO0FBaUJyQztJQUFBLE1BQXFCLFlBQWEsU0FBUSxhQUE2QjtRQWV0RSxZQUFZLEtBQUs7WUFFaEIsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO1lBSk4sZ0JBQVcsR0FBYSxJQUFJLENBQUM7WUFNcEMsTUFBTSxFQUNMLFlBQVksRUFDWixHQUFHLEtBQUssQ0FBQztZQUVWLElBQUksQ0FBQyxLQUFLLEdBQUc7Z0JBQ1osS0FBSyxFQUFFLFlBQVk7YUFDbkIsQ0FBQztRQUNILENBQUM7UUFFRCxNQUFNO1lBRUwsTUFBTSxFQUNMLFNBQVMsRUFDVCxpQkFBaUIsRUFBRSxjQUFjLEVBQ2pDLFlBQVksRUFBRSxTQUFTLEVBQ3ZCLEtBQUssRUFBRSxTQUFTLEVBQ2hCLElBQUksRUFDSixXQUFXLEVBQ1gs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