@tecsinapse/react-web-kit 1.22.2 → 1.22.3

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

@@ -1,128 +0,0 @@
-import React from 'react';
-import { Checkbox, Text, useDebouncedState } from '@tecsinapse/react-core';
-import { ItemSelect } from '../SelectItem';
-import { SelectProps } from '../Select';
-import {
-  SearchBarContainer,
-  StyledContainerCheckAll,
-  StyledContainerDropdown,
-  StyledContainerTextLabel,
-  StyledSpan,
-  OptionsContainer,
-  PaddedContainer,
-} from './styled';
-import { SearchInput } from './components';
-
-const fullWidth = { width: '100%' };
-
-const Dropdown = <Data, Type extends 'single' | 'multi'>({
-  options,
-  onSearch,
-  type,
-  hideSearchBar,
-  onSelect,
-  value,
-  keyExtractor,
-  labelExtractor,
-  setDropDownVisible,
-  style,
-  anchor,
-  selectAllLabel,
-  searchBarPlaceholder,
-}: SelectProps<Data, Type> & {
-  setDropDownVisible: (t: boolean) => void;
-}): JSX.Element => {
-  const [searchArg, setSearchArg] = useDebouncedState<string>('', onSearch);
-  const lengthOptions = React.useMemo(() => options.length, [options]);
-
-  const [checkedAll, setCheckedAll] = React.useState<boolean>(
-    type === 'multi' && (value as Data[])?.length === lengthOptions
-  );
-
-  React.useEffect(() => {
-    if (type === 'multi') {
-      lengthOptions === (value as Data[])?.length
-        ? setCheckedAll(true)
-        : setCheckedAll(false);
-    }
-  }, [value, type, lengthOptions]);
-
-  const onClickCheckAll = React.useCallback(() => {
-    const items = (options as Data[]).map(option => option);
-    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
-      lengthOptions={lengthOptions}
-      style={style}
-      anchor={anchor}
-    >
-      {type === 'multi' && (
-        <StyledContainerCheckAll
-          onClick={hideSearchBar ? onClickCheckAll : undefined}
-        >
-          <Checkbox checked={checkedAll} onChange={onClickCheckAll} />
-          {!hideSearchBar ? (
-            <SearchBarContainer>
-              <SearchInput
-                searchArg={searchArg}
-                onChange={onChange}
-                fullWidth={fullWidth}
-                placeholder={searchBarPlaceholder}
-              />
-            </SearchBarContainer>
-          ) : (
-            <StyledContainerTextLabel>
-              <Text fontWeight="bold">
-                <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 as Data[]).map((item, index) => (
-          <ItemSelect
-            type={type}
-            key={keyExtractor(item)}
-            item={item}
-            onSelect={onSelect}
-            value={value}
-            keyExtractor={keyExtractor}
-            index={index}
-            labelExtractor={labelExtractor}
-            setDropDownVisible={setDropDownVisible}
-            checkedAll={checkedAll}
-            setCheckedAll={setCheckedAll}
-            lenghtOptions={lengthOptions}
-          />
-        ))}
-      </OptionsContainer>
-    </StyledContainerDropdown>
-  );
-};
-
-export default Dropdown;

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

@@ -1,26 +0,0 @@
-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

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

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

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

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

@@ -1,102 +0,0 @@
-import styled from '@emotion/styled';
-import { hex2rgba, StyleProps } from '@tecsinapse/react-core';
-import { SelectProps } from '../Select';
-import { css } from '@emotion/react';
-
-type InjectedProps = Partial<
-  StyleProps &
-    SelectProps<unknown, 'single' | 'multi'> & { 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: 0 2px 8px
-    ${({ theme }: StyleProps) => hex2rgba(theme.miscellaneous.shadow, 0.05)};
-  position: absolute;
-  padding-top: ${({
-    theme,
-    hideSearchBar,
-  }: 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};
-  ${anchorTop}
-  ${anchorBottom}
-`;
-
-export const OptionsContainer = styled('div')<InjectedProps>`
-  max-height: 250px;
-  top: 100%;
-  overflow-y: ${({ lengthOptions = 0 }: InjectedProps) =>
-    lengthOptions > 5 ? 'scroll' : 'hidden'};
-  ::-webkit-scrollbar {
-    width: 8px;
-  }
-  ::-webkit-scrollbar-thumb {
-    border-radius: ${({ theme }: StyleProps) => theme.borderRadius.centi};
-    background-color: ${({ theme }: StyleProps) => theme.color.secondary.light};
-  }
-  ::-webkit-scrollbar-thumb:hover {
-    background-color: ${({ theme }: StyleProps) => theme.color.primary.light};
-  },
-`;
-
-export const SearchBarContainer = styled('div')<Partial<StyleProps>>`
-  padding-left: ${({ theme }) => theme.spacing.mili};
-  width: 100%;
-`;
-
-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;
-  align-items: center;
-  cursor: pointer;
-  &:hover {
-    background-color: ${({ theme }) => theme.color.primary.xlight};
-  }
-  &:hover span {
-    color: ${({ theme }) => theme.color.primary.medium};
-  }
-`;
-
-export const StyledSpan = styled('span')<Partial<StyleProps>>`
-  color: ${({ theme }) => theme.font.color.dark};
-  padding: ${({ theme }) => `${theme.spacing.mili} 0px`};
-`;
-
-export const StyledContainerTextLabel = styled('div')<Partial<StyleProps>>`
-  padding-left: ${({ theme }) => theme.spacing.mili};
-  width: 100%;
-  display: flex;
-  overflow: hidden;
-`;

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

@@ -1,202 +0,0 @@
-import { Story } from '@storybook/react';
-import React, { useState } from 'react';
-
-import { default as Select, SelectProps } from './Select';
-import styled from '@emotion/styled';
-
-export default {
-  title: 'Web/Select',
-  component: Select,
-};
-
-type Option = {
-  label: string;
-  value: string;
-};
-
-const OPTIONS_EXAMPLE: Option[] = [
-  { 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'>> = ({
-  options: _options,
-  ...args
-}) => {
-  const [singleValue, setSingleValue] = useState(undefined);
-  const [options, setOptions] = useState(_options as Option[]);
-
-  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) => {
-    setOptions(
-      (_options as Option[]).filter(item =>
-        new RegExp(searchArg, 'ig').test(item.label)
-      )
-    );
-  }, []);
-
-  return (
-    <Container>
-      <ContainerSelect>
-        <Select
-          {...args}
-          options={options}
-          value={singleValue}
-          type="single"
-          onSelect={handleSelectSingleValue}
-          labelExtractor={labelExtractor}
-          keyExtractor={keyExtractor}
-          onSearch={handleSearch}
-        />
-      </ContainerSelect>
-    </Container>
-  );
-};
-
-export const Single = TemplateSingle.bind({});
-
-Single.args = {
-  placeholder: 'Placeholder do select',
-  label: 'Label',
-  options: OPTIONS_EXAMPLE,
-  hideSearchBar: false,
-};
-
-const TemplateMulti: Story<SelectProps<Option, 'multi'>> = ({
-  options: _options,
-  ...args
-}) => {
-  const [multiValue, setMultiValue] = useState([]);
-  const [options, setOptions] = useState(_options as Option[]);
-
-  const handleSelectMultipleValues = React.useCallback(
-    keys => setMultiValue(keys),
-    [setMultiValue]
-  );
-
-  const labelExtractor = React.useCallback(item => item.label, []);
-  const keyExtractor = React.useCallback(item => String(item.value), []);
-
-  const handleSearch = React.useCallback((searchArg: string) => {
-    setOptions(
-      (_options as Option[]).filter(item =>
-        new RegExp(searchArg, 'ig').test(item.label)
-      )
-    );
-  }, []);
-
-  return (
-    <Container>
-      <ContainerSelect>
-        <Select
-          {...args}
-          options={options}
-          value={multiValue}
-          type="multi"
-          onSelect={handleSelectMultipleValues}
-          labelExtractor={labelExtractor}
-          keyExtractor={keyExtractor}
-          onSearch={handleSearch}
-        />
-      </ContainerSelect>
-    </Container>
-  );
-};
-
-export const Multi = TemplateMulti.bind({});
-
-Multi.args = {
-  placeholder: 'Placeholder do select',
-  label: 'Label',
-  options: OPTIONS_EXAMPLE,
-  hideSearchBar: false,
-};
-
-const TemplateMultiLazy: Story<SelectProps<Option, 'multi'>> = ({
-  options: _options,
-  ...args
-}) => {
-  const fetchUsers = async () => {
-    return await fetch('https://jsonplaceholder.typicode.com/users', {
-      method: 'GET',
-    }).then(data => data.json());
-  };
-
-  const fetchPromise: (
-    searchInput: string | undefined
-  ) => Promise<{ value: string; label: string }[]> = React.useCallback(
-    async (searchInput: string | undefined) => {
-      const dataTest = await fetchUsers();
-      return (dataTest || [])
-        .map(item => ({
-          value: item.id,
-          label: item.name,
-        }))
-        .filter(value => {
-          if (searchInput) return value.label.includes(searchInput);
-          else return true;
-        });
-    },
-    []
-  );
-
-  const [multiValue, setMultiValue] = useState([]);
-
-  const handleSelectMultipleValues = React.useCallback(
-    keys => setMultiValue(keys),
-    [setMultiValue]
-  );
-
-  const labelExtractor = React.useCallback(item => item.label, []);
-  const keyExtractor = React.useCallback(item => String(item.value), []);
-
-  return (
-    <Container>
-      <ContainerSelect>
-        <Select
-          {...args}
-          options={fetchPromise}
-          value={multiValue}
-          type="multi"
-          onSelect={handleSelectMultipleValues}
-          labelExtractor={labelExtractor}
-          keyExtractor={keyExtractor}
-          onSearch={fetchPromise}
-        />
-      </ContainerSelect>
-    </Container>
-  );
-};
-
-export const Lazy = TemplateMultiLazy.bind({});
-
-Lazy.args = {
-  placeholder: 'Placeholder do select',
-  label: 'Label',
-  hideSearchBar: false,
-};
-
-const Container = styled('div')`
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-`;
-
-const ContainerSelect = styled('div')`
-  display: flex;
-  width: 400px;
-`;

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

@@ -1,193 +0,0 @@
-import {
-  PressableInputContainer,
-  Text,
-  TextProps,
-} from '@tecsinapse/react-core';
-import React, { useEffect, useState } from 'react';
-import { Transition } from 'react-transition-group';
-import { useClickAwayListener } from '../../../hooks';
-import { defaultStyles, transition } from './animations';
-import { Dropdown } from './Dropdown';
-import { getDisplayValue } from './functions';
-import {
-  RightComponent,
-  StyledContainer,
-  StyledInputContainer,
-} from './styled';
-
-export interface SelectProps<Data, Type extends 'single' | 'multi'>
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
-  options: ((searchInput?: string) => Promise<Data[]>) | Data[];
-  onSelect: (
-    option: Type extends 'single' ? Data | undefined : Data[]
-  ) => never | void;
-  value: Type extends 'single' ? Data | undefined : Data[];
-  type: Type;
-  keyExtractor: (t: Data, index?: number) => string;
-  labelExtractor: (t: Data) => string;
-  placeholder?: string;
-  onSearch?:
-    | ((searchArg: string) => void)
-    | ((searchInput?: string) => Promise<Data[]>)
-    | 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 */
-const Select = <Data, Type extends 'single' | 'multi'>({
-  value,
-  options,
-  keyExtractor,
-  onSelect,
-  type,
-  labelExtractor,
-  placeholder,
-  onSearch,
-  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);
-  const [selectOptions, setSelectOptions] = useState<Data[]>([]);
-  const refDropDown = React.useRef(null);
-  useClickAwayListener(refDropDown, setDropDownVisible);
-
-  useEffect(() => {
-    if (typeof options !== 'function') {
-      setSelectOptions(options);
-    }
-  }, [options]);
-
-  // TODO: Add Skeleton to modal height when loading is true
-
-  const onlyLabel = label && !placeholder;
-  const hasValue =
-    type === 'single' ? !!value : ((value || []) as []).length > 0;
-  const _placeholder = onlyLabel ? label : placeholder;
-  const _label = hasValue ? label : undefined;
-
-  const displayValue = getDisplayValue<Data>(
-    type,
-    value,
-    selectOptions,
-    _placeholder,
-    keyExtractor,
-    labelExtractor
-  );
-
-  const handleLazyFocus = React.useCallback(async () => {
-    if (!dropDownVisible && typeof options === 'function') {
-      try {
-        const result = await options();
-        if (result) {
-          setSelectOptions(result ?? []);
-        }
-      } catch (e) {
-        // TODO: Catch error
-      }
-    }
-  }, [options, setSelectOptions, dropDownVisible]);
-
-  const handleOnSearch = React.useCallback(
-    async (searchInput: string | undefined) => {
-      if (searchInput !== undefined && onSearch && dropDownVisible) {
-        try {
-          //TODO: Remove code duplicated below (Select in react-native-kit)
-          const result = await onSearch(searchInput);
-          if (result) {
-            if (type === 'single') {
-              if (
-                value &&
-                !result.find(
-                  v => keyExtractor(value as Data) === keyExtractor(v)
-                )
-              ) {
-                setSelectOptions([value as Data, ...result]);
-              } else setSelectOptions(result);
-            } else {
-              if ((value as Data[]).length > 0) {
-                const selectedValues =
-                  (value as Data[]).filter(
-                    v =>
-                      !result.find(
-                        current =>
-                          keyExtractor(v as Data) === keyExtractor(current)
-                      )
-                  ) || [];
-                setSelectOptions([...selectedValues, ...result]);
-              } else {
-                setSelectOptions(result);
-              }
-            }
-          }
-        } catch (e) {
-          // TODO: Catch error
-        }
-      }
-    },
-    [onSearch, value, keyExtractor, dropDownVisible, setSelectOptions]
-  );
-
-  const handlePressInput = async () => {
-    await handleLazyFocus();
-  };
-
-  const onPress = React.useCallback(
-    () => setDropDownVisible(prev => !prev),
-    [setDropDownVisible]
-  );
-
-  return (
-    <StyledContainer ref={refDropDown} {...rest}>
-      <StyledInputContainer onFocus={handlePressInput}>
-        <PressableInputContainer
-          label={_label}
-          onPress={onPress}
-          disabled={disabled}
-          rightComponent={RightComponent}
-        >
-          <Text
-            {...displayTextProps}
-            ellipsizeMode="tail"
-            numberOfLines={1}
-            fontWeight={'bold'}
-          >
-            {displayValue}
-          </Text>
-        </PressableInputContainer>
-      </StyledInputContainer>
-      <Transition in={dropDownVisible} timeout={300}>
-        {state => (
-          <Dropdown
-            options={selectOptions ?? []}
-            onSelect={onSelect}
-            value={value}
-            type={type}
-            keyExtractor={keyExtractor}
-            labelExtractor={labelExtractor}
-            hideSearchBar={hideSearchBar}
-            searchBarPlaceholder={searchBarPlaceholder}
-            onSearch={handleOnSearch}
-            style={{ ...defaultStyles, ...transition[anchor][state] }}
-            setDropDownVisible={setDropDownVisible}
-            anchor={anchor}
-            selectAllLabel={selectAllLabel}
-          />
-        )}
-      </Transition>
-    </StyledContainer>
-  );
-};
-
-export default Select;