@tactics/toddle-styleguide 1.2.3 → 1.2.5

package/src/components/molecules/swipe/swipe.component.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
+import { ReactNode } from 'react';
 type SwipeProps = {
-    children: React.ReactNode;
-    onIndexChanged?: (index: number) => void;
+    children: ReactNode;
+    onIndexChange?: (index: number) => void;
 };
-declare const Swipe: ({ children, onIndexChanged }: SwipeProps) => JSX.Element;
+declare const Swipe: ({ children, onIndexChange }: SwipeProps) => JSX.Element;
 export { Swipe as Swipe };

package/src/components/molecules/swipe/swipe.component.tsx

@@ -1,50 +1,77 @@
-import React, {Children, useContext} from 'react';
+import React, {Children, ReactNode, useContext, useRef, useState} from 'react';
 import {ThemeCtx} from '../../../context/theme.context';
-import Swiper from 'react-native-swiper';
-import {View} from 'react-native';
-import {Stylesheet} from './Swipe.styles';
+import {Stylesheet} from './swipe.styles';
 import {Icon} from '../../../icons/index';
+import PagerView, {PagerViewOnPageSelectedEvent} from 'react-native-pager-view';
+import {Pressable, View} from 'react-native';
 
 type SwipeProps = {
-  children: React.ReactNode;
-  onIndexChanged?: (index: number) => void;
+  children: ReactNode;
+  onIndexChange?: (index: number) => void;
 };
 
-const Swipe = ({children, onIndexChanged}: SwipeProps) => {
+const Swipe = ({children, onIndexChange}: SwipeProps) => {
   const context = useContext(ThemeCtx);
   const styles = Stylesheet();
+  const viewPagerRef = useRef<PagerView>(null);
+  const [currentPage, setCurrentPage] = useState(0);
+
   const count = Children.count(children);
 
   if (count > 5) {
     console.warn(' for more then 5 child-components, use another way to show');
   }
 
+  const handlePageSelected = (event: PagerViewOnPageSelectedEvent) => {
+    const currentIndex = event.nativeEvent.position;
+    setCurrentPage(currentIndex);
+
+    if (onIndexChange) {
+      onIndexChange(currentIndex);
+    }
+  };
+
   return (
-    <View style={styles.container}>
-      <Swiper
-        loop={false}
-        onIndexChanged={onIndexChanged}
-        paginationStyle={{bottom: 0}}
-        showsButtons={true}
-        dotColor={context.colors.ui.lightgrey}
-        activeDotColor={context.colors.main['7']}
-        prevButton={
+    <View style={styles.rootContainer}>
+      {currentPage !== 0 && (
+        <Pressable
+          style={styles.leftArrowContainer}
+          onPress={() =>
+            viewPagerRef.current?.setPage(
+              currentPage != 1 ? currentPage - 1 : 0
+            )
+          }
+        >
           <Icon
             style={'regular'}
             name={'chevron-left'}
             color={context.colors.main['0']}
           />
-        }
-        nextButton={
+        </Pressable>
+      )}
+
+      {currentPage !== count - 1 && (
+        <Pressable
+          style={styles.rightArrowContainer}
+          onPress={() => viewPagerRef.current?.setPage(currentPage + 1)}
+        >
           <Icon
             style={'regular'}
             name={'chevron-right'}
             color={context.colors.main['0']}
           />
-        }
+        </Pressable>
+      )}
+
+      <PagerView
+        ref={viewPagerRef}
+        style={styles.swipeContainer}
+        initialPage={0}
+        collapsable={false}
+        onPageSelected={handlePageSelected}
       >
         {children}
-      </Swiper>
+      </PagerView>
     </View>
   );
 };

package/src/components/molecules/swipe/swipe.preview.tsx

@@ -1,63 +1,123 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {Swipe} from './swipe.component';
 import {View} from 'react-native';
+import {Heading2} from '../../atoms/heading-components';
+import {Icon} from '../../../icons/index';
+import {TimePicker} from '../time-picker/time-picker.component';
+import {Paragraph} from '../../atoms/paragraph-components';
 import {Button} from '../button/button.component';
-import {Pill} from '../pill/pill.component';
-import {VisualState} from '../../../types/visual-state.enum';
 
 export const SwipePreview = ({}: {}) => {
+  const [checkInHours, setCheckInHours] = useState('09');
+  const [checkInMinutes, setCheckInMinutes] = useState('06');
+
   return (
-    <View>
-      <Swipe onIndexChanged={(index) => console.log(index)}>
-        <View
-          style={{
-            marginRight: 15,
-            marginLeft: 15,
-            marginTop: 20,
-            alignSelf: 'center',
-          }}
-        >
-          <Button
-            label={'button 1'}
-            onPress={() => console.log('button 1 pressed')}
-          />
-        </View>
-        <View style={{marginTop: 32, alignSelf: 'center'}}>
-          <Pill label={'Pill'} visualState={VisualState.DEFAULT} />
-        </View>
-        <View
-          style={{
-            marginRight: 15,
-            marginLeft: 15,
-            marginTop: 20,
-            width: '60%',
-            alignSelf: 'center',
-          }}
-        >
-          <Button
-            label={'button 2'}
-            onPress={() => console.log('button 2 pressed')}
-          />
+    <Swipe>
+      {/*FIRST CHILD*/}
+      <View
+        style={{
+          alignItems: 'center',
+          gap: 60,
+        }}
+        key={1}
+      >
+        <View style={{gap: 10}}>
+          <Heading2 bold={true} textAlign={'center'}>
+            Uurregistratie
+          </Heading2>
+
+          <View
+            style={{
+              flexDirection: 'row',
+              gap: 16,
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            <Icon style={'regular'} name={'calendar'} color={'#000000'} />
+            <View>
+              <Paragraph>17 Jan 2021</Paragraph>
+            </View>
+          </View>
         </View>
-        <View style={{marginTop: 32, width: '70%', alignSelf: 'center'}}>
-          <Pill label={'Pill'} visualState={VisualState.DEFAULT} />
+        <TimePicker
+          initialHours={checkInHours}
+          initialMinutes={checkInMinutes}
+          onChangeHours={setCheckInHours}
+          onChangeMinutes={setCheckInMinutes}
+        />
+      </View>
+
+      {/*SECOND CHILD*/}
+
+      <View
+        style={{
+          alignItems: 'center',
+          gap: 60,
+        }}
+        key={2}
+      >
+        <View style={{gap: 12}}>
+          <Heading2 bold={true} textAlign={'center'}>
+            Uurregistratie
+          </Heading2>
+
+          <View
+            style={{
+              flexDirection: 'row',
+              gap: 16,
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            <Icon style={'regular'} name={'calendar'} color={'#000000'} />
+            <View>
+              <Paragraph>17 Jan 2021</Paragraph>
+            </View>
+          </View>
         </View>
 
-        <View
-          style={{
-            marginRight: 15,
-            marginLeft: 15,
-            marginTop: 20,
-            width: '60%',
-            alignSelf: 'center',
-          }}
-        >
-          <Button
-            label={'button 3'}
-            onPress={() => console.log('button 3 pressed')}
-          />
+        <Button label={'Test button'} onPress={() => console.log('pressed')} />
+      </View>
+
+      {/*THIRD CHILD*/}
+
+      <View
+        style={{
+          alignItems: 'center',
+          gap: 60,
+        }}
+        key={3}
+      >
+        <View style={{gap: 12}}>
+          <Heading2 bold={true} textAlign={'center'}>
+            Uurregistratie
+          </Heading2>
+
+          <View
+            style={{
+              flexDirection: 'row',
+              gap: 16,
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            <Icon style={'regular'} name={'calendar'} color={'#000000'} />
+            <View>
+              <Paragraph>17 Jan 2021</Paragraph>
+            </View>
+          </View>
         </View>
-      </Swipe>
-    </View>
+
+        <TimePicker
+          initialHours={checkInHours}
+          initialMinutes={checkInMinutes}
+          onChangeHours={setCheckInHours}
+          onChangeMinutes={setCheckInMinutes}
+        />
+
+        <Button label={'Test button'} onPress={() => console.log('pressed')} />
+      </View>
+    </Swipe>
   );
 };

package/src/components/molecules/swipe/swipe.styles.d.ts

@@ -0,0 +1,28 @@
+export function Stylesheet(): {
+  rootContainer: {
+    flex: number;
+  };
+  leftArrowContainer: {
+    alignItems: 'center';
+    justifyContent: 'center';
+    position: 'absolute';
+    zIndex: number;
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+  };
+  rightArrowContainer: {
+    alignItems: 'center';
+    justifyContent: 'center';
+    position: 'absolute';
+    zIndex: number;
+    top: number;
+    right: number;
+    width: number;
+    height: number;
+  };
+  swipeContainer: {
+    flex: number;
+  };
+};

package/src/components/molecules/swipe/swipe.styles.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../theme/scale/index';
+export const Stylesheet = () =>
+  StyleSheet.create({
+    rootContainer: {
+      flex: 1,
+    },
+    leftArrowContainer: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      position: 'absolute',
+      zIndex: 10,
+      top: Scale.s,
+      left: 0,
+      width: 42,
+      height: 42,
+    },
+    rightArrowContainer: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      position: 'absolute',
+      zIndex: 10,
+      top: Scale.s,
+      right: 0,
+      width: 42,
+      height: 42,
+    },
+    swipeContainer: {
+      flex: 1,
+    },
+  });

package/src/components/molecules/swipe/swipe.test.js

@@ -5,7 +5,7 @@ import {View} from 'react-native';
 import {Button} from '../button/button.component';
 
 describe('Test Swipe component', () => {
-  it('should render an swipe component with dots and navigation arrows', () => {
+  it('should render an swipe component with navigation arrows', () => {
     const tree = renderer
       .create(
         <Swipe>

package/src/components/molecules/tag/__snapshots__/tag.test.js.snap

@@ -39,8 +39,10 @@ exports[`test Tag renders Tag correctly (blue, bold grey text) when isSelected i
         "backgroundColor": "#E5E8EB",
         "borderRadius": 50,
         "justifyContent": "center",
-        "paddingHorizontal": 8,
-        "paddingVertical": 8,
+        "paddingBottom": 8,
+        "paddingLeft": 12,
+        "paddingRight": 12,
+        "paddingTop": 8,
       }
     }
   >
@@ -62,9 +64,7 @@ exports[`test Tag renders Tag correctly (blue, bold grey text) when isSelected i
           undefined,
         ]
       }
-    >
-      Geblokkeerd
-    </Text>
+    />
   </View>
 </View>
 `;
@@ -108,8 +108,10 @@ exports[`test Tag renders Tag correctly (grey, black text) 1`] = `
         "backgroundColor": "#E5E8EB",
         "borderRadius": 50,
         "justifyContent": "center",
-        "paddingHorizontal": 8,
-        "paddingVertical": 8,
+        "paddingBottom": 8,
+        "paddingLeft": 12,
+        "paddingRight": 12,
+        "paddingTop": 8,
       }
     }
   >
@@ -131,9 +133,7 @@ exports[`test Tag renders Tag correctly (grey, black text) 1`] = `
           undefined,
         ]
       }
-    >
-      Geblokkeerd
-    </Text>
+    />
   </View>
 </View>
 `;

package/src/components/molecules/tag/tag.component.d.ts

@@ -1,12 +1,7 @@
-export interface TagPressEvent {
-    value: string;
-    isSelected: boolean;
-}
 type TagProps = {
     value: string;
-    text: string;
-    isSelected?: boolean;
-    onPress: (event: TagPressEvent) => void;
+    label: string;
+    onPress: (event: string) => void;
 };
-declare const Tag: ({ text, isSelected, onPress, value }: TagProps) => JSX.Element;
+declare const Tag: ({ label, onPress, value }: TagProps) => JSX.Element;
 export { Tag as Tag };

package/src/components/molecules/tag/tag.component.tsx

@@ -6,26 +6,20 @@ import {Stylesheet} from './tag.styles';
 import {View, Pressable} from 'react-native';
 import {SmallText} from '../../atoms/paragraph-components';
 
-export interface TagPressEvent {
-  value: string;
-  isSelected: boolean;
-}
-
 type TagProps = {
   value: string;
-  text: string;
-  isSelected?: boolean;
-  onPress: (event: TagPressEvent) => void;
+  label: string;
+  onPress: (event: string) => void;
 };
 
-const Tag = ({text, isSelected, onPress, value}: TagProps) => {
+const Tag = ({label, onPress, value}: TagProps) => {
+  const [isSelectedTag, setIsSelectedTag] = useState(false);
   const context = useContext(ThemeCtx);
-  const [isSelectedTag, setIsSelectedTag] = useState(isSelected);
   const styles = Stylesheet(context, isSelectedTag);
 
   const onClicked = () => {
     setIsSelectedTag((current) => !current);
-    onPress({value, isSelected: !isSelectedTag});
+    onPress(value);
   };
 
   return (
@@ -37,10 +31,10 @@ const Tag = ({text, isSelected, onPress, value}: TagProps) => {
             textAlign={'center'}
             textColor={context.colors.main[9]}
           >
-            {text}
+            {label}
           </SmallText>
         ) : (
-          <SmallText textAlign={'center'}>{text}</SmallText>
+          <SmallText textAlign={'center'}>{label}</SmallText>
         )}
       </View>
     </Pressable>

package/src/components/molecules/tag/tag.preview.tsx

@@ -1,27 +1,30 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {Tag} from './tag.component';
 import {View} from 'react-native';
 
 export const TagPreview = ({}: {}) => {
+  const [value, setValue] = useState('');
+
+  console.log(value);
   return (
-    <View>
-      <Tag
-        value={'tab1'}
-        text={'Algemeen'}
-        onPress={(e) => console.log('clicked', e)}
-      />
-      <Tag
-        value={'tab2'}
-        text={'Gezondheid'}
-        isSelected={true}
-        onPress={(e) => console.log('clicked', e)}
-      />
-      <Tag
-        value={'tab3'}
-        text={'Activiteit'}
-        isSelected={true}
-        onPress={(e) => console.log('clicked', e)}
-      />
+    <View
+      style={{
+        width: '100%',
+        height: '100%',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 12,
+      }}
+    >
+      <View>
+        <Tag value={'tab1'} label={'Algemeen'} onPress={setValue} />
+      </View>
+      <View>
+        <Tag value={'tab2'} label={'Gezondheid'} onPress={setValue} />
+      </View>
+      <View>
+        <Tag value={'tab3'} label={'Activiteit'} onPress={setValue} />
+      </View>
     </View>
   );
 };

package/src/components/molecules/tag/tag.styles.js

@@ -8,8 +8,10 @@ export const Stylesheet = (context, isSelected) =>
       borderRadius: 50,
       alignItems: 'center',
       justifyContent: 'center',
-      paddingVertical: Scale.xs,
-      paddingHorizontal: Scale.xs,
+      paddingLeft: Scale.s,
+      paddingTop: Scale.xs,
+      paddingRight: Scale.s,
+      paddingBottom: Scale.xs,
       backgroundColor: isSelected
         ? context.colors.main[5]
         : context.colors.ui.lightgrey,

package/src/components/molecules/tag/tag.test.js

@@ -6,7 +6,11 @@ describe('test Tag', () => {
   it('renders Tag correctly (grey, black text)', () => {
     const tree = renderer
       .create(
-        <Tag text={'Geblokkeerd'} onPress={() => console.log('clicked')} />
+        <Tag
+          value={'Geblokkeerd'}
+          text={'Geblokkeerd'}
+          onPress={(value) => console.log(value)}
+        />
       )
       .toJSON();
 
@@ -15,7 +19,11 @@ describe('test Tag', () => {
   it('renders Tag correctly (blue, bold grey text) when isSelected is true', () => {
     const tree = renderer
       .create(
-        <Tag text={'Geblokkeerd'} onPress={() => console.log('clicked')} />
+        <Tag
+          value={'Test2'}
+          text={'Tag2'}
+          onPress={(value) => console.log(value)}
+        />
       )
       .toJSON();