terra-clinical-item-display
Version:
The Item Display component creates an display for text and an optional graphic. The Comment subcomponent creates a display for text with a comment icon.
152 lines (150 loc) • 8.11 kB
JavaScript
;
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.TextStyles = 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 _terraVisuallyHiddenText = _interopRequireDefault(require("terra-visually-hidden-text"));
var _reactIntl = require("react-intl");
var _ItemDisplayModule = _interopRequireDefault(require("./ItemDisplay.module.scss"));
var _excluded = ["text", "textStyle", "isTruncated", "isDisabled", "icon", "iconAlignment", "textStyleMeaning", "intl"];
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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(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 _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(_ItemDisplayModule.default);
var TextStyles = exports.TextStyles = {
PRIMARY: 'primary',
SECONDARY: 'secondary',
ATTENTION: 'attention',
STRIKETHROUGH: 'strikeThrough',
STRONG: 'strong'
};
var propTypes = {
/**
* The text to be displayed for the comment.
*/
text: _propTypes.default.string,
/**
* The visual style to be applied to the display element.
* One of `'primary'`, `'secondary'`, `'strong'`, `'attention'`, or `'strikeThrough'`.
*/
textStyle: _propTypes.default.oneOf(Object.values(TextStyles)),
/**
* Whether or not the text should be truncated. Note: To ensure keyboard accessibility, if this prop
* is used, consumers will need to provide a method to disclose the rest of the text so that it is
* accessible to keyboard users.
*/
isTruncated: _propTypes.default.bool,
// TODO: remove isDisabled in the next major release.
/**
* (Deprecated) Whether or not the display is disabled.
*/
isDisabled: _propTypes.default.bool,
/**
* The icon react element to be displayed next to the display text.
*/
icon: _propTypes.default.element,
/**
* The position of the icon to be displayed next to the text,
* noticeable when the text display wraps multiple line.
* One of `'center'`, `'top'`, `'inline'`.
*/
iconAlignment: _propTypes.default.oneOf(['center', 'top', 'inline']),
/**
* 
* The meaning of the text styling, for use by screen readers.
* Changing `textStyleMeaning` will not visually change the style of the content.
* Defaults to "deletion" for `textStyle` of `'strikeThrough'`.
*/
textStyleMeaning: _propTypes.default.string,
/**
* @private
* The intl object containing translations. This is retrieved from the context automatically by injectIntl.
*/
intl: _propTypes.default.shape({
formatMessage: _propTypes.default.func
}).isRequired
};
var defaultProps = {
text: '',
textStyle: 'primary',
isTruncated: false,
isDisabled: false,
icon: undefined,
iconAlignment: 'center'
};
var ItemDisplay = function ItemDisplay(_ref) {
var text = _ref.text,
textStyle = _ref.textStyle,
isTruncated = _ref.isTruncated,
isDisabled = _ref.isDisabled,
icon = _ref.icon,
iconAlignment = _ref.iconAlignment,
textStyleMeaning = _ref.textStyleMeaning,
intl = _ref.intl,
customProps = _objectWithoutProperties(_ref, _excluded);
var theme = _react.default.useContext(_terraThemeContext.default);
var componentClassNames = (0, _classnames.default)(cx('item-display', {
'is-disabled': isDisabled
}, _defineProperty({}, "icon-".concat(iconAlignment), icon), theme.className), customProps.className);
var textClassNames = cx(['text', {
'is-truncated': isTruncated
}, _defineProperty({}, "".concat(textStyle), textStyle === TextStyles.SECONDARY), _defineProperty({}, "".concat(textStyle), textStyle === TextStyles.ATTENTION), _defineProperty({}, "".concat(textStyle), textStyle === TextStyles.STRONG), {
'strike-through': textStyle === TextStyles.STRIKETHROUGH
}]);
// TODO: remove this warning in the next major release.
if (isDisabled) {
// eslint-disable-next-line no-console
console.warn('The isDisabled prop does not meet a11y standards and should not be used. It will be removed in the next major release.');
}
var displayIcon;
if (icon) {
displayIcon = /*#__PURE__*/_react.default.createElement("div", {
className: cx('icon')
}, icon);
}
var textWrapper = /*#__PURE__*/_react.default.createElement("span", null, text);
if (textStyle === TextStyles.STRONG) {
textWrapper = /*#__PURE__*/_react.default.createElement("strong", null, text);
}
var hiddenStyleMeaning;
var hiddenStyleMeaningEnd;
if (textStyleMeaning) {
hiddenStyleMeaning = textStyleMeaning;
hiddenStyleMeaningEnd = intl.formatMessage({
id: 'Terra.itemDisplay.textStyleMeaningEnd'
}, {
textStyleMeaning: textStyleMeaning
});
} else if (textStyle === TextStyles.STRIKETHROUGH) {
hiddenStyleMeaning = intl.formatMessage({
id: 'Terra.itemDisplay.textStyleMeaningStrikethrough'
});
hiddenStyleMeaningEnd = intl.formatMessage({
id: 'Terra.itemDisplay.textStyleMeaningStrikethroughEnd'
});
}
return /*#__PURE__*/_react.default.createElement("div", _extends({}, customProps, {
className: componentClassNames,
"aria-disabled": isDisabled
}), displayIcon, hiddenStyleMeaning && /*#__PURE__*/_react.default.createElement(_terraVisuallyHiddenText.default, {
text: hiddenStyleMeaning
}), /*#__PURE__*/_react.default.createElement("div", {
"data-terra-clinical-item-display-text": true,
className: textClassNames
}, textWrapper), hiddenStyleMeaningEnd && /*#__PURE__*/_react.default.createElement(_terraVisuallyHiddenText.default, {
text: hiddenStyleMeaningEnd
}));
};
ItemDisplay.propTypes = propTypes;
ItemDisplay.defaultProps = defaultProps;
var _default = exports.default = (0, _reactIntl.injectIntl)(ItemDisplay);