@wix/design-system
Version:
@wix/design-system
425 lines (424 loc) • 12.6 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";
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/esm/Table/test/testExamples.jsx",
_this = this;
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; })(); }
import React from 'react';
import { ExternalLink, Star, Download, Duplicate, Print } from '@wix/wix-ui-icons-common';
import { Table } from '..';
import TableToolbar from '../../TableToolbar';
import Dropdown from '../../Dropdown';
import TableActionCell from '../../TableActionCell';
import Card from '../../Card';
import Search from '../../Search';
import TextButton from '../../TextButton';
import ImagePlaceholder from '../../../stories/utils/ImagePlaceholder';
export var ToolbarExample = function ToolbarExample() {
var collectionOptions = [{
id: 0,
value: 'All Products'
}, {
id: 1,
value: 'Towels'
}, {
id: 2,
value: 'Slippers'
}];
var filterOptions = [{
id: 0,
value: 'All'
}, {
id: 1,
value: 'Red'
}, {
id: 2,
value: 'Cyan'
}];
return /*#__PURE__*/React.createElement(TableToolbar, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 32,
columnNumber: 5
}
}, /*#__PURE__*/React.createElement(TableToolbar.ItemGroup, {
position: "start",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 33,
columnNumber: 7
}
}, /*#__PURE__*/React.createElement(TableToolbar.Item, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 34,
columnNumber: 9
}
}, /*#__PURE__*/React.createElement(TableToolbar.Title, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 35,
columnNumber: 11
}
}, "My Table")), /*#__PURE__*/React.createElement(TableToolbar.Item, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 37,
columnNumber: 9
}
}, /*#__PURE__*/React.createElement(TableToolbar.Label, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 38,
columnNumber: 11
}
}, "Collection", /*#__PURE__*/React.createElement("span", {
style: {
width: '150px'
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 40,
columnNumber: 13
}
}, /*#__PURE__*/React.createElement(Dropdown, {
options: collectionOptions,
selectedId: 0,
border: "round",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 41,
columnNumber: 15
}
})))), /*#__PURE__*/React.createElement(TableToolbar.Item, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 49,
columnNumber: 9
}
}, /*#__PURE__*/React.createElement(TableToolbar.Label, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 50,
columnNumber: 11
}
}, "Filter By", /*#__PURE__*/React.createElement("span", {
style: {
width: '86px'
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 52,
columnNumber: 13
}
}, /*#__PURE__*/React.createElement(Dropdown, {
options: filterOptions,
selectedId: 0,
border: "round",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 53,
columnNumber: 15
}
}))))), /*#__PURE__*/React.createElement(TableToolbar.ItemGroup, {
position: "end",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 58,
columnNumber: 7
}
}, /*#__PURE__*/React.createElement(TableToolbar.Item, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 59,
columnNumber: 9
}
}, /*#__PURE__*/React.createElement(Search, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 60,
columnNumber: 11
}
}))));
};
export var ToolbarWithBulSelectionCheckboxExample = function ToolbarWithBulSelectionCheckboxExample() {
return /*#__PURE__*/React.createElement(TableToolbar, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 69,
columnNumber: 5
}
}, /*#__PURE__*/React.createElement(TableToolbar.ItemGroup, {
position: "start",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 70,
columnNumber: 7
}
}, /*#__PURE__*/React.createElement(TableToolbar.Item, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 71,
columnNumber: 9
}
}, /*#__PURE__*/React.createElement(Table.BulkSelectionCheckbox, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 72,
columnNumber: 11
}
}, "Select all"))));
};
export var EmptyStateExample = function EmptyStateExample() {
return /*#__PURE__*/React.createElement(Table.EmptyState, {
title: "You haven't added any items yet",
subtitle: "Add items to your website so people can buy them",
image: /*#__PURE__*/React.createElement(ImagePlaceholder, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 83,
columnNumber: 12
}
}),
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 80,
columnNumber: 3
}
}, /*#__PURE__*/React.createElement(TextButton, {
suffixIcon: /*#__PURE__*/React.createElement(ExternalLink, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 85,
columnNumber: 29
}
}),
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 85,
columnNumber: 5
}
}, "Learn how to add items"));
};
// TODO: Migrate to visual-grid (currently is being used to E2E)
export var ActionCellExample = /*#__PURE__*/function (_React$Component) {
function ActionCellExample() {
var _this2;
_classCallCheck(this, ActionCellExample);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this2 = _callSuper(this, ActionCellExample, [].concat(args));
_this2.baseData = [{
name: 'Apple Towels',
SKU: '111222',
price: '$2.00',
inventory: 'In stock'
}, {
name: 'Cyan Towels',
SKU: '222333',
price: '$2.00',
inventory: 'In stock'
}, {
name: 'Marble Slippers',
SKU: '333444',
price: '$14.00',
inventory: 'In stock'
}, {
name: 'Red Slippers',
SKU: '444555',
price: '$14.00',
inventory: 'Out of stock'
}];
_this2.primaryAction = function (rowData) {
return window.alert("Editing ".concat(rowData.name));
};
return _this2;
}
_inherits(ActionCellExample, _React$Component);
return _createClass(ActionCellExample, [{
key: "render",
value: function render() {
var _this3 = this;
return /*#__PURE__*/React.createElement(Card, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 124,
columnNumber: 7
}
}, /*#__PURE__*/React.createElement(Table, {
dataHook: "story-action-cell-primary-secondary-example",
data: this.baseData,
itemsPerPage: 20,
showSelection: true,
onRowClick: this.primaryAction,
columns: [{
title: 'Name',
render: function render(row) {
return /*#__PURE__*/React.createElement("span", {
__self: _this3,
__source: {
fileName: _jsxFileName,
lineNumber: 134,
columnNumber: 30
}
}, row.name);
},
width: '20%'
}, {
title: 'SKU',
render: function render(row) {
return /*#__PURE__*/React.createElement("span", {
__self: _this3,
__source: {
fileName: _jsxFileName,
lineNumber: 139,
columnNumber: 30
}
}, row.SKU);
},
width: '10%'
}, {
title: 'Price',
render: function render(row) {
return /*#__PURE__*/React.createElement("span", {
__self: _this3,
__source: {
fileName: _jsxFileName,
lineNumber: 144,
columnNumber: 30
}
}, row.price);
},
width: '10%'
}, {
title: 'Inventory',
render: function render(row) {
return /*#__PURE__*/React.createElement("span", {
__self: _this3,
__source: {
fileName: _jsxFileName,
lineNumber: 149,
columnNumber: 30
}
}, row.inventory);
},
width: '20%'
}, {
title: '',
width: '40%',
render: function render(rowData) {
return /*#__PURE__*/React.createElement(TableActionCell, {
dataHook: "action-cell-component-secondary",
primaryAction: {
text: 'Edit',
skin: 'standard'
},
secondaryActions: [{
text: 'Star',
icon: /*#__PURE__*/React.createElement(Star, {
__self: _this3,
__source: {
fileName: _jsxFileName,
lineNumber: 165,
columnNumber: 29
}
}),
onClick: function onClick() {
return window.alert("Starring ".concat(rowData.name));
}
}, {
text: 'Download',
icon: /*#__PURE__*/React.createElement(Download, {
__self: _this3,
__source: {
fileName: _jsxFileName,
lineNumber: 170,
columnNumber: 29
}
}),
onClick: function onClick() {
return window.alert("Downloading ".concat(rowData.name));
}
}, {
text: 'Duplicate',
icon: /*#__PURE__*/React.createElement(Duplicate, {
__self: _this3,
__source: {
fileName: _jsxFileName,
lineNumber: 176,
columnNumber: 29
}
}),
onClick: function onClick() {
return window.alert("Duplicating ".concat(rowData.name));
}
}, {
text: 'Print',
icon: /*#__PURE__*/React.createElement(Print, {
__self: _this3,
__source: {
fileName: _jsxFileName,
lineNumber: 182,
columnNumber: 29
}
}),
onClick: function onClick() {
return window.alert("Printing ".concat(rowData.name));
}
}],
numOfVisibleSecondaryActions: 2,
alwaysShowSecondaryActions: false,
__self: _this3,
__source: {
fileName: _jsxFileName,
lineNumber: 156,
columnNumber: 17
}
});
}
}],
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 125,
columnNumber: 9
}
}, /*#__PURE__*/React.createElement(Table.Content, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 193,
columnNumber: 11
}
})));
}
}]);
}(React.Component);