Merge pull request #1117 from Shopify/modal-scrollable-bottom-callback

[Modal] Add onScrolledToBottom prop to Modal

UNRELEASED.md

@@ -14,6 +14,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 - Track Polaris version information in App Bridge actions
 - Re-added the navigation’s border-right ([#1096](https://github.com/Shopify/polaris-react/pull/1096))
+- Added `onScrolledToBottom` prop to `Modal` ([#1117](https://github.com/Shopify/polaris-react/pull/1117))
 
 ### Bug fixes
 

src/components/Modal/Modal.tsx

@@ -72,6 +72,8 @@ export interface Props extends FooterProps {
   onIFrameLoad?(evt: React.SyntheticEvent<HTMLIFrameElement>): void;
   /** Callback when modal transition animation has ended (stand-alone app use only) */
   onTransitionEnd?(): void;
+  /** Callback when the bottom of the modal content is reached */
+  onScrolledToBottom?(): void;
 }
 export type CombinedProps = Props & WithAppProviderProps;
 
@@ -210,6 +212,7 @@ export class Modal extends React.Component<CombinedProps, State> {
       primaryAction,
       secondaryActions,
       polaris: {intl},
+      onScrolledToBottom,
     } = this.props;
 
     const {iframeHeight} = this.state;
@@ -251,7 +254,11 @@ export class Modal extends React.Component<CombinedProps, State> {
           style={{height: `${iframeHeight}px`}}
         />
       ) : (
-        <Scrollable shadow className={styles.Body}>
+        <Scrollable
+          shadow
+          className={styles.Body}
+          onScrolledToBottom={onScrolledToBottom}
+        >
           {body}
         </Scrollable>
       );

src/components/Modal/README.md

@@ -620,6 +620,48 @@ class ModalExample extends React.Component {
 }
 ```
 
+### Modal with scroll listener
+
+<!-- example-for: web -->
+
+Use to implement infinite scroll of modal content.
+
+```jsx
+class ModalExample extends React.Component {
+  state = {
+    active: true,
+  };
+
+  render() {
+    const {active} = this.state;
+
+    return (
+      <div style={{height: '500px'}}>
+        <Button onClick={this.handleChange}>Open</Button>
+        <Modal
+          open
+          title="Scrollable content"
+          onClose={this.toggleModalVisibility}
+          onScrolledToBottom={() => alert('Scrolled to bottom')}
+        >
+          {Array.from({length: 50}, (_, index) => (
+            <Modal.Section>
+              <TextContainer>
+                <p>Item #{index}</p>
+              </TextContainer>
+            </Modal.Section>
+          ))}
+        </Modal>
+      </div>
+    );
+  }
+
+  toggleModalVisibility = () => {
+    this.setState(({active}) => ({active: !active}));
+  };
+}
+```
+
 ### Warning modal
 
 <!-- example-for: android, ios -->