Dingdong_app/components/OpenTime.js

import React from "react";
import PropTypes from "prop-types";
import {
    StyleSheet,
    TouchableOpacity,
    LayoutAnimation,
    Platform,
    UIManager,
} from "react-native";
import { range, convert2Digit } from "beeshell/dist/common/utils";
import {
    CheckBox,
    Layout,
    Modal,
    Button,
    Card,
    Text,
    MenuItem,
    Icon,
    SelectItem,
} from "@ui-kitten/components";
import { Scrollpicker } from "beeshell";
import { useModel } from "flooks";
import moment from "moment";

if (Platform.OS === "android") {
    if (UIManager.setLayoutAnimationEnabledExperimental) {
        UIManager.setLayoutAnimationEnabledExperimental(true);
    }
}

const ForwardIcon = (props) => <Icon {...props} name='arrow-ios-forward' />;

const titleText = (props, title, value) => (
    <>
        <Text
            {...props}
            category='s1'
            style={{ whiteSpace: "nowrap", flex: 1, marginRight: 10 }}
        >
            {title}
        </Text>
        <Text category='c1' numberOfLines={1} ellipsizeMode='tail'>
            {value}
        </Text>
    </>
);

export default function OpenTime({
    open,
    submit,
    cancelEvent,
    startTime,
    endTime,
    week,
    openModal,
    defaultValue,
}) {
    const {
        MON,
        TUE,
        WED,
        THU,
        FRI,
        SAT,
        SUN,
        every,
        confirm,
        cancel,
        start,
        end,
        hour,
        min,
        weekName,
    } = useModel("wordsModel");
    const weeks = [
        {
            key: "MON",
            label: MON,
        },
        {
            key: "TUE",
            label: TUE,
        },
        {
            key: "WED",
            label: WED,
        },
        {
            key: "THU",
            label: THU,
        },
        {
            key: "FRI",
            label: FRI,
        },
        {
            key: "SAT",
            label: SAT,
        },
        {
            key: "SUN",
            label: SUN,
        },
    ];
    const [checkList, changeChecked] = React.useState([]);
    const listItems = weeks.map((item, index) => (
        <CheckBox
            style={styles.checkBoxItem}
            key={index}
            checked={checkList.includes(item.key)}
            onChange={(checked) => {
                console.log(checked);
                let _checkList = [...checkList];
                if (checked) {
                    _checkList.push(item.key);
                } else {
                    _checkList.splice(_checkList.indexOf(item.key), 1);
                }
                changeChecked(_checkList);
            }}
        >
            {item.label}
        </CheckBox>
    ));
    const list = React.useMemo(() => {
        let hourSum = 24;
        let minuteSum = 60;
        let secondSum = 60;
        let hours = range(hourSum / 1).map((item) => {
            item = convert2Digit(item * 1);
            return {
                label: `${item} ${hour}`,
                value: item,
            };
        });
        let minutes = range(minuteSum / 10).map((item) => {
            item = convert2Digit(item * 10);
            return {
                label: `${item} ${min}`,
                value: item,
            };
        });
        return [hours, minutes];
    }, [open]);

    const [time1, setTime1] = React.useState([8, 0]);
    const [time2, setTime2] = React.useState([20, 0]);

    const [showTime1, changeShowTime1] = React.useState(true);
    const [showTime2, changeShowTime2] = React.useState(false);
    const [showWeek, changeShowWeek] = React.useState(false);

    const allChecked = React.useMemo(() => {
        if (weeks.length == checkList.length) {
            return true;
        } else {
            return false;
        }
    }, [weeks, checkList]);

    const indeterminate = React.useMemo(() => {
        if (!allChecked && checkList.length > 0) {
            return true;
        } else {
            return false;
        }
    }, [allChecked, checkList]);

    const canSubmit = React.useMemo(() => {
        if (time1.length == 2 && time2.length == 2 && checkList.length > 0) {
            return true;
        } else {
            return false;
        }
    }, [time1, time2, checkList]);

    const time1Str = React.useMemo(() => {
        if (time1.length == 2) {
            let str = time1[0] + ":" + time1[1] * 10;
            return moment(str, "H:m").format("HH:mm");
        } else {
            return "";
        }
    }, [time1]);

    const time2Str = React.useMemo(() => {
        if (time2.length == 2) {
            let str = time2[0] + ":" + time2[1] * 10;
            return moment(str, "H:m").format("HH:mm");
        } else {
            return "";
        }
    }, [time2]);

    const weekStr = React.useMemo(() => {
        if (allChecked) {
            return every;
        } else {
            let _weeks = weeks.filter((item) => {
                return checkList.includes(item.key);
            });
            return _weeks
                .map((item) => {
                    return item.label;
                })
                .join(",");
        }
    }, []);

    React.useEffect(() => {
        if (defaultValue.length > 0) {
            setShowName(defaultValue);
        }
    }, [defaultValue]);

    function hideElseShow(key) {
        changeShowTime1(key === 1);
        changeShowTime2(key === 2);
        changeShowWeek(key === 3);

        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    }

    const [showName, setShowName] = React.useState([" ", ""]);

    return (
        <>
            <SelectItem
                appearance='form'
                style={{ flex: 1 }}
                accessoryRight={ForwardIcon}
                title={(props) => titleText(props, showName[0], showName[1])}
                onPress={openModal}
            />
            <Modal
                visible={open && list.length > 0}
                backdropStyle={styles.backdrop}
                onBackdropPress={cancelEvent}
            >
                <Card appearance='modalCrad' style={{ width: 242 }}>
                    <Layout>
                        <MenuItem
                            appearance='cardContent'
                            title={(props) => titleText(props, start, time1Str)}
                            accessoryRight={ForwardIcon}
                            onPress={() => {
                                hideElseShow(1);
                            }}
                        />
                    </Layout>
                    <Card
                        appearance='modalCrad'
                        style={[
                            { width: 222 },
                            showTime1 ? {} : styles.hideHeight,
                        ]}
                    >
                        <Scrollpicker
                            key='time1'
                            list={list}
                            proportion={[1, 1]}
                            offsetCount={1}
                            value={time1}
                            onChange={(index, value) => {
                                let _time1 = [...time1];
                                _time1[index] = value;
                                setTime1(_time1);
                            }}
                        />
                    </Card>
                    <Layout>
                        <MenuItem
                            appearance='cardContent'
                            title={(props) => titleText(props, end, time2Str)}
                            accessoryRight={ForwardIcon}
                            onPress={() => {
                                hideElseShow(2);
                            }}
                        />
                    </Layout>
                    <Card
                        appearance='modalCrad'
                        style={[
                            { width: 222 },
                            showTime2 ? {} : styles.hideHeight,
                        ]}
                    >
                        <Scrollpicker
                            key='time2'
                            list={list}
                            proportion={[1, 1]}
                            offsetCount={1}
                            value={time2}
                            onChange={(index, value) => {
                                let _time2 = [...time2];
                                _time2[index] = value;
                                setTime2(_time2);
                            }}
                        />
                    </Card>
                    <Layout>
                        <MenuItem
                            appearance='cardContent'
                            title={(props) =>
                                titleText(props, weekName, weekStr)
                            }
                            accessoryRight={ForwardIcon}
                            onPress={() => {
                                hideElseShow(3);
                            }}
                        />
                    </Layout>
                    <Card
                        appearance='modalCrad'
                        style={[showWeek ? {} : styles.hideHeight]}
                    >
                        <CheckBox
                            style={styles.checkBoxAll}
                            checked={allChecked}
                            indeterminate={indeterminate}
                            onChange={(checked) => {
                                changeChecked(
                                    checked
                                        ? weeks.map((item) => {
                                              return item.key;
                                          })
                                        : []
                                );
                            }}
                        >
                            {every}
                        </CheckBox>

                        {listItems}
                    </Card>
                    <Layout style={styles.btnList}>
                        <Button
                            style={styles.btn}
                            appearance='outline'
                            status='info'
                            onPress={cancelEvent}
                        >
                            {cancel}
                        </Button>
                        <Button
                            style={[styles.btn, { marginLeft: 10 }]}
                            disabled={!canSubmit}
                            onPress={() => {
                                submit(time1Str, time2Str, checkList);
                                setShowName([
                                    time1Str + "~" + time2Str,
                                    weekStr,
                                ]);
                            }}
                        >
                            {confirm}
                        </Button>
                    </Layout>
                </Card>
            </Modal>
        </>
    );
}

const styles = StyleSheet.create({
    checkBoxAll: {
        paddingVertical: 10,
    },
    checkBoxItem: {
        paddingVertical: 2,
        paddingHorizontal: 10,
    },
    time: {
        // width: 100,
        // height: 300,
    },
    backdrop: {
        backgroundColor: "rgba(0, 0, 0, 0.5)",
    },
    btnList: {
        flexDirection: "row",
        justifyContent: "space-between",
        paddingTop: 15,
    },
    hideHeight: {
        height: 0,
        borderWidth: 0,
    },
    btn: {
        flex: 1,
        minWidth: 50,
    },
});