@tecsinapse/react-web-kit 1.8.0 → 1.10.2

package/src/components/molecules/Select/SelectItem/SelectItem.tsx

@@ -13,7 +13,7 @@ interface SelectItemProps<Data, Type extends 'single' | 'multi'> {
   onSelect: (
     option: Type extends 'single' ? Data | undefined : Data[]
   ) => never | void;
-  keyExtractor: (t: Data, index: number) => string;
+  keyExtractor: (t: Data, index?: number) => string;
   labelExtractor: (t: Data) => string;
   index: number;
 }
@@ -46,33 +46,36 @@ const SelectItem = <Data, Type extends 'single' | 'multi'>({
     }
   }, [checkedAll]);
 
-  const clickItem = item => {
-    // TS Workaround since TS won't infer the ternary operator's result type correctly
-    type OnSelectArg = Parameters<typeof onSelect>[0];
-    const key: Data = item;
-    if (Array.isArray(value)) {
-      const auxChecked = !checked;
-      setChecked(!checked);
-      if (auxChecked) {
-        onSelect([...value, key] as OnSelectArg);
-        [...value, key].length === lenghtOptions && setCheckedAll(true);
+  const clickItem = React.useCallback(
+    (item, _value) => {
+      // TS Workaround since TS won't infer the ternary operator's result type correctly
+      type OnSelectArg = Parameters<typeof onSelect>[0];
+      const key: Data = item;
+      if (Array.isArray(_value)) {
+        const auxChecked = !checked;
+        setChecked(!checked);
+        if (auxChecked) {
+          onSelect([..._value, key] as OnSelectArg);
+          [..._value, key].length === lenghtOptions && setCheckedAll(true);
+        } else {
+          const auxArray: Data[] = [..._value];
+          const indexToExclude = auxArray.indexOf(key);
+          auxArray.splice(indexToExclude, 1);
+          onSelect([...auxArray] as OnSelectArg);
+          setCheckedAll(false);
+        }
       } else {
-        const auxArray: Data[] = [...value];
-        const indexToExclude = auxArray.indexOf(key);
-        auxArray.splice(indexToExclude, 1);
-        onSelect([...auxArray] as OnSelectArg);
-        setCheckedAll(false);
+        onSelect(key as OnSelectArg);
+        setDropDownVisible(false);
       }
-    } else {
-      onSelect(key as OnSelectArg);
-      setDropDownVisible(false);
-    }
-  };
+    },
+    [onSelect, setDropDownVisible, setCheckedAll, setChecked, checked]
+  );
 
   return (
-    <ContainerItemSelect onClick={() => clickItem(item)}>
+    <ContainerItemSelect onClick={() => clickItem(item, value)}>
       {isMulti && (
-        <Checkbox checked={checked} onChange={() => clickItem(item)} />
+        <Checkbox checked={checked} onChange={() => clickItem(item, value)} />
       )}
       <StyledContainerTextLabel>
         <Text fontWeight="bold" ellipsizeMode="tail" numberOfLines={1}>
@@ -85,4 +88,4 @@ const SelectItem = <Data, Type extends 'single' | 'multi'>({
   );
 };
 
-export default SelectItem;
+export default React.memo(SelectItem) as typeof SelectItem;

package/src/components/molecules/Select/functions.ts

@@ -1,24 +1,16 @@
 export const getDisplayValue = <Data>(
-  type,
-  value,
-  options,
-  placeholder,
-  keyExtractor,
-  labelExtractor
-): Data | Data[] => {
+  type: 'multi' | 'single',
+  value: Data | Data[] | undefined,
+  options: Data[],
+  placeholder: string | undefined,
+  keyExtractor: (option: Data, idx?: number) => string,
+  labelExtractor: (option: Data) => string
+): Data | Data[] | string | undefined => {
   if (type === 'multi') {
-    if (value.length === 0) return placeholder;
+    if ((value as Data[]).length === 0) return placeholder;
     else {
-      return options
-        .reduce(
-          (acc, option, index) =>
-            value.find(
-              key => keyExtractor(option, index) == keyExtractor(key, index)
-            )
-              ? acc + labelExtractor(option) + ', '
-              : acc,
-          ''
-        )
+      return (value as Data[])
+        .reduce((acc, option) => acc + labelExtractor(option) + ', ', '')
         .slice(0, -2);
     }
   } else {

package/src/components/molecules/Select/{styled.ts → styled.tsx}

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
-import { StyleProps } from '@tecsinapse/react-core';
+import { Icon, StyleProps } from '@tecsinapse/react-core';
+import React from 'react';
 
 export const StyledContainer = styled('div')<Partial<StyleProps>>`
   display: flex;
@@ -13,3 +14,12 @@ export const StyledContainer = styled('div')<Partial<StyleProps>>`
 export const StyledInputContainer = styled('div')<Partial<StyleProps>>`
   width: 100%;
 `;
+
+export const RightComponent = (
+  <Icon
+    name="chevron-down"
+    type="material-community"
+    size="centi"
+    style={{ marginRight: 12 }}
+  />
+);

package/src/components/molecules/TextArea/TextArea.tsx

@@ -7,8 +7,7 @@ import {
 } from '@tecsinapse/react-core';
 import { StyledWebInput } from './styled';
 
-export interface TextAreaProps
-  extends Omit<ITACore, 'TextComponent' | 'focused'> {}
+export type TextAreaProps = Omit<ITACore, 'TextComponent' | 'focused'>;
 
 const TextArea: FC<TextAreaProps> = ({
   label,

package/src/components/organisms/DataGrid/DataGrid.tsx

@@ -177,18 +177,20 @@ const DataGrid = <Data extends unknown>({
           </TBody>
         )}
 
-        <Footer
-          exportFunction={exportFunction}
-          exportLabel={exportLabel}
-          rowsPerPageLabel={rowsPerPageLabel}
-          rowsPerPage={rowsPerPage}
-          onRowsPerPageChange={onRowsPerPageChange}
-          rowsPerPageOptions={rowsPerPageOptions}
-          rowsCount={rowsCount ?? data.length}
-          page={page}
-          onPageChange={onPageChange}
-          pagination={pagination}
-        />
+        {(Number(rowsCount) > 0 || data.length > 0) && (
+          <Footer
+            exportFunction={exportFunction}
+            exportLabel={exportLabel}
+            rowsPerPageLabel={rowsPerPageLabel}
+            rowsPerPage={rowsPerPage}
+            onRowsPerPageChange={onRowsPerPageChange}
+            rowsPerPageOptions={rowsPerPageOptions}
+            rowsCount={rowsCount ?? data.length}
+            page={page}
+            onPageChange={onPageChange}
+            pagination={pagination}
+          />
+        )}
       </Table>
     </TableContainer>
   );

package/src/components/organisms/DataGrid/Footer/Footer.tsx

@@ -82,6 +82,7 @@ const Footer: React.FC<DataGridFooterProps> = ({
                     type={'single'}
                     keyExtractor={value => String(value)}
                     labelExtractor={rowsPerPageLabel}
+                    anchor="top"
                   />
                 </SelectContainer>
               )}

package/src/components/organisms/DataGrid/Header/Header.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Checkbox, Icon, PressableSurface } from '@tecsinapse/react-core';
 import { Th, THead, Tr } from '../../../atoms/Table';
 import { CheckboxHeader } from './styled';
-import { HeadersType } from '../types';
+import { HeadersType, SortState } from '../types';
 import {
   findCurrentItemsOnData,
   findUnselectedItemsOnData,
@@ -30,7 +30,7 @@ const Header = <Data extends unknown>({
   selectedRows,
   onSelected,
 }: DataGridHeaderProps<Data>): JSX.Element => {
-  const [sortDirection, setSortDirection] = React.useState<string>(
+  const [sortDirection, setSortDirection] = React.useState<SortState>(
     NEXT_STATE.initial
   );
 

package/src/components/organisms/DataGrid/Header/utils.ts

@@ -1,17 +1,23 @@
-export const NEXT_STATE = {
+import { SortState } from '../types';
+
+export const NEXT_STATE: { [key: string]: SortState } = {
   unsorted: 'ascending',
   ascending: 'descending',
   descending: 'unsorted',
   initial: 'unsorted',
 };
 
-export const getIconSuffix = state =>
+export const getIconSuffix = (state: SortState): string =>
   state === 'unsorted' ? 'ascending' : state;
 
-export const getIconColor = state =>
+export const getIconColor = (state: SortState): 'medium' | 'orange' =>
   state === 'unsorted' ? 'medium' : 'orange';
 
-export const findUnselectedItemsOnData = (selected, data, rowKeyExtractor) =>
+export const findUnselectedItemsOnData = <T>(
+  selected: T[],
+  data: T[],
+  rowKeyExtractor: (t: T) => string
+): T[] =>
   selected.length > 0
     ? data.filter(item =>
         selected.every(
@@ -20,7 +26,11 @@ export const findUnselectedItemsOnData = (selected, data, rowKeyExtractor) =>
       )
     : [];
 
-export const findCurrentItemsOnData = (selected, data, rowKeyExtractor) =>
+export const findCurrentItemsOnData = <T>(
+  selected: T[],
+  data: T[],
+  rowKeyExtractor: (t: T) => string
+): T[] =>
   selected.length > 0
     ? selected.filter(item =>
         data.some(rowData => rowKeyExtractor(rowData) === rowKeyExtractor(item))

package/src/components/organisms/DataGrid/types.ts

@@ -1,11 +1,13 @@
 import React from 'react';
 
+export type SortState = 'ascending' | 'descending' | 'unsorted';
+
 export type HeadersType<Data> = {
   /** Column header label */
   label: string;
   /** Table cell renderer */
   render: (data: Data) => React.ReactNode;
-  sort?: (direction: 'ascending' | 'descending' | 'unsorted') => void;
+  sort?: (direction: SortState) => void;
   /** Header alignment */
   justifyContent?: 'flex-start' | 'center' | 'flex-end';
 };

package/src/hooks/useClickAwayListener.ts

@@ -2,17 +2,18 @@ import React from 'react';
 
 export const useClickAwayListener = (
   ref: React.MutableRefObject<any>,
-  setVisible: React.Dispatch<React.SetStateAction<boolean>>
-) => {
+  setVisible: React.Dispatch<React.SetStateAction<boolean>>,
+  event: 'mouseup' | 'mousedown' | undefined = 'mousedown'
+): void => {
   React.useEffect(() => {
     const handleClickOutside = event => {
       if (ref.current && !ref.current.contains(event.target)) {
         setVisible(false);
       }
     };
-    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener(event, handleClickOutside);
     return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener(event, handleClickOutside);
     };
   }, [ref]);
 };

package/src/index.ts

@@ -38,4 +38,5 @@ export {
 } from './components/organisms/DataGrid';
 export { Modal, ModalProps } from './components/atoms/Modal';
 export { TextArea, TextAreaProps } from './components/molecules/TextArea';
+export { Tooltip, ITooltip } from './components/atoms/Tooltip';
 export * from './hooks';