@tecsinapse/react-web-kit 1.8.0 → 1.10.2

package/src/components/atoms/Tooltip/styled.ts

@@ -0,0 +1,158 @@
+import { css } from '@emotion/react';
+import { StyleProps, ThemeProp } from '@tecsinapse/react-core';
+import styled from '@emotion/styled';
+import { ComputedType, Position } from './Tooltip';
+
+type InjectedProps = { computed?: ComputedType; position?: Position };
+
+/** Bottom/Top commons */
+const bottomOrTopStylesCommon = (width: number, position) =>
+  ['top', 'bottom'].includes(position as Position) &&
+  css`
+    left: 50%;
+    margin-left: -${width / 2}px;
+  `;
+
+const bottomOrTopArrowCommon = (position?: Position) =>
+  ['top', 'bottom'].includes(position as Position) &&
+  css`
+    left: 50%;
+    margin-left: -5px;
+  `;
+
+/** Top */
+const topStyles = (theme: ThemeProp, position?: Position) =>
+  position === 'top' &&
+  css`
+    bottom: 100%;
+    margin-bottom: ${theme.spacing.centi};
+    transform: translateY(10%);
+  `;
+
+const topArrow = (theme: ThemeProp, position?: Position) =>
+  position === 'top' &&
+  css`
+    top: 100%;
+    border-color: ${theme.color.secondary.xdark} transparent transparent
+      transparent;
+  `;
+
+/** Bottom */
+const bottomStyles = (theme: ThemeProp, position?: Position) =>
+  position === 'bottom' &&
+  css`
+    top: 100%;
+    margin-top: ${theme.spacing.centi};
+    transform: translateY(-10%);
+  `;
+
+const bottomArrow = (theme: ThemeProp, position?: Position) =>
+  position === 'bottom' &&
+  css`
+    bottom: 100%;
+    border-color: transparent transparent ${theme.color.secondary.xdark}
+      transparent;
+  `;
+
+/** Bottom/Top commons */
+const leftAndRightCommonStyles = (height: number, position?: Position) =>
+  ['right', 'left'].includes(position as Position) &&
+  css`
+    top: 50%;
+    margin-top: -${height / 2}px;
+  `;
+
+const leftOrRightArrowCommon = (position?: Position) =>
+  ['right', 'left'].includes(position as Position) &&
+  css`
+    top: 50%;
+    margin-top: -5px;
+  `;
+
+/** Left */
+const leftStyles = (theme: ThemeProp, position?: Position) =>
+  position === 'left' &&
+  css`
+    right: 100%;
+    margin-right: ${theme.spacing.centi};
+    transform: translateX(10%);
+  `;
+
+const leftArrow = (theme: ThemeProp, position?: Position) =>
+  position === 'left' &&
+  css`
+    left: 100%;
+    border-color: transparent transparent transparent
+      ${theme.color.secondary.xdark};
+  `;
+
+/** Right */
+const rightStyles = (theme: ThemeProp, position?: Position) =>
+  position === 'right' &&
+  css`
+    left: 100%;
+    margin-left: ${theme.spacing.centi};
+    transform: translateX(-10%);
+  `;
+
+const rightArrow = (theme: ThemeProp, position?: Position) =>
+  position === 'right' &&
+  css`
+    right: 100%;
+    border-color: transparent ${theme.color.secondary.xdark} transparent
+      transparent;
+  `;
+
+export const TooltipSpan = styled('span')<Partial<StyleProps> & InjectedProps>(
+  ({ theme, computed, position }) => {
+    const { width = 0, height = 0 } = computed || {};
+    return css`
+      position: absolute;
+      padding: ${theme.spacing.micro} ${theme.spacing.centi};
+      border-radius: ${theme.borderRadius.mili};
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
+      background-color: ${theme.color.secondary.xdark};
+      z-index: ${theme.zIndex.absolute};
+
+      ${bottomOrTopStylesCommon(width, position)}
+      ${bottomStyles(theme, position)}
+      ${topStyles(theme, position)}
+      
+      ${leftAndRightCommonStyles(height, position)}
+      ${leftStyles(theme, position)}
+      ${rightStyles(theme, position)}
+
+      &::after {
+        content: '';
+        position: absolute;
+        border-style: solid;
+        border-width: 5px;
+
+        ${bottomOrTopArrowCommon(position)}
+        ${bottomArrow(theme, position)}
+        ${topArrow(theme, position)}
+        
+        ${leftOrRightArrowCommon(position)}
+        ${leftArrow(theme, position)}
+        ${rightArrow(theme, position)}
+      }
+    `;
+  }
+);
+
+export const Container = styled('div')<{ position?: Position }>`
+  position: relative;
+  &:hover {
+    & > span {
+      opacity: 1;
+      visibility: visible;
+
+      transform: ${({ position }) =>
+        position === 'left' || position === 'right'
+          ? 'translateX(0%)'
+          : 'translateY(0%)'};
+    }
+  }
+`;

package/src/components/molecules/Drawer/styled.ts

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { hex2rgba, StyleProps } from '@tecsinapse/react-core';
+import { StyleProps } from '@tecsinapse/react-core';
 import { DrawerProps } from './Drawer';
 import { css } from '@emotion/react';
 

package/src/components/molecules/InputPassword/InputPassword.stories.tsx

@@ -10,7 +10,7 @@ export default {
 };
 
 const Template: Story<InputPasswordWebProps> = args => {
-  const [value, setValue] = useState<string>();
+  const [value, setValue] = useState<string>('');
 
   const onChange = text => {
     setValue(text);

package/src/components/molecules/InputPassword/InputPassword.tsx

@@ -4,27 +4,29 @@ import { Input, InputWebProps } from '../../atoms/Input';
 
 export type InputPasswordWebProps = InputWebProps;
 
-const InputPassword: FC<InputPasswordWebProps> = ({
-  rightComponent,
-  ...rest
-}) => {
-  const [revealed, setRevealed] = useState(false);
-  return (
-    <Input
-      {...rest}
-      secureTextEntry={!revealed}
-      rightComponent={
-        <>
-          <InputPasswordIcon
-            onChangeState={setRevealed}
-            revealed={revealed}
-            effect="none"
-          />
-          {rightComponent}
-        </>
-      }
-    />
-  );
-};
+const InputPassword: FC<InputPasswordWebProps> = React.forwardRef(
+  ({ rightComponent, ...rest }, ref) => {
+    const [revealed, setRevealed] = useState(false);
+    return (
+      <Input
+        {...rest}
+        ref={ref}
+        secureTextEntry={!revealed}
+        rightComponent={
+          <>
+            <InputPasswordIcon
+              onChangeState={setRevealed}
+              revealed={revealed}
+              effect="none"
+            />
+            {rightComponent}
+          </>
+        }
+      />
+    );
+  }
+);
+
+InputPassword.displayName = 'InputPassword';
 
 export default InputPassword;

package/src/components/molecules/Menubar/Menubar.tsx

@@ -50,7 +50,7 @@ const Menubar: React.FC<MenubarProps> = ({
   const [input, setInput] = useDebouncedState<string>('', setSearch);
   const [open, setOpen] = React.useState<boolean>(false);
   const menuRef = useRef<HTMLDivElement | null>(null);
-  useClickAwayListener(menuRef, setOpen);
+  useClickAwayListener(menuRef, setOpen, 'mouseup');
 
   const toggleOpen = React.useCallback(() => setOpen(state => !state), [
     setOpen,

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

@@ -1,11 +1,5 @@
 import React from 'react';
-import {
-  Checkbox,
-  Text,
-  Icon,
-  useDebouncedState,
-} from '@tecsinapse/react-core';
-import { Input } from '../../../atoms/Input';
+import { Checkbox, Text, useDebouncedState } from '@tecsinapse/react-core';
 import { ItemSelect } from '../SelectItem';
 import { SelectProps } from '../Select';
 import {
@@ -15,7 +9,11 @@ import {
   StyledContainerTextLabel,
   StyledSpan,
   OptionsContainer,
+  PaddedContainer,
 } from './styled';
+import { SearchInput } from './components';
+
+const fullWidth = { width: '100%' };
 
 const Dropdown = <Data, Type extends 'single' | 'multi'>({
   options,
@@ -29,24 +27,41 @@ const Dropdown = <Data, Type extends 'single' | 'multi'>({
   setDropDownVisible,
   style,
   anchor,
+  selectAllLabel,
+  searchBarPlaceholder,
 }: SelectProps<Data, Type> & {
   setDropDownVisible: (t: boolean) => void;
 }): JSX.Element => {
   const [searchArg, setSearchArg] = useDebouncedState<string>('', onSearch);
-  const lengthOptions = options.length;
+  const lengthOptions = React.useMemo(() => options.length, [options]);
 
   const [checkedAll, setCheckedAll] = React.useState<boolean>(
     type === 'multi' && (value as Data[])?.length === lengthOptions
   );
 
-  const onClickCheckAll = () => {
+  React.useEffect(() => {
+    if (type === 'multi') {
+      lengthOptions === (value as Data[])?.length
+        ? setCheckedAll(true)
+        : setCheckedAll(false);
+    }
+  }, [value, type, lengthOptions]);
+
+  const onClickCheckAll = React.useCallback(() => {
     const items = options.map(option => option);
-    setCheckedAll(!checkedAll);
-    const aux = !checkedAll;
+    let aux;
+    setCheckedAll(prev => {
+      aux = !prev;
+      return !prev;
+    });
     type OnSelectArg = Parameters<typeof onSelect>[0];
     const auxArray: Data[] = [];
     !aux ? onSelect(auxArray as OnSelectArg) : onSelect(items as OnSelectArg);
-  };
+  }, [options, setCheckedAll, onSelect]);
+
+  const onChange = React.useCallback(text => setSearchArg(text), [
+    setSearchArg,
+  ]);
 
   return (
     <StyledContainerDropdown
@@ -61,35 +76,37 @@ const Dropdown = <Data, Type extends 'single' | 'multi'>({
           <Checkbox checked={checkedAll} onChange={onClickCheckAll} />
           {!hideSearchBar ? (
             <SearchBarContainer>
-              <Input
-                style={{ width: '100%' }}
-                placeholder="Busque a opção desejada"
-                value={searchArg}
-                leftComponent={
-                  <Icon
-                    name="magnify"
-                    type="material-community"
-                    size="centi"
-                    style={{ marginHorizontal: 12 }}
-                  />
-                }
-                onChange={text => setSearchArg(text)}
+              <SearchInput
+                searchArg={searchArg}
+                onChange={onChange}
+                fullWidth={fullWidth}
+                placeholder={searchBarPlaceholder}
               />
             </SearchBarContainer>
           ) : (
             <StyledContainerTextLabel>
               <Text fontWeight="bold">
-                <StyledSpan>Selecionar todos</StyledSpan>
+                <StyledSpan>{selectAllLabel}</StyledSpan>
               </Text>
             </StyledContainerTextLabel>
           )}
         </StyledContainerCheckAll>
       )}
+      {type === 'single' && !hideSearchBar && (
+        <PaddedContainer>
+          <SearchInput
+            searchArg={searchArg}
+            onChange={onChange}
+            fullWidth={fullWidth}
+            placeholder={searchBarPlaceholder}
+          />
+        </PaddedContainer>
+      )}
       <OptionsContainer lengthOptions={options.length}>
         {options.map((item, index) => (
           <ItemSelect
             type={type}
-            key={index}
+            key={keyExtractor(item)}
             item={item}
             onSelect={onSelect}
             value={value}
@@ -99,7 +116,7 @@ const Dropdown = <Data, Type extends 'single' | 'multi'>({
             setDropDownVisible={setDropDownVisible}
             checkedAll={checkedAll}
             setCheckedAll={setCheckedAll}
-            lenghtOptions={options.length}
+            lenghtOptions={lengthOptions}
           />
         ))}
       </OptionsContainer>

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Icon } from '@tecsinapse/react-core';
+import { Input } from '../../../../atoms/Input';
+
+const InputIcon = (
+  <Icon
+    name="magnify"
+    type="material-community"
+    size="centi"
+    style={{ marginHorizontal: 12 }}
+  />
+);
+
+const SearchInput = ({ fullWidth, searchArg, onChange, placeholder }) => {
+  return (
+    <Input
+      style={fullWidth}
+      placeholder={placeholder}
+      value={searchArg}
+      leftComponent={InputIcon}
+      onChange={onChange}
+    />
+  );
+};
+
+export default React.memo(SearchInput);

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

@@ -0,0 +1 @@
+export { default as SearchInput } from './SearchInput';

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

@@ -4,7 +4,8 @@ import { SelectProps } from '../Select';
 import { css } from '@emotion/react';
 
 type InjectedProps = Partial<
-  StyleProps & SelectProps<any, any> & { lengthOptions: number }
+  StyleProps &
+    SelectProps<unknown, 'single' | 'multi'> & { lengthOptions: number }
 >;
 
 const anchorBottom = ({
@@ -38,7 +39,7 @@ export const StyledContainerDropdown = styled('div')<InjectedProps>`
   padding-top: ${({
     theme,
     hideSearchBar,
-  }: StyleProps & Partial<SelectProps<any, any>>) =>
+  }: StyleProps & Partial<SelectProps<unknown, 'single' | 'multi'>>) =>
     !hideSearchBar ? `${theme.spacing.deca}` : '0px'};
   padding-bottom: ${({ theme }: StyleProps) => theme.spacing.mili};
   z-index: ${({ theme }: StyleProps) => theme.zIndex.select};
@@ -68,8 +69,13 @@ export const SearchBarContainer = styled('div')<Partial<StyleProps>>`
   width: 100%;
 `;
 
-export const StyledContainerCheckAll = styled('div')<Partial<StyleProps>>`
+export const PaddedContainer = styled('div')<Partial<StyleProps>>`
   padding: ${({ theme }) => `${theme.spacing.mili} ${theme.spacing.deca}`};
+`;
+
+export const StyledContainerCheckAll = styled(PaddedContainer)<
+  Partial<StyleProps>
+>`
   flex-direction: row;
   display: flex;
   justify-content: flex-start;
@@ -84,7 +90,7 @@ export const StyledContainerCheckAll = styled('div')<Partial<StyleProps>>`
 `;
 
 export const StyledSpan = styled('span')<Partial<StyleProps>>`
-  color: ${({ theme }) => theme.color.primary.medium};
+  color: ${({ theme }) => theme.font.color.dark};
   padding: ${({ theme }) => `${theme.spacing.mili} 0px`};
 `;
 

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

@@ -15,21 +15,33 @@ type Option = {
 };
 
 const OPTIONS_EXAMPLE: Option[] = [
-  { label: 'Label 1', value: 'value1' },
-  { label: 'Label 2', value: 'value2' },
-  { label: 'Label 3', value: 'value3' },
-  { label: 'Label 4', value: 'value4' },
-  { label: 'Label 5', value: 'value5' },
-  { label: 'Label 6', value: 'value6' },
+  { label: 'New York', value: 'value1' },
+  { label: 'São Paulo', value: 'value2' },
+  { label: 'Lisbon', value: 'value3' },
+  { label: 'Moscow', value: 'value4' },
+  { label: 'Sidney', value: 'value5' },
+  { label: 'Rio de Janeiro', value: 'value6' },
 ];
 
-const TemplateSingle: Story<SelectProps<Option, 'single'>> = args => {
+const TemplateSingle: Story<SelectProps<Option, 'single'>> = ({
+  options: _options,
+  ...args
+}) => {
   const [singleValue, setSingleValue] = useState(undefined);
+  const [options, setOptions] = useState(_options);
 
-  const handleSelectSingleValue = key => setSingleValue(key);
+  const handleSelectSingleValue = React.useCallback(
+    key => setSingleValue(key),
+    [setSingleValue]
+  );
+
+  const labelExtractor = React.useCallback(item => item.label, []);
+  const keyExtractor = React.useCallback(item => String(item.value), []);
 
   const handleSearch = React.useCallback((searchArg: string) => {
-    console.log(searchArg);
+    setOptions(
+      _options.filter(item => new RegExp(searchArg, 'ig').test(item.label))
+    );
   }, []);
 
   return (
@@ -37,11 +49,12 @@ const TemplateSingle: Story<SelectProps<Option, 'single'>> = args => {
       <ContainerSelect>
         <Select
           {...args}
+          options={options}
           value={singleValue}
           type="single"
           onSelect={handleSelectSingleValue}
-          labelExtractor={item => item.label}
-          keyExtractor={item => String(item.value)}
+          labelExtractor={labelExtractor}
+          keyExtractor={keyExtractor}
           onSearch={handleSearch}
         />
       </ContainerSelect>
@@ -58,13 +71,25 @@ Single.args = {
   hideSearchBar: false,
 };
 
-const TemplateMulti: Story<SelectProps<Option, 'multi'>> = args => {
+const TemplateMulti: Story<SelectProps<Option, 'multi'>> = ({
+  options: _options,
+  ...args
+}) => {
   const [multiValue, setMultiValue] = useState([]);
+  const [options, setOptions] = useState(_options);
+
+  const handleSelectMultipleValues = React.useCallback(
+    keys => setMultiValue(keys),
+    [setMultiValue]
+  );
 
-  const handleSelectMultipleValues = keys => setMultiValue(keys);
+  const labelExtractor = React.useCallback(item => item.label, []);
+  const keyExtractor = React.useCallback(item => String(item.value), []);
 
   const handleSearch = React.useCallback((searchArg: string) => {
-    console.log(searchArg);
+    setOptions(
+      _options.filter(item => new RegExp(searchArg, 'ig').test(item.label))
+    );
   }, []);
 
   return (
@@ -72,11 +97,12 @@ const TemplateMulti: Story<SelectProps<Option, 'multi'>> = args => {
       <ContainerSelect>
         <Select
           {...args}
+          options={options}
           value={multiValue}
           type="multi"
           onSelect={handleSelectMultipleValues}
-          labelExtractor={item => item.label}
-          keyExtractor={item => String(item.value)}
+          labelExtractor={labelExtractor}
+          keyExtractor={keyExtractor}
           onSearch={handleSearch}
         />
       </ContainerSelect>

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

@@ -1,12 +1,15 @@
 import React from 'react';
 import {
-  Icon,
   PressableInputContainer,
   Text,
   TextProps,
 } from '@tecsinapse/react-core';
 import { useClickAwayListener } from '../../../hooks';
-import { StyledContainer, StyledInputContainer } from './styled';
+import {
+  RightComponent,
+  StyledContainer,
+  StyledInputContainer,
+} from './styled';
 import { Dropdown } from './Dropdown';
 import { getDisplayValue } from './functions';
 import { Transition } from 'react-transition-group';
@@ -26,12 +29,14 @@ export interface SelectProps<Data, Type extends 'single' | 'multi'>
   onSearch?: (searchArg: string) => void | never;
   searchBarPlaceholder?: string;
   hideSearchBar?: boolean;
+  selectAllLabel?: string;
   disabled?: boolean;
   label?: string;
   anchor?: 'top' | 'bottom';
   displayTextProps?: TextProps;
 }
 
+/** NOTE: For better performance, you should memoize options and handlers */
 export const Select = <Data, Type extends 'single' | 'multi'>({
   value,
   options,
@@ -41,12 +46,13 @@ export const Select = <Data, Type extends 'single' | 'multi'>({
   labelExtractor,
   placeholder,
   onSearch,
-  searchBarPlaceholder,
+  searchBarPlaceholder = 'Busque a opção desejada',
   hideSearchBar = true,
   label,
   disabled = false,
   anchor = 'bottom',
   displayTextProps,
+  selectAllLabel = 'Selecionar todos',
   ...rest
 }: SelectProps<Data, Type>): JSX.Element => {
   const [dropDownVisible, setDropDownVisible] = React.useState<boolean>(false);
@@ -62,21 +68,18 @@ export const Select = <Data, Type extends 'single' | 'multi'>({
     labelExtractor
   );
 
+  const onPress = React.useCallback(() => setDropDownVisible(prev => !prev), [
+    setDropDownVisible,
+  ]);
+
   return (
     <StyledContainer ref={refDropDown} {...rest}>
       <StyledInputContainer>
         <PressableInputContainer
           label={label}
-          onPress={() => setDropDownVisible(!dropDownVisible)}
+          onPress={onPress}
           disabled={disabled}
-          rightComponent={
-            <Icon
-              name="chevron-down"
-              type="material-community"
-              size="centi"
-              style={{ marginRight: 12 }}
-            />
-          }
+          rightComponent={RightComponent}
         >
           <Text {...displayTextProps} ellipsizeMode="tail" numberOfLines={1}>
             {displayValue}
@@ -98,6 +101,7 @@ export const Select = <Data, Type extends 'single' | 'multi'>({
             style={{ ...defaultStyles, ...transition[anchor][state] }}
             setDropDownVisible={setDropDownVisible}
             anchor={anchor}
+            selectAllLabel={selectAllLabel}
           />
         )}
       </Transition>