Fix: #144 Web support implementation (#165)

* Web support implementation

Signed-off-by: François BILLIOUD <[email protected]>

* Fix eslint configuration

* Fix : Cannot resolve module `@react-native-community/slider` from flow

* Set cursor to pointer on hover

* Handle step = 0

* Add accessibility support

* Fix event firing

Signed-off-by: François BILLIOUD <[email protected]>

* Fix accessibility with arrow keys

Signed-off-by: François BILLIOUD <[email protected]>

Co-authored-by: François BILLIOUD <[email protected]>

Author: Sharcoux

.gitignore

@@ -55,5 +55,6 @@ buck-out/
 # Bundle artifact
 *.jsbundle
 .tmp/
+src/dist
 
 */ios/Pods

babel.config.js

@@ -1,3 +1,6 @@
 module.exports = {
-  presets: ['module:metro-react-native-babel-preset'],
+  presets: [
+    "@babel/preset-flow",
+    'module:metro-react-native-babel-preset'
+    ],
 };

example/SliderExample.js

@@ -4,8 +4,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
- * @flow
  */
 
 'use strict';

src/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@babel/preset-flow', 'module:metro-react-native-babel-preset'],
+};

src/js/RNCSliderNativeComponent.web.js

@@ -0,0 +1,306 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import React from 'react';
+import {View, StyleSheet} from 'react-native';
+
+// import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
+// import type {ColorValue} from 'react-native/Libraries/StyleSheet/StyleSheetTypes';
+// import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
+// import type {SyntheticEvent} from 'react-native/Libraries/Types/CoreEventTypes';
+
+// type Props = $ReadOnly<{|
+//   ...ViewProps,
+
+//   /**
+//    * Set to true to animate values with default 'timing' animation type
+//    */
+//   animateTransitions?: ?boolean,
+
+//   /**
+//    * Used to configure the animation parameters.  These are the same parameters in the Animated library.
+//    */
+//   animationConfig?: ?any,
+
+//   /**
+//    * Custom Animation type. 'spring' or 'timing'.
+//    */
+//   animationType?: 'spring' | 'timing' | undefined,
+
+//   /**
+//    * If true the user won't be able to move the slider.
+//    * Default value is false.
+//    */
+//   disabled?: ?boolean,
+
+//   /**
+//    * Used to style and layout the `Slider`.  See `StyleSheet.js` and
+//    * `DeprecatedViewStylePropTypes.js` for more info.
+//    */
+//   style?: ?ViewStyleProp,
+
+//   /**
+//    * Initial value of the slider. The value should be between minimumValue
+//    * and maximumValue, which default to 0 and 1 respectively.
+//    * Default value is 0.
+//    *
+//    * *This is not a controlled component*, you don't need to update the
+//    * value during dragging.
+//    */
+//   value?: ?number,
+
+//   /**
+//    * Step value of the slider. The value should be
+//    * between 0 and (maximumValue - minimumValue).
+//    * Default value is 0.
+//    */
+//   step?: ?number,
+
+//   /**
+//    * Initial minimum value of the slider. Default value is 0.
+//    */
+//   minimumValue?: ?number,
+
+//   /**
+//    * Initial maximum value of the slider. Default value is 1.
+//    */
+//   maximumValue?: ?number,
+
+//   /**
+//    * The color used for the track to the left of the button.
+//    * Overrides the default blue gradient image on iOS.
+//    */
+//   minimumTrackTintColor?: ?ColorValue,
+
+//   /**
+//    * The color used for the track to the right of the button.
+//    * Overrides the default blue gradient image on iOS.
+//    */
+//   maximumTrackTintColor?: ?ColorValue,
+//   /**
+//    * The color used to tint the default thumb images on iOS, or the
+//    * color of the foreground switch grip on Android.
+//    */
+//   thumbTintColor?: ?ColorValue,
+
+//   /**
+//    * If true the user won't be able to move the slider.
+//    * Default value is false.
+//    */
+//   disabled?: ?boolean,
+
+//   /**
+//    * Callback continuously called while the user is dragging the slider.
+//    */
+//   onValueChange?: ?(value: number) => void,
+
+//   /**
+//    * Callback that is called when the user touches the slider,
+//    * regardless if the value has changed. The current 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,
+
+//   /**
+//    * Used to locate this view in UI automation tests.
+//    */
+//   testID?: ?string,
+
+//   /**
+//    * Sets an image for the thumb. Only static images are supported.
+//    */
+//   thumbImage?: ?ImageSource,
+
+//   /**
+//    * If true the slider will be inverted.
+//    * Default value is false.
+//    */
+//   inverted?: ?boolean,
+// |}>;
+
+const RCTSliderWebComponent = React.forwardRef(
+  (
+    {
+      value: initialValue,
+      minimumValue = 0,
+      maximumValue = 0,
+      step = 1,
+      minimumTrackTintColor = '#009688',
+      maximumTrackTintColor = '#939393',
+      thumbTintColor = '#009688',
+      thumbStyle = {},
+      style = [],
+      inverted = false,
+      enabled = true,
+      trackHeight = 4,
+      thumbSize = 20,
+      onRNCSliderSlidingStart = () => {},
+      onRNCSliderSlidingComplete = () => {},
+      onRNCSliderValueChange = () => {},
+      ...others
+    },
+    forwardedRef,
+  ) => {
+    const onValueChange = value =>
+      onRNCSliderValueChange &&
+      onRNCSliderValueChange({nativeEvent: {fromUser: true, value}});
+    const onSlidingStart = value =>
+      onRNCSliderSlidingStart &&
+      onRNCSliderSlidingStart({nativeEvent: {fromUser: true, value}});
+    const onSlidingComplete = value =>
+      onRNCSliderSlidingComplete &&
+      onRNCSliderSlidingComplete({nativeEvent: {fromUser: true, value}});
+
+    const containerSize = React.useRef({width: 0, height: 0});
+    const containerRef = forwardedRef || React.createRef();
+    const [value, setValue] = React.useState(initialValue || minimumValue);
+
+    const percentageValue =
+      (value - minimumValue) / (maximumValue - minimumValue);
+    const minPercent = percentageValue;
+    const maxPercent = 1 - percentageValue;
+
+    const containerStyle = StyleSheet.compose(
+      {
+        width: '100%',
+        flexDirection: 'row',
+        userSelect: 'none',
+        alignItems: 'center',
+        cursor: 'pointer',
+      },
+      style,
+    );
+
+    const trackStyle = {
+      height: trackHeight,
+      borderRadius: trackHeight / 2,
+      userSelect: 'none',
+      flexGrow: 1,
+    };
+
+    const minimumTrackStyle = {
+      ...trackStyle,
+      backgroundColor: minimumTrackTintColor,
+      flexBasis: minPercent * 100 + '%',
+    };
+
+    const maximumTrackStyle = {
+      ...trackStyle,
+      backgroundColor: maximumTrackTintColor,
+      flexBasis: maxPercent * 100 + '%',
+    };
+
+    // const width = (containerSize.current ? containerSize.current.width : 0)
+    // const valueOffset = (inverted ? (1 - percentageValue) : percentageValue) * width
+
+    const thumbViewStyle = StyleSheet.compose(
+      {
+        width: thumbSize,
+        height: thumbSize,
+        // left: valueOffset - thumbSize / 2,
+        // top: trackHeight / 2 - thumbSize / 2,
+        // position: absolute,
+        backgroundColor: thumbTintColor,
+        zIndex: 1,
+        borderRadius: thumbSize / 2,
+        overflow: 'hidden',
+        userSelect: 'none',
+      },
+      thumbStyle,
+    );
+
+    const updateValue = newValue => {
+      // Ensure that the new value is still between the bounds
+      const withinBounds = Math.max(
+        minimumValue,
+        Math.min(newValue, maximumValue),
+      );
+      if (value !== withinBounds) {
+        setValue(withinBounds);
+        onValueChange(withinBounds);
+      }
+    };
+
+    const onTouchEnd = () => {
+      onSlidingComplete(value);
+    };
+
+    const onMove = event => {
+      const {locationX: x} = event.nativeEvent;
+      const width = containerSize.current ? containerSize.current.width : 1;
+      const newValue = inverted
+        ? maximumValue - ((maximumValue - minimumValue) * x) / width
+        : minimumValue + ((maximumValue - minimumValue) * x) / width;
+      const roundedValue = step ? Math.round(newValue / step) * step : newValue;
+      updateValue(roundedValue);
+    };
+    const accessibilityActions = event => {
+      const tenth = (maximumValue - minimumValue) / 10;
+      switch (event.nativeEvent.actionName) {
+        case 'increment':
+          updateValue(value + (step || tenth));
+          break;
+        case 'decrement':
+          updateValue(value - (step || tenth));
+          break;
+      }
+    };
+    const handleAccessibilityKeys = key => {
+      switch (key) {
+        case 'ArrowUp':
+        case 'ArrowRight':
+          accessibilityActions({nativeEvent: {actionName: 'increment'}});
+          break;
+        case 'ArrowDown':
+        case 'ArrowLeft':
+          accessibilityActions({nativeEvent: {actionName: 'decrement'}});
+          break;
+      }
+    };
+
+    return (
+      <View
+        ref={containerRef}
+        onLayout={({nativeEvent}) =>
+          (containerSize.current = nativeEvent.layout)
+        }
+        accessibilityActions={[
+          {name: 'increment', label: 'increment'},
+          {name: 'decrement', label: 'decrement'},
+        ]}
+        onAccessibilityAction={accessibilityActions}
+        accessible={true}
+        accessibleValue={value}
+        accessibilityRole={'adjustable'}
+        style={containerStyle}
+        onStartShouldSetResponder={() => enabled}
+        onMoveShouldSetResponder={() => enabled}
+        onResponderGrant={() => onSlidingStart(value)}
+        onResponderRelease={onTouchEnd}
+        onResponderMove={onMove}
+        onKeyDown={({nativeEvent: {key}}) => handleAccessibilityKeys(key)}
+        {...others}>
+        <View pointerEvents="none" style={minimumTrackStyle} />
+        <View pointerEvents="none" style={thumbViewStyle} />
+        <View pointerEvents="none" style={maximumTrackStyle} />
+      </View>
+    );
+  },
+);
+
+RCTSliderWebComponent.displayName = 'RTCSliderWebComponent';
+
+export default RCTSliderWebComponent;

src/js/Slider.js

@@ -253,7 +253,11 @@ const SliderComponent = (
   return (
     <RCTSliderNativeComponent
       {...localProps}
-      thumbImage={Image.resolveAssetSource(props.thumbImage)}
+      thumbImage={
+        Platform.OS === 'web'
+          ? props.thumbImage
+          : Image.resolveAssetSource(props.thumbImage)
+      }
       ref={forwardedRef}
       style={style}
       onChange={onChangeEvent}

src/package.json

@@ -8,19 +8,24 @@
   "publishConfig": {
     "access": "public"
   },
-  "main": "js/Slider.js",
+  "main": "dist/Slider.js",
   "types": "typings/index.d.ts",
   "keywords": [
     "react-native",
     "react native",
     "slider"
   ],
+  "scripts": {
+    "prepare": "babel --out-dir dist js"
+  },
   "peerDependencies": {
     "react": "*",
     "react-native": "*"
   },
   "devDependencies": {
+    "@babel/cli": "^7.8.4",
     "@babel/core": "^7.6.2",
+    "@babel/preset-flow": "^7.9.0",
     "@babel/runtime": "^7.6.2",
     "@react-native-community/eslint-config": "0.0.5",
     "babel-jest": "^24.9.0",