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

Set of react components.

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); }
import { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { SimpleTextKeyValue } from '../../Text';
import { TreeBranchIcon } from '../../Icons';
import theme from '../ModelViewer.module.scss';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
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.
 */
export default class ModelViewerBranch extends 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__*/_jsxs("div", {
      className: classNames(theme['tc-model-branch'], 'tc-model-branch', {
        [theme['tc-model-branch-padding-left']]: level > 0,
        'tc-model-branch-padding-left': level > 0
      }),
      children: [/*#__PURE__*/_jsxs("span", {
        className: classNames(theme['tc-model-branch-content'], 'tc-model-branch-content'),
        children: [/*#__PURE__*/_jsx("button", {
          "data-testid": "model-branch-button",
          className: classNames(theme['tc-model-branch-button'], 'tc-model-branch-button', {
            [theme['tc-model-branch-button-highlighted']]: jsonpath === jsonPathSelection,
            'tc-model-branch-button-highlighted': jsonpath === jsonPathSelection
          }),
          onClick: this.onClickLeafBranch
        }), /*#__PURE__*/_jsx(TreeBranchIcon, {
          dataKey: dataKey,
          index: index,
          opened: customOpened,
          jsonpath: jsonpath,
          onToggle: this.onClickLeafBranch,
          value: value,
          className: classNames(theme['tc-model-branch-icon'], 'tc-model-branch-icon')
        }), /*#__PURE__*/_jsx(SimpleTextKeyValue, {
          formattedKey: this.props.getDisplayValue(value),
          formattedValue: displayKey,
          separator: " "
        })]
      }), customOpened && this.props.recursive({
        type,
        value: this.props.getChilds(value)
      })]
    });
  }
}
_defineProperty(ModelViewerBranch, "propTypes", {
  dataKey: PropTypes.string,
  getChilds: PropTypes.func,
  getDisplayKey: PropTypes.func,
  getDisplayValue: PropTypes.func,
  hasSemanticAwareness: PropTypes.bool,
  index: PropTypes.number,
  isUnion: PropTypes.func,
  jsonpath: PropTypes.string,
  jsonPathSelection: PropTypes.string,
  level: PropTypes.number,
  onToggle: PropTypes.func,
  opened: PropTypes.bool,
  recursive: PropTypes.func,
  type: PropTypes.string,
  value: PropTypes.object
});
//# sourceMappingURL=ModelViewerBranch.component.js.map