@parkassist/pa-ui-library
Version:
INX Platform elements
118 lines • 3.33 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import Button from "../Button";
import { StyledColumn } from "./styled";
import { makeStyles } from "@mui/styles";
import styled from "styled-components";
import Palette from "../../constants/Palette";
import * as Icons from "../Icons";
import { FontStyles } from "../../index";
const useStyles = makeStyles(() => ({
paper: {
border: "none",
fontFamily: "Poppins",
fontSize: "12px !important",
transform: `translateY(4px) !important`,
boxShadow: "-1px 4px 10px 0px rgb(0 0 0 / 20%)"
},
listItem: {
fontSize: 12
},
button: {
fontSize: 12,
minWidth: 0
}
}));
const StyledButton = styled(Button)`
background-color: transparent;
border: none;
font: ${props => `${props.font || '12px'} !important`};
color: ${Palette.BLACK};
&:hover {
box-shadow: none;
}
`;
const DynamicSelectorComponent = _a => {
var {
options,
value,
onChange,
isFirst,
openIcon,
buttonProps
} = _a,
props = __rest(_a, ["options", "value", "onChange", "isFirst", "openIcon", "buttonProps"]);
const [anchorEl, setAnchorEl] = React.useState(null);
const classes = useStyles({
isFirst
});
const handleClick = event => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const handlePick = option => {
handleClose();
onChange && onChange(option);
};
if (!value) {
return null;
}
return _jsxs(StyledColumn, Object.assign({}, props, {
children: [_jsx(StyledButton, Object.assign({
className: classes.button,
"aria-controls": "simple-menu",
"aria-haspopup": "true",
onClick: handleClick
}, buttonProps, {
children: openIcon ? _jsxs("div", {
style: {
display: 'flex',
alignItems: 'center'
},
children: [_jsx("span", {
children: value.label
}), _jsx(Icons.OpenArrowIcon, {})]
}) : value.label
})), options && options.length > 0 && _jsx(Menu, {
id: "simple-menu",
anchorEl: anchorEl,
keepMounted: true,
open: Boolean(anchorEl),
onClose: handleClose,
getContentAnchorEl: null,
anchorOrigin: {
vertical: "bottom",
horizontal: "center"
},
transformOrigin: {
vertical: "top",
horizontal: "center"
},
PopoverClasses: {
paper: classes.paper
},
children: options.map((option, i) => _jsx(MenuItem, {
onClick: () => handlePick(option),
children: _jsx("span", {
style: {
font: FontStyles.BODY1_FONT
},
children: option.label
})
}, i))
})]
}));
};
export default DynamicSelectorComponent;