'use strict';
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
/*
*+------------------------------------------------------------------------+
*| Licensed Materials - Property of IBM
*| IBM Cognos Products: Content Explorer
*| (C) Copyright IBM Corp. 2019
*|
*| US Government Users Restricted Rights - Use, duplication or disclosure
*| restricted by GSA ADP Schedule Contract with IBM Corp.
*+------------------------------------------------------------------------+
*/
define(['react', 'ca-ui-toolkit', 'prop-types', '../../../../app/ui/dialogs/EditableDialog', '../nls/StringResources'], function (React, UI_TOOLKIT, PropTypes, EditableDialog, StringResources) {
/**
* @description This class provides all of the contents inside a serviceability panel.
* The UI is a two-level hierarchy. The first level is Section, and the second level is Field.
*
* For each Section, it has an attribute called "open" to control if this section should be
* opened in default. It also has an attribute called "sectionName" which should be a string.
* If "sectionName" is an empty string, the section name component will not be rendered.
*
* For each Field, it has attributes which are "fieldName", "fieldValue", and "type". They are all
* strings. The values of "fieldName" and "fieldValue" could be any string. If "fieldName" is an
* empty string, the field name component will not be rendered. "type" is also a string and its
* value should be one of ['SimpleTable', 'Default', 'ReactNode']. If "type" is not specified, we will render
* it in a default way.
*
* If the "type" is 'SimpleTable', the "fieldValues" should be an object which has the following properties:
* - columnLength: how many columns you want to display
* - rowLength: how many rows you want to display
* - headerValue: (col) => {return value;}, where "col" is an integer represents the column number, and "value"
* is a string.
* - cellValue: (row, col) => {return value;}, where "row" and "col" are row number and col number which both
* are integers. The "value" should be a string.
*
* A object should be provided to tell this class how to render Sections and Fields. It should looks like:
* [
* {
* sectionName: 'section A',
* sectionValues: [{
* fieldName: 'field a1',
* fieldValue: 'field value of a1',
* type: 'SimpleTable'
* },
* {
* fieldName: 'field a2',
* fieldValue: 'field value of a2'
* }
* ],
* properties: {
* open: true | false
* }
* },
* {
* sectionName: 'section B',
* sectionValues: [],
* properties: {}
* }
* ]
* Content has all components on a serviceability panel.
* It consists of many sections, which consists of many fields.
*/
var Label = UI_TOOLKIT.Label;
var Container = UI_TOOLKIT.Container;
var Button = UI_TOOLKIT.Button;
var ToggleSwitchSection = UI_TOOLKIT.ToggleSwitchSection;
var CollapsibleSection = UI_TOOLKIT.CollapsibleSection;
var Paragraph = UI_TOOLKIT.Paragraph;
var Separator = UI_TOOLKIT.Separator;
var SimpleTable = UI_TOOLKIT.SimpleTable;
var FIELD_TITLE_CLASS = 's12yFieldTitle';
var FIELD_VALUE_CLASS = 's12yFieldValue';
var SHOW_INFO_ON_ALL_CONTENTS = StringResources.get('showInfoForAll');
var HIDE_INFO_ON_ALL_CONTENTS = StringResources.get('hideInfoForAll');
var Content = function (_React$Component) {
_inherits(Content, _React$Component);
function Content(props) {
_classCallCheck(this, Content);
var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
_this._dashboardS12yFeature = _this.props.dashboardApi.getFeature('Serviceability');
_this.state = {
infoIsVisible: _this._dashboardS12yFeature.isInfoVisible()
};
_this._onClickSpec = _this._onClickSpec.bind(_this);
_this._onClickShowInfo = _this._onClickShowInfo.bind(_this);
_this._fieldContentGenerators = {
'SimpleTable': _this._createSimpleTable.bind(_this),
'Default': _this._createParagraph.bind(_this),
'ReactNode': function ReactNode(fieldSpec) {
return fieldSpec.node;
}
};
return _this;
}
Content.prototype._onClickSpec = function _onClickSpec() {
var allSpec = { 'widget spec': this.props.widgetInfo.getSpec(), 'dashboard spec': this.props.dashboardApi.getSpec() };
var buttons = [{
type: 's12yDialogCopyButton',
text: StringResources.get('copyButton'),
handler: function handler() {
document.execCommand('copy');
},
defaultId: 's12yDialogCopyButton'
}, {
text: StringResources.get('closeButton'),
type: 'secondary s12yDialogCloseButton',
defaultId: 'close'
}];
var options = {
sType: 'editableInfo',
sTitle: StringResources.get('specification'),
sValue: JSON.stringify(allSpec, null, 4),
updateable: false,
showCloseX: true,
buttons: buttons
};
var boardModelDialog = new EditableDialog(options);
boardModelDialog.open();
};
Content.prototype._onClickShowInfo = function _onClickShowInfo(willShowInfo) {
if (willShowInfo === true) {
this._dashboardS12yFeature.showInfo();
} else {
this._dashboardS12yFeature.hideInfo();
}
this.setState({ infoIsVisible: willShowInfo });
};
Content.prototype.render = function render() {
var _this2 = this;
var sections = this.props.UISpec.map(function (sectionSpec) {
return _this2._createSection(sectionSpec);
});
var showInfoToggle = !this.props.showButtons ? null : React.createElement(ToggleSwitchSection, {
label: this.state.infoIsVisible ? HIDE_INFO_ON_ALL_CONTENTS : SHOW_INFO_ON_ALL_CONTENTS,
rtl: false,
className: 'showInfoToggle',
checked: this.state.infoIsVisible,
onChange: this._onClickShowInfo
});
var specButton = !this.props.showButtons ? null : React.createElement(Button, {
label: StringResources.get('showDetails'),
className: 'specDialogButton',
onClick: this._onClickSpec,
intent: 'primary'
});
this.container = React.createElement(
Container,
{ width: 'auto', className: 's12yContent' },
sections,
showInfoToggle,
specButton
);
return this.container;
};
Content.prototype._createSection = function _createSection(sectionSpec) {
var _this3 = this;
var fields = sectionSpec.sectionValues.map(function (fieldSpec, fieldIndex) {
var isLastField = fieldIndex + 1 === sectionSpec.sectionValues.length;
return _this3._createField(fieldSpec, isLastField);
});
var section = void 0;
if (sectionSpec.sectionName === '') {
section = React.createElement(
React.Fragment,
null,
fields
);
} else {
// Take section name, convert to lower case, and get rid of any spaces if any
var id = 'serviceability_section_' + sectionSpec.sectionName.toLowerCase().replace(/\s/g, '');
section = React.createElement(
CollapsibleSection,
{
id: id,
'aria-controls': id,
label: sectionSpec.sectionName,
defaultOpen: sectionSpec.properties.open,
labelStyle: {
'font-size': '16px',
'font-weight': 'bold',
'padding-left': '8px'
},
className: 's12ySection' },
fields,
React.createElement(Separator, { className: 'sectionSeparator' })
);
}
return section;
};
Content.prototype._createField = function _createField(fieldSpec, isLastField) {
var fieldContent = void 0;
var fieldContentGenerator = this._fieldContentGenerators[fieldSpec.type];
if (!fieldContentGenerator) {
fieldContentGenerator = this._fieldContentGenerators['Default'];
}
fieldContent = fieldContentGenerator(fieldSpec);
// Take field name, convert to lower case, and get rid of any spaces if any
var id = 'serviceability_field_' + fieldSpec.fieldName.toLowerCase().replace(/\s/g, '');
return React.createElement(
Container,
{ id: id, 'aria-controls': id, className: 's12yField' },
fieldContent,
isLastField ? null : React.createElement(Separator, { className: 'fieldSeparator' })
);
};
Content.prototype._createParagraph = function _createParagraph(fieldSpec) {
return React.createElement(
Container,
{ className: 'Default' },
React.createElement(Label, { className: FIELD_TITLE_CLASS, label: fieldSpec.fieldName, type: 'caption' }),
React.createElement(
Paragraph,
{ className: FIELD_VALUE_CLASS },
' ',
fieldSpec.fieldValue,
' '
)
);
};
Content.prototype._createSimpleTable = function _createSimpleTable(fieldSpec) {
return React.createElement(
Container,
{ className: 'SimpleTable' },
fieldSpec.fieldName === '' ? null : React.createElement(Label, { className: FIELD_TITLE_CLASS, label: fieldSpec.fieldName, type: 'caption' }),
React.createElement(SimpleTable, {
className: 's12ySimpleTable',
colLength: fieldSpec.fieldValue.columnLength,
rowLength: fieldSpec.fieldValue.rowLength,
headerRenderer: function headerRenderer(col) {
var header = void 0;
if (typeof fieldSpec.fieldValue.headerValue === 'function') {
header = React.createElement(
Paragraph,
{ className: FIELD_VALUE_CLASS + ' s12ySimpleTableHeader s12ySimpleTableHeader_' + col },
fieldSpec.fieldValue.headerValue(col)
);
} else {
header = null;
}
return header;
},
cellRenderer: function cellRenderer(row, col) {
return React.createElement(
Paragraph,
{ className: FIELD_VALUE_CLASS + ' s12ySimpleTableCell s12ySimpleTableCell_' + row + '_' + col },
fieldSpec.fieldValue.cellValue(row, col)
);
} })
);
};
return Content;
}(React.Component);
Content.propTypes = {
widgetInfo: PropTypes.shape({
getSpec: PropTypes.func
}),
dashboardApi: PropTypes.any,
UISpec: PropTypes.array,
showButtons: PropTypes.bool
};
return Content;
});
//# sourceMappingURL=ServiceabilityContent.js.map