@tecsinapse/react-web-kit 1.18.5 → 1.19.0

package/src/components/molecules/IconTextButton/TextComponent.tsx

@@ -0,0 +1,39 @@
+import {
+  ButtonSizeType,
+  FontColor,
+  IconPositionOptions,
+  Text,
+  TextProps,
+} from '@tecsinapse/react-core';
+import React, { FC } from 'react';
+
+interface TextComponentProps {
+  textProps?: TextProps;
+  size?: ButtonSizeType;
+  defaultFontColor: keyof FontColor;
+  label?: string;
+  iconPosition?: IconPositionOptions;
+  hasIcon?: boolean;
+}
+
+const TextComponent: FC<TextComponentProps> = ({
+  textProps,
+  size = 'default',
+  defaultFontColor,
+  label,
+}) => {
+  return label ? (
+    <Text
+      typography={textProps?.typography ?? size === 'small' ? 'sub' : 'base'}
+      fontWeight={textProps?.fontWeight ?? 'bold'}
+      fontColor={textProps?.fontColor ?? defaultFontColor}
+      {...textProps}
+    >
+      {label}
+    </Text>
+  ) : (
+    <></>
+  );
+};
+
+export default React.memo(TextComponent);

package/src/components/molecules/IconTextButton/hooks/useIconTextButton.ts

@@ -0,0 +1,31 @@
+import { fontColorVC, VariantType } from '@tecsinapse/react-core';
+import { useCallback, useState } from 'react';
+
+const useIconTextButton = (variant: VariantType) => {
+  const [hover, setHover] = useState<boolean>(false);
+  const [pressed, setPressed] = useState<boolean>(false);
+
+  const defaultFontColor = !pressed && hover ? 'light' : fontColorVC[variant];
+
+  const handleHover = useCallback(
+    (value: boolean) => {
+      setHover(value);
+    },
+    [setHover]
+  );
+
+  const handlePressed = useCallback(
+    (value: boolean) => {
+      setPressed(value);
+    },
+    [setPressed]
+  );
+
+  return {
+    handleHover,
+    handlePressed,
+    defaultFontColor,
+  };
+};
+
+export default useIconTextButton;

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

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

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

@@ -0,0 +1,18 @@
+import styled from '@emotion/native';
+import { StyleProps } from '@tecsinapse/react-core';
+import { Button } from '../../atoms/Button';
+
+const boxedStyle = ({ theme }: Partial<StyleProps>) =>
+  `
+    padding: ${theme?.spacing.centi};
+    aspect-ratio: 1;
+  `;
+
+export const StyledIconTextButton = styled(Button)<
+  Partial<StyleProps> & {
+    boxed: boolean;
+  }
+>`
+  gap: ${({ theme }) => theme?.spacing.mili};
+  ${({ boxed, theme }) => boxed && boxedStyle({ theme })};
+`;

package/src/components/molecules/LabeledSwitch/LabelComponent.tsx

@@ -0,0 +1,46 @@
+import {
+  FontColor,
+  FontWeight,
+  LabelPositionOptions,
+  TextProps,
+} from '@tecsinapse/react-core';
+import React, { FC } from 'react';
+import { Pressable, PressableProps } from 'react-native';
+import { StyledLabel } from './styled';
+
+export interface LabelComponentProps extends PressableProps {
+  label: string;
+  labelPosition: LabelPositionOptions;
+  labelProps?: TextProps;
+  active: boolean;
+  switchDisabled?: boolean;
+}
+
+const LabelComponent: FC<LabelComponentProps> = ({
+  label,
+  labelPosition,
+  labelProps,
+  active,
+  switchDisabled = false,
+  ...rest
+}) => {
+  const defaultFontColor: keyof FontColor =
+    active && !switchDisabled ? 'dark' : 'medium';
+  const defaultFontWeight: keyof FontWeight =
+    active && !switchDisabled ? 'bold' : 'regular';
+
+  return (
+    <Pressable {...rest}>
+      <StyledLabel
+        labelPosition={labelPosition}
+        fontColor={labelProps?.fontColor ?? defaultFontColor}
+        fontWeight={labelProps?.fontWeight ?? defaultFontWeight}
+        {...labelProps}
+      >
+        {label}
+      </StyledLabel>
+    </Pressable>
+  );
+};
+
+export default React.memo(LabelComponent);

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

@@ -0,0 +1,41 @@
+import { action } from '@storybook/addon-actions';
+import { Story } from '@storybook/react';
+import React from 'react';
+import {
+  default as LabeledSwitch,
+  LabeledSwitchWebProps,
+} from './LabeledSwitch';
+
+export default {
+  title: 'Web/LabeledSwitch',
+  component: LabeledSwitch,
+};
+
+const Template: Story<LabeledSwitchWebProps> = args => {
+  const [active, setActive] = React.useState(args.active);
+  const onChange = arg => {
+    setActive(!active);
+    args.onChange(arg);
+  };
+
+  return (
+    <LabeledSwitch
+      active={active}
+      onChange={onChange}
+      disabled={args.disabled}
+      label={'Labeled switch!'}
+      labelPosition={args.labelPosition}
+      pressableLabel={args.pressableLabel}
+    />
+  );
+};
+
+export const Base = Template.bind({});
+
+Base.args = {
+  active: true,
+  onChange: value => action('Clicked')(value),
+  disabled: false,
+  labelPosition: 'right',
+  pressableLabel: true,
+};

package/src/components/molecules/LabeledSwitch/LabeledSwitch.tsx

@@ -0,0 +1,58 @@
+import { LabeledSwitchProps, Switch, TextProps } from '@tecsinapse/react-core';
+import React, { FC } from 'react';
+import LabelComponent from './LabelComponent';
+import { StyledDiv } from './styled';
+
+export type LabeledSwitchWebProps = LabeledSwitchProps & {
+  labelProps?: TextProps;
+};
+
+const LabeledSwitch: FC<LabeledSwitchWebProps> = ({
+  label,
+  labelPosition = 'right',
+  labelProps,
+  pressableLabel = false,
+  disabled,
+  active,
+  onChange,
+  ...rest
+}) => {
+  return (
+    <StyledDiv>
+      {labelPosition === 'left' ? (
+        <LabelComponent
+          active={active}
+          label={label}
+          labelPosition={'left'}
+          labelProps={labelProps}
+          disabled={!pressableLabel || disabled}
+          switchDisabled={disabled}
+          onPress={() => onChange(!active)}
+        />
+      ) : (
+        <></>
+      )}
+      <Switch
+        active={active}
+        disabled={disabled}
+        onChange={onChange}
+        {...rest}
+      />
+      {labelPosition === 'right' ? (
+        <LabelComponent
+          active={active}
+          label={label}
+          labelPosition={'right'}
+          labelProps={labelProps}
+          disabled={!pressableLabel || disabled}
+          switchDisabled={disabled}
+          onPress={() => onChange(!active)}
+        />
+      ) : (
+        <></>
+      )}
+    </StyledDiv>
+  );
+};
+
+export default LabeledSwitch;

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

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

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

@@ -0,0 +1,26 @@
+import { css, default as nativeStyled } from '@emotion/native';
+import { default as webStyled } from '@emotion/styled';
+import { LabelPositionOptions, StyleProps, Text } from '@tecsinapse/react-core';
+
+export const StyledDiv = webStyled('div')`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+
+export const StyledLabel = nativeStyled(Text)<
+  Partial<StyleProps> & {
+    labelPosition: LabelPositionOptions;
+  }
+>`
+  ${({ theme, labelPosition }) => {
+    if (labelPosition === 'right')
+      return css`
+        margin-left: ${theme?.spacing.centi};
+      `;
+    else if (labelPosition === 'left')
+      return css`
+        margin-right: ${theme?.spacing.centi};
+      `;
+  }}
+`;

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

@@ -69,9 +69,9 @@ const Footer: React.FC<DataGridFooterProps> = ({
     },
     [onPageChange, onRowsPerPageChange]
   );
-
-  const quantityRowsRendered =
-    rowsPerPage > rowsCount ? rowsCount : rowsPerPage;
+  const currentInitItem = page * rowsPerPage + 1;
+  const currentFinalItem =
+    (page + 1) * rowsPerPage > rowsCount ? rowsCount : (page + 1) * rowsPerPage;
 
   return (
     <TFoot>
@@ -108,7 +108,7 @@ const Footer: React.FC<DataGridFooterProps> = ({
                 <TextPagination
                   fontWeight={'bold'}
                   fontColor={'medium'}
-                >{`Exibindo ${quantityRowsRendered} de ${rowsCount} registros`}</TextPagination>
+                >{`Exibindo ${currentInitItem} a ${currentFinalItem} de ${rowsCount} registros`}</TextPagination>
                 <FooterContainerEnd>
                   <NavigationButton
                     onPress={() => onPageChange?.(page - 1)}

package/src/hooks/index.ts

@@ -1 +1,3 @@
+export { useBreakpoints } from './useBreakpoints';
 export { useClickAwayListener } from './useClickAwayListener';
+export { useWindowSize } from './useWindowSize';

package/src/hooks/useBreakpoints.ts

@@ -0,0 +1,18 @@
+import { useTheme } from '@tecsinapse/react-core';
+import { useWindowSize } from './useWindowSize';
+
+export type UseBreakpointsReturn = {
+  sm: boolean;
+  md: boolean;
+  lg: boolean;
+};
+
+export const useBreakpoints = (): UseBreakpointsReturn => {
+  const { width } = useWindowSize();
+  const { breakpoints } = useTheme();
+  return {
+    sm: Number(width) >= 0 && Number(width) <= breakpoints.sm,
+    md: Number(width) > breakpoints.sm && Number(width) <= breakpoints.md,
+    lg: Number(width) > breakpoints.md,
+  };
+};

package/src/hooks/useWindowSize.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+
+type WindowSize = {
+  width: number | undefined;
+  height: number | undefined;
+};
+
+export const useWindowSize = (): WindowSize => {
+  const [windowSize, setWindowSize] = React.useState<WindowSize>({
+    width: undefined,
+    height: undefined,
+  });
+  React.useEffect(() => {
+    const handleResize = () => {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    };
+    window.addEventListener('resize', handleResize);
+    handleResize();
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+  return windowSize;
+};

package/src/index.ts

@@ -1,7 +1,8 @@
 export * from '@tecsinapse/react-core';
+export { Accordion, AccordionProps } from './components/atoms/Accordion';
 export {
-  default as Badge,
   BadgeWebProps,
+  default as Badge,
 } from './components/atoms/Badge/Badge';
 export {
   Button,
@@ -9,44 +10,52 @@ export {
   WebButtonProps,
 } from './components/atoms/Button';
 export { Input, InputWebProps } from './components/atoms/Input';
+export { InputMask, InputMaskWebProps } from './components/atoms/InputMask';
+export { Modal, ModalProps } from './components/atoms/Modal';
+export { Skeleton, SkeletonProps } from './components/atoms/Skeleton';
 export { Tag, TagProps } from './components/atoms/Tag';
+export { ITooltip, Tooltip } from './components/atoms/Tooltip';
+export {
+  Breadcrumbs,
+  BreadcrumbsProps,
+  BreadcrumbType,
+} from './components/molecules/Breadcrumbs';
+export {
+  DatePicker,
+  WebDatePickerProps,
+} from './components/molecules/DatePicker';
+export {
+  DateTimePicker,
+  WebDateTimePickerProps,
+} from './components/molecules/DateTimePicker';
+export { Drawer, DrawerProps } from './components/molecules/Drawer';
+export {
+  Grid,
+  GridItem,
+  IGridWeb,
+  IGridItemWeb,
+} from './components/molecules/Grid';
 export {
   InputPassword,
   InputPasswordWebProps,
 } from './components/molecules/InputPassword';
-export { InputMask, InputMaskWebProps } from './components/atoms/InputMask';
+export {
+  LabeledSwitch,
+  LabeledSwitchWebProps,
+} from './components/molecules/LabeledSwitch';
 export {
   Menubar,
-  MenubarProps,
-  MenubarOptionsType,
   MenubarItemsOptions,
   MenubarMostUsedType,
+  MenubarOptionsType,
+  MenubarProps,
 } from './components/molecules/Menubar';
-export { Drawer, DrawerProps } from './components/molecules/Drawer';
 export { Select, SelectProps } from './components/molecules/Select';
 export { Snackbar, SnackbarWebProps } from './components/molecules/Snackbar';
-export {
-  Breadcrumbs,
-  BreadcrumbsProps,
-  BreadcrumbType,
-} from './components/molecules/Breadcrumbs';
-export { Skeleton, SkeletonProps } from './components/atoms/Skeleton';
-export { Accordion, AccordionProps } from './components/atoms/Accordion';
+export { TextArea, TextAreaProps } from './components/molecules/TextArea';
 export {
   DataGrid,
   DataGridProps,
   HeadersType,
 } from './components/organisms/DataGrid';
-export { Modal, ModalProps } from './components/atoms/Modal';
-export { TextArea, TextAreaProps } from './components/molecules/TextArea';
-export { Tooltip, ITooltip } from './components/atoms/Tooltip';
 export * from './hooks';
-export {
-  DatePicker,
-  WebDatePickerProps,
-} from './components/molecules/DatePicker';
-export {
-  DateTimePicker,
-  WebDateTimePickerProps,
-} from './components/molecules/DateTimePicker';
-export { Grid, GridItem, IGrid, IGridItem } from './components/molecules/Grid';