Dingdong_app/screens/FullReduction.js

import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import {
    Image,
    Platform,
    StyleSheet,
    TouchableOpacity,
    View,
    ImageBackground,
} from "react-native";
import scrollPage from "../decorator/scrollPage";
import { useModel } from "flooks";
import {
    Layout,
    Tab,
    TabView,
    Text,
    useTheme,
    Button,
    Card,
    List,
    Input,
    Icon,
} from "@ui-kitten/components";
import EmptyComponent from "../components/EmptyComponent";
import FormInput from "../components/FormInput";
import { useFocusEffect } from "@react-navigation/native";
import ScrollPage from "../components/ScrollPage";
import NavHeaderBar from "../components/NavHeaderBar";
import GoodsCard from "../components/GoodsCard";
import ActionButton from "react-native-action-button";

export default function FullReduction({ navigation, route }) {
    const theme = useTheme();
    const { changeBackground } = useModel("barModel", true);
    const { mid } = useModel("userModel");
    const { httpGet, httpPost } = useModel("httpModel", true);
    const { success, warnning } = useModel("loadingModel", true);
    const { showDialog } = useModel("dialogModel");

    const {
        userTitle21,
        fullReduction2,
        fullReduction1,
        delText,
        editText,
        confirm,
        cancel,
        complete,
        successText,
        removeTips,
    } = useModel("wordsModel");
    const [fullReductions, changeFllReduction] = React.useState([
        { fullAmount: "", minusAmount: "" },
    ]);
    useFocusEffect(
        React.useCallback(() => {
            changeBackground(theme["color-primary-500"]);

            httpGet("/fullReduction/my").then(res => {
                if (res.length > 0) {
                    changeFllReduction(
                        res.map(item => {
                            return { ...item, edit: false };
                        })
                    );
                }
            });
        }, [])
    );

    const renderItem = ({ item, index }) => {
        if (!item.id || item.edit) {
            return editItem(item, index);
        } else {
            return saveItem(item);
        }
    };

    const saveItem = (info, index) => (
        <Layout style={styles.item}>
            <Text style={styles.text}>
                {fullReduction1}
                {info.fullAmount}
                {fullReduction2}
                {info.minusAmount}
            </Text>

            <Button
                size='small'
                appearance='outline'
                onPress={() => editInfo(info, index)}
            >
                {editText}
            </Button>
            <Button
                size='small'
                status='danger'
                style={styles.buttonlast}
                onPress={() => delInfo(info, index)}
            >
                {delText}
            </Button>
        </Layout>
    );

    const editItem = (info, index) => (
        <Layout style={styles.item}>
            <Layout style={[styles.text, styles.flexRow]}>
                <Text>{fullReduction1}</Text>
                <Input
                    size='small'
                    defaultValue={info.fullAmount.toString()}
                    style={styles.input}
                    key={index + 0}
                    keyboardType='numeric'
                    onChangeText={value => changeText(value, index, "full")}
                />
                <Text>{fullReduction2}</Text>
                <Input
                    size='small'
                    defaultValue={info.minusAmount.toString()}
                    style={styles.input}
                    key={index + 1}
                    keyboardType='numeric'
                    onChangeText={value => changeText(value, index, "minus")}
                />
            </Layout>

            <Button
                size='small'
                disabled={!info.minusAmount || !info.fullAmount}
                onPress={() => saveInfo(info, index)}
            >
                {confirm}
            </Button>
            {!!info.id && (
                <Button
                    size='small'
                    appearance='outline'
                    style={styles.buttonlast}
                    onPress={() => cancelInfo(info, index)}
                >
                    {cancel}
                </Button>
            )}
        </Layout>
    );
    const editInfo = (info, index) => {
        let _fullReductions = [...fullReductions];
        info.edit = true;
        _fullReductions[index] = info;
        changeFllReduction(_fullReductions);
    };
    const delInfo = (info, index) => {
        showDialog({
            bodyText: removeTips,
            status: "danger",
            cancelable: true,
            confirmCallback: () => {
                httpPost("/fullReduction/del/" + info.id)
                    .then(res => {
                        success(successText);
                        let _fullReductions = [...fullReductions];
                        _fullReductions.splice(index, 1);
                        changeFllReduction(_fullReductions);
                    })
                    .catch(e => {
                        warnning(e.error);
                    });
            },
        });
    };
    const cancelInfo = (info, index) => {
        let _fullReductions = [...fullReductions];
        if (info.id) {
            info.edit = false;
            _fullReductions[index] = info;
        } else {
            _fullReductions.pop();
        }

        changeFllReduction(_fullReductions);
    };
    const saveInfo = (info, index) => {
        httpPost(
            "/fullReduction/save",
            {
                ...info,
                merchantId: mid,
            },
            {
                body: "json",
            }
        )
            .then(res => {
                success(successText);
                let _fullReductions = [...fullReductions];
                _fullReductions.splice(index, 1, {
                    ...res,
                    edit: false,
                });
                changeFllReduction(_fullReductions);
            })
            .catch(e => {
                warnning(e.error);
            });
    };
    function changeText(value, index, type) {
        let _fullReductions = [...fullReductions];
        let info = _fullReductions[index];
        if (type == "full") {
            info.fullAmount = value;
        } else {
            info.minusAmount = value;
        }
        _fullReductions.splice(index, 1, info);
        changeFllReduction(_fullReductions);
    }
    const addFullReduction = () => {
        console.log("aaa");
        let _fullReductions = [...fullReductions];
        let last = _fullReductions[_fullReductions.length - 1];
        if (last.id) {
            _fullReductions.push({
                fullAmount: "",
                minusAmount: "",
            });
            changeFllReduction(_fullReductions);
        }
    };

    return (
        <>
            <NavHeaderBar title={userTitle21} />
            <Layout style={styles.all}>
                <Layout style={[styles.all]}>
                    <List
                        style={styles.list}
                        data={fullReductions}
                        renderItem={renderItem}
                        ListEmptyComponent={EmptyComponent}
                        keyboardShouldPersistTaps='handled'
                    />
                </Layout>
                <ActionButton
                    buttonColor={theme["color-primary-500"]}
                    onPress={addFullReduction}
                    position='left'
                />
            </Layout>
        </>
    );
}

const PulsIcon = props => (
    <Icon
        {...props}
        style={[props.style, { width: 33, height: 33 }]}
        name='plus-circle'
    />
);
const styles = StyleSheet.create({
    all: {
        backgroundColor: "#fff",
        flex: 1,
    },
    lay: {
        backgroundColor: "#fff",
    },
    padBot: {
        paddingBottom: 100,
    },
    list: {
        paddingVertical: 10,
        paddingHorizontal: 15,
        backgroundColor: "transparent",
        flex: 1,
    },
    item: {
        flexDirection: "row",
        alignItems: "center",
        paddingVertical: 10,
    },
    input: {
        marginHorizontal: 5,
        minWidth: 49,
    },
    text: {
        flex: 1,
    },
    flexRow: {
        flexDirection: "row",
        alignItems: "center",
    },
    buttonlast: {
        marginLeft: 10,
    },
    button: {
        alignSelf: "flex-start",
    },
});