@vlinderclimate/net-zero-ui
Version:
<div align="center"> <img src="https://storage.yandexcloud.net/static.vlinderstorage.com/Telegram_VlinderTech.png" width=200 /> </div> <h1 align="center">Net Zero UI kit</h1>
174 lines (167 loc) • 6.38 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var tslib_es6 = require('../tslib.es6-9240d9d1.js');
var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var styles = require('@mui/material/styles');
var MuiSelect = require('@mui/material/Select');
var components_Input = require('./Input.js');
require('@mui/material/Input');
require('./EndAdornment.js');
require('@mui/material/Box');
require('@mui/material/InputAdornment');
require('./Icon.js');
require('../icons/ArrowLeft.js');
require('../icons/ArrowRight.js');
require('../icons/CheckCircle.js');
require('../icons/CloseCircle.js');
require('../icons/InfoCircle.js');
require('../icons/ErrorCircle.js');
require('../icons/Attention.js');
require('../icons/HelpCircle.js');
require('../icons/Lock.js');
require('../icons/Delete.js');
require('../icons/TriangleRight.js');
require('../icons/TriangleLeft.js');
require('../icons/TriangleUp.js');
require('../icons/TriangleDown.js');
require('../icons/Download.js');
require('../icons/Key.js');
require('../icons/Edit.js');
require('../icons/Expand.js');
require('../icons/Collapse.js');
require('../icons/Success.js');
require('../icons/Fail.js');
require('../icons/Loading.js');
require('../icons/Check.js');
require('../icons/ChevronLeft.js');
require('../icons/ChevronRight.js');
require('../icons/Plus.js');
require('../icons/Minus.js');
require('../icons/Link.js');
require('../icons/Copy.js');
require('../icons/Medium.js');
require('../icons/Twitter.js');
require('../icons/Telegram.js');
require('../icons/Sort.js');
require('../icons/Close.js');
require('../icons/Search.js');
require('../icons/Instagram.js');
require('../icons/LinkedIn.js');
require('../icons/Reddit.js');
require('../icons/YouTube.js');
require('../icons/Update.js');
require('../icons/Facebook.js');
require('../icons/Cart.js');
require('../icons/Menu.js');
require('../icons/ShowPassword.js');
require('../icons/HidePassword.js');
require('../icons/Collection.js');
require('../icons/Sprout.js');
require('../icons/Verify.js');
require('../icons/User.js');
require('../icons/Convert.js');
require('../icons/Deposit.js');
require('../icons/Send.js');
require('../icons/Receive.js');
require('../icons/To.js');
require('../icons/Withdraw.js');
require('../icons/Clock.js');
require('../icons/Play.js');
require('../icons/Help.js');
require('../icons/CloseSmall.js');
require('../icons/MinusSmall.js');
require('../icons/PlusSmall.js');
require('../icons/Dropdown.js');
require('./Button.js');
require('@mui/material/Button');
require('../theme/colors.js');
require('../theme/typography.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var MuiSelect__default = /*#__PURE__*/_interopDefaultLegacy(MuiSelect);
var StyledMuiSelect = styles.styled(MuiSelect__default["default"])(function (_a) {
var theme = _a.theme;
return ({
position: "relative",
padding: 0,
boxShadow: "inset 0 0 0 1px " + theme.palette.gray[500],
transition: theme.transitions.create(["box-shadow"]),
backgroundColor: theme.palette.gray.white,
marginTop: "0 !important",
"&.Mui-focused": {
boxShadow: "inset 0 0 0 1px " + theme.palette.gray[500]
},
"&:hover": {
boxShadow: "inset 0 0 0 1.5px " + theme.palette.gray[600]
},
// lineHeight: theme.spacing(3),
// color: theme.palette.icon.secondary,
// backgroundColor: `${theme.palette.gray.white} !important`,
// border: 0,
// ".MuiSelect-icon": {
// display: "none"
// },
// ".MuiOutlinedInput-notchedOutline": {
// border: 0,
// outline: "none"
// },
// ".MuiInputBase-input": {
// padding: theme.spacing(2)
// },
// ".MuiSelect-nativeInput": {
// border: 0,
// clip: "rect(0 0 0 0)",
// height: 1,
// margin: -1,
// overflow: "hidden",
// padding: 0,
// position: "absolute",
// top: "20",
// width: 1
// }
".MuiSelect-outlined": {},
".MuiSelect-select": {
padding: "8px 16px 8px 16px"
},
".MuiSelect-iconOpen": {
right: 0
},
".MuiSvgIcon-root": {
display: "none"
},
".MuiInputAdornment-positionEnd": {
position: "absolute",
right: 3,
top: 0,
height: "100%",
margin: 0,
maxHeight: "none",
color: theme.palette.gray[700]
}
});
});
var Select = React.forwardRef(function (_a, ref) {
var id = _a.id, value = _a.value, placeholder = _a.placeholder, _b = _a.disabled, disabled = _b === void 0 ? false : _b, onChange = _a.onChange, onOpen = _a.onOpen, onClose = _a.onClose, onBlur = _a.onBlur, inputProps = _a.inputProps, error = _a.error, variant = _a.variant, endAdornment = _a.endAdornment, props = tslib_es6.__rest(_a, ["id", "value", "placeholder", "disabled", "onChange", "onOpen", "onClose", "onBlur", "inputProps", "error", "variant", "endAdornment"]);
return (
// TODO: use TextField component (input prop https://mui.com/components/selects/#customization)
jsxRuntime.jsx(StyledMuiSelect, tslib_es6.__assign({ value: value, placeholder: placeholder, inputProps: tslib_es6.__assign({ id: id }, inputProps), disabled: disabled, onChange: onChange, onBlur: onBlur, onOpen: onOpen, onClose: onClose, inputRef: ref, error: error, input: jsxRuntime.jsx(components_Input["default"], tslib_es6.__assign({}, {
size: "xs",
error: error,
variant: variant,
color: "primary",
endAdornment: endAdornment
}), void 0), MenuProps: {
id: "menu-" + (id !== null && id !== void 0 ? id : "select"),
anchorOrigin: {
vertical: "bottom",
horizontal: "left"
},
transformOrigin: {
vertical: "top",
horizontal: "left"
},
hideBackdrop: true,
onClick: onClose
} }, props), void 0));
});
exports["default"] = Select;