@tactics/toddle-styleguide 4.0.2 → 4.2.0

package/index.d.ts

@@ -63,6 +63,8 @@ import { TimetableEditorStaff } from './src/components/organisms/timetable-edito
 import { InlineError } from './src/components/molecules/inline-error/inline-error.component';
 import { InlineNotice } from './src/components/molecules/inline-notice/inline-notice.component';
 import { SelectableListItem } from './src/components/molecules/selectable-list-item/selectable-list-item.component';
+import { SwipeableContainer } from './src/components/molecules/swipeable/swipeable-container.component';
+import { SwipeableAction } from './src/components/molecules/swipeable/swipeable-action.component';
 import { BubbleAlignment } from './src/types/bubble-alignment.enum';
 import { KeyBoardTypes } from './src/types/keyboard-types.enum';
 import { Size } from './src/types/size.enum';
@@ -74,4 +76,4 @@ import { ToddleDateTime } from './src/utilities/toddle-datetime/toddle-datetime.
 import { ThemeCtx } from './src/context/theme.context';
 import { Scale } from './src/theme/scale/index';
 import CreateResponsiveStyle from './src/theme/responsive/index';
-export { AllCapsHeading, Avatar, BackgroundGradient, BlockedMessage, Button, Calendar, CalendarSelect, CancelLink, Check, Checkbox, ChildListItem, ContactItem, ContactRole, DateInput, DefaultSelect, DepartmentLogo, FilterRange, FilterTab, Footer, Heading1, Heading2, Heading3, Heading4, Icon, ImageBubble, IncrementInput, Info, JournalEntry, LanguageButton, Line, LoadingIndicator, Logo, MessageInput, Modal, MoreInfoButton, MyChildListItem, Paragraph, PasswordInput, PersonInfoCard, Pill, Popover, PressableIcon, QuickFilter, QuickMessage, Search, SelectLink, SelectListItem, SelectPicker, SmallText, Snackbar, SplitContainer, Tag, TextBubble, TextInput, TimeLine, TimePicker, TimeTracker, TinyText, WaveBackground, WideButton, BubbleAlignment, Initials, KeyBoardTypes, Size, ThemeCtx, ToddleDateTime, VisualState, CreateResponsiveStyle, Scale, TimetableEdit, ContextLabel, Count, Amount, TimetableEditor, TimetableEditorStaff, TimeSlotRecord, TimeSlotSequence, InlineError, InlineNotice, SelectableListItem };
+export { AllCapsHeading, Avatar, BackgroundGradient, BlockedMessage, Button, Calendar, CalendarSelect, CancelLink, Check, Checkbox, ChildListItem, ContactItem, ContactRole, DateInput, DefaultSelect, DepartmentLogo, FilterRange, FilterTab, Footer, Heading1, Heading2, Heading3, Heading4, Icon, ImageBubble, IncrementInput, Info, JournalEntry, LanguageButton, Line, LoadingIndicator, Logo, MessageInput, Modal, MoreInfoButton, MyChildListItem, Paragraph, PasswordInput, PersonInfoCard, Pill, Popover, PressableIcon, QuickFilter, QuickMessage, Search, SelectLink, SelectListItem, SelectPicker, SmallText, Snackbar, SplitContainer, Tag, TextBubble, TextInput, TimeLine, TimePicker, TimeTracker, TinyText, WaveBackground, WideButton, BubbleAlignment, Initials, KeyBoardTypes, Size, ThemeCtx, ToddleDateTime, VisualState, CreateResponsiveStyle, Scale, TimetableEdit, ContextLabel, Count, Amount, TimetableEditor, TimetableEditorStaff, TimeSlotRecord, TimeSlotSequence, InlineError, InlineNotice, SelectableListItem, SwipeableContainer, SwipeableAction, };

package/index.tsx

@@ -84,6 +84,8 @@ import { TimetableEditorStaff } from './src/components/organisms/timetable-edito
 import { InlineError } from './src/components/molecules/inline-error/inline-error.component';
 import { InlineNotice } from './src/components/molecules/inline-notice/inline-notice.component';
 import { SelectableListItem } from './src/components/molecules/selectable-list-item/selectable-list-item.component';
+import { SwipeableContainer } from './src/components/molecules/swipeable/swipeable-container.component';
+import { SwipeableAction } from './src/components/molecules/swipeable/swipeable-action.component';
 
 // Exports of enums
 import {BubbleAlignment} from './src/types/bubble-alignment.enum';
@@ -188,5 +190,7 @@ export {
   TimeSlotSequence,
   InlineError,
   InlineNotice,
-  SelectableListItem
+  SelectableListItem,
+  SwipeableContainer,
+  SwipeableAction,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "4.0.2",
+  "version": "4.2.0",
   "main": "index.tsx",
   "types": "index.d.ts",
   "prepublish": "tsc",

package/src/components/molecules/quick-filter/quick-filter.preview.tsx

@@ -8,6 +8,7 @@ export const QuickFilterPreview = ({}: {}) => {
   const [successFilterIsSelected, setSuccessFilterIsSelected] = useState(false);
   const [errorFilterIsSelected, setErrorFilterIsSelected] = useState(false);
   const [warningFilterIsSelected, setWarningFilterIsSelected] = useState(false);
+  const [absentFilterIsSelected, setAbsentFilterIsSelected] = useState(false);
 
   return (
     <View>
@@ -43,6 +44,14 @@ export const QuickFilterPreview = ({}: {}) => {
         visualState={State.EXPECTED}
         isSelected={warningFilterIsSelected}
       />
+      <QuickFilter
+        id={'5'}
+        isLoading={false}
+        amount={5}
+        onSelect={() => setAbsentFilterIsSelected((current) => !current)}
+        visualState={State.ABSENT}
+        isSelected={absentFilterIsSelected}
+      />
     </View>
   );
 };

package/src/components/molecules/quick-filter/quick-filter.styles.js

@@ -39,5 +39,11 @@ export const Stylesheet = (context, visualState, isSelected) =>
           : context.colors.ui.white,
         borderColor: context.colors.state.out.dark,
       },
+      visualState === State.ABSENT && {
+        backgroundColor: isSelected
+          ? context.colors.state.absent.default
+          : context.colors.ui.white,
+        borderColor: context.colors.state.absent.dark,
+      },
     ],
   });

package/src/components/molecules/swipeable/swipeable-action.component.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { VisualState } from "../../../types/visual-state.enum";
+type SwipeableActionProps = {
+    visualState: VisualState;
+    label: string;
+    icon: React.ReactElement;
+    onPress: () => void;
+};
+export declare const SwipeableAction: ({ label, icon, visualState, onPress, }: SwipeableActionProps) => React.JSX.Element;
+export {};

package/src/components/molecules/swipeable/swipeable-action.component.tsx

@@ -0,0 +1,57 @@
+import React, { useContext } from "react";
+import { Text } from "react-native";
+import { RectButton } from "react-native-gesture-handler";
+import { VisualState } from "../../../types/visual-state.enum";
+import {Stylesheet} from './swipeable-action.styles';
+import {ThemeCtx} from '../../../context/theme.context';
+
+type SwipeableActionProps = {
+    visualState: VisualState;
+    label: string;
+    icon: React.ReactElement;
+    onPress: () => void;
+};
+
+export const SwipeableAction = ({
+    label,
+    icon,
+    visualState,
+    onPress,
+}: SwipeableActionProps) => {
+    const styles = Stylesheet();
+    const context = useContext(ThemeCtx);
+
+    const calculateBackgroundColor = (visualState: VisualState) => {
+        switch (visualState) {
+            case VisualState.ERROR:
+                return context.colors.ui.error.default;
+            case VisualState.SUCCESS:
+                return context.colors.ui.success.dark;
+            case VisualState.WARNING:
+                return context.colors.ui.warning.dark;
+            case VisualState.INACTIVE:
+                return context.colors.ui.darkgrey;
+            case VisualState.DEFAULT:
+                return context.colors.main[5];
+            default:
+                return context.colors.ui.darkgrey;
+        }
+    };
+
+
+    return (
+        <RectButton
+            onPress={onPress}
+            style={[{backgroundColor: calculateBackgroundColor(visualState)},styles.container]}
+        >
+            {icon}
+            <Text
+                numberOfLines={2}
+                ellipsizeMode="tail"
+                style={styles.text}
+            >
+                {label}
+            </Text>
+        </RectButton>
+    );
+};

package/src/components/molecules/swipeable/swipeable-action.styles.d.ts

@@ -0,0 +1,12 @@
+export function Stylesheet(): {
+    container: {
+        alignItems: "center";
+        justifyContent: "center";
+        gap: number;
+        color: string;
+        paddingHorizontal: number;
+    };
+    text: {
+        color: string;
+    };
+};

package/src/components/molecules/swipeable/swipeable-action.styles.js

@@ -0,0 +1,20 @@
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../theme/scale/index';
+
+export const Stylesheet = () =>
+    StyleSheet.create({
+        container: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: Scale.xs,
+            color: '#fff',
+            paddingHorizontal: Scale.xl,
+            maxWidth: 130,
+            paddingTop: Scale.xs,
+        },
+        text: {
+            color: '#fff',
+            textAlign: 'center',
+        }
+    }
+);

package/src/components/molecules/swipeable/swipeable-container.component.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { VisualState } from "../../../types/visual-state.enum";
+type SwipeableContainerProps = {
+    actions: SwipeableContainerAction[];
+    children: React.ReactNode;
+};
+type SwipeableContainerAction = {
+    visualState: VisualState;
+    label: string;
+    icon: React.ReactElement;
+    onPress: () => void;
+};
+export declare const SwipeableContainer: ({ actions, children }: SwipeableContainerProps) => React.JSX.Element;
+export {};

package/src/components/molecules/swipeable/swipeable-container.component.tsx

@@ -0,0 +1,69 @@
+import React, { useContext } from "react";
+import { Swipeable } from "react-native-gesture-handler";
+import { VisualState } from "../../../types/visual-state.enum";
+import { SwipeableAction } from "./swipeable-action.component";
+import {Stylesheet} from './swipeable-container.styles';
+import {ThemeCtx} from '../../../context/theme.context';
+
+type SwipeableContainerProps = {
+    actions: SwipeableContainerAction[];
+    children: React.ReactNode;
+};
+
+type SwipeableContainerAction = {
+    visualState: VisualState;
+    label: string;
+    icon: React.ReactElement;
+    onPress: () => void;
+}
+
+export const SwipeableContainer = ({
+    actions,
+    children
+}: SwipeableContainerProps) => {
+    const styles = Stylesheet();
+    const swipeableRef = React.useRef<Swipeable>(null);
+    const context = useContext(ThemeCtx);
+
+    const calculateBackgroundColor = () => {
+        const lastAction = actions[actions.length - 1];
+        const visualState = lastAction?.visualState;
+
+        switch (visualState) {
+            case VisualState.ERROR:
+                return context.colors.ui.error.default;
+            case VisualState.SUCCESS:
+                return context.colors.ui.success.dark;
+            case VisualState.WARNING:
+                return context.colors.ui.warning.dark;
+            case VisualState.INACTIVE:
+                return context.colors.ui.darkgrey;
+            case VisualState.DEFAULT:
+                return context.colors.main[5];
+            default:
+                return context.colors.ui.darkgrey;
+        }
+    };
+
+    const renderLeftActions = () => {
+        return actions.map(i => {
+            return <SwipeableAction
+                key={i.label}
+                label={i.label}
+                visualState={i.visualState}
+                icon={i.icon}
+                onPress={() => {
+                    i.onPress();
+                    swipeableRef.current?.close();
+                }}
+                />
+            }
+        );
+    };
+
+    return (
+        <Swipeable renderLeftActions={renderLeftActions} ref={swipeableRef} containerStyle={[{backgroundColor: calculateBackgroundColor()},styles.container]}>
+            {children}
+        </Swipeable>
+    );
+};

package/src/components/molecules/swipeable/swipeable-container.styles.d.ts

@@ -0,0 +1,9 @@
+export function Stylesheet(): {
+    container: {
+        borderTopLeftRadius: number;
+        borderBottomLeftRadius: number;
+        borderTopRightRadius: number;
+        borderBottomRightRadius: number;
+        overflow: "hidden";
+    };
+};

package/src/components/molecules/swipeable/swipeable-container.styles.js

@@ -0,0 +1,14 @@
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../theme/scale/index';
+
+export const Stylesheet = () =>
+    StyleSheet.create({
+        container: {
+            borderTopLeftRadius: Scale.xl,
+            borderBottomLeftRadius: Scale.xl,
+            borderTopRightRadius: Scale.l,
+            borderBottomRightRadius: Scale.l,
+            overflow: 'hidden',
+        },
+    }
+);

package/src/components/organisms/child-list-item/child-list-item.preview.tsx

@@ -1,10 +1,13 @@
-import React, {useState} from 'react';
+import React, {useContext, useState} from 'react';
 import {ChildListItem} from './child-list-item.component';
 import {FlatList, View} from 'react-native';
 import {VisualState} from '../../../types/visual-state.enum';
 import {PressableIcon} from '../../molecules/pressable-icon/pressable-icon.component';
 import {Icon} from '../../../icons/index';
 import {Initials} from '../../../models/initials.model';
+import { GestureHandlerRootView, Swipeable } from 'react-native-gesture-handler';
+import {ThemeCtx} from '../../../context/theme.context';
+import { SwipeableContainer } from '../../molecules/swipeable/swipeable-container.component';
 
 interface IData {
   id: string;
@@ -35,6 +38,8 @@ export const ChildListItemPreview = ({}: {}) => {
   const [isSelectable, setIsSelectable] = useState(false);
   console.log(selectedIDs);
 
+  const context = useContext(ThemeCtx);
+
   const selectChildren = () => {
     if (!isSelectable) {
       setIsSelectable(true);
@@ -57,55 +62,80 @@ export const ChildListItemPreview = ({}: {}) => {
   const [isLoading, setIsLoading] = useState(false);
 
   const renderChildList = ({item}: any) => {
+    const swipeableActions = [
+      {
+        visualState: VisualState.ERROR,
+        label: 'Afwezig',
+        icon: <Icon name='clock' style='regular' size={20} color={context.colors.ui.white} />,
+        onPress: () => {
+          console.log('Afwezig');
+        },
+      },
+      {
+        visualState: VisualState.DEFAULT,
+        label: 'Planning Wissen',
+        icon: <Icon name='clock' style='regular' size={20} color={context.colors.ui.white} />,
+        onPress: () => {
+          console.log('Planning Wissen');
+        },
+      }
+    ];
+
     return (
-      <ChildListItem
-        id={item.id}
-        name={item.name}
-        department={item.department}
-        selectable={isSelectable}
-        isSelected={isIdSelected(item.id)}
-        onPressArrow={(id) => console.log(id + ' pressed')}
-        onPressText={(id) => console.log('We will do something with id ' + id)}
-        onLongPress={(id) => console.log('Do something with id ' + id)}
-        onSelect={addIdToSelected}
-        // sourceAvatar={require('./../../../../assets/components/avatar/baby.png')}
-        sourceAvatar={Initials.for('Zeno', 'Driesen')}
-        tags={item.tags}
-        error={true}
-      />
+      <SwipeableContainer
+        actions={swipeableActions}
+      >
+        <ChildListItem
+          id={item.id}
+          name={item.name}
+          department={item.department}
+          selectable={isSelectable}
+          isSelected={isIdSelected(item.id)}
+          onPressArrow={(id) => console.log(id + ' pressed')}
+          onPressText={(id) => console.log('We will do something with id ' + id)}
+          onLongPress={(id) => console.log('Do something with id ' + id)}
+          onSelect={addIdToSelected}
+          // sourceAvatar={require('./../../../../assets/components/avatar/baby.png')}
+          sourceAvatar={Initials.for('Zeno', 'Driesen')}
+          tags={item.tags}
+          error={true}
+        />
+      </SwipeableContainer>
     );
   };
 
   return (
-    <View
-      style={{
-        flex: 1,
-        padding: 16,
-        justifyContent: 'center',
-        backgroundColor: 'white',
-      }}
-    >
-      <View style={{alignItems: 'center', marginBottom: 28}}>
-        <PressableIcon
-          icon={
-            <Icon
-              style={'regular'}
-              name={'sm-view-grid-add'}
-              key={'unique key'}
-            />
-          }
-          onPress={selectChildren}
-        />
-      </View>
-      <FlatList
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <View
         style={{
           flex: 1,
+          padding: 16,
+          justifyContent: 'center',
+          backgroundColor: 'white',
         }}
-        contentContainerStyle={{gap: 16}}
-        data={data}
-        renderItem={renderChildList}
-        keyExtractor={(item) => item.id}
-      />
-    </View>
+      >
+        <View style={{alignItems: 'center', marginBottom: 28}}>
+          <PressableIcon
+            icon={
+              <Icon
+                style={'regular'}
+                name={'sm-view-grid-add'}
+                key={'unique key'}
+              />
+            }
+            onPress={selectChildren}
+          />
+        </View>
+        <FlatList
+          style={{
+            flex: 1,
+          }}
+          contentContainerStyle={{gap: 16}}
+          data={data}
+          renderItem={renderChildList}
+          keyExtractor={(item) => item.id}
+        />
+      </View>
+    </GestureHandlerRootView>
   );
 };

package/src/context/theme.context.d.ts

@@ -34,6 +34,10 @@ interface ThemeInterface {
                 default: string;
                 dark: string;
             };
+            absent: {
+                default: string;
+                dark: string;
+            };
         };
         ui: {
             black: string;

package/src/context/theme.context.ts

@@ -36,6 +36,10 @@ interface ThemeInterface {
         default: string;
         dark: string;
       };
+      absent: {
+        default: string;
+        dark: string;
+      };
     };
     ui: {
       black: string;

package/src/theme/provider/parent.theme.d.ts

@@ -33,6 +33,10 @@ export declare const ParentTheme: {
                 default: string;
                 dark: string;
             };
+            absent: {
+                default: string;
+                dark: string;
+            };
         };
         ui: {
             black: string;

package/src/theme/provider/parent.theme.ts

@@ -35,6 +35,10 @@ export const ParentTheme = {
         default: Colors.ui.success.default,
         dark: Colors.ui.success.dark,
       },
+      absent: {
+        default: Colors.ui.error.default,
+        dark: Colors.ui.error.dark,
+      },
     },
     ui: {
       black: Colors.ui.black,

package/src/theme/provider/staff-member.theme.d.ts

@@ -33,6 +33,10 @@ export declare const StaffMemberTheme: {
                 default: string;
                 dark: string;
             };
+            absent: {
+                default: string;
+                dark: string;
+            };
         };
         ui: {
             black: string;

package/src/theme/provider/staff-member.theme.ts

@@ -35,6 +35,10 @@ export const StaffMemberTheme = {
         default: Colors.ui.success.default,
         dark: Colors.ui.success.dark,
       },
+      absent: {
+        default: Colors.ui.error.default,
+        dark: Colors.ui.error.dark,
+      },
     },
     ui: {
       black: Colors.ui.black,

package/src/types/state.enum.d.ts

@@ -2,5 +2,6 @@ export declare enum State {
     UNPLANNED = "UNPLANNED",
     IN = "IN",
     OUT = "OUT",
-    EXPECTED = "EXPECTED"
+    EXPECTED = "EXPECTED",
+    ABSENT = "ABSENT"
 }

package/src/types/state.enum.ts

@@ -3,4 +3,5 @@ export enum State {
   IN = 'IN',
   OUT = 'OUT',
   EXPECTED = 'EXPECTED',
+  ABSENT = 'ABSENT',
 }

package/src/utilities/color-handler/color-handler.ts

@@ -48,6 +48,7 @@ export const StateTextColorHandler = (
   const expectedTextColor = context.colors.state.expected.dark;
   const inTextColor = context.colors.state.in.dark;
   const outTextColor = context.colors.state.out.dark;
+  const absentTextColor = context.colors.state.absent.dark;
 
   if (visualState === State.UNPLANNED) {
     if (selected && loading) return selectedTextColor;
@@ -65,5 +66,9 @@ export const StateTextColorHandler = (
     if (selected && loading) return selectedTextColor;
     if (selected && !loading) return selectedTextColor;
     return selected ? selectedTextColor : outTextColor;
+  } else if (visualState === State.ABSENT) {
+    if (selected && loading) return selectedTextColor;
+    if (selected && !loading) return selectedTextColor;
+    return selected ? selectedTextColor : absentTextColor;
   } else return context.colors.ui.white;
 };