react-native-ui-lib 8.0.1-snapshot.7558 → 8.0.1-snapshot.7561

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "8.0.1-snapshot.7558",
+  "version": "8.0.1-snapshot.7561",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",

package/src/components/floatingButton/__tests__/index.spec.js

@@ -32,14 +32,15 @@ describe('FloatingButton', () => {
         testID: `${TEST_ID}.button`
       });
       expect(await buttonDriver.exists()).not.toBeTruthy();
-      renderTree.rerender(<TestCase visible />);
+      renderTree.rerender(<TestCase visible button={button} />);
       expect(await buttonDriver.exists()).toBeTruthy();
     });
   });
   describe('buttons', () => {
     it('should render a button', async () => {
       const props = {
-        visible: true
+        visible: true,
+        button
       };
       const renderTree = render(<TestCase {...props} />);
       const buttonDriver = ButtonDriver({
@@ -87,7 +88,8 @@ describe('FloatingButton', () => {
   describe('bottomMargin', () => {
     it('should have default bottom margin', () => {
       const props = {
-        visible: true
+        visible: true,
+        button
       };
       const renderTree = render(<TestCase {...props} />);
       const buttonDriver = ButtonDriver({
@@ -99,6 +101,7 @@ describe('FloatingButton', () => {
     it('should have default bottom margin for both buttons', () => {
       const props = {
         visible: true,
+        button,
         secondaryButton
       };
       const renderTree = render(<TestCase {...props} />);
@@ -116,6 +119,7 @@ describe('FloatingButton', () => {
     it('should have bottom margin that match bottomMargin prop', () => {
       const props = {
         visible: true,
+        button,
         bottomMargin: 10
       };
       const renderTree = render(<TestCase {...props} />);
@@ -128,6 +132,7 @@ describe('FloatingButton', () => {
     it('should have bottom margin for secondary button that match bottomMarginProp', () => {
       const props = {
         visible: true,
+        button,
         secondaryButton,
         bottomMargin: 10
       };
@@ -148,6 +153,7 @@ describe('FloatingButton', () => {
     it('should style vertical layout (default)', () => {
       const props = {
         visible: true,
+        button,
         secondaryButton
       };
       const renderTree = render(<TestCase {...props} />);
@@ -163,6 +169,7 @@ describe('FloatingButton', () => {
     it('should style horizontal layout', () => {
       const props = {
         visible: true,
+        button,
         secondaryButton,
         buttonLayout: FloatingButtonLayouts.HORIZONTAL
       };
@@ -181,6 +188,7 @@ describe('FloatingButton', () => {
     it('should style vertical layout (default) when fullWidth is true', () => {
       const props = {
         visible: true,
+        button,
         secondaryButton,
         fullWidth: true
       };
@@ -202,6 +210,7 @@ describe('FloatingButton', () => {
     it('should style horizontal layout when fullWidth is true', () => {
       const props = {
         visible: true,
+        button,
         secondaryButton,
         buttonLayout: FloatingButtonLayouts.HORIZONTAL,
         fullWidth: true

package/src/components/floatingButton/index.js

@@ -55,19 +55,30 @@ class FloatingButton extends PureComponent {
       }]
     };
   };
-  get isSecondaryHorizontal() {
+  get isSecondaryOnly() {
     const {
       secondaryButton,
+      button
+    } = this.props;
+    return !!secondaryButton && !button;
+  }
+  get isHorizontalLayout() {
+    const {
       buttonLayout
     } = this.props;
-    return secondaryButton && buttonLayout === FloatingButtonLayouts.HORIZONTAL;
+    return buttonLayout === FloatingButtonLayouts.HORIZONTAL || this.isSecondaryOnly;
+  }
+  get isSecondaryHorizontal() {
+    const {
+      secondaryButton
+    } = this.props;
+    return secondaryButton && this.isHorizontalLayout;
   }
   get isSecondaryVertical() {
     const {
-      secondaryButton,
-      buttonLayout
+      secondaryButton
     } = this.props;
-    return secondaryButton && buttonLayout === FloatingButtonLayouts.VERTICAL;
+    return secondaryButton && !this.isHorizontalLayout;
   }
   renderButton() {
     const {
@@ -76,17 +87,17 @@ class FloatingButton extends PureComponent {
       fullWidth,
       testID
     } = this.props;
-    const bottom = this.isSecondaryVertical ? Spacings.s4 : bottomMargin || Spacings.s8;
-    const left = this.isSecondaryHorizontal || fullWidth ? Spacings.s4 : undefined;
-    const right = this.isSecondaryHorizontal ? 20 : fullWidth ? Spacings.s4 : undefined;
-    const shadowStyle = !button?.outline && !button?.link && styles.shadow;
-    const marginStyle = {
-      marginTop: 16,
-      marginBottom: bottom,
-      marginLeft: left,
-      marginRight: right
-    };
-    return <Button size={Button.sizes.large} flex={!!this.isSecondaryHorizontal} style={[shadowStyle, marginStyle]} testID={`${testID}.button`} {...button} />;
+    if (button) {
+      const shadowStyle = button && !button.outline && !button.link ? styles.shadow : undefined;
+      const marginStyle = {
+        marginTop: Spacings.s4,
+        marginBottom: this.isSecondaryVertical ? Spacings.s4 : bottomMargin || Spacings.s8,
+        marginLeft: this.isSecondaryHorizontal || fullWidth ? Spacings.s4 : undefined,
+        marginRight: this.isSecondaryHorizontal ? Spacings.s5 : fullWidth ? Spacings.s4 : undefined
+      };
+      const shouldFlex = this.isSecondaryHorizontal || fullWidth && this.isHorizontalLayout;
+      return <Button size={Button.sizes.large} flex={!!shouldFlex} style={[shadowStyle, marginStyle]} testID={`${testID}.button`} {...button} />;
+    }
   }
   renderOverlay = () => {
     if (!this.props.hideBackgroundOverlay) {
@@ -100,25 +111,44 @@ class FloatingButton extends PureComponent {
       secondaryButton,
       bottomMargin,
       testID,
-      buttonLayout
+      fullWidth,
+      button
     } = this.props;
-    const bgColor = secondaryButton?.backgroundColor || Colors.$backgroundDefault;
-    const isHorizontal = buttonLayout === FloatingButtonLayouts.HORIZONTAL;
-    const buttonStyle = isHorizontal ? [styles.shadow, styles.secondaryMargin, {
-      backgroundColor: bgColor
-    }] : {
-      marginBottom: bottomMargin || Spacings.s7
-    };
-    return <Button outline={isHorizontal} flex={isHorizontal} link={!isHorizontal} size={Button.sizes.large} testID={`${testID}.secondaryButton`} {...secondaryButton} style={buttonStyle} enableShadow={false} />;
+    if (secondaryButton) {
+      const bgColor = secondaryButton.backgroundColor || Colors.$backgroundDefault;
+      const shouldFlex = this.isHorizontalLayout && !!button || fullWidth && this.isSecondaryOnly;
+      const buttonStyle = this.isHorizontalLayout ? [styles.shadow, styles.horizontalSecondaryMargin, {
+        backgroundColor: bgColor
+      }] : {
+        marginBottom: bottomMargin || Spacings.s7
+      };
+      return <Button outline={this.isHorizontalLayout} flex={shouldFlex} link={!this.isHorizontalLayout} size={Button.sizes.large} testID={`${testID}.secondaryButton`} {...secondaryButton} style={buttonStyle} enableShadow={false} />;
+    }
+  }
+  renderHorizontalLayout() {
+    return <>
+        {this.renderOverlay()}
+        {this.renderSecondaryButton()}
+        {this.renderButton()}
+      </>;
+  }
+  renderVerticalLayout() {
+    return <>
+        {this.renderOverlay()}
+        {this.renderButton()}
+        {this.renderSecondaryButton()}
+      </>;
   }
   render() {
+    // NOTE: keep this.firstLoad as true as long as the visibility changed to true
     const {
       withoutAnimation,
       visible,
       fullWidth,
-      testID
+      testID,
+      button,
+      secondaryButton
     } = 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;
 
     // NOTE: On first load, don't show if it should not be visible
@@ -128,12 +158,13 @@ class FloatingButton extends PureComponent {
     if (!visible && withoutAnimation) {
       return false;
     }
-    return <View row={this.isSecondaryHorizontal} center={this.isSecondaryHorizontal || !fullWidth} pointerEvents="box-none" animated style={[styles.container, this.getAnimatedStyle()]} testID={testID}>
-        {this.renderOverlay()}
-        {this.isSecondaryHorizontal && this.renderSecondaryButton()}
-        {this.renderButton()}
-        {this.isSecondaryVertical && this.renderSecondaryButton()}
-      </View>;
+    if (button || secondaryButton) {
+      const hasBothButtons = !!(button && secondaryButton);
+      const shouldCenter = !fullWidth || this.isHorizontalLayout && hasBothButtons;
+      return <View row={this.isHorizontalLayout} center={shouldCenter} pointerEvents="box-none" animated style={[styles.container, this.getAnimatedStyle()]} testID={testID}>
+          {this.isHorizontalLayout ? this.renderHorizontalLayout() : this.renderVerticalLayout()}
+        </View>;
+    }
   }
 }
 const styles = StyleSheet.create({
@@ -149,10 +180,10 @@ const styles = StyleSheet.create({
   shadow: {
     ...Shadows.sh20.bottom
   },
-  secondaryMargin: {
+  horizontalSecondaryMargin: {
     marginTop: Spacings.s4,
     marginBottom: Spacings.s7,
-    marginLeft: 20
+    marginLeft: Spacings.s5
   }
 });
 export default asBaseComponent(FloatingButton);