render()

in hugegraph-hubble/hubble-fe/src/components/graph-management/metadata-configs/edge-type/ReuseEdgeTypes.tsx [176:284]
97 lines of code
10 McCabe index (conditional complexity)

      render(_: never, records: any, index: number) {
        const originalName = edgeTypeStore.checkedReusableData!
          .edgelabel_conflicts[index].entity.name;
        const changedName = edgeTypeStore.editedCheckedReusableData!
          .edgelabel_conflicts[index].entity.name;
        const isChanged = changedName !== originalName;

        if (edgeTypeEditIndex === index) {
          return (
            <div>
              <span
                className="metadata-properties-manipulation"
                style={{
                  marginRight: 16,
                  color: isChanged ? '#2b65ff' : '#999'
                }}
                onClick={() => {
                  if (
                    !isChanged ||
                    !edgeTypeStore.validateReuseData(
                      'edgeType',
                      originalName,
                      changedName
                    )
                  ) {
                    return;
                  }

                  edgeTypeStore.mutateReuseData(
                    'edgeType',
                    originalName,
                    changedName
                  );
                  setEdgeTypeEditIndex(null);
                  edgeTypeStore.mutateReusableEdgeTypeChangeIndexes(index);
                }}
              >
                {t('addition.common.save')}
              </span>
              <span
                className="metadata-properties-manipulation"
                onClick={() => {
                  edgeTypeStore.resetValidateReuseErrorMessage('edgeType');
                  setEdgeTypeEditIndex(null);
                  edgeTypeStore.resetEditedReusableEdgeTypeName(index);
                }}
              >
                {t('addition.common.cancel')}
              </span>
            </div>
          );
        }

        return (
          <div>
            <span
              className="metadata-properties-manipulation"
              style={{
                marginRight: 16,
                color: edgeTypeEditIndex === null ? '#2b65ff' : '#999'
              }}
              onClick={() => {
                if (edgeTypeEditIndex !== null) {
                  return;
                }

                setEdgeTypeEditIndex(index);
              }}
            >
              {t('addition.operate.rename')}
            </span>
            <span
              className="metadata-properties-manipulation"
              style={{
                color: edgeTypeEditIndex === null ? '#2b65ff' : '#999'
              }}
              onClick={async () => {
                if (edgeTypeEditIndex !== null) {
                  return;
                }

                setEdgeTypeEditIndex(null);

                // remove selected status of the property in <Transfer />
                const newSelectedList = [...selectedList].filter(
                  (property) =>
                    property !==
                    edgeTypeStore.editedCheckedReusableData!
                      .edgelabel_conflicts[index].entity.name
                );

                mutateSelectedList(newSelectedList);

                // notice: useState hooks cannot sync updated state value, so the length is still 1
                if (selectedList.length === 1) {
                  setCurrentStatus(1);
                  // remove edit status after return previous
                  edgeTypeStore.clearReusableNameChangeIndexes();
                  return;
                }

                edgeTypeStore.deleteReuseData('edgelabel_conflicts', index);
              }}
            >
              {t('addition.common.del')}
            </span>
          </div>
        );
      }