From 8e62aaa6dc7c61dcba7b9313d0aadcf7f46ce41b Mon Sep 17 00:00:00 2001 From: Husam Salhab <47015061+hsalhab@users.noreply.github.com> Date: Thu, 6 Aug 2020 16:11:11 -0400 Subject: [TMA-49] Add static boxes (#28) * adds BigInput component * removes dummy fields * adds website TaggInput * adds handleWebsiteUpdate() * added website regex * added form * added handleFocusChange() * sends website in request * moves input components to onboarding * allow for empty string in website regex * adds bio regex * adds bio field * added bioRef for focusChange * added react-native-datepicker * moves TaggInput * add imports * add TaggDatePicker * fix typescript interface * remove TouchableComponent type * added date and selectpicker * added date and dropdown * adds momentjs * remove warnings from optional fields * remove debugging console.log * Removes isValidBirthdate * moves @types/react-native-datepicker to devdepnden * update package versioning * fix positioning * added checkpoint * update button styling * update placeholder * linting and other fixes --- src/components/common/TaggInput.tsx | 62 --------------------------- src/components/common/index.ts | 1 - src/components/onboarding/TaggBigInput.tsx | 64 ++++++++++++++++++++++++++++ src/components/onboarding/TaggDatePicker.tsx | 63 +++++++++++++++++++++++++++ src/components/onboarding/TaggDropDown.tsx | 40 +++++++++++++++++ src/components/onboarding/TaggInput.tsx | 62 +++++++++++++++++++++++++++ src/components/onboarding/index.ts | 4 ++ 7 files changed, 233 insertions(+), 63 deletions(-) delete mode 100644 src/components/common/TaggInput.tsx create mode 100644 src/components/onboarding/TaggBigInput.tsx create mode 100644 src/components/onboarding/TaggDatePicker.tsx create mode 100644 src/components/onboarding/TaggDropDown.tsx create mode 100644 src/components/onboarding/TaggInput.tsx (limited to 'src/components') diff --git a/src/components/common/TaggInput.tsx b/src/components/common/TaggInput.tsx deleted file mode 100644 index fe11d4f0..00000000 --- a/src/components/common/TaggInput.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import React from 'react'; -import {View, TextInput, StyleSheet, TextInputProps} from 'react-native'; -import * as Animatable from 'react-native-animatable'; - -interface TaggInputProps extends TextInputProps { - valid?: boolean; - invalidWarning?: string; - attemptedSubmit?: boolean; - width?: number | string; -} -/** - * An input component that receives all props a normal TextInput component does. TaggInput components grow to 60% of their parent's width by default, but this can be set using the `width` prop. - */ -const TaggInput = React.forwardRef((props: TaggInputProps, ref: any) => { - return ( - - - {props.attemptedSubmit && !props.valid && ( - - {props.invalidWarning} - - )} - - ); -}); - -const styles = StyleSheet.create({ - container: { - width: '100%', - alignItems: 'center', - marginVertical: 11, - }, - input: { - minWidth: '60%', - height: 40, - fontSize: 16, - fontWeight: '600', - color: '#fff', - borderColor: '#fffdfd', - borderWidth: 2, - borderRadius: 20, - paddingLeft: 13, - }, - warning: { - fontSize: 14, - marginTop: 5, - color: '#f4ddff', - maxWidth: 350, - textAlign: 'center', - }, -}); - -export default TaggInput; diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 826675ff..cb8b9b6a 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -1,7 +1,6 @@ export {default as CenteredView} from './CenteredView'; export {default as OverlayView} from './OverlayView'; export {default as RadioCheckbox} from './RadioCheckbox'; -export {default as TaggInput} from './TaggInput'; export {default as NavigationIcon} from './NavigationIcon'; export {default as GradientBackground} from './GradientBackground'; export {default as Post} from './post'; diff --git a/src/components/onboarding/TaggBigInput.tsx b/src/components/onboarding/TaggBigInput.tsx new file mode 100644 index 00000000..ba965465 --- /dev/null +++ b/src/components/onboarding/TaggBigInput.tsx @@ -0,0 +1,64 @@ +import React from 'react'; +import {View, TextInput, StyleSheet, TextInputProps} from 'react-native'; +import * as Animatable from 'react-native-animatable'; + +interface TaggBigInputProps extends TextInputProps { + valid?: boolean; + invalidWarning?: string; + attemptedSubmit?: boolean; + width?: number | string; +} +/** + * An input component that receives all props a normal TextInput component does. TaggInput components grow to 60% of their parent's width by default, but this can be set using the `width` prop. + */ +const TaggBigInput = React.forwardRef((props: TaggBigInputProps, ref: any) => { + return ( + + + {props.attemptedSubmit && !props.valid && ( + + {props.invalidWarning} + + )} + + ); +}); + +const styles = StyleSheet.create({ + container: { + width: '100%', + alignItems: 'center', + marginVertical: 11, + }, + input: { + minWidth: '60%', + height: 120, + fontSize: 16, + fontWeight: '600', + color: '#fff', + borderColor: '#fffdfd', + borderWidth: 2, + borderRadius: 20, + paddingLeft: 13, + paddingTop: 13, + }, + warning: { + fontSize: 14, + marginTop: 5, + color: '#f4ddff', + maxWidth: 350, + textAlign: 'center', + }, +}); + +export default TaggBigInput; diff --git a/src/components/onboarding/TaggDatePicker.tsx b/src/components/onboarding/TaggDatePicker.tsx new file mode 100644 index 00000000..39af6234 --- /dev/null +++ b/src/components/onboarding/TaggDatePicker.tsx @@ -0,0 +1,63 @@ +import React from 'react'; +import DatePicker from 'react-native-datepicker'; +import {View, StyleSheet, TextInputProps} from 'react-native'; + +interface TaggDatePickerProps extends TextInputProps { + width?: number | string; + date?: string; + maxDate?: Date | string; +} +/** + * An input component that receives all props a normal TextInput component does. TaggInput components grow to 60% of their parent's width by default, but this can be set using the `width` prop. + */ +const TaggDatePicker = React.forwardRef( + (props: TaggDatePickerProps, ref: any) => { + return ( + + + + ); + }, +); + +const styles = StyleSheet.create({ + container: { + width: '100%', + alignItems: 'center', + marginVertical: 11, + }, + input: { + minWidth: '67%', + height: 40, + }, +}); + +export default TaggDatePicker; diff --git a/src/components/onboarding/TaggDropDown.tsx b/src/components/onboarding/TaggDropDown.tsx new file mode 100644 index 00000000..a45426ca --- /dev/null +++ b/src/components/onboarding/TaggDropDown.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import RNSelectPicker from 'react-native-picker-select'; +import {View, StyleSheet, TextInputProps} from 'react-native'; + +interface TaggDropDownProps extends TextInputProps { + width?: number | string; +} + +/** + * An input component that receives all props a normal TextInput component does. TaggInput components grow to 60% of their parent's width by default, but this can be set using the `width` prop. + */ +const TaggDropDown = React.forwardRef((props: TaggDropDownProps, ref: any) => { + return ( + + + + ); +}); + +const styles = StyleSheet.create({ + container: { + width: '66.67%', + alignItems: 'center', + marginVertical: 11, + }, + inputIOS: { + paddingVertical: 8, + paddingHorizontal: 10, + minWidth: '60%', + fontSize: 16, + fontWeight: '600', + color: '#fff', + borderColor: '#fffdfd', + borderWidth: 2, + borderRadius: 20, + paddingLeft: 13, + }, +}); + +export default TaggDropDown; diff --git a/src/components/onboarding/TaggInput.tsx b/src/components/onboarding/TaggInput.tsx new file mode 100644 index 00000000..fe11d4f0 --- /dev/null +++ b/src/components/onboarding/TaggInput.tsx @@ -0,0 +1,62 @@ +import React from 'react'; +import {View, TextInput, StyleSheet, TextInputProps} from 'react-native'; +import * as Animatable from 'react-native-animatable'; + +interface TaggInputProps extends TextInputProps { + valid?: boolean; + invalidWarning?: string; + attemptedSubmit?: boolean; + width?: number | string; +} +/** + * An input component that receives all props a normal TextInput component does. TaggInput components grow to 60% of their parent's width by default, but this can be set using the `width` prop. + */ +const TaggInput = React.forwardRef((props: TaggInputProps, ref: any) => { + return ( + + + {props.attemptedSubmit && !props.valid && ( + + {props.invalidWarning} + + )} + + ); +}); + +const styles = StyleSheet.create({ + container: { + width: '100%', + alignItems: 'center', + marginVertical: 11, + }, + input: { + minWidth: '60%', + height: 40, + fontSize: 16, + fontWeight: '600', + color: '#fff', + borderColor: '#fffdfd', + borderWidth: 2, + borderRadius: 20, + paddingLeft: 13, + }, + warning: { + fontSize: 14, + marginTop: 5, + color: '#f4ddff', + maxWidth: 350, + textAlign: 'center', + }, +}); + +export default TaggInput; diff --git a/src/components/onboarding/index.ts b/src/components/onboarding/index.ts index ef972194..31f356d3 100644 --- a/src/components/onboarding/index.ts +++ b/src/components/onboarding/index.ts @@ -3,3 +3,7 @@ export {default as Background} from './Background'; export {default as RegistrationWizard} from './RegistrationWizard'; export {default as TermsConditions} from './TermsConditions'; export {default as SubmitButton} from './SubmitButton'; +export {default as TaggInput} from './TaggInput'; +export {default as TaggBigInput} from './TaggBigInput'; +export {default as TaggDatePicker} from './TaggDatePicker'; +export {default as TaggDropDown} from './TaggDropDown'; -- cgit v1.2.3-70-g09d2