feat: 💄 Add new AnimatedInputSelect in DS

.changeset/thirty-ants-report.md

@@ -0,0 +1,5 @@
+---
+"@ledgerhq/native-ui": patch
+---
+
+Add new AnimatedInputSelect in DS

libs/ui/packages/native/src/components/Form/Input/AnimatedInputSelect/Select.tsx

@@ -0,0 +1,39 @@
+import styled from "styled-components/native";
+import Flex from "../../../Layout/Flex/index";
+import Text from "../../../Text/index";
+
+import ChevronDown from "@ledgerhq/icons-ui/native/ChevronDown";
+import { TouchableOpacity } from "react-native";
+import { BaseStyledProps } from "src/components/styled";
+
+const Container = styled(Flex)<{ color: string }>`
+  border-left-width: 1px;
+  border-left-color: ${(p) => p.color};
+`;
+
+const StyledTouchableOpacity = styled(TouchableOpacity)<BaseStyledProps>`
+  justify-content: space-between;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  height: auto;
+  padding: 15px 0px 15px 15px;
+`;
+
+interface SelectProps {
+  text: string;
+  color: string;
+
+  onPressSelect?: () => void;
+}
+
+export const SelectComponent = ({ text, color, onPressSelect }: SelectProps) => {
+  return (
+    <Container width={"50%"} color={color}>
+      <StyledTouchableOpacity onPress={onPressSelect}>
+        <Text variant="large">{text}</Text>
+        <ChevronDown />
+      </StyledTouchableOpacity>
+    </Container>
+  );
+};

libs/ui/packages/native/src/components/Form/Input/AnimatedInputSelect/index.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { AnimatedInput } from "..";
+import { type InputProps as BaseInputType } from "../BaseInput/index";
+import { useTheme } from "styled-components/native";
+import { StyleProp, ViewStyle, TextInput } from "react-native";
+
+import { useAnimatedInputFocus } from "../AnimatedInput/useAnimatedInputFocus";
+import { getInputStatus, inputStatusColors } from "../AnimatedInput/inputTextColor";
+import { SelectComponent } from "./Select";
+
+export type InputStatus = "default" | "focused" | "filled" | "error";
+export interface AnimatedInputProps extends BaseInputType {
+  selectProps: {
+    onPressSelect?: () => void;
+    text: string;
+  };
+  style?: StyleProp<ViewStyle>;
+}
+
+const AnimatedInputSelect = (
+  { selectProps, ...textInputProps }: AnimatedInputProps,
+  ref?: React.ForwardedRef<TextInput> | null,
+) => {
+  const {
+    placeholder,
+    onFocus: onFocusCallback,
+    onBlur: onBlurCallback,
+    error,
+    value,
+    onChange,
+    ...rest
+  } = textInputProps;
+
+  const { onPressSelect, text } = selectProps;
+
+  const theme = useTheme();
+  const { onFocus, onBlur, focused } = useAnimatedInputFocus({
+    onFocusCallback,
+    onBlurCallback,
+  });
+
+  const inputStatus = getInputStatus({ focused, hasError: !!error, hasValue: !!value });
+
+  return (
+    <AnimatedInput
+      value={value}
+      ref={ref}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      renderRight={() => (
+        <SelectComponent
+          text={text}
+          color={theme ? inputStatusColors[inputStatus]({ theme }) : "neutral.c100"}
+          onPressSelect={onPressSelect}
+        />
+      )}
+      placeholder={placeholder}
+      onChange={onChange}
+      {...rest}
+    />
+  );
+};
+
+export default React.forwardRef(AnimatedInputSelect);

libs/ui/packages/native/storybook/stories/Form/Input/AnimatedInputAndSelect.stories.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import AnimatedInputSelect from "../../../../src/components/Form/Input/AnimatedInputSelect";
+
+export default {
+  title: "Form/Input/AnimatedInputSelect",
+  component: AnimatedInputSelect,
+};
+
+export const AnimatedInputSelectStory = (
+  args: typeof AnimatedInputSelectStoryArgs,
+): JSX.Element => {
+  const [value, setValue] = React.useState("");
+
+  const onChange = (value: string) => setValue(value);
+
+  return (
+    <AnimatedInputSelect
+      error={args.error}
+      disabled={args.disabled}
+      value={value}
+      onChange={onChange}
+      placeholder={args.placeholder}
+      selectProps={args.selectProps}
+    />
+  );
+};
+AnimatedInputSelectStory.storyName = "AnimatedInputSelect";
+
+const AnimatedInputSelectStoryArgs = {
+  error: "",
+  disabled: false,
+  placeholder: "Edit Tag",
+  selectProps: {
+    onPressSelect: () => console.log("Select"),
+    text: "Tag type",
+  },
+};
+AnimatedInputSelectStory.args = AnimatedInputSelectStoryArgs;