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.
140 lines (139 loc) • 6.89 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, "Full Examples - Default"), /*#__PURE__*/_react.default.createElement(_ItemView.default, {
comment: comment(1),
startAccessory: accessoryStart(9),
endAccessory: accessoryEnd(17),
displays: displays,
id: "ItemView-one-wrap"
}), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_ItemView.default, {
comment: comment(2),
startAccessory: accessoryStart(10),
endAccessory: accessoryEnd(18),
displays: displays,
layout: "twoColumns",
trueColumn: true,
id: "ItemView-two-wrap"
}), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("h2", null, "Full Examples - Truncated"), /*#__PURE__*/_react.default.createElement(_ItemView.default, {
displays: displays,
isTruncated: true,
comment: comment(3),
startAccessory: accessoryStart(11),
endAccessory: accessoryEnd(19),
textEmphasis: "start",
id: "ItemView-one-truncate"
}), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_ItemView.default, {
displays: displays,
isTruncated: true,
comment: comment(4),
startAccessory: accessoryStart(12),
endAccessory: accessoryEnd(20),
layout: "twoColumns",
trueColumn: true,
textEmphasis: "start",
id: "ItemView-two-truncate"
}), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("h2", null, "Partial Truncation Examples - Single Column"), /*#__PURE__*/_react.default.createElement(_ItemView.default, {
displays: leftPartialTruncatedDisplays,
comment: comment(5),
startAccessory: accessoryStart(13),
endAccessory: accessoryEnd(21),
textEmphasis: "start",
id: "ItemView-one-partial-truncate"
}), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("h2", null, "Partial Truncation Examples - Two Column Left and Right Truncated"), /*#__PURE__*/_react.default.createElement(_ItemView.default, {
displays: partialTruncatedDisplays,
comment: comment(6),
startAccessory: accessoryStart(14),
endAccessory: accessoryEnd(22),
layout: "twoColumns",
trueColumn: true,
textEmphasis: "start",
id: "ItemView-two-partial-truncate"
}), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("h2", null, "Partial Truncation Examples - Two Column Left Truncated"), /*#__PURE__*/_react.default.createElement(_ItemView.default, {
displays: leftPartialTruncatedDisplays,
comment: comment(7),
startAccessory: accessoryStart(15),
endAccessory: accessoryEnd(23),
layout: "twoColumns",
trueColumn: true,
textEmphasis: "start",
id: "ItemView-two-partial-left-truncate"
}), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("h2", null, "Partial Truncation Examples - Two Column Right Truncated"), /*#__PURE__*/_react.default.createElement(_ItemView.default, {
displays: rightPartialTruncatedDisplays,
comment: comment(8),
startAccessory: accessoryStart(16),
endAccessory: accessoryEnd(24),
layout: "twoColumns",
trueColumn: true,
textEmphasis: "start",
id: "ItemView-two-partial-right-truncate"
}));
};
var _default = exports.default = views;