@tecsinapse/react-web-kit 1.3.2 → 1.6.1

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

@@ -6,9 +6,10 @@ import { MostUsedType } from '../types';
 interface MostUsedProps {
   data: MostUsedType[];
   label: string;
+  toggle: () => void;
 }
 
-const MostUsed: React.FC<MostUsedProps> = ({ data, label }) => {
+const MostUsed: React.FC<MostUsedProps> = ({ data, label, toggle }) => {
   const noTextDecoration = { textDecoration: 'none' };
 
   return (
@@ -28,6 +29,7 @@ const MostUsed: React.FC<MostUsedProps> = ({ data, label }) => {
                 {...props}
                 style={noTextDecoration}
                 key={`${title}-${category}`}
+                onClick={toggle}
               >
                 <StyledCard elevated key={`${title}-${category}`}>
                   <Text fontWeight="bold" colorVariant="primary">
@@ -49,4 +51,4 @@ const MostUsed: React.FC<MostUsedProps> = ({ data, label }) => {
   );
 };
 
-export default MostUsed;
+export default React.memo(MostUsed);

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

@@ -0,0 +1,64 @@
+import { CSSProperties } from 'react';
+import { TransitionStatus } from 'react-transition-group';
+
+const getDefaultInputContainerStyles = {
+  transitionDuration: '250ms',
+  transitionProperty: 'opacity scale transform',
+  transitionTimingFunction: 'ease-in-out',
+};
+
+const getDefaultContainerOpenMenuStyles = {
+  transitionDuration: '250ms',
+  transitionProperty: 'opacity scale transform',
+  transitionTimingFunction: 'ease-in-out',
+};
+
+const getInputContainerTransform = {
+  entered: {
+    transform: 'scale(1, 1) translateY(0px)',
+  },
+  entering: {
+    opacity: 0.5,
+    transform: 'scale(0.99, 0.99) translateY(-5px)',
+  },
+  exited: {
+    opacity: 0,
+    transform: 'scale(0.99, 0.99) translateY(-50px)',
+  },
+  exiting: {
+    opacity: 0.5,
+    transform: 'scale(0.99, 0.99) translateY(-5px)',
+  },
+};
+
+const getContainerOpenMenuTransform = {
+  entered: {
+    transform: 'scale(1, 1) translateY(0px) ',
+  },
+  entering: {
+    opacity: 0.95,
+    transform: 'scale(0.99, 0.99) translateY(0px)',
+  },
+  exited: {
+    opacity: 0,
+    transform: 'scale(0.99, 0.99) translateY(-600px)',
+  },
+  exiting: {
+    opacity: 0.95,
+    transform: 'scale(0.99, 0.99) translateY(0px)',
+  },
+};
+
+export const getInputContainerStyles = (
+  state: TransitionStatus
+): CSSProperties => ({
+  ...getDefaultInputContainerStyles,
+  ...getInputContainerTransform[state],
+});
+
+export const getContainerOpenMenuStyles = (
+  state: TransitionStatus
+): CSSProperties => ({
+  ...getDefaultContainerOpenMenuStyles,
+  ...getContainerOpenMenuTransform[state],
+});

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

@@ -12,6 +12,8 @@ export const StyledIconInput = webStyled('div')<Partial<StyleProps>>`
 `;
 
 export const StyledMenuBar = webStyled('div')<Partial<StyleProps>>`
+    position: relative;
+    z-index: ${({ theme }) => theme.zIndex.absolute};
     background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
     display: flex;
     flex-direction: row;
@@ -27,6 +29,9 @@ export const StyledMenuButton = nativeStyled(Button)<Partial<StyleProps>>`
     padding-bottom: calc(${({ theme }) => theme.spacing.centi} + 2px);
     padding-left: calc(${({ theme }) => theme.spacing.centi} + 2px);
     margin-right: ${({ theme }) => theme.spacing.kilo};
+    & * {
+      user-select: none;
+    }
 `;
 
 export const StyledContainerOpenMenu = webStyled('div')<Partial<StyleProps>>`
@@ -35,7 +40,9 @@ export const StyledContainerOpenMenu = webStyled('div')<Partial<StyleProps>>`
         theme.miscellaneous.shadow,
         0.08
       )}`};
-    background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
+    background-color: ${({ theme }) => theme.miscellaneous.surfaceColor}; 
+    border-bottom-left-radius: ${({ theme }) => theme.borderRadius.mili}; 
+    border-bottom-right-radius: ${({ theme }) => theme.borderRadius.mili};
     box-shadow: 0px 2px 8px ${({ theme }) =>
       hex2rgba(theme.miscellaneous.shadow, 0.08)};
     padding-right: 8vw;

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

@@ -0,0 +1,106 @@
+import React, { CSSProperties } from 'react';
+import {
+  Checkbox,
+  Text,
+  Icon,
+  useDebouncedState,
+} from '@tecsinapse/react-core';
+import { Input } from '../../../atoms/Input';
+import { ItemSelect } from '../SelectItem';
+import { SelectProps } from '../Select';
+import {
+  SearchBarContainer,
+  StyledContainerCheckAll,
+  StyledContainerDropdown,
+  StyledContainerTextLabel,
+  StyledSpan,
+  StyledTest,
+} from './styled';
+
+const Dropdown = <Data, Type extends 'single' | 'multi'>({
+  options,
+  onSearch,
+  type,
+  hideSearchBar,
+  onSelect,
+  value,
+  keyExtractor,
+  labelExtractor,
+  setDropDownVisible,
+  style,
+}: SelectProps<Data, Type> & {
+  setDropDownVisible: (t: boolean) => void;
+  style: CSSProperties;
+}): JSX.Element => {
+  const [searchArg, setSearchArg] = useDebouncedState<string>('', onSearch);
+  const lengthOptions = options.length;
+
+  const [checkedAll, setCheckedAll] = React.useState<boolean>(
+    type === 'multi' && (value as Data[])?.length === lengthOptions
+  );
+
+  const onClickCheckAll = () => {
+    const items = options.map(option => option);
+    setCheckedAll(!checkedAll);
+    const aux = !checkedAll;
+    type OnSelectArg = Parameters<typeof onSelect>[0];
+    const auxArray: Data[] = [];
+    !aux ? onSelect(auxArray as OnSelectArg) : onSelect(items as OnSelectArg);
+  };
+
+  return (
+    <StyledContainerDropdown lengthOptions={lengthOptions} style={style}>
+      {type === 'multi' && (
+        <StyledContainerCheckAll
+          onClick={hideSearchBar ? onClickCheckAll : undefined}
+        >
+          <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)}
+              />
+            </SearchBarContainer>
+          ) : (
+            <StyledContainerTextLabel>
+              <Text fontWeight="bold">
+                <StyledSpan>Selecionar todos</StyledSpan>
+              </Text>
+            </StyledContainerTextLabel>
+          )}
+        </StyledContainerCheckAll>
+      )}
+      <StyledTest lenghtOptions={options.length}>
+        {options.map((item, index) => (
+          <ItemSelect
+            type={type}
+            key={index}
+            item={item}
+            onSelect={onSelect}
+            value={value}
+            keyExtractor={keyExtractor}
+            index={index}
+            labelExtractor={labelExtractor}
+            setDropDownVisible={setDropDownVisible}
+            checkedAll={checkedAll}
+            setCheckedAll={setCheckedAll}
+            lenghtOptions={options.length}
+          />
+        ))}
+      </StyledTest>
+    </StyledContainerDropdown>
+  );
+};
+
+export default Dropdown;

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

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

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

@@ -0,0 +1,77 @@
+import styled from '@emotion/styled';
+import { hex2rgba, StyleProps } from '@tecsinapse/react-core';
+import { SelectProps } from '../Select';
+
+export const StyledContainerDropdown = styled('div')<
+  Partial<StyleProps & SelectProps<any, any> & { lengthOptions: number }>
+>`
+  width: 100%;
+  background-color: ${({ theme }: StyleProps) =>
+    theme.miscellaneous.surfaceColor};
+  border-radius: ${({ theme }: StyleProps) => theme.borderRadius.mili};
+  box-shadow: 0px 2px 8px
+    ${({ theme }: StyleProps) => hex2rgba(theme.miscellaneous.shadow, 0.08)};
+  margin-top: ${({ theme }: StyleProps) => theme.spacing.centi};
+  top: 100%;
+  position: absolute;
+  padding-top: ${({
+    theme,
+    hideSearchBar,
+  }: StyleProps & Partial<SelectProps<any, any>>) =>
+    !hideSearchBar ? `${theme.spacing.deca}` : '0px'};
+  padding-bottom: ${({ theme }: StyleProps) => theme.spacing.mili};
+  z-index: ${({ theme }: StyleProps) => theme.zIndex.default};
+`;
+
+export const StyledTest = styled('div')<
+  Partial<StyleProps & SelectProps<any, any> & { lenghtOptions: number }>
+>`
+  max-height: 250px;
+  top: 100%;
+  overflow-y: ${({
+    lenghtOptions = 0,
+  }: Partial<{ lenghtOptions: number } & StyleProps>) =>
+    lenghtOptions > 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 StyledContainerCheckAll = styled('div')<Partial<StyleProps>>`
+  padding: ${({ theme }) => `${theme.spacing.mili} ${theme.spacing.deca}`};
+  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.color.primary.medium};
+  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

@@ -0,0 +1,108 @@
+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: 'Components/Select',
+  component: Select,
+};
+
+type Option = {
+  label: string;
+  value: string;
+};
+
+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' },
+];
+
+const TemplateSingle: Story<SelectProps<Option, 'single'>> = args => {
+  const [singleValue, setSingleValue] = useState(undefined);
+
+  const handleSelectSingleValue = key => setSingleValue(key);
+
+  const handleSearch = React.useCallback((searchArg: string) => {
+    console.log(searchArg);
+  }, []);
+
+  return (
+    <Container>
+      <ContainerSelect>
+        <Select
+          {...args}
+          value={singleValue}
+          type="single"
+          onSelect={handleSelectSingleValue}
+          labelExtractor={item => item.label}
+          keyExtractor={item => String(item.value)}
+          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'>> = args => {
+  const [multiValue, setMultiValue] = useState([]);
+
+  const handleSelectMultipleValues = keys => setMultiValue(keys);
+
+  const handleSearch = React.useCallback((searchArg: string) => {
+    console.log(searchArg);
+  }, []);
+
+  return (
+    <Container>
+      <ContainerSelect>
+        <Select
+          {...args}
+          value={multiValue}
+          type="multi"
+          onSelect={handleSelectMultipleValues}
+          labelExtractor={item => item.label}
+          keyExtractor={item => String(item.value)}
+          onSearch={handleSearch}
+        />
+      </ContainerSelect>
+    </Container>
+  );
+};
+
+export const Multi = TemplateMulti.bind({});
+
+Multi.args = {
+  placeholder: 'Placeholder do select',
+  label: 'Label',
+  options: OPTIONS_EXAMPLE,
+  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,92 @@
+import React from 'react';
+import { Icon, PressableInputContainer, Text } from '@tecsinapse/react-core';
+import { useClickAwayListener } from '../../../hooks';
+import { StyledContainer, StyledInputContainer } from './styled';
+import { Dropdown } from './Dropdown';
+import { getDisplayValue } from './functions';
+import { Transition } from 'react-transition-group';
+import { defaultStyles, transition } from './animations';
+
+export interface SelectProps<Data, Type extends 'single' | 'multi'> {
+  options: 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 | never;
+  searchBarPlaceholder?: string;
+  hideSearchBar?: boolean;
+  label?: string;
+}
+
+export const Select = <Data, Type extends 'single' | 'multi'>({
+  value,
+  options,
+  keyExtractor,
+  onSelect,
+  type,
+  labelExtractor,
+  placeholder,
+  onSearch,
+  hideSearchBar = true,
+  label,
+  ...rest
+}: SelectProps<Data, Type>): JSX.Element => {
+  const [dropDownVisible, setDropDownVisible] = React.useState<boolean>(false);
+  const refDropDown = React.useRef(null);
+  useClickAwayListener(refDropDown, setDropDownVisible);
+
+  const displayValue = getDisplayValue<Data>(
+    type,
+    value,
+    options,
+    placeholder,
+    keyExtractor,
+    labelExtractor
+  );
+
+  return (
+    <StyledContainer ref={refDropDown}>
+      <StyledInputContainer>
+        <PressableInputContainer
+          label={label}
+          {...rest}
+          onPress={() => setDropDownVisible(!dropDownVisible)}
+          rightComponent={
+            <Icon
+              name="chevron-down"
+              type="material-community"
+              size="centi"
+              style={{ marginRight: 12 }}
+            />
+          }
+        >
+          <Text ellipsizeMode="tail" numberOfLines={1}>
+            {displayValue}
+          </Text>
+        </PressableInputContainer>
+      </StyledInputContainer>
+      <Transition in={dropDownVisible} timeout={300}>
+        {state => (
+          <Dropdown
+            options={options}
+            onSelect={onSelect}
+            value={value}
+            type={type}
+            keyExtractor={keyExtractor}
+            labelExtractor={labelExtractor}
+            hideSearchBar={hideSearchBar}
+            style={{ ...defaultStyles, ...transition[state] }}
+            setDropDownVisible={setDropDownVisible}
+          />
+        )}
+      </Transition>
+    </StyledContainer>
+  );
+};
+
+export default Select;