wix-style-react
Version:
wix-style-react
111 lines • 5.17 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import Checkbox from '../../Checkbox';
import ToggleSwitch from '../../ToggleSwitch';
import Radio from '../../Radio';
import Text from '../../Text';
import Collapse from '../../Collapse';
import Divider from '../../Divider';
import { dataHooks, TYPES } from '../constants';
import { isString } from '../../utils/StringUtils';
import { st, classes } from './Item.st.css';
import { WixStyleReactContext } from '../../WixStyleReactProvider/context';
class SelectableAccordionItem extends React.PureComponent {
constructor() {
super(...arguments);
this.state = { hovered: false };
this._onChange = event => {
const { idx, type, open, onChange, disabled } = this.props;
if (disabled) {
return;
}
if (type === 'radio' && open) {
return;
}
onChange(event, idx, !open);
};
this._onMouseEnter = () => this.setState({ hovered: true });
this._onMouseLeave = () => this.setState({ hovered: false });
}
_renderSelector() {
const { type, open, disabled } = this.props;
let selector = null;
switch (type) {
case TYPES.CHECKBOX:
selector = (React.createElement(Checkbox, { checked: open, onChange: this._onChange, disabled: disabled }));
break;
case TYPES.RADIO:
selector = (React.createElement(Radio, { checked: open, onChange: this._onChange, disabled: disabled }));
break;
case TYPES.TOGGLE:
selector = (React.createElement(ToggleSwitch, { checked: open, onChange: this._onChange, size: "small", disabled: disabled }));
break;
default:
break;
}
return (React.createElement("span", { className: classes.selectorToggle, onClick: e => e.stopPropagation() }, selector));
}
_renderTitle() {
const { title } = this.props;
if (isString(title)) {
return (React.createElement(Text, { weight: "normal", size: "medium" }, title));
}
else {
return title;
}
}
_renderContent() {
const { content } = this.props;
return isString(content) ? (React.createElement(Text, { className: classes.text, size: "small", weight: "thin" }, content)) : (content);
}
_renderSubtitle() {
const { subtitle } = this.props;
return isString(subtitle) ? (React.createElement(Text, { ellipsis: true, size: "small", weight: "thin" }, subtitle)) : (subtitle);
}
render() {
const { hovered } = this.state;
const { open, verticalPadding, disabled, content } = this.props;
return (React.createElement(WixStyleReactContext.Consumer, null, ({ newColorsBranding }) => (React.createElement("div", { "data-hook": dataHooks.item, "data-state": open ? 'open' : 'collapsed', "data-disabled": disabled, className: st(classes.item, {
hovered: !open && hovered,
verticalPadding,
disabled,
newColorsBranding,
}) },
React.createElement("div", { onMouseEnter: this._onMouseEnter, onMouseLeave: this._onMouseLeave, onClick: this._onChange, className: classes.selector }, this._renderSelector()),
React.createElement("div", { "data-hook": dataHooks.itemHeader, onMouseEnter: this._onMouseEnter, onMouseLeave: this._onMouseLeave, onClick: this._onChange, className: classes.header },
this._renderTitle(),
this._renderSubtitle()),
React.createElement("div", { className: classes.content },
content ? (React.createElement(Collapse, { open: open },
React.createElement("div", { className: classes.inner }, this._renderContent()))) : null,
React.createElement("div", { className: classes.divider },
React.createElement(Divider, null)))))));
}
}
SelectableAccordionItem.propTypes = {
/** A title of the item */
title: PropTypes.node,
/** An optional second row of the header */
subtitle: PropTypes.node,
/** A content of the item */
content: PropTypes.node,
/** A type can be ether radio, checkbox, or toggle, which will effect the way an accordion item is selected */
type: PropTypes.oneOf(['radio', 'checkbox', 'toggle']),
/** A flag that indicates a open state */
open: PropTypes.bool,
/** An index of the item in the items list */
idx: PropTypes.number,
/** A callback which is invoked every time the selection of the item is changed */
onChange: PropTypes.func,
/** Extra space on top and bottom of selectable accordion item */
verticalPadding: PropTypes.oneOf(['medium', 'small', 'tiny']),
/** Is item disabled */
disabled: PropTypes.bool,
};
SelectableAccordionItem.defaultProps = {
type: 'toggle',
onChange: () => { },
};
SelectableAccordionItem.displayName = 'SelectableAccordionItem';
export default SelectableAccordionItem;
//# sourceMappingURL=Item.js.map