lux/explore
2
0
Fork 0
mirror of https://github.com/luxfi/explore.git synced 2026-09-24 00:28:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

tag type, bg and text color fields

Browse Source
This commit is contained in:
tom
2024-05-08 15:54:55 +02:00
parent c18bbc3cab
commit cf5fa8a087
7 changed files with 131 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/publicTags/submit/PublicTagsSubmitForm.tsx
+1 -1
View File
@@ -23,7 +23,7 @@ const PublicTagsSubmitForm = ({ config }: Props) => {
mode: 'onBlur',
defaultValues: {
addresses: [ { hash: '' } ],
tags: [ { name: '', type: 'name', url: undefined, bgColor: undefined, textColor: undefined } ],
tags: [ { name: '', type: { label: 'name', value: 'name' }, url: undefined, bgColor: undefined, textColor: undefined } ],
},
});
ui/publicTags/submit/fields/PublicTagsSubmitFieldTag.tsx
+22 -20
View File
@@ -1,16 +1,18 @@
import { chakra, Flex, FormControl, Grid, GridItem, IconButton, Input, Textarea, useColorModeValue } from '@chakra-ui/react';
import React from 'react';
import type { FieldError, FieldErrorsImpl, Merge, UseFormRegister } from 'react-hook-form';
import { type FieldError, type FieldErrorsImpl, type Merge, type UseFormRegister } from 'react-hook-form';
import type { FormFields, FormFieldTag } from '../types';
import type { PublicTagType } from 'types/api/addressMetadata';
import useIsMobile from 'lib/hooks/useIsMobile';
import { validator as urlValidator } from 'lib/validations/url';
import FancySelect from 'ui/shared/FancySelect/FancySelect';
import IconSvg from 'ui/shared/IconSvg';
import InputPlaceholder from 'ui/shared/InputPlaceholder';
import PublicTagsSubmitFieldTagColor from './PublicTagsSubmitFieldTagColor';
import PublicTagsSubmitFieldTagType from './PublicTagsSubmitFieldTagType';
interface Props {
index: number;
tagTypes: Array<PublicTagType> | undefined;
@@ -24,7 +26,7 @@ interface Props {
const PublicTagsSubmitFieldTag = ({ index, isDisabled, register, errors, onAddClick, onRemoveClick, tagTypes }: Props) => {
const isMobile = useIsMobile();
const bgColorDefault = useColorModeValue('blackAlpha.50', 'whiteAlpha.100');
const inputBgColor = useColorModeValue('white', 'gray.900');
const inputBgColor = useColorModeValue('white', 'black');
const handleAddClick = React.useCallback(() => {
onAddClick?.(index);
@@ -34,11 +36,6 @@ const PublicTagsSubmitFieldTag = ({ index, isDisabled, register, errors, onAddCl
onRemoveClick?.(index);
}, [ index, onRemoveClick ]);
const typeOptions = React.useMemo(() => tagTypes?.map((type) => ({
value: type.type,
label: type.type,
})), [ tagTypes ]);
return (
<>
<GridItem colSpan={{ base: 1, lg: 2 }} p="10px" borderRadius="base" bgColor={ bgColorDefault }>
@@ -60,16 +57,7 @@ const PublicTagsSubmitFieldTag = ({ index, isDisabled, register, errors, onAddCl
</FormControl>
</GridItem>
<GridItem colSpan={{ base: 1, lg: 2 }}>
<FancySelect
{ ...register(`tags.${ index }.type`) }
options={ typeOptions }
size={ isMobile ? 'md' : 'lg' }
placeholder="Tag type"
isDisabled={ isDisabled }
isRequired
isAsync={ false }
bgColor={ inputBgColor }
/>
<PublicTagsSubmitFieldTagType index={ index } tagTypes={ tagTypes } isDisabled={ isDisabled }/>
</GridItem>
<GridItem colSpan={{ base: 1, lg: 2 }}>
<FormControl variant="floating" size={{ base: 'md', lg: 'lg' }}>
@@ -83,8 +71,22 @@ const PublicTagsSubmitFieldTag = ({ index, isDisabled, register, errors, onAddCl
<InputPlaceholder text="Label URL" error={ errors?.url }/>
</FormControl>
</GridItem>
<chakra.div bgColor="blue.100" h={ 20 }/>
<chakra.div bgColor="blue.100" h={ 20 }/>
<PublicTagsSubmitFieldTagColor
fieldName="bgColor"
placeholder="Background color"
index={ index }
register={ register }
errors={ errors }
isDisabled={ isDisabled }
/>
<PublicTagsSubmitFieldTagColor
fieldName="textColor"
placeholder="Text color"
index={ index }
register={ register }
errors={ errors }
isDisabled={ isDisabled }
/>
<GridItem colSpan={{ base: 1, lg: 4 }}>
<FormControl variant="floating" size={{ base: 'md', lg: 'lg' }}>
<Textarea
ui/publicTags/submit/fields/PublicTagsSubmitFieldTagColor.tsx
+35
View File
@@ -0,0 +1,35 @@
import { FormControl, Input, useColorModeValue } from '@chakra-ui/react';
import React from 'react';
import type { FieldError, FieldErrorsImpl, Merge, UseFormRegister } from 'react-hook-form';
import type { FormFieldTag, FormFields } from '../types';
import InputPlaceholder from 'ui/shared/InputPlaceholder';
interface Props {
fieldName: 'textColor' | 'bgColor';
index: number;
isDisabled: boolean;
register: UseFormRegister<FormFields>;
errors: Merge<FieldError, FieldErrorsImpl<FormFieldTag>> | undefined;
placeholder: string;
}
const PublicTagsSubmitFieldTagColor = ({ index, isDisabled, register, errors, fieldName, placeholder }: Props) => {
const inputBgColor = useColorModeValue('white', 'black');
return (
<FormControl variant="floating" size={{ base: 'md', lg: 'lg' }}>
<Input
{ ...register(`tags.${ index }.${ fieldName }`) }
isInvalid={ Boolean(errors?.[fieldName]) }
isDisabled={ isDisabled }
autoComplete="off"
bgColor={ inputBgColor }
/>
<InputPlaceholder text={ placeholder } error={ errors?.[fieldName] }/>
</FormControl>
);
};
export default React.memo(PublicTagsSubmitFieldTagColor);
ui/publicTags/submit/fields/PublicTagsSubmitFieldTagType.tsx
+58
View File
@@ -0,0 +1,58 @@
import { FormControl, useColorModeValue } from '@chakra-ui/react';
import React from 'react';
import type { ControllerRenderProps } from 'react-hook-form';
import { Controller, useFormContext } from 'react-hook-form';
import type { FormFields } from '../types';
import type { PublicTagType } from 'types/api/addressMetadata';
import useIsMobile from 'lib/hooks/useIsMobile';
import FancySelect from 'ui/shared/FancySelect/FancySelect';
interface Props {
index: number;
tagTypes: Array<PublicTagType> | undefined;
isDisabled: boolean;
}
const PublicTagsSubmitFieldTagType = ({ index, tagTypes, isDisabled }: Props) => {
const isMobile = useIsMobile();
const { control } = useFormContext<FormFields>();
const inputBgColor = useColorModeValue('white', 'black');
const typeOptions = React.useMemo(() => tagTypes?.map((type) => ({
value: type.type,
label: type.type,
})), [ tagTypes ]);
const renderControl = React.useCallback(({ field }: { field: ControllerRenderProps<FormFields, `tags.${ number }.type`> }) => {
return (
<FormControl variant="floating" id={ field.name } isRequired size={{ base: 'md', lg: 'lg' }}>
<FancySelect
{ ...field }
options={ typeOptions }
size={ isMobile ? 'md' : 'lg' }
placeholder="Tag type"
isDisabled={ isDisabled }
isRequired
isAsync={ false }
formControlStyles={{
bgColor: inputBgColor,
borderRadius: 'base',
}}
/>
</FormControl>
);
}, [ inputBgColor, isDisabled, isMobile, typeOptions ]);
return (
<Controller
name={ `tags.${ index }.type` }
control={ control }
render={ renderControl }
rules={{ required: true }}
/>
);
};
export default React.memo(PublicTagsSubmitFieldTagType);
ui/publicTags/submit/fields/PublicTagsSubmitFieldTags.tsx
+8 -1
View File
@@ -22,7 +22,14 @@ const PublicTagsSubmitFieldTags = ({ tagTypes }: Props) => {
const isDisabled = formState.isSubmitting;
const handleAddFieldClick = React.useCallback((index: number) => {
insert(index + 1, { name: '', type: 'name', url: undefined, bgColor: undefined, textColor: undefined, tooltipDescription: undefined });
insert(index + 1, {
name: '',
type: { label: 'name', value: 'name' },
url: undefined,
bgColor: undefined,
textColor: undefined,
tooltipDescription: undefined,
});
}, [ insert ]);
const handleRemoveFieldClick = React.useCallback((index: number) => {
ui/publicTags/submit/types.ts
+4 -1
View File
@@ -10,7 +10,10 @@ export interface FormFields {
export interface FormFieldTag {
name: string;
type: AddressMetadataTagType;
type: {
label: string;
value: AddressMetadataTagType;
};
url: string | undefined;
bgColor: string | undefined;
textColor: string | undefined;
ui/shared/FancySelect/FancySelect.tsx
+3
View File
@@ -1,3 +1,4 @@
import type { ChakraProps } from '@chakra-ui/react';
import { FormControl, useToken, useColorMode } from '@chakra-ui/react';
import type { CSSObjectWithLabel, GroupBase, SingleValue, MultiValue, AsyncProps, Props as SelectProps } from 'chakra-react-select';
import { Select, AsyncSelect } from 'chakra-react-select';
@@ -12,6 +13,7 @@ import InputPlaceholder from 'ui/shared/InputPlaceholder';
interface CommonProps {
error?: Merge<FieldError, FieldErrorsImpl<Option>> | undefined;
placeholderIcon?: React.ReactNode;
formControlStyles?: ChakraProps;
}
interface RegularSelectProps extends SelectProps<Option, boolean, GroupBase<Option>>, CommonProps {
@@ -47,6 +49,7 @@ const FancySelect = (props: Props, ref: React.LegacyRef<HTMLDivElement>) => {
{ ...(props.error ? { 'aria-invalid': true } : {}) }
{ ...(props.isDisabled ? { 'aria-disabled': true } : {}) }
{ ...(props.value ? { 'data-active': true } : {}) }
{ ...props.formControlStyles }
>
<SelectComponent
{ ...props }