feat(system): add CopyInput component
This commit is contained in:
parent
db47a0aeb0
commit
9c351dd0d0
|
@ -0,0 +1,5 @@
|
|||
# TextInput
|
||||
|
||||
```tsx
|
||||
import { TextInput } from '@status-im/components'
|
||||
```
|
|
@ -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 }
|
|
@ -0,0 +1,2 @@
|
|||
export type { CopyInputProps } from './copy-input'
|
||||
export { CopyInput } from './copy-input'
|
|
@ -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',
|
||||
},
|
||||
})
|
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue