terra-clinical-label-value-view/lib/LabelValueView.js

The label value view component displays a label and the associated value or list of values underneath the label.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _bind = _interopRequireDefault(require("classnames/bind"));
var _terraThemeContext = _interopRequireDefault(require("terra-theme-context"));
var _LabelValueViewModule = _interopRequireDefault(require("./LabelValueView.module.scss"));
var _excluded = ["label", "textValue", "isChildOfDescriptionList", "ariaLabelledBy", "children"];
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
var cx = _bind.default.bind(_LabelValueViewModule.default);
var propTypes = {
  /**
   * The label of the LabelValueView.
   */
  label: _propTypes.default.string.isRequired,
  /**
  * The text to be displayed underneath the label with the provided styling.
  */
  textValue: _propTypes.default.string,
  /**
  * Indicates if the LabelValueView is created inside a description list or not.
  * If it is not valued, it will take false as a default, meaning that is is not a child of a description list.
  */
  isChildOfDescriptionList: _propTypes.default.bool,
  /**
  * The id of the element to be used as the accessible label for LabelValueView.
  */
  ariaLabelledBy: _propTypes.default.string,
  /**
   *  Child component(s) to display underneath the label.
   */
  children: _propTypes.default.node
};
var defaultProps = {
  textValue: '',
  children: undefined,
  isChildOfDescriptionList: false,
  ariaLabelledBy: undefined
};
var LabelValueView = function LabelValueView(_ref) {
  var label = _ref.label,
    textValue = _ref.textValue,
    isChildOfDescriptionList = _ref.isChildOfDescriptionList,
    ariaLabelledBy = _ref.ariaLabelledBy,
    children = _ref.children,
    customProps = _objectWithoutProperties(_ref, _excluded);
  var textValueSection;
  var theme = _react.default.useContext(_terraThemeContext.default);
  var labelValueViewClass = (0, _classnames.default)(cx('label-value-view', theme.className), customProps.className);
  if (!textValue && !children) {
    textValueSection = /*#__PURE__*/_react.default.createElement("div", {
      className: cx('value')
    }, "--");
  } else if (textValue) {
    textValueSection = /*#__PURE__*/_react.default.createElement("div", {
      className: cx('value')
    }, textValue);
  }
  var termDefinition = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("dt", {
    className: cx('label')
  }, label), /*#__PURE__*/_react.default.createElement("dd", {
    className: cx('value-wrapper')
  }, textValueSection, children));

  /**
   * If LabelValueView is a child of a description list (<dl>), then just the term and definition are returned.
   * Otherwise, a description list encapsulating the term and definition is returned.
   * The reason for this is that <dt> and <dd> tags must always be children of a <dl> to be valid html.
   */
  if (isChildOfDescriptionList) {
    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, termDefinition);
  }
  return /*#__PURE__*/_react.default.createElement("dl", _extends({}, customProps, {
    className: labelValueViewClass,
    "aria-labelledby": ariaLabelledBy
  }), termDefinition);
};
LabelValueView.propTypes = propTypes;
LabelValueView.defaultProps = defaultProps;
var _default = exports.default = LabelValueView;