@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
131 lines (130 loc) • 7.44 kB
JavaScript
import { _ as __rest } from "./tslib.es6.js";
import React__default, { forwardRef, useState, useImperativeHandle } from "react";
import { Check, Location, ArrowLeft } from "@nutui/icons-react";
import Popup__default from "./Popup.js";
import { C as Cascader } from "./cascader2.js";
import { C as ComponentDefaults } from "./typings.js";
import { useConfig } from "./ConfigProvider.js";
import { u as usePropsValue } from "./use-props-value.js";
const defaultProps$2 = Object.assign(Object.assign({}, ComponentDefaults), { visible: false, type: "custom", options: [], optionKey: { textKey: "text", valueKey: "value", childrenKey: "children" }, format: {}, height: "200px" });
const CustomRender = (props) => {
const _a = Object.assign(Object.assign({}, defaultProps$2), props), { children, visible, type, height, options, title, left, value, defaultValue, optionKey, format, onClose, onChange, onPathChange } = _a, rest = __rest(_a, ["children", "visible", "type", "height", "options", "title", "left", "value", "defaultValue", "optionKey", "format", "onClose", "onChange", "onPathChange"]);
return React__default.createElement(React__default.Fragment, null, type === "custom" && React__default.createElement(Cascader, Object.assign({ visible, value, defaultValue, title, left, options, format, optionKey, onClose: () => {
onClose === null || onClose === void 0 ? void 0 : onClose();
}, onChange: (val, params) => {
onChange === null || onChange === void 0 ? void 0 : onChange(val, params);
}, onPathChange }, rest)));
};
const defaultProps$1 = {
type: "custom",
existList: [],
defaultIcon: null,
selectIcon: null,
custom: false
};
const ExistRender = (props) => {
const { locale } = useConfig();
const _a = Object.assign(Object.assign({}, defaultProps$1), props), { children, type, existList, selectIcon, defaultIcon, custom, onSelect, onSwitch } = _a;
__rest(_a, ["children", "type", "existList", "selectIcon", "defaultIcon", "custom", "onSelect", "onSwitch"]);
const classPrefix = "nut-address";
const selectedExist = (item) => {
existList.forEach((list, index) => {
list.selectedAddress = false;
});
item.selectedAddress = true;
onSelect && onSelect(item);
};
const onClick = (e) => {
e.stopPropagation();
onSwitch && onSwitch({ type: type === "exist" ? "custom" : "exist" });
};
return React__default.createElement(
React__default.Fragment,
null,
React__default.createElement("ul", { className: `${classPrefix}-exist` }, existList.map((item, index) => {
return React__default.createElement(
"li",
{ className: `${classPrefix}-exist-item ${item.selectedAddress ? "active" : ""}`, key: index, onClick: (e) => {
e.stopPropagation();
selectedExist(item);
} },
item.selectedAddress ? React__default.createElement(React__default.Fragment, null, React__default.isValidElement(selectIcon) ? selectIcon : React__default.createElement(Check, { color: "var(--nutui-color-primary)" })) : React__default.createElement(React__default.Fragment, null, React__default.isValidElement(defaultIcon) ? defaultIcon : React__default.createElement(Location, null)),
React__default.createElement(
"div",
{ className: `${classPrefix}-exist-item-info` },
item.name && item.phone && React__default.createElement(
React__default.Fragment,
null,
React__default.createElement("div", null, item.name),
React__default.createElement("div", null, item.phone)
),
React__default.createElement("div", null, item.provinceName + item.cityName + item.countyName + item.townName + item.addressDetail)
)
);
})),
(custom || custom && locale.address.chooseAnotherAddress) && React__default.createElement(
"div",
{ className: `${classPrefix}-footer`, onClick },
React__default.createElement("div", { className: `${classPrefix}-footer-btn` }, custom)
)
);
};
const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { defaultValue: [], type: "custom", options: [], optionKey: { textKey: "text", valueKey: "value", childrenKey: "children" }, format: {}, custom: false, existList: [], height: "200px", defaultIcon: null, selectIcon: null, closeIcon: null, backIcon: null });
const InternalAddress = (props, ref) => {
const { locale } = useConfig();
const _a = Object.assign(Object.assign({}, defaultProps), props), { style, className, visible, defaultVisible, defaultValue, children, type, options, optionKey, format, height, title, existList, custom, selectIcon, defaultIcon, closeIcon, backIcon, onChange, onExistSelect, onClose, onSwitch } = _a;
__rest(_a, ["style", "className", "visible", "defaultVisible", "defaultValue", "children", "type", "options", "optionKey", "format", "height", "title", "existList", "custom", "selectIcon", "defaultIcon", "closeIcon", "backIcon", "onChange", "onExistSelect", "onClose", "onSwitch"]);
const classPrefix = "nut-address";
const [currentType, setCurrentType] = useState(type);
const [innerVisible, setInnerVisible] = usePropsValue({
value: visible,
defaultValue: defaultVisible,
finalValue: defaultVisible
});
useImperativeHandle(ref, () => {
return {
open() {
setInnerVisible(true);
},
close() {
setInnerVisible(false);
}
};
});
const handleClose = () => {
setInnerVisible(false);
onClose && onClose();
};
const renderLeftOnCustomSwitch = () => {
return React__default.createElement(React__default.Fragment, null, custom && React__default.createElement("div", { className: `${classPrefix}-left-icon`, onClick: onSwitchModule }, React__default.isValidElement(backIcon) ? backIcon : React__default.createElement(ArrowLeft, { color: "#cccccc" })));
};
const selectedExistItem = (data) => {
onExistSelect && onExistSelect(data);
handleClose();
};
const onSwitchModule = () => {
if (currentType === "exist") {
setCurrentType("custom");
} else {
setCurrentType("exist");
}
onSwitch && onSwitch({ type: currentType });
};
return React__default.createElement(React__default.Fragment, null, currentType === "custom" || currentType === "custom2" ? React__default.createElement(CustomRender, { visible: innerVisible, closeable: true, title: title || locale.address.selectRegion, left: renderLeftOnCustomSwitch(), defaultValue, closeIcon, options, format, optionKey, type: currentType, height, onClose: handleClose, onChange: (val, params) => {
onChange === null || onChange === void 0 ? void 0 : onChange(val, params);
} }) : React__default.createElement(
Popup__default,
{ visible: innerVisible, position: "bottom", round: true, closeable: true, closeIcon, title: title || locale.address.selectRegion, onClose: handleClose },
React__default.createElement(
"div",
{ className: `${classPrefix} ${className || ""}`, style: Object.assign({}, style) },
// 不需要 close，选中切换即关闭弹框。可手动关闭弹框，只关闭弹框不处理逻辑。
React__default.createElement(ExistRender, { type: currentType, existList, selectIcon, defaultIcon, custom, onSelect: selectedExistItem, onSwitch: onSwitchModule })
)
));
};
const Address = forwardRef(InternalAddress);
Address.displayName = "NutAddress";
export {
Address as default
};