refactor(datatable): ♻️ Suddivisione in metodi

resources/js/Components/DataTable/TableColumn.jsx

@@ -59,7 +59,20 @@ export default class TableColumn extends Component {
       const checkbox = $(vnode.dom)
         .children('mwc-checkbox');
 
-      checkbox.on('change', () => {
+      checkbox.on('change', () => this.onCheckboxClicked.bind(this));
+    }
+
+    // Handle click on column (add arrows)
+    const observer = new MutationObserver(this.onClassChanged.bind(this));
+    observer.observe(this.element, {
+      attributes: true,
+      attributeFilter: ['class']
+    });
+
+    $(this.element).find('.mdc-data-table__filter-textfield').on('input', this.onFilterInput.bind(this));
+  }
+
+  onCheckboxClicked() {
     const row: Cash = $(this.element)
       .closest('table')
       .find('tbody tr[checkable]');
@@ -67,11 +80,9 @@ export default class TableColumn extends Component {
     row.addClass('mdc-data-table__row--selected');
 
     row.find('mwc-checkbox').prop('checked', checkbox.prop('checked'));
-      });
   }
 
-    // Handle click on column (add arrows)
+  onClassChanged(mutations: MutationRecord[]) {
-    const observer = new MutationObserver((mutations) => {
     for (const mutation of mutations) {
       const {classList} = mutation.target;
       const ascendingClass = 'mdc-data-table__header-cell--sorted';
@@ -87,24 +98,16 @@ export default class TableColumn extends Component {
         button.show();
       }
     }
-    });
+  }
-    observer.observe(this.element, {
-      attributes: true,
-      attributeFilter: ['class']
-    });
 
-    $(this.element).find('.mdc-data-table__filter-textfield').on('input', (event: InputEvent) => {
+  onFilterInput(event: InputEvent) {
     const index = $(this.element).index();
-      const rows: Cash = $(this.element)
+    const rows: Cash = $(this.element).closest('table').find('tbody tr');
-        .closest('table')
-        .find('tbody tr');
     rows.hide();
-      rows.filter(
+    rows.filter((index_, element) => $(element)
-        (index_, element) => $(element)
       .find(`td:nth-child(${index + 1})`)
       .text()
       .search(event.target.value) !== -1
     ).show();
-    });
   }
 }