flipper-ui 0.25.0 → 0.25.3

package/stories/DataTable.stories.js

@@ -0,0 +1,737 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Crud = exports.NoPagination = exports.NoHeader = exports.Empty = exports.Default = exports["default"] = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _format = _interopRequireDefault(require("date-fns/format"));
+
+var _DataTable = _interopRequireDefault(require("../core/DataTable/DataTable"));
+
+var _Button = _interopRequireDefault(require("../core/Button"));
+
+var _Typography = _interopRequireDefault(require("../core/Typography"));
+
+var _DataTableAction = require("../core/DataTable/DataTableAction");
+
+var _types = require("../core/DataTable/types");
+
+var _Delete = _interopRequireDefault(require("@material-ui/icons/Delete"));
+
+var _Edit = _interopRequireDefault(require("@material-ui/icons/Edit"));
+
+var _Save = _interopRequireDefault(require("@material-ui/icons/Save"));
+
+var _Cancel = _interopRequireDefault(require("@material-ui/icons/Cancel"));
+
+var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var _default = {
+  title: 'DataTable',
+  component: _DataTable["default"]
+};
+exports["default"] = _default;
+
+// const Template: ComponentStory<typeof DataTable> = args =>
+// <DataTable { ...args } />
+var Default = function Default() {
+  var date = function date() {
+    return new Date();
+  };
+
+  var data = [{
+    id: 1,
+    product: 'Magazine Magazine Magazine',
+    price: 13.5,
+    quantity: 12,
+    date: date()
+  }, {
+    id: 2,
+    product: 'Table',
+    price: 200.49,
+    quantity: 3,
+    date: date()
+  }, {
+    id: 3,
+    product: 'Chair',
+    price: 53.5,
+    quantity: 9,
+    date: date()
+  }, {
+    id: 4,
+    product: 'Keyboard',
+    price: 53.29,
+    quantity: 4,
+    date: date()
+  }, {
+    id: 5,
+    product: 'Mouse',
+    price: 27.13,
+    quantity: 16,
+    date: date()
+  }, {
+    id: 6,
+    product: 'Microphone',
+    price: 89.14,
+    quantity: 2,
+    date: date()
+  }, {
+    id: 7,
+    product: 'Headset',
+    price: 117.85,
+    quantity: 6,
+    date: date()
+  }, {
+    id: 8,
+    product: 'Pencil',
+    price: 1.5,
+    quantity: 11,
+    date: date()
+  }];
+  var columns = [{
+    title: 'Product',
+    type: 'text',
+    field: 'product',
+    cellStyle: {
+      maxWidth: '72px',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    },
+    editable: true
+  }, {
+    title: 'Price (R$)',
+    field: 'price',
+    type: 'numeric-float',
+    editable: false,
+    getValue: function getValue(value) {
+      return value.toFixed(2).replace('.', ',');
+    }
+  }, {
+    title: 'Quantity',
+    field: 'quantity',
+    type: 'numeric-int',
+    editable: true,
+    cellStyle: {
+      width: '82px'
+    }
+  }, {
+    title: 'Date',
+    field: 'date',
+    type: 'datetime',
+    editable: true,
+    getValue: function getValue(value) {
+      return (0, _format["default"])(value, 'dd/MM/yyyy HH:mm');
+    },
+    cellStyle: {
+      width: '200px'
+    }
+  }];
+  return /*#__PURE__*/_react["default"].createElement(_DataTable["default"], {
+    data: data,
+    pagination: {
+      rowsPerPage: 5,
+      labelRowsPerPage: 'Row per page'
+    },
+    columns: columns
+  });
+};
+
+exports.Default = Default;
+
+var Empty = function Empty() {
+  var columns = [{
+    title: 'Product',
+    field: 'product',
+    type: 'text',
+    cellStyle: {
+      maxWidth: '72px',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    },
+    editable: true
+  }, {
+    title: 'Price (R$)',
+    field: 'price',
+    type: 'numeric-float',
+    editable: false,
+    getValue: function getValue(value) {
+      return value.toFixed(2).replace('.', ',');
+    }
+  }];
+
+  var componentForEmpty = /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", {
+    style: {
+      display: 'flex',
+      position: 'absolute',
+      height: '100%',
+      width: '100%',
+      justifyContent: 'center',
+      alignItems: 'center',
+      boxSizing: 'border-box'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, "Empty DataTable"))));
+
+  return /*#__PURE__*/_react["default"].createElement(_DataTable["default"], {
+    data: [],
+    bodyStyle: {
+      position: 'relative'
+    },
+    hiddenRowHeight: 53,
+    componentForEmpty: componentForEmpty,
+    pagination: {
+      rowsPerPage: 5,
+      labelRowsPerPage: 'Row per page'
+    },
+    columns: columns
+  });
+};
+
+exports.Empty = Empty;
+
+var NoHeader = function NoHeader() {
+  var date = function date() {
+    return new Date();
+  };
+
+  var data = [{
+    id: 1,
+    product: 'Magazine Magazine Magazine',
+    price: 13.5,
+    quantity: 12,
+    date: date()
+  }, {
+    id: 2,
+    product: 'Table',
+    price: 200.49,
+    quantity: 3,
+    date: date()
+  }, {
+    id: 3,
+    product: 'Chair',
+    price: 53.5,
+    quantity: 9,
+    date: date()
+  }, {
+    id: 4,
+    product: 'Keyboard',
+    price: 53.29,
+    quantity: 4,
+    date: date()
+  }, {
+    id: 5,
+    product: 'Mouse',
+    price: 27.13,
+    quantity: 16,
+    date: date()
+  }, {
+    id: 6,
+    product: 'Microphone',
+    price: 89.14,
+    quantity: 2,
+    date: date()
+  }, {
+    id: 7,
+    product: 'Headset',
+    price: 117.85,
+    quantity: 6,
+    date: date()
+  }, {
+    id: 8,
+    product: 'Pencil',
+    price: 1.5,
+    quantity: 11,
+    date: date()
+  }];
+  var columns = [{
+    title: 'Product',
+    field: 'product',
+    type: 'text',
+    cellStyle: {
+      maxWidth: '72px',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    },
+    editable: true
+  }, {
+    title: 'Price (R$)',
+    field: 'price',
+    type: 'numeric-float',
+    editable: false,
+    getValue: function getValue(value) {
+      return value.toFixed(2).replace('.', ',');
+    }
+  }, {
+    title: 'Quantity',
+    field: 'quantity',
+    type: 'numeric-int',
+    editable: true,
+    cellStyle: {
+      width: '82px'
+    }
+  }, {
+    title: 'Date',
+    field: 'date',
+    type: 'datetime',
+    editable: true,
+    getValue: function getValue(value) {
+      return (0, _format["default"])(value, 'dd/MM/yyyy HH:mm');
+    },
+    cellStyle: {
+      width: '200px'
+    }
+  }];
+  return /*#__PURE__*/_react["default"].createElement(_DataTable["default"], {
+    data: data,
+    noHeader: true,
+    hiddenRowHeight: 53,
+    pagination: {
+      rowsPerPage: 5,
+      labelRowsPerPage: 'Row per page'
+    },
+    columns: columns
+  });
+};
+
+exports.NoHeader = NoHeader;
+
+var NoPagination = function NoPagination() {
+  var date = function date() {
+    return new Date();
+  };
+
+  var data = [{
+    id: 1,
+    product: 'Magazine Magazine Magazine',
+    price: 13.5,
+    quantity: 12,
+    date: date()
+  }, {
+    id: 2,
+    product: 'Table',
+    price: 200.49,
+    quantity: 3,
+    date: date()
+  }, {
+    id: 3,
+    product: 'Chair',
+    price: 53.5,
+    quantity: 9,
+    date: date()
+  }, {
+    id: 4,
+    product: 'Keyboard',
+    price: 53.29,
+    quantity: 4,
+    date: date()
+  }, {
+    id: 5,
+    product: 'Mouse',
+    price: 27.13,
+    quantity: 16,
+    date: date()
+  }, {
+    id: 6,
+    product: 'Microphone',
+    price: 89.14,
+    quantity: 2,
+    date: date()
+  }, {
+    id: 7,
+    product: 'Headset',
+    price: 117.85,
+    quantity: 6,
+    date: date()
+  }, {
+    id: 8,
+    product: 'Pencil',
+    price: 1.5,
+    quantity: 11,
+    date: date()
+  }];
+  var columns = [{
+    title: 'Product',
+    field: 'product',
+    type: 'text',
+    cellStyle: {
+      maxWidth: '72px',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    },
+    editable: true
+  }, {
+    title: 'Price (R$)',
+    field: 'price',
+    type: 'numeric-float',
+    editable: false,
+    getValue: function getValue(value) {
+      return value.toFixed(2).replace('.', ',');
+    }
+  }, {
+    title: 'Quantity',
+    field: 'quantity',
+    type: 'numeric-int',
+    editable: true,
+    cellStyle: {
+      width: '82px'
+    }
+  }, {
+    title: 'Date',
+    field: 'date',
+    type: 'datetime',
+    editable: true,
+    getValue: function getValue(value) {
+      return (0, _format["default"])(value, 'dd/MM/yyyy HH:mm');
+    },
+    cellStyle: {
+      width: '200px'
+    }
+  }];
+  return /*#__PURE__*/_react["default"].createElement(_DataTable["default"], {
+    data: data,
+    hiddenRowHeight: 53,
+    pagination: {
+      disabled: true
+    },
+    columns: columns
+  });
+};
+
+exports.NoPagination = NoPagination;
+
+var Crud = function Crud() {
+  var date = function date() {
+    return new Date();
+  };
+
+  var controllerRef = (0, _react.useRef)();
+
+  var _useState = (0, _react.useState)({}),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      errors = _useState2[0],
+      setErrors = _useState2[1];
+
+  var randomId = function randomId() {
+    return Math.random().toString(36).substr(0, 12);
+  };
+
+  var _useState3 = (0, _react.useState)([{
+    id: 1,
+    product: 'Magazine',
+    price: 13.5,
+    quantity: 12,
+    date: date()
+  }, {
+    id: 2,
+    product: 'Table',
+    price: 200.49,
+    quantity: 3,
+    date: date()
+  }, {
+    id: 3,
+    product: 'Chair',
+    price: 53.5,
+    quantity: 9,
+    date: date()
+  }, {
+    id: 4,
+    product: 'Keyboard',
+    price: 53.29,
+    quantity: 4,
+    date: date()
+  }, {
+    id: 5,
+    product: 'Mouse',
+    price: 27.13,
+    quantity: 16,
+    date: date()
+  }, {
+    id: 6,
+    product: 'Microphone',
+    price: 89.14,
+    quantity: 2,
+    date: date()
+  }, {
+    id: 7,
+    product: 'Headset',
+    price: 117.85,
+    quantity: 6,
+    date: date()
+  }, {
+    id: 8,
+    product: 'Pencil',
+    price: 1.5,
+    quantity: 11,
+    date: date()
+  }]),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      data = _useState4[0],
+      setData = _useState4[1];
+
+  var handleAdd = function handleAdd() {
+    controllerRef.current.addRow({
+      id: randomId(),
+      date: date()
+    });
+  };
+
+  var handleEdit = function handleEdit(id) {
+    return function () {
+      controllerRef.current.editRow(id);
+    };
+  };
+
+  var handleDelete = function handleDelete(id) {
+    return function () {
+      controllerRef.current.pushRowView(id, 'confirmDelete');
+    };
+  };
+
+  var handleView = function handleView(id) {
+    return function () {
+      controllerRef.current.viewRow(id);
+    };
+  };
+
+  var isNullable = function isNullable(x) {
+    return x == null;
+  };
+
+  var isNotPositive = function isNotPositive(x) {
+    return x <= 0;
+  };
+
+  var isAfterNow = function isAfterNow(x) {
+    return +x > +new Date();
+  };
+
+  var isEmpty = function isEmpty(x) {
+    return x.trim().length === 0;
+  };
+
+  var handleErrors = function handleErrors(id) {
+    var nextItem = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var isPartial = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    var errorFields = [{
+      field: 'quantity',
+      isErrorIf: [isNaN, isNotPositive]
+    }, {
+      field: 'date',
+      isErrorIf: [isAfterNow]
+    }, {
+      field: 'product',
+      isErrorIf: [isEmpty]
+    }, {
+      field: 'price',
+      isErrorIf: [isNaN, isNotPositive]
+    }].filter(function (_ref) {
+      var field = _ref.field,
+          isErrorIf = _ref.isErrorIf;
+      var value = nextItem[field];
+
+      if (isNullable(value)) {
+        if (isPartial) {
+          return false;
+        }
+
+        return true;
+      }
+
+      return isErrorIf.some(function (cond) {
+        return cond(value);
+      });
+    }).map(function (_ref2) {
+      var field = _ref2.field;
+      return field;
+    });
+    setErrors(function (errors) {
+      return _objectSpread(_objectSpread({}, errors), {}, (0, _defineProperty2["default"])({}, id, new Set(errorFields)));
+    });
+    return errorFields.length > 0;
+  };
+
+  var handleSave = function handleSave(id) {
+    var isNew = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    return function () {
+      var nextItem = controllerRef.current.getEditedRowData(id);
+
+      if (!nextItem) {
+        return;
+      }
+
+      if (handleErrors(id, nextItem, !isNew)) {
+        return;
+      }
+
+      if (isNew) {
+        setData(function (data) {
+          return [nextItem].concat((0, _toConsumableArray2["default"])(data));
+        });
+      } else {
+        setData(function (data) {
+          return data.map(function (item) {
+            if (item.id === id) {
+              return _objectSpread(_objectSpread({}, item), nextItem);
+            }
+
+            return item;
+          });
+        });
+      }
+
+      controllerRef.current.viewRow(id);
+    };
+  };
+
+  var columns = [{
+    title: 'Product',
+    field: 'product',
+    type: 'text',
+    cellStyle: {
+      width: '120px'
+    },
+    editable: true
+  }, {
+    title: 'Price (R$)',
+    field: 'price',
+    type: 'numeric-float',
+    editable: true,
+    getValue: function getValue(value) {
+      return value.toFixed(2).replace('.', ',');
+    }
+  }, {
+    title: 'Quantity',
+    field: 'quantity',
+    type: 'numeric-int',
+    editable: true,
+    cellStyle: {
+      width: '82px'
+    }
+  }, {
+    title: 'Date',
+    field: 'date',
+    type: 'datetime',
+    editable: true,
+    getValue: function getValue(value) {
+      return (0, _format["default"])(value, 'dd/MM/yyyy HH:mm');
+    },
+    cellStyle: {
+      width: '200px'
+    }
+  }, {
+    title: 'Actions',
+    type: 'actions',
+    align: 'center',
+    cellStyle: {
+      width: '60px'
+    },
+    renderCell: function renderCell(_ref3) {
+      var id = _ref3.data.id,
+          rowMode = _ref3.rowMode,
+          _ref3$isNew = _ref3.isNew,
+          isNew = _ref3$isNew === void 0 ? false : _ref3$isNew;
+
+      if (rowMode === _types.RowMode.View) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          style: {
+            display: 'flex'
+          }
+        }, /*#__PURE__*/_react["default"].createElement(_DataTableAction.DataTableAction, {
+          label: "Edit",
+          onClick: handleEdit(id)
+        }, /*#__PURE__*/_react["default"].createElement(_Edit["default"], null)), /*#__PURE__*/_react["default"].createElement(_DataTableAction.DataTableAction, {
+          label: "Delete",
+          onClick: handleDelete(id)
+        }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], null)));
+      }
+
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          display: 'flex'
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_DataTableAction.DataTableAction, {
+        label: "Save",
+        onClick: handleSave(id, isNew)
+      }, /*#__PURE__*/_react["default"].createElement(_Save["default"], null)), /*#__PURE__*/_react["default"].createElement(_DataTableAction.DataTableAction, {
+        label: "Cancel",
+        onClick: handleView(id)
+      }, /*#__PURE__*/_react["default"].createElement(_Cancel["default"], null)));
+    }
+  }];
+  var rowViews = {
+    confirmDelete: function confirmDelete(_ref4) {
+      var data = _ref4.data;
+      return /*#__PURE__*/_react["default"].createElement("td", {
+        colSpan: 5
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          display: 'flex',
+          padding: '16px',
+          justifyContent: 'space-between'
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, "Confirm Delete \"", data.product, "\"?"), /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          display: 'flex'
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_DataTableAction.DataTableAction, {
+        label: "CheckIcon",
+        onClick: function onClick() {
+          controllerRef.current.popRowView(data.id);
+          setData(function (dataList) {
+            return dataList.filter(function (item) {
+              return item.id !== data.id;
+            });
+          });
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_Check["default"], null)), /*#__PURE__*/_react["default"].createElement(_DataTableAction.DataTableAction, {
+        label: "CancelIcon",
+        onClick: function onClick() {
+          controllerRef.current.popRowView(data.id);
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_Cancel["default"], null)))));
+    }
+  };
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    onClick: handleAdd
+  }, "Add Row"), /*#__PURE__*/_react["default"].createElement(_DataTable["default"], {
+    data: data,
+    controllerRef: controllerRef,
+    errors: errors,
+    pagination: {
+      rowsPerPage: 5,
+      showFirstButton: true,
+      showLastButton: true,
+      labelRowsPerPage: 'Rows per page:',
+      labelDisplayedRows: function labelDisplayedRows(_ref5) {
+        var from = _ref5.from,
+            to = _ref5.to,
+            count = _ref5.count;
+        return "".concat(from, "-").concat(to, " of ").concat(count !== -1 ? count : "more than ".concat(to));
+      }
+    },
+    rowViews: rowViews,
+    columns: columns
+  }));
+};
+
+exports.Crud = Crud;