@ant-design/icons#EditFilled JavaScript Examples

The following examples show how to use @ant-design/icons#EditFilled. 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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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: K8SClusterSetting.jsx    From juno with Apache License 2.0 4 votes vote down vote up 
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>
  );
}