Merge pull request #62 from kristerkari/feature/merge-styles

Implement merging of default styles
kristerkari · Jul 11, 2021 · 29802f5 · 29802f5
2 parents 2d7942c + 7f6b58f
commit 29802f5
Show file tree

Hide file tree

Showing 11 changed files with 2,555 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -114,6 +114,7 @@ If you don't want to run the app, you can have a look at the [components folder]
 | `accessibility`          |   true   | `boolean` | Set to `false` to disable accessibility features (not recommended).       |
 | `accessibilityLabelPrev` | Previous | `string`  | Accessibility label for the prev button.                                  |
 | `accessibilityLabelNext` |   Next   | `string`  | Accessibility label for the next button.                                  |
+| `mergeStyles`            |   false  | `boolean` | Set to `true` to merge your custom styles with the default styles.        |
 
 #### Callbacks
 
@@ -160,7 +161,11 @@ You can then call the method from outside the carousel:
 
 #### Custom styling properties
 
-Use these properties to customize how the carousel is styled. Have a look at the [custom styles component](/examples/components/CustomStyles.tsx) for an example.
+Use these properties to customize how the carousel is styled.
+
+Set the `mergeStyles` property to `true` if you want to merge your custom styles with the default ones instead of having define all the needed styles. You can also `import { defaulStyles } from "pinar"` to get access to the default styles and use them as defaults.
+
+Have a look at the ["custom styles" component](/examples/components/CustomStyles.tsx) and ["custom styles with merge" component](/examples/components/CustomMergeStyles.tsx) for an example.
 
 | Property                 | Default |          Type          | Description                                       |
 | :----------------------- | :-----: | :--------------------: | :------------------------------------------------ |

diff --git a/e2e/loop.spec.js b/e2e/loop.spec.js
@@ -5,6 +5,7 @@ describe("loop", () => {
     await device.reloadReactNative();
   });
   it("should be able to go to Page 1 -> Page 2 -> Page 3 -> Page 1", async () => {
+    await element(by.id("scrollview")).scrollTo("bottom");
     await expect(element(by.id("loop"))).toBeVisible();
     await element(by.id("loop")).tap();
 
@@ -44,6 +45,7 @@ describe("loop", () => {
   });
 
   it("should be able to go to Page 1 -> Page 3 -> Page 2 -> Page 1", async () => {
+    await element(by.id("scrollview")).scrollTo("bottom");
     await expect(element(by.id("loop"))).toBeVisible();
     await element(by.id("loop")).tap();
 
@@ -83,6 +85,7 @@ describe("loop", () => {
   });
 
   it("should be able to go to Page 1 -> Page 3 -> Page 1", async () => {
+    await element(by.id("scrollview")).scrollTo("bottom");
     await expect(element(by.id("loop"))).toBeVisible();
     await element(by.id("loop")).tap();
 

diff --git a/examples/App.tsx b/examples/App.tsx
@@ -17,6 +17,7 @@ import {
   CustomRender,
   CustomSize,
   CustomStyles,
+  CustomMergeStyles,
   CustomWidth,
   DisabledControls,
   Loop,
@@ -97,6 +98,12 @@ class HomeScreen extends React.Component<Props, State> {
           }}
           title="Custom styling"
         />
+        <Button
+          onPress={(): void => {
+            navigation.navigate("CustomMergeStyles");
+          }}
+          title="Custom styling merging with defaults"
+        />
         <Button
           testID="custom-render"
           onPress={(): void => {
@@ -237,6 +244,12 @@ const AppNavigator = createStackNavigator({
       title: "Custom styling",
     },
   },
+  CustomMergeStyles: {
+    screen: CustomMergeStyles,
+    navigationOptions: {
+      title: "Custom styling merging with defaults",
+    },
+  },
   CustomWidth: {
     screen: CustomWidth,
     navigationOptions: {

diff --git a/examples/components/CustomMergeStyles.tsx b/examples/components/CustomMergeStyles.tsx
@@ -0,0 +1,94 @@
+import React from "react";
+import {
+  AccessibilityInfo,
+  Platform,
+  Text,
+  TextStyle,
+  View,
+  ViewStyle,
+} from "react-native";
+import Carousel from "../../src/index";
+
+const styles = {
+  slide1: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#a3c9a8",
+  } as ViewStyle,
+  slide2: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#84b59f",
+  } as ViewStyle,
+  slide3: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#69a297",
+  } as ViewStyle,
+  text: {
+    color: "#1f2d3d",
+    opacity: 0.7,
+    fontSize: 48,
+    fontWeight: "bold",
+  } as TextStyle,
+};
+
+export const CustomMergeStyles = (): JSX.Element => (
+  <Carousel
+    mergeStyles={true}
+    dotsContainerStyle={{
+      position: "absolute",
+      top: 25,
+      left: 0,
+      right: 0,
+      alignItems: "flex-start",
+    }}
+    activeDotStyle={{
+      backgroundColor: "#eace15",
+    }}
+    dotStyle={{
+      backgroundColor: "rgba(0,0,0,.2)",
+    }}
+    controlsContainerStyle={{
+      position: "absolute",
+      top: 30,
+      left: 0,
+      right: 0,
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "flex-start",
+    }}
+    controlsButtonStyle={{
+      backgroundColor: "black",
+      borderRadius: 60,
+      opacity: 0.5,
+      width: 80,
+      height: 80,
+      flexDirection: "row",
+      justifyContent: "center",
+      alignItems: "center",
+    }}
+    controlsTextStyle={{ fontSize: 50, color: "#eace15", padding: 0 }}
+    onIndexChanged={({ index, total }): void => {
+      if (Platform.OS === "ios") {
+        const page = index + 1;
+        AccessibilityInfo.announceForAccessibility(
+          `Changed to page ${page}/${total}`
+        );
+      }
+    }}
+  >
+    <View style={styles.slide1}>
+      <Text style={styles.text}>1</Text>
+    </View>
+    <View style={styles.slide2}>
+      <Text style={styles.text}>2</Text>
+    </View>
+    <View style={styles.slide3}>
+      <Text style={styles.text}>3</Text>
+    </View>
+  </Carousel>
+);
diff --git a/examples/components/CustomStyles.tsx b/examples/components/CustomStyles.tsx
@@ -7,7 +7,7 @@ import {
   View,
   ViewStyle
 } from "react-native";
-import Carousel from "../../src/index";
+import Carousel, { defaultStyles } from "../../src/index";
 
 const styles = {
   slide1: {
@@ -67,15 +67,13 @@ export const CustomStyles = (): JSX.Element => (
       marginBottom: 3
     }}
     controlsContainerStyle={{
-      flexDirection: "row",
+      ...defaultStyles.controlsContainer,
       position: "absolute",
       top: 30,
       left: 0,
       right: 0,
       paddingHorizontal: 10,
       paddingVertical: 10,
-      justifyContent: "space-between",
-      alignItems: "center"
     }}
     controlsButtonStyle={{
       display: "flex",

diff --git a/examples/components/index.ts b/examples/components/index.ts
@@ -9,6 +9,7 @@ export { CustomIndex } from "./CustomIndex";
 export { CustomRender } from "./CustomRender";
 export { CustomSize } from "./CustomSize";
 export { CustomStyles } from "./CustomStyles";
+export { CustomMergeStyles } from "./CustomMergeStyles";
 export { CustomWidth } from "./CustomWidth";
 export { DisabledControls } from "./DisabledControls";
 export { Loop } from "./Loop";

diff --git a/index.d.ts b/index.d.ts
@@ -97,6 +97,7 @@ export interface Props
   accessibilityLabelPrev: string;
   accessibilityLabelNext: string;
   children: JSX.Element | JSX.Element[];
+  mergeStyles: boolean;
 }
 
 export interface State {
@@ -110,6 +111,8 @@ export interface State {
   };
 }
 
+export { defaultStyles } from "./src/styles"
+
 declare module "pinar" {
   export default class Pinar extends PureComponent<Props, State> {
     static defaultProps: {
@@ -131,6 +134,7 @@ declare module "pinar" {
       accessibilityLabelPrev: string;
       accessibilityLabelNext: string;
       index: number;
+      mergeStyles: boolean;
     };
     public scrollBy(options: ScrollByOptions): void;
     public scrollToIndex(options: ScrollByOptions): void;

diff --git a/src/Pinar.tsx b/src/Pinar.tsx
@@ -36,6 +36,7 @@ const defaultCarouselProps = {
   accessibilityLabelPrev: "Previous",
   accessibilityLabelNext: "Next",
   index: 0,
+  mergeStyles: false,
 };
 
 const styles = StyleSheet.create(defaultStyles);
@@ -429,6 +430,7 @@ export class Pinar extends React.PureComponent<Props, State> {
         accessibilityLabelNext,
         controlsButtonStyle,
         controlsTextStyle,
+        mergeStyles,
       } = this.props;
       return (
         <TouchableOpacity
@@ -442,7 +444,11 @@ export class Pinar extends React.PureComponent<Props, State> {
           <Text
             accessibilityLabel={accessibilityLabelNext}
             accessible={accessibility}
-            style={controlsTextStyle || styles.buttonText}
+            style={
+              mergeStyles
+                ? [styles.buttonText, controlsTextStyle]
+                : controlsTextStyle || styles.buttonText
+            }
           >
             ›
           </Text>
@@ -468,6 +474,7 @@ export class Pinar extends React.PureComponent<Props, State> {
         accessibilityLabelPrev,
         controlsButtonStyle,
         controlsTextStyle,
+        mergeStyles,
       } = this.props;
       return (
         <TouchableOpacity
@@ -481,7 +488,11 @@ export class Pinar extends React.PureComponent<Props, State> {
           <Text
             accessibilityLabel={accessibilityLabelPrev}
             accessible={accessibility}
-            style={controlsTextStyle || styles.buttonText}
+            style={
+              mergeStyles
+                ? [styles.buttonText, controlsTextStyle]
+                : controlsTextStyle || styles.buttonText
+            }
           >
             ‹
           </Text>
@@ -509,7 +520,7 @@ export class Pinar extends React.PureComponent<Props, State> {
     }
 
     const { height, width } = this.state;
-    const { controlsContainerStyle } = this.props;
+    const { controlsContainerStyle, mergeStyles } = this.props;
 
     const defaultControlsContainerStyle = [
       styles.controlsContainer,
@@ -518,7 +529,11 @@ export class Pinar extends React.PureComponent<Props, State> {
     return (
       <View
         pointerEvents="box-none"
-        style={controlsContainerStyle || defaultControlsContainerStyle}
+        style={
+          mergeStyles
+            ? [defaultControlsContainerStyle, controlsContainerStyle]
+            : controlsContainerStyle || defaultControlsContainerStyle
+        }
       >
         {this.renderPrev()}
         {this.renderNext()}
@@ -544,13 +559,20 @@ export class Pinar extends React.PureComponent<Props, State> {
       horizontal,
       renderActiveDot,
       renderDot,
+      mergeStyles,
     } = this.props;
     const defaultDotsContainerStyle = horizontal
       ? styles.dotsContainerHorizontal
       : styles.dotsContainerVertical;
 
     return (
-      <View style={dotsContainerStyle || defaultDotsContainerStyle}>
+      <View
+        style={
+          mergeStyles
+            ? [defaultDotsContainerStyle, dotsContainerStyle]
+            : dotsContainerStyle || defaultDotsContainerStyle
+        }
+      >
         {React.Children.map(
           children,
           (_: JSX.Element, i: number): JSX.Element => {
@@ -566,7 +588,10 @@ export class Pinar extends React.PureComponent<Props, State> {
             const style = isActive
               ? activeDotStyle || styles.dotActive
               : dotStyle || styles.dot;
-            return <View key={i} style={style} />;
+            const mergeStyle = isActive
+              ? [styles.dotActive, activeDotStyle]
+              : [styles.dot, dotStyle];
+            return <View key={i} style={mergeStyles ? mergeStyle : style} />;
             /* eslint-enable react/no-array-index-key */
           }
         )}