#271 set timer as slider

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

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",

src/components/ModalTrigger.tsx

@@ -21,7 +21,7 @@ export const ModalTrigger: SFC<Props> = ({ children, modalContent, title }) => {
     <Modal transparent animationType="fade" visible={isVisible} onRequestClose={onClose}>
       <View style={styles.modalOverlay}>
         <View style={styles.modalInsideView}>
-          <StyledText style={styles.modalTitle}>{i18n.t('planItemActivity:addImage')}</StyledText>
+          <StyledText style={styles.modalTitle}>{title}</StyledText>
           <IconButton
             name="close"
             type="material"

src/components/Slider.tsx

@@ -0,0 +1,29 @@
+import React, { SFC } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { default as SliderRN } from '@react-native-community/slider'; // tslint:disable-line
+
+interface Props {
+  min: number;
+  max: number;
+  handleSliding: (time: number) => void;
+}
+
+export const Slider: SFC<Props> = ({ min, max, handleSliding }) => (
+  <View style={styles.sliderContainer}>
+    <Text>{min}</Text>
+    <SliderRN style={styles.slider} minimumValue={min} maximumValue={max} onValueChange={handleSliding} step={1} />
+    <Text>{max}</Text>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  sliderContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  slider: {
+    width: '80%',
+    height: 40,
+  },
+});

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';

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.',

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ę',

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<void> => getPlanItemRef(this.studentId, this.planId, this.id).delete();
 

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],
         }
       }

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<Props> {
   static navigationOptions = {
     title: i18n.t('planItemActivity:viewTitleTask'),
   };
-
+  handleConfirmTimer = (time: number) => {
+    this.props.planItem.setTimer(time);
+  };
   render() {
     const { values, handleChange, submitForm } = this.props.formikProps;
+
     return (
       <SafeAreaView style={this.props.style}>
         <Card style={[styles.container]}>
@@ -34,15 +38,22 @@ export class SimpleTask extends React.PureComponent<Props> {
             onChangeText={handleChange('nameForChild')}
             onEndEditing={submitForm}
           />
+
           <View style={styles.timerButton}>
-            <IconButton
-              name="alarm-off"
-              type="material"
-              label={i18n.t('planItemActivity:timerButton')}
-              containerStyle={styles.iconButtonContainer}
-              size={24}
-              color={palette.primaryVariant}
-            />
+            <ModalTrigger
+              title={i18n.t('simpleTask:setTimer')}
+              modalContent={<TimeSlider min={1} max={60} onConfirm={this.handleConfirmTimer} />}
+            >
+              <IconButton
+                name="alarm-off"
+                type="material"
+                label={i18n.t('planItemActivity:timerButton')}
+                containerStyle={styles.iconButtonContainer}
+                size={24}
+                color={palette.primaryVariant}
+                disabled
+              />
+            </ModalTrigger>
           </View>
         </Card>
       </SafeAreaView>

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<Props> = ({ 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 (
+    <>
+      <Slider min={min} max={max} handleSliding={handleSliding} />
+      <Text style={styles.time}>{timer}</Text>
+      <View style={styles.timeSlider}>
+        <TouchableOpacity onPress={closeModal}>
+          <Text>{i18n.t('common:cancel')}</Text>
+        </TouchableOpacity>
+        <TouchableOpacity onPress={handleConfirmPressed}>
+          <Text style={styles.confirmButton}>{i18n.t('common:confirm')}</Text>
+        </TouchableOpacity>
+      </View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  timeSlider: { flexDirection: 'row', alignSelf: 'flex-end' },
+  confirmButton: { color: palette.textBody, marginLeft: 8 },
+  time: {
+    alignSelf: 'center',
+  },
+});

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"