set up PressableWithFeedback component

src/components/Pressable/PressableWithFeedback.js

@@ -1,3 +1,51 @@
+import React, {forwardRef} from 'react';
+import _ from 'lodash';
+import propTypes from 'prop-types';
 import GenericPressable from './GenericPressable';
+import GenericPressablePropTypes from './GenericPressable/PropTypes';
+import OpacityView from '../OpacityView';
+import variables from '../../styles/variables';
 
-export default GenericPressable;
+const omitedProps = ['style', 'pressStyle', 'hoverStyle', 'focusStyle', 'wrapperStyle'];
+
+const PressableWithFeedbackPropTypes = {
+    ..._.omit(GenericPressablePropTypes.propTypes, omitedProps),
+    pressDimmingValue: propTypes.number,
+    hoverDimmingValue: propTypes.number,
+};
+
+const PressableWithFeedbackDefaultProps = {
+    ..._.omit(GenericPressablePropTypes.defaultProps, omitedProps),
+    pressDimmingValue: variables.pressDimValue,
+    hoverDimmingValue: variables.hoverDimValue,
+    wrapperStyle: [],
+};
+
+const PressableWithFeedback = forwardRef((props, ref) => {
+    const propsWithoutStyling = _.omit(props, omitedProps);
+    return (
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        <GenericPressable ref={ref} style={props.wrapperStyle} {...propsWithoutStyling}>
+            {state => (
+                <OpacityView
+                    shouldDim={state.pressed || state.hovered}
+                    dimmingValue={state.pressed ? props.pressDimmingValue : props.hoverDimmingValue}
+                    style={[
+                        props.style,
+                        state.pressed && props.pressStyle,
+                        state.hovered && props.hoverStyle,
+                        state.focused && props.focusStyle,
+                    ]}
+                >
+                    {props.children}
+                </OpacityView>
+            )}
+        </GenericPressable>
+    );
+});
+
+PressableWithFeedback.displayName = 'PressableWithFeedback';
+PressableWithFeedback.propTypes = PressableWithFeedbackPropTypes;
+PressableWithFeedback.defaultProps = PressableWithFeedbackDefaultProps;
+
+export default PressableWithFeedback;

src/styles/variables.js

@@ -131,4 +131,6 @@ export default {
     // The height of the empty list is 14px (2px for borders and 12px for vertical padding)
     // This is calculated based on the values specified in the 'getGoogleListViewStyle' function of the 'StyleUtils' utility
     googleEmptyListViewHeight: 14,
+    hoverDimValue: 0.5,
+    pressDimValue: 0.2,
 };