@tecsinapse/react-web-kit 1.22.1-beta.8 → 1.22.2

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

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

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

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

@@ -0,0 +1,117 @@
+import React from 'react';
+import { Checkbox, Text } from '@tecsinapse/react-core';
+import {
+  ContainerItemSelect,
+  StyledContainerTextLabel,
+  StyledSpan,
+} from './styled';
+
+interface SelectItemProps<Data, Type extends 'single' | 'multi'> {
+  item: Data;
+  type: Type;
+  value: Type extends 'single' ? Data | undefined : Data[];
+  onSelect: (
+    option: Type extends 'single' ? Data | undefined : Data[]
+  ) => never | void;
+  keyExtractor: (t: Data, index?: number) => string;
+  labelExtractor: (t: Data) => string;
+  index: number;
+}
+
+const SelectItem = <Data, Type extends 'single' | 'multi'>({
+  item,
+  onSelect,
+  type,
+  value,
+  labelExtractor,
+  setDropDownVisible,
+  checkedAll,
+  setCheckedAll,
+  lenghtOptions,
+  keyExtractor,
+}: SelectItemProps<Data, Type> & {
+  setDropDownVisible: (t: boolean) => void;
+  checkedAll: boolean;
+  setCheckedAll: (t: boolean) => void;
+  lenghtOptions: number;
+}): JSX.Element => {
+  const isMulti = type === 'multi';
+  const [checked, setChecked] = React.useState<boolean>(
+    value !== undefined &&
+      type === 'multi' &&
+      (value as Data[]).find(
+        data => keyExtractor(data) === keyExtractor(item)
+      ) !== undefined
+  );
+
+  React.useEffect(() => {
+    if (
+      !checked &&
+      value !== undefined &&
+      ((type === 'multi' &&
+        (value as Data[]).find(
+          data => keyExtractor(data) === keyExtractor(item)
+        )) ||
+        (type === 'single' &&
+          keyExtractor(value as Data) === keyExtractor(item)))
+    )
+      setChecked(true);
+  }, [value, keyExtractor, type]);
+
+  React.useEffect(() => {
+    if (type === 'multi') {
+      checkedAll
+        ? setChecked(true)
+        : setChecked(
+            (value as Data[]).find(
+              data => keyExtractor(data) === keyExtractor(item)
+            ) !== undefined
+          );
+    }
+  }, [checkedAll]);
+
+  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.findIndex(
+            data => keyExtractor(data) === keyExtractor(key)
+          );
+          auxArray.splice(indexToExclude, 1);
+          onSelect([...auxArray] as OnSelectArg);
+          setCheckedAll(false);
+        }
+      } else {
+        onSelect(key as OnSelectArg);
+        setDropDownVisible(false);
+      }
+    },
+    [onSelect, setDropDownVisible, setCheckedAll, setChecked, checked]
+  );
+
+  return (
+    <ContainerItemSelect onClick={() => clickItem(item, value)}>
+      {isMulti && (
+        <Checkbox checked={checked} onChange={() => clickItem(item, value)} />
+      )}
+      <StyledContainerTextLabel>
+        <Text fontWeight="bold" ellipsizeMode="tail" numberOfLines={1}>
+          <StyledSpan singleHighligh={type === 'single' && value === item}>
+            {labelExtractor(item)}
+          </StyledSpan>
+        </Text>
+      </StyledContainerTextLabel>
+    </ContainerItemSelect>
+  );
+};
+
+export default React.memo(SelectItem) as typeof SelectItem;

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

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

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

@@ -0,0 +1,34 @@
+import styled from '@emotion/styled';
+import { StyleProps } from '@tecsinapse/react-core';
+
+export const ContainerItemSelect = styled('div')<Partial<StyleProps>>`
+  padding: ${({ theme }) => `${theme.spacing.mili} ${theme.spacing.deca}`};
+  cursor: pointer;
+  &:hover {
+    background-color: ${({ theme }) => theme.color.primary.xlight};
+  }
+  &:hover span {
+    color: ${({ theme }) => theme.color.primary.medium};
+  }
+  flex-direction: row;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export const StyledSpan = styled('span')<
+  Partial<StyleProps> & { singleHighligh: boolean }
+>`
+  color: ${({ theme, singleHighligh }) =>
+    singleHighligh ? theme.color.primary.medium : theme.color.secondary.xdark};
+  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;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;

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

@@ -0,0 +1,42 @@
+export const defaultStyles = {
+  transition: [
+    'transform 200ms ease-in-out, opacity 200ms ease-in-out, visibility 200ms ease-in-out',
+  ],
+  overflow: 'hidden',
+  visibility: 'hidden',
+};
+
+export const transition = {
+  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' },
+  },
+};

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

@@ -0,0 +1,24 @@
+export const getDisplayValue = <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 as Data[]).length === 0) return placeholder;
+    else {
+      return (value as Data[])
+        .reduce((acc, option) => acc + labelExtractor(option) + ', ', '')
+        .slice(0, -2);
+    }
+  } else {
+    if (value === undefined) return placeholder;
+    const selectedOption = options.find(
+      (option, index) =>
+        keyExtractor(option, index) == keyExtractor(value as Data, index)
+    );
+    return selectedOption ? labelExtractor(selectedOption) : placeholder;
+  }
+};

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

@@ -0,0 +1,2 @@
+export { default as Select } from './Select';
+export type { SelectProps } from './Select';

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

@@ -0,0 +1,25 @@
+import styled from '@emotion/styled';
+import { Icon, StyleProps } from '@tecsinapse/react-core';
+import React from 'react';
+
+export const StyledContainer = styled('div')<Partial<StyleProps>>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+  position: relative;
+`;
+
+export const StyledInputContainer = styled('div')<Partial<StyleProps>>`
+  width: 100%;
+`;
+
+export const RightComponent = (
+  <Icon
+    name="chevron-down"
+    type="material-community"
+    size="centi"
+    style={{ marginRight: 12 }}
+  />
+);