@talend/react-components/lib/DataViewer/ModelViewer/Branch/ModelViewerBranch.component.js

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _Text = require("../../Text");
var _Icons = require("../../Icons");
var _ModelViewerModule = _interopRequireDefault(require("../ModelViewer.module.scss"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function getBranchDisplayKey(union, hasSemanticAwareness, getDisplayKey, value) {
  if (union) {
    return '({...})';
  } else if (hasSemanticAwareness) {
    return `${getDisplayKey(value)}`;
  }
  return '';
}

/**
 * Render Model branch.
 * All the stuff about managing the special union case that needs to be expanded by default,
 * will be improve later on.
 * This is the workaround to make it work for now.
 */
class ModelViewerBranch extends _react.Component {
  constructor(...args) {
    super(...args);
    /*
    	We made this state props to keep track
    	of the first click on a branch.
    	It is used for the union case that needs
    	to be expand by default.
    */
    _defineProperty(this, "state", {
      firstClickUnion: true
    });
    /*
    	Union have to be expanded by default.
    	So for the first click we have to change the state of the component,
    	to keep the state that it has been clicked.
    	We don't keep the track in others cases, no need for free render.
     */
    _defineProperty(this, "onClickLeafBranch", event => {
      const options = {
        jsonpath: this.props.jsonpath,
        opened: this.props.opened,
        value: this.props.value
      };
      const union = this.props.isUnion(this.props.value);
      console.log('#### union', union, this.props.isUnion());
      if (this.state.firstClickUnion && union) {
        this.setState({
          firstClickUnion: false
        }, this.props.onToggle(event, {
          ...options,
          firstClickUnion: true
        }, this.props.index));
      } else {
        this.props.onToggle(event, options, this.props.index);
      }
    });
  }
  render() {
    const {
      dataKey,
      index,
      jsonpath,
      jsonPathSelection,
      level,
      opened,
      type,
      value
    } = this.props;
    const union = this.props.isUnion(value);
    const displayKey = getBranchDisplayKey(union, this.props.hasSemanticAwareness, this.props.getDisplayKey, value);
    const customOpened = union && this.state.firstClickUnion ? true : opened;
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: (0, _classnames.default)(_ModelViewerModule.default['tc-model-branch'], 'tc-model-branch', {
        [_ModelViewerModule.default['tc-model-branch-padding-left']]: level > 0,
        'tc-model-branch-padding-left': level > 0
      }),
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
        className: (0, _classnames.default)(_ModelViewerModule.default['tc-model-branch-content'], 'tc-model-branch-content'),
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
          "data-testid": "model-branch-button",
          className: (0, _classnames.default)(_ModelViewerModule.default['tc-model-branch-button'], 'tc-model-branch-button', {
            [_ModelViewerModule.default['tc-model-branch-button-highlighted']]: jsonpath === jsonPathSelection,
            'tc-model-branch-button-highlighted': jsonpath === jsonPathSelection
          }),
          onClick: this.onClickLeafBranch
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.TreeBranchIcon, {
          dataKey: dataKey,
          index: index,
          opened: customOpened,
          jsonpath: jsonpath,
          onToggle: this.onClickLeafBranch,
          value: value,
          className: (0, _classnames.default)(_ModelViewerModule.default['tc-model-branch-icon'], 'tc-model-branch-icon')
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.SimpleTextKeyValue, {
          formattedKey: this.props.getDisplayValue(value),
          formattedValue: displayKey,
          separator: " "
        })]
      }), customOpened && this.props.recursive({
        type,
        value: this.props.getChilds(value)
      })]
    });
  }
}
exports.default = ModelViewerBranch;
_defineProperty(ModelViewerBranch, "propTypes", {
  dataKey: _propTypes.default.string,
  getChilds: _propTypes.default.func,
  getDisplayKey: _propTypes.default.func,
  getDisplayValue: _propTypes.default.func,
  hasSemanticAwareness: _propTypes.default.bool,
  index: _propTypes.default.number,
  isUnion: _propTypes.default.func,
  jsonpath: _propTypes.default.string,
  jsonPathSelection: _propTypes.default.string,
  level: _propTypes.default.number,
  onToggle: _propTypes.default.func,
  opened: _propTypes.default.bool,
  recursive: _propTypes.default.func,
  type: _propTypes.default.string,
  value: _propTypes.default.object
});
//# sourceMappingURL=ModelViewerBranch.component.js.map