flipper-ui 0.27.1 → 0.28.0

package/stories/DataTable.stories.js

@@ -1,964 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.NoPagination = exports.NoHeader = exports.Empty = exports.Default = exports.CrudWithHidden = exports.Crud = 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"));
-var _Visibility = _interopRequireDefault(require("@material-ui/icons/Visibility"));
-var _VisibilityOff = _interopRequireDefault(require("@material-ui/icons/VisibilityOff"));
-var _uuid = require("uuid");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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() {
-    var _controllerRef$curren;
-    (_controllerRef$curren = controllerRef.current) === null || _controllerRef$curren === void 0 ? void 0 : _controllerRef$curren.addRow({
-      id: randomId(),
-      date: date()
-    });
-  };
-  var handleEdit = function handleEdit(id) {
-    return function () {
-      var _controllerRef$curren2;
-      (_controllerRef$curren2 = controllerRef.current) === null || _controllerRef$curren2 === void 0 ? void 0 : _controllerRef$curren2.editRow(id);
-    };
-  };
-  var handleDelete = function handleDelete(id) {
-    return function () {
-      var _controllerRef$curren3;
-      (_controllerRef$curren3 = controllerRef.current) === null || _controllerRef$curren3 === void 0 ? void 0 : _controllerRef$curren3.pushRowView(id, 'confirmDelete');
-    };
-  };
-  var handleView = function handleView(id) {
-    return function () {
-      var _controllerRef$curren4;
-      (_controllerRef$curren4 = controllerRef.current) === null || _controllerRef$curren4 === void 0 ? void 0 : _controllerRef$curren4.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 _controllerRef$curren5, _controllerRef$curren6;
-      var nextItem = (_controllerRef$curren5 = controllerRef.current) === null || _controllerRef$curren5 === void 0 ? void 0 : _controllerRef$curren5.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$curren6 = controllerRef.current) === null || _controllerRef$curren6 === void 0 ? void 0 : _controllerRef$curren6.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() {
-          var _controllerRef$curren7;
-          (_controllerRef$curren7 = controllerRef.current) === null || _controllerRef$curren7 === void 0 ? void 0 : _controllerRef$curren7.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() {
-          var _controllerRef$curren8;
-          (_controllerRef$curren8 = controllerRef.current) === null || _controllerRef$curren8 === void 0 ? void 0 : _controllerRef$curren8.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;
-var CrudWithHidden = function CrudWithHidden() {
-  var controllerRef = (0, _react.useRef)();
-  var _useState5 = (0, _react.useState)({}),
-    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    errors = _useState6[0],
-    setErrors = _useState6[1];
-  var randomId = function randomId() {
-    return Math.random().toString(36).substr(0, 12);
-  };
-  var _useState7 = (0, _react.useState)([{
-      id: 1,
-      name: 'PowerBI',
-      rowMode: _types.RowMode.Hide,
-      key: '123',
-      secret: '456'
-    }, {
-      id: 2,
-      name: 'External API',
-      rowMode: _types.RowMode.Hide,
-      key: '123',
-      secret: '456'
-    }, {
-      id: 3,
-      name: 'Sass',
-      rowMode: _types.RowMode.Hide,
-      key: '123',
-      secret: '456'
-    }]),
-    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-    data = _useState8[0],
-    setData = _useState8[1];
-  var handleAdd = function handleAdd() {
-    var _controllerRef$curren9;
-    (_controllerRef$curren9 = controllerRef.current) === null || _controllerRef$curren9 === void 0 ? void 0 : _controllerRef$curren9.addRow({
-      id: randomId()
-    });
-  };
-  var handleEdit = function handleEdit(id) {
-    return function () {
-      var _controllerRef$curren10;
-      (_controllerRef$curren10 = controllerRef.current) === null || _controllerRef$curren10 === void 0 ? void 0 : _controllerRef$curren10.editRow(id);
-    };
-  };
-  var handleHide = function handleHide(id) {
-    return function () {
-      var _controllerRef$curren11;
-      (_controllerRef$curren11 = controllerRef.current) === null || _controllerRef$curren11 === void 0 ? void 0 : _controllerRef$curren11.hideRow(id);
-    };
-  };
-  var handleDelete = function handleDelete(id) {
-    return function () {
-      var _controllerRef$curren12;
-      (_controllerRef$curren12 = controllerRef.current) === null || _controllerRef$curren12 === void 0 ? void 0 : _controllerRef$curren12.pushRowView(id, 'confirmDelete');
-    };
-  };
-  var handleView = function handleView(id) {
-    return function () {
-      var _controllerRef$curren13;
-      (_controllerRef$curren13 = controllerRef.current) === null || _controllerRef$curren13 === void 0 ? void 0 : _controllerRef$curren13.viewRow(id);
-    };
-  };
-  var isNullable = function isNullable(x) {
-    return x == null;
-  };
-  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: 'name',
-      isErrorIf: [isEmpty]
-    }].filter(function (_ref6) {
-      var field = _ref6.field,
-        isErrorIf = _ref6.isErrorIf;
-      var value = nextItem[field];
-      if (isNullable(value)) {
-        if (isPartial) {
-          return false;
-        }
-        return true;
-      }
-      return isErrorIf.some(function (cond) {
-        return cond(value);
-      });
-    }).map(function (_ref7) {
-      var field = _ref7.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 _controllerRef$curren14, _controllerRef$curren15;
-      var nextItem = (_controllerRef$curren14 = controllerRef.current) === null || _controllerRef$curren14 === void 0 ? void 0 : _controllerRef$curren14.getEditedRowData(id);
-      if (!nextItem) {
-        return;
-      }
-      if (handleErrors(id, nextItem, !isNew)) {
-        return;
-      }
-      if (isNew) {
-        setData(function (data) {
-          return [_objectSpread(_objectSpread({}, nextItem), {}, {
-            key: (0, _uuid.v4)(),
-            secret: (0, _uuid.v4)()
-          })].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$curren15 = controllerRef.current) === null || _controllerRef$curren15 === void 0 ? void 0 : _controllerRef$curren15.viewRow(id);
-    };
-  };
-  var columns = [{
-    title: 'Name',
-    field: 'name',
-    type: 'text',
-    editable: true
-  }, {
-    title: 'Key',
-    field: 'key',
-    type: 'text',
-    editable: false,
-    renderCell: function renderCell(_ref8) {
-      var rowMode = _ref8.rowMode,
-        _ref8$isNew = _ref8.isNew,
-        isNew = _ref8$isNew === void 0 ? false : _ref8$isNew,
-        value = _ref8.value;
-      if (isNew) {
-        return null;
-      }
-      if (rowMode === _types.RowMode.Hide) {
-        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "********");
-      }
-      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, value);
-    }
-  }, {
-    title: 'Secret',
-    field: 'secret',
-    type: 'text',
-    editable: false,
-    renderCell: function renderCell(_ref9) {
-      var rowMode = _ref9.rowMode,
-        _ref9$isNew = _ref9.isNew,
-        isNew = _ref9$isNew === void 0 ? false : _ref9$isNew,
-        value = _ref9.value;
-      if (isNew) {
-        return null;
-      }
-      if (rowMode === _types.RowMode.Hide) {
-        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "********");
-      }
-      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, value);
-    }
-  }, {
-    title: 'Actions',
-    type: 'actions',
-    align: 'center',
-    cellStyle: {
-      width: '60px'
-    },
-    renderCell: function renderCell(_ref10) {
-      var id = _ref10.data.id,
-        rowMode = _ref10.rowMode,
-        _ref10$isNew = _ref10.isNew,
-        isNew = _ref10$isNew === void 0 ? false : _ref10$isNew;
-      if (rowMode === _types.RowMode.View) {
-        return /*#__PURE__*/_react["default"].createElement("div", {
-          style: {
-            display: 'flex'
-          }
-        }, /*#__PURE__*/_react["default"].createElement(_DataTableAction.DataTableAction, {
-          label: "Show",
-          onClick: handleView(id)
-        }, /*#__PURE__*/_react["default"].createElement(_Visibility["default"], null)), /*#__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)));
-      }
-      if (rowMode === _types.RowMode.Hide) {
-        return /*#__PURE__*/_react["default"].createElement("div", {
-          style: {
-            display: 'flex'
-          }
-        }, /*#__PURE__*/_react["default"].createElement(_DataTableAction.DataTableAction, {
-          label: "Show",
-          onClick: handleHide(id)
-        }, /*#__PURE__*/_react["default"].createElement(_VisibilityOff["default"], null)), /*#__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(_ref11) {
-      var data = _ref11.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() {
-          var _controllerRef$curren16;
-          (_controllerRef$curren16 = controllerRef.current) === null || _controllerRef$curren16 === void 0 ? void 0 : _controllerRef$curren16.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() {
-          var _controllerRef$curren17;
-          (_controllerRef$curren17 = controllerRef.current) === null || _controllerRef$curren17 === void 0 ? void 0 : _controllerRef$curren17.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"], {
-    hidden: true,
-    data: data,
-    controllerRef: controllerRef,
-    errors: errors,
-    pagination: {
-      disabled: true
-    },
-    rowViews: rowViews,
-    columns: columns
-  }));
-};
-exports.CrudWithHidden = CrudWithHidden;