@hero-design/rn 8.29.4 → 8.30.0

package/src/components/Rate/__tests__/index.spec.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Rate from '..';
+
+const ratingData = [
+  { value: 1 },
+  { value: 2 },
+  { value: 3 },
+  { value: 4 },
+  { value: 5 },
+];
+
+describe('Rate', () => {
+  it('renders correctly', () => {
+    const onChange = jest.fn();
+    const { toJSON, getByTestId } = renderWithTheme(
+      <Rate value={3} onChange={onChange} options={ratingData} />
+    );
+
+    fireEvent.press(getByTestId('1'));
+    expect(onChange).toHaveBeenCalled();
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly it is readonly', () => {
+    const onChange = jest.fn();
+    const { getByTestId, toJSON } = renderWithTheme(
+      <Rate readonly value={3} onChange={onChange} options={ratingData} />
+    );
+
+    fireEvent.press(getByTestId('1'));
+    expect(onChange).toBeCalledTimes(0);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly when disabled', () => {
+    const onChange = jest.fn();
+    const { getByTestId, toJSON } = renderWithTheme(
+      <Rate disabled value={3} onChange={onChange} options={ratingData} />
+    );
+
+    fireEvent.press(getByTestId('1'));
+    expect(onChange).toBeCalledTimes(0);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Rate/index.tsx

@@ -0,0 +1,90 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import { Animated, Platform, Pressable, ViewProps } from 'react-native';
+import Icon from '../Icon';
+import { StyledIconWrapper, StyledWrapper } from './StyledRate';
+
+export interface RateOption<T extends string | number> {
+  value: T;
+}
+
+export interface RateProps<T extends string | number> extends ViewProps {
+  /**
+   * Options for rate component.
+   */
+  options: RateOption<T>[];
+  /**
+   * Value of the component.
+   */
+  value?: T;
+  /**
+   * Callback when value changes.
+   */
+  onChange?: (value: T) => void;
+  /**
+   * Whether the component is readonly.
+   */
+  readonly?: boolean;
+  /**
+   * Whether the component is disabled.
+   */
+  disabled?: boolean;
+}
+
+const Rate = <T extends string | number>({
+  options,
+  value,
+  onChange,
+  readonly = false,
+  disabled = false,
+  ...otherProps
+}: RateProps<T>) => {
+  const valueIndex = useMemo(
+    () => options.findIndex((item) => item.value === value),
+    [value, options]
+  );
+
+  const animatedValue = useRef(new Animated.Value(0)).current;
+
+  const scale = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0.8, 1],
+  });
+
+  useEffect(() => {
+    animatedValue.setValue(0);
+
+    Animated.spring(animatedValue, {
+      toValue: 1,
+      useNativeDriver: Platform.OS !== 'web',
+    }).start();
+  }, [value, animatedValue]);
+
+  return (
+    <StyledWrapper {...otherProps}>
+      {options.length > 0 &&
+        options.map((item, index) => (
+          <Pressable
+            key={item.value}
+            disabled={disabled || readonly}
+            onPress={() => onChange?.(item.value)}
+            testID={item.value.toString()}
+          >
+            <StyledIconWrapper
+              style={
+                valueIndex === index && {
+                  transform: [{ scale }],
+                }
+              }
+            >
+              <Icon
+                icon={index <= valueIndex ? 'star' : 'star-outlined'}
+                intent={disabled ? 'disabled-text' : 'primary'}
+              />
+            </StyledIconWrapper>
+          </Pressable>
+        ))}
+    </StyledWrapper>
+  );
+};
+
+export default Rate;

package/src/index.ts

@@ -55,6 +55,7 @@ import TimePicker from './components/TimePicker';
 import Toast from './components/Toast';
 import Toolbar from './components/Toolbar';
 import Typography from './components/Typography';
+import Rate from './components/Rate';
 import RefreshControl from './components/RefreshControl';
 import RichTextEditor from './components/RichTextEditor';
 import PageControl from './components/PageControl';
@@ -117,6 +118,7 @@ export {
   Toast,
   Toolbar,
   Typography,
+  Rate,
   RefreshControl,
   RichTextEditor,
 };

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -690,6 +690,15 @@ Object {
         "groupTopMargin": 4,
       },
     },
+    "rate": Object {
+      "colors": Object {
+        "iconStroke": "#401960",
+      },
+      "spaces": Object {
+        "iconWrapperMarginRight": 4,
+        "iconWrapperPadding": 8,
+      },
+    },
     "refreshControl": Object {
       "colors": Object {
         "indicator": "#401960",

package/src/theme/components/rate.ts

@@ -0,0 +1,16 @@
+import type { GlobalTheme } from '../global';
+
+const getRateTheme = (theme: GlobalTheme) => {
+  const colors = {
+    iconStroke: theme.colors.primary,
+  };
+
+  const spaces = {
+    iconWrapperPadding: theme.space.small,
+    iconWrapperMarginRight: theme.space.xsmall,
+  };
+
+  return { colors, spaces };
+};
+
+export default getRateTheme;

package/src/theme/getTheme.ts

@@ -27,6 +27,7 @@ import getPageControlTheme from './components/pageControl';
 import getPinInputTheme from './components/pinInput';
 import getProgressTheme from './components/progress';
 import getRadioTheme from './components/radio';
+import getRateTheme from './components/rate';
 import getRefreshControlTheme from './components/refreshControl';
 import getRichTextEditorTheme from './components/richTextEditor';
 import getSectionHeadingTheme from './components/sectionHeading';
@@ -76,6 +77,7 @@ type Theme = GlobalTheme & {
     pinInput: ReturnType<typeof getPinInputTheme>;
     progress: ReturnType<typeof getProgressTheme>;
     radio: ReturnType<typeof getRadioTheme>;
+    rate: ReturnType<typeof getRateTheme>;
     refreshControl: ReturnType<typeof getRefreshControlTheme>;
     richTextEditor: ReturnType<typeof getRichTextEditorTheme>;
     sectionHeading: ReturnType<typeof getSectionHeadingTheme>;
@@ -131,6 +133,7 @@ const getTheme = (
       pinInput: getPinInputTheme(globalTheme),
       progress: getProgressTheme(globalTheme),
       radio: getRadioTheme(globalTheme),
+      rate: getRateTheme(globalTheme),
       refreshControl: getRefreshControlTheme(globalTheme),
       richTextEditor: getRichTextEditorTheme(globalTheme),
       sectionHeading: getSectionHeadingTheme(globalTheme),

package/testUtils/setup.tsx

@@ -10,12 +10,15 @@ jest.mock('react-native-vector-icons', () => ({
 jest.mock('react-native', () => {
   const RN = jest.requireActual('react-native');
 
-  RN.Animated.timing = () => ({
+  const mockedAnimatedFunctions = {
     start: () => jest.fn(),
     stop: () => jest.fn(),
     _isUsingNativeDriver: () => jest.fn(),
     _startNativeLoop: () => jest.fn(),
-  });
+  };
+
+  RN.Animated.timing = () => mockedAnimatedFunctions;
+  RN.Animated.spring = () => mockedAnimatedFunctions;
 
   return RN;
 });

package/types/components/Rate/StyledRate.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { Animated, View } from 'react-native';
+declare const StyledWrapper: import("@emotion/native").StyledComponent<import("../Box").BoxProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+declare const StyledIconWrapper: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<View>> & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+export { StyledWrapper, StyledIconWrapper };

package/types/components/Rate/index.d.ts

@@ -0,0 +1,28 @@
+import { ViewProps } from 'react-native';
+export interface RateOption<T extends string | number> {
+    value: T;
+}
+export interface RateProps<T extends string | number> extends ViewProps {
+    /**
+     * Options for rate component.
+     */
+    options: RateOption<T>[];
+    /**
+     * Value of the component.
+     */
+    value?: T;
+    /**
+     * Callback when value changes.
+     */
+    onChange?: (value: T) => void;
+    /**
+     * Whether the component is readonly.
+     */
+    readonly?: boolean;
+    /**
+     * Whether the component is disabled.
+     */
+    disabled?: boolean;
+}
+declare const Rate: <T extends string | number>({ options, value, onChange, readonly, disabled, ...otherProps }: RateProps<T>) => JSX.Element;
+export default Rate;

package/types/index.d.ts

@@ -42,8 +42,9 @@ import TimePicker from './components/TimePicker';
 import Toast from './components/Toast';
 import Toolbar from './components/Toolbar';
 import Typography from './components/Typography';
+import Rate from './components/Rate';
 import RefreshControl from './components/RefreshControl';
 import RichTextEditor from './components/RichTextEditor';
 import PageControl from './components/PageControl';
-export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, withTheme, swagSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, Accordion, Alert, Attachment, Avatar, useAvatarColors, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Carousel, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, Error, FAB, Icon, Image, List, PinInput, Progress, PageControl, Skeleton, Slider, Spinner, Swipeable, Radio, SectionHeading, Select, Success, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, RefreshControl, RichTextEditor, };
+export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, withTheme, swagSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, Accordion, Alert, Attachment, Avatar, useAvatarColors, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Carousel, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, Error, FAB, Icon, Image, List, PinInput, Progress, PageControl, Skeleton, Slider, Spinner, Swipeable, Radio, SectionHeading, Select, Success, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, Rate, RefreshControl, RichTextEditor, };
 export * from './types';

package/types/theme/components/rate.d.ts

@@ -0,0 +1,11 @@
+import type { GlobalTheme } from '../global';
+declare const getRateTheme: (theme: GlobalTheme) => {
+    colors: {
+        iconStroke: string;
+    };
+    spaces: {
+        iconWrapperPadding: number;
+        iconWrapperMarginRight: number;
+    };
+};
+export default getRateTheme;

package/types/theme/getTheme.d.ts

@@ -25,6 +25,7 @@ import getPageControlTheme from './components/pageControl';
 import getPinInputTheme from './components/pinInput';
 import getProgressTheme from './components/progress';
 import getRadioTheme from './components/radio';
+import getRateTheme from './components/rate';
 import getRefreshControlTheme from './components/refreshControl';
 import getRichTextEditorTheme from './components/richTextEditor';
 import getSectionHeadingTheme from './components/sectionHeading';
@@ -72,6 +73,7 @@ declare type Theme = GlobalTheme & {
         pinInput: ReturnType<typeof getPinInputTheme>;
         progress: ReturnType<typeof getProgressTheme>;
         radio: ReturnType<typeof getRadioTheme>;
+        rate: ReturnType<typeof getRateTheme>;
         refreshControl: ReturnType<typeof getRefreshControlTheme>;
         richTextEditor: ReturnType<typeof getRichTextEditorTheme>;
         sectionHeading: ReturnType<typeof getSectionHeadingTheme>;