Feat/hint pressable target (#1630)

* Add settings icon to demo app assets

* Add support to targetRef prop

* add renderMultipleSegmentOptions API to Example screen presenter

* Refactor Hint example screen

* trigger build

* Revert prev change

* Use measureInWindow when user pass onBackgroundPress callback

* Support target press while hint is shown

* Clean leftovers

Author: ethanshar

demo/src/screens/ExampleScreenPresenter.js

@@ -1,7 +1,18 @@
 import _ from 'lodash';
 import React from 'react';
 import {StyleSheet} from 'react-native';
-import {Checkbox, Switch, ColorPalette, Colors, RadioButton, RadioGroup, Slider, Text, View} from 'react-native-ui-lib';
+import {
+  Checkbox,
+  Switch,
+  ColorPalette,
+  Colors,
+  RadioButton,
+  RadioGroup,
+  Slider,
+  SegmentedControl,
+  Text,
+  View
+} from 'react-native-ui-lib';
 
 export function renderHeader(title, others) {
   return (
@@ -15,7 +26,7 @@ export function renderBooleanOption(title, key) {
   const value = this.state[key];
   return (
     <View row centerV spread marginB-s4 key={key}>
-      <Text text70 style={{flex: 1}}>
+      <Text flex>
         {title}
       </Text>
       <Switch
@@ -63,9 +74,11 @@ export function renderRadioGroup(title, key, options, {isRow, afterValueChanged,
   const value = this.state[key];
   return (
     <View marginB-s2>
-      {!_.isUndefined(title) && <Text text70M marginB-s2>
-        {title}
-      </Text>}
+      {!_.isUndefined(title) && (
+        <Text text70M marginB-s2>
+          {title}
+        </Text>
+      )}
       <RadioGroup
         row={isRow}
         style={isRow && styles.rowWrap}
@@ -132,6 +145,22 @@ export function renderSliderOption(title, key, {min = 0, max = 10, step = 1, ini
   );
 }
 
+export function renderMultipleSegmentOptions(title, key, options) {
+  const value = this.state[key];
+  const index = _.findIndex(options, {value});
+
+  return (
+    <View row centerV spread marginB-s4 key={key}>
+      <Text marginR-s2>{title}</Text>
+      <SegmentedControl
+        initialIndex={index}
+        segments={options}
+        onChangeIndex={index => this.setState({[key]: options[index].value})}
+      />
+    </View>
+  );
+}
+
 const styles = StyleSheet.create({
   rowWrap: {
     flexWrap: 'wrap'

demo/src/screens/componentScreens/HintsScreen.tsx

@@ -1,42 +1,34 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
 import {Alert} from 'react-native';
-import {Colors, View, Text, Hint, Button, RadioGroup, RadioButton, Switch} from 'react-native-ui-lib';
+import {Colors, View, Text, Hint, Button, Assets, Incubator} from 'react-native-ui-lib';
+// @ts-expect-error
+import {renderMultipleSegmentOptions, renderBooleanOption} from '../ExampleScreenPresenter';
 
 const settingsIcon = require('../../assets/icons/settings.png');
 const reactions = ['❤️', '😮', '😔', '😂', '😡'];
 
 type HintScreenProps = {};
-type HintScreenState = {
-  showHint: boolean;
-  useShortMessage: boolean;
-  showBottomHint: boolean;
-  showIcon: boolean;
-  targetPosition: string;
-  useTargetFrame?: boolean;
-  useSideTip?: boolean;
-  showCustomContent?: boolean;
-  showReactionStrip?: boolean;
-  enableShadow?: boolean;
-};
-
-export default class HintsScreen extends Component<HintScreenProps, HintScreenState> {
-  constructor(props: HintScreenProps) {
-    super(props);
-
-    this.state = {
-      showHint: true,
-      useShortMessage: false,
-      showBottomHint: false,
-      showIcon: false,
-      targetPosition: 'flex-start',
-      // useTargetFrame: true,
-      useSideTip: false,
-      showCustomContent: false,
-      showReactionStrip: false,
-      enableShadow: false
-    };
-  }
+
+export default class HintsScreen extends Component<HintScreenProps> {
+
+  state = {
+    showHint: true,
+    useShortMessage: false,
+    showBottomHint: false,
+    showIcon: false,
+    targetPosition: 'flex-start',
+    useBackdrop: true,
+    useTargetFrame: false,
+    useSideTip: false,
+    showCustomContent: false,
+    showReactionStrip: false,
+    enableShadow: false
+  };
+
+  toggleHint = () => {
+    this.setState({showHint: !this.state.showHint});
+  };
 
   toggleHintPosition = () => {
     this.setState({
@@ -74,12 +66,64 @@ export default class HintsScreen extends Component<HintScreenProps, HintScreenSt
     );
   }
 
+  renderOptionsFAB() {
+    return (
+      <View absR absB padding-page style={{zIndex: 10}}>
+        <Incubator.ExpandableOverlay
+          useDialog
+          expandableContent={this.renderScreenOptions()}
+          dialogProps={{bottom: true}}
+        >
+          <Button round iconSource={Assets.icons.demo.settings} white/>
+        </Incubator.ExpandableOverlay>
+      </View>
+    );
+  }
+
+  renderScreenOptions() {
+    return (
+      <View bg-white br20 padding-20 collapsable={false}>
+        <Text h2 marginB-s4>
+          Hint Options
+        </Text>
+        {renderMultipleSegmentOptions.call(this, 'Button Position', 'targetPosition', [
+          {label: 'Left', value: 'flex-start'},
+          {label: 'Center', value: 'center'},
+          {label: 'Right', value: 'flex-end'}
+        ])}
+
+        {renderMultipleSegmentOptions.call(this, 'Tip Position', 'useSideTip', [
+          {label: 'Side Tip', value: true},
+          {label: 'Middle Top', value: false}
+        ])}
+
+        {renderMultipleSegmentOptions.call(this, 'Hint Position', 'showBottomHint', [
+          {label: 'Above', value: false},
+          {label: 'Under', value: true}
+        ])}
+
+        {renderMultipleSegmentOptions.call(this, 'Message Length', 'useShortMessage', [
+          {label: 'Short', value: true},
+          {label: 'Long', value: false}
+        ])}
+
+        {renderBooleanOption.call(this, 'With backdrop', 'useBackdrop')}
+        {renderBooleanOption.call(this, 'With icon', 'showIcon')}
+        {renderBooleanOption.call(this, 'With shadow', 'enableShadow')}
+        {renderBooleanOption.call(this, 'Use random position', 'useTargetFrame')}
+        {renderBooleanOption.call(this, 'Show custom content', 'showCustomContent')}
+        {renderBooleanOption.call(this, 'Show reaction strip', 'showReactionStrip')}
+      </View>
+    );
+  }
+
   render() {
     const {
       showHint,
       showBottomHint,
       showIcon,
       targetPosition,
+      useBackdrop,
       useShortMessage,
       useSideTip,
       useTargetFrame,
@@ -126,7 +170,8 @@ export default class HintsScreen extends Component<HintScreenProps, HintScreenSt
             targetFrame={useTargetFrame ? targetFrame : undefined}
             // borderRadius={BorderRadiuses.br40}
             // edgeMargins={30}
-            // onBackgroundPress={() => this.setState({showHint: !showHint})}
+            onBackgroundPress={useBackdrop && !useTargetFrame ? this.toggleHint : undefined}
+            backdropColor={Colors.rgba(Colors.grey10, 0.3)}
             customContent={
               showCustomContent
                 ? this.renderCustomContent()
@@ -142,93 +187,38 @@ export default class HintsScreen extends Component<HintScreenProps, HintScreenSt
             {!useTargetFrame && (
               <Button
                 label={showHint ? 'Hide' : 'Show'}
-                onPress={() => this.setState({showHint: !showHint})}
+                onPress={this.toggleHint}
                 style={{alignSelf: targetPosition}}
                 testID={'Hint.button'}
+                /* Change layout and position to test various cases */
+                // marginT-150
                 // style={{alignSelf: targetPosition, marginLeft: 30}}
                 // style={{alignSelf: targetPosition, position: 'absolute', top: 160, left: 100}}
               />
             )}
           </Hint>
 
           {useTargetFrame && (
-            <View
-              bg-red50
-              style={{
-                position: 'absolute',
-                top: targetFrame.y,
-                left: targetFrame.x,
-                width: targetFrame.width,
-                height: targetFrame.height
-              }}
-            />
+            <>
+              <View
+                bg-red50
+                style={{
+                  position: 'absolute',
+                  top: targetFrame.y,
+                  left: targetFrame.x,
+                  width: targetFrame.width,
+                  height: targetFrame.height
+                }}
+              />
+
+              <View absL absB margin-page>
+                <Button label="Show Hint" onPress={this.toggleHint}/>
+              </View>
+            </>
           )}
         </View>
 
-        <View padding-20 collapsable={false}>
-          <RadioGroup
-            row
-            centerV
-            marginB-20
-            initialValue={targetPosition}
-            onValueChange={(value: string) => this.setState({targetPosition: value})}
-          >
-            <Text marginR-10>Button Position:</Text>
-            <RadioButton value={'flex-start'} label={'Left'} marginR-10/>
-            <RadioButton value={'center'} label={'Center'} marginR-10/>
-            <RadioButton value={'flex-end'} label={'Right'} marginR-10/>
-          </RadioGroup>
-
-          <RadioGroup
-            row
-            centerV
-            marginB-20
-            initialValue={useSideTip}
-            onValueChange={(value: boolean) => this.setState({useSideTip: value})}
-          >
-            <Text marginR-10>Tip:</Text>
-            <RadioButton value label={'Side Tip'} marginR-10/>
-            <RadioButton value={false} label={'Middle Tip'} marginR-10/>
-          </RadioGroup>
-
-          <View row centerV marginV-10>
-            <Switch value={showBottomHint} onValueChange={this.toggleHintPosition}/>
-            <Text marginL-10>Toggle Hint Position</Text>
-          </View>
-
-          <View row centerV marginV-10>
-            <Switch value={useShortMessage} onValueChange={() => this.setState({useShortMessage: !useShortMessage})}/>
-            <Text marginL-10>Toggle Message</Text>
-          </View>
-
-          <View row centerV marginV-10>
-            <Switch value={showIcon} onValueChange={value => this.setState({showIcon: value})}/>
-            <Text marginL-10>Toggle Icon</Text>
-          </View>
-
-          <View row centerV marginV-10>
-            <Switch value={enableShadow} onValueChange={value => this.setState({enableShadow: value})}/>
-            <Text marginL-10>Toggle shadow</Text>
-          </View>
-
-          <View row centerV marginV-10>
-            <Switch value={useTargetFrame} onValueChange={value => this.setState({useTargetFrame: value})}/>
-            <Text marginL-10>Use random position</Text>
-          </View>
-
-          <View row centerV marginV-10>
-            <Switch value={showCustomContent} onValueChange={value => this.setState({showCustomContent: value})}/>
-            <Text marginL-10>Show custom content</Text>
-          </View>
-
-          <View row centerV marginV-10>
-            <Switch
-              value={showReactionStrip}
-              onValueChange={value => this.setState({showReactionStrip: value, enableShadow: true})}
-            />
-            <Text marginL-10>Show reaction strip</Text>
-          </View>
-        </View>
+        {this.renderOptionsFAB()}
       </View>
     );
   }

generatedTypes/src/components/hint/index.d.ts

@@ -75,6 +75,10 @@ export interface HintProps {
      * Callback for the background press
      */
     onBackgroundPress?: (event: GestureResponderEvent) => void;
+    /**
+     * Color for background overlay (require onBackgroundPress)
+     */
+    backdropColor?: string;
     /**
      * The hint container width
      */
@@ -165,6 +169,7 @@ declare class Hint extends Component<HintProps, HintState> {
     renderContent(): JSX.Element;
     renderHint(): JSX.Element | undefined;
     renderHintContainer(): JSX.Element;
+    renderMockChildren(): JSX.Element | undefined;
     renderChildren(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
     render(): {} | null;
 }