datastake-daf 0.6.187 → 0.6.188

package/src/@daf/core/components/Table/StickyTable/index.jsx

@@ -1,35 +1,94 @@
-import React from 'react';
-import { Table } from 'antd';
-import PropTypes from 'prop-types'
+import React from "react";
+import styled from "styled-components";
+import { Table } from "antd";
+import PropTypes from "prop-types";
+import ComponentWithFocus from "../../Dashboard/ComponentWithFocus/index.jsx";
 
 export default function StickyTable({
   size = null,
   maxHeight = 300,
+  containerHeight = 525,
   dataSource = [],
   columns = {},
   pagination = false,
+  doEmptyRows = true,
   ...props
 }) {
+  const data = React.useMemo(() => {
+    const MIN_ROWS = 4;
+
+    if (dataSource.length < MIN_ROWS) {
+      const paddedData = [...dataSource];
+      while (paddedData.length < MIN_ROWS) {
+        paddedData.push({ empty: true });
+      }
+      return paddedData;
+    }
+
+    return dataSource;
+  }, [dataSource]);
+
+  const Wrapper = React.useMemo(() => {
+    return data.length > 5 ? ComponentWithFocus : "div";
+  }, [data.length]);
+
   return (
-    <div className="daf-sticky-table">
-      <Table
-        {...props}
-        size={size}
-        scroll
-        sticky
-        style={{ maxHeight }}
-        dataSource={dataSource}
-        columns={columns}
-        pagination={pagination}
-      />
-    </div>
+    <Wrapper>
+      <Style>
+        <div
+          className="daf-table-wrapper"
+          style={{
+            maxHeight: containerHeight,
+            overflowY: "auto",
+          }}
+        >
+          <div className="daf-sticky-table">
+            <Table
+              {...props}
+              size={size}
+              scroll
+              sticky
+              style={{ maxHeight }}
+              dataSource={data}
+              columns={columns}
+              pagination={pagination}
+            />
+          </div>
+        </div>
+      </Style>
+    </Wrapper>
   );
 }
 
+const Style = styled.div`
+  max-width: calc(100% - 48px);
+  margin-left: var(--size-lg);
+  overflow: hidden;
+
+  .daf-table {
+    padding: 0px;
+    margin-top: 0px;
+
+    .ant-tag {
+      text-align: center;
+    }
+  }
+
+  .daf-select-filters .filters {
+    padding-top: 16px;
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .daf-table {
+    padding-top: 16px;
+  }
+`;
+
 StickyTable.propTypes = {
   size: PropTypes.any,
   maxHeight: PropTypes.number,
   dataSource: PropTypes.array,
   columns: PropTypes.object,
   pagination: PropTypes.any,
-}
+};