@dojima-ui/button
Version:
button used for dojima webpages.
170 lines (156 loc) • 8.17 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var jsxRuntime = require('react/jsx-runtime');
var material = require('@mui/material');
var Button = require('@mui/material/Button');
var styles = require('@mui/styles');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function ButtonGrid(props) {
var justifyContent = props.justifyContent, xs = props.xs, lg = props.lg, md = props.md, xl = props.xl, GridStyles = props.GridStyles, alignContent = props.alignContent, alignItems = props.alignItems, children = props.children;
return (jsxRuntime.jsx(material.Grid, __assign({ container: true, item: true, justifyContent: justifyContent, xs: xs !== null && xs !== void 0 ? xs : false, md: md !== null && md !== void 0 ? md : false, lg: lg !== null && lg !== void 0 ? lg : false, xl: xl !== null && xl !== void 0 ? xl : false, className: GridStyles, alignContent: alignContent, alignItems: alignItems }, { children: children }), void 0));
}
var MuiStyles$2 = styles.makeStyles(function () { return ({
button: {
'&.MuiButton-root': {
width: function (_a) {
var width = _a.width;
return width !== null && width !== void 0 ? width : '18.75rem';
},
height: function (_a) {
var height = _a.height;
return height !== null && height !== void 0 ? height : '3.5rem';
},
padding: '0rem',
border: '0.25rem solid transparent',
borderRadius: '1rem',
boxShadow: '0.375rem 0.375rem 0.75rem 0rem rgba(0, 0, 0, 0.16), -0.375rem -0.375rem 0.75rem 0rem rgba(255, 255, 255, 0.04)',
backgroundImage: 'linear-gradient(to bottom, #ffa651, #e17813), linear-gradient(99deg, #2e3234 10%, #212426 92%)',
backgroundOrigin: 'border-box',
backgroundClip: 'content-box, border-box',
color: '#fff',
'&:focus': {
color: '#ffffff60',
backgroundImage: 'linear-gradient(to bottom, #ffa651, #e17813), linear-gradient(96deg, #3b4042 5%, #1d1f21 93%)',
boxShadow: '0.375rem 0.375rem 0.75rem 0rem rgba(0, 0, 0, 0.16), -0.375rem -0.375rem 0.75rem 0rem rgba(255, 255, 255, 0.04), inset 0rem 0.875rem 0.875rem 0rem rgba(0, 0, 0, 0.32)',
},
'&.Mui-disabled': {
boxShadow: 'none',
opacity: 0.5,
}
}
}
}); });
function DojimaButton(props) {
var text = props.text, onClick = props.onClick, disable = props.disable, fullWidth = props.fullWidth, buttonStyles = props.buttonStyles;
var classes = MuiStyles$2(__assign({}, props));
return (jsxRuntime.jsx(Button__default["default"], __assign({ fullWidth: fullWidth, style: buttonStyles, className: classes.button, onClick: onClick, disabled: disable }, { children: text }), void 0));
}
var MuiStyles$1 = styles.makeStyles(function () { return ({
button: {
'&.MuiButton-root': {
width: function (_a) {
var width = _a.width;
return width !== null && width !== void 0 ? width : '6rem';
},
height: function (_a) {
var height = _a.height;
return height !== null && height !== void 0 ? height : '2.5rem';
},
padding: '0rem',
border: '1px solid #4b4e4f',
borderRadius: '0.5rem',
textTransform: 'none',
margin: function (_a) {
var _b;
var margin = _a.margin;
return (_b = (margin)) !== null && _b !== void 0 ? _b : '20px 20px 0px 0px';
},
backgroundColor: function (_a) {
var bgColor = _a.bgColor;
return bgColor !== null && bgColor !== void 0 ? bgColor : 'rgba(93, 93, 93, 0.1)';
},
color: function (_a) {
var color = _a.color;
return color !== null && color !== void 0 ? color : 'black';
},
'&.Mui-disabled': {
boxShadow: 'none',
opacity: 0.5,
},
"&:hover": {
backgroundColor: function (_a) {
var hoverColor = _a.hoverColor;
return hoverColor !== null && hoverColor !== void 0 ? hoverColor : '#4b4e4f';
},
},
}
}
}); });
function FlatButton(props) {
var text = props.text, onClick = props.onClick, disable = props.disable, fullWidth = props.fullWidth, buttonStyles = props.buttonStyles;
var classes = MuiStyles$1(__assign({}, props));
return (jsxRuntime.jsx(Button__default["default"], __assign({ fullWidth: fullWidth, style: buttonStyles, className: classes.button, onClick: onClick, disabled: disable }, { children: text }), void 0));
}
var MuiStyles = styles.makeStyles(function () { return ({
button: {
'&.MuiButton-root': {
width: function (_a) {
var width = _a.width;
return width !== null && width !== void 0 ? width : '11.75rem';
},
height: function (_a) {
var height = _a.height;
return height !== null && height !== void 0 ? height : '3.5rem';
},
padding: '0rem',
textTransform: 'none',
border: '0.125rem solid rgba(0,0,0,0.08)',
borderRadius: '1rem',
boxShadow: '0.375rem 0.375rem 0.75rem 0rem rgba(0, 0, 0, 0.16), -0.375rem -0.375rem 0.75rem 0rem rgba(255, 255, 255, 0.04)',
backgroundImage: 'linear-gradient(100deg, rgba(0, 0, 0, 0) 3%, #212426 96%), linear-gradient(to bottom, #212426, #212426)',
backgroundOrigin: 'border-box',
backgroundClip: 'content-box, border-box',
color: function (_a) {
var color = _a.color;
return color !== null && color !== void 0 ? color : '#e1aa75';
},
'&.Mui-disabled': {
boxShadow: 'none',
opacity: 0.5,
}
}
}
}); });
function NeuButton(props) {
var text = props.text, onClick = props.onClick, disable = props.disable, fullWidth = props.fullWidth, buttonStyles = props.buttonStyles;
var classes = MuiStyles(__assign({}, props));
return (jsxRuntime.jsx(Button__default["default"], __assign({ fullWidth: fullWidth, style: buttonStyles, className: classes.button, onClick: onClick, disabled: disable }, { children: text }), void 0));
}
exports.ButtonGrid = ButtonGrid;
exports.FlatButton = FlatButton;
exports.NeuButton = NeuButton;
exports["default"] = DojimaButton;
//# sourceMappingURL=index.js.map