Merge pull request #240 from genny-project/release-1.2.0

Release 1.2.0

docs/LAYOUTS.md

@@ -128,6 +128,7 @@ The context is a data object can contains a pool of data that you can use. The c
   "props": "If this layout is a sublayout (layout loaded from a layout) any props passed in are accessible here",
   "time": "An object which returns information about the current time, for example time of day (morning, evening etc)",
   "user": "An object containing information about the currently logged in user (if they exist)",
+  "media": "An object containing information about the screen and window sizes",
   "repeater": "If you are using the repeater functionality than this object will exist and include the data of the current item that is being repeated"
 }
 ```
@@ -164,7 +165,7 @@ This will pass the raw `user.attributes` object straight through as the `data` p
 
 Sometimes you'll want to repeat a component based on your data. This is handy for doing things like showing lists. To repeat a component based on specific data we set the `repeat` field as well as setting the child component that we need repeater. You'll notice that the **children object has been set to a single object instead of an array**. This required whenever using the repeater functionality.
 
-For example, let's say we want to list a users payment methods inside a `Box`. 
+For example, let's say we want to list a users payment methods inside a `Box`.
 
 ```json
 {
@@ -371,23 +372,23 @@ Additionally there is also support for using an array of conditionals as follows
 
       },
       "then": {
-        
+
       }
     },
     {
       "if": {
 
       },
       "then": {
-        
+
       }
     },
     {
       "if": {
 
       },
       "then": {
-        
+
       }
     }
   ]

src/constants/index.js

@@ -1,3 +1,4 @@
 export * from './sidebar';
 export * from './keycloak';
 export * from './layout';
+export * from './media';

src/constants/media/index.js

@@ -0,0 +1 @@
+export * from './media';

src/constants/media/media.js

@@ -0,0 +1,2 @@
+export const SMALL_SCREEN = 767;
+export const MEDIUM_SCREEN = 992;

src/utils/index.js

@@ -22,3 +22,4 @@ export * from './string';
 export * from './types';
 export * from './payments';
 export * from './color';
+export * from './screen';

src/utils/screen/getDeviceSize.js

@@ -0,0 +1,16 @@
+import { Dimensions } from 'react-native-web';
+import { SMALL_SCREEN, MEDIUM_SCREEN } from '../../constants';
+
+const getDeviceSize = () => {
+  const windowDimensions = Dimensions.get( 'window' );
+
+  return windowDimensions.width <= SMALL_SCREEN
+    ? 'sm'
+    : ( windowDimensions.width > SMALL_SCREEN && windowDimensions.width <= MEDIUM_SCREEN )
+      ? 'md'
+      : windowDimensions.width >= MEDIUM_SCREEN
+        ? 'lg'
+        : 'undefined';
+};
+
+export default getDeviceSize;

src/utils/screen/index.js

@@ -0,0 +1 @@
+export { default as getDeviceSize } from './getDeviceSize';

src/views/components/bucket-view/BucketView.web.js

@@ -1,7 +1,9 @@
 import React, { PureComponent } from 'react';
 import { string, number, any, object } from 'prop-types';
-import { isArray } from '../../../utils';
-import { Box, Text } from '../../components';
+import { isArray, getDeviceSize } from '../../../utils';
+import { Box, Text, Touchable, Icon } from '../../components';
+
+// let containerWidth = null;
 
 class BucketView extends PureComponent {
   static defaultProps = {
@@ -18,6 +20,36 @@ class BucketView extends PureComponent {
     testID: string,
   }
 
+  state = {
+    currentBucket: getDeviceSize() === 'sm' ? 0 : null,
+  }
+
+  handlePressPrevious = () => {
+    if ( this.state.currentBucket > 0 ) {
+      this.setState( state => ({
+        currentBucket: state.currentBucket - 1,
+      }));
+    }
+  }
+
+  handlePressNext = () => {
+    if ( this.state.currentBucket < this.props.children.length - 1 ) {
+      this.setState( state => ({
+        currentBucket: state.currentBucket + 1,
+      }));
+    }
+  }
+
+  // handleContainerWidth = ( event ) => {
+  //   // var { width } = event.nativeEvent.layout;
+
+  //   // console.log( width );
+
+  //   // if ( width ) {
+  //   //   containerWidth = width;
+  //   // }
+  // }
+
   render() {
     const {
       padding,
@@ -38,32 +70,141 @@ class BucketView extends PureComponent {
         padding={padding}
         backgroundColor={backgroundColor}
         testID={testID}
+        {...getDeviceSize() === 'sm'
+          ? {
+            position: 'relative',
+          }
+          : {}
+        }
       >
+        {
+          getDeviceSize() === 'sm' &&
+          this.state.currentBucket > 0
+            ? (
+              <Box
+                width={30}
+                height="100%"
+                position="absolute"
+                top={0}
+                left={0}
+                zIndex={40}
+                alignItems="center"
+                justifyContent="center"
+              >
+                <Touchable
+                  withFeeback
+                  onPress={this.handlePressPrevious}
+                >
+                  <Box
+                    opacity={0.25}
+                    width={25}
+                    height={50}
+                    backgroundColor="black"
+                    borderRadius={5}
+                    alignItems="center"
+                    justifyContent="center"
+                  >
+                    <Icon
+                      name="chevron_left"
+                      color="white"
+                    />
+                  </Box>
+                </Touchable>
+              </Box>
+            )
+            : null
+        }
+        {
+          getDeviceSize() === 'sm' &&
+          this.state.currentBucket < this.props.children.length - 1
+            ? (
+              <Box
+                width={30}
+                height="100%"
+                position="absolute"
+                top={0}
+                right={0}
+                zIndex={40}
+                alignItems="center"
+                justifyContent="center"
+              >
+                <Touchable
+                  withFeeback
+                  onPress={this.handlePressNext}
+                >
+                  <Box
+                    opacity={0.25}
+                    backgroundColor="black"
+                    width={25}
+                    height={50}
+                    borderRadius={5}
+                    alignItems="center"
+                    justifyContent="center"
+                  >
+                    <Icon
+                      name="chevron_right"
+                      color="white"
+                    />
+                  </Box>
+                </Touchable>
+              </Box>
+            )
+            : null
+        }
         <Box
           width="100%"
           flex={1}
+          {...getDeviceSize() === 'sm'
+            ? {
+              overflowX: 'hidden',
+            }
+            : {}
+          }
         >
-          {isArray( children, { ofMinLength: 1 }) ? (
-            children.map(( child, index ) => (
-              <Box
-                key={child.props.id || index}
-                flex={1}
-                backgroundColor={index % 2 === 0 && alternateBackgroundColor}
-                marginRight={(
-                  index < children.length - 1
-                    ? gutter
-                    : null
-                )}
-                {...contentProps}
-              >
-                {child}
-              </Box>
-            ))
-          ) : (
-            <Text>
-              No items to display
-            </Text>
-          )}
+          <Box
+            {...getDeviceSize() === 'sm'
+              ? {
+                onLayout: this.handleContainerWidth,
+              }
+              : {
+                width: '100%',
+                flex: 1,
+              }
+            }
+          >
+            {isArray( children, { ofMinLength: 1 }) ? (
+              children.map(( child, index ) => (
+                <Box
+                  key={child.props.id || index}
+                  flex={1}
+                  backgroundColor={index % 2 === 0 && alternateBackgroundColor}
+                  marginRight={(
+                    index < children.length - 1 &&
+                    getDeviceSize() !== 'sm'
+                      ? gutter
+                      : null
+                  )}
+                  {...contentProps}
+                  {...getDeviceSize() === 'sm'
+                    ? {
+                      minWidth: '100vw',
+                      transform: `translate(-${100 * this.state.currentBucket}%, 0)`,
+                      transitionDuration: '300ms',
+                      transitionProperty: 'transform',
+                      transitionTimingFunction: 'ease',
+                    }
+                    : {}
+                  }
+                >
+                  {child}
+                </Box>
+              ))
+            ) : (
+              <Text>
+                No items to display
+              </Text>
+            )}
+          </Box>
         </Box>
       </Box>
     );

src/views/components/header/Header.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { string, object, number, oneOfType, shape, arrayOf, bool, oneOf } from 'prop-types';
 import { connect } from 'react-redux';
 import { Box, Recursive } from '../index';
+import { getDeviceSize } from '../../../utils';
 import HeaderLeft from './left';
 import HeaderRight from './right';
 import { LayoutConsumer } from '../../layout';
@@ -82,10 +83,13 @@ class Header extends Component {
       ...restProps
     } = this.props;
 
+    const deviceSize = getDeviceSize();
+
     if ( renderHeader ) {
       const context = {
         title: layout.title,
         user,
+        deviceSize,
       };
 
       return (

src/views/components/input/date-picker/InputDatePicker.web.js

@@ -8,6 +8,7 @@ import Downshift from 'downshift';
 import Kalendaryo from 'kalendaryo';
 import range from 'lodash.range';
 import { format, isSameMonth, isToday, setMonth, setYear, getMonth, getYear } from 'date-fns';
+import { getDeviceSize } from '../../../../utils';
 import { Input, Box, Text, Touchable, Icon } from '../../index';
 
 const NUMBER_OF_DOB_YEARS = 125;
@@ -156,6 +157,7 @@ class InputDatePicker extends PureComponent {
                         position="absolute"
                         zIndex={20}
                         top="100%"
+                        {...( getDeviceSize() === 'sm' ? { width: '100%' } : null )}
                         onPress={event => {
                           event.stopPropagation();
                         }}
@@ -197,15 +199,13 @@ class InputDatePicker extends PureComponent {
 
                                 setDate( newDate );
                               }}
-                              style={{
-                                color: '#000',
-                                backgroundColor: '#FFF',
-                                padding: 5,
-                                borderRadius: 10,
-                                borderWidth: 0,
-                                textAlign: 'center',
-                                cursor: 'pointer',
-                              }}
+                              color="#000"
+                              backgroundColor="#FFF"
+                              padding={5}
+                              borderRadius={10}
+                              borderWidth={0}
+                              textAlign="center"
+                              cursor="pointer"
                               testID={`input-date-picker-month ${testID}`}
                             />
                           </Box>
@@ -222,15 +222,13 @@ class InputDatePicker extends PureComponent {
 
                                 setDate( newDate );
                               }}
-                              style={{
-                                color: '#000',
-                                backgroundColor: '#FFF',
-                                padding: 5,
-                                borderRadius: 10,
-                                borderWidth: 0,
-                                textAlign: 'center',
-                                cursor: 'pointer',
-                              }}
+                              color="#000"
+                              backgroundColor="#FFF"
+                              padding={5}
+                              borderRadius={10}
+                              borderWidth={0}
+                              textAlign="center"
+                              cursor="pointer"
                               testID={`input-date-picker-year ${testID}`}
                             />
                           </Box>

src/views/components/input/file/inputFile.css

@@ -10,6 +10,12 @@
   flex-direction: column !important;
 }
 
+@media (max-width: 767px) {
+  .uppy-Webcam-container {
+    width: 100% !important;
+  }
+}
+
 .uppy-Webcam-videoContainer {
   height: calc( 100% - 100px ) !important;
   display: flex !important;