---
name: SortableListSection
description: A section for the property builder that is used to provide a user interface which generates an array of objects for the programmer.  •  It is useful for editor objects that need to gather informatino from the user in order to gather a list of data (e.g. List, Navigation, Stacks, Accordian, Repeater, Shapes, SmartContainer, Stepper, Tab Switcher)
workflow: ""
user_stories: []
test_plan:
  - scenario: Rendering
    expected: Should show in dom
    automated: "Yes"
    type: End to End
screens: "http://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/component_navigation.JPG"
components:
  - name: SortableList
    type: components
    description: A component that provides a nice UX for data entry of lists.  Displays a list of items based on the incoming array, facilitates CRUD actions via drag and drop and customizable buttons and display types.
    exists: "No"
    package: "No"
    schema:
      - name: data
        type: ItemComponentProps[]
        description: The incoming data that this component will manage
        required: true
        schema_type: prop
      - name: itemComponent
        type: React.ReactNode
        description: The component to use that will represent each item in the incoming data array
        required: false
        schema_type: prop
      - name: addButtonComponent
        type: React.ReactNode
        description: A component to use instead of the default add button component
        required: false
        schema_type: prop
      - name: editButtonComponent
        type: React.ReactNode
        description: A component to use instead of the default edit button component
        required: false
        schema_type: prop
      - name: deleteButtonComponent
        type: React.ReactNode
        description: A component to use instead of the default delete button component
        required: false
        schema_type: prop
      - name: showCRUDOnHover
        type: boolean
        description: Whether or not show the CRUD icons when the mouse is hovered on the item or not (always shows)
        required: false
        schema_type: prop
      - name: showDragHandle
        type: boolean
        description: Whether or not to show a draggable handle indicator next to each item
        required: false
        schema_type: prop
      - name: canDragAndDrop
        type: boolean
        description: Whether or not drag and drop is enabled
        required: false
        schema_type: prop
      - name: canDelete
        type: boolean
        description: Whether or not to display the delete icon next to each item
        required: false
        schema_type: prop
      - name: canAdd
        type: boolean
        description: Whether or not to show the add button
        required: false
        schema_type: prop
      - name: canEdit
        type: boolean
        description: Whether or not to display the edit icon next to each item
        required: false
        schema_type: prop
      - name: onChange
        type: (section:ItemComponentProps[]) => void
        description: Triggered when an item changes.  Returns an updated version of the data array.  It's up to the component provider to update the data prop
        required: false
        schema_type: prop
      - name: onEdit
        type: (section:ItemComponentProps) => void
        description: Triggers when the edit button next to an item is clicked
        required: false
        schema_type: prop
      - name: onAdd
        type: () => void
        description: Triggers when the [Add] button is clicked
        required: false
        schema_type: prop
      - name: onDelete
        type: (section:ItemComponentProps) => void
        description: Triggers when the [Delete] button is clicked
        required: false
        schema_type: prop
    tests:
      - it: Rendering --> Should render in the dom
        type: Integration
      - it: Rendering --> Should render the same number of item components as the number of items in the provided data prop
        type: Integration
      - it: Rendering --> Should pass along the object's payload as props to the itemCmponent
        type: Integration
      - it: Rendering --> Should render an addButtonComponent (instead of the default component) in each item if one is provided
        type: Integration
      - it: Rendering --> Should render an editButtonComponent (instead of the default component) in each item if one is provided
        type: Integration
      - it: Rendering --> Should render an deleteButtonComponent (instead of the default component) in each item if one is provided
        type: Integration
      - it: Rendering --> Should not display a delete button if the canDelete prop is false
        type: Integration
      - it: Rendering --> Should not display an add button if the canDelete prop is false
        type: Integration
      - it: Rendering --> Should not display an edit button if the canDelete prop is false
        type: Integration
      - it: Actions --> Should not allow drag and drop actions if the canDragAndDrop prop is false
        type: Integration
      - it: Events --> Should trigger the onChange event when the items are re-ordered via drag-and-drop
        type: Integration
      - it: Events --> Should include an updated list of items from the onChange event return function when the sections are re-ordered via drag and drop
        type: Integration
      - it: Events --> Should trigger the onEdit event when an edit button is clicked
        type: Integration
      - it: Events --> Should include the associated object's payload when the onEdit event is called
        type: Integration
      - it: Events --> Should trigger the onAdd event when a add button is clicked
        type: Integration
      - it: Events --> Should trigger the onDelete event when a delete button is clicked
        type: Integration
      - it: Events --> Should include the associated object's payload when the onDelete event is called
        type: Integration
database: []
api: []