render()

in hugegraph-hubble/hubble-fe/src/components/graph-management/metadata-configs/graph-view/CheckProperty.tsx [120:214]


      render(_: any, records: MetadataProperty, index: number) {
        return (
          <Tooltip
            placement="bottom-end"
            tooltipShown={index === popIndex}
            modifiers={{
              offset: {
                offset: '0, 10'
              }
            }}
            tooltipWrapperProps={{
              className: 'metadata-graph-tooltips',
              style: { zIndex: 1041 }
            }}
            tooltipWrapper={
              <div ref={deleteWrapperRef}>
                {metadataPropertyStore.metadataPropertyUsingStatus &&
                metadataPropertyStore.metadataPropertyUsingStatus[
                  records.name
                ] ? (
                  <p style={{ width: 200 }}>
                    {t('addition.message.property-using-cannot-delete')}
                  </p>
                ) : (
                  <>
                    <p>{t('addition.message.property-del-confirm')}</p>
                    <p>{t('addition.edge.confirm-del-edge-careful-notice')}</p>
                    <div
                      style={{
                        display: 'flex',
                        marginTop: 12,
                        color: '#2b65ff',
                        cursor: 'pointer'
                      }}
                    >
                      <div
                        style={{ marginRight: 16, cursor: 'pointer' }}
                        onClick={async () => {
                          setPopIndex(null);
                          await metadataPropertyStore.deleteMetadataProperty([
                            records.name
                          ]);
                          if (
                            metadataPropertyStore.requestStatus
                              .deleteMetadataProperty === 'success'
                          ) {
                            Message.success({
                              content: t('addition.common.del-success'),
                              size: 'medium',
                              showCloseIcon: false
                            });
                            metadataPropertyStore.fetchMetadataPropertyList();
                          }
                          if (
                            metadataPropertyStore.requestStatus
                              .deleteMetadataProperty === 'failed'
                          ) {
                            Message.error({
                              content: metadataPropertyStore.errorMessage,
                              size: 'medium',
                              showCloseIcon: false
                            });
                          }
                        }}
                      >
                        {t('addition.common.confirm')}
                      </div>
                      <div
                        onClick={() => {
                          setPopIndex(null);
                        }}
                      >
                        {t('addition.common.cancel')}
                      </div>
                    </div>
                  </>
                )}
              </div>
            }
            childrenProps={{
              className: 'metadata-graph-property-manipulation',
              async onClick() {
                await metadataPropertyStore.checkIfUsing([records.name]);
                if (
                  metadataPropertyStore.requestStatus.checkIfUsing === 'success'
                ) {
                  setPopIndex(index);
                }
              }
            }}
          >
            {t('addition.common.del')}
          </Tooltip>
        );
      }