add: today button (#271)

wheatandcat · Dec 30, 2022 · ab658b3 · ab658b3
1 parent 0137767
commit ab658b3
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 38 deletions.
diff --git a/src/components/atoms/Button/Button.tsx b/src/components/atoms/Button/Button.tsx
@@ -17,6 +17,7 @@ export type Props = {
   loading?: boolean;
   disabled?: boolean;
   fontFamily?: FontFamily;
+  radius?: number;
   onPress: () => void;
 };
 
@@ -29,7 +30,7 @@ const Button: React.FC<Props> = (props) => {
 
   const buttonStyle: ViewStyle = {
     paddingHorizontal: configSize.padding,
-    borderRadius: configSize.borderRadius,
+    borderRadius: props.radius ? props.radius : configSize.borderRadius,
     height: configSize.height,
   };
 

diff --git a/src/components/molecules/DateInput/Days.tsx b/src/components/molecules/DateInput/Days.tsx
@@ -13,14 +13,14 @@ import Carousel from 'react-native-snap-carousel';
 import usePrevious from 'hooks/usePrevious';
 
 type Props = {
-  date: string;
+  day: string;
   days: string[];
   onPress: (day: string) => void;
   firstItem?: boolean;
 };
 
 type RenderedItem = {
-  date: string;
+  value: string;
   day: string;
   onPress: (day: string) => void;
   firstItem?: boolean;
@@ -37,7 +37,7 @@ const getDayOfWeekColor = (selected: boolean) => {
 };
 
 const renderItem: React.FC<RenderedItemProps> = ({ item }) => {
-  const selected = dayjs(item.day).format('D') === dayjs(item.date).format('D');
+  const selected = dayjs(item.day).format('D') === item.value;
 
   return (
     <TouchableWithoutFeedback
@@ -62,7 +62,7 @@ const renderItem: React.FC<RenderedItemProps> = ({ item }) => {
 
 const DayInput: React.FC<Props> = (props) => {
   const prevFirstDay = usePrevious(props.days[0]);
-  const index = Number(dayjs(props.date).format('D'));
+  const index = Number(props.day);
   const carouselRef = useRef<Carousel<any>>(null);
 
   const days = useCallback((): string[] => {
@@ -89,7 +89,7 @@ const DayInput: React.FC<Props> = (props) => {
       setDayItems(days());
       carouselRef.current?.snapToItem?.(0);
     }
-  }, [props.days, prevFirstDay, setDayItems, days]);
+  }, [props.days, prevFirstDay, days]);
 
   useEffect(() => {
     const currentIndex = carouselRef.current?.currentIndex || 0;
@@ -116,7 +116,7 @@ const DayInput: React.FC<Props> = (props) => {
     <Carousel
       ref={carouselRef}
       data={dayItems.map((v) => ({
-        date: props.date,
+        value: props.day,
         day: v,
         onPress: props.onPress,
       }))}

diff --git a/src/components/molecules/DateInput/Months.tsx b/src/components/molecules/DateInput/Months.tsx
@@ -8,7 +8,6 @@ import {
 import Text from 'components/atoms/Text';
 import View from 'components/atoms/View';
 import theme from 'config/theme';
-import dayjs from 'lib/dayjs';
 import Carousel from 'react-native-snap-carousel';
 
 type Month = {
@@ -17,14 +16,14 @@ type Month = {
 };
 
 type Props = {
-  date: string;
+  month: string;
   months: Month[];
   onPress: (month: string) => void;
   firstItem?: boolean;
 };
 
 type RenderedItem = {
-  date: string;
+  value: string;
   month: Month;
   onPress: (month: string) => void;
   firstItem?: boolean;
@@ -41,9 +40,7 @@ const renderItem: React.FC<RenderedItemProps> = ({ item }) => {
       <View style={styles.monthItem}>
         <Text
           color={
-            String(item.month.value) === dayjs(item.date).format('M')
-              ? 'primary'
-              : 'secondary'
+            String(item.month.value) === item.value ? 'primary' : 'secondary'
           }
         >
           {item.month.label}
@@ -55,7 +52,7 @@ const renderItem: React.FC<RenderedItemProps> = ({ item }) => {
 
 const MonthInput: React.FC<Props> = (props) => {
   const months = (): Month[] => {
-    const index = Number(dayjs(props.date).format('M'));
+    const index = Number(props.month);
     const first = props.months.slice(index - 1, 12);
     const last = props.months.slice(0, index - 1);
     return [...first, ...last];
@@ -77,7 +74,7 @@ const MonthInput: React.FC<Props> = (props) => {
     <Carousel
       ref={carouselRef}
       data={monthItems.map((v) => ({
-        date: props.date,
+        value: props.month,
         month: v,
         onPress: props.onPress,
       }))}

diff --git a/src/components/molecules/DateInput/Years.tsx b/src/components/molecules/DateInput/Years.tsx
@@ -3,10 +3,9 @@ import { StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
 import Text from 'components/atoms/Text';
 import View from 'components/atoms/View';
 import theme from 'config/theme';
-import dayjs from 'lib/dayjs';
 
 type Props = {
-  date: string;
+  year: string;
   years: number[];
   onPress: (year: number) => void;
 };
@@ -19,11 +18,7 @@ const YearInput: React.FC<Props> = (props) => {
           <TouchableOpacity key={year} onPress={() => props.onPress(year)}>
             <View style={styles.yearItem}>
               <Text
-                color={
-                  String(year) === dayjs(props.date).format('YYYY')
-                    ? 'primary'
-                    : 'secondary'
-                }
+                color={String(year) === props.year ? 'primary' : 'secondary'}
               >
                 {year}
               </Text>

diff --git a/src/components/molecules/DateInput/stories.tsx b/src/components/molecules/DateInput/stories.tsx
@@ -7,13 +7,13 @@ import Days from './Days';
 
 storiesOf('molecules/DateInput', module)
   .add('Years', () => (
-    <Years date="2020-01-01" years={[2020, 2021]} onPress={mockFn('onPress')} />
+    <Years year="2020" years={[2020, 2021]} onPress={mockFn('onPress')} />
   ))
   .add(
     'Months',
     () => (
       <Months
-        date="2020-01-01"
+        month="1"
         months={[
           {
             label: '1/Jun',
@@ -71,7 +71,7 @@ storiesOf('molecules/DateInput', module)
   )
   .add('Days', () => (
     <Days
-      date="2020-01-01"
+      day="1"
       days={[
         '2020-01-01',
         '2020-01-02',

diff --git a/src/components/organisms/DateInput/DateInput.tsx b/src/components/organisms/DateInput/DateInput.tsx
@@ -1,11 +1,14 @@
 import React, { memo, useState, useCallback, useEffect } from 'react';
+import { StyleSheet, TouchableOpacity } from 'react-native';
 import Divider from 'components/atoms/Divider';
 import View from 'components/atoms/View';
 import dayjs from 'lib/dayjs';
 import InputYear from 'components/molecules/DateInput/Years';
 import InputMonth from 'components/molecules/DateInput/Months';
 import InputDay from 'components/molecules/DateInput/Days';
 import usePrevious from 'hooks/usePrevious';
+import Text from 'components/atoms/Text';
+import theme from 'config/theme';
 
 const years = () => {
   const lastYear = dayjs().year();
@@ -100,7 +103,9 @@ const DateInput: React.FC<Props> = (props) => {
     if (prevDate && prevDate !== props.date) {
       setState((s) => ({ ...s, date: props.date }));
     } else {
-      props.onChange(state.date);
+      if (props.date !== state.date) {
+        props.onChange(state.date);
+      }
     }
   }, [state.date, props, prevDate]);
 
@@ -136,32 +141,78 @@ const DateInput: React.FC<Props> = (props) => {
     [state.date]
   );
 
+  const onToday = useCallback(() => {
+    const date = dayjs().format('YYYY-MM-DD');
+
+    setState((s) => ({ ...s, date }));
+  }, []);
+
   return (
     <View>
       <View pl={2} py={2}>
-        <InputYear date={state.date} years={years()} onPress={onYear} />
+        <InputYear
+          year={dayjs(state.date).format('YYYY')}
+          years={years()}
+          onPress={onYear}
+        />
       </View>
       <Divider my={2} />
       <View pl={2}>
         <InputMonth
-          date={state.date}
+          month={dayjs(state.date).format('M')}
           months={months}
           onPress={onMonth}
           firstItem={props.firstItem}
         />
-      </View>
-      <Divider my={2} />
-      <View pl={2} pb={2}>
-        <InputDay
-          date={state.date}
-          days={getDays(state.date)}
-          onPress={onDay}
-          firstItem={props.firstItem}
-        />
+
+        <Divider my={2} />
+        <View pb={2} style={styles.dateInput}>
+          <View style={styles.date}>
+            <InputDay
+              day={dayjs(state.date).format('D')}
+              days={getDays(state.date)}
+              onPress={onDay}
+              firstItem={props.firstItem}
+            />
+          </View>
+          <View style={styles.buttonRoot}>
+            <TouchableOpacity onPress={onToday}>
+              <View style={styles.button}>
+                <Text size="xs" textAlign="center">
+                  今日
+                </Text>
+              </View>
+            </TouchableOpacity>
+          </View>
+        </View>
       </View>
       <Divider mt={2} />
     </View>
   );
 };
 
+const styles = StyleSheet.create({
+  dateInput: {
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+    flexDirection: 'row',
+  },
+  date: {
+    width: '80%',
+    overflow: 'hidden',
+  },
+  buttonRoot: {
+    width: '20%',
+    marginHorizontal: theme().space(2),
+  },
+  button: {
+    backgroundColor: theme().color.primary.main,
+    borderRadius: 100,
+    height: 35,
+    width: 60,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
 export default memo(DateInput);
diff --git a/src/components/templates/Home/stories.tsx b/src/components/templates/Home/stories.tsx
@@ -15,7 +15,7 @@ storiesOf('templates/Home', module).add('Page', () => (
     onItem={mockFn('onItem')}
     onMemoir={mockFn('onMemoir')}
     onCloseSettingModal={mockFn('onCloseSettingModal')}
-    onChangeDate={mockFn('onChangeDate')}
+    onChangeDate={() => null}
     onAddItem={mockFn('onAddItem')}
     onOpenAddItem={mockFn('onOpenAddItem')}
     onCloseAddItem={mockFn('onCloseAddItem')}