@talend/react-components/lib/DataViewer/ModelViewer/Leaf/ModelViewerLeaf.component.js

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ModelViewerLeaf = ModelViewerLeaf;
exports.default = void 0;
exports.isOptional = isOptional;
var _classnames = _interopRequireDefault(require("classnames"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _translate = _interopRequireDefault(require("../../../translate"));
var _Text = require("../../Text");
var _ModelViewerModule = _interopRequireDefault(require("../ModelViewer.module.scss"));
var _lodash = require("lodash");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/**
 * Union with only two type and one null, are represent as leaf.
 * So here we are adding a * to show which leaf are mandatory.
 * The other ones, with no *, are the union with one null type.
 * @param {object} item
 */
function isOptional(item) {
  if (item.optional) {
    return '';
  }
  return '*';
}

/**
 * Render leaf model.
 */
function ModelViewerLeaf({
  className,
  dataKey,
  getDisplayKey,
  getDisplayValue,
  getDisplayClassName,
  hasSemanticAwareness,
  jsonpath,
  jsonPathSelection,
  level,
  onSelect,
  t,
  value,
  renderLeafOptions
}) {
  const onClickLeaf = event => {
    if (onSelect) {
      onSelect(event, jsonpath, value);
    }
  };
  const ariaLabelButton = t('MODEL_VIEWER_LEAF_BUTTON_ARIA_LABEL_SELECT', {
    defaultValue: 'Select'
  });
  const modelClassName = getDisplayClassName(value);
  const displayValue = getDisplayValue(value);
  const formattedKey = displayValue && hasSemanticAwareness ? `${displayValue}${isOptional(value)}` : displayValue;
  const formattedValue = hasSemanticAwareness ? `${getDisplayKey(value)}` : '';
  const separator = ' ';
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
    className: (0, _classnames.default)(className, modelClassName, _ModelViewerModule.default['tc-model-leaf'], 'tc-model-leaf', {
      [_ModelViewerModule.default['tc-model-leaf-padding-left']]: level > 0,
      'tc-model-leaf-padding-left': level > 0
    }),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
      "aria-label": `${ariaLabelButton} ${dataKey} (${jsonpath})`,
      title: `${formattedKey || ''}${formattedValue ? `${separator}${formattedValue}` : ''}`,
      className: (0, _classnames.default)({
        [_ModelViewerModule.default['tc-model-leaf-button-highlighted']]: jsonpath === jsonPathSelection,
        'tc-model-leaf-button-highlighted': jsonpath === jsonPathSelection
      }, _ModelViewerModule.default['tc-model-leaf-button'], 'tc-model-leaf-button'),
      "data-testid": "model-leaf-button",
      onClick: onClickLeaf
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.SimpleTextKeyValue, {
      formattedKey: formattedKey,
      value: formattedValue,
      separator: separator
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
      className: (0, _classnames.default)(_ModelViewerModule.default['tc-model-leaf-options'], 'tc-model-leaf-options'),
      children: renderLeafOptions ? renderLeafOptions(value) : null
    })]
  });
}
ModelViewerLeaf.propTypes = {
  className: _propTypes.default.string,
  dataKey: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
  getDisplayClassName: _propTypes.default.func,
  getDisplayKey: _propTypes.default.func,
  getDisplayValue: _propTypes.default.func.isRequired,
  hasSemanticAwareness: _propTypes.default.bool,
  jsonpath: _propTypes.default.string.isRequired,
  jsonPathSelection: _propTypes.default.string,
  level: _propTypes.default.number,
  onSelect: _propTypes.default.func,
  t: _propTypes.default.func,
  value: _propTypes.default.object,
  renderLeafOptions: _propTypes.default.func
};
ModelViewerLeaf.defaultProps = {
  t: (0, _translate.default)(),
  getDisplayClassName: _lodash.noop
};
var _default = exports.default = ModelViewerLeaf;
//# sourceMappingURL=ModelViewerLeaf.component.js.map