diff --git a/.changeset/thirty-ants-report.md b/.changeset/thirty-ants-report.md new file mode 100644 index 000000000000..36906126e1c4 --- /dev/null +++ b/.changeset/thirty-ants-report.md @@ -0,0 +1,5 @@ +--- +"@ledgerhq/native-ui": patch +--- + +Add new AnimatedInputSelect in DS diff --git a/libs/ui/packages/native/src/components/Form/Input/AnimatedInputSelect/Select.tsx b/libs/ui/packages/native/src/components/Form/Input/AnimatedInputSelect/Select.tsx new file mode 100644 index 000000000000..1b390848531a --- /dev/null +++ b/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)` + 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 ( + + + {text} + + + + ); +}; diff --git a/libs/ui/packages/native/src/components/Form/Input/AnimatedInputSelect/index.tsx b/libs/ui/packages/native/src/components/Form/Input/AnimatedInputSelect/index.tsx new file mode 100644 index 000000000000..90c89d46655b --- /dev/null +++ b/libs/ui/packages/native/src/components/Form/Input/AnimatedInputSelect/index.tsx @@ -0,0 +1,63 @@ +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 interface AnimatedInputProps extends BaseInputType { + selectProps: { + onPressSelect?: () => void; + text: string; + }; + style?: StyleProp; +} + +const AnimatedInputSelect = ( + { selectProps, ...textInputProps }: AnimatedInputProps, + ref?: React.ForwardedRef | 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 ( + ( + + )} + placeholder={placeholder} + onChange={onChange} + {...rest} + /> + ); +}; + +export default React.forwardRef(AnimatedInputSelect); diff --git a/libs/ui/packages/native/storybook/stories/Form/Input/AnimatedInputAndSelect.stories.tsx b/libs/ui/packages/native/storybook/stories/Form/Input/AnimatedInputAndSelect.stories.tsx new file mode 100644 index 000000000000..6670180a31fb --- /dev/null +++ b/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 ( + + ); +}; +AnimatedInputSelectStory.storyName = "AnimatedInputSelect"; + +const AnimatedInputSelectStoryArgs = { + error: "", + disabled: false, + placeholder: "Edit Tag", + selectProps: { + onPressSelect: () => console.log("Select"), + text: "Tag type", + }, +}; +AnimatedInputSelectStory.args = AnimatedInputSelectStoryArgs;