diff --git a/ios/Podfile.lock b/ios/Podfile.lock index b4c4fbb..9b82478 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -306,6 +306,8 @@ PODS: - React-jsinspector (0.61.5) - react-native-config (0.12.0): - React + - react-native-slider (2.0.8): + - React - react-native-splash-screen (3.2.0): - React - React-RCTActionSheet (0.61.5): @@ -402,6 +404,7 @@ DEPENDENCIES: - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`) - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`) - react-native-config (from `../node_modules/react-native-config`) + - "react-native-slider (from `../node_modules/@react-native-community/slider`)" - react-native-splash-screen (from `../node_modules/react-native-splash-screen`) - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`) - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`) @@ -483,6 +486,8 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native/ReactCommon/jsinspector" react-native-config: :path: "../node_modules/react-native-config" + react-native-slider: + :path: "../node_modules/@react-native-community/slider" react-native-splash-screen: :path: "../node_modules/react-native-splash-screen" React-RCTActionSheet: @@ -560,6 +565,7 @@ SPEC CHECKSUMS: React-jsiexecutor: d5525f9ed5f782fdbacb64b9b01a43a9323d2386 React-jsinspector: fa0ecc501688c3c4c34f28834a76302233e29dc0 react-native-config: f2c2ae45625a068c35681a16b9bfb1ca58b0adc7 + react-native-slider: 3a1cfd00c9c31068251b536822f7192e8d1d6b6f react-native-splash-screen: 200d11d188e2e78cea3ad319964f6142b6384865 React-RCTActionSheet: 600b4d10e3aea0913b5a92256d2719c0cdd26d76 React-RCTAnimation: 791a87558389c80908ed06cc5dfc5e7920dfa360 diff --git a/package.json b/package.json index b99d59e..d7964f3 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "postinstall": "yarn jetify" }, "dependencies": { + "@react-native-community/slider": "^2.0.8", "@types/lodash.every": "^4.6.6", "@types/lodash.isempty": "^4.4.6", "@types/lodash.noop": "^3.0.6", diff --git a/src/components/ModalTrigger.tsx b/src/components/ModalTrigger.tsx index 42bb6ee..0ca6c0b 100644 --- a/src/components/ModalTrigger.tsx +++ b/src/components/ModalTrigger.tsx @@ -21,7 +21,7 @@ export const ModalTrigger: SFC = ({ children, modalContent, title }) => { - {i18n.t('planItemActivity:addImage')} + {title} void; +} + +export const Slider: SFC = ({ min, max, handleSliding }) => ( + + {min} + + {max} + +); + +const styles = StyleSheet.create({ + sliderContainer: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }, + slider: { + width: '80%', + height: 40, + }, +}); diff --git a/src/components/index.tsx b/src/components/index.tsx index 84a4c41..2ba712a 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -21,4 +21,5 @@ export { StyledText } from './StyledText'; export { SwitchItem } from './SwitchItem'; export { TextInput } from './TextInput'; export { default } from './PlayButton'; +export { Slider } from './Slider'; export { StudentSettings } from './studentSettings/StudentSettings'; diff --git a/src/locale/en.ts b/src/locale/en.ts index 66e9171..d7266d2 100644 --- a/src/locale/en.ts +++ b/src/locale/en.ts @@ -5,6 +5,7 @@ const translations = { }, common: { cancel: 'Cancel', + confirm: 'Confirm', ok: 'OK', yes: 'Yes', email: 'Email address', @@ -41,6 +42,9 @@ const translations = { accept: 'I accept ', termsOfUse: 'Terms of Use', }, + simpleTask: { + setTimer: 'Set the duration of the exercise', + }, resetPassword: { resetPassword: 'Reset password', guide1: 'Provide you email in the field below. We will send you link to reset your password.', diff --git a/src/locale/pl.ts b/src/locale/pl.ts index 8a123d1..b695963 100644 --- a/src/locale/pl.ts +++ b/src/locale/pl.ts @@ -7,6 +7,10 @@ const translations = { cancel: 'Anuluj', name: 'Twoja nazwa', addImage: 'Dodaj logo', + confirm: 'Potwierdzać', + }, + simpleTask: { + setTimer: 'Ustaw czas trwania ćwiczenia', }, signIn: { signIn: 'Zaloguj się', diff --git a/src/models/PlanItem.tsx b/src/models/PlanItem.tsx index 9e926e4..f3c12cf 100644 --- a/src/models/PlanItem.tsx +++ b/src/models/PlanItem.tsx @@ -101,6 +101,10 @@ export class PlanItem implements SubscribableModel, PlanElement { }); }; + setTimer = (type: number) => { + this.update({ type }); + }; + update = (changes: object) => getPlanItemRef(this.studentId, this.planId, this.id).update(changes); delete = (): Promise => getPlanItemRef(this.studentId, this.planId, this.id).delete(); diff --git a/src/screens/planActivity/__tests__/__snapshots__/TaskTable.test.tsx.snap b/src/screens/planActivity/__tests__/__snapshots__/TaskTable.test.tsx.snap index 145b0f7..798545c 100644 --- a/src/screens/planActivity/__tests__/__snapshots__/TaskTable.test.tsx.snap +++ b/src/screens/planActivity/__tests__/__snapshots__/TaskTable.test.tsx.snap @@ -39,6 +39,7 @@ exports[`TaskTable renders correctly 1`] = ` "isSimpleTask": [Function], "isTask": [Function], "setComplete": [Function], + "setTimer": [Function], "update": [Function], } } diff --git a/src/screens/planItemActivity/SimpleTask.tsx b/src/screens/planItemActivity/SimpleTask.tsx index 1f2a4f4..de05066 100644 --- a/src/screens/planItemActivity/SimpleTask.tsx +++ b/src/screens/planItemActivity/SimpleTask.tsx @@ -1,13 +1,14 @@ import React from 'react'; import { SafeAreaView, StyleProp, StyleSheet, View, ViewStyle } from 'react-native'; -import { Card, IconButton, TextInput } from 'components'; +import { Card, IconButton, ModalTrigger, TextInput } from 'components'; import { FormikProps } from 'formik'; import { i18n } from 'locale'; import { PlanItem } from 'models'; import { dimensions, palette, typography } from 'styles'; import { ImagePicker } from './ImagePicker'; import { PlanItemFormData } from './PlanItemForm'; +import { TimeSlider } from './TimeSlider'; interface Props { planItem: PlanItem; @@ -19,9 +20,12 @@ export class SimpleTask extends React.PureComponent { static navigationOptions = { title: i18n.t('planItemActivity:viewTitleTask'), }; - + handleConfirmTimer = (time: number) => { + this.props.planItem.setTimer(time); + }; render() { const { values, handleChange, submitForm } = this.props.formikProps; + return ( @@ -34,15 +38,22 @@ export class SimpleTask extends React.PureComponent { onChangeText={handleChange('nameForChild')} onEndEditing={submitForm} /> + - + } + > + + diff --git a/src/screens/planItemActivity/TimeSlider.tsx b/src/screens/planItemActivity/TimeSlider.tsx new file mode 100644 index 0000000..83fd506 --- /dev/null +++ b/src/screens/planItemActivity/TimeSlider.tsx @@ -0,0 +1,48 @@ +import React, { SFC, useState } from 'react'; +import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; + +import { Slider } from 'components'; +import { i18n } from 'locale'; +import { palette } from 'styles'; + +interface Props { + min: number; + max: number; + closeModal?: () => void; + onConfirm?: (time: number) => void; +} + +export const TimeSlider: SFC = ({ min, max, closeModal, onConfirm }) => { + const [timer, setTimer] = useState(1); + const handleSliding = (time: number) => setTimer(time); + const handleConfirmPressed = () => { + if (onConfirm) { + onConfirm(timer); + } + if (closeModal) { + closeModal(); + } + }; + return ( + <> + + {timer} + + + {i18n.t('common:cancel')} + + + {i18n.t('common:confirm')} + + + + ); +}; + +const styles = StyleSheet.create({ + timeSlider: { flexDirection: 'row', alignSelf: 'flex-end' }, + confirmButton: { color: palette.textBody, marginLeft: 8 }, + time: { + alignSelf: 'center', + }, +}); diff --git a/yarn.lock b/yarn.lock index a72210f..9e1aef9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -953,6 +953,11 @@ wcwidth "^1.0.1" ws "^1.1.0" +"@react-native-community/slider@^2.0.8": + version "2.0.8" + resolved "https://registry.yarnpkg.com/@react-native-community/slider/-/slider-2.0.8.tgz#c4a3c342638270e0adc942b51427ec17104a786d" + integrity sha512-FZC3wjYzHQiD7jT7ALy3QNccyLj9zQBRiKGBFr/QvrWLkVg5orpIJ53aYFXm3eOkNvUV+wjhoI9uCkh3LCN2+A== + "@react-navigation/core@~3.5.1": version "3.5.1" resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-3.5.1.tgz#7a2339fca3496979305fb3a8ab88c2ca8d8c214d"