@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>
236 lines (229 loc) • 9.41 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 MuiInput = require('@mui/material/Input');
var components_EndAdornment = 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 MuiInput__default = /*#__PURE__*/_interopDefaultLegacy(MuiInput);
var getFontSize = function (_a) {
var size = _a.size, theme = _a.theme;
switch (size) {
case "xs":
return {
main: theme.typography.fontSizeXs2,
mobile: theme.typography.fontSizeXs2
};
case "sm":
return {
main: theme.typography.fontSizeXs1,
mobile: theme.typography.fontSizeXs2
};
case "md":
return {
main: theme.typography.fontSizeS,
mobile: theme.typography.fontSizeXs1
};
case "lg":
return {
main: theme.typography.fontSizeM,
mobile: theme.typography.fontSizeS
};
}
};
var getPadding = function (_a) {
var size = _a.size, theme = _a.theme; _a.$append;
switch (size) {
case "xs":
return {
main: theme.spacing(1, 2, 1, 2),
mobile: theme.spacing(1, 1.5, 1, 1.5)
};
case "sm":
return {
main: theme.spacing(1.5, 2, 1.5, 2),
mobile: theme.spacing(1.25, 1.5, 1.25, 1.5)
};
case "md":
return {
main: theme.spacing(2, 3, 2, 3),
mobile: theme.spacing(1.5, 2, 1.5, 2)
};
case "lg":
return {
main: theme.spacing(2, 3, 2, 3),
mobile: theme.spacing(1.5, 2, 1.5, 2)
};
}
};
var getLineHeight = function (_a) {
var size = _a.size, theme = _a.theme;
switch (size) {
case "xs":
return {
main: theme.typography.lineHeightXs1,
mobile: theme.typography.lineHeightXs3
};
case "sm":
return {
main: theme.typography.lineHeightXs1,
mobile: theme.typography.lineHeightXs3
};
case "md":
return {
main: theme.typography.lineHeightXs1,
mobile: theme.typography.lineHeightXs1
};
case "lg":
return {
main: theme.typography.lineHeightXs1,
mobile: theme.typography.lineHeightXs1
};
}
};
var formCommonStyles = function (theme) {
var _a;
return (_a = {
caretColor: theme.palette.blue.main,
backgroundColor: theme.palette.gray.white,
transition: theme.transitions.create(["box-shadow"]),
fieldset: {
display: "none"
},
"&.MuiInputBase-colorSecondary": {
backgroundColor: theme.palette.gray[200]
},
"& input": {
height: "auto"
},
"&.Input-outlined": {
boxShadow: "inset 0 0 0 1px " + theme.palette.gray[500]
},
"&.Mui-focused, &:hover": {
boxShadow: "inset 0 0 0 1.5px " + theme.palette.gray[600]
},
"&.Mui-error": {
boxShadow: "inset 0 0 0 1.5px " + theme.palette.negative.main
},
"&.Mui-disabled": {
backgroundColor: theme.palette.gray[500]
},
"&.Input-standard": {
backgroundColor: "transparent !important",
borderRadius: 0,
borderBottom: "1px solid " + theme.palette.gray[500],
boxShadow: "none !important",
fontSize: theme.typography.fontSizeXs3,
lineHeight: theme.typography.lineHeightXs3,
marginTop: 0,
"&.Mui-focused": {
borderBottomColor: theme.palette.primary.main
}
},
"& [type=number]": {
appearance: "number"
}
},
_a[theme.breakpoints.down("sm")] = {
"&.Mui-focused": {
boxShadow: "0 0 0 2px " + theme.palette.primary.main
},
"&.Mui-error": {
boxShadow: "0 0 0 2px " + theme.palette.negative.main
}
},
_a);
};
var StyledInput = styles.styled(MuiInput__default["default"])(function (_a) {
var _b;
var _c, _d, _e, _f, _g, _h;
var theme = _a.theme, props = tslib_es6.__rest(_a, ["theme"]);
var size = props.size, $append = props.$append;
return tslib_es6.__assign(tslib_es6.__assign({}, formCommonStyles(theme)), (_b = { padding: (_c = getPadding({ size: size, theme: theme, $append: $append })) === null || _c === void 0 ? void 0 : _c.main, fontSize: (_d = getFontSize({ size: size, theme: theme })) === null || _d === void 0 ? void 0 : _d.main, lineHeight: (_e = getLineHeight({ size: size, theme: theme })) === null || _e === void 0 ? void 0 : _e.main }, _b[theme.breakpoints.down("sm")] = {
padding: (_f = getPadding({ size: size, theme: theme, $append: $append })) === null || _f === void 0 ? void 0 : _f.mobile,
fontSize: (_g = getFontSize({ size: size, theme: theme })) === null || _g === void 0 ? void 0 : _g.mobile,
lineHeight: (_h = getLineHeight({ size: size, theme: theme })) === null || _h === void 0 ? void 0 : _h.mobile
}, _b));
});
var Input = React.forwardRef(function (props, ref) {
var _a;
var _b = props.color, color = _b === void 0 ? "primary" : _b, _c = props.size, size = _c === void 0 ? "md" : _c, endAdornment = props.endAdornment, error = props.error, _d = props.overrideErrorAdornment, overrideErrorAdornment = _d === void 0 ? false : _d, actionButtonProps = props.actionButtonProps, rest = tslib_es6.__rest(props, ["color", "size", "endAdornment", "error", "overrideErrorAdornment", "actionButtonProps"]);
var append = Boolean((_a = endAdornment !== null && endAdornment !== void 0 ? endAdornment : actionButtonProps) !== null && _a !== void 0 ? _a : !overrideErrorAdornment);
return (jsxRuntime.jsx(StyledInput, tslib_es6.__assign({ inputRef: ref, color: color, size: size, "$append": append, className: "Input-size-" + size, endAdornment: jsxRuntime.jsx(components_EndAdornment["default"], { size: size, error: error && !overrideErrorAdornment, endAdornment: !overrideErrorAdornment ? endAdornment : undefined, actionButtonProps: actionButtonProps }, void 0) }, rest), void 0));
});
exports["default"] = Input;
exports.formCommonStyles = formCommonStyles;
exports.getFontSize = getFontSize;
exports.getLineHeight = getLineHeight;
exports.getPadding = getPadding;