@tecsinapse/react-native-kit 1.18.5 → 1.20.0

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

@@ -0,0 +1,46 @@
+import {
+  FontColor,
+  FontWeight,
+  LabelPositionOptions,
+} from '@tecsinapse/react-core';
+import React, { FC } from 'react';
+import { Pressable, PressableProps } from 'react-native';
+import { TextNativeProps } from '../../atoms/Text';
+import { StyledLabel } from './styled';
+
+export interface LabelComponentProps extends PressableProps {
+  label: string;
+  labelPosition: LabelPositionOptions;
+  labelProps?: TextNativeProps;
+  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.tsx

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

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

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

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

@@ -0,0 +1,27 @@
+import styled, { css } from '@emotion/native';
+import { LabelPositionOptions, StyleProps } from '@tecsinapse/react-core';
+import { View } from 'react-native';
+import { Text } from '../../atoms/Text';
+
+export const StyledView = styled(View)`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+
+export const StyledLabel = styled(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/molecules/Select/Modal.tsx

@@ -31,7 +31,6 @@ const Component = <Data, Type extends 'single' | 'multi'>({
   options,
   keyExtractor,
   labelExtractor,
-  groupKeyExtractor,
   hideSearchBar,
   searchBarPlaceholder,
   focused,
@@ -63,39 +62,49 @@ const Component = <Data, Type extends 'single' | 'multi'>({
     );
   }, [value, focused, setSelectedValues]);
 
-  const getData = React.useCallback((options: Data[]) => {
-    return options?.map((option, index) => ({
-      ...option,
-      _checked:
-        type === 'multi'
-          ? !!selectedValues.find(
-              value => keyExtractor(option, index) == keyExtractor(value, index)
-            )
-          : keyExtractor((selectedValues[0] || {}) as Data, index) ==
-            keyExtractor(option, index),
-    }));
-  }, [keyExtractor, selectedValues, type])
-
-  const data = React.useMemo(() => typeof options !== 'function' ? getData(options) : [], [options, getData]);
-
-  const handlePressItem = React.useCallback((option: Data) => {
-    setSelectedValues(selectedValues => {
-      if (type === 'multi') {
-        const newArr: Data[] = [];
-        let found = false;
-        for (const value of selectedValues) {
-          if (keyExtractor(value) != keyExtractor(option)) newArr.push(value);
-          else found = true;
+  const getData = React.useCallback(
+    (options: Data[]) => {
+      return options?.map((option, index) => ({
+        ...option,
+        _checked:
+          type === 'multi'
+            ? !!selectedValues.find(
+                value =>
+                  keyExtractor(option, index) == keyExtractor(value, index)
+              )
+            : keyExtractor((selectedValues[0] || {}) as Data, index) ==
+              keyExtractor(option, index),
+      }));
+    },
+    [keyExtractor, selectedValues, type]
+  );
+
+  const data = React.useMemo(
+    () => (typeof options !== 'function' ? getData(options) : []),
+    [options, getData]
+  );
+
+  const handlePressItem = React.useCallback(
+    (option: Data) => {
+      setSelectedValues(selectedValues => {
+        if (type === 'multi') {
+          const newArr: Data[] = [];
+          let found = false;
+          for (const value of selectedValues) {
+            if (keyExtractor(value) != keyExtractor(option)) newArr.push(value);
+            else found = true;
+          }
+          if (!found) newArr.push(option);
+          return newArr;
         }
-        if (!found) newArr.push(option);
-        return newArr;
-      }
-      return keyExtractor((selectedValues[0] || {}) as Data) ===
-        keyExtractor(option)
-        ? []
-        : [option];
-    });
-  }, [selectedValues, setSelectedValues, keyExtractor, type])
+        return keyExtractor((selectedValues[0] || {}) as Data) ===
+          keyExtractor(option)
+          ? []
+          : [option];
+      });
+    },
+    [selectedValues, setSelectedValues, keyExtractor, type]
+  );
 
   React.useEffect(() => {
     if (_closeOnPick && selectedValues[0] && selectedValues[0] !== value) {
@@ -109,29 +118,35 @@ const Component = <Data, Type extends 'single' | 'multi'>({
     onSelect(
       (type === 'single' ? selectedValues[0] : selectedValues) as OnSelectArg
     );
-    close?.()
+    close?.();
   }, [selectedValues]);
 
-  const optionBuilder = React.useCallback(({ item }: ListRenderItemInfo<Data & { _checked: boolean }>) => (
-    <MemoizedOption
-      item={item}
-      type={type}
-      handlePressItem={handlePressItem}
-      labelExtractor={labelExtractor}
-    />
-  ), [])
-
-  const anyChecked = data.filter(item => item._checked).length
-  const dataLengthChanged = data.length
-
-  const memoizedFlatlist = React.useMemo(() => (
-    <FlatList
-      data={data}
-      keyExtractor={keyExtractor}
-      fadingEdgeLength={200}
-      renderItem={optionBuilder}
-    />
-  ), [selectedValues, anyChecked, dataLengthChanged])
+  const optionBuilder = React.useCallback(
+    ({ item }: ListRenderItemInfo<Data & { _checked: boolean }>) => (
+      <MemoizedOption
+        item={item}
+        type={type}
+        handlePressItem={handlePressItem}
+        labelExtractor={labelExtractor}
+      />
+    ),
+    []
+  );
+
+  const anyChecked = data.filter(item => item._checked).length;
+  const dataLengthChanged = data.length;
+
+  const memoizedFlatlist = React.useMemo(
+    () => (
+      <FlatList
+        data={data}
+        keyExtractor={keyExtractor}
+        fadingEdgeLength={200}
+        renderItem={optionBuilder}
+      />
+    ),
+    [selectedValues, anyChecked, dataLengthChanged]
+  );
 
   const titleTextModal = selectModalTitle ? (
     <TextTitleModal
@@ -180,9 +195,10 @@ const Component = <Data, Type extends 'single' | 'multi'>({
         <FetchIndicator animating={true} color={'grey'} size={'large'} />
       )}
 
-        {memoizedFlatlist}
+      {memoizedFlatlist}
 
-        { !_closeOnPick && <ModalFooter>
+      {!_closeOnPick && (
+        <ModalFooter>
           <Button
             variant={'filled'}
             color={'primary'}
@@ -193,21 +209,27 @@ const Component = <Data, Type extends 'single' | 'multi'>({
               {confirmButtonText}
             </Text>
           </Button>
-        </ModalFooter>}
+        </ModalFooter>
+      )}
     </ModalView>
   );
 };
 
 interface IOption<T> {
-  item: T & { _checked: boolean }
-  type: 'single' | 'multi'
-  labelExtractor: (option: T) => string
-  handlePressItem: (option: T) => void
+  item: T & { _checked: boolean };
+  type: 'single' | 'multi';
+  labelExtractor: (option: T) => string;
+  handlePressItem: (option: T) => void;
 }
 
-const MemoizedOption: React.FC<IOption<any>> = ({ handlePressItem, labelExtractor, item, type }) => {
+const MemoizedOption = <T,>({
+  handlePressItem,
+  labelExtractor,
+  item,
+  type,
+}: IOption<T>): JSX.Element => {
   return React.useMemo(() => {
-    const label = labelExtractor(item)
+    const label = labelExtractor(item);
     return (
       <ListItem onPress={() => handlePressItem(item)}>
         <View pointerEvents={'none'}>
@@ -234,8 +256,8 @@ const MemoizedOption: React.FC<IOption<any>> = ({ handlePressItem, labelExtracto
           )}
         </View>
       </ListItem>
-    )
-  }, [item._checked])
-}
+    );
+  }, [item._checked]);
+};
 
 export const Modal = Component;

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

@@ -165,7 +165,7 @@ function Select<Data, Type extends 'single' | 'multi'>({
     if (Array.isArray(value)) {
       if (value.length === 0) return _placeholder;
       else {
-        let options =
+        const options =
           selectOptions.length > 0 ? selectOptions : (value as Data[]);
         return options
           ?.reduce(
@@ -180,7 +180,7 @@ function Select<Data, Type extends 'single' | 'multi'>({
           .slice(0, -2);
       }
     } else {
-      if (value === undefined) return _placeholder;
+      if (!value) return _placeholder;
       const selectedOption = selectOptions?.find(
         (option, index) =>
           keyExtractor(option, index) == keyExtractor(value as Data, index)

package/src/index.ts

@@ -1,33 +1,39 @@
 export * from '@tecsinapse/react-core';
-export { Header, HeaderProps } from './components/atoms/Header';
-export { Select, SelectNativeProps } from './components/molecules/Select';
-export { Input, InputNativeProps } from './components/atoms/Input';
-export { InputMask, InputMaskNativeProps } from './components/atoms/InputMask';
-export { TextArea, TextAreaProps } from './components/atoms/TextArea';
-export { Text, TextNativeProps } from './components/atoms/Text';
+export { Avatar } from './components/atoms/Avatar';
+export { Badge, BadgeNativeProps } from './components/atoms/Badge';
 export {
+  BottomNavigator,
+  BottomNavigatorProps,
+} from './components/atoms/BottomNavigator';
+export {
+  Button,
+  ButtonNativeProps,
   Error,
   Loading,
   Success,
-  Button,
-  ButtonNativeProps,
 } from './components/atoms/Button';
 export { GroupButtonOption } from './components/atoms/GroupButton';
+export { Header, HeaderProps } from './components/atoms/Header';
+export { Input, InputNativeProps } from './components/atoms/Input';
+export { InputMask, InputMaskNativeProps } from './components/atoms/InputMask';
 export {
-  InputPassword,
-  InputPasswordNativeProps,
-} from './components/molecules/InputPassword';
-export {
-  BottomNavigator,
-  BottomNavigatorProps,
-} from './components/atoms/BottomNavigator';
-export { Tag, TagProps } from './components/atoms/Tag';
+  IBaseModal,
+  ModalGroupManager,
+  ModalLifecycleHandler,
+  ModalView,
+  useLazyModalManager,
+  useModalManager,
+  useModalRemoteControl,
+} from './components/atoms/Modal';
+export { Skeleton, SkeletonProps } from './components/atoms/Skeleton';
 export {
   SnappingSlider,
   SnappingSliderProps,
 } from './components/atoms/SnappingSlider';
-export { Badge, BadgeNativeProps } from './components/atoms/Badge';
-export { Snackbar, SnackbarNativeProps } from './components/molecules/Snackbar';
+export { Tag, TagProps } from './components/atoms/Tag';
+export { Text, TextNativeProps } from './components/atoms/Text';
+export { TextArea, TextAreaProps } from './components/atoms/TextArea';
+export { Calendar } from './components/molecules/Calendar';
 export {
   DatePicker,
   NativeDatePickerProps,
@@ -36,16 +42,19 @@ export {
   DateTimePicker,
   NativeDateTimePickerProps,
 } from './components/molecules/DateTimePicker';
-export { Avatar } from './components/atoms/Avatar';
-export { Calendar } from './components/molecules/Calendar';
 export { DateTimeSelector } from './components/molecules/DateTimeSelector';
 export {
-  ModalGroupManager,
-  ModalView,
-  ModalLifecycleHandler,
-  useLazyModalManager,
-  useModalManager,
-  useModalRemoteControl,
-  IBaseModal,
-} from './components/atoms/Modal';
-export { Skeleton, SkeletonProps } from './components/atoms/Skeleton';
+  IconTextButton,
+  NativeIconTextButtonProps,
+} from './components/molecules/IconTextButton';
+export {
+  InputPassword,
+  InputPasswordNativeProps,
+} from './components/molecules/InputPassword';
+export {
+  LabeledSwitch,
+  LabeledSwitchNativeProps,
+} from './components/molecules/LabeledSwitch';
+export { Select, SelectNativeProps } from './components/molecules/Select';
+export { Snackbar, SnackbarNativeProps } from './components/molecules/Snackbar';
+export { Grid, GridItem } from './components/molecules/Grid';