@carbon/ibm-security
Version:
Carbon for Cloud & Cognitive IBM Security UI components
178 lines (177 loc) • 9.87 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@storybook/react");
var _addonActions = require("@storybook/addon-actions");
var _ = require("../../..");
var _storybook = require("../../../../.storybook");
var _Button = _interopRequireDefault(require("../../Button"));
var _IconButton = _interopRequireDefault(require("../../IconButton"));
var _Search = _interopRequireDefault(require("../../Search"));
var _mocks_ = require("../_mocks_");
var _carbonComponentsReact = require("carbon-components-react");
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
* @file Data table pagination stories.
* @copyright IBM Security 2019 - 2021
*/
var label = 'Add new row';
var render = function render(_ref) {
var rows = _ref.rows,
headers = _ref.headers,
getBatchActionProps = _ref.getBatchActionProps,
getHeaderProps = _ref.getHeaderProps,
getSelectionProps = _ref.getSelectionProps,
onInputChange = _ref.onInputChange,
selectedRows = _ref.selectedRows;
return /*#__PURE__*/_react.default.createElement(_.TableContainer, null, /*#__PURE__*/_react.default.createElement(_.TableBatchActions, getBatchActionProps(), /*#__PURE__*/_react.default.createElement(_.TableBatchAction, {
onClick: function onClick() {
return (0, _addonActions.action)('onClick')(selectedRows);
}
}, "TableBatchAction")), /*#__PURE__*/_react.default.createElement(_.TableToolbar, null, /*#__PURE__*/_react.default.createElement(_.TableToolbarContent, null, /*#__PURE__*/_react.default.createElement(_Search.default, {
onChange: onInputChange,
placeholder: "Search",
collapsible: true
}), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
label: label,
onClick: (0, _addonActions.action)(label),
width: 16,
height: 16,
name: "settings",
size: "lg"
}), /*#__PURE__*/_react.default.createElement(_Button.default, {
onClick: (0, _addonActions.action)(label),
kind: "primary"
}, "Add new"))), /*#__PURE__*/_react.default.createElement(_.Table, null, headers && /*#__PURE__*/_react.default.createElement(_.TableHead, null, /*#__PURE__*/_react.default.createElement(_.TableRow, null, /*#__PURE__*/_react.default.createElement(_.TableSelectAll, getSelectionProps()), headers.map(function (header) {
return /*#__PURE__*/_react.default.createElement(_.TableHeader, (0, _extends2.default)({
key: header.id
}, getHeaderProps({
header: header
})), header.header);
}))), /*#__PURE__*/_react.default.createElement(_.TableBody, null, rows.map(function (row) {
return /*#__PURE__*/_react.default.createElement(_.TableRow, {
key: row.id
}, /*#__PURE__*/_react.default.createElement(_.TableSelectRow, getSelectionProps({
row: row
})), row.cells.map(function (cell) {
return /*#__PURE__*/_react.default.createElement(_.TableCell, {
key: cell.id
}, cell.value ? cell.value : _mocks_.missingDataCharacter);
}));
}))));
};
var renderWithoutHeaders = function renderWithoutHeaders(props) {
return render(_objectSpread(_objectSpread({}, props), {}, {
headers: null
}));
};
var dataTableProps = {
headers: _mocks_.headers,
isSelectable: _mocks_.isSelectable,
isSortable: _mocks_.isSortable,
missingDataCharacter: _mocks_.missingDataCharacter,
rows: _mocks_.rows
};
var dataTablePaginationProps = _objectSpread(_objectSpread({}, dataTableProps), {}, {
page: _mocks_.page,
pageSize: _mocks_.pageSize,
pageSizes: _mocks_.pageSizes,
totalItems: _mocks_.rows.length
});
(0, _react2.storiesOf)((0, _storybook.components)('DataTablePagination#legacy'), module).addDecorator(function (Story) {
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.InlineNotification, {
className: "page-layouts__banner",
actions: /*#__PURE__*/_react.default.createElement(_.NotificationActionButton, {
href: "https://react.carbondesignsystem.com/?path=/story/components-pagination--multiple-pagination-components",
rel: "noopener noreferrer",
target: "_blank"
}, "View replacement"),
kind: "info",
subtitle: "Component no longer supported. The component will remain available, but plan to migrate to the component replacement.",
title: "",
hideCloseButton: true
}), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Grid, null, /*#__PURE__*/_react.default.createElement(Story, null)));
}).add('pagination data table', function () {
_.DataTablePagination.__docgenInfo = _objectSpread(_objectSpread({}, _.DataTablePagination.__docgenInfo), {}, {
props: _objectSpread(_objectSpread({}, _.DataTablePagination.__docgenInfo.props), _.DataTable.__docgenInfo.props)
});
return /*#__PURE__*/_react.default.createElement(_.DataTablePagination, dataTablePaginationProps);
}).add("pagination data table with backend data", function () {
function sliceRows(_ref2) {
var page = _ref2.page,
pageSize = _ref2.pageSize;
var start = pageSize * (page - 1);
var end = start + pageSize;
return _mocks_.rows.slice(start, end);
}
var MockDataProvider = /*#__PURE__*/function (_React$Component) {
function MockDataProvider() {
var _this;
(0, _classCallCheck2.default)(this, MockDataProvider);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, MockDataProvider, [].concat(args));
(0, _defineProperty2.default)(_this, "state", {
resultSet: sliceRows({
page: _mocks_.page,
pageSize: _mocks_.pageSize
})
});
(0, _defineProperty2.default)(_this, "fetchPage", function (_ref3) {
var page = _ref3.page,
pageSize = _ref3.pageSize;
setTimeout(function () {
_this.setState({
resultSet: sliceRows({
page: page,
pageSize: pageSize
})
});
}, 1000);
});
return _this;
}
(0, _inherits2.default)(MockDataProvider, _React$Component);
return (0, _createClass2.default)(MockDataProvider, [{
key: "render",
value: function render() {
var resultSet = this.state.resultSet;
return /*#__PURE__*/_react.default.createElement(_.DataTablePagination, (0, _extends2.default)({}, dataTablePaginationProps, {
rows: resultSet,
useBackendPagination: true,
onChange: this.fetchPage
}));
}
}]);
}(_react.default.Component);
MockDataProvider.displayName = 'DataTablePagination';
MockDataProvider.__docgenInfo = _objectSpread(_objectSpread({}, _.DataTablePagination.__docgenInfo), {}, {
props: _objectSpread(_objectSpread({}, _.DataTablePagination.__docgenInfo.props), _.DataTable.__docgenInfo.props)
});
MockDataProvider.defaultProps = _.DataTablePagination.defaultProps;
return /*#__PURE__*/_react.default.createElement(MockDataProvider, null);
}).add('render custom pagination', function () {
_.DataTablePagination.__docgenInfo = _objectSpread(_objectSpread({}, _.DataTablePagination.__docgenInfo), {}, {
props: _objectSpread(_objectSpread({}, _.DataTablePagination.__docgenInfo.props), _.DataTable.__docgenInfo.props)
});
return /*#__PURE__*/_react.default.createElement(_.DataTablePagination, (0, _extends2.default)({}, dataTablePaginationProps, {
render: render
}));
}).add('render custom pagination without headers', function () {
_.DataTablePagination.__docgenInfo = _objectSpread(_objectSpread({}, _.DataTablePagination.__docgenInfo), {}, {
props: _objectSpread(_objectSpread({}, _.DataTablePagination.__docgenInfo.props), _.DataTable.__docgenInfo.props)
});
return /*#__PURE__*/_react.default.createElement(_.DataTablePagination, (0, _extends2.default)({}, dataTablePaginationProps, {
render: renderWithoutHeaders
}));
});