frc-ui
Version:
React Web UI
72 lines (71 loc) • 2.69 kB
JavaScript
import React from 'react';
import classNames from 'classnames';
import Checkbox from '../checkbox';
import SwitcherIcon from '../components/switcher-icon';
export default function (props) {
const { prefix, className, option, onChange, expanded, checked, hasSelected, rowHeight, parentWidth, clickRow } = props;
const { text, selectEnable, expandEnable, expandPlace, disabled, index, render, expandedIcon } = option;
const cls = classNames(`${prefix}-item`, className, {
disabled,
'is-parent': index === 0
});
function expand() {
if (typeof onChange === 'function' && !disabled) {
onChange('expand', !expanded);
}
}
function select() {
if (typeof onChange === 'function' && !disabled) {
onChange('check', !checked);
}
}
const paddingLeft = index * 20 + 10;
let style = {
paddingLeft: paddingLeft,
height: rowHeight,
lineHeight: `${rowHeight}px`
};
if (hasSelected) {
style.color = '#F9C152';
}
let hidden = !expandEnable && !expandPlace;
let expandProps = {
expanded,
hidden: !expandEnable && expandPlace,
onChange: expand,
style: { lineHeight: `${rowHeight}px` }
};
let otherIcon;
if (typeof expandedIcon === 'function') {
otherIcon = expandedIcon(option, expanded, checked);
hidden = false;
expandProps.hidden = false;
expandProps.icon = otherIcon;
}
let icon = !hidden && React.createElement(SwitcherIcon, Object.assign({}, expandProps));
const textLeftWidth = (!hidden ? 12 + 4 : 0) + (selectEnable ? 12 + 4 : 0);
const textStyle = {
width: `calc(100% - ${textLeftWidth}px)`
};
let content = text;
if (typeof render === 'function') {
const span = document.createElement('span');
span.innerText = content;
span.style.visibility = 'hidden';
document.body.appendChild(span);
content = render(option, {
parentWidth: parentWidth - textLeftWidth - paddingLeft - 10,
width: span.offsetWidth
});
document.body.removeChild(span);
}
const contentProps = {};
if (clickRow)
contentProps.onClick = expand;
if (selectEnable)
contentProps.onClick = select;
return (React.createElement("div", { className: cls, style: style },
icon,
selectEnable && React.createElement(Checkbox, { checked: checked, onChange: select, style: { lineHeight: `${rowHeight}px` } }),
React.createElement("div", Object.assign({ className: `${prefix}-item-text`, style: textStyle }, contentProps), content)));
}