@xqmsg/ui-core 0.15.2 → 0.15.4

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.15.2",
+  "version": "0.15.4",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/input/StackedMultiSelect/index.tsx

@@ -1,12 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import {
-  Box,
-  Flex,
-  Text,
-  Image,
-  useOutsideClick,
-  Input,
-} from '@chakra-ui/react';
+import { Box, Flex, Text, Image, Input } from '@chakra-ui/react';
 import {
   FieldOption,
   FieldOptions,
@@ -24,6 +17,7 @@ import {
 import SubtractIcon from '../StackedSelect/assets/svg/subtract.svg';
 import { Dropdown } from '../components/dropdown';
 import Token from '../components/token';
+import { useOnClickOutside } from '../../../hooks/useOnOutsideClick';
 
 export interface StackedMultiSelectProps extends ReactSelectFieldProps {
   options: FieldOptions;
@@ -62,10 +56,7 @@ const StackedMultiSelect = React.forwardRef<
     }
   }, [boundingClientRect]);
 
-  useOutsideClick({
-    ref: dropdownRef,
-    handler: () => setIsFocussed(false),
-  });
+  useOnClickOutside(dropdownRef, () => setIsFocussed(false));
 
   // gets latest watched form value (common delimited) from RHF state and creates a list
   useEffect(() => {

package/src/components/input/StackedSelect/StackedSelect.tsx

@@ -5,7 +5,6 @@ import {
   Input,
   InputGroup,
   InputRightElement,
-  useOutsideClick,
 } from '@chakra-ui/react';
 import { FieldOptions } from '../InputTypes';
 import { StackedInputProps } from '../StackedInput/StackedInput';
@@ -14,6 +13,7 @@ import { UseFormSetValue, FieldValues, Control } from 'react-hook-form';
 import SubtractIcon from './assets/svg/subtract.svg';
 import { Dropdown } from '../components/dropdown';
 import useDidMountEffect from '../../../hooks/useDidMountEffect';
+import { useOnClickOutside } from '../../../hooks/useOnOutsideClick';
 
 export interface StackedSelectProps extends StackedInputProps {
   options: FieldOptions;
@@ -57,7 +57,7 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
       );
     }, [value]);
 
-    useOutsideClick({ ref: dropdownRef, handler: () => setIsFocussed(false) });
+    useOnClickOutside(dropdownRef, () => setIsFocussed(false));
 
     const handleOnSelectItem = (option: {
       label: string;

package/src/components/input/components/dropdown/index.tsx

@@ -54,7 +54,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
             fontSize="13px"
             px="8px"
             py="4px"
-            width="fit-content"
+            width="100%"
             color={colors.label.primary.light}
             _hover={{
               color: colors.label.primary.dark,

package/src/components/table/empty/index.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Table as ChakraTable, Tbody, Td, Tr } from '@chakra-ui/react';
+
+/**
+ * A React component utilized to render the `EmptyTable` component
+ */
+export const EmptyTable: React.FC = () => {
+  const getOpacity = (index: number) => {
+    switch (index) {
+      case 1:
+        return 0.7;
+      case 3:
+        return 0.6;
+      case 5:
+        return 0.5;
+      case 7:
+        return 0.4;
+      case 9:
+        return 0.3;
+      case 11:
+        return 0.2;
+      case 13:
+        return 0.1;
+      default:
+        return 1;
+    }
+  };
+
+  return (
+    <ChakraTable
+      variant="unstyled"
+      width="100%"
+      style={{
+        borderCollapse: 'separate',
+        borderSpacing: '0px',
+      }}
+    >
+      <Tbody>
+        {Array.from({ length: 14 }, (_, i) => i + 1).map(i => (
+          <Tr>
+            <Td height="23px" opacity={getOpacity(i)}></Td>
+          </Tr>
+        ))}
+      </Tbody>
+    </ChakraTable>
+  );
+};

package/src/components/table/index.tsx

@@ -9,7 +9,6 @@ import { generateTableColumnsAsConst } from './utils/generateTableColumns';
 
 import {
   Table as ChakraTable,
-  TableCaption,
   TableContainer,
   Tbody,
   Td,
@@ -19,6 +18,7 @@ import {
 } from '@chakra-ui/react';
 import { TableLoadingRows } from './components/loading';
 import colors from '../../theme/foundations/colors';
+import { EmptyTable } from './empty';
 
 export interface TableProps<T extends ReadonlyTableColumns> {
   columns: TableColumns;
@@ -36,46 +36,47 @@ export function Table<T extends ReadonlyTableColumns>({
   columns,
   headers,
   body,
-  placeholder = 'There is currently no available data',
   loading,
-
   loadMore,
 }: TableProps<T>) {
   const columnsAsConst = generateTableColumnsAsConst(columns);
 
   return (
     <TableContainer border="none" overflowX="auto" bg="white" width="100%">
-      <ChakraTable
-        variant="unstyled"
-        width="100%"
-        style={{
-          borderCollapse: 'separate',
-          borderSpacing: '0px',
-        }}
-      >
-        <Thead>
-          <Tr _odd={{ bg: colors.label.primary.dark }}>
-            {columnsAsConst.map(column => (
-              // @ts-ignore
-              <Th>{headers[column]}</Th>
-            ))}
-          </Tr>
-        </Thead>
-        <Tbody>
-          {body.map(row => (
-            <Tr>
+      {body.length ? (
+        <ChakraTable
+          variant="unstyled"
+          width="100%"
+          style={{
+            borderCollapse: 'separate',
+            borderSpacing: '0px',
+          }}
+        >
+          <Thead>
+            <Tr _odd={{ bg: colors.label.primary.dark }}>
               {columnsAsConst.map(column => (
                 // @ts-ignore
-                <Td>{row[column]}</Td>
+                <Th>{headers[column]}</Th>
               ))}
             </Tr>
-          ))}
-        </Tbody>
-        {!body.length && <TableCaption py={10}>{placeholder}</TableCaption>}{' '}
-      </ChakraTable>
-      {loadMore && loading !== undefined && (
-        <TableLoadingRows isLoading={loading} onLoadMore={loadMore} />
+          </Thead>
+          <Tbody>
+            {body.map(row => (
+              <Tr>
+                {columnsAsConst.map(column => (
+                  // @ts-ignore
+                  <Td>{row[column]}</Td>
+                ))}
+              </Tr>
+            ))}
+          </Tbody>
+        </ChakraTable>
+      ) : (
+        <EmptyTable />
       )}
+      {loadMore && loading !== undefined && body.length ? (
+        <TableLoadingRows isLoading={loading} onLoadMore={loadMore} />
+      ) : null}
     </TableContainer>
   );
 }

package/src/hooks/useOnOutsideClick.tsx

@@ -0,0 +1,31 @@
+import { RefObject, useEffect } from 'react';
+
+export function useOnClickOutside(ref: RefObject<any>, handler: () => void) {
+  useEffect(
+    () => {
+      const listener: EventListener = event => {
+        // Do nothing if clicking ref's element or descendent elements
+        if (!ref.current || ref.current.contains(event.target)) {
+          return;
+        }
+
+        handler();
+      };
+
+      document.addEventListener('mousedown', listener);
+      document.addEventListener('touchstart', listener);
+
+      return () => {
+        document.removeEventListener('mousedown', listener);
+        document.removeEventListener('touchstart', listener);
+      };
+    },
+    // Add ref and handler to effect dependencies
+    // It's worth noting that because passed in handler is a new ...
+    // ... function on every render that will cause this effect ...
+    // ... callback/cleanup to run every render. It's not a big deal ...
+    // ... but to optimize you can wrap handler in useCallback before ...
+    // ... passing it into this hook.
+    [ref, handler]
+  );
+}