@hero-design/rn 8.82.2-alpha.2 → 8.83.0-test.0

package/src/components/Slider/Range.tsx

@@ -0,0 +1,177 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import MultiSlider from '@ptomasroos/react-native-multi-slider';
+
+import { LayoutChangeEvent, StyleProp, View, ViewStyle } from 'react-native';
+import { useTheme } from '../../theme';
+
+export type SliderRangeValue = {
+  start: number;
+  end: number;
+};
+
+export interface RangeSliderProps {
+  /**
+   * Minimum value of the slider.
+   */
+  minimumValue: number;
+  /**
+   * Maximum value of the slider.
+   */
+  maximumValue: number;
+  /**
+   * Step value of the slider.
+   * The value should be between 1 and (maximumValue - minimumValue).
+   * Defaults to 1.
+   */
+  step?: number;
+  /**
+   * Range value of the slider.
+   * Defaults to minimumValue.
+   */
+  value?: SliderRangeValue;
+  /**
+   * Whether the two markers should be allowed to overlap.
+   * Defaults to false.
+   */
+  allowOverlap?: boolean;
+  /**
+   * Callback continuously called while the user is dragging the slider.
+   */
+  onValueChange?: (value: SliderRangeValue) => void;
+  /**
+   * Callback that is called when the user picks up the slider.
+   * The initial value is passed as an argument to the callback handler.
+   */
+  onSlidingStart?: () => void;
+  /**
+   * Callback that is called when the user releases the slider, regardless if the value has changed.
+   * The current value is passed as an argument to the callback handler.
+   */
+  onSlidingComplete?: (value: SliderRangeValue) => void;
+  /**
+   * Whether the slider is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const Slider = ({
+  minimumValue,
+  maximumValue,
+  step = 1,
+  value,
+  onValueChange,
+  onSlidingStart,
+  onSlidingComplete,
+  disabled = false,
+  style,
+  testID,
+  allowOverlap = false,
+}: RangeSliderProps) => {
+  const theme = useTheme();
+  const handleTwoWaySliderChange = React.useCallback(
+    (values: number[]) => {
+      if (onValueChange) {
+        onValueChange({ start: values[0], end: values[1] });
+      }
+    },
+    [onValueChange]
+  );
+  const [layoutSize, setLayoutSize] = useState({ width: 0, height: 0 });
+  const nativeValue = useMemo(() => {
+    return [value?.start ?? minimumValue, value?.end ?? maximumValue];
+  }, [value?.start, value?.end, minimumValue, maximumValue]);
+
+  const {
+    trackBackground,
+    disabledTrackBackground,
+    thumbTint,
+    disabledThumbTint,
+  } = theme.__hd__.slider.colors;
+
+  const { trackHeight } = theme.__hd__.slider.sizes;
+
+  const trackStyle = useMemo(() => {
+    return {
+      backgroundColor: disabled ? disabledTrackBackground : trackBackground,
+      height: trackHeight,
+    };
+  }, [disabled, disabledTrackBackground, trackBackground, trackHeight]);
+
+  const { marker: markerShadow } = theme.__hd__.slider.shadows;
+
+  const makerStyle = useMemo(() => {
+    return {
+      backgroundColor: disabled ? disabledThumbTint : thumbTint,
+      ...markerShadow,
+    };
+  }, [disabled, disabledThumbTint, thumbTint, markerShadow]);
+
+  const selectedStyle = useMemo(() => {
+    return {
+      backgroundColor: disabled ? disabledThumbTint : thumbTint,
+    };
+  }, [disabled, disabledThumbTint, thumbTint, markerShadow]);
+
+  const handleOnValueChangeStart = useCallback(() => {
+    if (onSlidingStart) {
+      onSlidingStart();
+    }
+  }, [onSlidingStart]);
+
+  const handleOnValueChangeFinish = useCallback(
+    (values: number[]) => {
+      if (onSlidingComplete) {
+        onSlidingComplete({
+          start: values[0],
+          end: values[1],
+        });
+      }
+    },
+    [onSlidingComplete]
+  );
+
+  const onLayoutCallback = useCallback((event: LayoutChangeEvent) => {
+    setLayoutSize({
+      width: event.nativeEvent.layout.width,
+      height: event.nativeEvent.layout.height,
+    });
+  }, []);
+
+  return (
+    <View
+      onLayout={onLayoutCallback}
+      style={style}
+      testID={testID}
+      accessibilityState={{
+        disabled,
+      }}
+    >
+      <MultiSlider
+        values={nativeValue}
+        onValuesChange={handleTwoWaySliderChange}
+        onValuesChangeStart={handleOnValueChangeStart}
+        onValuesChangeFinish={handleOnValueChangeFinish}
+        sliderLength={layoutSize.width}
+        min={minimumValue}
+        max={maximumValue}
+        step={step}
+        enabledOne={!disabled}
+        enabledTwo={!disabled}
+        allowOverlap={allowOverlap}
+        trackStyle={trackStyle}
+        markerStyle={makerStyle}
+        selectedStyle={selectedStyle}
+      />
+    </View>
+  );
+};
+
+export default Slider;

package/src/components/Slider/Single.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import RnSlider from '@react-native-community/slider';
+import { StyleProp, ViewStyle } from 'react-native';
+import { useTheme } from '../../theme';
+
+export interface SingleSliderProps {
+  /**
+   * Minimum value of the slider.
+   * Defaults to 0.
+   */
+  minimumValue?: number;
+  /**
+   * Maximum value of the slider.
+   * Defaults to 1.
+   */
+  maximumValue?: number;
+  /**
+   * Step value of the slider.
+   * The value should be between 0 and (maximumValue - minimumValue).
+   * Defaults to 0.
+   */
+  step?: number;
+  /**
+   * Value of the slider.
+   * Defaults to 0.
+   */
+  value?: number;
+  /**
+   * Callback continuously called while the user is dragging the slider.
+   */
+  onValueChange?: (value: number) => void;
+  /**
+   * Callback that is called when the user picks up the slider.
+   * The initial value is passed as an argument to the callback handler.
+   */
+  onSlidingStart?: (value: number) => void;
+  /**
+   * Callback that is called when the user releases the slider, regardless if the value has changed.
+   * The current value is passed as an argument to the callback handler.
+   */
+  onSlidingComplete?: (value: number) => void;
+  /**
+   * Whether the slider is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const Slider = ({
+  minimumValue = 0,
+  maximumValue = 1,
+  step = 0,
+  value = 0,
+  onValueChange,
+  onSlidingStart,
+  onSlidingComplete,
+  disabled = false,
+  style,
+  testID,
+}: SingleSliderProps) => {
+  const theme = useTheme();
+
+  return (
+    <RnSlider
+      minimumValue={minimumValue}
+      maximumValue={maximumValue}
+      step={step}
+      value={value}
+      onValueChange={onValueChange}
+      onSlidingStart={onSlidingStart}
+      onSlidingComplete={onSlidingComplete}
+      disabled={disabled}
+      minimumTrackTintColor={theme.__hd__.slider.colors.minimumTrackTint}
+      thumbTintColor={theme.__hd__.slider.colors.thumbTint}
+      maximumTrackTintColor={theme.__hd__.slider.colors.maximumTrackTint}
+      style={style}
+      testID={testID}
+    />
+  );
+};
+
+export default Slider;

package/src/components/Slider/__tests__/Range.spec.tsx

@@ -0,0 +1,105 @@
+import { fireEvent } from '@testing-library/react-native';
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import RangeSlider from '../Range';
+
+describe('Slider.Range', () => {
+  it('renders correctly by default', async () => {
+    const { toJSON, getByTestId } = renderWithTheme(
+      <RangeSlider
+        maximumValue={20}
+        minimumValue={-10}
+        value={{
+          start: 0,
+          end: 10,
+        }}
+      />
+    );
+    // Trigger the onLayout event
+    const nativeComponent = getByTestId('native-multi-slider');
+    fireEvent(nativeComponent, 'layout', {
+      nativeEvent: {
+        layout: { width: 100, height: 50 },
+      },
+    });
+    expect(toJSON()).toMatchSnapshot();
+
+    // verify style
+    expect(nativeComponent.props['markerStyle'].backgroundColor).toBe(
+      '#401960'
+    );
+
+    expect(nativeComponent.props['selectedStyle'].backgroundColor).toBe(
+      '#401960'
+    );
+
+    expect(nativeComponent.props['trackStyle'].backgroundColor).toBe('#ece8ef');
+
+    // verify prop
+    expect(nativeComponent).toHaveProp('sliderLength', 100);
+    expect(nativeComponent).toHaveProp('values', [0, 10]);
+    expect(nativeComponent).toHaveProp('min', -10);
+    expect(nativeComponent).toHaveProp('max', 20);
+  });
+
+  it('when value is undefined, value should be minumum and maximum', () => {
+    const { getByTestId } = renderWithTheme(
+      <RangeSlider maximumValue={20} minimumValue={-10} />
+    );
+    const nativeComponent = getByTestId('native-multi-slider');
+    expect(nativeComponent.props['values']).toEqual([-10, 20]);
+  });
+
+  it('renders correctly when disabled is $disabled', () => {
+    const { getByTestId, toJSON } = renderWithTheme(
+      <RangeSlider
+        testID="range-slider"
+        minimumValue={-10}
+        maximumValue={10}
+        disabled
+      />
+    );
+
+    const slider = getByTestId('range-slider');
+    expect(slider).toHaveAccessibilityState({ disabled: true });
+
+    expect(toJSON()).toMatchSnapshot();
+    const nativeComponent = getByTestId('native-multi-slider');
+    expect(nativeComponent.props['markerStyle'].backgroundColor).toBe(
+      '#bfc1c5'
+    );
+
+    expect(nativeComponent.props['selectedStyle'].backgroundColor).toBe(
+      '#bfc1c5'
+    );
+
+    expect(nativeComponent.props['trackStyle'].backgroundColor).toBe('#f6f6f7');
+  });
+
+  it('trigger options', () => {
+    const onValueChangeSpy = jest.fn();
+    const onSlidingStartSpy = jest.fn();
+    const onSlidingCompleteSpy = jest.fn();
+    const { getByTestId } = renderWithTheme(
+      <RangeSlider
+        value={{ start: 2, end: 5 }}
+        minimumValue={-10}
+        maximumValue={10}
+        step={0.25}
+        onValueChange={onValueChangeSpy}
+        onSlidingStart={onSlidingStartSpy}
+        onSlidingComplete={onSlidingCompleteSpy}
+      />
+    );
+
+    const nativeComponent = getByTestId('native-multi-slider');
+    fireEvent(nativeComponent, 'valuesChangeStart', [2, 5]);
+    expect(onSlidingStartSpy).toHaveBeenCalled();
+
+    fireEvent(nativeComponent, 'valuesChange', [2, 5]);
+    expect(onValueChangeSpy).toHaveBeenCalledWith({ start: 2, end: 5 });
+
+    fireEvent(nativeComponent, 'valuesChangeFinish', [2, 5]);
+    expect(onSlidingCompleteSpy).toHaveBeenCalledWith({ start: 2, end: 5 });
+  });
+});

package/src/components/Slider/__tests__/{index.spec.tsx → Single.spec.tsx}

@@ -1,6 +1,6 @@
 import React from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import Slider from '..';
+import Slider from '../Single';
 
 describe('Slider', () => {
   it('renders correctly by default', () => {

package/src/components/Slider/__tests__/__snapshots__/Range.spec.tsx.snap

@@ -0,0 +1,168 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Slider.Range renders correctly by default 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "disabled": false,
+      }
+    }
+    onLayout={[Function]}
+  >
+    <MultiSlider
+      allowOverlap={false}
+      enabledOne={true}
+      enabledTwo={true}
+      markerStyle={
+        {
+          "backgroundColor": "#401960",
+          "elevation": 3,
+          "shadowColor": "#001f23",
+          "shadowOffset": {
+            "height": 2,
+            "width": 0,
+          },
+          "shadowOpacity": 0.12,
+          "shadowRadius": 4,
+        }
+      }
+      max={20}
+      min={-10}
+      onValuesChange={[Function]}
+      onValuesChangeFinish={[Function]}
+      onValuesChangeStart={[Function]}
+      selectedStyle={
+        {
+          "backgroundColor": "#401960",
+        }
+      }
+      sliderLength={100}
+      step={1}
+      testID="native-multi-slider"
+      trackStyle={
+        {
+          "backgroundColor": "#ece8ef",
+          "height": 4,
+        }
+      }
+      values={
+        [
+          0,
+          10,
+        ]
+      }
+    />
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`Slider.Range renders correctly when disabled is $disabled 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "disabled": true,
+      }
+    }
+    onLayout={[Function]}
+    testID="range-slider"
+  >
+    <MultiSlider
+      allowOverlap={false}
+      enabledOne={false}
+      enabledTwo={false}
+      markerStyle={
+        {
+          "backgroundColor": "#bfc1c5",
+          "elevation": 3,
+          "shadowColor": "#001f23",
+          "shadowOffset": {
+            "height": 2,
+            "width": 0,
+          },
+          "shadowOpacity": 0.12,
+          "shadowRadius": 4,
+        }
+      }
+      max={10}
+      min={-10}
+      onValuesChange={[Function]}
+      onValuesChangeFinish={[Function]}
+      onValuesChangeStart={[Function]}
+      selectedStyle={
+        {
+          "backgroundColor": "#bfc1c5",
+        }
+      }
+      sliderLength={0}
+      step={1}
+      testID="native-multi-slider"
+      trackStyle={
+        {
+          "backgroundColor": "#f6f6f7",
+          "height": 4,
+        }
+      }
+      values={
+        [
+          -10,
+          10,
+        ]
+      }
+    />
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;

package/src/components/Slider/index.tsx

@@ -1,89 +1,14 @@
-import React from 'react';
-import RnSlider from '@react-native-community/slider';
-import { StyleProp, ViewStyle } from 'react-native';
-import { useTheme } from '../../theme';
+import type { FunctionComponent } from 'react';
+import Single from './Single';
+import type { SingleSliderProps } from './Single';
+import Range from './Range';
 
-export interface SliderProps {
-  /**
-   * Minimum value of the slider.
-   * Defaults to 0.
-   */
-  minimumValue?: number;
-  /**
-   * Maximum value of the slider.
-   * Defaults to 1.
-   */
-  maximumValue?: number;
-  /**
-   * Step value of the slider.
-   * The value should be between 0 and (maximumValue - minimumValue).
-   * Defaults to 0.
-   */
-  step?: number;
-  /**
-   * Value of the slider.
-   * Defaults to 0.
-   */
-  value?: number;
-  /**
-   * Callback continuously called while the user is dragging the slider.
-   */
-  onValueChange?: (value: number) => void;
-  /**
-   * Callback that is called when the user picks up the slider.
-   * The initial value is passed as an argument to the callback handler.
-   */
-  onSlidingStart?: (value: number) => void;
-  /**
-   * Callback that is called when the user releases the slider, regardless if the value has changed.
-   * The current value is passed as an argument to the callback handler.
-   */
-  onSlidingComplete?: (value: number) => void;
-  /**
-   * Whether the slider is disabled.
-   */
-  disabled?: boolean;
-  /**
-   * Additional style.
-   */
-  style?: StyleProp<ViewStyle>;
-  /**
-   * Testing id of the component.
-   */
-  testID?: string;
+interface SliderProps extends FunctionComponent<SingleSliderProps> {
+  Range: typeof Range;
 }
 
-const Slider = ({
-  minimumValue = 0,
-  maximumValue = 1,
-  step = 0,
-  value = 0,
-  onValueChange,
-  onSlidingStart,
-  onSlidingComplete,
-  disabled = false,
-  style,
-  testID,
-}: SliderProps) => {
-  const theme = useTheme();
+const Slider = Single as SliderProps;
 
-  return (
-    <RnSlider
-      minimumValue={minimumValue}
-      maximumValue={maximumValue}
-      step={step}
-      value={value}
-      onValueChange={onValueChange}
-      onSlidingStart={onSlidingStart}
-      onSlidingComplete={onSlidingComplete}
-      disabled={disabled}
-      minimumTrackTintColor={theme.__hd__.slider.colors.minimumTrackTint}
-      thumbTintColor={theme.__hd__.slider.colors.thumbTint}
-      maximumTrackTintColor={theme.__hd__.slider.colors.maximumTrackTint}
-      style={style}
-      testID={testID}
-    />
-  );
-};
+Slider.Range = Range;
 
 export default Slider;

package/src/theme/components/slider.ts

@@ -5,9 +5,20 @@ const getSliderTheme = (theme: GlobalTheme) => {
     minimumTrackTint: theme.colors.primary,
     thumbTint: theme.colors.primary,
     maximumTrackTint: theme.colors.highlightedSurface,
+    trackBackground: theme.colors.highlightedSurface,
+    disabledThumbTint: theme.colors.disabledOnDefaultGlobalSurface,
+    disabledTrackBackground: theme.colors.neutralGlobalSurface,
   };
 
-  return { colors };
+  const shadows = {
+    marker: theme.shadows.default,
+  };
+
+  const sizes = {
+    trackHeight: theme.sizes.xsmall,
+  };
+
+  return { colors, shadows, sizes };
 };
 
 export default getSliderTheme;

package/src/types.ts

@@ -17,6 +17,7 @@ import { TextProps } from './components/Typography/Text';
 import { CardCarouselHandles } from './components/Carousel/CardCarousel';
 import { FABHandles } from './components/FAB/FAB';
 import { ActionGroupHandles } from './components/FAB/ActionGroup';
+import type { SliderRangeValue } from './components/Slider/Range';
 
 export type {
   BottomNavigationTabType,
@@ -36,4 +37,5 @@ export type {
   CardCarouselHandles,
   FABHandles,
   ActionGroupHandles,
+  SliderRangeValue,
 };

package/testUtils/setup.tsx

@@ -68,6 +68,23 @@ jest.mock('@react-native-community/datetimepicker', () => {
   };
 });
 
+jest.mock('@ptomasroos/react-native-multi-slider', () => {
+  const React = jest.requireActual('react');
+
+  return class Slider extends React.Component {
+    render() {
+      return React.createElement(
+        'MultiSlider',
+        {
+          ...(this.props ?? {}),
+          testID: 'native-multi-slider',
+        },
+        this.props.children
+      );
+    }
+  };
+});
+
 jest.mock('@react-native-community/slider', () => {
   const React = jest.requireActual('react');