nili 3 years ago
parent
commit
4eae8eb7d9
  1. 20
      src/components/AuthorSelect/index.tsx
  2. 28
      src/components/DebunceSelect/index.tsx
  3. 6
      src/pages/PoemPage/index.tsx

20
src/components/AuthorSelect/index.tsx

@ -1,22 +1,30 @@
import { seekUsingGET } from '@/services/luigi/author';
import React from 'react';
import type { ValueType } from '../DebunceSelect';
import DebounceSelect from '../DebunceSelect';
const AuthorSelect: React.FC<{
value?: string;
onChange?: (value: string) => void;
onChange: (value: ValueType) => void;
}> = (props) => {
return (
<DebounceSelect
initOption={props.value}
fetchOptions={seekUsingGET}
fetchOptions={async (query) => {
const response = await seekUsingGET({
name: query,
});
if (response.data?.list) {
return response.data.list?.map((author) => {
const data: ValueType = { label: author.name, value: author.id, key: author.id };
return data;
});
}
return undefined;
}}
onChange={(newValue) => {
if (typeof newValue == 'string') {
props.onChange(JSON.parse(newValue));
} else {
props.onChange(newValue);
}
}}
style={{
width: '100%',

28
src/components/DebunceSelect/index.tsx

@ -1,19 +1,23 @@
import { Select, Spin } from 'antd';
import { SelectProps } from 'antd/es/select';
import type { SelectProps } from 'antd/es/select';
import debounce from 'lodash/debounce';
import React from 'react';
import { useEffect } from '../../.umi/.cache/.mfsu/mf-dep_vendors-node_modules_react_index_js.598bdd42.async';
export interface DebounceSelectProps<ValueType = any>
export interface DebounceSelectProps<ValueType>
extends Omit<SelectProps<ValueType>, 'options' | 'children'> {
fetchOptions: (search: string) => Promise<ValueType[]>;
fetchOptions: (search: string) => Promise<ValueType[] | undefined>;
debounceTimeout?: number;
initOption?: string;
}
function DebounceSelect<
ValueType extends { key?: string; label: React.ReactNode; value: string | number } = any,
>({ fetchOptions, debounceTimeout = 800, initOption, ...props }: DebounceSelectProps) {
export type ValueType = { key?: number; label?: string; value?: number };
function DebounceSelect({
fetchOptions,
debounceTimeout = 800,
initOption,
...props
}: DebounceSelectProps<ValueType>) {
const [fetching, setFetching] = React.useState(false);
const initOptions = [];
let defaultValue = null;
@ -27,22 +31,18 @@ function DebounceSelect<
const fetchRef = React.useRef(0);
const debounceFetcher = React.useMemo(() => {
const loadOptions = (value: string | number) => {
const loadOptions = (value: string) => {
fetchRef.current += 1;
const fetchId = fetchRef.current;
setOptions([]);
setFetching(true);
fetchOptions({ query: value }).then((newOptions) => {
fetchOptions(value).then((newOptions) => {
if (fetchId !== fetchRef.current) {
// for fetch callback order
return;
}
const list = newOptions.data.list.map((user: { id: number; name: string }) => ({
label: user.name,
value: user.id,
}));
setOptions(list);
setOptions(newOptions);
setFetching(false);
});
};

6
src/pages/PoemPage/index.tsx

@ -3,7 +3,7 @@ import { poemListUsingPOST } from '@/services/luigi/poem';
import { PlusOutlined } from '@ant-design/icons';
import ProTable from '@ant-design/pro-table';
import { Button } from 'antd';
import React, { useRef, useState } from 'react';
import { useRef } from 'react';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
const columns: ProColumns<API.PoemBo>[] = [
@ -59,7 +59,7 @@ const columns: ProColumns<API.PoemBo>[] = [
},
],
},
renderFormItem: (item, { type, defaultRender, ...rest }, form) => {
renderFormItem: (item, { type, defaultRender, ...rest }) => {
return <AuthorSelect {...rest} />;
},
},
@ -78,7 +78,7 @@ export default () => {
columns={columns}
actionRef={actionRef}
cardBordered
request={async (params = {}, sort, filter) => {
request={async (params = {}) => {
const query: API.QueryParam[] = [];
if (params.author) {
let author = params.author;

Loading…
Cancel
Save