refactor: rename useBreakpointComparator to useBreakpointComparators

Author: mobily

plugin/index.js

@@ -12,7 +12,7 @@ module.exports = babel => {
 
     return t.callExpression(
       t.memberExpression(
-        t.callExpression(t.identifier('useBreakpointComparator'), []),
+        t.callExpression(t.identifier('useBreakpointComparators'), []),
         t.identifier(key),
       ),
       [expression],
@@ -95,11 +95,11 @@ module.exports = babel => {
             path.replaceWith(t.jsxExpressionContainer(conditionalExpression));
           }
 
-          const importHook = makeImportSpecifier('useBreakpointComparator');
+          const importHook = makeImportSpecifier('useBreakpointComparators');
 
           if (importDeclaration) {
             const isImported = importDeclaration.node.specifiers.some(specifier => {
-              return specifier.imported.name === 'useBreakpointComparator';
+              return specifier.imported.name === 'useBreakpointComparators';
             });
 
             if ((belowAttribute || aboveAttribute) && !isImported) {

src/components/Columns.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Platform } from 'react-native';
 
 import {
-  useBreakpointComparator,
+  useBreakpointComparators,
   useDebugStyle,
   useResponsiveProp,
   useSpacingHelpers,
@@ -215,7 +215,7 @@ export const Columns = (props: ColumnsProps) => {
     ...rest
   } = props;
 
-  const breakpoint = useBreakpointComparator();
+  const breakpoint = useBreakpointComparators();
   const resolveResponsiveProp = useResponsiveProp();
 
   const isCollapsed = breakpoint.isBelow(collapseBelow);

src/components/Inline.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { useBreakpointComparator } from '../hooks';
+import { useBreakpointComparators } from '../hooks';
 import type { AxisX, AxisY, Breakpoint, ResponsiveProp, Space } from '../types';
 import { Box } from './Box';
 
@@ -20,7 +20,7 @@ type Props = BoxProps & {
 
 export const Inline = (props: Props) => {
   const { space, children, spaceX, spaceY, alignX, alignY, collapseBelow, ...rest } = props;
-  const breakpoint = useBreakpointComparator();
+  const breakpoint = useBreakpointComparators();
 
   const isCollapsed = breakpoint.isBelow(collapseBelow);
   const direction = isCollapsed ? 'column' : 'row';

src/hooks/index.ts

@@ -1,4 +1,4 @@
 export * from './useSpacingHelpers';
 export * from './useDebugStyle';
-export * from './useBreakpointComparator';
+export * from './useBreakpointComparators';
 export * from './useResponsiveProp';

src/hooks/useBreakpointComparator.ts src/hooks/useBreakpointComparators.ts

@@ -4,7 +4,7 @@ import { useStyles } from 'react-native-unistyles';
 import { Breakpoint } from '../types';
 import { isBreakpointAbove, isBreakpointBelow } from '../utils';
 
-export const useBreakpointComparator = () => {
+export const useBreakpointComparators = () => {
   const { breakpoint: currentBreakpoint } = useStyles();
 
   const isBelow = React.useCallback(