@wix/design-system/dist/cjs/Table/test/testExamples.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.ToolbarWithBulSelectionCheckboxExample = exports.ToolbarExample = exports.EmptyStateExample = exports.ActionCellExample = void 0;
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 _react = _interopRequireDefault(require("react"));
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _ = require("..");
var _TableToolbar = _interopRequireDefault(require("../../TableToolbar"));
var _Dropdown = _interopRequireDefault(require("../../Dropdown"));
var _TableActionCell = _interopRequireDefault(require("../../TableActionCell"));
var _Card = _interopRequireDefault(require("../../Card"));
var _Search = _interopRequireDefault(require("../../Search"));
var _TextButton = _interopRequireDefault(require("../../TextButton"));
var _ImagePlaceholder = _interopRequireDefault(require("../../../stories/utils/ImagePlaceholder"));
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Table/test/testExamples.jsx",
  _this = void 0;
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; })(); }
var ToolbarExample = exports.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["default"].createElement(_TableToolbar["default"], {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 32,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react["default"].createElement(_TableToolbar["default"].ItemGroup, {
    position: "start",
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 33,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react["default"].createElement(_TableToolbar["default"].Item, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 34,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react["default"].createElement(_TableToolbar["default"].Title, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 35,
      columnNumber: 11
    }
  }, "My Table")), /*#__PURE__*/_react["default"].createElement(_TableToolbar["default"].Item, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 37,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react["default"].createElement(_TableToolbar["default"].Label, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 38,
      columnNumber: 11
    }
  }, "Collection", /*#__PURE__*/_react["default"].createElement("span", {
    style: {
      width: '150px'
    },
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 40,
      columnNumber: 13
    }
  }, /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
    options: collectionOptions,
    selectedId: 0,
    border: "round",
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 41,
      columnNumber: 15
    }
  })))), /*#__PURE__*/_react["default"].createElement(_TableToolbar["default"].Item, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 49,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react["default"].createElement(_TableToolbar["default"].Label, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 50,
      columnNumber: 11
    }
  }, "Filter By", /*#__PURE__*/_react["default"].createElement("span", {
    style: {
      width: '86px'
    },
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 52,
      columnNumber: 13
    }
  }, /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
    options: filterOptions,
    selectedId: 0,
    border: "round",
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 53,
      columnNumber: 15
    }
  }))))), /*#__PURE__*/_react["default"].createElement(_TableToolbar["default"].ItemGroup, {
    position: "end",
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 58,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react["default"].createElement(_TableToolbar["default"].Item, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 59,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react["default"].createElement(_Search["default"], {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 60,
      columnNumber: 11
    }
  }))));
};
var ToolbarWithBulSelectionCheckboxExample = exports.ToolbarWithBulSelectionCheckboxExample = function ToolbarWithBulSelectionCheckboxExample() {
  return /*#__PURE__*/_react["default"].createElement(_TableToolbar["default"], {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 69,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react["default"].createElement(_TableToolbar["default"].ItemGroup, {
    position: "start",
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 70,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react["default"].createElement(_TableToolbar["default"].Item, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 71,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react["default"].createElement(_.Table.BulkSelectionCheckbox, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 72,
      columnNumber: 11
    }
  }, "Select all"))));
};
var EmptyStateExample = exports.EmptyStateExample = function EmptyStateExample() {
  return /*#__PURE__*/_react["default"].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["default"].createElement(_ImagePlaceholder["default"], {
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 83,
        columnNumber: 12
      }
    }),
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 80,
      columnNumber: 3
    }
  }, /*#__PURE__*/_react["default"].createElement(_TextButton["default"], {
    suffixIcon: /*#__PURE__*/_react["default"].createElement(_wixUiIconsCommon.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)
var ActionCellExample = exports.ActionCellExample = /*#__PURE__*/function (_React$Component) {
  function ActionCellExample() {
    var _this2;
    (0, _classCallCheck2["default"])(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;
  }
  (0, _inherits2["default"])(ActionCellExample, _React$Component);
  return (0, _createClass2["default"])(ActionCellExample, [{
    key: "render",
    value: function render() {
      var _this3 = this;
      return /*#__PURE__*/_react["default"].createElement(_Card["default"], {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 124,
          columnNumber: 7
        }
      }, /*#__PURE__*/_react["default"].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["default"].createElement("span", {
              __self: _this3,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 134,
                columnNumber: 30
              }
            }, row.name);
          },
          width: '20%'
        }, {
          title: 'SKU',
          render: function render(row) {
            return /*#__PURE__*/_react["default"].createElement("span", {
              __self: _this3,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 139,
                columnNumber: 30
              }
            }, row.SKU);
          },
          width: '10%'
        }, {
          title: 'Price',
          render: function render(row) {
            return /*#__PURE__*/_react["default"].createElement("span", {
              __self: _this3,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 144,
                columnNumber: 30
              }
            }, row.price);
          },
          width: '10%'
        }, {
          title: 'Inventory',
          render: function render(row) {
            return /*#__PURE__*/_react["default"].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["default"].createElement(_TableActionCell["default"], {
              dataHook: "action-cell-component-secondary",
              primaryAction: {
                text: 'Edit',
                skin: 'standard'
              },
              secondaryActions: [{
                text: 'Star',
                icon: /*#__PURE__*/_react["default"].createElement(_wixUiIconsCommon.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["default"].createElement(_wixUiIconsCommon.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["default"].createElement(_wixUiIconsCommon.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["default"].createElement(_wixUiIconsCommon.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["default"].createElement(_.Table.Content, {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 193,
          columnNumber: 11
        }
      })));
    }
  }]);
}(_react["default"].Component);