mirror of
https://github.com/open-metadata/OpenMetadata.git
synced 2025-11-02 19:48:17 +00:00
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:
parent
c95de19a09
commit
631145d090
@ -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,
|
||||||
|
|||||||
@ -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,
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|||||||
@ -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}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@ -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 ??
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user