wix-style-react/src/StyledNestableList/docs/StyledNestableList.content.js

wix-style-react

export default {
  description:
    'Nestable List lets users sort their list items into hierarchies (nests) using drag and drop.',
  do: [
    'Use it to organize items into (sub-)categories.',
    'Use it to create lists that users can add new items and relationships to.',
  ],
  dont: [
    'Don’t use it to show static (non interactive) lists. Use <Accordion/> or <Table/> instead.',
    'Don’t use it for lists that span across multiple pages.',
  ],
  featureExamples: [
    {
      title: 'Add New Item',
      description: `Let users add a new parent item (level 1) or new children items with \`addItemLabel\` prop.
      It accepts a text string value which is generated as a label for a text button.`,
      example: '_addNewItem',
    },
    {
      title: 'Max Depth of the List',
      description: `Define a maximum depth (in levels) for the list with \`maxDepth\` prop.<br><br>
      Default \`maxDepth\` value is 10.`,
      example: '_maxDepthOfTheList',
    },
    {
      title: 'Prevent Change Depth',
      description: `Lock the existing depth for all items in the list with \`preventChangeDepth\` prop. This will still let users change item’s order, but only at the same hierarchical level.<br><br>
      E.g., if the list contains carts and products, putting carts into products should be constrained.<br><br>
      Default \`preventChangeDepth\` value is \`false\` (i.e., users are able to drag and drop an item to any level).`,
      example: '_preventChangeDepth',
    },
    {
      title: 'Lock Dragging',
      description: `Lock an individual item’s position with \`items\` prop, selecting \`draggable\` to be \`false\`.<br><br>
      Items which are not locked can still freely change their position in the list.`,
      example: '_lockDragging',
    },
    {
      title: 'Read only mode',
      description: `Prevent any reordering in the list with \`readOnly\` prop. List will not display any interactive icons.`,
      example: '_readOnlyMode',
    },
    {
      title: 'Collapse Items',
      description: `Let children items collapse into their parent level with \`items\` prop, selecting \`isCollapsed\` to be \`true\`.<br><br>
      By default, any item’s children are also collapsed when the item is selected and being dragged.`,
      example: '_collapseItems',
    },
    {
      title: 'Bottom border',
      description: `Add a bottom border to the last item in the list with \`withBottomBorder\` prop (default value is \`false\`).<br><br>
      Use the border when the list is outside the card / modal (e.g., in the sidebar) and on white backgrounds.`,
      example: '_bottomBorder',
    },
  ],
  commonUseCaseExamples: [
    {
      title: 'Sort items into (sub-) categories',
      description: `Use Nestable List to let the users organize their items (posts, articles, products, etc.) into categories and subcategories.<br><br>
      Use any necessary <a href="https://www.wix-style-react.com/?path=/story/components-lists-table--tablelistitem" target="_blank">\`<TableListItem/>\`</a> 
      props to format the style and content inside the list items.`,
      example: '_sortItemsIntoCategories',
    },
    {
      title: 'Rearrange the order of items',
      description: `Use Nestable List to allow quick rearrangement of list items.<br><br>
      In \`<SidePanel/>\` or other white backgrounds, use \`withBottomBorder\` prop to add a border (divider) at the end of the list.`,
      example: '_rearrangeTheOrderOfItems',
    },
  ],
};