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

wix-style-react

export const _addNewItem = `
<StyledNestableList
  addItemLabel="Add new Item to Level 1"
  items={[
    {
      id: 1,
      options: [{ value: 'Item 1' }],
      addItemLabel: 'Add new Item to Level 2',
      children: [{ id: 2, options: [{ value: 'Item 2' }] }],
    },
  ]}
  onChange={() => {}}
/>;
`;

export const _maxDepthOfTheList = `
<StorybookComponents.Stack flexDirection="column">
  Max Depth: 3 levels
  <StyledNestableList
    maxDepth={3}
    items={[
      {
        id: '1',
        options: [
          {
            value: 'Item 1',
          },
        ],
        children: [
          {
            id: '2',
            options: [
              {
                value: 'Item 2',
              },
            ],
            children: [
              {
                id: '3',
                options: [
                  {
                    value: 'Item 3',
                  },
                ],
              },
            ],
          },
        ],
      },
    ]}
    onChange={() => {}}
  />
  Max Depth: 2 levels
  <StyledNestableList
    maxDepth={2}
    items={[
      {
        id: '4',
        options: [
          {
            value: 'Item 1',
          },
        ],
        children: [
          {
            id: '5',
            options: [
              {
                value: 'Item 2',
              },
            ],
          },
          {
            id: '6',
            options: [
              {
                value: 'I will not move to Level 3',
              },
            ],
          },
        ],
      },
    ]}
    onChange={() => {}}
  />
</StorybookComponents.Stack>;
`;

export const _preventChangeDepth = `
<StyledNestableList
  preventChangeDepth={true}
  items={[
    {
      id: 1,
      options: [{ value: 'I move only in Level 1' }],
      children: [
        {
          id: 2,
          options: [{ value: 'I move only in Level 2' }],
        },
        {
          id: 3,
          options: [{ value: 'I move only in Level 2' }],
        },
      ],
    },
    {
      id: 4,
      options: [{ value: 'I move only in Level 1' }],
      children: [
        {
          id: 5,
          options: [{ value: 'I move only in Level 2' }],
        },
      ],
    },
  ]}
  onChange={() => {}}
/>;
`;

export const _lockDragging = `
<StyledNestableList
  items={[
    {
      id: 1,
      options: [{ value: 'I cannot be dragged' }],
      draggable: false,
      children: [
        {
          id: 2,
          options: [{ value: 'I cannot be dragged' }],
          draggable: false,
        },
        { id: 3, options: [{ value: 'I move freely' }] },
      ],
    },
    {
      id: 4,
      options: [{ value: 'I move freely' }],
      children: [{ id: 5, options: [{ value: 'I move freely' }] }],
    },
  ]}
  onChange={() => {}}
/>;
`;

export const _readOnlyMode = `
<StyledNestableList
  readOnly={true}
  items={[
    {
      id: 1,
      options: [{ value: 'Item 1' }],
      children: [
        { id: 2, options: [{ value: 'Item 2' }] },
        { id: 3, options: [{ value: 'Item 3' }] },
      ],
    },
  ]}
  onChange={() => {}}
/>;
`;

export const _collapseItems = `
() => {
  const CollapseIcon = ({ id, allItems }) => {
    const onCollapse = () => {
      setItems(
        allItems.map(item =>
          item.id === id ? { ...item, isCollapsed: !item.isCollapsed } : item,
        ),
      );
    };
    const { isCollapsed } = allItems.filter(item => item.id === id)[0];

    return (
      <Box align="right">
        <IconButton skin="light" onClick={onCollapse}>
          {isCollapsed ? <Icons.ChevronDown /> : <Icons.ChevronUp />}
        </IconButton>
      </Box>
    );
  };

  const [items, setItems] = React.useState([
    {
      id: 'item-1',
      options: [{ value: 'Item 1' }],
    },
    {
      id: 'item-2',
      isCollapsed: true,
      options: [{ value: 'Show and hide my children' }],
      children: [
        {
          id: 'item-2-child-1',
          options: [{ value: 'Child 1' }],
        },
        {
          id: 'item-2-child-2',
          options: [{ value: 'Child 2' }],
        },
        {
          id: 'item-2-child-3',
          options: [{ value: 'Child 3' }],
        },
      ],
    },
    {
      id: 'item-3',
      options: [{ value: 'Item 3' }],
    },
  ]);

  const itemsWithUpdatedControls = items.map(item => {
    return {
      ...item,
      options: item.children
        ? [
            item.options[0],
            {
              value: <CollapseIcon id={item.id} allItems={items} />,
            },
          ]
        : [item.options[0]],
    };
  });

  return (
    <StyledNestableList
      items={itemsWithUpdatedControls}
      onChange={onChangeData => setItems(onChangeData.items)}
    />
  );
};
`;

export const _bottomBorder = `
<StorybookComponents.Stack flexDirection="column">
  <StyledNestableList
    items={[
      {
        id: 1,
        options: [{ value: 'Item 1' }],
      },
      {
        id: 2,
        options: [{ value: 'Item 2' }],
      },
      {
        id: 3,
        options: [{ value: 'No bottom border (default)' }],
      },
    ]}
    onChange={() => {}}
  />

  <StyledNestableList
    withBottomBorder
    items={[
      {
        id: 4,
        options: [{ value: 'Item 1' }],
      },
      {
        id: 5,
        options: [{ value: 'Item 2' }],
      },
      {
        id: 6,
        options: [{ value: 'With bottom border' }],
      },
    ]}
    onChange={() => {}}
  />
</StorybookComponents.Stack>;
`;

export const _sortItemsIntoCategories = `
() => {
  const CollapseIcon = ({ id, allItems }) => {
    const onCollapse = () => {
      setItems(
        allItems.map(item =>
          item.id === id ? { ...item, isCollapsed: !item.isCollapsed } : item,
        ),
      );
    };
    const { isCollapsed } = allItems.filter(item => item.id === id)[0];

    return (
      <Box align="right">
        <IconButton skin="light" onClick={onCollapse}>
          {isCollapsed ? <Icons.ChevronDown /> : <Icons.ChevronUp />}
        </IconButton>
      </Box>
    );
  };

  const ItemText = ({ title, description }) => (
    <Box direction="vertical">
      <Text weight="normal">{title}</Text>
      {description && (
        <Text size="small" secondary>
          {description}
        </Text>
      )}
    </Box>
  );

  const [items, setItems] = React.useState([
    {
      id: 'item-1',
      addItemLabel: 'Add Step',
      options: [
        {
          value: (
            <ItemText
              title="The Basics"
              description="The very first things you should know"
            />
          ),
        },
      ],
      children: [
        {
          id: 'item-1-child-1',
          options: [
            { value: <ItemText title="What's a business plan, anyway?" /> },
          ],
        },
        {
          id: 'item-1-child-2',
          options: [
            { value: <ItemText title="Why does the business exist?" /> },
          ],
        },
      ],
    },
    {
      id: 'item-2',
      isCollapsed: true,
      addItemLabel: 'Add Step',
      options: [
        {
          value: (
            <ItemText
              title="Thinking Ahead"
              description="Having the vision in mind"
            />
          ),
        },
      ],
      children: [
        {
          id: 'item-2-child-1',
          options: [
            { value: <ItemText title="How will you make it happen?" /> },
          ],
        },
        {
          id: 'item-2-child-2',
          options: [{ value: <ItemText title="What will it cost?" /> }],
        },
      ],
    },
    {
      id: 'item-3',
      isCollapsed: true,
      addItemLabel: 'Add Step',
      options: [
        {
          value: (
            <ItemText
              title="The Presentation"
              description="How you communicate is how you think"
            />
          ),
        },
      ],
      children: [
        {
          id: 'item-3-child-1',
          options: [{ value: <ItemText title="Bring it all together" /> }],
        },
      ],
    },
  ]);

  const itemsWithUpdatedControls = items.map(item => {
    return {
      ...item,
      options: item.children
        ? [
            item.options[0],
            {
              value: <CollapseIcon id={item.id} allItems={items} />,
            },
          ]
        : [item.options[0]],
    };
  });

  return (
    <Card>
      <Card.Header
        title="Content"
        suffix={
          <PopoverMenu
            triggerElement={
              <Button
                priority="secondary"
                prefixIcon={<Icons.Add />}
                size="small"
              >
                Add
              </Button>
            }
          >
            <PopoverMenu.MenuItem text="Add Step" />
            <PopoverMenu.MenuItem text="Add Section" />
          </PopoverMenu>
        }
      />
      <Card.Divider />
      <Box minHeight="1px" />
      <StyledNestableList
        items={itemsWithUpdatedControls}
        onChange={onChangeData => setItems(onChangeData.items)}
        addItemLabel="Add Section"
      />
    </Card>
  );
};
`;

export const _rearrangeTheOrderOfItems = `
<SidePanel>
  <SidePanel.Header title="Site Pages" />
  <Box gap="SP1" direction="vertical" height="502px">
    <Box margin="SP4 SP4 0 SP4">
      <SectionHelper
        title="Manage Pages & Menus Seperately"
        onClose={() => {}}
        appearance="standard"
      >
        Go to any menu to customize which pages and links are displayed.
        <TextButton skin="dark" size="small" underline="always">
          Learn more
        </TextButton>
      </SectionHelper>
    </Box>
    <StyledNestableList
      withBottomBorder
      items={[
        {
          id: 1,
          options: [{ value: 'Home' }],
        },
        {
          id: 2,
          options: [{ value: 'Salons' }],
        },
        {
          id: 3,
          options: [{ value: 'Shop' }],
        },
        {
          id: 4,
          options: [{ value: 'Support' }],
        },
      ]}
      onChange={() => {}}
    />
  </Box>
  <SidePanel.Footer>
    <Box align="right">
      <Button prefixIcon={<Icons.Add />}>Add Page</Button>
    </Box>
  </SidePanel.Footer>
</SidePanel>;
`;