From 1b5079f76020d579d2edc00da20edec0956521bf Mon Sep 17 00:00:00 2001
From: xidedix <xidedix@users.noreply.github.com>
Date: Tue, 22 Dec 2020 17:58:01 +0100
Subject: [PATCH] fix(CDataTable): tableFilter and cleaner minor cleanup

---
 src/table/CDataTable.css                      | 18 ++++++++++++++
 src/table/CDataTable.js                       | 16 +++++++------
 src/table/tests/CDataTable.test.js            |  1 +
 .../__snapshots__/CDataTable.test.js.snap     | 24 +++++++++++++++----
 4 files changed, 47 insertions(+), 12 deletions(-)
 create mode 100644 src/table/CDataTable.css

diff --git a/src/table/CDataTable.css b/src/table/CDataTable.css
new file mode 100644
index 00000000..9cc1914f
--- /dev/null
+++ b/src/table/CDataTable.css
@@ -0,0 +1,18 @@
+.c-datatable-filter {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+.c-datatable-filter label {
+  margin-bottom: 0;
+}
+.c-datatable-items-per-page {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-end;
+  align-items: center;
+}
+.c-datatable-items-per-page label {
+  margin-bottom: 0;
+}
diff --git a/src/table/CDataTable.js b/src/table/CDataTable.js
index 876ca834..7d1c0163 100644
--- a/src/table/CDataTable.js
+++ b/src/table/CDataTable.js
@@ -3,9 +3,10 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import CPagination from '../pagination/CPagination'
 import CElementCover from '../element-cover/CElementCover'
-import style from './CDataTable.module.css'
 import CIcon from '@coreui/icons-react'
 import { cilArrowTop, cilBan, cilFilterX } from '@coreui/icons'
+import style from './CDataTable.module.css'
+import './CDataTable.css'
 
 //component - CoreUI / CTable
 const CDataTable = props => {
@@ -343,7 +344,7 @@ const CDataTable = props => {
 
   const cleanerProps = {
     content: cilFilterX,
-    className: `ml-2 ${isFiltered ? 'text-danger' : 'transparent'}`,
+    className: `mfs-2 ${isFiltered ? 'text-danger' : 'transparent'}`,
     role: isFiltered ? 'button' : null,
     tabIndex: isFiltered ? 0 : null,
   }
@@ -414,11 +415,11 @@ const CDataTable = props => {
     <div className="row my-2 mx-0">
       {
         (tableFilter || cleaner) &&
-        <div className="col-sm-6 form-inline p-0">
+        <div className="col-sm-6 form-inline p-0 c-datatable-filter">
           {
             tableFilter &&
             <>
-              <label className="mr-2">{tableFilterData.label}</label>
+              <label className="mfe-2">{tableFilterData.label}</label>
               <input
                 className="form-control"
                 type="text"
@@ -436,6 +437,7 @@ const CDataTable = props => {
               <CIcon
                 {...cleanerProps}
                 onClick={clean}
+                onKeyUp={(event) => { if (event.key === 'Enter') clean() }}
               />
             )
           }
@@ -444,9 +446,9 @@ const CDataTable = props => {
       }
       {
         itemsPerPageSelect &&
-        <div className={'col-sm-6 p-0 ' + (!(tableFilter || cleaner) && ' offset-sm-6')}>
-          <div className="form-inline justify-content-sm-end">
-            <label className="mr-2">{paginationSelect.label}</label>
+        <div className={`col-sm-6 p-0 ${(tableFilter || cleaner) ? '' : 'offset-sm-6'}`}>
+          <div className="form-inline justify-content-sm-end c-datatable-items-per-page">
+            <label className="mfe-2">{paginationSelect.label}</label>
             <select
               className="form-control"
               onChange={paginationChange}
diff --git a/src/table/tests/CDataTable.test.js b/src/table/tests/CDataTable.test.js
index fef53466..c905e41b 100644
--- a/src/table/tests/CDataTable.test.js
+++ b/src/table/tests/CDataTable.test.js
@@ -49,6 +49,7 @@ describe('CDataTable', () => {
         clickableRows
         columnFilter
         tableFilter
+        cleaner
         addTableClasses="table-classes"
         size="sm"
         dark
diff --git a/src/table/tests/__snapshots__/CDataTable.test.js.snap b/src/table/tests/__snapshots__/CDataTable.test.js.snap
index ffdadea0..5f3c3902 100644
--- a/src/table/tests/__snapshots__/CDataTable.test.js.snap
+++ b/src/table/tests/__snapshots__/CDataTable.test.js.snap
@@ -51,10 +51,10 @@ Array [
       className="row my-2 mx-0"
     >
       <div
-        className="col-sm-6 form-inline p-0"
+        className="col-sm-6 form-inline p-0 c-datatable-filter"
       >
         <label
-          className="mr-2"
+          className="mfe-2"
         >
           Filter:
         </label>
@@ -67,15 +67,29 @@ Array [
           type="text"
           value=""
         />
+        <svg
+          className="c-icon mfs-2 transparent"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<polygon fill='var(--ci-primary-color, currentColor)' points='40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16' class='ci-primary'/><polygon fill='var(--ci-primary-color, currentColor)' points='166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225' class='ci-primary'/>",
+            }
+          }
+          onClick={[Function]}
+          onKeyUp={[Function]}
+          role="img"
+          tabIndex={null}
+          viewBox="0 0 512 512"
+          xmlns="http://www.w3.org/2000/svg"
+        />
       </div>
       <div
-        className="col-sm-6 p-0 false"
+        className="col-sm-6 p-0 "
       >
         <div
-          className="form-inline justify-content-sm-end"
+          className="form-inline justify-content-sm-end c-datatable-items-per-page"
         >
           <label
-            className="mr-2"
+            className="mfe-2"
           >
             Items per page:
           </label>