@flexis/ui
Version:
Styleless React Components
98 lines • 6.94 kB
JavaScript
import { __decorate } from "tslib";
import React, { PureComponent, Children, cloneElement } from 'react';
import PropTypes from 'prop-types';
import { Bind, omit, getAriaLabelProps } from '../../helpers';
import { style, classes } from './Expand.st.css';
export * from './ExpandTitle';
export * from './ExpandContent';
let Expand = /** @class */ (() => {
class Expand extends PureComponent {
constructor(props) {
super(props);
const { defaultActive } = props;
this.state = {
active: defaultActive
};
}
static getDerivedStateFromProps({ active, disabled }, { active: prevActive }) {
const nextActive = !disabled && (typeof active === 'boolean'
? active
: prevActive);
if (nextActive === prevActive) {
return null;
}
return {
active: nextActive
};
}
render() {
const { className, disabled, children, ...props } = this.props;
const { active } = this.state;
const [title, content] = Children.toArray(children);
return (<div {...omit(props, [
'defaultActive',
'active',
'onToggle'
])} className={style(classes.root, {
active,
disabled
}, className)} aria-disabled={disabled}>
{cloneElement(title, {
'onClick': this.onToggle,
'aria-haspopup': true,
'aria-expanded': active,
'aria-disabled': disabled,
'disabled': disabled
})}
{cloneElement(content, {
...getAriaLabelProps({
role: 'region',
labelledBy: title.props.id
}, content.props),
'aria-hidden': !active
})}
</div>);
}
onToggle(event) {
this.toggleActiveState(null, event);
}
toggleActiveState(forceState, event = null) {
const { active: activeProp, onToggle, disabled } = this.props;
if (disabled) {
return;
}
const { active } = this.state;
const nextActive = typeof forceState === 'boolean'
? forceState
: !active;
if (nextActive === active) {
return;
}
if (typeof activeProp !== 'boolean') {
this.setState(() => ({
active: nextActive
}));
}
if (typeof onToggle === 'function') {
onToggle(nextActive, event);
}
}
}
Expand.propTypes = {
onToggle: PropTypes.func,
defaultActive: PropTypes.bool,
active: PropTypes.bool,
disabled: PropTypes.bool,
children: PropTypes.arrayOf(PropTypes.element).isRequired
};
Expand.defaultProps = {
defaultActive: false,
disabled: false
};
__decorate([
Bind()
], Expand.prototype, "onToggle", null);
return Expand;
})();
export default Expand;
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRXhwYW5kLmpzeCIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0V4cGFuZC9FeHBhbmQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUtiLGFBQWEsRUFDYixRQUFRLEVBQ1IsWUFBWSxFQUNaLE1BQU0sT0FBTyxDQUFDO0FBQ2YsT0FBTyxTQUFTLE1BQU0sWUFBWSxDQUFDO0FBQ25DLE9BQU8sRUFFTixJQUFJLEVBQ0osSUFBSSxFQUNKLGlCQUFpQixFQUNqQixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQ04sS0FBSyxFQUNMLE9BQU8sRUFDUCxNQUFNLGlCQUFpQixDQUFDO0FBRXpCLGNBQWMsZUFBZSxDQUFDO0FBQzlCLGNBQWMsaUJBQWlCLENBQUM7QUFtQmhDO0lBQUEsTUFBcUIsTUFBTyxTQUFRLGFBQTZCO1FBd0NoRSxZQUFZLEtBQUs7WUFFaEIsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO1lBRWIsTUFBTSxFQUNMLGFBQWEsRUFDYixHQUFHLEtBQUssQ0FBQztZQUVWLElBQUksQ0FBQyxLQUFLLEdBQUc7Z0JBQ1osTUFBTSxFQUFFLGFBQWE7YUFDckIsQ0FBQztRQUNILENBQUM7UUFsQ0QsTUFBTSxDQUFDLHdCQUF3QixDQUM5QixFQUNDLE1BQU0sRUFDTixRQUFRLEVBQ0EsRUFDVCxFQUFFLE1BQU0sRUFBRSxVQUFVLEVBQVU7WUFHOUIsTUFBTSxVQUFVLEdBQUcsQ0FBQyxRQUFRLElBQUksQ0FDL0IsT0FBTyxNQUFNLEtBQUssU0FBUztnQkFDMUIsQ0FBQyxDQUFDLE1BQU07Z0JBQ1IsQ0FBQyxDQUFDLFVBQVUsQ0FDYixDQUFDO1lBRUYsSUFBSSxVQUFVLEtBQUssVUFBVSxFQUFFO2dCQUM5QixPQUFPLElBQUksQ0FBQzthQUNaO1lBRUQsT0FBTztnQkFDTixNQUFNLEVBQUUsVUFBVTthQUNsQixDQUFDO1FBQ0gsQ0FBQztRQWVELE1BQU07WUFF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