GlobalEventsHandlerProvider

GlobalEventsHandlerProvider is a React context provider that allows sharing global event handlers with consuming components.

also known as

Props

Component props
Name	Type	Default
`children` Required	`React.Node`	-
	Context lets a parent component provide data to the entire tree below it. Only components within the GlobalEventsHandlerProvider tree will be able to subscribe to it.
`sheetMobileHandlers`	`{\| onOpen?: NoopType, onClose?: NoopType \|}`	-
	Handlers consumed by SheetMobile.

Variants

GlobalEventsHandlerProvider in SheetMobile

GlobalEventsHandlerProvider has one prop for each component subscribing to the provider.

GlobalEventsHandlerProvider's sheetMobileHandlers props only subscribes SheetMobile and those adaptive components that use SheetMobile in their mobile UI (Modal, Dropdown.)

In the example below, SheetMobile's logs when opens and closes.

import { useCallback, useMemo, useState } from 'react';
import {
  Flex,
  Layer,
  SheetMobile,
  Box,
  DeviceTypeProvider,
  Button,
  FixedZIndex,
  CompositeZIndex,
  GlobalEventsHandlerProvider,
} from 'gestalt';

export default function Example() {
  const [showComponent, setShowComponent] = useState(true);

  const PAGE_HEADER_ZINDEX = new FixedZIndex(10);
  const ABOVE_PAGE_HEADER_ZINDEX = new CompositeZIndex([PAGE_HEADER_ZINDEX]);

  const sheetMobileOnOpen = useCallback(
    () => console.log('On open handler'),
    []
  );
  const sheetMobileOnClose = useCallback(
    () => console.log('On close handler'),
    []
  );
  const sheetMobileHandlers = useMemo(
    () => ({ onOpen: sheetMobileOnOpen, onClose: sheetMobileOnClose }),
    [sheetMobileOnOpen, sheetMobileOnClose]
  );

  return (
    <GlobalEventsHandlerProvider sheetMobileHandlers={sheetMobileHandlers}>
      <DeviceTypeProvider deviceType="mobile">
        {showComponent ? (
          <Layer zIndex={ABOVE_PAGE_HEADER_ZINDEX}>
            <SheetMobile
              heading="Heading"
              onDismiss={() => setShowComponent(false)}
              size="auto"
            >
              <SheetMobile.DismissingElement>
                {({ onDismissStart }) => (
                  <Flex
                    justifyContent="center"
                    alignItems="center"
                    height="100%"
                  >
                    <Button
                      color="gray"
                      text="Close"
                      onClick={onDismissStart}
                    />
                  </Flex>
                )}
              </SheetMobile.DismissingElement>
            </SheetMobile>
          </Layer>
        ) : null}
        <Box padding={2}>
          <Button
            accessibilityLabel="Show SheetMobile"
            color="red"
            text="Show SheetMobile"
            size="lg"
            onClick={() => setShowComponent(true)}
          />
        </Box>
      </DeviceTypeProvider>
    </GlobalEventsHandlerProvider>
  );
}

Edit page on GitHub

; Opens a new tab