@ant-design/icons#DeleteFilled JavaScript Examples
The following examples show how to use
@ant-design/icons#DeleteFilled.
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: AppVersionSetting.jsx From juno with Apache License 2.0 | 5 votes |
|
render() {
const { version } = this.props.settings;
// const versionConf = version instanceof Array ? version : [];
// console.log(">> version", version)
return (
<SettingBlock title={'应用版本相关设置'}>
<Table
size={'small'}
pagination={false}
columns={[
...VersionConfigColumns,
{
title: '操作',
render: (_, record, index) => {
return (
<>
<Popconfirm title={'确定删除吗?'} onConfirm={() => this.onDelete(index)}>
<Button shape={'circle'}>
<DeleteFilled />
</Button>
</Popconfirm>
<Button
shape={'circle'}
onClick={() => this.onEdit(index)}
style={{ marginLeft: '10px' }}
>
<EditFilled />
</Button>
</>
);
},
},
]}
dataSource={version}
footer={() => (
<div style={{ textAlign: 'center' }}>
<Button onClick={this.onAddConfig}>
<FileAddFilled />
新增
</Button>
</div>
)}
/>
<ModalAddVersion
visible={this.state.modalAddVersion}
onCancel={() => this.setState({ modalAddVersion: false })}
onSubmit={this.onAddVersion}
/>
<ModalEditVersion
visible={this.state.modalEditVersion}
onCancel={() => this.setState({ modalEditVersion: false })}
onSubmit={this.onUpdateVersion}
fields={this.state.currentEditFields}
/>
</SettingBlock>
);
}
Example #2
| Source File: EtcdSetting.jsx From juno with Apache License 2.0 | 5 votes |
|
render() {
const { etcd } = this.props.settings;
// console.log(">> etcd", etcd)
return (
<SettingBlock title={'Etcd查询前缀设置'}>
<Table
size={'small'}
pagination={false}
columns={[
...EtcdConfigColumns,
{
title: '操作',
render: (_, record, index) => {
return (
<>
<Popconfirm title={'确定删除吗?'} onConfirm={() => this.onDelete(index)}>
<Button shape={'circle'}>
<DeleteFilled />
</Button>
</Popconfirm>
<Button
shape={'circle'}
onClick={() => this.onEdit(index)}
style={{ marginLeft: '10px' }}
>
<EditFilled />
</Button>
</>
);
},
},
]}
dataSource={etcd}
footer={() => (
<div style={{ textAlign: 'center' }}>
<Button onClick={this.onAddConfig}>
<FileAddFilled />
新增
</Button>
</div>
)}
/>
<ModalAddEtcd
visible={this.state.modalAddEtcd}
onCancel={() => this.setState({ modalAddEtcd: false })}
onSubmit={this.onAddEtcd}
/>
<ModalEditEtcd
visible={this.state.modalEditEtcd}
onCancel={() => this.setState({ modalEditEtcd: false })}
onSubmit={this.onUpdateEtcd}
fields={this.state.currentEditFields}
/>
</SettingBlock>
);
}
Example #3
| Source File: GatewaySetting.jsx From juno with Apache License 2.0 | 5 votes |
|
render() {
const { gateway } = this.props.settings;
return (
<SettingBlock title={'网关设置'}>
<Table
size={'small'}
pagination={false}
columns={[
...GatewayConfigColumns,
{
title: '操作',
render: (_, record, index) => {
return (
<>
<Popconfirm title={'确定删除吗?'} onConfirm={() => this.onDelete(index)}>
<Button shape={'circle'}>
<DeleteFilled />
</Button>
</Popconfirm>
<Button
shape={'circle'}
onClick={() => this.onEdit(index)}
style={{ marginLeft: '10px' }}
>
<EditFilled />
</Button>
</>
);
},
},
]}
dataSource={gateway}
footer={() => (
<div style={{ textAlign: 'center' }}>
<Button onClick={this.onAddConfig}>
<FileAddFilled />
新增
</Button>
</div>
)}
/>
<ModalAddGateway
visible={this.state.modalAddGateway}
onCancel={() => this.setState({ modalAddGateway: false })}
onSubmit={this.onAddGateway}
/>
<ModalEditGateway
visible={this.state.modalEditGateway}
onCancel={() => this.setState({ modalEditGateway: false })}
onSubmit={this.onUpdateGateway}
fields={this.state.currentEditFields}
/>
</SettingBlock>
);
}
Example #4
| Source File: AppVersionSetting.jsx From juno with Apache License 2.0 | 4 votes |
|
function ModalAddVersion(props) {
let [form] = Form.useForm();
let onFinish = (vals) => {
props.onSubmit && props.onSubmit(vals);
};
return (
<Modal title={'新增应用版本相关设置'} {...props} width={600} onOk={() => form.submit()}>
<Form form={form} labelCol={{ span: 5 }} onFinish={onFinish}>
<Form.Item
label={'应用版本名称'}
name={'name'}
rules={[
{ required: true, message: '请填写版本名称' },
// {pattern: /^(http|https):\/\/[a-zA-Z0-9\.\-\_:]{3,}$\/[abc]*/, message: "地址不符合规则，示例：http://1.2.3.4:3000"}
]}
>
<Input placeholder={'示例: 支持v1.6~v1.7'} />
</Form.Item>
<Form.Item
label={'应用版本号'}
name={'version'}
rules={[
{ required: true, message: '请填写版本号' },
// {pattern: /^(http|https):\/\/[a-zA-Z0-9\.\-\_:]{3,}$\/[abc]*/, message: "地址不符合规则，示例：http://1.2.3.4:3000"}
]}
>
<Input placeholder={'示例: v1.0,v1.2'} />
</Form.Item>
<Form.Item
label={'应用版本Key'}
name={'versionKey'}
rules={[
{ required: true, message: '请填写框架版本Key' },
// {pattern: /^(http|https):\/\/[a-zA-Z0-9\.\-\_:]{3,}$\/[abc]*/, message: "地址不符合规则，示例：http://1.2.3.4:3000"}
]}
>
<Input placeholder={'示例: jupiter1.0series'} />
</Form.Item>
<Form.List name={'dashboards'}>
{(fields, { add, remove }) => {
return (
<div>
<Form.Item label={'Dashboard配置'}>
{fields.map((field, index) => {
return (
<div
style={{
marginBottom: '10px',
display: 'grid',
gridTemplateColumns: '150px auto 50px',
gridColumnGap: '10px',
}}
key={field.key}
>
<Form.Item
{...field}
name={[field.name, 'name']}
key={[field.fieldKey, 'name']}
noStyle
>
<Input placeholder={'Dashboard名称'} />
</Form.Item>
<Form.Item
{...field}
name={[field.name, 'value']}
key={[field.fieldKey, 'value']}
noStyle
rules={[
{ required: true, message: '请填写面板路径' },
{ pattern: /^\/grafana\/.*/, message: '面板路径必须以 /grafana 开头' },
]}
>
<Input placeholder={'Dashboard地址'} />
</Form.Item>
<Button onClick={() => remove(index)}>
<DeleteFilled />
</Button>
</div>
);
})}
<div style={{ marginTop: '10px' }}>
<Button
type="dashed"
onClick={() => {
add();
}}
>
<PlusOutlined /> 新增Dashboard配置
</Button>
</div>
</Form.Item>
</div>
);
}}
</Form.List>
</Form>
</Modal>
);
}
Example #5
| Source File: AppVersionSetting.jsx From juno with Apache License 2.0 | 4 votes |
|
function ModalEditVersion(props) {
let [form] = Form.useForm();
let onFinish = (vals) => {
props.onSubmit && props.onSubmit(vals);
};
useEffect(() => {
props.visible &&
form.setFieldsValue({
...props.fields,
dashboards: props.fields.dashboards || [],
});
}, [props.visible]);
return (
<Modal title={'修改应用版本相关配置'} {...props} width={600} onOk={() => form.submit()}>
<Form form={form} labelCol={{ span: 5 }} onFinish={onFinish}>
<Form.Item
label={'应用版本名称'}
name={'name'}
initialValue={props.fields.name}
rules={[
{ required: true, message: '请填写版本名称' },
// {pattern: /^(http|https):\/\/[a-zA-Z0-9\.\-\_:]{3,}$\/[abc]*/, message: "地址不符合规则，示例：http://1.2.3.4:3000"}
]}
>
<Input placeholder={'示例: 支持v1.6~v1.7'} />
</Form.Item>
<Form.Item
label={'应用版本号'}
name={'version'}
initialValue={props.fields.version}
rules={[
{ required: true, message: '请填写版本号' },
// {pattern: /^(http|https):\/\/[a-zA-Z0-9\.\-\_:]{3,}$\/[abc]*/, message: "地址不符合规则，示例：http://1.2.3.4:3000"}
]}
>
<Input placeholder={'示例: v1.0,v1.2'} />
</Form.Item>
<Form.Item
label={'应用版本Key'}
name={'versionKey'}
initialValue={props.fields.versionKey}
rules={[
{ required: true, message: '请填写框架版本Key' },
// {pattern: /^(http|https):\/\/[a-zA-Z0-9\.\-\_:]{3,}$\/[abc]*/, message: "地址不符合规则，示例：http://1.2.3.4:3000"}
]}
>
<Input placeholder={'示例: jupiter1.0series'} />
</Form.Item>
<Form.List name={'dashboards'} initialValue={props.fields.dashboards}>
{(fields, { add, remove }) => {
return (
<div>
<Form.Item label={'Dashboard配置'}>
{fields.map((field, index) => {
return (
<div
style={{
marginBottom: '10px',
display: 'grid',
gridTemplateColumns: '150px auto 50px',
gridColumnGap: '10px',
}}
key={field.key}
>
<Form.Item
{...field}
name={[field.name, 'name']}
key={[field.fieldKey, 'name']}
noStyle
>
<Input placeholder={'Dashboard名称'} />
</Form.Item>
<Form.Item
{...field}
name={[field.name, 'value']}
key={[field.fieldKey, 'value']}
noStyle
>
<Input placeholder={'Dashboard地址'} />
</Form.Item>
<Button onClick={() => remove(index)}>
<DeleteFilled />
</Button>
</div>
);
})}
<div style={{ marginTop: '10px' }}>
<Button
type="dashed"
onClick={() => {
add();
}}
>
<PlusOutlined /> Dashboard配置
</Button>
</div>
</Form.Item>
</div>
);
}}
</Form.List>
</Form>
</Modal>
);
}
Example #6
| Source File: GatewaySetting.jsx From juno with Apache License 2.0 | 4 votes |
|
function ModalAddGateway(props) {
let [form] = Form.useForm();
let onFinish = (vals) => {
props.onSubmit && props.onSubmit(vals);
};
return (
<Modal title={'新增网关代理'} {...props} width={600} onOk={() => form.submit()}>
<Form form={form} labelCol={{ span: 5 }} onFinish={onFinish}>
<Form.Item label={'名称'} name={'name'} rules={[{ required: true, message: '请输入名称' }]}>
<Input />
</Form.Item>
<Form.Item
label={'访问域名'}
name={'domain'}
rules={[{ required: true, message: '请输入访问域名' }]}
>
<Input placeholder={'该域名指向Juno网关'} />
</Form.Item>
<Form.Item
label={'服务地址'}
name={'host'}
rules={[{ required: true, message: '请输入服务地址' }]}
>
<Input placeholder={'背代理的服务地址，示例: example.com'} />
</Form.Item>
<Form.Item
label={'服务协议'}
name={'scheme'}
rules={[{ required: true, message: '请输入服务协议' }]}
>
<Radio.Group>
<Radio.Button value={'http'}>HTTP</Radio.Button>
<Radio.Button value={'https'}>HTTPS</Radio.Button>
</Radio.Group>
</Form.Item>
<Form.Item
label={'服务超时(秒)'}
name={'timeout'}
rules={[{ required: true, message: '请输入服务超时' }]}
>
<InputNumber />
</Form.Item>
<Form.List name={'headers'}>
{(fields, { add, remove }) => {
return (
<div>
<Form.Item label={'Headers'}>
{fields.map((field, index) => {
return (
<div
style={{
marginBottom: '10px',
display: 'grid',
gridTemplateColumns: '100px auto 50px',
gridColumnGap: '10px',
}}
key={field.key}
>
<Form.Item
{...field}
name={[field.name, 'name']}
key={[field.fieldKey, 'name']}
noStyle
>
<Input placeholder={'Header名称'} />
</Form.Item>
<Form.Item
{...field}
name={[field.name, 'value']}
key={[field.fieldKey, 'value']}
noStyle
>
<Input placeholder={'Header值'} />
</Form.Item>
<Button onClick={() => remove(index)}>
<DeleteFilled />
</Button>
</div>
);
})}
<div style={{ marginTop: '10px' }}>
<Button
type="dashed"
onClick={() => {
add();
}}
>
<PlusOutlined /> 新增Header
</Button>
</div>
</Form.Item>
</div>
);
}}
</Form.List>
</Form>
</Modal>
);
}
Example #7
| Source File: GatewaySetting.jsx From juno with Apache License 2.0 | 4 votes |
|
function ModalEditGateway(props) {
let [form] = Form.useForm();
let onFinish = (vals) => {
props.onSubmit && props.onSubmit(vals);
};
useEffect(() => {
props.visible &&
form.setFieldsValue({
...props.fields,
headers: props.fields.headers || [],
});
}, [props.visible]);
return (
<Modal title={'修改网关代理设置'} {...props} width={600} onOk={() => form.submit()}>
<Form form={form} labelCol={{ span: 5 }} onFinish={onFinish}>
<Form.Item
label={'名称'}
name={'name'}
rules={[{ required: true, message: '请输入名称' }]}
initialValue={props.fields.name}
>
<Input />
</Form.Item>
<Form.Item
label={'访问域名'}
name={'domain'}
rules={[{ required: true, message: '请输入访问域名' }]}
initialValue={props.fields.domain}
>
<Input placeholder={'该域名指向Juno网关'} />
</Form.Item>
<Form.Item
label={'服务地址'}
name={'host'}
rules={[{ required: true, message: '请输入服务地址' }]}
initialValue={props.fields.host}
>
<Input placeholder={'背代理的服务地址，示例: example.com'} />
</Form.Item>
<Form.Item
label={'服务协议'}
name={'scheme'}
rules={[{ required: true, message: '请输入服务协议' }]}
initialValue={props.fields.scheme}
>
<Radio.Group>
<Radio.Button value={'http'}>HTTP</Radio.Button>
<Radio.Button value={'https'}>HTTPS</Radio.Button>
</Radio.Group>
</Form.Item>
<Form.Item
label={'服务超时(秒)'}
name={'timeout'}
rules={[{ required: true, message: '请输入服务超时' }]}
initialValue={props.fields.timeout}
>
<InputNumber />
</Form.Item>
<Form.List name={'headers'} initialValue={props.fields.headers}>
{(fields, { add, remove }) => {
return (
<div>
<Form.Item label={'Headers'}>
{fields.map((field, index) => {
return (
<div
style={{
marginBottom: '10px',
display: 'grid',
gridTemplateColumns: '100px auto 50px',
gridColumnGap: '10px',
}}
key={field.key}
>
<Form.Item
{...field}
name={[field.name, 'name']}
key={[field.fieldKey, 'name']}
noStyle
>
<Input placeholder={'Header名称'} />
</Form.Item>
<Form.Item
{...field}
name={[field.name, 'value']}
key={[field.fieldKey, 'value']}
noStyle
>
<Input placeholder={'Header值'} />
</Form.Item>
<Button onClick={() => remove(index)}>
<DeleteFilled />
</Button>
</div>
);
})}
<div style={{ marginTop: '10px' }}>
<Button
type="dashed"
onClick={() => {
add();
}}
>
<PlusOutlined /> 新增Header
</Button>
</div>
</Form.Item>
</div>
);
}}
</Form.List>
</Form>
</Modal>
);
}
Example #8
| Source File: K8SClusterSetting.jsx From juno with Apache License 2.0 | 4 votes |
|
function K8SClusterSetting(props) {
const k8sCluster = props.settings.k8s_cluster || { list: [] };
const [visibleModalCreateCluster, visibleModalCreateClusterAct] = useBoolean(false);
const [visibleModalEditCluster, visibleModalEditClusterAct] = useBoolean(false);
const [currentEdit, setCurrentEdit] = useState(-1);
const [saveField] = useSettingBlock('k8s_cluster', props.dispatch);
const onEdit = (index) => {
setCurrentEdit(index);
visibleModalEditClusterAct.setTrue();
};
const onDelete = (index) => {
let payload = k8sCluster;
payload.list.splice(index, 1);
save(payload);
};
const save = (payload) => {
return new Promise(async (resolve) => {
const res = await saveField(payload);
props.dispatch({
type: 'setting/loadSettings',
});
resolve(res);
});
};
const onCreate = (fields) => {
let payload = {
...k8sCluster,
list: k8sCluster.list || [],
};
payload.list.push(fields);
save(payload).then((r) => {
visibleModalCreateClusterAct.setFalse();
});
};
const onClickBtnCreate = () => {
visibleModalCreateClusterAct.setTrue();
};
const onUpdate = (fields) => {
let payload = k8sCluster;
payload.list[currentEdit] = fields;
save(payload).then((r) => {
visibleModalEditClusterAct.setFalse();
setCurrentEdit(-1);
});
};
return (
<SettingBlock title={'K8S集群设置'}>
<Table
size={'small'}
pagination={false}
columns={[
{ title: 'Name', dataIndex: 'name' },
{ title: 'Zone', dataIndex: 'zone_code' },
{
title: 'Env',
dataIndex: 'env',
render: (value = []) => value.map((env) => <Tag>{env}</Tag>),
},
{
title: '操作',
render: (_, record, index) => {
return (
<>
<Popconfirm title={'确定删除吗?'} onConfirm={() => onDelete(index)}>
<Button shape={'circle'}>
<DeleteFilled />
</Button>
</Popconfirm>
<Button
shape={'circle'}
onClick={() => onEdit(index)}
style={{ marginLeft: '10px' }}
>
<EditFilled />
</Button>
</>
);
},
},
]}
dataSource={k8sCluster?.list || []}
footer={() => (
<div style={{ textAlign: 'center' }}>
<Button onClick={onClickBtnCreate}>
<FileAddFilled />
新增
</Button>
</div>
)}
/>
<ModalCreateCluster
visible={visibleModalCreateCluster}
onCancel={visibleModalCreateClusterAct.setFalse}
onOk={onCreate}
/>
<ModalEditCluster
visible={visibleModalEditCluster}
onCancel={() => {
visibleModalEditClusterAct.setFalse();
setCurrentEdit(-1);
}}
index={currentEdit}
cluster={currentEdit > -1 ? k8sCluster.list[currentEdit] : null}
onOk={onUpdate}
/>
</SettingBlock>
);
}
