title: t()

in hugegraph-hubble/hubble-fe/src/components/graph-management/metadata-configs/property/ReuseProperties.tsx [165:264]
89 lines of code
7 McCabe index (conditional complexity)

      title: t('addition.operate.operate'),
      dataIndex: 'manipulation',
      width: '20%',
      render(_: never, records: any, index: number) {
        if (index === editIndex) {
          return (
            <div>
              <span
                className="metadata-properties-manipulation"
                style={{ marginRight: 16 }}
                onClick={() => {
                  const isReady = metadataPropertyStore.validateRenameReuseProperty(
                    index
                  );

                  if (isReady) {
                    setEditIndex(null);

                    metadataPropertyStore.mutateReusablePropertyNameChangeIndexes(
                      index
                    );
                  }
                }}
              >
                {t('addition.common.save')}
              </span>
              <span
                className="metadata-properties-manipulation"
                onClick={() => {
                  setEditIndex(null);
                  metadataPropertyStore.resetValidateRenameReuseProperty();
                  metadataPropertyStore.resetEditedReusablePropertyName(index);
                }}
              >
                {t('addition.common.cancel')}
              </span>
            </div>
          );
        }

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

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

                setEditIndex(null);

                const editedCheckedReusableProperties = cloneDeep(
                  metadataPropertyStore.editedCheckedReusableProperties!
                );

                editedCheckedReusableProperties.propertykey_conflicts.splice(
                  index,
                  1
                );

                // remove selected status of the property in <Transfer />
                mutateSelectedList(
                  [...selectedList].filter(
                    (property) =>
                      property !==
                      metadataPropertyStore.editedCheckedReusableProperties!
                        .propertykey_conflicts[index].entity.name
                  )
                );

                // remove property in Table
                metadataPropertyStore.mutateEditedReusableProperties(
                  editedCheckedReusableProperties
                );
              }}
            >
              {t('addition.common.del')}
            </span>
          </div>
        );
      }