ilyakooo0/urbit
1
0
Fork 0
mirror of https://github.com/ilyakooo0/urbit.git synced 2025-01-04 13:19:48 +03:00
Code Issues Packages Projects Releases Wiki Activity

imageinput: disable placeholder selection, hide placeholder on focus

Browse Source 
fixes urbit/landscape#893
This commit is contained in:
James Acklin 2021-05-31 20:43:46 -04:00
parent 7ea6c246ce
commit 38b368e861
1 changed files with 16 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
pkg/interface/src/views/components/ImageInput.tsx
View File

@ -1,14 +1,11 @@
import {
BaseInput, Box,
Button,
Icon, Label, Row, StatelessTextInput as Input,
Text
} from '@tlon/indigo-react';
import { useField } from 'formik';
import React, { ReactElement, useCallback, useRef } from 'react';
import React, { ReactElement, useCallback, useRef, useState } from 'react';
import useStorage from '~/logic/lib/useStorage';
export type ImageInputProps = Parameters<typeof Box>[0] & {
@ -17,16 +14,17 @@ export type ImageInputProps = Parameters<typeof Box>[0] & {
placeholder?: string;
};
const prompt = (field, uploading, meta, clickUploadButton) => {
if (!field.value && !uploading && meta.error === undefined) {
const prompt = (field, focus, uploading, meta, clickUploadButton) => {
if (!focus && !field.value && !uploading && meta.error === undefined) {
return (
<Text
color='black'
fontWeight='500'
position='absolute'
left={2}
top={2}
top='6px'
style={{ pointerEvents: 'none' }}
onSelect={e => e.preventDefault}
>
Paste a link here, or{' '}
<Text
@ -62,7 +60,7 @@ const errorRetry = (meta, uploading, clickUploadButton) => {
<Text
position='absolute'
left={2}
top={2}
top='6px'
color='red'
style={{ pointerEvents: 'none' }}
>
@ -111,6 +109,7 @@ export function ImageInput(props: ImageInputProps): ReactElement {
const { id, label, caption } = props;
const { uploadDefault, canUpload, uploading } = useStorage();
const [field, meta, { setValue, setError }] = useField(id);
const [focus, setFocus] = useState(false);
const ref = useRef<HTMLInputElement | null>(null);
const onImageUpload = useCallback(async () => {
@ -135,6 +134,11 @@ export function ImageInput(props: ImageInputProps): ReactElement {
setValue('');
}, []);
const handleBlur = (e) => {
field.onBlur(e);
setFocus(false);
};
return (
<Box display="flex" flexDirection="column" {...props}>
<Label htmlFor={id}>{label}</Label>
@ -144,16 +148,18 @@ export function ImageInput(props: ImageInputProps): ReactElement {
</Label>
) : null}
<Row mt={2} alignItems="flex-end" position='relative' width='100%'>
{prompt(field, uploading, meta, clickUploadButton)}
{prompt(field, focus, uploading, meta, clickUploadButton)}
{clearButton(field, uploading, clearEvt)}
{uploadingStatus(uploading, meta)}
{errorRetry(meta, uploading, clickUploadButton)}
<Box background='white' borderRadius={2} width='100%'>
<Input
{...field}
width='100%'
type={'text'}
onFocus={() => setFocus(true)}
onBlur={e => handleBlur(e)}
hasError={meta.touched && meta.error !== undefined}
{...field}
/>
</Box>
{canUpload && (