新增计数、计时、输入和布尔类型的记录项

src/common/constant.ts

@@ -5,31 +5,38 @@ export interface RecordType {
   description?: string;
 }
 
-export const PERCENTAGE_RECORD_TYPE: RecordType = {
-  name: '百分比',
+export const RATING_RECORD_TYPE: RecordType = {
+  name: 'Rating',
   value: 1,
-  description: '数值从0-100里取值',
+  description: '数值从0-1里取值',
 };
-export const COUNT_RECORD_TYPE: RecordType = {
-  name: '计数',
+export const COUNTING_RECORD_TYPE: RecordType = {
+  name: 'Counting',
   value: 2,
   description: '数值从0开始增长',
 };
-export const NUMBER_RECORD_TYPE: RecordType = {
-  name: '数值',
+export const INPUTTING_RECORD_TYPE: RecordType = {
+  name: 'Inputting',
   value: 3,
   description: '用户输入的任意合法数值',
 };
-export const INTERVAL_RECORD_TYPE: RecordType = {
-  name: '区间',
+export const Timing_RECORD_TYPE: RecordType = {
+  name: 'Timing',
   value: 4,
   description: '数值从一点开始到另一点结束',
 };
+export const BOOLEAN_RECORD_TYPE: RecordType = {
+  name: 'Boolean',
+  value: 5,
+  description: '数值在0和1之间取值',
+};
+
 export const RecordeTypes: RecordType[] = [
-  PERCENTAGE_RECORD_TYPE,
-  COUNT_RECORD_TYPE,
-  NUMBER_RECORD_TYPE,
-  INTERVAL_RECORD_TYPE,
+  RATING_RECORD_TYPE,
+  COUNTING_RECORD_TYPE,
+  INPUTTING_RECORD_TYPE,
+  Timing_RECORD_TYPE,
+  BOOLEAN_RECORD_TYPE,
 ];
 
 export type EmptyObject = Record<string, never>;

src/components/AbstractRecord.tsx

@@ -11,9 +11,11 @@ export type Props = {
   OperationComponent: React.FC | React.Component | Element;
 };
 
-const AbstractRecord: React.FC<Props> = (props: Props) => {
+const AbstractRecord: React.FC<Props> = ({
+  renderProps,
+  OperationComponent,
+}: Props) => {
   const navigation = useNavigation();
-  const {renderProps, OperationComponent} = props;
   const {item, index} = renderProps;
   const [showOperation, setShowOperation] = useState(false);
   const gotoRecordItemList = () => {

src/components/BooleanRecordOperation.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {Text, View, StyleSheet} from 'react-native';
+import {Icon} from 'react-native-elements';
+import {RecordOperationProps} from '../screens/RecordList';
+
+export type BooleanRecordOperationProps = RecordOperationProps;
+
+const BooleanRecordOperation = ({onComplete}: BooleanRecordOperationProps) => {
+  const onSubmit = (value: boolean) => {
+    onComplete({
+      value: value ? 1 : 0,
+    });
+  };
+  return (
+    <View style={styles.body}>
+      <Icon name={'thumb-down-alt'} onPress={() => onSubmit(false)} />
+      <Icon name={'thumb-up-alt'} onPress={() => onSubmit(true)} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  body: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    alignContent: 'center',
+  },
+});
+
+export default BooleanRecordOperation;

src/components/CountingRecordOperation.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {Text, View, StyleSheet} from 'react-native';
+import {RecordOperationProps} from '../screens/RecordList';
+import {Button, Icon} from "react-native-elements";
+
+export type Props = {
+  value?: number;
+} & RecordOperationProps;
+
+const CountingRecordOperation = ({onComplete, value}: Props) => {
+  const onConfirm = () => {
+    onComplete && onComplete({value: value ? value + 1 : 1});
+  };
+  return (
+    <View style={styles.body}>
+      <Text>添加记录项</Text>
+      <Icon name={'add-task'} onPress={onConfirm} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  body: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    alignContent: 'center',
+  },
+});
+
+export default CountingRecordOperation;

src/components/InputtingRecordOperation.tsx

@@ -0,0 +1,58 @@
+import React, {createRef, useRef, useState} from 'react';
+import {Text, View, StyleSheet, TextInput} from 'react-native';
+import {RecordOperationProps} from '../screens/RecordList';
+import {Icon, Input} from 'react-native-elements';
+import Toast from 'react-native-simple-toast';
+
+export type InputtingRecordOperationProps = RecordOperationProps;
+
+const InputtingRecordOperation = ({
+  onComplete,
+}: InputtingRecordOperationProps) => {
+  const [value, setValue] = useState('');
+  const inputRef = createRef<TextInput>();
+  const onValueChange = (text: string) => {
+    setValue(text);
+  };
+  const onSubmit = () => {
+    if (value.length === 0) {
+      Toast.show('请先输入后提交');
+      return;
+    }
+    try {
+      const floatValue = parseFloat(value);
+      onComplete({
+        value: floatValue,
+      }).then(() => {
+        inputRef.current && inputRef.current.clear();
+        setValue('');
+      });
+    } catch (e) {
+      console.error('parseFloat error', e);
+      Toast.show('请输入合法的数值');
+    }
+  };
+  return (
+    <View style={styles.body}>
+      <Input
+        ref={inputRef}
+        placeholder={'请输入合法数值'}
+        keyboardType={'numeric'}
+        onChangeText={onValueChange}
+        leftIcon={<Icon name={'keyboard'} />}
+        rightIcon={<Icon name={'done'} onPress={onSubmit} />}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  body: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+  },
+});
+
+export default InputtingRecordOperation;

src/components/PercentageRecordOperation.tsx → src/components/RatingRecordOperation.tsx

@@ -1,20 +1,17 @@
 import React from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 import {Rating, AirbnbRating} from 'react-native-elements';
+import {RecordOperationProps} from "../screens/RecordList";
 
 export type Props = {
-  onComplete?: (data: {
-    value: number | string;
-    step?: number;
-  }) => Promise<boolean>;
   readonly?: boolean;
   value?: number;
   showRating?: boolean;
   imageSize?: number;
-};
+} & RecordOperationProps;
 const count = 10;
 
-const PercentageRecordOperation: React.FC<Props> = ({
+const RatingRecordOperation: React.FC<Props> = ({
   onComplete,
   readonly,
   value,
@@ -51,4 +48,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default PercentageRecordOperation;
+export default RatingRecordOperation;

src/components/TimingRecordOperation.tsx

@@ -0,0 +1,53 @@
+import React, {useState} from 'react';
+import {Text, View, StyleSheet} from 'react-native';
+import {RecordOperationProps} from "../screens/RecordList";
+import {Icon} from "react-native-elements";
+import Toast from "react-native-simple-toast";
+
+export type TimingRecordOperationProps = {} & RecordOperationProps;
+
+const TimingRecordOperation = ({onComplete}: TimingRecordOperationProps) => {
+  const [step, setStep] = useState(1);
+  const [startTime, setStartTime] = useState(0);
+  const onStart = () => {
+    setStep(2);
+    setStartTime(new Date().getTime());
+    Toast.show('记录开始时间');
+  };
+  const onEnd = () => {
+    if (startTime > 0) {
+      Toast.show('记录结束时间');
+      onComplete({
+        value: new Date().getTime() - startTime,
+      }).then(() => {
+        setStartTime(0);
+        setStep(1);
+      });
+    } else {
+      Toast.show('请先记录开始时间');
+    }
+  };
+  return (
+    <View style={styles.body}>
+      <View style={styles.startContainer}>
+        <Icon name={step === 1 ? 'play-arrow' : 'sync'} onPress={onStart} />
+      </View>
+      <View style={styles.endContainer}>
+        <Icon name={'stop'} onPress={onEnd} />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  body: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+  },
+  startContainer: {},
+  endContainer: {},
+});
+
+export default TimingRecordOperation;

src/screens/RecordChart.tsx

@@ -48,7 +48,14 @@ const RecordChart: React.FC<Props> = ({route}: Props) => {
     return `${value * 100}`;
   };
   const xAccessor = (entry: {item: RecordItemsType; index: number}) => {
-    return entry.item.create_time.getTime();
+    // if (record !== undefined) {
+    //   return (
+    //     (entry.item.create_time.getTime() - record?.create_time.getTime()) /
+    //     (1000 * 60 * 60 * 24)
+    //   );
+    // }
+    // return entry.item.create_time.getTime() / (1000 * 60 * 60 * 24);
+    return entry.index + 1;
   };
   const formatXLabel = (value: any, index: number) => {
     console.log('formatXLabel value, index', value, index);

src/screens/RecordItemList.tsx

@@ -8,8 +8,8 @@ import {ObjectId} from 'bson';
 import Realm from 'realm';
 import moment from 'moment';
 import {Icon, ListItem} from 'react-native-elements';
-import {PERCENTAGE_RECORD_TYPE} from '../common/constant';
-import PercentageRecordOperation from '../components/PercentageRecordOperation';
+import {RATING_RECORD_TYPE} from '../common/constant';
+import RatingRecordOperation from '../components/RatingRecordOperation';
 import {useFocusEffect, useNavigation} from '@react-navigation/core';
 
 export type Props = {
@@ -30,9 +30,9 @@ const RecordItemList: React.FC<Props> = ({route}: Props) => {
     let valueComponent = (
       <Text style={styles.recordValueText}>{item.value}</Text>
     );
-    if (record?.type === PERCENTAGE_RECORD_TYPE.value) {
+    if (record?.type === RATING_RECORD_TYPE.value) {
       valueComponent = (
-        <PercentageRecordOperation
+        <RatingRecordOperation
           readonly={true}
           value={item.value}
           showRating={false}