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

wix-style-react

import React from 'react';
import StyledNestableList from '..';
import Box from '../../Box';
import Image from '../../Image';
import Text from '../../Text';
import PopoverMenu from '../../PopoverMenu';
import IconButton from '../../IconButton';
import * as Icons from 'wix-ui-icons-common';

export default () => {
  const TableListItemContent = ({ imageSrc, title, description }) => (
    <Box align="space-between" verticalAlign="middle">
      <Box verticalAlign="middle">
        <Image width="72px" height="48px" src={imageSrc} />
        <Box marginLeft="SP3" direction="vertical">
          <Text weight="normal">{title}</Text>
          <Text size="small" secondary>
            {description}
          </Text>
        </Box>
      </Box>
      <PopoverMenu
        placement="left"
        triggerElement={
          <IconButton skin="light">
            <Icons.More />
          </IconButton>
        }
      >
        <PopoverMenu.MenuItem
          text="Edit Category"
          prefixIcon={<Icons.Edit />}
        />
        <PopoverMenu.MenuItem
          text="Move Category"
          prefixIcon={<Icons.FolderMove />}
        />
        <PopoverMenu.MenuItem
          text="Delete Category"
          prefixIcon={<Icons.Delete />}
        />
      </PopoverMenu>
    </Box>
  );

  return (
    <StyledNestableList
      items={[
        {
          id: '1',
          verticalPadding: 'tiny',
          options: [
            {
              value: (
                <TableListItemContent
                  imageSrc="TennisExample1.jpg"
                  title="Places to play"
                  description="1 post · 60 views"
                />
              ),
            },
          ],
          children: [
            {
              id: '2',
              verticalPadding: 'tiny',
              options: [
                {
                  value: (
                    <TableListItemContent
                      imageSrc="TennisExample2.jpg"
                      title="Courts in Kaunas"
                      description="5 posts · 100 views"
                    />
                  ),
                },
              ],
            },
            {
              id: '3',
              verticalPadding: 'tiny',
              options: [
                {
                  value: (
                    <TableListItemContent
                      imageSrc="TennisExample3.jpg"
                      title="Courts in Vilnius"
                      description="3 posts · 120 views"
                    />
                  ),
                },
              ],
            },
          ],
        },
        {
          id: '4',
          verticalPadding: 'tiny',
          options: [
            {
              value: (
                <TableListItemContent
                  imageSrc="TennisExample4.jpg"
                  title="Tournaments & Championships"
                  description="15 posts · 160 views"
                />
              ),
            },
          ],
        },
      ]}
      onChange={() => {}}
    />
  );
};