feat(system): add CopyInput component

This commit is contained in:
Pavel Prichodko 2022-04-06 14:05:04 +02:00
parent db47a0aeb0
commit 9c351dd0d0
No known key found for this signature in database
GPG Key ID: 0EB8D75C775AB6F1
5 changed files with 75 additions and 0 deletions

View File

@ -0,0 +1,5 @@
# TextInput
```tsx
import { TextInput } from '@status-im/components'
```

View File

@ -0,0 +1,44 @@
import React, { forwardRef, useRef } from 'react'
import { composeRefs } from '@radix-ui/react-compose-refs'
import { TextInput } from '../text-input'
import { CopyButton, Wrapper } from './styles'
import type { Ref } from 'react'
interface Props {
value: string
label?: string
}
const CopyInput = (props: Props, ref: Ref<HTMLInputElement>) => {
const { value, label } = props
const inputRef = useRef<HTMLInputElement>(null)
const handleCopy = () => {
navigator.clipboard.writeText(value)
inputRef.current?.select()
}
return (
<Wrapper>
<TextInput
ref={composeRefs(inputRef, ref)}
readOnly
defaultValue={value}
onClick={() => inputRef.current?.select()}
label={label}
/>
<CopyButton type="button" onClick={handleCopy}>
Copy
</CopyButton>
</Wrapper>
)
}
const _CopyInput = forwardRef(CopyInput)
export { _CopyInput as CopyInput }
export type { Props as CopyInputProps }

View File

@ -0,0 +1,2 @@
export type { CopyInputProps } from './copy-input'
export { CopyInput } from './copy-input'

View File

@ -0,0 +1,23 @@
import { styled } from '~/src/styles/config'
export const Wrapper = styled('div', {
position: 'relative',
})
export const CopyButton = styled('button', {
fontFamily: '$sans',
position: 'absolute',
right: 8,
bottom: 8,
fontSize: 12,
lineHeight: 1.2,
borderRadius: '$8',
padding: '6px 12px',
background: '$primary-3',
color: '$primary-1',
border: '1px solid $primary-1',
'&:hover': {
background: '$primary-2',
},
})

View File

@ -2,6 +2,7 @@ export { Avatar } from './avatar'
export { Box } from './box'
export { Button } from './button'
export { ContextMenu, ContextMenuTrigger } from './context-menu'
export { CopyInput } from './copy-input'
export {
AlertDialog,
AlertDialogTrigger,