@tecsinapse/react-core 1.9.0 → 1.10.3

package/src/components/atoms/Switch/Switch.stories.tsx

@@ -15,7 +15,7 @@ const Template: Story<SwitchProps> = args => {
     args.onChange(arg);
   };
 
-  return <Switch active={active} onChange={onChange} />;
+  return <Switch active={active} onChange={onChange} disabled={args.disabled}/>;
 };
 
 export const Base = Template.bind({});
@@ -23,4 +23,5 @@ export const Base = Template.bind({});
 Base.args = {
   active: true,
   onChange: value => action('Cicked')(value),
+  disabled: false,
 };

package/src/components/atoms/Switch/Switch.tsx

@@ -9,7 +9,7 @@ import {
 import { PressableSurface } from '../PressableSurface';
 import { StyledSwitch } from './styled';
 import { transitionSwitch } from './animation';
-import { extractNumbersFromString } from '../../../utils';
+import { extractNumbersFromString, lightenDarkenColor } from '../../../utils';
 
 export interface SwitchProps {
   onChange: (active: boolean) => void;
@@ -20,6 +20,7 @@ export interface SwitchProps {
   inactiveColorTone?: ColorGradationType;
   style?: StyleProp<ViewStyle>;
   dotStyle?: StyleProp<ViewStyle>;
+  disabled?: boolean;
 }
 
 const Switch: FC<SwitchProps> = ({
@@ -30,6 +31,7 @@ const Switch: FC<SwitchProps> = ({
   inactiveColorTone = 'light',
   active,
   dotStyle,
+  disabled = false,
   ...rest
 }): JSX.Element => {
   const theme = useTheme() as ThemeProp;
@@ -40,11 +42,15 @@ const Switch: FC<SwitchProps> = ({
   const animatedColor = React.useRef(new Animated.Value(active ? 1 : 0))
     .current;
 
+  const getBackgroundColor = (color: string, variation: number) => {
+    return disabled ? lightenDarkenColor(color, variation) : color;
+  };
+
   const interpolateColor = animatedColor.interpolate({
     inputRange: [0, 1],
     outputRange: [
-      theme.color[inactiveColor][inactiveColorTone],
-      theme.color[activeColor][activeColorTone],
+      getBackgroundColor(theme.color[inactiveColor][inactiveColorTone], 25),
+      getBackgroundColor(theme.color[activeColor][activeColorTone], 50),
     ],
   });
 
@@ -57,7 +63,7 @@ const Switch: FC<SwitchProps> = ({
     transitionSwitch(active, transitionValue, animatedColor);
   }, [active, onChange]);
 
-  const stylesDefaut: ViewStyle = {
+  const stylesDefault: ViewStyle = {
     borderRadius: extractNumbersFromString(theme.borderRadius.pill),
     paddingHorizontal: extractNumbersFromString(theme.spacing.micro),
     paddingVertical: 0,
@@ -67,8 +73,13 @@ const Switch: FC<SwitchProps> = ({
   };
 
   return (
-    <PressableSurface {...rest} onPress={handleChange} effect="none">
-      <Animated.View style={{ ...animatedStyle, ...stylesDefaut }}>
+    <PressableSurface
+      {...rest}
+      onPress={handleChange}
+      effect="none"
+      disabled={disabled}
+    >
+      <Animated.View style={{ ...animatedStyle, ...stylesDefault }}>
         <StyledSwitch
           style={[dotStyle, { transform: [{ translateX: transitionValue }] }]}
         />

package/src/components/atoms/Switch/animation.ts

@@ -1,6 +1,10 @@
 import { Animated } from 'react-native';
 
-export const transitionSwitch = (active, transitionValue, animatedColor) => {
+export const transitionSwitch = (
+  active: boolean,
+  transitionValue: Animated.Value,
+  animatedColor: Animated.Value
+): void => {
   if (active) {
     Animated.timing(transitionValue, {
       toValue: 0,

package/src/components/atoms/Tag/Tag.tsx

@@ -17,7 +17,7 @@ const Tag: React.FC<TagProps> = ({
   icon,
   variant = 'small',
   dismiss: canDismiss = false,
-  onDismiss = () => {},
+  onDismiss,
   style,
   ...rest
 }): JSX.Element => {
@@ -34,7 +34,7 @@ const Tag: React.FC<TagProps> = ({
   };
 
   const handleDismiss = useCallback(() => {
-    onDismiss();
+    onDismiss?.();
     fadeOut();
     setTimeout(() => setDismiss(true), duration);
   }, [onDismiss]);

package/src/components/molecules/Calendar/Calendar.tsx

@@ -1,31 +1,23 @@
-import {
-  add,
-  compareAsc as compare,
-  differenceInDays,
-  format,
-  getWeeksInMonth,
-  isSameDay,
-  set,
-} from 'date-fns';
+import { add, format, getWeeksInMonth, set } from 'date-fns';
 import * as React from 'react';
 import { View, ViewProps } from 'react-native';
 import { Icon } from '../../atoms/Icon';
 import { Text, TextProps } from '../../atoms/Text';
 import {
-  Cell,
   Content,
   Control,
   getCapitalizedTextComponent,
-  Selected,
   TitleContainer,
-  Week,
 } from './styled';
+import { Weekdays, MonthWeek } from './components';
 
 export type SelectionType = 'range' | 'day';
 
 export type DateRange = { lowest: Date; highest?: Date };
 
-type Value<T extends SelectionType> = T extends 'range' ? DateRange : Date;
+export type Value<T extends SelectionType> = T extends 'range'
+  ? DateRange
+  : Date;
 
 export interface CalendarProps<T extends SelectionType> extends ViewProps {
   TextComponent?: React.FC<TextProps>;
@@ -59,104 +51,59 @@ function Calendar<T extends SelectionType>({
   locale,
   ...rest
 }: CalendarProps<T>): JSX.Element {
-  const _referenceDate =
-    _year && _month
-      ? new Date(_year, _month, 1, 0, 0, 0, 0)
-      : _month
-      ? new Date(now.getFullYear(), _month, 1, 0, 0, 0, 0)
-      : now;
+  const _referenceDate = React.useMemo(
+    () =>
+      _year && _month
+        ? new Date(_year, _month, 1, 0, 0, 0, 0)
+        : _month
+        ? new Date(now.getFullYear(), _month, 1, 0, 0, 0, 0)
+        : now,
+    [_year, _month]
+  );
 
   const [referenceDate, setReferenceDate] = React.useState(_referenceDate);
 
-  const startingWeekDay = dayOfWeekFromWeekStart(
-    referenceDate.getDay(),
-    locale?.options?.weekStartsOn ?? 0
+  const startingWeekDay = React.useMemo(
+    () =>
+      dayOfWeekFromWeekStart(
+        referenceDate.getDay(),
+        locale?.options?.weekStartsOn ?? 0
+      ),
+    [referenceDate, locale]
   );
 
-  const weeksInMonth = getWeeksInMonth(referenceDate, {
-    weekStartsOn: locale?.options?.weekStartsOn ?? 0,
-  });
-
-  const Capitalized = getCapitalizedTextComponent(TextComponent);
-
-  const calendar = [...Array(weeksInMonth).keys()].map(week =>
-    [...Array(7).keys()].map(weekDayIndex =>
-      add(referenceDate, {
-        days: 6 * week + week + weekDayIndex - startingWeekDay,
-      })
-    )
+  const weeksInMonth = React.useMemo(
+    () =>
+      getWeeksInMonth(referenceDate, {
+        weekStartsOn: locale?.options?.weekStartsOn ?? 0,
+      }),
+    [referenceDate, locale]
   );
 
-  const checkIfIsBetween = (date: Date) => {
-    if (type !== 'range' || !value) return false;
-    else {
-      const { lowest, highest } = value as DateRange;
-      if (!highest) return false;
-      return compare(lowest, date) <= 0 && compare(highest, date) >= 0;
-    }
-  };
-
-  const checkIfIsSelected = (date: Date) => {
-    if (!value) return false;
-    else if (type === 'range' && value) {
-      const { lowest, highest } = value as DateRange;
-      return (
-        isSameDay(lowest, date) || (highest ? isSameDay(highest, date) : false)
-      );
-    } else {
-      return isSameDay(value as Date, date);
-    }
-  };
-
-  const handlePressCell = (date: Date) => () => {
-    if (type === 'day') {
-      onChange?.(date as never);
-    } else if (!value) {
-      onChange?.({ lowest: date } as never);
-    } else {
-      let newValue;
-      const { lowest, highest } = value as DateRange;
-
-      if (!highest) {
-        if (compare(date, lowest) === -1) {
-          newValue = { lowest: date, highest: lowest };
-        } else if (compare(date, lowest) === 0) {
-          newValue = undefined;
-        } else {
-          newValue = { lowest: lowest, highest: date };
-        }
-      } else {
-        if (compare(date, lowest) === -1) {
-          newValue = { lowest: date, highest: highest };
-        } else if (compare(date, lowest) === 0) {
-          newValue = { lowest: highest, highest: undefined };
-        } else {
-          if (compare(date, highest) === -1) {
-            const lowestDiff = Math.abs(differenceInDays(date, lowest));
-            const highestDiff = Math.abs(differenceInDays(date, highest));
-            newValue = {
-              lowest: lowestDiff < highestDiff ? date : lowest,
-              highest: highestDiff <= lowestDiff ? date : highest,
-            };
-          } else if (compare(date, highest) === 0) {
-            newValue = { lowest: lowest, highest: undefined };
-          } else {
-            newValue = { lowest: lowest, highest: date };
-          }
-        }
-      }
+  const Capitalized = React.useMemo(
+    () => getCapitalizedTextComponent(TextComponent),
+    [TextComponent]
+  );
 
-      onChange?.(newValue as never);
-    }
-  };
+  const calendar = React.useMemo(
+    () =>
+      [...Array(weeksInMonth).keys()].map(week =>
+        [...Array(7).keys()].map(weekDayIndex =>
+          add(referenceDate, {
+            days: 6 * week + week + weekDayIndex - startingWeekDay,
+          })
+        )
+      ),
+    [weeksInMonth, startingWeekDay, referenceDate]
+  );
 
-  const handlePressNext = () => {
+  const handlePressNext = React.useCallback(() => {
     setReferenceDate(add(referenceDate, { months: 1 }));
-  };
+  }, [referenceDate, setReferenceDate]);
 
-  const handlePressPrev = () => {
+  const handlePressPrev = React.useCallback(() => {
     setReferenceDate(add(referenceDate, { months: -1 }));
-  };
+  }, [referenceDate, setReferenceDate]);
 
   return (
     <View {...rest}>
@@ -188,70 +135,21 @@ function Calendar<T extends SelectionType>({
         </Control>
       </TitleContainer>
       <Content>
-        <Week>
-          {calendar[0].map(date => (
-            <Cell
-              key={date.getDate()}
-              selected={false}
-              highlighted={false}
-              isLineEnd={false}
-              isLineStart={false}
-              isRangeStart={false}
-              isRangeEnd={false}
-              pointerEvents={'none'}
-            >
-              <Capitalized colorVariant={'secondary'} colorTone={'medium'}>
-                {format(date, 'EEE', { locale }).slice(0, 3)}
-              </Capitalized>
-            </Cell>
-          ))}
-        </Week>
+        <Weekdays
+          locale={locale}
+          calendar={calendar}
+          Capitalized={Capitalized}
+        />
         {calendar.map((week, index) => (
-          <Week key={`week-${index}`}>
-            {week.map((date, index) => {
-              const isSelected = checkIfIsSelected(date);
-              const isBetween = checkIfIsBetween(date);
-
-              let isRangeStart, isRangeEnd;
-
-              if (type === 'range' && value) {
-                const { lowest, highest } = value as DateRange;
-                isRangeStart = highest && isSameDay(lowest, date);
-                isRangeEnd = !!highest && isSameDay(highest, date);
-              } else {
-                isRangeStart = false;
-                isRangeEnd = false;
-              }
-
-              const colorTone = isSelected
-                ? 'xlight'
-                : date.getMonth() === referenceDate.getMonth()
-                ? 'xdark'
-                : 'light';
-
-              return (
-                <Cell
-                  key={date.getDate()}
-                  selected={isSelected}
-                  highlighted={isBetween}
-                  isLineEnd={index === 6}
-                  isLineStart={index === 0}
-                  isRangeStart={isRangeStart}
-                  isRangeEnd={isRangeEnd}
-                  onPress={handlePressCell(date)}
-                >
-                  <Selected selected={isSelected} pointerEvents={'none'}>
-                    <TextComponent
-                      colorVariant={'secondary'}
-                      colorTone={colorTone}
-                    >
-                      {date.getDate()}
-                    </TextComponent>
-                  </Selected>
-                </Cell>
-              );
-            })}
-          </Week>
+          <MonthWeek
+            week={week}
+            type={type}
+            value={value}
+            key={`week-${index}`}
+            onChange={onChange}
+            TextComponent={TextComponent}
+            referenceDate={referenceDate}
+          />
         ))}
       </Content>
     </View>

package/src/components/molecules/Calendar/components/MonthWeek.tsx

@@ -0,0 +1,144 @@
+import React from 'react';
+import { compareAsc as compare, differenceInDays, isSameDay } from 'date-fns';
+import { Cell, Selected, Week } from '../styled';
+import { Value, DateRange, SelectionType } from '../Calendar';
+import { TextProps } from '@tecsinapse/react-core';
+
+interface IMonthWeek<T extends SelectionType> {
+  TextComponent: React.FC<TextProps>;
+  /** any as workaround for TS type mismatching */
+  onChange?: (value?: any) => void | never;
+  type?: T;
+  value?: Value<T>;
+  week: Date[];
+  referenceDate: Date;
+}
+
+const MonthWeek = <T extends SelectionType>({
+  week,
+  referenceDate,
+  type,
+  value,
+  TextComponent,
+  onChange,
+}: IMonthWeek<T>) => {
+  const checkIfIsBetween = React.useCallback(
+    (date: Date, _value?: Value<T>) => {
+      if (type !== 'range' || !_value) return false;
+      else {
+        const { lowest, highest } = _value as DateRange;
+        if (!highest) return false;
+        return compare(lowest, date) <= 0 && compare(highest, date) >= 0;
+      }
+    },
+    [type]
+  );
+
+  const checkIfIsSelected = React.useCallback(
+    (date: Date, _value?: Value<T>) => {
+      if (!_value) return false;
+      else if (type === 'range' && _value) {
+        const { lowest, highest } = _value as DateRange;
+        return (
+          isSameDay(lowest, date) ||
+          (highest ? isSameDay(highest, date) : false)
+        );
+      } else {
+        return isSameDay(_value as Date, date);
+      }
+    },
+    [type]
+  );
+
+  const handlePressCell = React.useCallback(
+    (date: Date, _value?: Value<T>) => () => {
+      if (type === 'day') {
+        onChange?.(date as never);
+      } else if (!_value) {
+        onChange?.({ lowest: date } as never);
+      } else {
+        let newValue;
+        const { lowest, highest } = _value as DateRange;
+
+        if (!highest) {
+          if (compare(date, lowest) === -1) {
+            newValue = { lowest: date, highest: lowest };
+          } else if (compare(date, lowest) === 0) {
+            newValue = undefined;
+          } else {
+            newValue = { lowest: lowest, highest: date };
+          }
+        } else {
+          if (compare(date, lowest) === -1) {
+            newValue = { lowest: date, highest: highest };
+          } else if (compare(date, lowest) === 0) {
+            newValue = { lowest: highest, highest: undefined };
+          } else {
+            if (compare(date, highest) === -1) {
+              const lowestDiff = Math.abs(differenceInDays(date, lowest));
+              const highestDiff = Math.abs(differenceInDays(date, highest));
+              newValue = {
+                lowest: lowestDiff < highestDiff ? date : lowest,
+                highest: highestDiff <= lowestDiff ? date : highest,
+              };
+            } else if (compare(date, highest) === 0) {
+              newValue = { lowest: lowest, highest: undefined };
+            } else {
+              newValue = { lowest: lowest, highest: date };
+            }
+          }
+        }
+
+        onChange?.(newValue as never);
+      }
+    },
+    [onChange, type]
+  );
+
+  return (
+    <Week>
+      {week.map((date, index) => {
+        const isSelected = checkIfIsSelected(date, value);
+        const isBetween = checkIfIsBetween(date, value);
+
+        let isRangeStart, isRangeEnd;
+
+        if (type === 'range' && value) {
+          const { lowest, highest } = value as DateRange;
+          isRangeStart = highest && isSameDay(lowest, date);
+          isRangeEnd = !!highest && isSameDay(highest, date);
+        } else {
+          isRangeStart = false;
+          isRangeEnd = false;
+        }
+
+        const colorTone = isSelected
+          ? 'xlight'
+          : date.getMonth() === referenceDate.getMonth()
+          ? 'xdark'
+          : 'light';
+
+        return (
+          <Cell
+            key={date.getDate()}
+            selected={isSelected}
+            highlighted={isBetween}
+            isLineEnd={index === 6}
+            isLineStart={index === 0}
+            isRangeStart={isRangeStart}
+            isRangeEnd={isRangeEnd}
+            onPress={handlePressCell(date, value)}
+          >
+            <Selected selected={isSelected} pointerEvents={'none'}>
+              <TextComponent colorVariant={'secondary'} colorTone={colorTone}>
+                {date.getDate()}
+              </TextComponent>
+            </Selected>
+          </Cell>
+        );
+      })}
+    </Week>
+  );
+};
+
+export default React.memo(MonthWeek);

package/src/components/molecules/Calendar/components/Weekdays.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Cell, Week } from '../styled';
+import { format } from 'date-fns';
+
+interface IWeekdays {
+  calendar: Date[][];
+  locale?: Locale;
+  Capitalized: React.ElementType;
+}
+
+const Weekdays = ({ calendar, locale, Capitalized }: IWeekdays) => {
+  return (
+    <Week>
+      {calendar[0].map(date => (
+        <Cell
+          key={date.getDate()}
+          selected={false}
+          highlighted={false}
+          isLineEnd={false}
+          isLineStart={false}
+          isRangeStart={false}
+          isRangeEnd={false}
+          pointerEvents={'none'}
+        >
+          <Capitalized colorVariant={'secondary'} colorTone={'medium'}>
+            {format(date, 'EEE', { locale }).slice(0, 3)}
+          </Capitalized>
+        </Cell>
+      ))}
+    </Week>
+  );
+};
+
+export default React.memo(Weekdays);

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

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

package/src/components/molecules/DatePicker/Modal.tsx

@@ -19,7 +19,7 @@ const Component = <T extends SelectionType>({
   bottomOffset = 0,
   locale,
   ...modalProps
-}: CalendarProps<T> & ModalProps & DatePickerModalProps<T>) => {
+}: CalendarProps<T> & ModalProps & DatePickerModalProps<T>): JSX.Element => {
   return (
     <RNModal
       transparent

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

@@ -1,12 +1,11 @@
 import styled, { css } from '@emotion/native';
 import { FC } from 'react';
 import { Platform } from 'react-native';
-import { StyleProps } from '../../../types/defaults';
 import { Icon } from '../../atoms/Icon';
 import { disabledInputStyles, InputContainerProps } from '../../atoms/Input';
 import { PressableSurface } from '../../atoms/PressableSurface';
 import { TextProps } from '../../atoms/Text';
-import { hex2rgba } from '@tecsinapse/react-core';
+import { hex2rgba, StyleProps } from '@tecsinapse/react-core';
 
 const isWeb = Platform.OS === 'web';
 

package/src/components/molecules/HintInputContainer/HintInputContainer.tsx

@@ -7,7 +7,6 @@ import {
 } from '@tecsinapse/react-core';
 import { StyleProp, View, ViewStyle } from 'react-native';
 import * as React from 'react';
-import { FC } from 'react';
 
 export interface HintInputContainerProps extends PressableInputContainerProps {
   viewStyle?: StyleProp<ViewStyle>;
@@ -21,7 +20,7 @@ export interface HintInputContainerProps extends PressableInputContainerProps {
   rightComponent?: JSX.Element;
 }
 
-const HintInputContainer: FC<HintInputContainerProps> = ({
+const HintInputContainer: React.FC<HintInputContainerProps> = ({
   viewStyle,
   onPress,
   focused,

package/src/hooks/useTheme.ts

@@ -1,4 +1,4 @@
 import { useTheme as useEmotionTheme } from '@emotion/react';
 import { ThemeProp } from '../types/defaults';
 
-export const useTheme = () => useEmotionTheme() as ThemeProp;
+export const useTheme = (): ThemeProp => useEmotionTheme() as ThemeProp;

package/src/index.ts

@@ -39,6 +39,8 @@ export {
   useInputFocus,
   useMask,
   disabledInputStyles,
+  IMask,
+  IMaskValue,
 } from './components/atoms/Input';
 export { Paper, PaperProps } from './components/atoms/Paper';
 export {

package/src/utils/extractNumbersFromString.ts

@@ -1,2 +1,8 @@
 export const extractNumbersFromString = (value: string): number =>
   Number(value.replace(/[^0-9]/g, ''));
+
+/*
+ * implemented for the case: string numbers start with 0. Example: 012.345.678-91 Example: 012.345.678-91
+ * */
+export const extractDigitsFromString = (value: string): string =>
+  value.replace(/[^0-9]/g, '');

package/src/utils/index.ts

@@ -1,2 +1,5 @@
 export { lightenDarkenColor } from './lightenDarkenColor';
-export { extractNumbersFromString } from './extractNumbersFromString';
+export {
+  extractNumbersFromString,
+  extractDigitsFromString,
+} from './extractNumbersFromString';

package/src/utils/lightenDarkenColor.ts

@@ -1,22 +1,22 @@
 export const lightenDarkenColor = (color: string, variation: number) => {
-  var usePound = false;
+  let usePound = false;
 
   if (color[0] == '#') {
     color = color.slice(1);
     usePound = true;
   }
 
-  var num = parseInt(color, 16);
+  const num = parseInt(color, 16);
 
-  var r = (num >> 16) + variation;
+  let r = (num >> 16) + variation;
   if (r > 255) r = 255;
   else if (r < 0) r = 0;
 
-  var b = ((num >> 8) & 0x00ff) + variation;
+  let b = ((num >> 8) & 0x00ff) + variation;
   if (b > 255) b = 255;
   else if (b < 0) b = 0;
 
-  var g = (num & 0x0000ff) + variation;
+  let g = (num & 0x0000ff) + variation;
   if (g > 255) g = 255;
   else if (g < 0) g = 0;