Stepper

Stepper

import React, { useState } from 'react';

import { Screen, reactExtension, Text, Stepper, ScrollView } from '@shopify/ui-extensions-react/point-of-sale';

const SmartGridModal = () => {
  const [value, setValue] = useState(4);

  return (
    <Screen name='stepper' title='Stepper'>
      <ScrollView>
        <Stepper initialValue={value} onValueChanged={setValue} />
        <Text>{value}</Text>
      </ScrollView>
    </Screen>
  );
}

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

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

export default extension(
  'pos.home.modal.render',
  (root) => {
    const mainScreen = root.createComponent(
      Screen,
      {name: 'stepper', title: 'Stepper'},
    );
    const scrollView =
      root.createComponent(ScrollView);
    const text = root.createComponent(
      Text,
      null,
      '4',
    );
    const stepper = root.createComponent(
      Stepper,
      {
        initialValue: 4,
        onValueChanged: (value) => {
          text.replaceChildren(value.toString());
        },
      },
    );

    scrollView.append(stepper);
    scrollView.append(text);
    mainScreen.append(scrollView);
    root.append(mainScreen);
  },
);