terra-clinical-item-view
Version:
The Item View component allows displays to be organized into rows and column and themed, while providing means to add accessory elements and a comment.
114 lines (113 loc) • 5.66 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _IconAlert = _interopRequireDefault(require("terra-icon/lib/icon/IconAlert"));
var _IconInformation = _interopRequireDefault(require("terra-icon/lib/icon/IconInformation"));
var _bind = _interopRequireDefault(require("classnames/bind"));
var _ItemView = _interopRequireDefault(require("../../../ItemView"));
var _ItemViewCommonTestModule = _interopRequireDefault(require("./ItemViewCommon.test.module.scss"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var cx = _bind.default.bind(_ItemViewCommonTestModule.default);
var display1 = /*#__PURE__*/_react.default.createElement(_ItemView.default.Display, {
text: "display1display1display1display1display1display1display1display1display1display1display1display1display1display1",
key: "123"
});
var display2 = /*#__PURE__*/_react.default.createElement(_ItemView.default.Display, {
text: "display2display2display2display2display2display2display2display2display2display2display2display2display2display2",
key: "124"
});
var display3 = /*#__PURE__*/_react.default.createElement(_ItemView.default.Display, {
text: "display 3",
key: "125"
});
var display4 = /*#__PURE__*/_react.default.createElement(_ItemView.default.Display, {
text: "display 4",
key: "126"
});
var display5 = /*#__PURE__*/_react.default.createElement(_ItemView.default.Display, {
text: "display 5",
key: "127"
});
var display6 = /*#__PURE__*/_react.default.createElement(_ItemView.default.Display, {
text: "display 6",
key: "128"
});
var displays = [display1, display2, display3, display4, display5, display6];
var isTruncatedDisplay1 = /*#__PURE__*/_react.default.createElement(_ItemView.default.Display, {
isTruncated: true,
text: "display1display1display1display1display1display1display1display1display1display1display1display1display1display1",
key: "1234"
});
var isTruncatedDisplay2 = /*#__PURE__*/_react.default.createElement(_ItemView.default.Display, {
isTruncated: true,
text: "display2display2display2display2display2display2display2display2display2display2display2display2display2display2",
key: "1245"
});
var partialTruncatedDisplays = [isTruncatedDisplay1, isTruncatedDisplay2, display3, display4, display5, display6];
var leftPartialTruncatedDisplays = [isTruncatedDisplay1, display2, display3, display4, display5, display6];
var rightPartialTruncatedDisplays = [display1, isTruncatedDisplay2, display3, display4, display5, display6];
var accessoryStart = function accessoryStart(id) {
return /*#__PURE__*/_react.default.createElement(_IconAlert.default, {
id: id
});
};
var accessoryEnd = function accessoryEnd(id) {
return /*#__PURE__*/_react.default.createElement(_IconInformation.default, {
id: id
});
};
var comment = function comment(id) {
return /*#__PURE__*/_react.default.createElement(_ItemView.default.Comment, {
id: id,
text: "comment1comment1comment1comment1comment1comment1comment1comment1comment1comment1comment1comment1"
});
};
var views = function views() {
return /*#__PURE__*/_react.default.createElement("div", {
className: cx('overflow-displays-itemview')
}, /*#__PURE__*/_react.default.createElement("p", null, "Applied width of 900px to show the default vs truncated styling."), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("h2", null, "Default ItemView"), /*#__PURE__*/_react.default.createElement(_ItemView.default, {
comment: comment(2),
startAccessory: accessoryStart(10),
endAccessory: accessoryEnd(18),
displays: displays,
layout: "twoColumns",
id: "ItemView-by-row-two-wrap"
}), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("h2", null, "Truncated ItemView"), /*#__PURE__*/_react.default.createElement(_ItemView.default, {
displays: displays,
isTruncated: true,
comment: comment(4),
startAccessory: accessoryStart(12),
endAccessory: accessoryEnd(20),
layout: "twoColumns",
textEmphasis: "start",
id: "ItemView-by-row-two-truncate"
}), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("h2", null, "Left and Right Displays Truncated"), /*#__PURE__*/_react.default.createElement(_ItemView.default, {
displays: partialTruncatedDisplays,
comment: comment(6),
startAccessory: accessoryStart(14),
endAccessory: accessoryEnd(22),
layout: "twoColumns",
textEmphasis: "start",
id: "ItemView-by-row-two-partial-truncate"
}), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("h2", null, "Left Display Truncated"), /*#__PURE__*/_react.default.createElement(_ItemView.default, {
displays: leftPartialTruncatedDisplays,
comment: comment(7),
startAccessory: accessoryStart(15),
endAccessory: accessoryEnd(23),
layout: "twoColumns",
textEmphasis: "start",
id: "ItemView-by-row-two-partial-left-truncate"
}), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("h2", null, "Right Display Truncated"), /*#__PURE__*/_react.default.createElement(_ItemView.default, {
displays: rightPartialTruncatedDisplays,
comment: comment(8),
startAccessory: accessoryStart(16),
endAccessory: accessoryEnd(24),
layout: "twoColumns",
textEmphasis: "start",
id: "ItemView-by-row-two-partial-right-truncate"
}));
};
var _default = exports.default = views;