Добавление кнопки в навигатор для осуществления выбора - PullRequest
Новая
       21

Добавление кнопки в навигатор для осуществления выбора

2 голосов
/ 08 ноября 2019

Navigator содержит функцию, с помощью которой пользователи могут определять свои собственные представления таблиц, см. Документы DAML для Navigator .

Возможно ли создать представление, в котором один столбец отображает кнопку, которая прищелкнул, сразу осуществляет выбор?

1 Ответ

2 голосов
/ 08 ноября 2019

Да, это возможно. Настраиваемые представления позволяют визуализировать произвольные компоненты React, поэтому давайте создадим один для осуществления выбора.

Сначала начнем с рабочего файла frontend-config.js. Быстрый стартовый проект DAML содержит один элемент.

Затем убедитесь, что вы импортировали как минимум следующие символы в верхней части файла: 

import React from 'react';
import { Button, DamlLfValue, withExercise } from '@da/ui-core';

Затем определитеследующие значения верхнего уровня (например, чуть ниже export const version={...}): 


// Create a React component to render a button that exercises a choice on click.
const ExerciseChoiceButtonBase = (props) => (
  <Button
    onClick={(e) => {
      props.exercise(props.contractId, props.choiceName, props.choiceArgument);
      e.stopPropagation();
    }}
  >
    {props.title}
  </Button>
)
ExerciseChoiceButtonBase.displayName = 'ExerciseChoiceButtonBase';

// Inject the `exercise` property to the props of the wrapped component.
// The value of that property is a convenience function to send a
// network request to exercise a choice.
const ExerciseChoiceButton = withExercise()(ExerciseChoiceButtonBase)
ExerciseChoiceButton.displayName = 'ExerciseChoiceButton';

Наконец, используйте следующий код в определении ячейки таблицы: 

{
        key: "id",
        title: "Action",
        createCell: ({rowData}) => {
          // Render our new component.
          // The contract ID and choice argument are computed from the current contract row.
          return ({
            type: "react",
            value: <ExerciseChoiceButton
              title='Transfer to issuer'
              contractId={rowData.id}
              choiceArgument={
                DamlLfValue.record(undefined, [
                  {label: 'newOwner', value: DamlLfValue.party(DamlLfValue.toJSON(rowData.argument).issuer)}
                ])
              }
              choiceName='Iou_Transfer'
            />
          });
        },
        sortable: true,
        width: 80,
        weight: 3,
        alignment: "left"
}

Другой вариантбыло бы создать компонент React, где обработчик onClick отправляет запрос REST API, используя fetch(). Проверяйте сетевой трафик при осуществлении выбора через пользовательский интерфейс Navigator, чтобы выяснить формат запроса.

...