contentoh-components-library 21.4.136 → 21.4.138

package/dist/components/organisms/Table/Table.stories.js

@@ -0,0 +1,554 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TableDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/organisms/Table",
+  component: _index.default,
+  decorators: [function (Story) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        width: "1000px",
+        height: "50px",
+        margin: "1em"
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Story, {})
+    });
+  }]
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, (0, _objectSpread2.default)({}, args));
+};
+
+var TableDefault = Template.bind({});
+exports.TableDefault = TableDefault;
+TableDefault.args = {
+  columns: [{
+    Header: "ID",
+    accessor: "id",
+    width: "100px",
+    fixedToLeft: 0
+  }, {
+    Header: "Nombre",
+    accessor: "name",
+    width: "100px",
+    fixedToLeft: 100
+  }, {
+    Header: "Edad",
+    accessor: "age",
+    width: "100px",
+    fixedToLeft: 200
+  }, {
+    Header: "Correo Electrónico",
+    accessor: "email",
+    width: "500px"
+  }, {
+    Header: "valor1",
+    accessor: "valor1",
+    width: "100px"
+  }, {
+    Header: "valor2",
+    accessor: "valor2",
+    width: "100px"
+  }, {
+    Header: "valor3",
+    accessor: "valor3",
+    width: "100px"
+  }],
+  data: [{
+    id: 1,
+    name: "Juan",
+    age: 25,
+    email: "juan@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 2,
+    name: "María",
+    age: 30,
+    email: "maria@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 3,
+    name: "Pedro",
+    age: 28,
+    email: "pedro@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 1,
+    name: "Juan",
+    age: 25,
+    email: "juan@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 2,
+    name: "María",
+    age: 30,
+    email: "maria@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 3,
+    name: "Pedro",
+    age: 28,
+    email: "pedro@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 1,
+    name: "Juan",
+    age: 25,
+    email: "juan@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 2,
+    name: "María",
+    age: 30,
+    email: "maria@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 3,
+    name: "Pedro",
+    age: 28,
+    email: "pedro@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 1,
+    name: "Juan",
+    age: 25,
+    email: "juan@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 2,
+    name: "María",
+    age: 30,
+    email: "maria@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 3,
+    name: "Pedro",
+    age: 28,
+    email: "pedro@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 1,
+    name: "Juan",
+    age: 25,
+    email: "juan@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 2,
+    name: "María",
+    age: 30,
+    email: "maria@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 3,
+    name: "Pedro",
+    age: 28,
+    email: "pedro@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 1,
+    name: "Juan",
+    age: 25,
+    email: "juan@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 2,
+    name: "María",
+    age: 30,
+    email: "maria@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 3,
+    name: "Pedro",
+    age: 28,
+    email: "pedro@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 1,
+    name: "Juan",
+    age: 25,
+    email: "juan@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 2,
+    name: "María",
+    age: 30,
+    email: "maria@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 3,
+    name: "Pedro",
+    age: 28,
+    email: "pedro@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 1,
+    name: "Juan",
+    age: 25,
+    email: "juan@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 2,
+    name: "María",
+    age: 30,
+    email: "maria@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 3,
+    name: "Pedro",
+    age: 28,
+    email: "pedro@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 1,
+    name: "Juan",
+    age: 25,
+    email: "juan@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 2,
+    name: "María",
+    age: 30,
+    email: "maria@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 3,
+    name: "Pedro",
+    age: 28,
+    email: "pedro@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 1,
+    name: "Juan",
+    age: 25,
+    email: "juan@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 2,
+    name: "María",
+    age: 30,
+    email: "maria@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 3,
+    name: "Pedro",
+    age: 28,
+    email: "pedro@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 1,
+    name: "Juan",
+    age: 25,
+    email: "juan@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 2,
+    name: "María",
+    age: 30,
+    email: "maria@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 3,
+    name: "Pedro",
+    age: 28,
+    email: "pedro@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 1,
+    name: "Juan",
+    age: 25,
+    email: "juan@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 2,
+    name: "María",
+    age: 30,
+    email: "maria@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 3,
+    name: "Pedro",
+    age: 28,
+    email: "pedro@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 1,
+    name: "Juan",
+    age: 25,
+    email: "juan@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 2,
+    name: "María",
+    age: 30,
+    email: "maria@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 3,
+    name: "Pedro",
+    age: 28,
+    email: "pedro@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 1,
+    name: "Juan",
+    age: 25,
+    email: "juan@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 2,
+    name: "María",
+    age: 30,
+    email: "maria@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 3,
+    name: "Pedro",
+    age: 28,
+    email: "pedro@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 1,
+    name: "Juan",
+    age: 25,
+    email: "juan@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 2,
+    name: "María",
+    age: 30,
+    email: "maria@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 3,
+    name: "Pedro",
+    age: 28,
+    email: "pedro@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 1,
+    name: "Juan",
+    age: 25,
+    email: "juan@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 2,
+    name: "María",
+    age: 30,
+    email: "maria@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 3,
+    name: "Pedro",
+    age: 28,
+    email: "pedro@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 1,
+    name: "Juan",
+    age: 25,
+    email: "juan@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 2,
+    name: "María",
+    age: 30,
+    email: "maria@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 3,
+    name: "Pedro",
+    age: 28,
+    email: "pedro@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 1,
+    name: "Juan",
+    age: 25,
+    email: "juan@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 2,
+    name: "María",
+    age: 30,
+    email: "maria@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 3,
+    name: "Pedro",
+    age: 28,
+    email: "pedro@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 1,
+    name: "Juan",
+    age: 25,
+    email: "juan@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 2,
+    name: "María",
+    age: 30,
+    email: "maria@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 3,
+    name: "Pedro",
+    age: 28,
+    email: "pedro@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 1,
+    name: "Juan",
+    age: 25,
+    email: "juan@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 2,
+    name: "María",
+    age: 30,
+    email: "maria@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  }, {
+    id: 3,
+    name: "Pedro",
+    age: 28,
+    email: "pedro@example.com",
+    valor1: "valor1",
+    valor2: "valor2",
+    valor3: "valor3"
+  } // Puedes agregar más filas según sea necesario
+  ],
+  withCheckbox: true
+};

package/dist/components/organisms/Table/index.js

@@ -0,0 +1,118 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Table = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _CheckBox = require("../../atoms/CheckBox");
+
+var _styles = require("./styles");
+
+var _Tooltip = require("../../atoms/Tooltip");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var Table = function Table(_ref) {
+  var columns = _ref.columns,
+      data = _ref.data,
+      withCheckbox = _ref.withCheckbox,
+      _ref$withTooltip = _ref.withTooltip,
+      withTooltip = _ref$withTooltip === void 0 ? false : _ref$withTooltip;
+
+  var _useState = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      rowsChecked = _useState2[0],
+      setRowsChecked = _useState2[1];
+
+  function handlerSelectAll(evt) {
+    if (evt.target.checked) {
+      setRowsChecked(data.map(function (_ref2) {
+        var id = _ref2.id;
+        return id;
+      }));
+    } else {
+      setRowsChecked([]);
+    }
+  }
+
+  function handlerSelect(evt, id) {
+    if (evt.target.checked) {
+      setRowsChecked(function (prev) {
+        return prev.includes(id) ? prev : [].concat((0, _toConsumableArray2.default)(prev), [id]);
+      });
+    } else {
+      setRowsChecked(function (prev) {
+        return prev.filter(function (f) {
+          return f !== id;
+        });
+      });
+    }
+  }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    withCheckbox: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("table", {
+      className: "custom-table",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
+          children: [withCheckbox ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckBox.CheckBox, {
+            id: -1,
+            className: "checkbox_fixed",
+            checked: rowsChecked.length === data.length,
+            onChange: handlerSelectAll
+          }) : null, columns.map(function (column, i) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.TH, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+              withCheckbox: withCheckbox
+            }, column), {}, {
+              children: column.description && withTooltip ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
+                componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  children: column.description
+                }),
+                position: "topCenter",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  children: column.Header
+                })
+              }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                children: column.Header
+              })
+            }), "".concat(column.accessor).concat(i));
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
+        children: data.map(function (row) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
+            children: [withCheckbox ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckBox.CheckBox, {
+              id: row.id,
+              className: "checkbox_fixed",
+              checked: rowsChecked.includes(row.id),
+              onChange: function onChange(e) {
+                return handlerSelect(e, row.id);
+              }
+            }) : null, columns.map(function (column, i) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.TD, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+                withCheckbox: withCheckbox
+              }, column), {}, {
+                children: row[column.accessor]
+              }), "".concat(column.accessor).concat(i));
+            })]
+          }, row.id);
+        })
+      })]
+    })
+  });
+};
+
+exports.Table = Table;