@etsoo/materialui/lib/mjs/AddresSelector.js

TypeScript Material-UI Implementation

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { ComboBox } from "./ComboBox";
import { Tiplist } from "./Tiplist";
import { useAppContext } from "./app/ReactApp";
import Grid from "@mui/material/Grid";
import FormLabel from "@mui/material/FormLabel";
/**
 * Address field
 */
export var AddressField;
(function (AddressField) {
    AddressField["Region"] = "region";
    AddressField["State"] = "state";
    AddressField["City"] = "city";
    AddressField["District"] = "district";
})(AddressField || (AddressField = {}));
/**
 * Address selector
 * @param props Props
 */
export function AddressSelector(props) {
    // Global app
    const app = useAppContext();
    // Labels
    const { city: cityDefault = "City", district: districtDefault = "District", region: regionDefault = "Region", state: stateDefault = "State" } = app?.getLabels("region", "state", "city", "district") ?? {};
    // Destruct
    const { api, city, cityLabel = cityDefault, district, districtLabel = districtDefault, error, favoredIds, helperText, hideRegion, label, onChange, region, regionLabel = regionDefault, required, search, state, stateLabel = stateDefault, breakPoints = { xs: 12, md: 6, lg: hideRegion ? 4 : 3 } } = props;
    const isMounted = React.useRef(true);
    React.useEffect(() => () => {
        isMounted.current = false;
    }, []);
    // States
    const [regionState, setRegion] = React.useState(region);
    const [stateState, setState] = React.useState(state);
    const [cityState, setCity] = React.useState(city);
    const [districtState, setDistrict] = React.useState(district);
    React.useEffect(() => setRegion(region), [region]);
    React.useEffect(() => setState(state), [state]);
    React.useEffect(() => setCity(city), [city]);
    React.useEffect(() => setDistrict(district), [district]);
    const [states, setStates] = React.useState([]);
    const [cities, setCities] = React.useState([]);
    const [districts, setDistricts] = React.useState([]);
    React.useEffect(() => {
        if (regionState == null)
            setStates([]);
        else
            api
                .states(regionState, favoredIds == null ? undefined : favoredIds(AddressField.State))
                .then((items) => {
                if (items == null || !isMounted.current)
                    return;
                setStates(items);
            });
    }, [regionState]);
    React.useEffect(() => {
        if (stateState == null)
            setCities([]);
        else
            api
                .cities(stateState, favoredIds == null ? undefined : favoredIds(AddressField.City))
                .then((items) => {
                if (items == null || !isMounted.current)
                    return;
                setCities(items);
            });
    }, [stateState]);
    React.useEffect(() => {
        if (cityState == null)
            setDistricts([]);
        else
            api
                .districts(cityState, favoredIds == null ? undefined : favoredIds(AddressField.District))
                .then((items) => {
                if (items == null || !isMounted.current)
                    return;
                setDistricts(items);
            });
    }, [cityState]);
    // Handle field change
    const handleChange = (event) => {
        if (!isMounted.current)
            return;
        if (onChange)
            onChange(event);
        const [field, data] = event;
        if (field === AddressField.Region) {
            if (data == null) {
                setRegion(undefined);
            }
            else {
                setRegion(data.id);
            }
            setState(undefined);
            setCity(undefined);
            setDistrict(undefined);
            return;
        }
        if (field === AddressField.State) {
            if (data == null) {
                setState(undefined);
            }
            else {
                setState(data.id);
            }
            setCity(undefined);
            setDistrict(undefined);
            return;
        }
        if (field === AddressField.City) {
            if (data == null) {
                setCity(undefined);
            }
            else {
                setCity(data.id);
            }
            setDistrict(undefined);
            return;
        }
        if (data == null) {
            setDistrict(undefined);
        }
        else {
            setDistrict(data.id);
        }
    };
    // Layout
    return (_jsxs(React.Fragment, { children: [label && (_jsx(Grid, { size: { xs: 12 }, children: _jsx(FormLabel, { required: required, sx: { fontSize: (theme) => theme.typography.caption }, children: label }) })), !hideRegion && (_jsx(Grid, { size: breakPoints, children: _jsx(Tiplist, { label: regionLabel, name: AddressField.Region, search: search, fullWidth: true, idValue: regionState, loadData: (keyword, id, items) => api.regions({
                        keyword,
                        id,
                        items,
                        favoredIds: favoredIds == null
                            ? undefined
                            : favoredIds(AddressField.Region)
                    }), inputRequired: required, inputError: error, inputHelperText: helperText, onChange: (_event, value) => handleChange([AddressField.Region, value]) }) })), _jsx(Grid, { size: breakPoints, children: _jsx(ComboBox, { name: AddressField.State, label: stateLabel, search: search, fullWidth: true, idValue: stateState, options: states, inputRequired: required, inputError: hideRegion ? error : undefined, inputHelperText: hideRegion ? helperText : undefined, onChange: (_event, value) => handleChange([AddressField.State, value]) }) }), _jsx(Grid, { size: breakPoints, children: _jsx(ComboBox, { name: AddressField.City, label: cityLabel, search: search, fullWidth: true, idValue: cityState, options: cities, onChange: (_event, value) => handleChange([AddressField.City, value]) }) }), _jsx(Grid, { size: breakPoints, children: _jsx(ComboBox, { name: AddressField.District, label: districtLabel, search: search, fullWidth: true, idValue: districtState, options: districts, onChange: (_event, value) => handleChange([AddressField.District, value]) }) })] }));
}