@carbon/ibm-security
Version:
Carbon for Cloud & Cognitive IBM Security UI components
178 lines (177 loc) • 9.06 kB
JavaScript
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _extends from "@babel/runtime/helpers/extends";
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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) { _defineProperty(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
*/
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { DataTable, DataTablePagination, Table, TableBatchAction, TableBatchActions, TableBody, TableCell, TableContainer, TableHead, TableHeader, TableRow, TableSelectAll, TableSelectRow, TableToolbar, TableToolbarContent } from '../../..';
import { components } from '../../../../.storybook';
import Button from '../../Button';
import IconButton from '../../IconButton';
import Search from '../../Search';
import { headers, isSelectable, isSortable, missingDataCharacter, rows, pageSizes, pageSize, page } from '../_mocks_';
import { Grid } from 'carbon-components-react';
import { InlineNotification, NotificationActionButton } from '../../..';
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.createElement(TableContainer, null, /*#__PURE__*/React.createElement(TableBatchActions, getBatchActionProps(), /*#__PURE__*/React.createElement(TableBatchAction, {
onClick: function onClick() {
return action('onClick')(selectedRows);
}
}, "TableBatchAction")), /*#__PURE__*/React.createElement(TableToolbar, null, /*#__PURE__*/React.createElement(TableToolbarContent, null, /*#__PURE__*/React.createElement(Search, {
onChange: onInputChange,
placeholder: "Search",
collapsible: true
}), /*#__PURE__*/React.createElement(IconButton, {
label: label,
onClick: action(label),
width: 16,
height: 16,
name: "settings",
size: "lg"
}), /*#__PURE__*/React.createElement(Button, {
onClick: action(label),
kind: "primary"
}, "Add new"))), /*#__PURE__*/React.createElement(Table, null, headers && /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableSelectAll, getSelectionProps()), headers.map(function (header) {
return /*#__PURE__*/React.createElement(TableHeader, _extends({
key: header.id
}, getHeaderProps({
header: header
})), header.header);
}))), /*#__PURE__*/React.createElement(TableBody, null, rows.map(function (row) {
return /*#__PURE__*/React.createElement(TableRow, {
key: row.id
}, /*#__PURE__*/React.createElement(TableSelectRow, getSelectionProps({
row: row
})), row.cells.map(function (cell) {
return /*#__PURE__*/React.createElement(TableCell, {
key: cell.id
}, cell.value ? cell.value : missingDataCharacter);
}));
}))));
};
var renderWithoutHeaders = function renderWithoutHeaders(props) {
return render(_objectSpread(_objectSpread({}, props), {}, {
headers: null
}));
};
var dataTableProps = {
headers: headers,
isSelectable: isSelectable,
isSortable: isSortable,
missingDataCharacter: missingDataCharacter,
rows: rows
};
var dataTablePaginationProps = _objectSpread(_objectSpread({}, dataTableProps), {}, {
page: page,
pageSize: pageSize,
pageSizes: pageSizes,
totalItems: rows.length
});
storiesOf(components('DataTablePagination#legacy'), module).addDecorator(function (Story) {
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InlineNotification, {
className: "page-layouts__banner",
actions: /*#__PURE__*/React.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.createElement(Grid, null, /*#__PURE__*/React.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.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 rows.slice(start, end);
}
var MockDataProvider = /*#__PURE__*/function (_React$Component) {
function MockDataProvider() {
var _this;
_classCallCheck(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));
_defineProperty(_this, "state", {
resultSet: sliceRows({
page: page,
pageSize: pageSize
})
});
_defineProperty(_this, "fetchPage", function (_ref3) {
var page = _ref3.page,
pageSize = _ref3.pageSize;
setTimeout(function () {
_this.setState({
resultSet: sliceRows({
page: page,
pageSize: pageSize
})
});
}, 1000);
});
return _this;
}
_inherits(MockDataProvider, _React$Component);
return _createClass(MockDataProvider, [{
key: "render",
value: function render() {
var resultSet = this.state.resultSet;
return /*#__PURE__*/React.createElement(DataTablePagination, _extends({}, dataTablePaginationProps, {
rows: resultSet,
useBackendPagination: true,
onChange: this.fetchPage
}));
}
}]);
}(React.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.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.createElement(DataTablePagination, _extends({}, 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.createElement(DataTablePagination, _extends({}, dataTablePaginationProps, {
render: renderWithoutHeaders
}));
});