aio-table 7.0.0 → 7.0.3

package/index.css

@@ -11,6 +11,7 @@
   font-size:14px;
   overflow: hidden;
   height:500px;
+  width:100%;
 }
 .aio-table.rtl{
   direction:rtl;
@@ -125,7 +126,9 @@
   justify-content: center;
   width:fit-content;
 }
-
+.aio-table-checkbox{
+  fill:dodgerblue;
+}
 .aio-table.rtl .aio-table-cell{
     box-shadow: -3px 4px 6px -2px rgba(0,0,0,0.1);
 }
@@ -471,7 +474,6 @@ select.aio-table-paging-button{
     border-right:8px solid transparent;
   }
   .aio-table-card{
-    background:#fff;
     position:relative;
     display:flex;
     box-sizing: border-box;

package/index.js

@@ -121,6 +121,9 @@ class AIOTable extends _react.Component {
     let {
       freezeSize
     } = this.state;
+    let {
+      cardTemplate
+    } = this.props;
     let freezeMode = freezeColumns.length !== 0 && unFreezeColumns.length !== 0;
     let rows = this.getRows(sorts, freezeMode);
     this.rows = rows;
@@ -151,7 +154,9 @@ class AIOTable extends _react.Component {
       columns: unFreezeColumns,
       tableIndex: 1,
       type: "unFreezeCells"
-    })));
+    })), cardTemplate && /*#__PURE__*/_react.default.createElement(AIOTableUnit, {
+      rows: rows
+    }));
   }
 
   getRows(sorts, freezeMode) {
@@ -617,7 +622,26 @@ class AIOTableUnit extends _react.Component {
     this.dom = /*#__PURE__*/(0, _react.createRef)();
   }
 
+  getCardStyle() {
+    let {
+      columnGap,
+      rowGap
+    } = this.context;
+    return {
+      gridColumnGap: columnGap,
+      gridRowGap: rowGap
+    };
+  }
+
   getStyle() {
+    if (this.context.cardTemplate) {
+      return this.getCardStyle();
+    }
+
+    return this.getGridStyle();
+  }
+
+  getGridStyle() {
     var {
       rowGap,
       columnGap
@@ -804,7 +828,8 @@ class AIOTableUnit extends _react.Component {
       cardTemplate,
       cardRowCount,
       search,
-      searchText
+      searchText,
+      indent
     } = this.context;
     var {
       tableIndex,
@@ -855,7 +880,21 @@ class AIOTableUnit extends _react.Component {
       return /*#__PURE__*/_react.default.createElement("div", {
         key: rowIndex + '-' + tableIndex,
         className: "aio-table-card"
-      }, cardTemplate(row.row, () => fn.toggleRow(row.row)));
+      }, row.row._level !== 0 && /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          width: row.row._level * indent,
+          border: '1px solid',
+          height: '100%',
+          position: 'relative'
+        }
+      }, /*#__PURE__*/_react.default.createElement("svg", {
+        style: {
+          background: 'yellow',
+          width: '100%',
+          positon: 'absolute',
+          height: '100%'
+        }
+      })), cardTemplate(row.row, () => fn.toggleRow(row.row)));
     }), rows && rows.length === 0 && fn.getNoData(columns), !rows && fn.getLoading());
   }
 
@@ -953,7 +992,10 @@ class AIOTableUnit extends _react.Component {
               SetState({
                 focused: cellId
               }, 'cellonClick');
-              setTimeout(() => (0, _jquery.default)('.aio-table-input:focus').select(), 10);
+              setTimeout(() => {
+                let dom = (0, _jquery.default)(`[data-cell-id = ${cellId}]`).find('.aio-table-input');
+                dom.focus().select();
+              }, 10);
             }
           },
           striped: this.renderIndex % 2 === 0 && striped,
@@ -1282,6 +1324,9 @@ class AIOTableCell extends _react.Component {
       rowHeight,
       getCellAttrs
     } = this.context;
+    let {
+      striped
+    } = this.props;
     var style = {
       height: rowHeight,
       overflow: template ? undefined : 'hidden',
@@ -1292,6 +1337,13 @@ class AIOTableCell extends _react.Component {
       style.padding = 0;
     }
 
+    if (typeof striped === 'string') {
+      style.background = striped;
+    } else if (Array.isArray(striped)) {
+      style.background = striped[0];
+      style.color = striped[1];
+    }
+
     let attrs = getCellAttrs(row, column);
     return { ...style,
       ...attrs.style
@@ -1308,7 +1360,7 @@ class AIOTableCell extends _react.Component {
     } = this.props;
     let attrs = getCellAttrs(row, column);
 
-    if (striped) {
+    if (striped === true) {
       className += ' striped';
     }
 
@@ -1409,20 +1461,20 @@ class AIOTableCell extends _react.Component {
     let {
       fn
     } = this.context;
-    let template = typeof column.template === 'function' ? column.template(row, column) : column.template;
+    let template = typeof column.template === 'function' ? column.template(row, column, value) : column.template;
 
     if (!template) {
       return value;
     }
 
-    if (!template.type) {
-      return template;
-    }
-
     if (template.type === 'slider') {
       return fn.getSliderCell(template, value);
     }
 
+    if (template.type === 'checkbox') {
+      return fn.getCheckboxCell(template, value, row);
+    }
+
     if (template.type === 'options') {
       return fn.getOptionsCell(template, row);
     }
@@ -1440,6 +1492,8 @@ class AIOTableCell extends _react.Component {
     if (template.type === 'gantt') {
       return fn.getGanttCell(row, template);
     }
+
+    return template;
   }
 
   getContent(row, column, value) {
@@ -2207,9 +2261,8 @@ function ATFN({
     },
 
     getOptionsCell({
-      options,
-      row
-    }) {
+      options
+    }, row) {
       return /*#__PURE__*/_react.default.createElement(_aioButton.default, {
         type: "select",
         caret: false,
@@ -2229,6 +2282,42 @@ function ATFN({
       });
     },
 
+    getCheckboxCell(template, value, row) {
+      let {
+        color,
+        onChange,
+        size = 24
+      } = template;
+      let style = {
+        width: size,
+        height: size
+      };
+
+      if (!!value) {
+        return /*#__PURE__*/_react.default.createElement("svg", {
+          style: style,
+          viewBox: `0,0,24,24`,
+          className: "aio-table-checkbox checked",
+          onClick: () => onChange(row, false)
+        }, /*#__PURE__*/_react.default.createElement("path", {
+          fill: color,
+          d: "M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z"
+        }));
+      } else {
+        return /*#__PURE__*/_react.default.createElement("svg", {
+          style: style,
+          viewBox: `0,0,24,24`,
+          className: "aio-table-checkbox",
+          onClick: () => onChange(row, true)
+        }, /*#__PURE__*/_react.default.createElement("path", {
+          fill: color,
+          "ng-attr-fill": "{{icon.color}}",
+          "ng-attr-d": "{{icon.data}}",
+          d: "M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z"
+        }));
+      }
+    },
+
     getGanttCell(row, template) {
       let {
         rtl
@@ -3605,6 +3694,7 @@ function ATFN({
     getSliderCell: $$.getSliderCell,
     getOptionsCell: $$.getOptionsCell,
     getGanttCell: $$.getGanttCell,
+    getCheckboxCell: $$.getCheckboxCell,
     handleOutsideClick: $$.handleOutsideClick,
     onScroll: $$.onScroll,
     getCardRowCount: $$.getCardRowCount,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aio-table",
-  "version": "7.0.0",
+  "version": "7.0.3",
   "description": "all in one table. tree mode , simple mode , tree mode, gantt mode , groupby mode, freeze mode.",
   "main": "index.js",
   "scripts": {