Section

Section

import React from 'react'
import { Text, Navigator, Screen, ScrollView, Stack, reactExtension, Section, useApi, Selectable } from '@shopify/ui-extensions-react/point-of-sale'

const ModalComponent = () => {
  const api = useApi<'pos.home.modal.render'>();

  return (
    <Navigator>
      <Screen title="Section" name="Section">
        <ScrollView>
          <Stack direction="vertical" paddingHorizontal="HalfPoint">
            <Section title='Items' action={{title: "Show toast", onPress: () => api.toast.show('Hello world!')}}>
              <Selectable onPress={() => api.toast.show('Item 1!')}>
                <Stack direction="vertical" paddingHorizontal="Small" paddingVertical="Small">
                  <Text>Item 1</Text>
                </Stack>  
              </Selectable>
              <Selectable onPress={() => api.toast.show('Item 2!')}>
                <Stack direction="vertical" paddingHorizontal="Small" paddingVertical="Small">
                  <Text>Item 2</Text>
                </Stack>  
              </Selectable>
              <Selectable onPress={() => api.toast.show('Item 3!')}>
                <Stack direction="vertical" paddingHorizontal="Small" paddingVertical="Small">
                  <Text>Item 3</Text>
                </Stack>  
              </Selectable>
              <Selectable onPress={() => api.toast.show('Item 4!')}>
                <Stack direction="vertical" paddingHorizontal="Small" paddingVertical="Small">
                  <Text>Item 4</Text>
                </Stack>  
              </Selectable>
            </Section>
          </Stack>
        </ScrollView>
      </Screen>
    </Navigator>
  )
}

export default reactExtension('pos.home.modal.render', () => {
  return <ModalComponent />
}) 

import {
  extension,
  Screen,
  ScrollView,
  Stack,
  Navigator,
  Text,
  Section,
  Selectable,
} from '@shopify/ui-extensions/point-of-sale';

export default extension(
  'pos.home.modal.render',
  (root, api) => {
    const screen = root.createComponent(Screen, {
      name: 'Section',
      title: 'Section',
    });

    const scrollView =
      root.createComponent(ScrollView);

    const section = root.createComponent(
      Section,
      {
        title: 'Section',
        action: {
          title: 'Show toast',
          onPress: () =>
            api.toast.show('Hello world!'),
        },
      },
    );

    for (let i = 1; i < 5; i++) {
      const selectable = root.createComponent(
        Selectable,
        {
          onPress: () =>
            api.toast.show(`Item ${i}!`),
        },
      );
      const stack = root.createComponent(Stack, {
        paddingVertical: 'Small',
        direction: 'vertical',
        paddingHorizontal: 'Small',
      });

      const textElement =
        root.createComponent(Text);
      textElement.append(`Item ${i}`);

      stack.append(textElement);
      selectable.append(stack);
      section.append(selectable);
    }

    const rootStack = root.createComponent(
      Stack,
      {
        paddingHorizontal: 'HalfPoint',
        direction: 'vertical',
      },
    );
    rootStack.append(section);

    scrollView.append(rootStack);
    screen.append(scrollView);
    const navigator =
      root.createComponent(Navigator);
    navigator.append(screen);
    root.append(navigator);
  },
);