@talend/react-components/lib/DataViewer/RecordsViewer/Leaf/RecordsViewerLeaf.component.js

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.RecordsViewerLeaf = RecordsViewerLeaf;
exports.default = void 0;
var _react = require("react");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _reactI18next = require("react-i18next");
var _constants = _interopRequireDefault(require("../../../constants"));
var _translate = _interopRequireDefault(require("../../../translate"));
var _Text = require("../../Text");
var _Actions = require("../../../Actions");
var _RecordsViewerModule = _interopRequireDefault(require("../RecordsViewer.module.scss"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function RecordsViewerLeaf({
  dataKey,
  value,
  renderLeafAdditionalValue,
  className,
  nodeHighlighted,
  displayTypes,
  typesRenderer,
  measure,
  t
}) {
  const ref = /*#__PURE__*/(0, _react.createRef)();
  const [isValueOverflown, setIsValueOverflown] = (0, _react.useState)(false);
  const [isLongValueExpanded, setIsLongValueExpanded] = (0, _react.useState)(false);
  (0, _react.useLayoutEffect)(() => {
    if (ref.current.offsetParent.offsetWidth < ref.current.scrollWidth) {
      setIsValueOverflown(true);
    }
  }, []);
  (0, _react.useLayoutEffect)(() => {
    measure();
  }, [isLongValueExpanded]);
  const label = isLongValueExpanded ? t('RECORDS_LEAF_LONG_VALUE_LABEL_COLLAPSE', {
    defaultValue: 'Collapse the value'
  }) : t('RECORDS_LEAF_LONG_VALUE_LABEL_EXPAND', {
    defaultValue: 'Expand the value'
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: (0, _classnames.default)(_RecordsViewerModule.default['tc-records-viewer-leaf'], 'tc-records-viewer-leaf', className, {
      [_RecordsViewerModule.default['tc-records-viewer-leaf-highlighted']]: nodeHighlighted,
      'tc-records-viewer-leaf-highlighted': nodeHighlighted
    }),
    children: [isValueOverflown && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
      className: (0, _classnames.default)(_RecordsViewerModule.default['tc-leaf-overflow-icon'], 'tc-leaf-overflow-icon', className),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.ActionButton, {
        icon: "talend-chevron-left",
        iconTransform: isLongValueExpanded ? 'rotate-90' : 'rotate-270',
        link: true,
        hideLabel: true,
        label: label,
        className: (0, _classnames.default)(_RecordsViewerModule.default['tc-leaf-overflow-icon-chevron'], {
          [_RecordsViewerModule.default['tc-leaf-overflow-icon-chevron-filled']]: isLongValueExpanded
        }),
        onClick: e => {
          e.stopPropagation();
          setIsLongValueExpanded(val => !val);
        }
      })
    }), renderLeafAdditionalValue && renderLeafAdditionalValue(value), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.SimpleTextKeyValue, {
      ref: ref,
      formattedKey: dataKey,
      value: value.data,
      schema: value.schema,
      displayTypes: displayTypes,
      typesRenderer: typesRenderer,
      isValueOverflown: isValueOverflown,
      isLongValueToggled: isLongValueExpanded
    })]
  });
}
RecordsViewerLeaf.propTypes = {
  className: _propTypes.default.string,
  dataKey: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
  nodeHighlighted: _propTypes.default.bool,
  value: _propTypes.default.shape({
    data: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string, _propTypes.default.number, _propTypes.default.bool]),
    schema: _propTypes.default.object
  }),
  renderLeafAdditionalValue: _propTypes.default.func,
  displayTypes: _propTypes.default.bool,
  typesRenderer: _propTypes.default.func,
  measure: _propTypes.default.func.isRequired,
  t: _propTypes.default.func
};
RecordsViewerLeaf.defaultProps = {
  t: (0, _translate.default)()
};
var _default = exports.default = (0, _reactI18next.withTranslation)(_constants.default)(RecordsViewerLeaf);
//# sourceMappingURL=RecordsViewerLeaf.component.js.map