bitys-react-components 0.1.8 → 0.1.9

package/dist/DataGridView/index.js

@@ -10,6 +10,7 @@ var _lodash = _interopRequireDefault(require("lodash"));
 require("./assets/css/style.css");
 var _TableHeader = _interopRequireDefault(require("./components/TableHeader"));
 var _TableFooter = _interopRequireDefault(require("./components/TableFooter"));
+var _InputCheck = _interopRequireDefault(require("../InputCheck"));
 var _style2 = _interopRequireDefault(require("./style"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
@@ -31,6 +32,9 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
 function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
 function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+function isCheckBoxColumn(column) {
+  return column.key === 'checkBox' || column.type === 'checkBox';
+}
 var ReactDatatable = /*#__PURE__*/function (_Component) {
   function ReactDatatable(props) {
     var _this;
@@ -82,38 +86,61 @@ var ReactDatatable = /*#__PURE__*/function (_Component) {
       filter_value: '',
       page_size: props.config.page_size ? props.config.page_size : 10,
       page_number: 1,
-      sort: props.config && props.config.sort ? props.config.sort : false
+      sort: props.config && props.config.sort ? props.config.sort : false,
+      lastCheckBoxRowIndex: null
     };
     return _this;
   }
   _inherits(ReactDatatable, _Component);
   return _createClass(ReactDatatable, [{
+    key: "handleCheckBoxRowChange",
+    value: function handleCheckBoxRowChange(record, checked, payload, rowIndex) {
+      var _this2 = this;
+      var ev = payload && (payload.event || payload.nativeEvent);
+      var shiftPressed = ev && ev.shiftKey;
+      var lastCheckBoxRowIndex = this.state.lastCheckBoxRowIndex;
+      var records = this.props.records;
+      if (shiftPressed && lastCheckBoxRowIndex !== null && records.length > 0) {
+        var start = Math.min(rowIndex, lastCheckBoxRowIndex);
+        var end = Math.max(rowIndex, lastCheckBoxRowIndex);
+        var recordsInRange = records.slice(start, end + 1);
+        recordsInRange.forEach(function (r) {
+          return _this2.props.onCheckRowChange(r[_this2.config.key_column], checked);
+        });
+      } else {
+        this.props.onCheckRowChange(record[this.config.key_column], checked);
+        this.setState({
+          lastCheckBoxRowIndex: rowIndex
+        });
+      }
+    }
+  }, {
     key: "filterRecords",
     value: function filterRecords(e) {
-      var _this2 = this;
+      var _this3 = this;
       var value = e.target.value;
       this.setState({
         page_number: 1,
         filter_value: value
       }, function () {
-        _this2.onChange();
+        _this3.onChange();
       });
     }
   }, {
     key: "changePageSize",
     value: function changePageSize(e) {
-      var _this3 = this;
+      var _this4 = this;
       var value = e.target.value;
       this.setState({
         page_size: value
       }, function () {
-        _this3.onChange();
+        _this4.onChange();
       });
     }
   }, {
     key: "sortColumn",
     value: function sortColumn(event, column, sortOrder) {
-      var _this4 = this;
+      var _this5 = this;
       if (!column.sortable) return false;
       var newSortOrder = sortOrder == 'asc' ? 'desc' : 'asc';
       this.setState({
@@ -122,7 +149,7 @@ var ReactDatatable = /*#__PURE__*/function (_Component) {
           order: newSortOrder
         }
       }, function () {
-        _this4.onChange();
+        _this5.onChange();
       });
     }
   }, {
@@ -163,7 +190,7 @@ var ReactDatatable = /*#__PURE__*/function (_Component) {
   }, {
     key: "goToPage",
     value: function goToPage(e, pageNumber) {
-      var _this5 = this;
+      var _this6 = this;
       e.preventDefault();
       if (this.state.page_number == pageNumber) {
         return;
@@ -176,8 +203,8 @@ var ReactDatatable = /*#__PURE__*/function (_Component) {
         is_temp_page: false,
         page_number: pageNumber
       }, function () {
-        _this5.props.onPageChange(pageState);
-        _this5.onChange();
+        _this6.props.onPageChange(pageState);
+        _this6.onChange();
       });
     }
   }, {
@@ -247,7 +274,9 @@ var ReactDatatable = /*#__PURE__*/function (_Component) {
       try {
         for (_iterator.s(); !(_step = _iterator.n()).done;) {
           var _column = _step.value;
-          tableHtml += '<th>' + _column.text + '</th>';
+          if (isCheckBoxColumn(_column)) continue;
+          var headerText = typeof _column.text === 'string' ? _column.text : _column.key || '';
+          tableHtml += '<th>' + headerText + '</th>';
         }
       } catch (err) {
         _iterator.e(err);
@@ -276,6 +305,7 @@ var ReactDatatable = /*#__PURE__*/function (_Component) {
         try {
           for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
             var column = _step2.value;
+            if (isCheckBoxColumn(column)) continue;
             if (column.cell && typeof column.cell === 'function') {
               var cellData = _server["default"].renderToStaticMarkup(column.cell(record, i));
               cellData = this.strip(cellData);
@@ -368,7 +398,9 @@ var ReactDatatable = /*#__PURE__*/function (_Component) {
       try {
         for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
           var _column2 = _step3.value;
-          headers[_column2.key] = '"' + _column2.text + '"';
+          if (isCheckBoxColumn(_column2)) continue;
+          var headerText = typeof _column2.text === 'string' ? _column2.text : _column2.key || '';
+          headers[_column2.key] = '"' + headerText + '"';
         }
 
         // Filter records before export
@@ -396,6 +428,7 @@ var ReactDatatable = /*#__PURE__*/function (_Component) {
         try {
           for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
             var column = _step4.value;
+            if (isCheckBoxColumn(column)) continue;
             if (column.cell && typeof column.cell === 'function') {
               var cellData = _server["default"].renderToStaticMarkup(column.cell(record, i));
               cellData = this.strip(cellData);
@@ -457,11 +490,11 @@ var ReactDatatable = /*#__PURE__*/function (_Component) {
   }, {
     key: "filterData",
     value: function filterData(records) {
-      var _this6 = this;
+      var _this7 = this;
       var filterValue = this.state.filter_value;
       return records.filter(function (record) {
         var allow = false;
-        _lodash["default"].each(_this6.props.columns, function (column, key) {
+        _lodash["default"].each(_this7.props.columns, function (column, key) {
           if (record[column.key]) {
             allow = _lodash["default"].includes(record[column.key].toString().toLowerCase(), filterValue.toString().toLowerCase()) ? true : allow;
           }
@@ -472,10 +505,10 @@ var ReactDatatable = /*#__PURE__*/function (_Component) {
   }, {
     key: "sortRecords",
     value: function sortRecords() {
-      var _this7 = this;
+      var _this8 = this;
       if (this.state.sort) {
         return _lodash["default"].orderBy(this.props.records, function (o) {
-          var colVal = o[_this7.state.sort.column];
+          var colVal = o[_this8.state.sort.column];
           var typeofColVal = _typeof(colVal);
           if (typeofColVal == 'string') {
             if (isNaN(colVal)) {
@@ -494,7 +527,7 @@ var ReactDatatable = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this8 = this;
+      var _this9 = this;
       var filterRecords, totalRecords, pages, isFirst, isLast;
       if (this.props.dynamic === false) {
         var records = this.props.onSort ? this.props.onSort(this.state.sort.column, this.props.records, this.state.sort.order) : this.sortRecords(),
@@ -556,21 +589,37 @@ var ReactDatatable = /*#__PURE__*/function (_Component) {
                       align = column.align ? column.align : '',
                       sortOrder = '',
                       columnStyle = {};
-                    if (column.sortable && _this8.state.sort.column == column.key) {
-                      sortOrder = _this8.state.sort.order;
+                    if (column.sortable && _this9.state.sort.column == column.key) {
+                      sortOrder = _this9.state.sort.order;
                       classText += sortOrder ? ' ' + sortOrder : '';
                       columnStyle = sortOrder == 'asc' ? _style2["default"].sort_asc : _style2["default"].sort_desc;
                     }
                     classText += ' text-' + align;
                     if (column.TrOnlyClassName) classText += ' ' + column.TrOnlyClassName;
+                    var isCheckBox = isCheckBoxColumn(column);
+                    var allSelected = _this9.props.records.length > 0 && _this9.props.checkSelectedIds && _this9.props.checkSelectedIds.length === _this9.props.records.length;
                     return /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
                       className: classText,
                       width: width,
                       style: columnStyle,
                       onClick: function onClick(event) {
-                        return _this8.sortColumn(event, column, sortOrder);
+                        return _this9.sortColumn(event, column, sortOrder);
                       },
-                      children: column.text
+                      children: isCheckBox ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                        onClick: function onClick(e) {
+                          return e.stopPropagation();
+                        },
+                        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputCheck["default"], {
+                          name: "selectAll",
+                          value: allSelected,
+                          onChange: function onChange(ev) {
+                            return _this9.props.onCheckRowChange(undefined, ev.target.value);
+                          },
+                          styleContainer: {
+                            justifyContent: 'center'
+                          }
+                        })
+                      }) : column.text
                     }, column.key ? column.key : column.text);
                   })
                 })
@@ -589,13 +638,33 @@ var ReactDatatable = /*#__PURE__*/function (_Component) {
                     })
                   })
                 }) : filterRecords.length ? filterRecords.map(function (record, rowIndex) {
-                  var _record$_this8$config;
-                  rowIndex = _lodash["default"].indexOf(_this8.props.records, record);
+                  rowIndex = _lodash["default"].indexOf(_this9.props.records, record);
+                  var rowId = record[_this9.config.key_column];
                   return /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
                     onClick: function onClick(e) {
-                      return _this8.props.onRowClicked(e, record, rowIndex);
+                      return _this9.props.onRowClicked(e, record, rowIndex);
                     },
-                    children: _this8.props.columns.map(function (column, colIndex) {
+                    children: _this9.props.columns.map(function (column, colIndex) {
+                      var isCheckBox = isCheckBoxColumn(column);
+                      if (isCheckBox) {
+                        var checked = _this9.props.checkSelectedIds && _this9.props.checkSelectedIds.includes(rowId);
+                        return /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+                          className: column.className,
+                          onClick: function onClick(e) {
+                            return e.stopPropagation();
+                          },
+                          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputCheck["default"], {
+                            name: String(rowId),
+                            value: checked,
+                            onChange: function onChange(payload) {
+                              return _this9.handleCheckBoxRowChange(record, payload.target.value, payload.event, rowIndex);
+                            },
+                            styleContainer: {
+                              justifyContent: 'center'
+                            }
+                          })
+                        }, column.key ? column.key : column.text);
+                      }
                       if (column.cell && typeof column.cell === 'function') {
                         return /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
                           className: column.className,
@@ -612,7 +681,7 @@ var ReactDatatable = /*#__PURE__*/function (_Component) {
                         }, column.key ? column.key : column.text);
                       }
                     })
-                  }, (_record$_this8$config = record[_this8.config.key_column]) !== null && _record$_this8$config !== void 0 ? _record$_this8$config : rowIndex);
+                  }, rowId !== null && rowId !== void 0 ? rowId : rowIndex);
                 }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
                   children: /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
                     colSpan: this.props.columns.length,
@@ -696,6 +765,8 @@ ReactDatatable.defaultProps = {
   total_record: 0,
   onChange: function onChange() {},
   onPageChange: function onPageChange() {},
-  onRowClicked: function onRowClicked() {}
+  onRowClicked: function onRowClicked() {},
+  checkSelectedIds: [],
+  onCheckRowChange: function onCheckRowChange() {}
 };
 var _default = exports["default"] = ReactDatatable;

package/dist/InputCheck/index.js

@@ -4,11 +4,14 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = InputComponent;
+exports["default"] = InputCheck;
 var _react = _interopRequireWildcard(require("react"));
 var _syles = require("./syles");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["value", "label", "onChange", "styleContainer", "styleLabel"];
+var _excluded = ["value", "label", "onChange", "styleContainer", "styleLabel"]; //Exemplo de uso
+//<InputCheck onChange={onSelectItem} name="isValido" value={values.isValido} />
+//function onSelectItem(ev) { setValues({...values, [ev.target.name]: ev.target.value})}
+//Compativel com a função onChange
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -24,7 +27,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
-function InputComponent(_ref) {
+function InputCheck(_ref) {
   var value = _ref.value,
     label = _ref.label,
     onChange = _ref.onChange,
@@ -46,18 +49,25 @@ function InputComponent(_ref) {
     if (onChange) onChange({
       target: _objectSpread({
         value: checked
-      }, inputProps)
+      }, inputProps),
+      event: ev
     });
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_syles.Container, {
     style: styleContainer,
+    disabled: inputProps.disabled,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
       className: "checkbox",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_syles.SelectBox, _objectSpread({
         checked: state,
         type: "checkbox",
         onChange: onSelect
-      }, inputProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      }, inputProps)), inputProps.disabled && state ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "checkmark",
+        style: {
+          backgroundColor: '#666666'
+        }
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: "checkmark"
       })]
     }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_syles.Label, {

package/dist/InputCheck/syles.js

@@ -9,9 +9,17 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3;
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-var Container = exports.Container = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  margin: auto 0;\n\n  .checkbox {\n    display: block;\n    position: relative;\n    padding-left: 20px;\n    margin-bottom: 20px;\n    cursor: pointer;\n    font-size: 22px;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n\n  .checkmark {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 20px;\n    width: 20px;\n    background-color: #eee;\n    border-radius: 3px;\n  }\n  .checkbox:hover input ~ .checkmark {\n    background-color: #ccc;\n  }\n  .checkbox input:checked ~ .checkmark {\n    background-color: var(--blue);\n  }\n  .checkmark:after {\n    content: '';\n    position: absolute;\n    display: none;\n  }\n  .checkbox input:checked ~ .checkmark:after {\n    display: block;\n  }\n  .checkbox .checkmark:after {\n    left: 9px;\n    top: 5px;\n    width: 5px;\n    height: 10px;\n    border: solid white;\n    border-width: 0 3px 3px 0;\n    -webkit-transform: rotate(45deg);\n    -ms-transform: rotate(45deg);\n    transform: rotate(45deg);\n  }\n"])));
-var SelectBox = exports.SelectBox = (0, _styledComponents["default"])(_reactstrap.Input)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  opacity: 0;\n  cursor: pointer;\n  height: 0;\n  width: 0;\n"])));
-var Label = exports.Label = _styledComponents["default"].label(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  padding-top: 7px;\n"])), function (props) {
+var Container = exports.Container = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  margin: auto 0;\n\n  .checkbox {\n    display: block;\n    position: relative;\n    padding-left: 30px;\n    margin-bottom: 20px;\n    font-size: 22px;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    cursor: ", ";\n  }\n\n  .checkmark {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 20px;\n    width: 20px;\n    border-radius: 3px;\n\n    background-color: ", ";\n  }\n  .checkbox:hover input ~ .checkmark {\n    background-color: ", ";\n  }\n  .checkbox input:checked ~ .checkmark {\n    background-color: var(--blue);\n  }\n  .checkmark:after {\n    content: '';\n    position: absolute;\n    display: none;\n  }\n  .checkbox input:checked ~ .checkmark:after {\n    display: block;\n  }\n  .checkbox .checkmark:after {\n    left: 9px;\n    top: 5px;\n    width: 5px;\n    height: 10px;\n    border: solid white;\n    border-width: 0 3px 3px 0;\n    -webkit-transform: rotate(45deg);\n    -ms-transform: rotate(45deg);\n    transform: rotate(45deg);\n  }\n"])), function (props) {
+  return !props.disabled ? 'pointer' : 'unset';
+}, function (props) {
+  return props.disabled ? '#ccc' : '#eee';
+}, function (props) {
+  return !props.disabled && '#ccc';
+});
+var SelectBox = exports.SelectBox = (0, _styledComponents["default"])(_reactstrap.Input)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  opacity: 0;\n  height: 0;\n  width: 0;\n\n  cursor: ", ";\n"])), function (props) {
+  return !props.disabled ? 'pointer' : 'unset';
+});
+var Label = exports.Label = _styledComponents["default"].label(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n"])), function (props) {
   return props.isHighlight && 'var(--primary)';
 }, function (props) {
   return props.isHighlight && '1.5rem';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bitys-react-components",
   "description": "",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "private": false,
   "main": "dist/index.js",
   "license": "MIT",