@tecsinapse/react-web-kit 1.7.8 → 1.8.0

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

@@ -1,4 +1,4 @@
-import React, { CSSProperties } from 'react';
+import React from 'react';
 import {
   Checkbox,
   Text,
@@ -14,7 +14,7 @@ import {
   StyledContainerDropdown,
   StyledContainerTextLabel,
   StyledSpan,
-  StyledTest,
+  OptionsContainer,
 } from './styled';
 
 const Dropdown = <Data, Type extends 'single' | 'multi'>({
@@ -28,9 +28,9 @@ const Dropdown = <Data, Type extends 'single' | 'multi'>({
   labelExtractor,
   setDropDownVisible,
   style,
+  anchor,
 }: SelectProps<Data, Type> & {
   setDropDownVisible: (t: boolean) => void;
-  style: CSSProperties;
 }): JSX.Element => {
   const [searchArg, setSearchArg] = useDebouncedState<string>('', onSearch);
   const lengthOptions = options.length;
@@ -49,7 +49,11 @@ const Dropdown = <Data, Type extends 'single' | 'multi'>({
   };
 
   return (
-    <StyledContainerDropdown lengthOptions={lengthOptions} style={style}>
+    <StyledContainerDropdown
+      lengthOptions={lengthOptions}
+      style={style}
+      anchor={anchor}
+    >
       {type === 'multi' && (
         <StyledContainerCheckAll
           onClick={hideSearchBar ? onClickCheckAll : undefined}
@@ -81,7 +85,7 @@ const Dropdown = <Data, Type extends 'single' | 'multi'>({
           )}
         </StyledContainerCheckAll>
       )}
-      <StyledTest lenghtOptions={options.length}>
+      <OptionsContainer lengthOptions={options.length}>
         {options.map((item, index) => (
           <ItemSelect
             type={type}
@@ -98,7 +102,7 @@ const Dropdown = <Data, Type extends 'single' | 'multi'>({
             lenghtOptions={options.length}
           />
         ))}
-      </StyledTest>
+      </OptionsContainer>
     </StyledContainerDropdown>
   );
 };

package/src/components/molecules/Select/Dropdown/styled.ts

@@ -1,18 +1,39 @@
 import styled from '@emotion/styled';
 import { hex2rgba, StyleProps } from '@tecsinapse/react-core';
 import { SelectProps } from '../Select';
+import { css } from '@emotion/react';
 
-export const StyledContainerDropdown = styled('div')<
-  Partial<StyleProps & SelectProps<any, any> & { lengthOptions: number }>
->`
+type InjectedProps = Partial<
+  StyleProps & SelectProps<any, any> & { lengthOptions: number }
+>;
+
+const anchorBottom = ({
+  theme,
+  anchor,
+}: StyleProps & Omit<InjectedProps, 'theme'>) =>
+  anchor === 'bottom' &&
+  css`
+    margin-top: ${theme.spacing.centi};
+    top: 100%;
+  `;
+
+const anchorTop = ({
+  theme,
+  anchor,
+}: StyleProps & Omit<InjectedProps, 'theme'>) =>
+  anchor === 'top' &&
+  css`
+    margin-bottom: ${theme.spacing.centi};
+    bottom: 100%;
+  `;
+
+export const StyledContainerDropdown = styled('div')<InjectedProps>`
   width: 100%;
   background-color: ${({ theme }: StyleProps) =>
     theme.miscellaneous.surfaceColor};
   border-radius: ${({ theme }: StyleProps) => theme.borderRadius.mili};
-  box-shadow: 0px 2px 8px
+  box-shadow: 0 2px 8px
     ${({ theme }: StyleProps) => hex2rgba(theme.miscellaneous.shadow, 0.08)};
-  margin-top: ${({ theme }: StyleProps) => theme.spacing.centi};
-  top: 100%;
   position: absolute;
   padding-top: ${({
     theme,
@@ -21,17 +42,15 @@ export const StyledContainerDropdown = styled('div')<
     !hideSearchBar ? `${theme.spacing.deca}` : '0px'};
   padding-bottom: ${({ theme }: StyleProps) => theme.spacing.mili};
   z-index: ${({ theme }: StyleProps) => theme.zIndex.select};
+  ${anchorTop}
+  ${anchorBottom}
 `;
 
-export const StyledTest = styled('div')<
-  Partial<StyleProps & SelectProps<any, any> & { lenghtOptions: number }>
->`
+export const OptionsContainer = styled('div')<InjectedProps>`
   max-height: 250px;
   top: 100%;
-  overflow-y: ${({
-    lenghtOptions = 0,
-  }: Partial<{ lenghtOptions: number } & StyleProps>) =>
-    lenghtOptions > 5 ? 'scroll' : 'hidden'};
+  overflow-y: ${({ lengthOptions = 0 }: InjectedProps) =>
+    lengthOptions > 5 ? 'scroll' : 'hidden'};
   ::-webkit-scrollbar {
     width: 8px;
   }

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

@@ -1,5 +1,10 @@
 import React from 'react';
-import { Icon, PressableInputContainer, Text } from '@tecsinapse/react-core';
+import {
+  Icon,
+  PressableInputContainer,
+  Text,
+  TextProps,
+} from '@tecsinapse/react-core';
 import { useClickAwayListener } from '../../../hooks';
 import { StyledContainer, StyledInputContainer } from './styled';
 import { Dropdown } from './Dropdown';
@@ -7,7 +12,8 @@ import { getDisplayValue } from './functions';
 import { Transition } from 'react-transition-group';
 import { defaultStyles, transition } from './animations';
 
-export interface SelectProps<Data, Type extends 'single' | 'multi'> {
+export interface SelectProps<Data, Type extends 'single' | 'multi'>
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
   options: Data[];
   onSelect: (
     option: Type extends 'single' ? Data | undefined : Data[]
@@ -20,7 +26,10 @@ export interface SelectProps<Data, Type extends 'single' | 'multi'> {
   onSearch?: (searchArg: string) => void | never;
   searchBarPlaceholder?: string;
   hideSearchBar?: boolean;
+  disabled?: boolean;
   label?: string;
+  anchor?: 'top' | 'bottom';
+  displayTextProps?: TextProps;
 }
 
 export const Select = <Data, Type extends 'single' | 'multi'>({
@@ -32,8 +41,12 @@ export const Select = <Data, Type extends 'single' | 'multi'>({
   labelExtractor,
   placeholder,
   onSearch,
+  searchBarPlaceholder,
   hideSearchBar = true,
   label,
+  disabled = false,
+  anchor = 'bottom',
+  displayTextProps,
   ...rest
 }: SelectProps<Data, Type>): JSX.Element => {
   const [dropDownVisible, setDropDownVisible] = React.useState<boolean>(false);
@@ -50,12 +63,12 @@ export const Select = <Data, Type extends 'single' | 'multi'>({
   );
 
   return (
-    <StyledContainer ref={refDropDown}>
+    <StyledContainer ref={refDropDown} {...rest}>
       <StyledInputContainer>
         <PressableInputContainer
           label={label}
-          {...rest}
           onPress={() => setDropDownVisible(!dropDownVisible)}
+          disabled={disabled}
           rightComponent={
             <Icon
               name="chevron-down"
@@ -65,7 +78,7 @@ export const Select = <Data, Type extends 'single' | 'multi'>({
             />
           }
         >
-          <Text ellipsizeMode="tail" numberOfLines={1}>
+          <Text {...displayTextProps} ellipsizeMode="tail" numberOfLines={1}>
             {displayValue}
           </Text>
         </PressableInputContainer>
@@ -80,8 +93,11 @@ export const Select = <Data, Type extends 'single' | 'multi'>({
             keyExtractor={keyExtractor}
             labelExtractor={labelExtractor}
             hideSearchBar={hideSearchBar}
-            style={{ ...defaultStyles, ...transition[state] }}
+            searchBarPlaceholder={searchBarPlaceholder}
+            onSearch={onSearch}
+            style={{ ...defaultStyles, ...transition[anchor][state] }}
             setDropDownVisible={setDropDownVisible}
+            anchor={anchor}
           />
         )}
       </Transition>

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

@@ -57,7 +57,7 @@ const SelectItem = <Data, Type extends 'single' | 'multi'>({
         onSelect([...value, key] as OnSelectArg);
         [...value, key].length === lenghtOptions && setCheckedAll(true);
       } else {
-        const auxArray: Data[] = value;
+        const auxArray: Data[] = [...value];
         const indexToExclude = auxArray.indexOf(key);
         auxArray.splice(indexToExclude, 1);
         onSelect([...auxArray] as OnSelectArg);

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

@@ -7,12 +7,36 @@ export const defaultStyles = {
 };
 
 export const transition = {
-  entering: {
-    transform: 'translateY(-10%)',
-    opacity: 0,
-    visibility: 'hidden',
+  bottom: {
+    entering: {
+      transform: 'translateY(-10%)',
+      opacity: 0,
+      visibility: 'hidden',
+    },
+    entered: {
+      transform: 'translateY(0%)',
+      opacity: 1,
+      visibility: 'visible',
+    },
+    exiting: {
+      transform: 'translateY(0%)',
+      opacity: 1,
+      visibility: 'visible',
+    },
+    exited: {
+      transform: 'translateY(-10%)',
+      opacity: 0,
+      visibility: 'hidden',
+    },
+  },
+  top: {
+    entering: {
+      transform: 'translateY(10%)',
+      opacity: 0,
+      visibility: 'hidden',
+    },
+    entered: { transform: 'translateY(0%)', opacity: 1, visibility: 'visible' },
+    exiting: { transform: 'translateY(0%)', opacity: 1, visibility: 'visible' },
+    exited: { transform: 'translateY(10%)', opacity: 0, visibility: 'hidden' },
   },
-  entered: { transform: 'translateY(0%)', opacity: 1, visibility: 'visible' },
-  exiting: { transform: 'translateY(0%)', opacity: 1, visibility: 'visible' },
-  exited: { transform: 'translateY(-10%)', opacity: 0, visibility: 'hidden' },
 };

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

@@ -1,4 +1,4 @@
-import React, { CSSProperties } from 'react';
+import React from 'react';
 import {
   Table,
   TableToolbar,
@@ -14,7 +14,8 @@ import { Footer } from './Footer';
 import { Skeleton } from '../../atoms/Skeleton';
 import { getData, removeElement } from './utils';
 
-export interface DataGridProps<Data> {
+export interface DataGridProps<Data>
+  extends React.HTMLAttributes<HTMLDivElement> {
   headers: HeadersType<Data>[];
   data: Data[];
   /** Unique identifier for row data */
@@ -49,8 +50,6 @@ export interface DataGridProps<Data> {
   loading?: boolean;
   /** Custom skeleton component for better visual */
   skeletonComponent?: React.ReactNode;
-  /** CSS style spread to TableContainer */
-  style?: CSSProperties;
   /** Empty state placeholder */
   emptyPlaceholder?: React.ReactNode;
 }
@@ -78,8 +77,8 @@ const DataGrid = <Data extends unknown>({
   onPageChange,
   loading = false,
   skeletonComponent,
-  style,
   emptyPlaceholder,
+  ...rest
 }: DataGridProps<Data>): JSX.Element => {
   if (selectable && (!selectedRows || !onSelectedRows)) {
     throw new Error(
@@ -117,7 +116,7 @@ const DataGrid = <Data extends unknown>({
   );
 
   return (
-    <TableContainer style={style}>
+    <TableContainer {...rest}>
       <TableToolbar
         title={toolbarTitle}
         rightIcons={toolbarRightIcons}