pixel-react 1.8.0 → 1.8.1

package/src/components/Table/Table.tsx

@@ -1,178 +1,178 @@
-import './Table.scss';
-import { isFunction } from '../../assets/utils/functionUtils';
-import classNames from 'classnames';
-import {
-  ColumnsProps,
-  DataProps,
-  TableProps,
-  SelectedItemProps,
-} from './Types';
-import { prepareData } from '../../utils/TableCell/TableCell';
-import Checkbox from '../Checkbox';
-import Typography from '../Typography';
-import Icon from '../Icon';
-
-// import NoData from '../NoData/NoData';
-
-const Table = ({
-  data = [],
-  columns = [],
-  headerType,
-  withCheckbox,
-  onSelect,
-  allSelected,
-  partialSelected = false,
-  withFixedHeader = true,
-  borderWithRadius = false,
-  headerCheckboxDisabled = false,
-  noDataContent,
-  // noDataImage,
-  // noDataImageSize,
-  height = '100%',
-  className = '',
-  tableHeadClass = '',
-  tableBodyRowClass = '',
-  headerTextColor,
-  tableDataTextColor,
-  headerIconName = '',
-  headerIconOnClick = () => {},
-}: TableProps) => {
-  const hanleOnclick = (column: ColumnsProps, row: DataProps) => {
-    let { onClick, accessor } = column;
-    if (onClick && isFunction(onClick)) {
-      onClick(accessor, row);
-    }
-  };
-  const onSelectClick = (e: object, item: SelectedItemProps) => {
-    if (onSelect) {
-      onSelect(e, item);
-    }
-  };
-
-  return (
-    <div
-      style={{ height: height, position: 'relative' }}
-      className={classNames(className, {
-        'ff-fixed-header-table': withFixedHeader,
-        'border-borderRadius': borderWithRadius,
-      })}
-    >
-      {/* {iconContainer ? iconContainer : ''} */}
-      <div className="ff-table-icon">
-        <Icon
-          height={14}
-          width={14}
-          name={headerIconName}
-          onClick={headerIconOnClick}
-        ></Icon>
-      </div>
-
-      <table className={classNames(`ff-table`)} cellSpacing={0}>
-        <thead
-          className={classNames(
-            {
-              'ff-fixed-header': withFixedHeader,
-            },
-            tableHeadClass
-          )}
-        >
-          <tr>
-            {/* columns.map((column, index) */}
-            {columns.map((column, index) => (
-              <th
-                className={classNames(
-                  `${headerType && `${headerType}-bg`}`,
-                  `${headerTextColor && `${headerTextColor}-color`}`
-                )}
-                key={column.header}
-                style={{ width: column?.width }}
-              >
-                <Typography
-                  as="div"
-                  fontSize={12}
-                  fontWeight="semi-bold"
-                  className="ff-label-checkbox-container"
-                >
-                  {index === 0 && withCheckbox && (
-                    <span className="ff-table-checkbox">
-                      <Checkbox
-                        onChange={(e) => {
-                          onSelectClick(e, { allSelected: e.target.checked });
-                        }}
-                        checked={
-                          allSelected !== undefined ? allSelected : false
-                        }
-                        partial={!!partialSelected}
-                        disabled={headerCheckboxDisabled}
-                      />
-                    </span>
-                  )}
-
-                  {column.header}
-                </Typography>
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody>
-          {data.length > 0 &&
-            data.map((row: any, index: number) => (
-              <tr
-                key={row.id || index}
-                className={classNames(tableBodyRowClass, {
-                  'disabled-row': row.disabled,
-                })}
-              >
-                {columns.map((column, i) => {
-                  return (
-                    <td
-                      key={column.accessor + i}
-                      onClick={() => hanleOnclick(column, row)}
-                      className={classNames(column.className, {
-                        'clickable-cell': column.onClick,
-                      })}
-                    >
-                      <Typography
-                        as="div"
-                        color={tableDataTextColor}
-                        className="ff-data-checkbox-container"
-                      >
-                        {i === 0 && withCheckbox && (
-                          <span className="ff-table-checkbox">
-                            <Checkbox
-                              onChange={(e) => {
-                                onSelectClick(e, row);
-                              }}
-                              checked={row.checked}
-                              disabled={!!row.disabled}
-                            />
-                          </span>
-                        )}
-                        {prepareData(row, column)}
-                      </Typography>
-                    </td>
-                  );
-                })}
-              </tr>
-            ))}
-        </tbody>
-      </table>
-      {data.length <= 0 && (
-        <div
-          className="no-data-content"
-          style={{ height: `calc(${height} - 50px)` }}
-        >
-          {/* commented for future requirement for adding image when the data will not be present*/}
-          {/* <NoData
-            image={noDataImage ? noDataImage : 'no_data_found'}
-            content={noDataContent}
-            size={noDataImageSize}
-          /> */}
-          {noDataContent}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default Table;
+import './Table.scss';
+import { isFunction } from '../../assets/utils/functionUtils';
+import classNames from 'classnames';
+import {
+  ColumnsProps,
+  DataProps,
+  TableProps,
+  SelectedItemProps,
+} from './Types';
+import { prepareData } from '../../utils/TableCell/TableCell';
+import Checkbox from '../Checkbox';
+import Typography from '../Typography';
+import Icon from '../Icon';
+
+// import NoData from '../NoData/NoData';
+
+const Table = ({
+  data = [],
+  columns = [],
+  headerType,
+  withCheckbox,
+  onSelect,
+  allSelected,
+  partialSelected = false,
+  withFixedHeader = true,
+  borderWithRadius = false,
+  headerCheckboxDisabled = false,
+  noDataContent,
+  // noDataImage,
+  // noDataImageSize,
+  height = '100%',
+  className = '',
+  tableHeadClass = '',
+  tableBodyRowClass = '',
+  headerTextColor,
+  tableDataTextColor,
+  headerIconName = '',
+  headerIconOnClick = () => {},
+}: TableProps) => {
+  const hanleOnclick = (column: ColumnsProps, row: DataProps) => {
+    let { onClick, accessor } = column;
+    if (onClick && isFunction(onClick)) {
+      onClick(accessor, row);
+    }
+  };
+  const onSelectClick = (e: object, item: SelectedItemProps) => {
+    if (onSelect) {
+      onSelect(e, item);
+    }
+  };
+
+  return (
+    <div
+      style={{ height: height, position: 'relative' }}
+      className={classNames(className, {
+        'ff-fixed-header-table': withFixedHeader,
+        'border-borderRadius': borderWithRadius,
+      })}
+    >
+      {/* {iconContainer ? iconContainer : ''} */}
+      <div className="ff-table-icon">
+        <Icon
+          height={14}
+          width={14}
+          name={headerIconName}
+          onClick={headerIconOnClick}
+        ></Icon>
+      </div>
+
+      <table className={classNames(`ff-table`)} cellSpacing={0}>
+        <thead
+          className={classNames(
+            {
+              'ff-fixed-header': withFixedHeader,
+            },
+            tableHeadClass
+          )}
+        >
+          <tr>
+            {/* columns.map((column, index) */}
+            {columns.map((column, index) => (
+              <th
+                className={classNames(
+                  `${headerType && `${headerType}-bg`}`,
+                  `${headerTextColor && `${headerTextColor}-color`}`
+                )}
+                key={column.header}
+                style={{ width: column?.width }}
+              >
+                <Typography
+                  as="div"
+                  fontSize={12}
+                  fontWeight="semi-bold"
+                  className="ff-label-checkbox-container"
+                >
+                  {index === 0 && withCheckbox && (
+                    <span className="ff-table-checkbox">
+                      <Checkbox
+                        onChange={(e) => {
+                          onSelectClick(e, { allSelected: e.target.checked });
+                        }}
+                        checked={
+                          allSelected !== undefined ? allSelected : false
+                        }
+                        partial={!!partialSelected}
+                        disabled={headerCheckboxDisabled}
+                      />
+                    </span>
+                  )}
+
+                  {column.header}
+                </Typography>
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {data.length > 0 &&
+            data.map((row: any, index: number) => (
+              <tr
+                key={row.id || index}
+                className={classNames(tableBodyRowClass, {
+                  'disabled-row': row.disabled,
+                })}
+              >
+                {columns.map((column, i) => {
+                  return (
+                    <td
+                      key={column.accessor + i}
+                      onClick={() => hanleOnclick(column, row)}
+                      className={classNames(column.className, {
+                        'clickable-cell': column.onClick,
+                      })}
+                    >
+                      <Typography
+                        as="div"
+                        color={tableDataTextColor}
+                        className="ff-data-checkbox-container"
+                      >
+                        {i === 0 && withCheckbox && (
+                          <span className="ff-table-checkbox">
+                            <Checkbox
+                              onChange={(e) => {
+                                onSelectClick(e, row);
+                              }}
+                              checked={row.checked}
+                              disabled={!!row.disabled}
+                            />
+                          </span>
+                        )}
+                        {prepareData(row, column)}
+                      </Typography>
+                    </td>
+                  );
+                })}
+              </tr>
+            ))}
+        </tbody>
+      </table>
+      {data.length <= 0 && (
+        <div
+          className="no-data-content"
+          style={{ height: `calc(${height} - 50px)` }}
+        >
+          {/* commented for future requirement for adding image when the data will not be present*/}
+          {/* <NoData
+            image={noDataImage ? noDataImage : 'no_data_found'}
+            content={noDataContent}
+            size={noDataImageSize}
+          /> */}
+          {noDataContent}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Table;

package/src/components/Table/Types.ts

@@ -1,124 +1,124 @@
-import { ReactNode } from 'react';
-
-export interface ColumnsProps {
-  /**
-   * column name
-   */
-  header: string;
-  /**
-   * data key for particular column
-   */
-  accessor: string;
-  /**
-   * className for a column
-   */
-  className?: string;
-  /**
-   * width of a column
-   */
-  width?: number;
-  /**
-   * data for the column
-   */
-  cell?: (e: any) => JSX.Element | string | ReactNode;
-
-  onClick?: (colum: string, row: DataProps) => void;
-}
-export interface DataProps {
-  /**
-   * data for each row
-   */
-  [key: string]: any;
-}
-export interface SelectedItemProps {
-  /**
-   * selected row object | All selected flag
-   */
-  [key: string]: string | number | boolean;
-}
-export interface TableProps {
-  /**
-   * Data for table
-   */
-  data: Array<number | string | DataProps>;
-  /**
-   * Column details for table
-   */
-  columns: Array<any>;
-  /**
-   * Header type to have different background color
-   */
-  headerType: 'default' | 'primary' | 'secondary' | 'tertiary';
-  /**
-   * withFixedHeader prop to have non-scrollable fixed table header
-   */
-  withFixedHeader?: boolean;
-  /**
-   * borderWithRadius prop to have table with border 1px and borderRadius 5px
-   */
-  borderWithRadius?: boolean;
-  /**
-   * Check box feature to select the row
-   */
-  withCheckbox?: boolean;
-  /**
-   * Event for checkbox onClick
-   */
-  onSelect?: (e: object, arg: SelectedItemProps) => void;
-  /**
-   * Check box feature to select the row
-   */
-  allSelected?: boolean;
-  /**
-   * send true to show partial checkbox in the header
-   */
-  partialSelected?: boolean;
-  /**
-   * send true to disable the checkbox in the header
-   */
-  headerCheckboxDisabled?: boolean;
-  /**
-   * The content that to be displayed if no data not found
-   */
-  noDataContent: string | ReactNode;
-  /**
-   * Image that to be displayed if you don't have data
-   */
-  noDataImage?: string;
-  /**
-   * Size of the image that to be displayed if you don't have data
-   */
-  noDataImageSize?: 'x-large' | 'large' | 'medium' | 'small' | 'x-small';
-  /**
-   *  Height of the table in string
-   */
-  height?: string;
-  /**
-   *  classNames for the table container
-   */
-  className?: string;
-  /**
-   *  classNames for the table Header container
-   */
-  tableHeadClass?: string;
-  /**
-   *  classNames for the table Row container
-   */
-  tableBodyRowClass?: string;
-  /**
-   * custom color for the column text
-   */
-  headerTextColor?: 'default' | 'primary';
-  /**
-   * custom color for the row text
-   */
-  tableDataTextColor?: string;
-  /**
-   * icon for the table header, for expand or other purposes
-   */
-  headerIconName?: string;
-  /**
-   * handle function for the table header icon
-   */
-  headerIconOnClick?: () => void;
-}
+import { ReactNode } from 'react';
+
+export interface ColumnsProps {
+  /**
+   * column name
+   */
+  header: string;
+  /**
+   * data key for particular column
+   */
+  accessor: string;
+  /**
+   * className for a column
+   */
+  className?: string;
+  /**
+   * width of a column
+   */
+  width?: number;
+  /**
+   * data for the column
+   */
+  cell?: (e: any) => JSX.Element | string | ReactNode;
+
+  onClick?: (colum: string, row: DataProps) => void;
+}
+export interface DataProps {
+  /**
+   * data for each row
+   */
+  [key: string]: any;
+}
+export interface SelectedItemProps {
+  /**
+   * selected row object | All selected flag
+   */
+  [key: string]: string | number | boolean;
+}
+export interface TableProps {
+  /**
+   * Data for table
+   */
+  data: Array<number | string | DataProps>;
+  /**
+   * Column details for table
+   */
+  columns: Array<any>;
+  /**
+   * Header type to have different background color
+   */
+  headerType: 'default' | 'primary' | 'secondary' | 'tertiary';
+  /**
+   * withFixedHeader prop to have non-scrollable fixed table header
+   */
+  withFixedHeader?: boolean;
+  /**
+   * borderWithRadius prop to have table with border 1px and borderRadius 5px
+   */
+  borderWithRadius?: boolean;
+  /**
+   * Check box feature to select the row
+   */
+  withCheckbox?: boolean;
+  /**
+   * Event for checkbox onClick
+   */
+  onSelect?: (e: object, arg: SelectedItemProps) => void;
+  /**
+   * Check box feature to select the row
+   */
+  allSelected?: boolean;
+  /**
+   * send true to show partial checkbox in the header
+   */
+  partialSelected?: boolean;
+  /**
+   * send true to disable the checkbox in the header
+   */
+  headerCheckboxDisabled?: boolean;
+  /**
+   * The content that to be displayed if no data not found
+   */
+  noDataContent: string | ReactNode;
+  /**
+   * Image that to be displayed if you don't have data
+   */
+  noDataImage?: string;
+  /**
+   * Size of the image that to be displayed if you don't have data
+   */
+  noDataImageSize?: 'x-large' | 'large' | 'medium' | 'small' | 'x-small';
+  /**
+   *  Height of the table in string
+   */
+  height?: string;
+  /**
+   *  classNames for the table container
+   */
+  className?: string;
+  /**
+   *  classNames for the table Header container
+   */
+  tableHeadClass?: string;
+  /**
+   *  classNames for the table Row container
+   */
+  tableBodyRowClass?: string;
+  /**
+   * custom color for the column text
+   */
+  headerTextColor?: 'default' | 'primary';
+  /**
+   * custom color for the row text
+   */
+  tableDataTextColor?: string;
+  /**
+   * icon for the table header, for expand or other purposes
+   */
+  headerIconName?: string;
+  /**
+   * handle function for the table header icon
+   */
+  headerIconOnClick?: () => void;
+}

package/src/components/Table/index.ts

@@ -1 +1 @@
-export { default } from './Table';
+export { default } from './Table';