@etsoo/materialui
Version:
TypeScript Material-UI Implementation
145 lines (144 loc) • 7.12 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.AddressField = void 0;
exports.AddressSelector = AddressSelector;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const ComboBox_1 = require("./ComboBox");
const Tiplist_1 = require("./Tiplist");
const ReactApp_1 = require("./app/ReactApp");
const Grid_1 = __importDefault(require("@mui/material/Grid"));
const FormLabel_1 = __importDefault(require("@mui/material/FormLabel"));
/**
* Address field
*/
var AddressField;
(function (AddressField) {
AddressField["Region"] = "region";
AddressField["State"] = "state";
AddressField["City"] = "city";
AddressField["District"] = "district";
})(AddressField || (exports.AddressField = AddressField = {}));
/**
* Address selector
* @param props Props
*/
function AddressSelector(props) {
// Global app
const app = (0, ReactApp_1.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_1.default.useRef(true);
react_1.default.useEffect(() => () => {
isMounted.current = false;
}, []);
// States
const [regionState, setRegion] = react_1.default.useState(region);
const [stateState, setState] = react_1.default.useState(state);
const [cityState, setCity] = react_1.default.useState(city);
const [districtState, setDistrict] = react_1.default.useState(district);
react_1.default.useEffect(() => setRegion(region), [region]);
react_1.default.useEffect(() => setState(state), [state]);
react_1.default.useEffect(() => setCity(city), [city]);
react_1.default.useEffect(() => setDistrict(district), [district]);
const [states, setStates] = react_1.default.useState([]);
const [cities, setCities] = react_1.default.useState([]);
const [districts, setDistricts] = react_1.default.useState([]);
react_1.default.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_1.default.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_1.default.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 ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [label && ((0, jsx_runtime_1.jsx)(Grid_1.default, { size: { xs: 12 }, children: (0, jsx_runtime_1.jsx)(FormLabel_1.default, { required: required, sx: { fontSize: (theme) => theme.typography.caption }, children: label }) })), !hideRegion && ((0, jsx_runtime_1.jsx)(Grid_1.default, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(Tiplist_1.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]) }) })), (0, jsx_runtime_1.jsx)(Grid_1.default, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(ComboBox_1.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]) }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(ComboBox_1.ComboBox, { name: AddressField.City, label: cityLabel, search: search, fullWidth: true, idValue: cityState, options: cities, onChange: (_event, value) => handleChange([AddressField.City, value]) }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(ComboBox_1.ComboBox, { name: AddressField.District, label: districtLabel, search: search, fullWidth: true, idValue: districtState, options: districts, onChange: (_event, value) => handleChange([AddressField.District, value]) }) })] }));
}