divkit/test_data/interactive_snapshot_test_data/div-gallery/item-builder.json

{
  "description": "Gallery with item_builder.",
  "platforms": [
    "android",
    "ios",
    "web"
  ],
  "div_data": {
    "templates": {
      "exampleCard": {
        "type": "container",
        "border": {
          "corner_radius": 16,
          "stroke": {
            "color": "#aaaaaa",
            "width": 1
          }
        },
        "margins": {
          "bottom": 6
        },
        "orientation": "vertical",
        "paddings": {
          "top": 12,
          "bottom": 12,
          "left": 12,
          "right": 12
        }
      }
    },
    "card": {
      "log_id": "prototypes",
      "variables": [
        {
          "name": "data",
          "type": "array",
          "value": [
            {
              "style": "only_text",
              "title": "First text card"
            },
            {
              "style": "only_text",
              "title": "Second text card"
            },
            {
              "style": "only_text",
              "title": "Third text card"
            },
            {
              "style": "with_image",
              "title": "Card with image",
              "image_url": "https://yastatic.net/s3/home/divkit/chess.png"
            }
          ]
        }
      ],
      "states": [
        {
          "state_id": 0,
          "div": {
            "type": "gallery",
            "orientation": "vertical",
            "item_builder": {
              "type": "prototype",
              "data": "@{data}",
              "data_element_name": "item",
              "prototypes": [
                {
                  "selector": "@{getStringFromDict(item, 'style') == 'only_text'}",
                  "div": {
                    "type": "exampleCard",
                    "items": [
                      {
                        "type": "text",
                        "text": "@{getStringFromDict(item, 'title')}",
                        "width": {
                          "type": "wrap_content"
                        },
                        "font_size": 16,
                        "margins": {
                          "bottom": 4
                        }
                      }
                    ],
                    "width": {
                      "type": "wrap_content"
                    }
                  }
                },
                {
                  "selector": "@{getStringFromDict(item, 'style') == 'with_image'}",
                  "div": {
                    "type": "exampleCard",
                    "items": [
                      {
                        "type": "image",
                        "image_url": "@{getStringFromDict(item, 'image_url')}",
                        "width": {
                          "type": "fixed",
                          "value": 50
                        },
                        "height": {
                          "type": "fixed",
                          "value": 50
                        }
                      },
                      {
                        "type": "text",
                        "text": "@{getStringFromDict(item, 'title')}",
                        "width": {
                          "type": "wrap_content"
                        },
                        "alignment_vertical": "center",
                        "font_size": 16,
                        "margins": {
                          "left": 4
                        }
                      }
                    ],
                    "width": {
                      "type": "wrap_content"
                    }
                  }
                }
              ]
            }
          }
        }
      ]
    }
  },
  "steps": [
    {
      "expected_screenshot": "step0.png"
    },
    {
      "div_actions": [
        {
          "typed": {
            "type": "array_remove_value",
            "variable_name": "data",
            "index": 1
          },
          "log_id": "remove item"
        }
      ]
    },
    {
      "div_actions": [
        {
          "typed": {
            "type": "array_insert_value",
            "variable_name": "data",
            "index": 2,
            "value": {
              "type": "dict",
              "value": {
                "style": "with_image",
                "title": "New card with image",
                "image_url": "https://yastatic.net/s3/home/divkit/chess.png"
              }
            }
          },
          "log_id": "add item"
        }
      ]
    },
    {
      "div_actions": [
        {
          "typed": {
            "type": "set_variable",
            "variable_name": "data",
            "value": {
              "type": "array",
              "value": [
                {
                  "style": "with_image",
                  "title": "First card with image",
                  "image_url": "https://yastatic.net/s3/home/divkit/chess.png"
                },
                {
                  "style": "with_image",
                  "title": "Second card with image",
                  "image_url": "https://yastatic.net/s3/home/divkit/chess.png"
                },
                {
                  "style": "with_image",
                  "title": "Third card with image",
                  "image_url": "https://yastatic.net/s3/home/divkit/chess.png"
                },
                {
                  "style": "only_text",
                  "title": "Text card"
                }
              ]
            }
          },
          "log_id": "set new data"
        }
      ]
    },
    {
      "div_actions": [
        {
          "typed": {
            "type": "set_variable",
            "variable_name": "data",
            "value": {
              "type": "array",
              "value": [
                {
                  "style": "only_text",
                  "title": "First text card"
                },
                {
                  "style": "only_text",
                  "title": "Second text card"
                },
                {
                  "style": "only_text",
                  "title": "Third text card"
                },
                {
                  "style": "with_image",
                  "title": "Card with image",
                  "image_url": "https://yastatic.net/s3/home/divkit/chess.png"
                }
              ]
            }
          },
          "log_id": "restore data"
        }
      ],
      "expected_screenshot": "step0.png"
    }
  ]
}