forked from bcgov/bc-wallet-mobile
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Terms Stack Signed-off-by: Jean-Christophe <[email protected]> * Adding accordion to terms and translation. * Removed bottom text. * Removed unused import. * Fixed margins and got closer to the design from Figma. * Adding TestId accordion Signed-off-by: agueye84 <[email protected]> * Update index.ts Signed-off-by: agueye84 <[email protected]> * Terms Stack Signed-off-by: agueye84 <[email protected]> * Terms Stack Signed-off-by: agueye84 <[email protected]> --------- Signed-off-by: Jean-Christophe <[email protected]> Signed-off-by: agueye84 <[email protected]> Signed-off-by: agueye84 <[email protected]> Co-authored-by: Nicolas Dumais <[email protected]> Co-authored-by: agueye84 <[email protected]> Co-authored-by: agueye84 <[email protected]>
- Loading branch information
4 people
authored
Apr 12, 2023
1 parent
dcd4ba5
commit 692fff9
Showing
13 changed files
with
488 additions
and
377 deletions.
There are no files selected for viewing
22 changes: 22 additions & 0 deletions
22
app/src/components/react-native-accordion-list-view/animations/toggleAnimation.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import { LayoutAnimation, LayoutAnimationConfig } from 'react-native' | ||
|
|
||
| /** | ||
| * Toggle animation config | ||
| * @param animationDuration | ||
| * @return LayoutAnimationConfig | ||
| */ | ||
| export const toggleAnimation = (animationDuration = 300): LayoutAnimationConfig => { | ||
| return { | ||
| duration: animationDuration, | ||
| update: { | ||
| duration: animationDuration, | ||
| property: LayoutAnimation.Properties.scaleXY, | ||
| type: LayoutAnimation.Types.easeInEaseOut, | ||
| }, | ||
| delete: { | ||
| duration: animationDuration, | ||
| property: LayoutAnimation.Properties.opacity, | ||
| type: LayoutAnimation.Types.easeInEaseOut, | ||
| }, | ||
| } | ||
| } |
65 changes: 65 additions & 0 deletions
65
app/src/components/react-native-accordion-list-view/components/AccordionItem/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import React, { useEffect, useRef, useState } from 'react' | ||
| import { View, Animated, LayoutAnimation, I18nManager, Pressable } from 'react-native' | ||
| import MaterialIcons from 'react-native-vector-icons/MaterialIcons' | ||
|
|
||
| import { toggleAnimation } from '../../animations/toggleAnimation' | ||
| import { AccordionItemProps } from '../../models/AccordionItem' | ||
|
|
||
| import { styles } from './styles' | ||
|
|
||
| const AccordionItem = ({ | ||
| customBody, | ||
| customTitle, | ||
| customIcon = undefined, | ||
| containerStyle = {}, | ||
| animationDuration = 300, | ||
| isRTL = false, | ||
| isOpen = false, | ||
| onPress = undefined, | ||
| testID, | ||
| }: AccordionItemProps) => { | ||
| const [showContent, setShowContent] = useState(isOpen) | ||
| const animationController = useRef(new Animated.Value(isOpen ? 1 : 0)).current | ||
|
|
||
| const toggleListItem = () => { | ||
| const config = { | ||
| duration: animationDuration, | ||
| toValue: showContent ? 0 : 1, | ||
| useNativeDriver: true, | ||
| } | ||
| Animated.timing(animationController, config).start() | ||
| LayoutAnimation.configureNext(toggleAnimation(animationDuration)) | ||
| if (onPress) onPress(!showContent) | ||
| setShowContent(!showContent) | ||
| } | ||
|
|
||
| useEffect(() => { | ||
| if (showContent && !isOpen) { | ||
| toggleListItem() | ||
| } | ||
| }, [isOpen]) | ||
|
|
||
| const arrowTransform = animationController.interpolate({ | ||
| inputRange: [0, 1], | ||
| outputRange: ['0deg', isRTL ? '-90deg' : '90deg'], | ||
| }) | ||
| return ( | ||
| <View style={[styles.container, containerStyle]}> | ||
| <Pressable onPress={() => toggleListItem()} testID={testID}> | ||
| <View style={styles.titleContainer}> | ||
| {(!isRTL || I18nManager.isRTL) && customTitle()} | ||
| <Animated.View style={{ transform: [{ rotateZ: arrowTransform }] }}> | ||
| {!customIcon ? ( | ||
| <MaterialIcons name={isRTL ? 'keyboard-arrow-left' : 'keyboard-arrow-right'} size={30} /> | ||
| ) : ( | ||
| customIcon() | ||
| )} | ||
| </Animated.View> | ||
| {isRTL && !I18nManager.isRTL && customTitle()} | ||
| </View> | ||
| </Pressable> | ||
| {showContent && customBody()} | ||
| </View> | ||
| ) | ||
| } | ||
| export default AccordionItem |
33 changes: 33 additions & 0 deletions
33
app/src/components/react-native-accordion-list-view/components/AccordionItem/styles.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import { useTheme } from 'aries-bifold' | ||
| import { StyleSheet } from 'react-native' | ||
|
|
||
| const { ColorPallet } = useTheme() | ||
| export const styles = StyleSheet.create({ | ||
| container: { | ||
| width: '100%', | ||
| borderRadius: 2, | ||
| marginBottom: '2%', | ||
| overflow: 'hidden', | ||
|
|
||
| borderStyle: 'solid', | ||
| borderWidth: 1, | ||
| borderColor: ColorPallet.grayscale.lightGrey, | ||
| }, | ||
| title: { | ||
| fontSize: 16, | ||
| color: '#2d2d2d', | ||
| fontWeight: 'bold', | ||
| }, | ||
| body: { | ||
| padding: '4%', | ||
| paddingHorizontal: '2%', | ||
| paddingVertical: '3%', | ||
| }, | ||
| titleContainer: { | ||
| padding: '4%', | ||
| backgroundColor: ColorPallet.grayscale.lightGrey, | ||
| flexDirection: 'row', | ||
| alignItems: 'center', | ||
| justifyContent: 'space-between', | ||
| }, | ||
| }) |
40 changes: 40 additions & 0 deletions
40
app/src/components/react-native-accordion-list-view/components/AccordionList/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import { testIdWithKey } from 'aries-bifold' | ||
| import React, { useState } from 'react' | ||
| import { FlatList } from 'react-native' | ||
|
|
||
| import { AccordionListProps } from '../../models/AccordionList' | ||
| import AccordionItem from '../AccordionItem' | ||
|
|
||
| const AccordionList = ({ | ||
| data, | ||
| customTitle, | ||
| customBody, | ||
| customIcon = undefined, | ||
| containerItemStyle = {}, | ||
| animationDuration = 300, | ||
| isRTL = false, | ||
| expandMultiple = false, | ||
| ...props | ||
| }: AccordionListProps) => { | ||
| const [currentlyOpen, setCurrentlyOpen] = useState<any>(null) | ||
| const renderItem = ({ item, index }: { item: any, index: number }) => ( | ||
| <AccordionItem | ||
| containerStyle={containerItemStyle} | ||
| customTitle={() => customTitle(item)} | ||
| customBody={() => customBody(item)} | ||
| customIcon={customIcon} | ||
| animationDuration={animationDuration} | ||
| isRTL={isRTL} | ||
| isOpen={JSON.stringify(currentlyOpen) === JSON.stringify(item)} | ||
| onPress={(status) => { | ||
| if (status && !expandMultiple) { | ||
| setCurrentlyOpen(item) | ||
| } | ||
| }} | ||
| testID={testIdWithKey('AccordionItem'+index)} | ||
| /> | ||
| ) | ||
| return <FlatList data={data} renderItem={renderItem} keyExtractor={(item, index) => index.toString()} {...props} /> | ||
| } | ||
|
|
||
| export default AccordionList |
5 changes: 5 additions & 0 deletions
5
app/src/components/react-native-accordion-list-view/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| import AccordionItem from './components/AccordionItem' | ||
| import AccordionList from './components/AccordionList' | ||
|
|
||
| // default export | ||
| export { AccordionItem, AccordionList } |
47 changes: 47 additions & 0 deletions
47
app/src/components/react-native-accordion-list-view/models/AccordionItem.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| import { ViewStyle } from 'react-native' | ||
|
|
||
| export interface AccordionItemProps { | ||
| /** | ||
| * Function that returns a React element to display as Accordion title | ||
| */ | ||
| customTitle: () => JSX.Element | ||
| /** | ||
| * Function that returns a React element to display as Accordion body | ||
| */ | ||
| customBody: () => JSX.Element | ||
| /** | ||
| * An optional Function that returns a React element to display as Accordion icon | ||
| * default icon keyboard-arrow-left | ||
| */ | ||
| customIcon?: () => JSX.Element | ||
| /** | ||
| * An optional param to add custom container style | ||
| */ | ||
| containerStyle?: ViewStyle | ||
| /** | ||
| * An optional param to control Accordion animation duration | ||
| * default value is 300 | ||
| */ | ||
| animationDuration?: number | ||
| /** | ||
| * An optional param to support RTL layout | ||
| * default value is false | ||
| */ | ||
| isRTL?: boolean | ||
| /** | ||
| * An optional param to make accordion item already open | ||
| * default value is false | ||
| */ | ||
| isOpen?: boolean | ||
| /** | ||
| * An optional param to call a function when a click happen to accordion item | ||
| * default value is undefined | ||
| * @param {boolean} isOpen the current state of the accordion item | ||
| */ | ||
| onPress?: (isOpen: boolean) => void | ||
| /** | ||
| * An optional param to support test ID | ||
| * default value is '' | ||
| */ | ||
| testID?: string | ||
| } |
42 changes: 42 additions & 0 deletions
42
app/src/components/react-native-accordion-list-view/models/AccordionList.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import { FlatListProps, ViewStyle } from 'react-native' | ||
|
|
||
| export interface AccordionListProps extends Omit<FlatListProps<any>, 'data' | 'renderItem'> { | ||
| /** | ||
| * For simplicity, data is a plain array. | ||
| * If you want to use something else, like an immutable list | ||
| */ | ||
| data: any[] | ||
| /** | ||
| * Function that returns a React element to display as Accordion title | ||
| */ | ||
| customTitle: (item: any) => JSX.Element | ||
| /** | ||
| * Function that returns a React element to display as Accordion body | ||
| */ | ||
| customBody: (item: any) => JSX.Element | ||
| /** | ||
| * An optional Function that returns a React element to display as Accordion icon | ||
| * default icon keyboard-arrow-left | ||
| */ | ||
| customIcon?: () => JSX.Element | ||
| /** | ||
| * An optional param to add custom container item style | ||
| */ | ||
| containerItemStyle?: ViewStyle | ||
| /** | ||
| * An optional param to control Accordion animation duration | ||
| * default value is 300 | ||
| */ | ||
| animationDuration?: number | ||
| /** | ||
| * An optional param to support RTL layout | ||
| * default value is false | ||
| */ | ||
| isRTL?: boolean | ||
|
|
||
| /** | ||
| * Allow more than one section to be expanded. | ||
| * default value is false | ||
| */ | ||
| expandMultiple?: boolean | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.