wix-style-react
Version:
wix-style-react
475 lines (426 loc) • 16.1 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TablePageExample = undefined;
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _Table = require('wix-style-react/Table');
var _TableToolbar = require('wix-style-react/TableToolbar');
var _Dropdown = require('wix-style-react/Dropdown');
var _Dropdown2 = _interopRequireDefault(_Dropdown);
var _Search = require('wix-style-react/Search');
var _Search2 = _interopRequireDefault(_Search);
var _Checkbox = require('wix-style-react/Checkbox');
var _Checkbox2 = _interopRequireDefault(_Checkbox);
var _Card = require('wix-style-react/Card');
var _Card2 = _interopRequireDefault(_Card);
var _Page = require('wix-style-react/Page');
var _Page2 = _interopRequireDefault(_Page);
var _Button = require('wix-style-react/Button');
var _Button2 = _interopRequireDefault(_Button);
var _TextLink = require('wix-style-react/TextLink');
var _TextLink2 = _interopRequireDefault(_TextLink);
var _Text = require('wix-style-react/Text');
var _Text2 = _interopRequireDefault(_Text);
var _newIcons = require('wix-style-react/new-icons');
var _Highlighter = require('wix-style-react/Highlighter');
var _Highlighter2 = _interopRequireDefault(_Highlighter);
var _ImagePlaceholder = require('../assets/ImagePlaceholder');
var _ImagePlaceholder2 = _interopRequireDefault(_ImagePlaceholder);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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; } /* eslint-disable no-console */
var createDataSet = function createDataSet(setIndex) {
return [{
id: setIndex + '-1',
name: 'Apple Towels ' + setIndex,
SKU: '111222',
price: '$2.00',
inventory: 'In stock',
collectionId: 1
}, {
id: setIndex + '-2',
name: 'Cyan Towels ' + setIndex,
SKU: '222333',
price: '$2.00',
inventory: 'In stock',
collectionId: 1,
filterId: 2
}, {
id: setIndex + '-3',
name: 'Marble Slippers ' + setIndex,
SKU: '333444',
price: '$14.00',
inventory: 'In stock',
collectionId: 2
}, {
id: setIndex + '-4',
name: 'Red Slippers ' + setIndex,
SKU: '444555',
price: '$14.00',
inventory: 'Out of stock',
collectionId: 2,
filterId: 1
}];
};
var allData = [1, 2, 3, 4, 5].reduce(function (accum, index) {
return accum.concat(createDataSet(index));
}, []);
var TablePageExample = exports.TablePageExample = function (_React$Component) {
_inherits(TablePageExample, _React$Component);
function TablePageExample() {
var _ref;
var _temp, _this, _ret;
_classCallCheck(this, TablePageExample);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TablePageExample.__proto__ || Object.getPrototypeOf(TablePageExample)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
data: allData,
collectionId: 0,
filterId: 0,
searchTerm: '',
inStock: false
}, _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(TablePageExample, [{
key: 'clearSearch',
value: function clearSearch() {
this.setState({
collectionId: 0,
filterId: 0,
searchTerm: '',
inStock: false
});
}
}, {
key: 'renderMainToolbar',
value: function renderMainToolbar() {
var _this2 = this;
var collectionOptions = [{ id: 0, value: 'All' }, { id: 1, value: 'Towels' }, { id: 2, value: 'Slippers' }];
var filterOptions = [{ id: 0, value: 'All' }, { id: 1, value: 'Red' }, { id: 2, value: 'Cyan' }];
return _react2.default.createElement(
_Card2.default,
null,
_react2.default.createElement(
_TableToolbar.TableToolbar,
null,
_react2.default.createElement(
_TableToolbar.ItemGroup,
{ position: 'start' },
_react2.default.createElement(
_TableToolbar.Item,
null,
_react2.default.createElement(
_TableToolbar.Label,
null,
'Product',
_react2.default.createElement(
'span',
{ style: { width: '150px' } },
_react2.default.createElement(_Dropdown2.default, {
options: collectionOptions,
selectedId: this.state.collectionId,
onSelect: function onSelect(selectedOption) {
_this2.setState({ collectionId: selectedOption.id });
},
roundInput: true
})
)
)
),
_react2.default.createElement(
_TableToolbar.Item,
null,
_react2.default.createElement(
_TableToolbar.Label,
null,
'Color',
_react2.default.createElement(
'span',
{ style: { width: '86px' } },
_react2.default.createElement(_Dropdown2.default, {
options: filterOptions,
selectedId: this.state.filterId,
onSelect: function onSelect(selectedOption) {
return _this2.setState({ filterId: selectedOption.id });
},
roundInput: true
})
)
)
),
_react2.default.createElement(
_TableToolbar.Item,
null,
_react2.default.createElement(
_Checkbox2.default,
{
checked: this.state.inStock,
onChange: function onChange(e) {
return _this2.setState({ inStock: e.target.checked });
}
},
'In Stock only'
)
)
),
_react2.default.createElement(
_TableToolbar.ItemGroup,
{ position: 'end' },
_react2.default.createElement(
_TableToolbar.Item,
null,
this.renderSearch(false)
)
)
)
);
}
}, {
key: 'renderBulkActionsToolbar',
value: function renderBulkActionsToolbar(props) {
return _react2.default.createElement(
_TableToolbar.TableToolbar,
null,
_react2.default.createElement(
_TableToolbar.ItemGroup,
{ position: 'start' },
_react2.default.createElement(
_TableToolbar.Item,
null,
_react2.default.createElement(
_TableToolbar.SelectedCount,
null,
props.selectedCount + ' Selected'
)
)
),
_react2.default.createElement(
_TableToolbar.ItemGroup,
{ position: 'end' },
_react2.default.createElement(
_TableToolbar.Item,
{ layout: 'button' },
_react2.default.createElement(
_Button2.default,
{
theme: 'whiteblueprimary',
prefixIcon: _react2.default.createElement(_newIcons.Upload, null),
onClick: function onClick() {
return window.alert('Exporting selectedIds=' + props.getSelectedIds());
}
},
'Export'
)
),
_react2.default.createElement(
_TableToolbar.Item,
{ layout: 'button' },
_react2.default.createElement(
_Button2.default,
{
theme: 'whiteblueprimary',
prefixIcon: _react2.default.createElement(_newIcons.Duplicate, null),
onClick: function onClick() {
return window.alert('Duplicating selectedIds=' + props.getSelectedIds());
}
},
'Duplicate'
)
),
_react2.default.createElement(
_TableToolbar.Item,
{ layout: 'button' },
_react2.default.createElement(
_Button2.default,
{
theme: 'whiteblueprimary',
prefixIcon: _react2.default.createElement(_newIcons.Edit, null),
onClick: function onClick() {
return window.alert('Editing selectedIds=' + props.getSelectedIds());
}
},
'Edit'
)
),
_react2.default.createElement(_TableToolbar.Divider, null),
_react2.default.createElement(
_TableToolbar.Item,
null,
this.renderSearch(true)
)
)
);
}
}, {
key: 'renderSearch',
value: function renderSearch(expandable) {
var _this3 = this;
return _react2.default.createElement(_Search2.default, {
expandable: expandable,
onChange: function onChange(e) {
_this3.setState({ searchTerm: e.target.value });
},
value: this.state.searchTerm
});
}
}, {
key: 'render',
value: function render() {
var _this4 = this;
var tableData = this.getFilteredData();
return _react2.default.createElement(
'div',
{
style: {
height: '800px',
paddingBottom: '16px',
display: 'flex',
flexFlow: 'column',
minWidth: '966px'
}
},
_react2.default.createElement(
_Table.Table,
{
withWrapper: false,
dataHook: 'story-table-example',
data: tableData,
itemsPerPage: 20,
columns: [{
title: 'Name',
render: function render(row) {
return _react2.default.createElement(
_Highlighter2.default,
{ match: _this4.state.searchTerm },
row.name
);
},
width: '30%',
minWidth: '150px'
}, {
title: 'SKU',
render: function render(row) {
return row.SKU;
},
width: '20%',
minWidth: '100px'
}, {
title: 'Price',
render: function render(row) {
return row.price;
},
width: '20%',
minWidth: '100px'
}, {
title: 'Inventory',
render: function render(row) {
return row.inventory;
},
width: '20%',
minWidth: '100px'
}],
onSelectionChange: function onSelectionChange(selectedIds) {
return console.log('Table.onSelectionChange(): selectedIds=', selectedIds);
},
showSelection: true,
showLastRowDivider: true
},
_react2.default.createElement(
_Page2.default,
null,
_react2.default.createElement(_Page2.default.Header, { title: 'My Table Title' }),
_react2.default.createElement(
_Page2.default.FixedContent,
null,
_react2.default.createElement(
_Card2.default,
null,
_react2.default.createElement(
_Table.Table.ToolbarContainer,
null,
function (selectionContext) {
return selectionContext.selectedCount === 0 ? _this4.renderMainToolbar() : _this4.renderBulkActionsToolbar(selectionContext);
}
),
tableData.length ? _react2.default.createElement(_Table.Table.Titlebar, null) : _react2.default.createElement(
_Table.Table.EmptyState,
{
image: _react2.default.createElement(_ImagePlaceholder2.default, null),
subtitle: this.state.searchTerm ? _react2.default.createElement(
_Text2.default,
null,
'There are no search results for',
' ',
_react2.default.createElement(
_Text2.default,
{ weight: 'normal' },
'"' + this.state.searchTerm + '"'
),
_react2.default.createElement('br', null),
'Try search by other cryteria'
) : _react2.default.createElement(
_Text2.default,
null,
'There are no results matching your filters',
_react2.default.createElement('br', null),
'Try search by other cryteria'
)
},
_react2.default.createElement(
_TextLink2.default,
{ onClick: function onClick() {
return _this4.clearSearch();
} },
'Clear the search'
)
)
)
),
_react2.default.createElement(
_Page2.default.Content,
null,
_react2.default.createElement(
_Card2.default,
null,
_react2.default.createElement(_Table.Table.Content, { titleBarVisible: false })
)
)
)
)
);
}
}, {
key: 'getFilteredData',
value: function getFilteredData() {
var _this5 = this;
var data = allData;
if (this.state.collectionId > 0) {
data = data.filter(function (row) {
return row.collectionId === _this5.state.collectionId;
});
}
if (this.state.filterId > 0) {
data = data.filter(function (row) {
return row.filterId === _this5.state.filterId;
});
}
if (this.state.inStock) {
data = data.filter(function (row) {
return row.inventory === 'In stock';
});
}
if (this.state.searchTerm !== '') {
data = data.filter(function (row) {
return row.name.toUpperCase().includes(_this5.state.searchTerm.toUpperCase());
});
}
return data;
}
}]);
return TablePageExample;
}(_react2.default.Component);