chore(ui): add initialOptions prop in tag suggestion component (#14085)

* chore(ui): add initialData prop in tag suggestion component

* address comment
This commit is contained in:
Sachin Chaurasiya 2023-11-23 18:46:25 +05:30 committed by GitHub
parent c95de19a09
commit 631145d090
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 9 additions and 5 deletions

View File

@ -28,7 +28,7 @@ export interface AsyncSelectListProps {
placeholder?: string; placeholder?: string;
debounceTimeout?: number; debounceTimeout?: number;
defaultValue?: string[]; defaultValue?: string[];
initialData?: SelectOption[]; initialOptions?: SelectOption[];
onChange?: (option: DefaultOptionType | DefaultOptionType[]) => void; onChange?: (option: DefaultOptionType | DefaultOptionType[]) => void;
fetchOptions: ( fetchOptions: (
search: string, search: string,

View File

@ -42,7 +42,7 @@ const AsyncSelectList: FC<AsyncSelectListProps> = ({
onChange, onChange,
fetchOptions, fetchOptions,
debounceTimeout = 800, debounceTimeout = 800,
initialData, initialOptions,
className, className,
...props ...props
}) => { }) => {
@ -52,7 +52,7 @@ const AsyncSelectList: FC<AsyncSelectListProps> = ({
const [searchValue, setSearchValue] = useState<string>(''); const [searchValue, setSearchValue] = useState<string>('');
const [paging, setPaging] = useState<Paging>({} as Paging); const [paging, setPaging] = useState<Paging>({} as Paging);
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
const selectedTagsRef = useRef<SelectOption[]>(initialData ?? []); const selectedTagsRef = useRef<SelectOption[]>(initialOptions ?? []);
const loadOptions = useCallback( const loadOptions = useCallback(
async (value: string) => { async (value: string) => {
@ -204,7 +204,7 @@ const AsyncSelectList: FC<AsyncSelectListProps> = ({
data ?? { data ?? {
value, value,
label: value, label: value,
data: initialData?.find((item) => item.value === value)?.data, data: initialOptions?.find((item) => item.value === value)?.data,
} }
); );
}); });

View File

@ -66,7 +66,7 @@ const TagSelectForm = ({
<AsyncSelectList <AsyncSelectList
className="tag-select-box" className="tag-select-box"
fetchOptions={fetchApi} fetchOptions={fetchApi}
initialData={tagData} initialOptions={tagData}
mode="multiple" mode="multiple"
placeholder={placeholder} placeholder={placeholder}
/> />

View File

@ -17,6 +17,7 @@ import { isArray, isEmpty } from 'lodash';
import { EntityTags } from 'Models'; import { EntityTags } from 'Models';
import React, { useMemo } from 'react'; import React, { useMemo } from 'react';
import AsyncSelectList from '../../../components/AsyncSelectList/AsyncSelectList'; import AsyncSelectList from '../../../components/AsyncSelectList/AsyncSelectList';
import { SelectOption } from '../../../components/AsyncSelectList/AsyncSelectList.interface';
import { TagSource } from '../../../generated/entity/data/container'; import { TagSource } from '../../../generated/entity/data/container';
import { TagLabel } from '../../../generated/type/tagLabel'; import { TagLabel } from '../../../generated/type/tagLabel';
import { import {
@ -28,6 +29,7 @@ export interface TagSuggestionProps {
placeholder?: string; placeholder?: string;
tagType?: TagSource; tagType?: TagSource;
value?: TagLabel[]; value?: TagLabel[];
initialOptions?: SelectOption[];
onChange?: (newTags: TagLabel[]) => void; onChange?: (newTags: TagLabel[]) => void;
} }
@ -35,6 +37,7 @@ const TagSuggestion: React.FC<TagSuggestionProps> = ({
onChange, onChange,
value, value,
placeholder, placeholder,
initialOptions,
tagType = TagSource.Classification, tagType = TagSource.Classification,
}) => { }) => {
const isGlossaryType = useMemo( const isGlossaryType = useMemo(
@ -82,6 +85,7 @@ const TagSuggestion: React.FC<TagSuggestionProps> = ({
<AsyncSelectList <AsyncSelectList
defaultValue={value?.map((item) => item.tagFQN) || []} defaultValue={value?.map((item) => item.tagFQN) || []}
fetchOptions={isGlossaryType ? fetchGlossaryList : fetchTagsElasticSearch} fetchOptions={isGlossaryType ? fetchGlossaryList : fetchTagsElasticSearch}
initialOptions={initialOptions}
mode="multiple" mode="multiple"
placeholder={ placeholder={
placeholder ?? placeholder ??