antd/lib/select#SelectValue TypeScript Examples
The following examples show how to use
antd/lib/select#SelectValue.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.tsx From erda-ui with GNU Affero General Public License v3.0 | 6 votes |
|
FilterVersion = ({
value,
onChange,
className,
groups,
}: {
value?: string;
onChange: (val: string | undefined) => void;
className?: string;
groups: Array<{ label: string; value: string }>;
}) => {
return (
<Select
className={`${className || ''}`}
onChange={(val: SelectValue) => {
onChange(val as string);
}}
allowClear
value={value}
placeholder={i18n.t('publisher:select version')}
>
{map(groups, ({ value: val, label }) => {
return (
<Option key={val} value={val}>
{label}
</Option>
);
})}
</Select>
);
}
Example #2
| Source File: detail.tsx From erda-ui with GNU Affero General Public License v3.0 | 6 votes |
|
FilterGroup = ({
onChange,
className,
groups,
...rest
}: {
onChange: (val: string | undefined) => void;
className?: string;
groups: Array<{ [pro: string]: any; label: string; value: string }>;
}) => {
const [value, setValue] = React.useState(undefined as undefined | string);
const onChangeFilterGroupRef = React.useRef(onChange);
React.useEffect(() => {
onChangeFilterGroupRef.current(value);
}, [value]);
return (
<Select
className={`${className || ''}`}
onChange={(val: SelectValue) => {
setValue(val as string);
}}
allowClear
value={value}
{...rest}
>
{map(groups, ({ value: val, label }) => {
return (
<Option key={val} value={val}>
{label}
</Option>
);
})}
</Select>
);
}
Example #3
| Source File: index.tsx From ant-simple-draw with MIT License | 6 votes |
|
Selects: React.FC<SelectsType> = memo(function Selects({
data,
valKey,
valName,
onChange,
value,
...props
}) {
const handleCurrencyChange = (currency: SelectValue, option: any) => {
onChange && onChange(currency, option);
};
return (
<>
<Select
{...props}
placeholder="请选择"
onChange={handleCurrencyChange}
value={value}
showSearch
allowClear={true}
filterOption={(input, option: any) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{data.map((item, index) => (
<Option value={item[valKey]} key={index}>
{item[valName]}
</Option>
))}
</Select>
</>
);
})
Example #4
| Source File: index.tsx From drip-table with MIT License | 4 votes |
|
private renderAttributeComponent(schema: DTGComponentPropertySchema, index: number, parentIndex: number) {
const currentValue = (this.props.value || [])[parentIndex] || {};
const options = schema['ui:props']?.options as LabeledValue[] || this.props.fieldOptions || [];
if (schema['ui:type'] === 'radio') {
return (
<Radio.Group
style={{ width: '100%' }}
defaultValue={schema.default}
value={currentValue[schema.name]}
onChange={e => this.changeColumnItem(schema.name, e.target.value, parentIndex)}
>
{
options?.map(
(option, i) =>
<Radio key={i} value={option.value}>{ option.label }</Radio>,
)
}
</Radio.Group>
);
}
if (schema['ui:type'] === 'input') {
return (
<Input
style={{ width: '100%' }}
defaultValue={schema.default as string}
value={currentValue[schema.name] as string}
placeholder={schema['ui:props']?.placeholder as string}
onChange={e => this.changeColumnItem(schema.name, e.target.value, parentIndex)}
/>
);
}
if (schema['ui:type'] === 'text') {
return (
<Input.TextArea
style={{ width: '100%' }}
autoSize={schema['ui:autoSize']}
defaultValue={schema.default as string}
value={currentValue[schema.name] as string}
placeholder={schema['ui:props']?.placeholder as string}
onChange={e => this.changeColumnItem(schema.name, e.target.value, parentIndex)}
/>
);
}
if (schema['ui:type'] === 'auto-complete') {
return (
<AutoComplete
style={{ width: '100%' }}
defaultValue={schema.default as string}
value={currentValue[schema.name] as string}
options={options}
onChange={value => this.changeColumnItem(schema.name, value, parentIndex)}
/>
);
}
if (schema['ui:type'] === 'number') {
return (
<InputNumber
style={{ width: '100%' }}
min={schema['ui:minium']}
max={schema['ui:maximum']}
step={schema['ui:step']}
defaultValue={Number(schema.default)}
value={Number(currentValue[schema.name])}
onChange={value => this.changeColumnItem(schema.name, Number(value), parentIndex)}
/>
);
}
if (schema['ui:type'] === 'switch') {
const value = typeof currentValue[schema.name] === 'undefined' ? schema.default : currentValue[schema.name];
return (
<Switch
checked={value as boolean}
checkedChildren={schema['ui:checkedContent']}
unCheckedChildren={schema['ui:unCheckedContent']}
onChange={checked => this.changeColumnItem(schema.name, checked, parentIndex)}
/>
);
}
if (schema['ui:type'] === 'select') {
const formattedValue = (schema['ui:mode'] === 'multiple' || schema['ui:mode'] === 'tags') && !Array.isArray(currentValue[schema.name]) ? [currentValue[schema.name]] : currentValue[schema.name];
return (
<Select
showSearch
style={{ width: '100%' }}
mode={schema['ui:mode']}
defaultValue={schema.default as SelectValue}
value={formattedValue as SelectValue}
options={options}
onChange={value => this.changeColumnItem(schema.name, value, parentIndex)}
/>
);
}
if (schema['ui:type'] === 'array-list') {
return (
<ArrayComponent
theme={this.props.theme}
schema={schema}
value={currentValue[schema.name] as Record<string, unknown>[] | undefined}
onChange={value => this.changeColumnItem(schema.name, value, parentIndex)}
onValidate={msg => this.props.onValidate?.(msg)}
/>
);
}
return null;
}
Example #5
| Source File: repo-tag.tsx From erda-ui with GNU Affero General Public License v3.0 | 4 votes |
|
RepoTag = () => {
const [visible, setVisible] = React.useState(false);
const [info, tagList] = repoStore.useStore((s) => [s.info, s.tag]);
const { getListByType, deleteTag, createTag, checkCommitId } = repoStore.effects;
const { clearListByType } = repoStore.reducers;
const [isFetching] = useLoading(repoStore, ['getListByType']);
const { gitRepoAbbrev } = appStore.useStore((s) => s.detail);
const { isLocked } = info;
const [refType, setRefType] = React.useState<string | null>(null);
const repoBranchAuth = usePerm((s) => s.app.repo.branch);
const download = (tag: string, format: string) =>
window.open(setApiWithOrg(`/api/repo/${gitRepoAbbrev}/archive/${tag}.${format}`));
React.useEffect(() => {
getListByType({ type: 'tag' });
return () => {
clearListByType('tag');
};
}, [getListByType, clearListByType]);
const onCreateTag = (tagInfo: { ref: string; tag: string; message: string }) => {
createTag(tagInfo).then((res: any) => {
if (!res.success) {
message.error(i18n.t('dop:failed to add tag'));
return;
}
message.success(i18n.t('dop:label created successfully'));
setVisible(false);
});
};
const RefComp = ({ form }: { form: FormInstance }) => {
const refType = form.getFieldValue('refType');
const refValue = form.getFieldValue('ref');
const curForm = React.useRef(form);
const { branches } = info;
React.useEffect(() => {
form.setFieldsValue({ ref: undefined });
}, [curForm, refType]);
const options = refType === 'commitId' ? null : branches;
const handleSelectChange = (e: SelectValue) => {
form.setFieldsValue({ ref: e.toString() });
};
const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
form.setFieldsValue({ ref: e.target.value });
};
return (
<div>
<IF check={options}>
<Select
showSearch
value={refValue}
optionFilterProp="children"
onChange={handleSelectChange}
filterOption={(input, option: any) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
>
{options &&
options.map((option: string) => (
<Option key={option} value={option}>
{option}
</Option>
))}
</Select>
<IF.ELSE />
<Input type="text" value={refValue} maxLength={40} onChange={handleTextChange} />
</IF>
</div>
);
};
const beforeSubmit = async (values: { ref: string; refType: string }) => {
if (values.refType === 'commitId') {
setRefType(null);
const ret = await checkCommitId({ commitId: values.ref });
if (ret === 'error') {
message.error(i18n.t('dop:invalid commit SHA'));
return null;
}
}
return values;
};
const getList = debounce((tag: string) => {
getListByType({ type: 'tag', findTags: tag });
}, 300);
const handleChangeBranchName = (e: React.ChangeEvent<HTMLInputElement>) => {
getList(e.target.value);
};
const fieldsList = [
{
label: i18n.t('dop:Source type'),
name: 'refType',
type: 'radioGroup',
initialValue: 'branch',
options: [
{ name: 'Branch', value: 'branch' },
{ name: 'commit SHA', value: 'commitId' },
],
itemProps: {
onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => {
setRefType(e.target.value);
},
},
},
{
label: i18n.t('dop:Based on source'),
name: 'ref',
type: 'custom',
getComp: ({ form }: any) => <RefComp form={form} />,
},
{
label: i18n.t('label'),
name: 'tag',
itemProps: {
maxLength: 50,
},
rules: [
{
validator: (_rule: any, value: string, callback: Function) => {
if (!/^[A-Za-z0-9._-]+$/.test(value)) {
callback(i18n.t('dop:Must be composed of letters, numbers, underscores, hyphens and dots.'));
} else {
callback();
}
},
},
],
},
{
label: i18n.t('Description'),
name: 'message',
required: false,
type: 'textArea',
itemProps: {
autoComplete: 'off',
maxLength: 1024,
rows: 4,
},
},
];
return (
<Spin spinning={isFetching}>
<TopButtonGroup>
<WithAuth pass={repoBranchAuth.addTag.pass} tipProps={{ placement: 'bottom' }}>
<Button disabled={isLocked} type="primary" onClick={() => setVisible(true)}>
{i18n.t('dop:Add-label')}
</Button>
</WithAuth>
<FormModal
visible={visible}
name={i18n.t('tag')}
fieldsList={fieldsList}
onOk={onCreateTag}
onCancel={() => setVisible(false)}
beforeSubmit={beforeSubmit}
/>
</TopButtonGroup>
<Search
className="repo-tag-search-input mb-4"
placeholder={i18n.t('common:search by {name}', { name: i18n.t('tag') })}
onChange={handleChangeBranchName}
/>
<div className="repo-tag-list">
<IF check={isLocked}>
<ErdaAlert message={i18n.t('lock-repository-tip')} type="error" />
</IF>
<IF check={tagList.length}>
{tagList.map((item) => {
const { name, id, tagger } = item;
const { name: committerName, when } = tagger as any;
return (
<div key={name} className="branch-item flex justify-between items-center">
<div className="branch-item-left">
<div className="font-medium flex items-center text-base mb-3">
<CustomIcon type="bb" />
<Link to={mergeRepoPathWith(`/tree/${name}`)}>
<span className="text-normal hover-active">{name}</span>
</Link>
</div>
<div className="flex items-center text-sub">
<span className="inline-flex items-center">
<Avatar showName name={committerName} />
{i18n.t('committed at')}
</span>
<span className="ml-1">{fromNow(when)}</span>
<span className="ml-6 text-desc nowrap flex-1">
<GotoCommit length={6} commitId={id} />
</span>
</div>
</div>
<div className="branch-item-right">
<Button className="ml-3" onClick={() => download(name, 'zip')}>
{i18n.t('dop:download zip')}
</Button>
<Button className="ml-3" onClick={() => download(name, 'tar.gz')}>
{i18n.t('dop:download tar.gz')}
</Button>
<DeleteConfirm
onConfirm={() => {
deleteTag({ tag: name });
}}
>
<WithAuth pass={repoBranchAuth.deleteTag.pass}>
<Button disabled={isLocked} className="ml-3" danger>
{i18n.t('Delete')}
</Button>
</WithAuth>
</DeleteConfirm>
</div>
</div>
);
})}
<IF.ELSE />
<EmptyHolder relative style={{ justifyContent: 'start' }} />
</IF>
</div>
</Spin>
);
}
Example #6
| Source File: index.tsx From jetlinks-ui-antd with MIT License | 4 votes |
|
Save: React.FC<Props> = props => {
const { form: { getFieldDecorator }, form } = props;
const [bridgeConfigs, setBridgeConfigs] = useState<any>([]);
const [accessConfig, setAccessConfig] = useState({});
const [productList, setProductList] = useState([]);
const [protocolSupport, setProtocolSupport] = useState([]);
const [productKeyList, setProductKeyList] = useState([]);
const [deviceList, setDeviceList] = useState<any>([]);
const [serveIdList, setServeIdList] = useState([]);
const [regionIdList] = useState(['cn-qingdao', 'cn-beijing', 'cn-zhangjiakou', 'cn-huhehaote', 'cn-wulanchabu', 'cn-hangzhou', 'cn-shanghai', 'cn-shenzhen', 'cn-heyuan', 'cn-guangzhou', 'cn-chengdu']);
useEffect(() => {
setBridgeConfigs(props.data.bridgeConfigs || [
{
serverId: "",
bridgeProductKey: "",
bridgeDeviceName: "",
bridgeDeviceSecret: "",
http2Endpoint: ""
}
]);
setAccessConfig(props.data?.accessConfig || {
regionId: "",
apiEndpoint: "",
authEndpoint: "",
accessKeyId: "",
accessSecret: "",
productKey: ""
});
apis.aliyun.getNodesList().then(res => {
if (res.status === 200) {
setServeIdList(res.result)
}
});
apis.aliyun.productList({}).then(res => {
if (res.status === 200) {
setProductList(res.result)
}
});
apis.aliyun.protocolSupport().then(res => {
if (res.status === 200) {
setProtocolSupport(res.result)
}
});
if (props.data.accessConfig) {
getBridge(props.data?.accessConfig);
let item = props.data?.accessConfig;
props.data.bridgeConfigs.map((i: any, index: number) => {
let param = {
regionId: item.regionId,
accessSecret: item.accessSecret,
apiEndpoint: item.apiEndpoint,
authEndpoint: item.authEndpoint,
accessKeyId: item.accessKeyId,
productKey: i.bridgeProductKey
};
apis.aliyun.getDevices(param).then(res => {
if (res.status === 200) {
deviceList[index] = res.result?.data || [];
setDeviceList([...deviceList])
}
})
})
}
}, []);
const saveData = () => {
form.validateFields((err, fileValue) => {
if (err) return;
apis.aliyun.save(fileValue).then(res => {
if (res.status === 200) {
props.save();
}
})
})
};
const getBridge = (params: any) => {
if (params.regionId !== '' && params.accessSecret !== '' && params.apiEndpoint !== '' && params.authEndpoint !== '' && params.accessKeyId !== '') {
let param = {
regionId: params.regionId,
accessSecret: params.accessSecret,
apiEndpoint: params.apiEndpoint,
authEndpoint: params.authEndpoint,
accessKeyId: params.accessKeyId,
};
apis.aliyun.getProducts(param).then(res => {
if (res.status === 200) {
setProductKeyList(res.result?.data || [])
}
})
}
};
return (
<Modal
width='60VW'
title={props.data.id ? "编辑产品" : "添加产品"}
visible
okText="确定"
cancelText="取消"
onOk={() => { saveData() }}
onCancel={() => props.close()}
>
<div>
<Form layout="horizontal" labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
<Row justify="space-around" gutter={24}>
<Col span={12}>
<Form.Item label="产品ID" >
{getFieldDecorator('id', {
initialValue: props.data?.id,
rules: [{ required: false, message: '请选择' }],
})(
<Select placeholder="请选择" allowClear showSearch
optionFilterProp="value"
>
{productList && productList.map((i: any, index: number) => {
return <Select.Option key={index} value={i.id}>{i.id}</Select.Option>
})}
</Select>
)}
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="产品名称">
{getFieldDecorator('name', {
initialValue: props.data?.name,
rules: [{ required: true, message: '请输入名称' }],
})(<Input placeholder="请输入名称" />)}
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="编解码协议">
{getFieldDecorator('codecProtocol', {
initialValue: props.data?.codecProtocol,
rules: [{ required: true, message: '请选择' }],
})(<Select placeholder="请选择" showSearch>
{protocolSupport && protocolSupport.map((i: any, index: number) => {
return <Select.Option key={index} value={i.id}>{i.name}</Select.Option>
})}
</Select>)}
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="说明">
{getFieldDecorator('description', {
initialValue: props.data?.description,
rules: [{ required: false, message: '请输入' }],
})(<Input placeholder="请输入" />)}
</Form.Item>
</Col>
</Row>
<Divider orientation="left" dashed><div style={{ fontWeight: 'bold' }}>认证信息配置</div></Divider>
<Row justify="start" gutter={24}>
<Col span={12}>
<Form.Item label={
<span>
区域ID <Tooltip title="地域和可用区">
<QuestionCircleOutlined onClick={() => {
window.open('https://help.aliyun.com/document_detail/40654.html')
}} />
</Tooltip>
</span>
} >
{getFieldDecorator('accessConfig.regionId', {
initialValue: accessConfig?.regionId,
rules: [{ required: true, message: '请选择' }],
})(
<AutoComplete placeholder="本地服务ID"
dataSource={regionIdList}
filterOption={(inputValue, option) =>
option?.props?.children?.toUpperCase()?.indexOf(inputValue.toUpperCase()) !== -1
}
onBlur={(value) => {
if (value) {
let temp = form.getFieldValue('accessConfig.productKey');
form.setFieldsValue({
accessConfig: {
apiEndpoint: `https://iot.${value}.aliyuncs.com`,
authEndpoint: `https://iot-auth.${value}.aliyuncs.com/auth/bridge`,
http2Endpoint: `https://${temp}.iot-as-http2.${value}.aliyuncs.com`,
}
});
let params = form.getFieldValue('accessConfig');
getBridge({
regionId: value,
accessSecret: params.accessSecret,
apiEndpoint: params.apiEndpoint,
authEndpoint: params.authEndpoint,
accessKeyId: params.accessKeyId,
})
}
}}
>
</AutoComplete>
)}
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="API接口地址">
{getFieldDecorator('accessConfig.apiEndpoint', { //https://iot.cn-shanghai.aliyuncs.com
initialValue: accessConfig?.apiEndpoint,
rules: [{ required: true, message: '请输入' }],
})(<Input placeholder="请输入" />)}
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="认证接口地址">
{getFieldDecorator('accessConfig.authEndpoint', { //https://iot-auth.cn-shanghai.aliyuncs.com/auth/bridge
initialValue: accessConfig?.authEndpoint,
rules: [{ required: true, message: '请输入' }],
})(<Input placeholder="请输入" />)}
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="accessKey">
{getFieldDecorator('accessConfig.accessKeyId', {
initialValue: accessConfig?.accessKeyId,
rules: [{ required: true, message: '请输入' }],
})(<Input placeholder="请输入" onBlur={(e) => {
let params = form.getFieldValue('accessConfig');
getBridge({
regionId: params.regionId,
accessSecret: params.accessSecret,
apiEndpoint: params.apiEndpoint,
authEndpoint: params.authEndpoint,
accessKeyId: e.target.value,
})
}} />)}
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="accessSecret">
{getFieldDecorator('accessConfig.accessSecret', {
initialValue: accessConfig?.accessSecret,
rules: [{ required: true, message: '请输入' }],
})(<Input placeholder="请输入" onBlur={(e) => {
let params = form.getFieldValue('accessConfig');
getBridge({
regionId: params.regionId,
accessSecret: e.target.value,
apiEndpoint: params.apiEndpoint,
authEndpoint: params.authEndpoint,
accessKeyId: params.accessKeyId,
})
}} />)}
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="ProductKey">
{getFieldDecorator('accessConfig.productKey', {
initialValue: accessConfig?.productKey,
rules: [{ required: true, message: '请输入' }],
})(
<AutoComplete placeholder="请选择" allowClear>
{productKeyList && productKeyList.map((i: any, index: number) => {
return <AutoComplete.Option key={index} value={i.productKey}>{`${i.productKey}(${i.productName})`}</AutoComplete.Option>
})}
</AutoComplete>
// <Select placeholder="请选择" allowClear>
// {productKeyList && productKeyList.map((i: any, index: number) => {
// return <Select.Option key={index} value={i.productKey}>{`${i.productKey}(${i.productName})`}</Select.Option>
// })}
// </Select>
)}
</Form.Item>
</Col>
</Row>
<Divider orientation="left" dashed><div style={{ fontWeight: 'bold' }}>网桥配置</div></Divider>
{
bridgeConfigs.map((item: any, index: number) => {
return (
<div key={index} style={{ backgroundColor: 'rgba(192,192,192,0.1)', marginBottom: '10px', paddingTop: '20px' }}>
<div style={{ width: "90%", marginLeft: '5%' }}>网桥： {index + 1}</div>
<div style={{ display: 'flex', justifyContent: 'center' }}>
<div style={{ width: "90%" }}>
<Row gutter={0} justify="start">
<Col span={12}>
<Form.Item label="本地服务ID">
{getFieldDecorator(`bridgeConfigs[${index}].serverId`, {
initialValue: item.serverId || undefined,
rules: [{ required: true, message: '本地服务ID' }],
})(<AutoComplete placeholder="本地服务ID">
{serveIdList && serveIdList.map((i: any, index: number) => {
return <AutoComplete.Option key={index} value={i.id}>{i.id}</AutoComplete.Option>
})}
</AutoComplete>)}
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="ProductKey">
{getFieldDecorator(`bridgeConfigs[${index}].bridgeProductKey`, {
initialValue: item.bridgeProductKey || undefined,
rules: [{ required: true, message: '网桥ProductKey' }],
})(
<AutoComplete placeholder="请选择" allowClear
onBlur={(value: SelectValue) => {
let temp = form.getFieldValue('accessConfig.regionId');
let bridge = form.getFieldValue('bridgeConfigs');
bridge[index].http2Endpoint = `https://${value}.iot-as-http2.${temp}.aliyuncs.com`;
form.setFieldsValue({
bridgeConfigs: bridge
});
let config = form.getFieldValue('accessConfig');
if (config.regionId !== '' && config.apiEndpoint !== '' &&
config.authEndpoint !== '' && config.accessKeyId !== '' && config.accessSecret !== '' && value !== '') {
apis.aliyun.getDevices({
regionId: config.regionId,
accessSecret: config.accessSecret,
apiEndpoint: config.apiEndpoint,
productKey: value,
authEndpoint: config.authEndpoint,
accessKeyId: config.accessKeyId,
}).then(res => {
if (res.status === 200) {
deviceList[index] = res.result?.data || [];
setDeviceList([...deviceList])
}
})
}
}}>
{productKeyList && productKeyList.map((i: any, index: number) => {
return <AutoComplete.Option key={index} value={i.productKey}>{`${i.productKey}(${i.productName})`}</AutoComplete.Option>
})}
</AutoComplete>
)}
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="DeviceName">
{getFieldDecorator(`bridgeConfigs[${index}].bridgeDeviceName`, {
initialValue: item.bridgeDeviceName || undefined,
rules: [{ required: true, message: '网桥DeviceName' }],
})(
<AutoComplete placeholder="网桥DeviceName" allowClear onBlur={(value: SelectValue) => {
let secret = '';
if (value !== '' && value !== undefined) {
let data: any[] = deviceList[index].filter((i: any) => {
return i.deviceName === value
});
if (data.length > 0) {
secret = data[0].deviceSecret
}
}
let bridge = form.getFieldValue('bridgeConfigs');
bridge[index].bridgeDeviceSecret = secret;
form.setFieldsValue({
bridgeConfigs: bridge
})
}}>
{deviceList && deviceList.length > 0 && deviceList[index] && deviceList[index].length > 0 && deviceList[index].map((i: any, index: number) => {
return <AutoComplete.Option key={index} value={i.deviceName}>{i.deviceName}</AutoComplete.Option>
})}
</AutoComplete>
)}
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="DeviceSecret">
{getFieldDecorator(`bridgeConfigs[${index}].bridgeDeviceSecret`, {
initialValue: item.bridgeDeviceSecret || undefined,
rules: [{ required: true, message: '网桥DeviceSecret' }],
})(
<Input placeholder="请输入" readOnly />
)}
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="HTTP2接口地址">
{getFieldDecorator(`bridgeConfigs[${index}].http2Endpoint`, { //https://a1WEHOY5PU7.iot-as-http2.cn-shanghai.aliyuncs.com
initialValue: item.http2Endpoint || undefined,
rules: [{ required: true, message: '请输入' }],
})(<Input placeholder="请输入" />)}
</Form.Item>
</Col>
</Row>
</div>
<div style={{ width: "10%", display: 'flex', justifyContent: 'center', marginTop: '45px' }}>
<Tooltip title="删除">
<MinusCircleOutlined
onClick={() => {
bridgeConfigs.splice(index, 1);
setBridgeConfigs([...bridgeConfigs]);
}}
/>
</Tooltip>
</div>
</div>
</div>
)
})
}
<Button icon="plus" type="link"
onClick={() => {
setBridgeConfigs([...bridgeConfigs, {
serverId: "",
bridgeProductKey: "",
bridgeDeviceName: "",
bridgeDeviceSecret: "",
http2Endpoint: ""
}]);
setDeviceList([...deviceList, {}])
}}
>添加</Button>
</Form>
</div>
</Modal>
)
}
