diff --git a/apps/website/src/components/table-issues/table-issues.tsx b/apps/website/src/components/table-issues/table-issues.tsx index 03b049b4..933b3be1 100644 --- a/apps/website/src/components/table-issues/table-issues.tsx +++ b/apps/website/src/components/table-issues/table-issues.tsx @@ -1,4 +1,4 @@ -import { useRef, useState } from 'react' +import { useState } from 'react' import { Avatar, Button, Input, Tag, Text } from '@status-im/components' import { ProfileIcon, SearchIcon } from '@status-im/icons' @@ -10,7 +10,6 @@ import { DropdownFilter, DropdownSort, Tabs } from './filters' import type { DropdownFilterProps } from './filters/dropdown-filter' import type { DropdownSortProps } from './filters/dropdown-sort' -import type { TextInput } from 'react-native' const issues = [ { @@ -216,7 +215,6 @@ const sortOptions: DropdownSortProps['data'] = [ const TableIssues = () => { const [issuesSearchText, setIssuesSearchText] = useState('') - const inputRef = useRef(null) const currentBreakpoint = useCurrentBreakpoint() @@ -238,7 +236,6 @@ const TableIssues = () => { onChangeText={setIssuesSearchText} variant="retractable" direction={currentBreakpoint === '2xl' ? 'rtl' : 'ltr'} - ref={inputRef} /> diff --git a/packages/components/src/selectors/checkbox.stories.tsx b/packages/components/src/checkbox/checkbox.stories.tsx similarity index 100% rename from packages/components/src/selectors/checkbox.stories.tsx rename to packages/components/src/checkbox/checkbox.stories.tsx diff --git a/packages/components/src/selectors/checkbox.tsx b/packages/components/src/checkbox/checkbox.tsx similarity index 100% rename from packages/components/src/selectors/checkbox.tsx rename to packages/components/src/checkbox/checkbox.tsx diff --git a/packages/components/src/selectors/index.tsx b/packages/components/src/checkbox/index.tsx similarity index 100% rename from packages/components/src/selectors/index.tsx rename to packages/components/src/checkbox/index.tsx diff --git a/packages/components/src/dropdown-menu/dropdown-menu.tsx b/packages/components/src/dropdown-menu/dropdown-menu.tsx index d9625162..a60cacd7 100644 --- a/packages/components/src/dropdown-menu/dropdown-menu.tsx +++ b/packages/components/src/dropdown-menu/dropdown-menu.tsx @@ -12,7 +12,7 @@ import { import { CheckIcon } from '@status-im/icons' import { Stack, styled } from '@tamagui/core' -import { Checkbox } from '../selectors' +import { Checkbox } from '../checkbox' import { Text } from '../text' interface Props { diff --git a/packages/components/src/index.tsx b/packages/components/src/index.tsx index eee6f435..599bb933 100644 --- a/packages/components/src/index.tsx +++ b/packages/components/src/index.tsx @@ -1,6 +1,7 @@ export * from './anchor-actions' export * from './avatar' export * from './button' +export * from './checkbox' export * from './community' export * from './composer' export * from './context-tag' diff --git a/packages/components/src/input/input.stories.tsx b/packages/components/src/input/input.stories.tsx index acf323c6..8781318c 100644 --- a/packages/components/src/input/input.stories.tsx +++ b/packages/components/src/input/input.stories.tsx @@ -1,11 +1,10 @@ -import { useEffect, useRef, useState } from 'react' +import { useEffect, useState } from 'react' import { SearchIcon } from '@status-im/icons' import { Input } from './input' import type { Meta, StoryObj } from '@storybook/react' -import type { TextInput } from 'react-native' // More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction const meta: Meta = { @@ -19,7 +18,6 @@ type Story = StoryObj export const Primary: Story = { args: { placeholder: 'Type something...', - // children: 'Click me', }, } @@ -56,13 +54,9 @@ const InputSearch = () => { const InputSearchMinimzed = () => { const [value, setValue] = useState('') - const [isMinimized, setIsMinimized] = useState(true) - const inputRef = useRef(null) - return ( <> setIsMinimized(!isMinimized)} placeholder="Please type something..." value={value} onChangeText={setValue} @@ -70,8 +64,7 @@ const InputSearchMinimzed = () => { onClear={() => setValue('')} size={32} direction="rtl" - minimized={isMinimized} - ref={inputRef} + variant="retractable" /> ) @@ -89,7 +82,6 @@ export const WithError: Story = { args: { placeholder: 'Type something...', error: true, - // children: 'Click me', }, } diff --git a/packages/components/src/input/input.tsx b/packages/components/src/input/input.tsx index 5d2c94d9..101eac9e 100644 --- a/packages/components/src/input/input.tsx +++ b/packages/components/src/input/input.tsx @@ -1,5 +1,6 @@ -import { cloneElement, forwardRef, useState } from 'react' +import { cloneElement, forwardRef, useRef, useState } from 'react' +import { composeRefs } from '@radix-ui/react-compose-refs' import { ClearIcon } from '@status-im/icons' import { setupReactNative, Stack, styled } from '@tamagui/core' import { focusableInputHOC } from '@tamagui/focusable' @@ -51,6 +52,8 @@ const _Input = (props: Props, ref: Ref) => { const isRetractable = variant === 'retractable' + const inputRef = useRef(null) + return ( {Boolean(label || endLabel) && ( @@ -80,7 +83,7 @@ const _Input = (props: Props, ref: Ref) => { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore ref is not inferred correctly here - ref?.current?.focus() + inputRef?.current?.focus() } }} > @@ -91,7 +94,7 @@ const _Input = (props: Props, ref: Ref) => { value={value} placeholder={isMinimized && !value ? '' : placeholder} flex={1} - ref={ref} + ref={composeRefs(ref, inputRef)} onBlur={() => { if (!value && isRetractable && !isMinimized) { setIsMinimized(true)