flipper-ui 0.26.12 → 0.26.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/core/DataTable/DataTable.d.ts +4 -0
  2. package/core/DataTable/DataTable.js +13 -4
  3. package/core/DataTable/DataTableQueryPaginated.d.ts +4 -0
  4. package/core/DataTable/DataTableQueryPaginated.js +8 -2
  5. package/core/DataTable/Rows.d.ts +2 -1
  6. package/core/DataTable/Rows.js +34 -4
  7. package/core/DataTable/types.d.ts +7 -2
  8. package/core/DataTable/types.js +3 -2
  9. package/core/DataTable/useRowsState.d.ts +1 -1
  10. package/core/DataTable/useRowsState.js +4 -2
  11. package/package.json +1 -1
  12. package/stories/DataTable.stories.js +279 -2
package/core/DataTable/DataTable.d.ts CHANGED
@@ -51,6 +51,10 @@ export declare type DataTableProps<D extends Data, V extends StackView = Record<
51
51
  * A React MutableRefObject for the row controller
52
52
  */
53
53
  controllerRef?: MutableRefObject<DataTableController<D, V> | undefined>;
54
+ /**
55
+ * Initialize with hidden values
56
+ */
57
+ hidden?: boolean;
54
58
  /**
55
59
  * Custom rowViews used as a Stac
56
60
  */
package/core/DataTable/DataTable.js CHANGED
@@ -69,7 +69,8 @@ var DataTable = function DataTable(props) {
69
69
  componentForEmpty = props.componentForEmpty,
70
70
  bodyStyle = props.bodyStyle,
71
71
  headStyle = props.headStyle,
72
- hiddenRowHeight = props.hiddenRowHeight;
72
+ hiddenRowHeight = props.hiddenRowHeight,
73
+ hidden = props.hidden;
73
74
  var _useState5 = (0, _react.useState)(),
74
75
  _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
75
76
  newRow = _useState6[0],
@@ -84,7 +85,7 @@ var DataTable = function DataTable(props) {
84
85
  }
85
86
  return sliceData(data, page, rowsPerPage);
86
87
  }, [pagination.disabled, data, rowsPerPage, page, newRow]);
87
- var _useRowsState = (0, _useRowsState2.useRowsState)(rows, newRow),
88
+ var _useRowsState = (0, _useRowsState2.useRowsState)(rows, hidden, newRow),
88
89
  getRowState = _useRowsState.getRowState,
89
90
  setEditableRowState = _useRowsState.setEditableRowState,
90
91
  setRowState = _useRowsState.setRowState,
@@ -104,6 +105,12 @@ var DataTable = function DataTable(props) {
104
105
  });
105
106
  setNewRow(undefined);
106
107
  },
108
+ hideRow: function hideRow(id) {
109
+ setRowState(id, {
110
+ mode: _types.RowMode.Hide
111
+ });
112
+ setNewRow(undefined);
113
+ },
107
114
  addRow: function addRow(partial) {
108
115
  setPage(0);
109
116
  setNewRow(partial);
@@ -136,7 +143,8 @@ var DataTable = function DataTable(props) {
136
143
  var rowState = getRowState(row.id);
137
144
  var lastView = (rowState === null || rowState === void 0 ? void 0 : rowState.stackView) && (0, _last["default"])(rowState.stackView);
138
145
  var view = lastView && (rowViews === null || rowViews === void 0 ? void 0 : rowViews[lastView]);
139
- var mode = (rowState === null || rowState === void 0 ? void 0 : rowState.mode) || _types.RowMode.View;
146
+ var primaryView = hidden ? _types.RowMode.Hide : _types.RowMode.View;
147
+ var mode = (rowState === null || rowState === void 0 ? void 0 : rowState.mode) || primaryView;
140
148
  return /*#__PURE__*/_react["default"].createElement(_TableRow["default"], {
141
149
  key: row.id,
142
150
  "data-id": row.id,
@@ -151,10 +159,11 @@ var DataTable = function DataTable(props) {
151
159
  data: row,
152
160
  errors: errors,
153
161
  mode: mode,
162
+ isHidden: hidden,
154
163
  onUpdate: setEditableRowState(row.id)
155
164
  }));
156
165
  });
157
- }, [rows, getRowState, onRowClick, setEditableRowState, errors, rowViews, bodyRowStyle, columns]);
166
+ }, [rows, getRowState, onRowClick, setEditableRowState, errors, rowViews, bodyRowStyle, columns, hidden]);
158
167
  var columnsList = (0, _react.useMemo)(function () {
159
168
  return columns.map(function (column) {
160
169
  return /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
package/core/DataTable/DataTableQueryPaginated.d.ts CHANGED
@@ -71,6 +71,10 @@ export declare type DataTableProps<D extends Data, V extends StackView = Record<
71
71
  * A React MutableRefObject for the row controller
72
72
  */
73
73
  controllerRef?: MutableRefObject<DataTableController<D, V> | undefined>;
74
+ /**
75
+ * Initialize with hidden values
76
+ */
77
+ hidden?: boolean;
74
78
  /**
75
79
  * Custom rowViews used as a Stac
76
80
  */
package/core/DataTable/DataTableQueryPaginated.js CHANGED
@@ -61,7 +61,8 @@ var DataTableQueryPaginated = function DataTableQueryPaginated(props) {
61
61
  componentForEmpty = props.componentForEmpty,
62
62
  bodyStyle = props.bodyStyle,
63
63
  headStyle = props.headStyle,
64
- hiddenRowHeight = props.hiddenRowHeight;
64
+ hiddenRowHeight = props.hiddenRowHeight,
65
+ hidden = props.hidden;
65
66
  var _useState = (0, _react.useState)(),
66
67
  _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
67
68
  newRow = _useState2[0],
@@ -72,7 +73,7 @@ var DataTableQueryPaginated = function DataTableQueryPaginated(props) {
72
73
  }
73
74
  return data;
74
75
  }, [pagination.disabled, data]);
75
- var _useRowsState = (0, _useRowsState2.useRowsState)(rows, newRow),
76
+ var _useRowsState = (0, _useRowsState2.useRowsState)(rows, hidden, newRow),
76
77
  getRowState = _useRowsState.getRowState,
77
78
  setEditableRowState = _useRowsState.setEditableRowState,
78
79
  setRowState = _useRowsState.setRowState,
@@ -92,6 +93,11 @@ var DataTableQueryPaginated = function DataTableQueryPaginated(props) {
92
93
  });
93
94
  setNewRow(undefined);
94
95
  },
96
+ hideRow: function hideRow(id) {
97
+ setRowState(id, {
98
+ mode: _types.RowMode.Hide
99
+ });
100
+ },
95
101
  addRow: function addRow(partial) {
96
102
  handleChangePerPage(0);
97
103
  setNewRow(partial);
package/core/DataTable/Rows.d.ts CHANGED
@@ -4,9 +4,10 @@ declare type StatefulRowProps<D extends Data> = {
4
4
  mode: RowMode;
5
5
  errors?: Errors<D>;
6
6
  columns: ColumnSpec<D>[];
7
+ isHidden?: boolean;
7
8
  onUpdate?(partial: Partial<Data>): void;
8
9
  };
9
- export declare const StatefulRow: <D extends Data>({ data, mode, errors, columns, onUpdate }: StatefulRowProps<D>) => JSX.Element;
10
+ export declare const StatefulRow: <D extends Data>({ data, mode, errors, columns, onUpdate, isHidden }: StatefulRowProps<D>) => JSX.Element;
10
11
  declare type NewRowProps<D extends Data> = {
11
12
  data: PartialData<D>;
12
13
  errors?: Errors<D>;
package/core/DataTable/Rows.js CHANGED
@@ -35,6 +35,7 @@ var renderEditMode = function renderEditMode(column, row, updateRow, errors) {
35
35
  var hasError = errors === null || errors === void 0 ? void 0 : (_errors$row$id = errors[row.id]) === null || _errors$row$id === void 0 ? void 0 : _errors$row$id.has(column.field);
36
36
  if (column.renderCell) {
37
37
  var _value = row[column.field];
38
+ console.log('renderCell', _value);
38
39
  return column.renderCell({
39
40
  data: row,
40
41
  rowMode: _types.RowMode.Edit,
@@ -87,7 +88,7 @@ var renderEditMode = function renderEditMode(column, row, updateRow, errors) {
87
88
  }
88
89
  });
89
90
  };
90
- var renderViewMode = function renderViewMode(column, row) {
91
+ var renderHidenMode = function renderHidenMode(column, row) {
91
92
  var _column$getValue;
92
93
  if (column.type === 'actions') {
93
94
  return column.renderCell({
@@ -99,18 +100,38 @@ var renderViewMode = function renderViewMode(column, row) {
99
100
  if (column.renderCell) {
100
101
  return column.renderCell({
101
102
  data: row,
102
- rowMode: _types.RowMode.View,
103
+ rowMode: _types.RowMode.Hide,
103
104
  value: rawValue
104
105
  });
105
106
  }
106
107
  return ((_column$getValue = column.getValue) === null || _column$getValue === void 0 ? void 0 : _column$getValue.call(column, rawValue)) || rawValue;
107
108
  };
109
+ var renderViewMode = function renderViewMode(column, row) {
110
+ var _column$getValue2;
111
+ var isHidden = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
112
+ if (column.type === 'actions') {
113
+ return column.renderCell({
114
+ data: row,
115
+ rowMode: isHidden ? _types.RowMode.Hide : _types.RowMode.View
116
+ });
117
+ }
118
+ var rawValue = row[column.field];
119
+ if (column.renderCell) {
120
+ return column.renderCell({
121
+ data: row,
122
+ rowMode: _types.RowMode.View,
123
+ value: rawValue
124
+ });
125
+ }
126
+ return ((_column$getValue2 = column.getValue) === null || _column$getValue2 === void 0 ? void 0 : _column$getValue2.call(column, rawValue)) || rawValue;
127
+ };
108
128
  var StatefulRow = function StatefulRow(_ref) {
109
129
  var data = _ref.data,
110
130
  mode = _ref.mode,
111
131
  errors = _ref.errors,
112
132
  columns = _ref.columns,
113
- onUpdate = _ref.onUpdate;
133
+ onUpdate = _ref.onUpdate,
134
+ isHidden = _ref.isHidden;
114
135
  var _useState = (0, _react.useState)(function () {
115
136
  return data;
116
137
  }),
@@ -125,12 +146,21 @@ var StatefulRow = function StatefulRow(_ref) {
125
146
  patch[field] = value;
126
147
  onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(patch);
127
148
  }, []);
149
+ var getCorrectViewMode = function getCorrectViewMode(column, mode, isEditable) {
150
+ if (mode === _types.RowMode.Edit && isEditable) {
151
+ return renderEditMode(column, editableState, partialUpdate, errors);
152
+ }
153
+ if (mode === _types.RowMode.View) {
154
+ return renderViewMode(column, data, isHidden);
155
+ }
156
+ return renderHidenMode(column, data);
157
+ };
128
158
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, columns.map(function (column) {
129
159
  return /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
130
160
  align: column.align,
131
161
  key: column.title,
132
162
  style: column.cellStyle
133
- }, mode === _types.RowMode.Edit && isEditable(column) ? renderEditMode(column, editableState, partialUpdate, errors) : renderViewMode(column, data));
163
+ }, getCorrectViewMode(column, mode, isEditable(column)));
134
164
  }));
135
165
  };
136
166
  exports.StatefulRow = StatefulRow;
package/core/DataTable/types.d.ts CHANGED
@@ -60,8 +60,9 @@ export declare type RowAction<D> = {
60
60
  data: D;
61
61
  };
62
62
  export declare enum RowMode {
63
- View = 0,
64
- Edit = 1
63
+ Hide = 0,
64
+ View = 1,
65
+ Edit = 2
65
66
  }
66
67
  export declare type RowState<D extends Data, S extends StackView> = {
67
68
  mode: RowMode;
@@ -82,6 +83,10 @@ export declare type DataTableController<D extends Data, V extends StackView> = {
82
83
  * Actives the view mode for a row
83
84
  */
84
85
  viewRow(id: Identifier): void;
86
+ /**
87
+ * Hides the view mode for a row
88
+ */
89
+ hideRow(id: Identifier): void;
85
90
  /**
86
91
  * Adds a new row on the DataTable
87
92
  */
package/core/DataTable/types.js CHANGED
@@ -7,6 +7,7 @@ exports.RowMode = void 0;
7
7
  var RowMode;
8
8
  exports.RowMode = RowMode;
9
9
  (function (RowMode) {
10
- RowMode[RowMode["View"] = 0] = "View";
11
- RowMode[RowMode["Edit"] = 1] = "Edit";
10
+ RowMode[RowMode["Hide"] = 0] = "Hide";
11
+ RowMode[RowMode["View"] = 1] = "View";
12
+ RowMode[RowMode["Edit"] = 2] = "Edit";
12
13
  })(RowMode || (exports.RowMode = RowMode = {}));
package/core/DataTable/useRowsState.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { Data, Identifier, RowState } from './types';
2
- export declare const useRowsState: <D extends Data, V extends Record<string, unknown>>(rows: D[], newRow?: Partial<D> | undefined) => {
2
+ export declare const useRowsState: <D extends Data, V extends Record<string, unknown>>(rows: D[], isHidden?: boolean, newRow?: Partial<D> | undefined) => {
3
3
  getRowState: (id: Identifier) => RowState<D, V> | undefined;
4
4
  setEditableRowState: (id: Identifier) => (patch: Partial<D>) => void;
5
5
  setRowState: (id: Identifier, partial: Partial<RowState<D, V>>) => void;
package/core/DataTable/useRowsState.js CHANGED
@@ -14,7 +14,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
14
14
  function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
15
15
  function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
16
16
  function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
17
- var useRowsState = function useRowsState(rows, newRow) {
17
+ var useRowsState = function useRowsState(rows) {
18
+ var isHidden = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
19
+ var newRow = arguments.length > 2 ? arguments[2] : undefined;
18
20
  var _useState = (0, _react.useState)(function () {
19
21
  return {
20
22
  internal: new Map()
@@ -38,7 +40,7 @@ var useRowsState = function useRowsState(rows, newRow) {
38
40
  } else {
39
41
  nextState.set(row.id, {
40
42
  editableState: {},
41
- mode: _types.RowMode.View,
43
+ mode: isHidden ? _types.RowMode.Hide : _types.RowMode.View,
42
44
  stackView: [],
43
45
  currentState: row
44
46
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "flipper-ui",
3
- "version": "0.26.12",
3
+ "version": "0.26.13",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "homepage": "https://flipper-ui.ngi.com.br/",
package/stories/DataTable.stories.js CHANGED
@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports["default"] = exports.NoPagination = exports.NoHeader = exports.Empty = exports.Default = exports.Crud = void 0;
8
+ exports["default"] = exports.NoPagination = exports.NoHeader = exports.Empty = exports.Default = exports.CrudWithHidden = exports.Crud = void 0;
9
9
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
10
10
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
11
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -21,6 +21,9 @@ var _Edit = _interopRequireDefault(require("@material-ui/icons/Edit"));
21
21
  var _Save = _interopRequireDefault(require("@material-ui/icons/Save"));
22
22
  var _Cancel = _interopRequireDefault(require("@material-ui/icons/Cancel"));
23
23
  var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
24
+ var _Visibility = _interopRequireDefault(require("@material-ui/icons/Visibility"));
25
+ var _VisibilityOff = _interopRequireDefault(require("@material-ui/icons/VisibilityOff"));
26
+ var _uuid = require("uuid");
24
27
  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); }
25
28
  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; }
26
29
  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; }
@@ -684,4 +687,278 @@ var Crud = function Crud() {
684
687
  columns: columns
685
688
  }));
686
689
  };
687
- exports.Crud = Crud;
690
+ exports.Crud = Crud;
691
+ var CrudWithHidden = function CrudWithHidden() {
692
+ var controllerRef = (0, _react.useRef)();
693
+ var _useState5 = (0, _react.useState)({}),
694
+ _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
695
+ errors = _useState6[0],
696
+ setErrors = _useState6[1];
697
+ var randomId = function randomId() {
698
+ return Math.random().toString(36).substr(0, 12);
699
+ };
700
+ var _useState7 = (0, _react.useState)([{
701
+ id: 1,
702
+ name: 'PowerBI',
703
+ rowMode: _types.RowMode.Hide,
704
+ key: '123',
705
+ secret: '456'
706
+ }, {
707
+ id: 2,
708
+ name: 'External API',
709
+ rowMode: _types.RowMode.Hide,
710
+ key: '123',
711
+ secret: '456'
712
+ }, {
713
+ id: 3,
714
+ name: 'Sass',
715
+ rowMode: _types.RowMode.Hide,
716
+ key: '123',
717
+ secret: '456'
718
+ }]),
719
+ _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
720
+ data = _useState8[0],
721
+ setData = _useState8[1];
722
+ var handleAdd = function handleAdd() {
723
+ var _controllerRef$curren9;
724
+ (_controllerRef$curren9 = controllerRef.current) === null || _controllerRef$curren9 === void 0 ? void 0 : _controllerRef$curren9.addRow({
725
+ id: randomId()
726
+ });
727
+ };
728
+ var handleEdit = function handleEdit(id) {
729
+ return function () {
730
+ var _controllerRef$curren10;
731
+ (_controllerRef$curren10 = controllerRef.current) === null || _controllerRef$curren10 === void 0 ? void 0 : _controllerRef$curren10.editRow(id);
732
+ };
733
+ };
734
+ var handleHide = function handleHide(id) {
735
+ return function () {
736
+ var _controllerRef$curren11;
737
+ (_controllerRef$curren11 = controllerRef.current) === null || _controllerRef$curren11 === void 0 ? void 0 : _controllerRef$curren11.hideRow(id);
738
+ };
739
+ };
740
+ var handleDelete = function handleDelete(id) {
741
+ return function () {
742
+ var _controllerRef$curren12;
743
+ (_controllerRef$curren12 = controllerRef.current) === null || _controllerRef$curren12 === void 0 ? void 0 : _controllerRef$curren12.pushRowView(id, 'confirmDelete');
744
+ };
745
+ };
746
+ var handleView = function handleView(id) {
747
+ return function () {
748
+ var _controllerRef$curren13;
749
+ (_controllerRef$curren13 = controllerRef.current) === null || _controllerRef$curren13 === void 0 ? void 0 : _controllerRef$curren13.viewRow(id);
750
+ };
751
+ };
752
+ var isNullable = function isNullable(x) {
753
+ return x == null;
754
+ };
755
+ var isEmpty = function isEmpty(x) {
756
+ return x.trim().length === 0;
757
+ };
758
+ var handleErrors = function handleErrors(id) {
759
+ var nextItem = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
760
+ var isPartial = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
761
+ var errorFields = [{
762
+ field: 'name',
763
+ isErrorIf: [isEmpty]
764
+ }].filter(function (_ref6) {
765
+ var field = _ref6.field,
766
+ isErrorIf = _ref6.isErrorIf;
767
+ var value = nextItem[field];
768
+ if (isNullable(value)) {
769
+ if (isPartial) {
770
+ return false;
771
+ }
772
+ return true;
773
+ }
774
+ return isErrorIf.some(function (cond) {
775
+ return cond(value);
776
+ });
777
+ }).map(function (_ref7) {
778
+ var field = _ref7.field;
779
+ return field;
780
+ });
781
+ setErrors(function (errors) {
782
+ return _objectSpread(_objectSpread({}, errors), {}, (0, _defineProperty2["default"])({}, id, new Set(errorFields)));
783
+ });
784
+ return errorFields.length > 0;
785
+ };
786
+ var handleSave = function handleSave(id) {
787
+ var isNew = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
788
+ return function () {
789
+ var _controllerRef$curren14, _controllerRef$curren15;
790
+ var nextItem = (_controllerRef$curren14 = controllerRef.current) === null || _controllerRef$curren14 === void 0 ? void 0 : _controllerRef$curren14.getEditedRowData(id);
791
+ if (!nextItem) {
792
+ return;
793
+ }
794
+ if (handleErrors(id, nextItem, !isNew)) {
795
+ return;
796
+ }
797
+ if (isNew) {
798
+ setData(function (data) {
799
+ return [_objectSpread(_objectSpread({}, nextItem), {}, {
800
+ key: (0, _uuid.v4)(),
801
+ secret: (0, _uuid.v4)()
802
+ })].concat((0, _toConsumableArray2["default"])(data));
803
+ });
804
+ } else {
805
+ setData(function (data) {
806
+ return data.map(function (item) {
807
+ if (item.id === id) {
808
+ return _objectSpread(_objectSpread({}, item), nextItem);
809
+ }
810
+ return item;
811
+ });
812
+ });
813
+ }
814
+ (_controllerRef$curren15 = controllerRef.current) === null || _controllerRef$curren15 === void 0 ? void 0 : _controllerRef$curren15.viewRow(id);
815
+ };
816
+ };
817
+ var columns = [{
818
+ title: 'Name',
819
+ field: 'name',
820
+ type: 'text',
821
+ editable: true
822
+ }, {
823
+ title: 'Key',
824
+ field: 'key',
825
+ type: 'text',
826
+ editable: false,
827
+ renderCell: function renderCell(_ref8) {
828
+ var rowMode = _ref8.rowMode,
829
+ _ref8$isNew = _ref8.isNew,
830
+ isNew = _ref8$isNew === void 0 ? false : _ref8$isNew,
831
+ value = _ref8.value;
832
+ if (isNew) {
833
+ return null;
834
+ }
835
+ if (rowMode === _types.RowMode.Hide) {
836
+ return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "********");
837
+ }
838
+ return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, value);
839
+ }
840
+ }, {
841
+ title: 'Secret',
842
+ field: 'secret',
843
+ type: 'text',
844
+ editable: false,
845
+ renderCell: function renderCell(_ref9) {
846
+ var rowMode = _ref9.rowMode,
847
+ _ref9$isNew = _ref9.isNew,
848
+ isNew = _ref9$isNew === void 0 ? false : _ref9$isNew,
849
+ value = _ref9.value;
850
+ if (isNew) {
851
+ return null;
852
+ }
853
+ if (rowMode === _types.RowMode.Hide) {
854
+ return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "********");
855
+ }
856
+ return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, value);
857
+ }
858
+ }, {
859
+ title: 'Actions',
860
+ type: 'actions',
861
+ align: 'center',
862
+ cellStyle: {
863
+ width: '60px'
864
+ },
865
+ renderCell: function renderCell(_ref10) {
866
+ var id = _ref10.data.id,
867
+ rowMode = _ref10.rowMode,
868
+ _ref10$isNew = _ref10.isNew,
869
+ isNew = _ref10$isNew === void 0 ? false : _ref10$isNew;
870
+ if (rowMode === _types.RowMode.View) {
871
+ return /*#__PURE__*/_react["default"].createElement("div", {
872
+ style: {
873
+ display: 'flex'
874
+ }
875
+ }, /*#__PURE__*/_react["default"].createElement(_DataTableAction.DataTableAction, {
876
+ label: "Show",
877
+ onClick: handleView(id)
878
+ }, /*#__PURE__*/_react["default"].createElement(_Visibility["default"], null)), /*#__PURE__*/_react["default"].createElement(_DataTableAction.DataTableAction, {
879
+ label: "Edit",
880
+ onClick: handleEdit(id)
881
+ }, /*#__PURE__*/_react["default"].createElement(_Edit["default"], null)), /*#__PURE__*/_react["default"].createElement(_DataTableAction.DataTableAction, {
882
+ label: "Delete",
883
+ onClick: handleDelete(id)
884
+ }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], null)));
885
+ }
886
+ if (rowMode === _types.RowMode.Hide) {
887
+ return /*#__PURE__*/_react["default"].createElement("div", {
888
+ style: {
889
+ display: 'flex'
890
+ }
891
+ }, /*#__PURE__*/_react["default"].createElement(_DataTableAction.DataTableAction, {
892
+ label: "Show",
893
+ onClick: handleHide(id)
894
+ }, /*#__PURE__*/_react["default"].createElement(_VisibilityOff["default"], null)), /*#__PURE__*/_react["default"].createElement(_DataTableAction.DataTableAction, {
895
+ label: "Edit",
896
+ onClick: handleEdit(id)
897
+ }, /*#__PURE__*/_react["default"].createElement(_Edit["default"], null)), /*#__PURE__*/_react["default"].createElement(_DataTableAction.DataTableAction, {
898
+ label: "Delete",
899
+ onClick: handleDelete(id)
900
+ }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], null)));
901
+ }
902
+ return /*#__PURE__*/_react["default"].createElement("div", {
903
+ style: {
904
+ display: 'flex'
905
+ }
906
+ }, /*#__PURE__*/_react["default"].createElement(_DataTableAction.DataTableAction, {
907
+ label: "Save",
908
+ onClick: handleSave(id, isNew)
909
+ }, /*#__PURE__*/_react["default"].createElement(_Save["default"], null)), /*#__PURE__*/_react["default"].createElement(_DataTableAction.DataTableAction, {
910
+ label: "Cancel",
911
+ onClick: handleView(id)
912
+ }, /*#__PURE__*/_react["default"].createElement(_Cancel["default"], null)));
913
+ }
914
+ }];
915
+ var rowViews = {
916
+ confirmDelete: function confirmDelete(_ref11) {
917
+ var data = _ref11.data;
918
+ return /*#__PURE__*/_react["default"].createElement("td", {
919
+ colSpan: 5
920
+ }, /*#__PURE__*/_react["default"].createElement("div", {
921
+ style: {
922
+ display: 'flex',
923
+ padding: '16px',
924
+ justifyContent: 'space-between'
925
+ }
926
+ }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, "Confirm Delete \"", data.product, "\"?"), /*#__PURE__*/_react["default"].createElement("div", {
927
+ style: {
928
+ display: 'flex'
929
+ }
930
+ }, /*#__PURE__*/_react["default"].createElement(_DataTableAction.DataTableAction, {
931
+ label: "CheckIcon",
932
+ onClick: function onClick() {
933
+ var _controllerRef$curren16;
934
+ (_controllerRef$curren16 = controllerRef.current) === null || _controllerRef$curren16 === void 0 ? void 0 : _controllerRef$curren16.popRowView(data.id);
935
+ setData(function (dataList) {
936
+ return dataList.filter(function (item) {
937
+ return item.id !== data.id;
938
+ });
939
+ });
940
+ }
941
+ }, /*#__PURE__*/_react["default"].createElement(_Check["default"], null)), /*#__PURE__*/_react["default"].createElement(_DataTableAction.DataTableAction, {
942
+ label: "CancelIcon",
943
+ onClick: function onClick() {
944
+ var _controllerRef$curren17;
945
+ (_controllerRef$curren17 = controllerRef.current) === null || _controllerRef$curren17 === void 0 ? void 0 : _controllerRef$curren17.popRowView(data.id);
946
+ }
947
+ }, /*#__PURE__*/_react["default"].createElement(_Cancel["default"], null)))));
948
+ }
949
+ };
950
+ return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
951
+ onClick: handleAdd
952
+ }, "Add Row"), /*#__PURE__*/_react["default"].createElement(_DataTable["default"], {
953
+ hidden: true,
954
+ data: data,
955
+ controllerRef: controllerRef,
956
+ errors: errors,
957
+ pagination: {
958
+ disabled: true
959
+ },
960
+ rowViews: rowViews,
961
+ columns: columns
962
+ }));
963
+ };
964
+ exports.CrudWithHidden = CrudWithHidden;