title: t()

in hugegraph-hubble/hubble-fe/src/components/graph-management/metadata-configs/vertex-type/ReuseVertexTypes.tsx [599:700]
95 lines of code
9 McCabe index (conditional complexity)

      title: t('addition.operate.operate'),
      dataIndex: 'manipulation',
      width: '20%',
      render(_: never, records: any, index: number) {
        if (index === propertyIndexEditIndex) {
          const originalName = vertexTypeStore.checkedReusableData!
            .propertyindex_conflicts[index].entity.name;
          const changedName = vertexTypeStore.editedCheckedReusableData!
            .propertyindex_conflicts[index].entity.name;
          const isChanged = changedName !== originalName;

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

                  vertexTypeStore.mutateReuseData(
                    'property_index',
                    originalName,
                    changedName
                  );

                  setPropertyIndexEditIndex(null);
                  vertexTypeStore.mutateReusablePropertyIndexNameChangeIndexes(
                    index
                  );
                }}
              >
                {t('addition.common.save')}
              </span>
              <span
                className="metadata-properties-manipulation"
                onClick={() => {
                  vertexTypeStore.resetValidateReuseErrorMessage(
                    'property_index'
                  );
                  setPropertyIndexEditIndex(null);
                  vertexTypeStore.resetEditedReusablePropertyIndexName(index);
                }}
              >
                {t('addition.common.cancel')}
              </span>
            </div>
          );
        }

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

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

                setPropertyIndexEditIndex(null);

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