frc-ui/lib/tree/Item.js

React Web UI

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = _default;

var _react = _interopRequireDefault(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _checkbox = _interopRequireDefault(require("../checkbox"));

var _switcherIcon = _interopRequireDefault(require("../components/switcher-icon"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _default(props) {
  var prefix = props.prefix,
      className = props.className,
      option = props.option,
      onChange = props.onChange,
      expanded = props.expanded,
      checked = props.checked,
      hasSelected = props.hasSelected,
      rowHeight = props.rowHeight,
      parentWidth = props.parentWidth,
      clickRow = props.clickRow;
  var text = option.text,
      selectEnable = option.selectEnable,
      expandEnable = option.expandEnable,
      expandPlace = option.expandPlace,
      disabled = option.disabled,
      index = option.index,
      render = option.render,
      expandedIcon = option.expandedIcon;
  var cls = (0, _classnames["default"])("".concat(prefix, "-item"), className, {
    disabled: 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);
    }
  }

  var paddingLeft = index * 20 + 10;
  var style = {
    paddingLeft: paddingLeft,
    height: rowHeight,
    lineHeight: "".concat(rowHeight, "px")
  };

  if (hasSelected) {
    style.color = '#F9C152';
  }

  var hidden = !expandEnable && !expandPlace;
  var expandProps = {
    expanded: expanded,
    hidden: !expandEnable && expandPlace,
    onChange: expand,
    style: {
      lineHeight: "".concat(rowHeight, "px")
    }
  };
  var otherIcon;

  if (typeof expandedIcon === 'function') {
    otherIcon = expandedIcon(option, expanded, checked);
    hidden = false;
    expandProps.hidden = false;
    expandProps.icon = otherIcon;
  }

  var icon = !hidden && /*#__PURE__*/_react["default"].createElement(_switcherIcon["default"], Object.assign({}, expandProps));

  var textLeftWidth = (!hidden ? 12 + 4 : 0) + (selectEnable ? 12 + 4 : 0);
  var textStyle = {
    width: "calc(100% - ".concat(textLeftWidth, "px)")
  };
  var content = text;

  if (typeof render === 'function') {
    var 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);
  }

  var contentProps = {};
  if (clickRow) contentProps.onClick = expand;
  if (selectEnable) contentProps.onClick = select;
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: cls,
    style: style
  }, icon, selectEnable && /*#__PURE__*/_react["default"].createElement(_checkbox["default"], {
    checked: checked,
    onChange: select,
    style: {
      lineHeight: "".concat(rowHeight, "px")
    }
  }), /*#__PURE__*/_react["default"].createElement("div", Object.assign({
    className: "".concat(prefix, "-item-text"),
    style: textStyle
  }, contentProps), content));
}