@adiraku/react-native-ui 1.2.3-snapshot.4 → 1.2.3-snapshot.6

package/src/components/RadioInput/RadioInput.component.tsx

@@ -1,243 +1,243 @@
-import * as React from 'react';
-import {
-  Animated,
-  FlatList,
-  TouchableHighlight,
-  TouchableWithoutFeedback,
-  View,
-} from 'react-native';
-
-import { getStyle } from './RadioInput.style';
-import { Palettes } from '../../themes';
-import { IconChevronDown } from '../../icons';
-import { Button } from '../button/button.component';
-import { Typography } from '../typography/typography.component';
-import { BottomSheet } from '../BottomSheet/BottomSheet.component';
-import { RadioButton } from '../RadioButton/RadioButton.component';
-import { Divider } from '../Divider/Divider.component';
-
-import type { LayoutChangeEvent } from 'react-native';
-import type {
-  RadioInputProps,
-  RadioItemProps,
-  RadioItemPropsComponent,
-} from './RadioInput.type';
-
-const RadioInput: React.FunctionComponent<RadioInputProps> = (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,
-    onInputDismiss = () => {},
-    customRadioInput,
-    customItemSeparator = <Divider />,
-    testID,
-    ...rest
-  } = props;
-
-  const [labelWidth, setLabelWidth] = React.useState(0);
-  // const [inputVisibility, setInputVisibility] = React.useState(false);
-  const [selectedValue, setSelectedValue] = React.useState(value);
-
-  const computedStyle = getStyle(props);
-
-  type BottomSheetHandler = React.ElementRef<typeof BottomSheet>;
-  const ref = 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(() => {
-    return data?.find((obj) => {
-      return obj.value === value?.value;
-    })?.label;
-  }, [data, value]);
-
-  React.useEffect(() => {
-    if (selectedObject()) {
-      animate(1);
-    } else {
-      animate(0);
-    }
-  }, [selectedObject, value]);
-
-  React.useEffect(() => {
-    setSelectedValue(value);
-  }, [value]);
-
-  const getLabelWidth = (event: LayoutChangeEvent) => {
-    const { width } = event.nativeEvent.layout;
-    setLabelWidth(width + 24);
-  };
-
-  const onRadioItemPress = (radioValue: RadioItemProps) => {
-    if (selectedValue?.value !== radioValue?.value) {
-      setSelectedValue(radioValue);
-    }
-  };
-
-  const handleOnSaveInput = () => {
-    onSaveInput(selectedValue);
-    ref.current?.close();
-  };
-
-  const handleOnBottomSheetDismiss = () => {
-    onInputDismiss();
-    setSelectedValue(value);
-  };
-
-  const openBottomSheet = () => {
-    if (!disabled && editable) {
-      ref.current?.open();
-    }
-  };
-
-  return (
-    <>
-      <TouchableWithoutFeedback
-        onPress={openBottomSheet}
-        testID={testID}
-        {...rest}
-      >
-        <View style={computedStyle.fieldWrapper}>
-          <View style={computedStyle.fieldContainer}>
-            {!!label && (
-              <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 && inputIcon}
-            </View>
-          </View>
-          {errorMessage || helperMessage ? (
-            <Typography variant="caption" style={computedStyle.messageHelper}>
-              {errorMessage || ((!isError && helperMessage) as string)}
-            </Typography>
-          ) : null}
-        </View>
-      </TouchableWithoutFeedback>
-      <BottomSheet
-        onDismiss={handleOnBottomSheetDismiss}
-        ref={ref}
-        {...bottomSheetOpt}
-      >
-        <FlatList
-          data={data}
-          renderItem={(item) => {
-            if (customRadioInput) {
-              return customRadioInput({
-                data: item,
-                selectedValue: selectedValue,
-                onItemPress: onRadioItemPress,
-              });
-            }
-
-            return (
-              <RadioItem
-                data={item}
-                selectedValue={selectedValue}
-                onItemPress={onRadioItemPress}
-                testID={`${testID}_item_radio_${item.index}`}
-              />
-            );
-          }}
-          // 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 RadioItem({
-  data,
-  selectedValue,
-  onItemPress = () => {},
-  testID,
-  ...rest
-}: RadioItemPropsComponent) {
-  const { item } = data;
-  const { label, value, disabled } = item;
-  const computedStyle = getStyle({} as RadioInputProps);
-
-  return (
-    <TouchableHighlight
-      onPress={() => onItemPress(item)}
-      underlayColor={Palettes.whiteDark[100]}
-      disabled={disabled}
-      {...rest}
-      {...item}
-    >
-      <View style={[computedStyle.radioItemWrapper]}>
-        <Typography variant="body2" numberOfLines={2}>
-          {label}
-        </Typography>
-        <RadioButton
-          selected={value === selectedValue?.value}
-          disabled={disabled}
-          testID={testID}
-        />
-      </View>
-    </TouchableHighlight>
-  );
-}
-
-export { RadioInput };
+import * as React from 'react';
+import {
+  Animated,
+  FlatList,
+  TouchableHighlight,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+
+import { getStyle } from './RadioInput.style';
+import { Palettes } from '../../themes';
+import { IconChevronDown } from '../../icons';
+import { Button } from '../button/button.component';
+import { Typography } from '../typography/typography.component';
+import { BottomSheet } from '../BottomSheet/BottomSheet.component';
+import { RadioButton } from '../RadioButton/RadioButton.component';
+import { Divider } from '../Divider/Divider.component';
+
+import type { LayoutChangeEvent } from 'react-native';
+import type {
+  RadioInputProps,
+  RadioItemProps,
+  RadioItemPropsComponent,
+} from './RadioInput.type';
+
+const RadioInput: React.FunctionComponent<RadioInputProps> = (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,
+    onInputDismiss = () => {},
+    customRadioInput,
+    customItemSeparator = <Divider />,
+    testID,
+    ...rest
+  } = props;
+
+  const [labelWidth, setLabelWidth] = React.useState(0);
+  // const [inputVisibility, setInputVisibility] = React.useState(false);
+  const [selectedValue, setSelectedValue] = React.useState(value);
+
+  const computedStyle = getStyle(props);
+
+  type BottomSheetHandler = React.ElementRef<typeof BottomSheet>;
+  const ref = 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(() => {
+    return data?.find((obj) => {
+      return obj.value === value?.value;
+    })?.label;
+  }, [data, value]);
+
+  React.useEffect(() => {
+    if (selectedObject()) {
+      animate(1);
+    } else {
+      animate(0);
+    }
+  }, [selectedObject, value]);
+
+  React.useEffect(() => {
+    setSelectedValue(value);
+  }, [value]);
+
+  const getLabelWidth = (event: LayoutChangeEvent) => {
+    const { width } = event.nativeEvent.layout;
+    setLabelWidth(width + 24);
+  };
+
+  const onRadioItemPress = (radioValue: RadioItemProps) => {
+    if (selectedValue?.value !== radioValue?.value) {
+      setSelectedValue(radioValue);
+    }
+  };
+
+  const handleOnSaveInput = () => {
+    onSaveInput(selectedValue);
+    ref.current?.close();
+  };
+
+  const handleOnBottomSheetDismiss = () => {
+    onInputDismiss();
+    setSelectedValue(value);
+  };
+
+  const openBottomSheet = () => {
+    if (!disabled && editable) {
+      ref.current?.open();
+    }
+  };
+
+  return (
+    <>
+      <TouchableWithoutFeedback
+        onPress={openBottomSheet}
+        testID={testID}
+        {...rest}
+      >
+        <View style={computedStyle.fieldWrapper}>
+          <View style={computedStyle.fieldContainer}>
+            {!!label && (
+              <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 && inputIcon}
+            </View>
+          </View>
+          {errorMessage || helperMessage ? (
+            <Typography variant="caption" style={computedStyle.messageHelper}>
+              {errorMessage || ((!isError && helperMessage) as string)}
+            </Typography>
+          ) : null}
+        </View>
+      </TouchableWithoutFeedback>
+      <BottomSheet
+        onDismiss={handleOnBottomSheetDismiss}
+        ref={ref}
+        {...bottomSheetOpt}
+      >
+        <FlatList
+          data={data}
+          renderItem={(item) => {
+            if (customRadioInput) {
+              return customRadioInput({
+                data: item,
+                selectedValue: selectedValue,
+                onItemPress: onRadioItemPress,
+              });
+            }
+
+            return (
+              <RadioItem
+                data={item}
+                selectedValue={selectedValue}
+                onItemPress={onRadioItemPress}
+                testID={`${testID}_item_radio_${item.index}`}
+              />
+            );
+          }}
+          // 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 RadioItem({
+  data,
+  selectedValue,
+  onItemPress = () => {},
+  testID,
+  ...rest
+}: RadioItemPropsComponent) {
+  const { item } = data;
+  const { label, value, disabled } = item;
+  const computedStyle = getStyle({} as RadioInputProps);
+
+  return (
+    <TouchableHighlight
+      onPress={() => onItemPress(item)}
+      underlayColor={Palettes.whiteDark[100]}
+      disabled={disabled}
+      {...rest}
+      {...item}
+    >
+      <View style={[computedStyle.radioItemWrapper]}>
+        <Typography variant="body2" numberOfLines={2}>
+          {label}
+        </Typography>
+        <RadioButton
+          selected={value === selectedValue?.value}
+          disabled={disabled}
+          testID={testID}
+        />
+      </View>
+    </TouchableHighlight>
+  );
+}
+
+export { RadioInput };