@ea-lab/reactive-json-docs/public/rjbuild/docs/core/reaction/moveData.yaml

Complete documentation for Reactive-JSON - Components, examples and LLM-parsable guides

renderView:
  - type: Markdown
    content: |
      # Reaction: moveData

      The `moveData` reaction changes the position of an element within an array in the global data context.

      ## Properties

  - type: DefinitionList
    content:
      - term:
          code: path
          after: "(string, optional)"
        details:
          type: Markdown
          content: "The path to the array element to move. Required if `target` is not used"
      - term:
          code: target
          after: "(string, optional)"
        details:
          type: Markdown
          content: "If set to `currentTemplateData`, the reaction will target the data associated with the current template item"
      - term:
          code: parentLevel
          after: "(number, optional)"
        details:
          type: Markdown
          content: "Used with `target: 'currentTemplateData'`. Specifies how many levels to go up from the current data path to find the element to move"
      - term:
          code: increment
          after: "(integer, required)"
        details:
          type: Markdown
          content: "The number of positions to move the element. A positive integer moves it down (towards the end of the array), and a negative integer moves it up (towards the beginning)"

  - type: Markdown
    content: |
      ## Behavior

      - When triggered, `moveData` repositions an element within an array.
      - **Path Mode**: Identifies the element to move using its full `path`.
      - **Target Mode**: Identifies the element using `target: 'currentTemplateData'`, typically within a `Switch`.
      - The `increment` value determines the direction and magnitude of the move. For example, `increment: 1` moves the item one position down, and `increment: -1` moves it one position up.
      - The reaction has no effect if the target is not an array or if the move is out of bounds.

      ## Limitations

      - The target data must be an element within an array. The reaction will not work on objects.
      - An `increment` must be provided.
      - Moving an element past the beginning or end of the array has no effect (e.g., moving the first item up).

  - type: RjBuildDescriber
    title: "Moving an item in a list"
    description: |
      This example demonstrates how to move items up and down in a to-do list.
      Each item has "Up" and "Down" buttons that trigger the `moveData` reaction with an `increment` of -1 or 1.
    toDescribe:
      renderView:
        - type: Switch
          content: ~.todos
          singleOption:
            load: todo_item
      templates:
        todo_item:
          type: div
          content:
            - ~.text
            - type: button
              content: "Up"
              attributes:
                style:
                  marginLeft: 10px
              actions:
                - what: moveData
                  on: click
                  target: currentTemplateData
                  increment: -1
            - type: button
              content: "Down"
              attributes:
                style:
                  marginLeft: 5px
              actions:
                - what: moveData
                  on: click
                  target: currentTemplateData
                  increment: 1
      data:
        todos:
          - text: "Buy milk"
          - text: "Learn Reactive-JSON"
          - text: "Build an app"