Fix/floating button new branch (wix#2255)

* New floating button behaviour

* Added buttonLayouts prop for the layout, added the example to the FloatingButton screen

* Added bgColor logic to the secondery button, set deafult background to  token

* Fixed review notes

* Fixed review notes

Author: adids1221

demo/src/screens/componentScreens/FloatingButtonScreen.tsx

@@ -1,17 +1,19 @@
 import React, {Component} from 'react';
 import {View, StyleSheet, Alert, ScrollView} from 'react-native';
-import {Colors, Text, FloatingButton} from 'react-native-ui-lib';
+import {Colors, Text, FloatingButton, FloatingButtonLayouts} from 'react-native-ui-lib';
 import {renderBooleanOption} from '../ExampleScreenPresenter';
 
 interface State {
   showButton: boolean;
   showSecondary: boolean;
+  showVertical: boolean;
 }
 
 export default class FloatingButtonScreen extends Component<{}, State> {
   state = {
     showButton: true,
-    showSecondary: true
+    showSecondary: true,
+    showVertical: true
   };
 
   notNow = () => {
@@ -25,14 +27,15 @@ export default class FloatingButtonScreen extends Component<{}, State> {
   };
 
   render() {
-    const {showSecondary} = this.state;
+    const {showSecondary, showVertical} = this.state;
     return (
       <View style={styles.container}>
         <Text text60 center $textDefault marginB-s4>
           Trigger Floating Button
         </Text>
         {renderBooleanOption.call(this, 'Show Floating Button', 'showButton')}
         {renderBooleanOption.call(this, 'Show Secondary Button', 'showSecondary')}
+        {renderBooleanOption.call(this, 'Button Layout Vertical', 'showVertical')}
 
         <ScrollView showsVerticalScrollIndicator={false}>
           <View paddingT-20>
@@ -69,11 +72,11 @@ export default class FloatingButtonScreen extends Component<{}, State> {
             showSecondary
               ? {
                 label: 'Not now',
-                onPress: this.notNow,
-                color: Colors.$textDangerLight
+                onPress: this.notNow
               }
               : undefined
           }
+          buttonLayout={showVertical ? FloatingButtonLayouts.VERTICAL : FloatingButtonLayouts.HORIZONTAL}
           // bottomMargin={80}
           // hideBackgroundOverlay
           // withoutAnimation

src/components/floatingButton/index.tsx

@@ -6,6 +6,10 @@ import View from '../view';
 import Button, {ButtonProps} from '../button';
 import Image from '../image';
 
+export enum FloatingButtonLayouts {
+  VERTICAL = 'Vertical',
+  HORIZONTAL = 'Horizontal'
+}
 export interface FloatingButtonProps {
   /**
    * Whether the button is visible
@@ -42,6 +46,10 @@ export interface FloatingButtonProps {
    * <TestID>.secondaryButton - the floatingButton secondaryButton
    */
   testID?: string;
+  /**
+   * Button layout direction: vertical or horizontal
+   */
+  buttonLayout?: FloatingButtonLayouts;
 }
 
 const gradientImage = () => require('./gradient.png');
@@ -54,9 +62,11 @@ const gradientImage = () => require('./gradient.png');
  */
 class FloatingButton extends PureComponent<FloatingButtonProps> {
   static displayName = 'FloatingButton';
+  static floatingButtonLayouts = FloatingButtonLayouts;
 
   static defaultProps = {
-    duration: 300
+    duration: 300,
+    buttonLayout: FloatingButtonLayouts.VERTICAL
   };
 
   initialVisibility?: boolean;
@@ -86,21 +96,39 @@ class FloatingButton extends PureComponent<FloatingButtonProps> {
   getAnimatedStyle = () => {
     return {
       opacity: this.visibleAnimated,
-      transform: [{translateY: this.visibleAnimated.interpolate({
-        inputRange: [0, 1],
-        outputRange: [Constants.screenHeight / 2, 0]
-      })}]
+      transform: [
+        {
+          translateY: this.visibleAnimated.interpolate({
+            inputRange: [0, 1],
+            outputRange: [Constants.screenHeight / 2, 0]
+          })
+        }
+      ]
     };
+  };
+
+  get isSecondaryHorizontal() {
+    const {secondaryButton, buttonLayout} = this.props;
+    return secondaryButton && buttonLayout === FloatingButtonLayouts.HORIZONTAL;
+  }
+
+  get isSecondaryVertical() {
+    const {secondaryButton, buttonLayout} = this.props;
+    return secondaryButton && buttonLayout === FloatingButtonLayouts.VERTICAL;
   }
 
   renderButton() {
-    const {bottomMargin, button, secondaryButton, testID} = this.props;
-    const bottom = secondaryButton ? Spacings.s4 : bottomMargin || Spacings.s8;
+    const {bottomMargin, button, testID} = this.props;
+
+    const bottom = this.isSecondaryVertical ? Spacings.s4 : bottomMargin || Spacings.s8;
+    const left = this.isSecondaryHorizontal ? Spacings.s4 : undefined;
+    const right = this.isSecondaryHorizontal ? 20 : undefined;
 
     return (
       <Button
         size={Button.sizes.large}
-        style={[styles.shadow, {marginTop: 16, marginBottom: bottom}]}
+        flex={!!this.isSecondaryHorizontal}
+        style={[styles.shadow, {marginTop: 16, marginBottom: bottom, marginLeft: left, marginRight: right}]}
         testID={`${testID}.button`}
         {...button}
       />
@@ -123,7 +151,23 @@ class FloatingButton extends PureComponent<FloatingButtonProps> {
   };
 
   renderSecondaryButton() {
-    const {secondaryButton, bottomMargin, testID} = this.props;
+    const {secondaryButton, bottomMargin, testID, buttonLayout} = this.props;
+
+    const bgColor = secondaryButton?.backgroundColor || Colors.$backgroundDefault;
+
+    if (buttonLayout === FloatingButtonLayouts.HORIZONTAL) {
+      return (
+        <Button
+          outline
+          flex
+          size={Button.sizes.large}
+          testID={`${testID}.secondaryButton`}
+          {...secondaryButton}
+          style={[styles.shadow, styles.secondaryMargin, {backgroundColor: bgColor}]}
+          enableShadow={false}
+        />
+      );
+    }
 
     return (
       <Button
@@ -138,9 +182,9 @@ class FloatingButton extends PureComponent<FloatingButtonProps> {
   }
 
   render() {
-    const {withoutAnimation, secondaryButton, visible, testID} = this.props;
+    const {withoutAnimation, visible, testID} = this.props;
     // NOTE: keep this.firstLoad as true as long as the visibility changed to true
-    this.firstLoad && !visible ? this.firstLoad = true : this.firstLoad = false;
+    this.firstLoad && !visible ? (this.firstLoad = true) : (this.firstLoad = false);
 
     // NOTE: On first load, don't show if it should not be visible
     if (this.firstLoad === true && !this.initialVisibility) {
@@ -152,14 +196,17 @@ class FloatingButton extends PureComponent<FloatingButtonProps> {
 
     return (
       <View
+        row={!!this.isSecondaryHorizontal}
+        center={!!this.isSecondaryHorizontal}
         pointerEvents="box-none"
         animated
         style={[styles.container, this.getAnimatedStyle()]}
         testID={testID}
       >
         {this.renderOverlay()}
+        {this.isSecondaryHorizontal && this.renderSecondaryButton()}
         {this.renderButton()}
-        {secondaryButton && this.renderSecondaryButton()}
+        {this.isSecondaryVertical && this.renderSecondaryButton()}
       </View>
     );
   }
@@ -183,7 +230,12 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.35,
     shadowRadius: 12,
     elevation: 2
+  },
+  secondaryMargin: {
+    marginTop: Spacings.s4,
+    marginBottom: Spacings.s7,
+    marginLeft: 20
   }
 });
 
-export default asBaseComponent<FloatingButtonProps>(FloatingButton);
+export default asBaseComponent<FloatingButtonProps, typeof FloatingButton>(FloatingButton);

src/index.ts

@@ -70,7 +70,7 @@ export {default as Drawer, DrawerProps, DrawerItemProps} from './components/draw
 export {default as ExpandableSection, ExpandableSectionProps} from './components/expandableSection';
 export {default as Fader, FaderProps, FaderPosition} from './components/fader';
 export {default as FeatureHighlight, FeatureHighlightProps} from './components/featureHighlight';
-export {default as FloatingButton, FloatingButtonProps} from './components/floatingButton';
+export {default as FloatingButton, FloatingButtonProps, FloatingButtonLayouts} from './components/floatingButton';
 export {default as GradientSlider, GradientSliderProps} from './components/slider/GradientSlider';
 export {default as GridListItem, GridListItemProps} from './components/gridListItem';
 export {default as GridList, GridListProps} from './components/gridList';
@@ -136,9 +136,22 @@ export {default as StackAggregator, StackAggregatorProps} from './components/sta
 export {default as StateScreen, StateScreenProps} from './components/stateScreen';
 export {default as Stepper, StepperProps} from './components/stepper';
 export {default as Switch, SwitchProps} from './components/switch';
-export {default as TabController, TabControllerProps, TabControllerItemProps, TabControllerImperativeMethods} from './components/tabController';
+export {
+  default as TabController,
+  TabControllerProps,
+  TabControllerItemProps,
+  TabControllerImperativeMethods
+} from './components/tabController';
 export {default as TabBar, TabBarProps} from './components/tabBar'; //TODO: remove on V7
-export {default as Timeline, TimelineProps, TimelinePointProps, TimelineLineProps, TimelineStateTypes, TimelinePointTypes, TimelineLineTypes} from './components/timeline';
+export {
+  default as Timeline,
+  TimelineProps,
+  TimelinePointProps,
+  TimelineLineProps,
+  TimelineStateTypes,
+  TimelinePointTypes,
+  TimelineLineTypes
+} from './components/timeline';
 export {default as Text, TextProps} from './components/text';
 // @ts-expect-error
 export {default as TextArea} from './components/textArea';