aling
Version:
奇怪的组件库
56 lines (55 loc) • 2.84 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React, { useMemo } from "react";
import { LocationFill, RightOutline } from "antd-mobile-icons";
import { Box, styled } from "@mui/system";
import { Button as PcButton, Typography } from "antd";
export const WxStyledButton = styled(PcButton)(({ theme }) => ({
width: "100%",
textAlign: "left",
border: "none",
boxShadow: "none",
}));
const WxButton = (_a) => {
var { value, onChange, onClick, prevIcon, backIcon, placeholder } = _a, otr = __rest(_a, ["value", "onChange", "onClick", "prevIcon", "backIcon", "placeholder"]);
const active = useMemo(() => {
return value === null || value === void 0 ? void 0 : value.length;
}, [value]);
return (React.createElement(React.Fragment, null,
React.createElement(WxStyledButton, Object.assign({ onClick: () => {
onClick && onClick();
}, type: 'text', size: 'large', icon: prevIcon === null
? null
: (prevIcon &&
React.cloneElement(prevIcon, {
color: !prevIcon.props.color ? (active ? "#52c41a" : undefined) : prevIcon.props.color,
width: 20,
height: 20,
})) || React.createElement(LocationFill, { color: active ? "#52c41a" : undefined, width: 20, height: 20 }) }, otr),
React.createElement(Box, { sx: {
width: "100%",
display: "inline-flex",
alignItems: "center",
justifyContent: "space-between",
color: active ? "#52c41a" : undefined,
} },
React.createElement(Box, null, ((value === null || value === void 0 ? void 0 : value.length) && value.join(" • ")) || placeholder),
React.createElement(Typography.Text, { style: { paddingRight: 20 } }, backIcon === null
? null
: (backIcon &&
React.cloneElement(backIcon, {
color: !backIcon.props.color ? (active ? "#52c41a" : undefined) : backIcon.props.color,
width: 20,
height: 20,
})) || React.createElement(RightOutline, { width: 20, height: 20, color: '#cecdcc' }))))));
};
export default WxButton;