@adiraku/react-native-ui 0.2.1 → 0.2.3

package/src/components/BottomSheet/BottomSheet.type.ts

@@ -1,38 +1,38 @@
-import { ReactNode } from 'react';
-
-import type { TextProps, TouchableHighlightProps } from 'react-native';
-
-export interface BottomSheetProps {
-  onDismiss?: () => void;
-
-  sheetHeader?: ReactNode;
-
-  title: string;
-
-  titleProps?: TextProps;
-
-  subtitle?: string;
-
-  subtitleProps?: TextProps;
-
-  isOverlayDismissDisabled?: boolean;
-
-  dismissIcon?: ReactNode;
-
-  dismissIconProps?: TouchableHighlightProps;
-
-  action?: ReactNode;
-
-  largeIcon?: ReactNode;
-
-  largeIconContainerHeight?: number;
-
-  animationType?: 'slide' | 'none' | 'fade';
-
-  children?: ReactNode;
-}
-
-export type BottomSheetRefHandle = {
-  open: () => void;
-  close: () => void;
-};
+import { ReactNode } from 'react';
+
+import type { TextProps, TouchableHighlightProps } from 'react-native';
+
+export interface BottomSheetProps {
+  onDismiss?: () => void;
+
+  sheetHeader?: ReactNode;
+
+  title: string;
+
+  titleProps?: TextProps;
+
+  subtitle?: string;
+
+  subtitleProps?: TextProps;
+
+  isOverlayDismissDisabled?: boolean;
+
+  dismissIcon?: ReactNode;
+
+  dismissIconProps?: TouchableHighlightProps;
+
+  action?: ReactNode;
+
+  largeIcon?: ReactNode;
+
+  largeIconContainerHeight?: number;
+
+  animationType?: 'slide' | 'none' | 'fade';
+
+  children?: ReactNode;
+}
+
+export type BottomSheetRefHandle = {
+  open: () => void;
+  close: () => void;
+};

package/src/components/CheckBoxInput/CheckBoxInput.component.tsx

@@ -1,256 +1,260 @@
-import * as React from 'react';
-import {
-  Animated,
-  FlatList,
-  View,
-  TouchableHighlight,
-  TouchableWithoutFeedback,
-} from 'react-native';
-
-import { getStyle } from './CheckBoxInput.style';
-import { Typography } from '../typography/typography.component';
-import { BottomSheet } from '../BottomSheet/BottomSheet.component';
-import { Button } from '../button/button.component';
-import { Palettes } from '../../themes';
-import { IconChevronDown } from '../../icons';
-import { Divider } from '../Divider/Divider.component';
-
-import type {
-  CheckboxInputProps,
-  CheckboxItemProps,
-  CheckboxItemPropsComponent,
-} from './CheckBoxInput.type';
-import { Checkbox } from '../Checkbox/Checkbox.component';
-
-import type { BottomSheetHandler } from '../BottomSheet/BottomSheet.component';
-import type { LayoutChangeEvent } from 'react-native';
-
-const CheckBoxInput: React.FunctionComponent<CheckboxInputProps> = (props) => {
-  const {
-    value,
-    label,
-    errorMessage,
-    helperMessage,
-    isError,
-    disabled,
-    editable = true,
-    inputIcon = (
-      <IconChevronDown width={14} height={14} fill={Palettes.black[900]} />
-    ),
-    data,
-    onSaveInput = () => {},
-    saveInputLabel,
-    bottomSheetOpt,
-    selectionLimit,
-    onInputDismiss = () => {},
-    customCheckboxInput,
-    customItemSeparator = <Divider />,
-  } = props;
-
-  const [labelWidth, setLabelWidth] = React.useState(0);
-  const [selectedValue, setSelectedValue] = React.useState<
-    CheckboxItemProps[] | undefined
-  >(value);
-
-  const computedStyle = getStyle(props);
-
-  const bottomSheetref = React.useRef<BottomSheetHandler>(null);
-
-  const animation = React.useRef(new Animated.Value(0));
-  const scale = animation.current.interpolate({
-    inputRange: [0, 1],
-    outputRange: [1, 0.8],
-  });
-  const translateY = animation.current.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, -30],
-  });
-  const translateX = animation.current.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, labelWidth * -0.1],
-  });
-
-  const animate = (toValue: 0 | 1) =>
-    Animated.spring(animation.current, {
-      useNativeDriver: true,
-      toValue,
-    }).start();
-
-  const selectedObject = React.useCallback(() => {
-    const labels = value?.map((check) => {
-      const checkbox = data?.find((obj) => {
-        return obj.value === check.value;
-      });
-
-      return checkbox ? checkbox.label : null;
-    });
-
-    return labels?.join(', ');
-  }, [data, value]);
-
-  React.useEffect(() => {
-    if (selectedObject()) {
-      animate(1);
-    } else {
-      animate(0);
-    }
-  }, [selectedObject]);
-
-  React.useEffect(() => {
-    setSelectedValue(value);
-  }, [value]);
-
-  const getLabelWidth = (event: LayoutChangeEvent) => {
-    const { width } = event.nativeEvent.layout;
-    setLabelWidth(width + 24);
-  };
-
-  const onCheckboxItemPress = (checkboxValue: CheckboxItemProps) => {
-    const index = selectedValue?.some(
-      (selected) => selected.value === checkboxValue.value
-    );
-    if (index) {
-      const arr = selectedValue?.filter(
-        (item) => item.value !== checkboxValue.value
-      );
-      setSelectedValue(arr);
-    } else {
-      if (
-        selectionLimit &&
-        selectionLimit > 0 &&
-        selectedValue?.length === selectionLimit
-      ) {
-        let temp = selectedValue;
-        temp.splice(0, 1);
-        setSelectedValue([...(temp || []), checkboxValue]);
-      } else {
-        setSelectedValue([...(selectedValue || []), checkboxValue]);
-      }
-    }
-  };
-
-  const handleOnSaveInput = () => {
-    onSaveInput(selectedValue);
-    onInputDismiss();
-    bottomSheetref.current?.close();
-  };
-
-  const handleOnBottomSheetDismiss = () => {
-    setSelectedValue(value);
-    onInputDismiss();
-  };
-
-  const openBottomSheet = () => {
-    if (!disabled && editable) {
-      bottomSheetref.current?.open();
-    }
-  };
-
-  return (
-    <>
-      <TouchableWithoutFeedback onPress={openBottomSheet}>
-        <View style={computedStyle.fieldWrapper}>
-          <View style={computedStyle.fieldContainer}>
-            <Animated.View
-              style={[
-                computedStyle.labelContainer,
-                {
-                  transform: [{ scale }, { translateY }, { translateX }],
-                },
-              ]}
-              onLayout={getLabelWidth}
-              pointerEvents="none"
-            >
-              <Typography variant="body2" style={computedStyle.label}>
-                {label}
-              </Typography>
-            </Animated.View>
-            <View style={computedStyle.inputWrapper}>
-              <Typography
-                variant="body2"
-                style={[computedStyle.textField]}
-                numberOfLines={1}
-              >
-                {selectedObject()}
-              </Typography>
-              {inputIcon}
-            </View>
-          </View>
-          {errorMessage || helperMessage ? (
-            <Typography variant="caption" style={computedStyle.messageHelper}>
-              {errorMessage || ((!isError && helperMessage) as string)}
-            </Typography>
-          ) : null}
-        </View>
-      </TouchableWithoutFeedback>
-      <BottomSheet
-        ref={bottomSheetref}
-        onDismiss={handleOnBottomSheetDismiss}
-        {...bottomSheetOpt}
-      >
-        <FlatList
-          data={data}
-          renderItem={(item) => {
-            if (customCheckboxInput) {
-              return customCheckboxInput({
-                data: item,
-                selectedValue: selectedValue,
-                onItemPress: onCheckboxItemPress,
-              });
-            }
-
-            return (
-              <CheckboxItem
-                data={item}
-                selectedValue={selectedValue}
-                onItemPress={onCheckboxItemPress}
-              />
-            );
-          }}
-          // eslint-disable-next-line react-native/no-inline-styles
-          contentContainerStyle={{ padding: 16 }}
-          ItemSeparatorComponent={() => customItemSeparator}
-        />
-        {/* eslint-disable-next-line react-native/no-inline-styles */}
-        <View style={{ padding: 16, backgroundColor: 'transparent' }}>
-          <Button
-            variant="primary"
-            label={saveInputLabel}
-            onPress={handleOnSaveInput}
-          />
-        </View>
-      </BottomSheet>
-    </>
-  );
-};
-
-function CheckboxItem({
-  data,
-  selectedValue,
-  onItemPress = () => {},
-}: CheckboxItemPropsComponent) {
-  const { item } = data;
-  const computedStyle = getStyle({} as CheckboxInputProps);
-
-  return (
-    <TouchableHighlight
-      onPress={() => onItemPress(item)}
-      underlayColor={Palettes.whiteDark[100]}
-      disabled={item.disabled}
-    >
-      <View style={[computedStyle.checkboxItemWrapper]}>
-        <Typography variant="body2" numberOfLines={2}>
-          {item?.label}
-        </Typography>
-        <Checkbox
-          selected={
-            !!selectedValue?.some((selected) => selected.value === item.value)
-          }
-          disabled={item.disabled}
-        />
-      </View>
-    </TouchableHighlight>
-  );
-}
-
-export { CheckBoxInput };
+import * as React from 'react';
+import {
+  Animated,
+  FlatList,
+  View,
+  TouchableHighlight,
+  TouchableWithoutFeedback,
+} from 'react-native';
+
+import { getStyle } from './CheckBoxInput.style';
+import { Typography } from '../typography/typography.component';
+import { BottomSheet } from '../BottomSheet/BottomSheet.component';
+import { Button } from '../button/button.component';
+import { Palettes } from '../../themes';
+import { IconChevronDown } from '../../icons';
+import { Divider } from '../Divider/Divider.component';
+
+import type {
+  CheckboxInputProps,
+  CheckboxItemProps,
+  CheckboxItemPropsComponent,
+} from './CheckBoxInput.type';
+import { Checkbox } from '../Checkbox/Checkbox.component';
+
+import type { BottomSheetHandler } from '../BottomSheet/BottomSheet.component';
+import type { LayoutChangeEvent } from 'react-native';
+
+const CheckBoxInput: React.FunctionComponent<CheckboxInputProps> = (props) => {
+  const {
+    value,
+    label,
+    errorMessage,
+    helperMessage,
+    isError,
+    disabled,
+    editable = true,
+    inputIcon = (
+      <IconChevronDown width={14} height={14} fill={Palettes.black[900]} />
+    ),
+    data,
+    onSaveInput = () => {},
+    saveInputLabel,
+    saveInputProps = {},
+    bottomSheetOpt,
+    selectionLimit,
+    onInputDismiss = () => {},
+    customCheckboxInput,
+    customItemSeparator = <Divider />,
+  } = props;
+
+  const [labelWidth, setLabelWidth] = React.useState(0);
+  const [selectedValue, setSelectedValue] = React.useState<
+    CheckboxItemProps[] | undefined
+  >(value);
+
+  const computedStyle = getStyle(props);
+
+  const bottomSheetref = React.useRef<BottomSheetHandler>(null);
+
+  const animation = React.useRef(new Animated.Value(0));
+  const scale = animation.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [1, 0.8],
+  });
+  const translateY = animation.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, -30],
+  });
+  const translateX = animation.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, labelWidth * -0.1],
+  });
+
+  const animate = (toValue: 0 | 1) =>
+    Animated.spring(animation.current, {
+      useNativeDriver: true,
+      toValue,
+    }).start();
+
+  const selectedObject = React.useCallback(() => {
+    const labels = value?.map((check) => {
+      const checkbox = data?.find((obj) => {
+        return obj.value === check.value;
+      });
+
+      return checkbox ? checkbox.label : null;
+    });
+
+    return labels?.join(', ');
+  }, [data, value]);
+
+  React.useEffect(() => {
+    if (selectedObject()) {
+      animate(1);
+    } else {
+      animate(0);
+    }
+  }, [selectedObject]);
+
+  React.useEffect(() => {
+    setSelectedValue(value);
+  }, [value]);
+
+  const getLabelWidth = (event: LayoutChangeEvent) => {
+    const { width } = event.nativeEvent.layout;
+    setLabelWidth(width + 24);
+  };
+
+  const onCheckboxItemPress = (checkboxValue: CheckboxItemProps) => {
+    const index = selectedValue?.some(
+      (selected) => selected.value === checkboxValue.value
+    );
+    if (index) {
+      const arr = selectedValue?.filter(
+        (item) => item.value !== checkboxValue.value
+      );
+      setSelectedValue(arr);
+    } else {
+      if (
+        selectionLimit &&
+        selectionLimit > 0 &&
+        selectedValue?.length === selectionLimit
+      ) {
+        let temp = selectedValue;
+        temp.splice(0, 1);
+        setSelectedValue([...(temp || []), checkboxValue]);
+      } else {
+        setSelectedValue([...(selectedValue || []), checkboxValue]);
+      }
+    }
+  };
+
+  const handleOnSaveInput = () => {
+    onSaveInput(selectedValue);
+    onInputDismiss();
+    bottomSheetref.current?.close();
+  };
+
+  const handleOnBottomSheetDismiss = () => {
+    setSelectedValue(value);
+    onInputDismiss();
+  };
+
+  const openBottomSheet = () => {
+    if (!disabled && editable) {
+      bottomSheetref.current?.open();
+    }
+  };
+
+  return (
+    <>
+      <TouchableWithoutFeedback onPress={openBottomSheet}>
+        <View style={computedStyle.fieldWrapper}>
+          <View style={computedStyle.fieldContainer}>
+            <Animated.View
+              style={[
+                computedStyle.labelContainer,
+                {
+                  transform: [{ scale }, { translateY }, { translateX }],
+                },
+              ]}
+              onLayout={getLabelWidth}
+              pointerEvents="none"
+            >
+              <Typography variant="body2" style={computedStyle.label}>
+                {label}
+              </Typography>
+            </Animated.View>
+            <View style={computedStyle.inputWrapper}>
+              <Typography
+                variant="body2"
+                style={[computedStyle.textField]}
+                numberOfLines={1}
+              >
+                {selectedObject()}
+              </Typography>
+              {inputIcon}
+            </View>
+          </View>
+          {errorMessage || helperMessage ? (
+            <Typography variant="caption" style={computedStyle.messageHelper}>
+              {errorMessage || ((!isError && helperMessage) as string)}
+            </Typography>
+          ) : null}
+        </View>
+      </TouchableWithoutFeedback>
+      <BottomSheet
+        ref={bottomSheetref}
+        onDismiss={handleOnBottomSheetDismiss}
+        {...bottomSheetOpt}
+      >
+        <FlatList
+          data={data}
+          renderItem={(item) => {
+            if (customCheckboxInput) {
+              return customCheckboxInput({
+                data: item,
+                selectedValue: selectedValue,
+                onItemPress: onCheckboxItemPress,
+              });
+            }
+
+            return (
+              <CheckboxItem
+                data={item}
+                selectedValue={selectedValue}
+                onItemPress={onCheckboxItemPress}
+              />
+            );
+          }}
+          // eslint-disable-next-line react-native/no-inline-styles
+          contentContainerStyle={{ padding: 16 }}
+          ItemSeparatorComponent={() => customItemSeparator}
+        />
+        {/* eslint-disable-next-line react-native/no-inline-styles */}
+        <View style={{ padding: 16, backgroundColor: 'transparent' }}>
+          <Button
+            variant="primary"
+            label={saveInputLabel}
+            onPress={handleOnSaveInput}
+            {...saveInputProps}
+          />
+        </View>
+      </BottomSheet>
+    </>
+  );
+};
+
+function CheckboxItem({
+  data,
+  selectedValue,
+  onItemPress = () => {},
+}: CheckboxItemPropsComponent) {
+  const { item } = data;
+  const { label, value, disabled } = item;
+  const computedStyle = getStyle({} as CheckboxInputProps);
+
+  return (
+    <TouchableHighlight
+      onPress={() => onItemPress(item)}
+      underlayColor={Palettes.whiteDark[100]}
+      disabled={disabled}
+      {...item}
+    >
+      <View style={[computedStyle.checkboxItemWrapper]}>
+        <Typography variant="body2" numberOfLines={2}>
+          {label}
+        </Typography>
+        <Checkbox
+          selected={
+            !!selectedValue?.some((selected) => selected.value === value)
+          }
+          disabled={disabled}
+        />
+      </View>
+    </TouchableHighlight>
+  );
+}
+
+export { CheckBoxInput };