@blocklet/ui-react
Version:
Some useful front-end web components that can be used in Blocklets.
151 lines (150 loc) • 4.01 kB
JavaScript
import { jsxs as d, jsx as l } from "react/jsx-runtime";
import { Box as p } from "@mui/material";
import { useMemoizedFn as u } from "ahooks";
import { translate as m } from "@arcblock/ux/lib/Locale/util";
import { useLocaleContext as f } from "@arcblock/ux/lib/Locale/context";
import x from "@arcblock/ux/lib/PhoneInput/country-select";
import { translations as y } from "../../libs/locales.js";
import n from "../editable-field.js";
const b = {
width: "100%",
px: 2,
py: 1,
borderRadius: 1,
"&:hover": {
"fieldset.MuiOutlinedInput-notchedOutline": {
borderColor: "divider"
}
},
"fieldset.MuiOutlinedInput-notchedOutline": {
borderColor: "divider",
borderRadius: 1
},
".MuiSelect-select": {
padding: "0 !important",
display: "flex",
alignItems: "center"
}
};
function E({
address: r,
errors: t,
handleChange: i,
defaultCountry: a
}) {
const { locale: s } = f(), o = u((e, c = {}) => m(y, e, s, "en", c));
return /* @__PURE__ */ d(
p,
{
sx: {
display: "flex",
flexDirection: "column",
gap: 2,
mt: 2
},
children: [
/* @__PURE__ */ l(
n,
{
placeholder: o("profile.address.country"),
value: r.country || a,
editable: !0,
errorMsg: t.country,
label: o("profile.address.country"),
children: /* @__PURE__ */ l(
x,
{
value: r.country || a,
onChange: (e) => i("country", e),
displayEmpty: !0,
variant: "outlined",
selectCountryProps: {
hideDialCode: !0
},
sx: b
}
)
}
),
/* @__PURE__ */ d(
p,
{
sx: {
display: "flex",
gap: 2
},
children: [
/* @__PURE__ */ l(
n,
{
value: r.province || "",
onChange: (e) => i("province", e),
placeholder: o("profile.address.province"),
label: o("profile.address.province"),
editable: !0,
maxLength: 50,
errorMsg: t.province
}
),
/* @__PURE__ */ l(
n,
{
value: r.city || "",
onChange: (e) => i("city", e),
placeholder: o("profile.address.city"),
label: o("profile.address.city"),
editable: !0,
maxLength: 50,
errorMsg: t.city
}
)
]
}
),
/* @__PURE__ */ l(
n,
{
value: r.line1 || "",
onChange: (e) => i("line1", e),
placeholder: o("profile.address.line1"),
label: o("profile.address.line1"),
component: "textarea",
editable: !0,
maxLength: 200,
rows: 2,
errorMsg: t.line1
}
),
/* @__PURE__ */ l(
n,
{
value: r.line2 || "",
onChange: (e) => i("line2", e),
placeholder: o("profile.address.line2"),
label: o("profile.address.line2"),
component: "textarea",
editable: !0,
rows: 2,
maxLength: 200,
errorMsg: t.line2
}
),
/* @__PURE__ */ l(
n,
{
value: r.postalCode || "",
onChange: (e) => i("postalCode", e),
placeholder: o("profile.address.postalCode"),
label: o("profile.address.postalCode"),
editable: !0,
maxLength: 20,
errorMsg: t.postalCode
}
)
]
}
);
}
export {
E as default
};