gsy-component-library/build/components/TreeView/TreeLeaf.js

reusable components from grid singularity

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _bind = require('classnames/bind');

var _bind2 = _interopRequireDefault(_bind);

var _reactInlinesvg = require('react-inlinesvg');

var _reactInlinesvg2 = _interopRequireDefault(_reactInlinesvg);

var _Diamond = require('../Diamond/Diamond');

var _Diamond2 = _interopRequireDefault(_Diamond);

var _TreeTitle = require('./TreeTitle');

var _TreeTitle2 = _interopRequireDefault(_TreeTitle);

var _TextInputField = require('../TextInputField/TextInputField');

var _TextInputField2 = _interopRequireDefault(_TextInputField);

var _NumberPicker = require('../NumberPicker/NumberPicker');

var _NumberPicker2 = _interopRequireDefault(_NumberPicker);

var _PopOutMenu = require('../PopOutMenu/PopOutMenu');

var _PopOutMenu2 = _interopRequireDefault(_PopOutMenu);

var _icon_cross = require('../../images/icon_cross.svg');

var _icon_cross2 = _interopRequireDefault(_icon_cross);

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var TreeLeaf = function (_Component) {
  _inherits(TreeLeaf, _Component);

  function TreeLeaf(props) {
    _classCallCheck(this, TreeLeaf);

    var _this = _possibleConstructorReturn(this, (TreeLeaf.__proto__ || Object.getPrototypeOf(TreeLeaf)).call(this, props));

    _this.setInactive = function () {
      _this.setState({
        active: false
      });
    };

    _this.toggleActive = function () {
      _this.setState({
        active: !_this.state.active
      });
    };

    _this.handleClick = function () {
      if (_this.props.onLeafClick) {
        _this.props.onLeafClick();

        if (_this.props.refHook && _this.props.refHook.current) {
          _this.props.refHook.current.setInactive();
        }
      } else {
        _this.toggleActive();
      }
    };

    _this.handleTitleChange = function (ev) {
      var value = ev.target.value;


      _this.setState({
        title: value
      });

      _this.props.onTitleChange(value);
    };

    var active = props.active,
        title = props.title;


    _this.state = {
      active: active,
      title: title
    };
    return _this;
  }

  _createClass(TreeLeaf, [{
    key: 'componentDidUpdate',
    value: function componentDidUpdate(prevProps) {
      if (this.props.active !== prevProps.active) {
        this.setState({
          active: this.props.active
        });
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          className = _props.className,
          iconUrl = _props.iconUrl,
          type = _props.type,
          kind = _props.kind,
          numberPicker = _props.numberPicker,
          children = _props.children,
          popOutMenu = _props.popOutMenu,
          menuItems = _props.menuItems,
          onDelete = _props.onDelete,
          title = _props.title,
          editable = _props.editable;


      var leafClasses = (0, _bind2.default)('treeView__leaf', className, { 'treeView__leaf--active': this.state.active });

      var treeTitle = editable ? _react2.default.createElement(_TextInputField2.default, {
        name: 'title',
        value: this.state.title,
        onChange: function onChange(e) {
          return _this2.handleTitleChange(e);
        },
        disabled: !this.state.active
      }) : _react2.default.createElement(
        'span',
        { className: 'treeView__title__text' },
        title
      );

      var leafDiamond = popOutMenu ? _react2.default.createElement(_PopOutMenu2.default, {
        size: kind,
        menuItems: menuItems,
        active: this.state.active,
        onKeyPress: this.handleClick,
        onClick: this.handleClick,
        role: 'button',
        tabIndex: 0
      }) : _react2.default.createElement(_Diamond2.default, {
        iconUrl: iconUrl,
        type: type,
        kind: kind,
        active: this.state.active,
        onKeyPress: this.handleClick,
        onClick: this.handleClick,
        role: 'button',
        tabIndex: 0
      });

      var childrenWithProps = _react2.default.Children.map(children, function (child) {
        return _react2.default.cloneElement(child, {
          active: _this2.state.active,
          setInactive: _this2.setInactive
        });
      });

      return _react2.default.createElement(
        'div',
        { className: leafClasses },
        _react2.default.createElement(
          'div',
          { className: 'treeView__leaf__content' },
          this.state.active && _react2.default.createElement(
            'div',
            {
              className: 'treeView__leaf__delete',
              onKeyPress: onDelete,
              onClick: onDelete,
              role: 'button',
              tabIndex: 0,
              title: 'remove node'
            },
            _react2.default.createElement(_reactInlinesvg2.default, { src: _icon_cross2.default })
          ),
          leafDiamond,
          _react2.default.createElement(
            _TreeTitle2.default,
            null,
            treeTitle
          ),
          numberPicker && _react2.default.createElement(_NumberPicker2.default, {
            defaultValue: 1,
            inactive: !this.state.active,
            disabled: !this.state.active
          })
        ),
        childrenWithProps
      );
    }
  }]);

  return TreeLeaf;
}(_react.Component);

exports.default = TreeLeaf;


TreeLeaf.propTypes = {
  type: _propTypes2.default.string,
  kind: _propTypes2.default.string,
  className: _propTypes2.default.string,
  iconUrl: _propTypes2.default.string,
  numberPicker: _propTypes2.default.bool,
  children: _propTypes2.default.node,
  popOutMenu: _propTypes2.default.bool,
  menuItems: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    callback: _propTypes2.default.func.isRequired,
    type: _propTypes2.default.string.isRequired,
    iconUrl: _propTypes2.default.string.isRequired
  })),
  onDelete: _propTypes2.default.func,
  editable: _propTypes2.default.bool,
  active: _propTypes2.default.bool,
  title: _propTypes2.default.string,
  onTitleChange: _propTypes2.default.func,
  refHook: _propTypes2.default.shape({
    current: null
  }),
  onLeafClick: _propTypes2.default.func
};

TreeLeaf.defaultProps = {
  type: 'house',
  kind: 'medium',
  className: '',
  iconUrl: '',
  active: false,
  title: 'foobar',
  numberPicker: false,
  children: undefined,
  refHook: undefined,
  popOutMenu: false,
  menuItems: [],
  editable: true,
  onTitleChange: function onTitleChange() {},
  onDelete: function onDelete() {},
  onLeafClick: undefined
};