Hookify more components

UNRELEASED.md

@@ -26,5 +26,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 ### Code quality
 
 - Migrated `ContextualSaveBar` to use hooks instead of `withAppProvider` ([#2091](https://github.com/Shopify/polaris-react/pull/2091))
+- Migrated `RangeSlider`, `ScrollLock` and `TopBar.SearchField` to use hooks instead of withAppProvider ([#2083](https://github.com/Shopify/polaris-react/pull/2083))
 
 ### Deprecations

src/components/RangeSlider/RangeSlider.tsx

@@ -1,9 +1,5 @@
 import React from 'react';
-import {createUniqueIDFactory} from '@shopify/javascript-utilities/other';
-import {
-  withAppProvider,
-  WithAppProviderProps,
-} from '../../utilities/with-app-provider';
+import {useUniqueId} from '../../utilities/unique-id';
 import {RangeSliderProps, RangeSliderValue, DualValue} from './types';
 import {RangeSliderDefault} from './utilities';
 
@@ -14,42 +10,31 @@ import {SingleThumb, DualThumb} from './components';
 // ensures that the Props Explorer table is generated correctly, instead of
 // crashing if we write `RangeSlider extends React.Component<RangeSliderProps>`
 interface Props extends RangeSliderProps {}
-type CombinedProps = Props & WithAppProviderProps;
 
-const getUniqueID = createUniqueIDFactory('RangeSlider');
-
-class RangeSlider extends React.Component<CombinedProps> {
-  private id = getUniqueID();
-
-  render() {
-    const {
-      min = RangeSliderDefault.Min,
-      max = RangeSliderDefault.Max,
-      step = RangeSliderDefault.Step,
-      value,
-      ...rest
-    } = this.props;
-
-    const sharedProps = {
-      id: this.id,
-      min,
-      max,
-      step,
-      ...rest,
-    };
-
-    return isDualThumb(value) ? (
-      <DualThumb value={value} {...sharedProps} />
-    ) : (
-      <SingleThumb value={value} {...sharedProps} />
-    );
-  }
+export function RangeSlider({
+  min = RangeSliderDefault.Min,
+  max = RangeSliderDefault.Max,
+  step = RangeSliderDefault.Step,
+  value,
+  ...rest
+}: Props) {
+  const id = useUniqueId('RangeSlider');
+
+  const sharedProps = {
+    id,
+    min,
+    max,
+    step,
+    ...rest,
+  };
+
+  return isDualThumb(value) ? (
+    <DualThumb value={value} {...sharedProps} />
+  ) : (
+    <SingleThumb value={value} {...sharedProps} />
+  );
 }
 
 function isDualThumb(value: RangeSliderValue): value is DualValue {
   return Array.isArray(value);
 }
-
-// Use named export once withAppProvider is refactored away
-// eslint-disable-next-line import/no-default-export
-export default withAppProvider<Props>()(RangeSlider);

src/components/RangeSlider/index.ts

@@ -1,4 +1,2 @@
-import RangeSlider from './RangeSlider';
-
-export {RangeSlider};
+export {RangeSlider} from './RangeSlider';
 export {RangeSliderProps, RangeSliderValue, DualValue} from './types';

src/components/RangeSlider/tests/RangeSlider.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import RangeSlider from '../RangeSlider';
+import {RangeSlider} from '../RangeSlider';
 import {DualThumb, SingleThumb} from '../components';
 import {RangeSliderDefault} from '../utilities';
 

src/components/ScrollLock/ScrollLock.ts

@@ -0,0 +1,21 @@
+import {useEffect} from 'react';
+import {useScrollLockManager} from '../../utilities/scroll-lock-manager';
+import './ScrollLock.scss';
+
+interface ScrollLockProps {}
+
+// Even though this has no args, reference ScrollLockProps so the prop explorer
+// in the styleguide works without warnings about unfound props
+export function ScrollLock(_: ScrollLockProps) {
+  const scrollLockManager = useScrollLockManager();
+
+  useEffect(() => {
+    scrollLockManager.registerScrollLock();
+
+    return () => {
+      scrollLockManager.unregisterScrollLock();
+    };
+  }, [scrollLockManager]);
+
+  return null;
+}

src/components/ScrollLock/index.ts

@@ -1,3 +1 @@
-import ScrollLock from './ScrollLock';
-
-export {ScrollLock};
+export {ScrollLock} from './ScrollLock';

src/components/ScrollLock/tests/ScrollLock.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {SCROLL_LOCKING_ATTRIBUTE} from '../../../utilities/scroll-lock-manager';
-import ScrollLock from '../ScrollLock';
+import {ScrollLock} from '../ScrollLock';
 
 describe('ScrollLock', () => {
   let scrollSpy: jest.SpyInstance;