You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@inlong.apache.org by he...@apache.org on 2021/11/27 08:56:23 UTC
[incubator-inlong] branch master updated: [INLONG-1838] Public components perfect for use in pulsar (#1842)
This is an automated email from the ASF dual-hosted git repository.
healchow pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-inlong.git
The following commit(s) were added to refs/heads/master by this push:
new ed32e65 [INLONG-1838] Public components perfect for use in pulsar (#1842)
ed32e65 is described below
commit ed32e6562d8eaf7d9248f78586a9b49eac9f0ba2
Author: Daniel <le...@outlook.com>
AuthorDate: Sat Nov 27 16:56:19 2021 +0800
[INLONG-1838] Public components perfect for use in pulsar (#1842)
---
inlong-website/public/index.html | 2 +-
.../components/FormGenerator/FormItemContent.tsx | 2 +-
inlong-website/src/components/HighSelect/index.tsx | 80 ++++++++++++++++++----
inlong-website/src/utils/index.ts | 6 +-
4 files changed, 74 insertions(+), 16 deletions(-)
diff --git a/inlong-website/public/index.html b/inlong-website/public/index.html
index e93ed40..a05458c 100644
--- a/inlong-website/public/index.html
+++ b/inlong-website/public/index.html
@@ -44,7 +44,7 @@ under the License.
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
- <title>Inlong</title>
+ <title>InLong</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/inlong-website/src/components/FormGenerator/FormItemContent.tsx b/inlong-website/src/components/FormGenerator/FormItemContent.tsx
index f6b774d..132b87f 100644
--- a/inlong-website/src/components/FormGenerator/FormItemContent.tsx
+++ b/inlong-website/src/components/FormGenerator/FormItemContent.tsx
@@ -30,7 +30,7 @@ type SuffixDefineType = Omit<FormItemProps, 'col' | 'suffix'>;
// Single formItem
export interface FormItemProps extends AntdFormItemProps {
type: PluginsTypes | React.ReactNode;
- visible?: boolean | ((values: Record<string, unknown>) => boolean);
+ visible?: boolean | ((values: Record<string, any>) => boolean);
props?: Record<string, any>;
col?: number;
// As ID
diff --git a/inlong-website/src/components/HighSelect/index.tsx b/inlong-website/src/components/HighSelect/index.tsx
index 568759b..47b18a6 100644
--- a/inlong-website/src/components/HighSelect/index.tsx
+++ b/inlong-website/src/components/HighSelect/index.tsx
@@ -20,8 +20,8 @@
/**
* A select that can automatically initiate asynchronous (cooperating with useRequest) to obtain drop-down list data
*/
-import React, { useMemo } from 'react';
-import { Select } from 'antd';
+import React, { useMemo, useState, useEffect } from 'react';
+import { Select, Space, Input } from 'antd';
import type { SelectProps, OptionProps } from 'antd/es/select';
import { useRequest } from '@/hooks';
@@ -45,9 +45,20 @@ export interface HighSelectProps extends Omit<SelectProps<any>, 'options'> {
requestAuto?: boolean;
};
asyncValueLabel?: string;
+ useInput?: boolean;
+ useInputProps?: Record<string, unknown>;
}
-const HighSelect: React.FC<HighSelectProps> = ({ options, asyncValueLabel, ...rest }) => {
+const HighSelect: React.FC<HighSelectProps> = ({
+ options,
+ asyncValueLabel,
+ useInput = false,
+ useInputProps,
+ ...rest
+}) => {
+ const [diyWatcher, setDiyWatcher] = useState(true);
+ const [diyState, setDiyState] = useState(false);
+
const { data: list = [], run: getList } = useRequest(options?.requestService, {
manual: !options?.requestAuto,
ready: !!options?.requestService && (options?.requestParams?.ready ?? true),
@@ -55,12 +66,25 @@ const HighSelect: React.FC<HighSelectProps> = ({ options, asyncValueLabel, ...re
});
const optionList = useMemo(() => {
- if (Array.isArray(options)) {
- return options;
+ const output = Array.isArray(options) ? options : list;
+
+ return useInput
+ ? output.concat({
+ label: 'DIY',
+ value: '__DIYState',
+ })
+ : output;
+ }, [list, options, useInput]);
+
+ useEffect(() => {
+ if (diyWatcher && optionList.every(item => item.value !== rest.value) && !diyState) {
+ setDiyState(true);
}
+ }, [diyWatcher, rest.value, optionList, diyState]);
- return list;
- }, [list, options]);
+ if (rest.mode === 'tags') {
+ return <Select {...rest} />;
+ }
const onDropdownVisibleChange = (open: boolean) => {
if (open) {
@@ -71,20 +95,41 @@ const HighSelect: React.FC<HighSelectProps> = ({ options, asyncValueLabel, ...re
}
};
- const onChange = value => {
- const optionItem = optionList.find(item => item.value === value);
+ const onValueChange = value => {
+ const optionItem = Array.isArray(value)
+ ? optionList.filter(item => value.includes(item.value))
+ : optionList.find(item => item.value === value);
if (typeof rest.onChange === 'function') {
rest.onChange(value, optionItem);
}
};
- return (
+ const onSelectChange = value => {
+ const newDiyState = value === '__DIYState';
+ if (diyState !== newDiyState) setDiyState(newDiyState);
+ if (newDiyState) {
+ setDiyWatcher(false);
+ return;
+ }
+
+ onValueChange(value);
+ };
+
+ const onInputChange = e => {
+ onValueChange(e.target.value);
+ };
+
+ const SelectComponent = (
<Select
showSearch={optionList.length > 5}
{...rest}
onDropdownVisibleChange={onDropdownVisibleChange}
- onChange={onChange}
- value={(!optionList.length && asyncValueLabel) || rest.value}
+ onChange={onSelectChange}
+ value={
+ useInput && diyState
+ ? '__DIYState'
+ : (!optionList.length && rest.value && asyncValueLabel) || rest.value
+ }
options={optionList.map(item => ({
label: item.label,
value: item.value,
@@ -93,6 +138,17 @@ const HighSelect: React.FC<HighSelectProps> = ({ options, asyncValueLabel, ...re
}))}
/>
);
+
+ return useInput ? (
+ <Space>
+ {SelectComponent}
+ {useInput && diyState && (
+ <Input {...useInputProps} value={rest.value} onChange={onInputChange} />
+ )}
+ </Space>
+ ) : (
+ SelectComponent
+ );
};
export default HighSelect;
diff --git a/inlong-website/src/utils/index.ts b/inlong-website/src/utils/index.ts
index 84549f4..74ee978 100644
--- a/inlong-website/src/utils/index.ts
+++ b/inlong-website/src/utils/index.ts
@@ -134,14 +134,16 @@ export function pickObjectArray(keys = [], sourceArr = [], key = 'name') {
if (isDevelopEnv()) {
// Increase the log in the development environment to facilitate debugging
return keys.reduce((acc, k) => {
- if (map.has(k)) {
+ if (typeof k !== 'string') {
+ return acc.concat(k);
+ } else if (map.has(k)) {
return acc.concat(map.get(k));
}
console.warn(`[Utils] pickObjectArray lost: ${k}`);
return acc;
}, []);
} else {
- return keys.map(k => map.get(k));
+ return keys.map(k => (typeof k !== 'string' ? k : map.get(k)));
}
}