diff --git a/api/models.py b/api/models.py index cdae5ef4..4ca3e704 100644 --- a/api/models.py +++ b/api/models.py @@ -53,7 +53,7 @@ class Order(models.Model): payment_method = models.CharField(max_length=30, null=False, default="Not specified") premium = models.DecimalField(max_digits=5, decimal_places=2, default=0, null=True, validators=[MinValueValidator(-100), MaxValueValidator(999)]) satoshis = models.PositiveBigIntegerField(null=True, validators=[MinValueValidator(min_satoshis_trade), MaxValueValidator(max_satoshis_trade)]) - explicit = models.BooleanField(default=False, null=False) # pricing method. A explicit amount of sats, or a relative premium above/below market. + is_explicit = models.BooleanField(default=False, null=False) # pricing method. A explicit amount of sats, or a relative premium above/below market. # order participants maker = models.ForeignKey(User, related_name='maker', on_delete=models.SET_NULL, null=True, default=None) # unique = True, a maker can only make one order diff --git a/api/serializers.py b/api/serializers.py index f6ead27d..7fa68069 100644 --- a/api/serializers.py +++ b/api/serializers.py @@ -4,9 +4,9 @@ from .models import Order class OrderSerializer(serializers.ModelSerializer): class Meta: model = Order - fields = ('id','status','created_at','type','currency','amount','payment_method','explicit','premium','satoshis','maker','taker') + fields = ('id','status','created_at','type','currency','amount','payment_method','is_explicit','premium','satoshis','maker','taker') class MakeOrderSerializer(serializers.ModelSerializer): class Meta: model = Order - fields = ('type','currency','amount','payment_method','explicit','premium','satoshis') \ No newline at end of file + fields = ('type','currency','amount','payment_method','is_explicit','premium','satoshis') \ No newline at end of file diff --git a/frontend/src/components/MakerPage.js b/frontend/src/components/MakerPage.js index 0da285b9..2999ec83 100644 --- a/frontend/src/components/MakerPage.js +++ b/frontend/src/components/MakerPage.js @@ -29,7 +29,7 @@ export default class MakerPage extends Component { constructor(props) { super(props); this.state={ - explicit: false, + isExplicit: false, type: 0, currency: this.defaultCurrency, currencyCode: this.defaultCurrencyCode, @@ -74,14 +74,14 @@ export default class MakerPage extends Component { } handleClickRelative=(e)=>{ this.setState({ - explicit: false, + isExplicit: false, satoshis: null, premium: 0, }); } - handleClickExplicit=(e)=>{ + handleClickisExplicit=(e)=>{ this.setState({ - explicit: true, + isExplicit: true, satoshis: 10000, premium: null, }); @@ -97,7 +97,7 @@ export default class MakerPage extends Component { currency: this.state.currency, amount: this.state.amount, payment_method: this.state.payment_method, - explicit: this.state.explicit, + is_explicit: this.state.isExplicit, premium: this.state.premium, satoshis: this.state.satoshis, }), @@ -210,7 +210,7 @@ export default class MakerPage extends Component { control={} label="Explicit" labelPlacement="Top" - onClick={this.handleClickExplicit} + onClick={this.handleClickisExplicit} onShow="false" /> @@ -222,7 +222,7 @@ export default class MakerPage extends Component { {/* conditional shows either Premium % field or Satoshis field based on pricing method */} - { this.state.explicit + { this.state.isExplicit ?
Create a BTC {this.state.type==0 ? "buy":"sell"} order for {this.state.amount} {this.state.currencyCode} - {this.state.explicit ? " of " + this.state.satoshis + " Satoshis" : + {this.state.isExplicit ? " of " + this.state.satoshis + " Satoshis" : (this.state.premium == 0 ? " at market price" : (this.state.premium > 0 ? " at a " + this.state.premium + "% premium":" at a " + -this.state.premium + "% discount") ) diff --git a/frontend/src/components/OrderPage.js b/frontend/src/components/OrderPage.js index 27350587..77dff7ff 100644 --- a/frontend/src/components/OrderPage.js +++ b/frontend/src/components/OrderPage.js @@ -11,7 +11,7 @@ export default class OrderPage extends Component { is_participant: false, amount: 1, paymentMethod:"", - explicit: false, + isExplicit: false, premium: 0, satoshis: null, makerId: "", @@ -33,7 +33,7 @@ export default class OrderPage extends Component { currency: data.currency, amount: data.amount, paymentMethod: data.payment_method, - explicit: data.explicit, + isExplicit: data.is_explicit, //premium: data.premium, // satoshis: satoshis, // makerId: maker, @@ -55,7 +55,7 @@ export default class OrderPage extends Component {

Currency: {this.state.currencyCode}

Amount: {this.state.amount}

Payment method: {this.state.paymentMethod}

-

Pricing method is explicit: {this.state.explicit.toString()}

+

Pricing method is explicit: {this.state.isExplicit.toString()}

{/*

Premium: {this.state.premium}

Maker: {this.makerId}

*/}
diff --git a/frontend/static/frontend/main.js b/frontend/static/frontend/main.js index d02f9fa4..9f34e80b 100644 --- a/frontend/static/frontend/main.js +++ b/frontend/static/frontend/main.js @@ -1,2 +1,2 @@ /*! For license information please see main.js.LICENSE.txt */ -(()=>{var __webpack_modules__={"./node_modules/@material-ui/core/esm/Button/Button.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "styles": () => (/* binding */ styles),\n/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_esm_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/esm/objectWithoutProperties */ "./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js");\n/* harmony import */ var _babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/esm/extends */ "./node_modules/@babel/runtime/helpers/esm/extends.js");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! clsx */ "./node_modules/clsx/dist/clsx.m.js");\n/* harmony import */ var _styles_withStyles__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../styles/withStyles */ "./node_modules/@material-ui/core/esm/styles/withStyles.js");\n/* harmony import */ var _styles_colorManipulator__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../styles/colorManipulator */ "./node_modules/@material-ui/core/esm/styles/colorManipulator.js");\n/* harmony import */ var _ButtonBase__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../ButtonBase */ "./node_modules/@material-ui/core/esm/ButtonBase/ButtonBase.js");\n/* harmony import */ var _utils_capitalize__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../utils/capitalize */ "./node_modules/@material-ui/core/esm/utils/capitalize.js");\n\n\n\n\n\n\n\n\n\nvar styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__["default"])({}, theme.typography.button, {\n boxSizing: \'border-box\',\n minWidth: 64,\n padding: \'6px 16px\',\n borderRadius: theme.shape.borderRadius,\n color: theme.palette.text.primary,\n transition: theme.transitions.create([\'background-color\', \'box-shadow\', \'border\'], {\n duration: theme.transitions.duration.short\n }),\n \'&:hover\': {\n textDecoration: \'none\',\n backgroundColor: (0,_styles_colorManipulator__WEBPACK_IMPORTED_MODULE_4__.alpha)(theme.palette.text.primary, theme.palette.action.hoverOpacity),\n // Reset on touch devices, it doesn\'t add specificity\n \'@media (hover: none)\': {\n backgroundColor: \'transparent\'\n },\n \'&$disabled\': {\n backgroundColor: \'transparent\'\n }\n },\n \'&$disabled\': {\n color: theme.palette.action.disabled\n }\n }),\n\n /* Styles applied to the span element that wraps the children. */\n label: {\n width: \'100%\',\n // Ensure the correct width for iOS Safari\n display: \'inherit\',\n alignItems: \'inherit\',\n justifyContent: \'inherit\'\n },\n\n /* Styles applied to the root element if `variant="text"`. */\n text: {\n padding: \'6px 8px\'\n },\n\n /* Styles applied to the root element if `variant="text"` and `color="primary"`. */\n textPrimary: {\n color: theme.palette.primary.main,\n \'&:hover\': {\n backgroundColor: (0,_styles_colorManipulator__WEBPACK_IMPORTED_MODULE_4__.alpha)(theme.palette.primary.main, theme.palette.action.hoverOpacity),\n // Reset on touch devices, it doesn\'t add specificity\n \'@media (hover: none)\': {\n backgroundColor: \'transparent\'\n }\n }\n },\n\n /* Styles applied to the root element if `variant="text"` and `color="secondary"`. */\n textSecondary: {\n color: theme.palette.secondary.main,\n \'&:hover\': {\n backgroundColor: (0,_styles_colorManipulator__WEBPACK_IMPORTED_MODULE_4__.alpha)(theme.palette.secondary.main, theme.palette.action.hoverOpacity),\n // Reset on touch devices, it doesn\'t add specificity\n \'@media (hover: none)\': {\n backgroundColor: \'transparent\'\n }\n }\n },\n\n /* Styles applied to the root element if `variant="outlined"`. */\n outlined: {\n padding: \'5px 15px\',\n border: "1px solid ".concat(theme.palette.type === \'light\' ? \'rgba(0, 0, 0, 0.23)\' : \'rgba(255, 255, 255, 0.23)\'),\n \'&$disabled\': {\n border: "1px solid ".concat(theme.palette.action.disabledBackground)\n }\n },\n\n /* Styles applied to the root element if `variant="outlined"` and `color="primary"`. */\n outlinedPrimary: {\n color: theme.palette.primary.main,\n border: "1px solid ".concat((0,_styles_colorManipulator__WEBPACK_IMPORTED_MODULE_4__.alpha)(theme.palette.primary.main, 0.5)),\n \'&:hover\': {\n border: "1px solid ".concat(theme.palette.primary.main),\n backgroundColor: (0,_styles_colorManipulator__WEBPACK_IMPORTED_MODULE_4__.alpha)(theme.palette.primary.main, theme.palette.action.hoverOpacity),\n // Reset on touch devices, it doesn\'t add specificity\n \'@media (hover: none)\': {\n backgroundColor: \'transparent\'\n }\n }\n },\n\n /* Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */\n outlinedSecondary: {\n color: theme.palette.secondary.main,\n border: "1px solid ".concat((0,_styles_colorManipulator__WEBPACK_IMPORTED_MODULE_4__.alpha)(theme.palette.secondary.main, 0.5)),\n \'&:hover\': {\n border: "1px solid ".concat(theme.palette.secondary.main),\n backgroundColor: (0,_styles_colorManipulator__WEBPACK_IMPORTED_MODULE_4__.alpha)(theme.palette.secondary.main, theme.palette.action.hoverOpacity),\n // Reset on touch devices, it doesn\'t add specificity\n \'@media (hover: none)\': {\n backgroundColor: \'transparent\'\n }\n },\n \'&$disabled\': {\n border: "1px solid ".concat(theme.palette.action.disabled)\n }\n },\n\n /* Styles applied to the root element if `variant="contained"`. */\n contained: {\n color: theme.palette.getContrastText(theme.palette.grey[300]),\n backgroundColor: theme.palette.grey[300],\n boxShadow: theme.shadows[2],\n \'&:hover\': {\n backgroundColor: theme.palette.grey.A100,\n boxShadow: theme.shadows[4],\n // Reset on touch devices, it doesn\'t add specificity\n \'@media (hover: none)\': {\n boxShadow: theme.shadows[2],\n backgroundColor: theme.palette.grey[300]\n },\n \'&$disabled\': {\n backgroundColor: theme.palette.action.disabledBackground\n }\n },\n \'&$focusVisible\': {\n boxShadow: theme.shadows[6]\n },\n \'&:active\': {\n boxShadow: theme.shadows[8]\n },\n \'&$disabled\': {\n color: theme.palette.action.disabled,\n boxShadow: theme.shadows[0],\n backgroundColor: theme.palette.action.disabledBackground\n }\n },\n\n /* Styles applied to the root element if `variant="contained"` and `color="primary"`. */\n containedPrimary: {\n color: theme.palette.primary.contrastText,\n backgroundColor: theme.palette.primary.main,\n \'&:hover\': {\n backgroundColor: theme.palette.primary.dark,\n // Reset on touch devices, it doesn\'t add specificity\n \'@media (hover: none)\': {\n backgroundColor: theme.palette.primary.main\n }\n }\n },\n\n /* Styles applied to the root element if `variant="contained"` and `color="secondary"`. */\n containedSecondary: {\n color: theme.palette.secondary.contrastText,\n backgroundColor: theme.palette.secondary.main,\n \'&:hover\': {\n backgroundColor: theme.palette.secondary.dark,\n // Reset on touch devices, it doesn\'t add specificity\n \'@media (hover: none)\': {\n backgroundColor: theme.palette.secondary.main\n }\n }\n },\n\n /* Styles applied to the root element if `disableElevation={true}`. */\n disableElevation: {\n boxShadow: \'none\',\n \'&:hover\': {\n boxShadow: \'none\'\n },\n \'&$focusVisible\': {\n boxShadow: \'none\'\n },\n \'&:active\': {\n boxShadow: \'none\'\n },\n \'&$disabled\': {\n boxShadow: \'none\'\n }\n },\n\n /* Pseudo-class applied to the ButtonBase root element if the button is keyboard focused. */\n focusVisible: {},\n\n /* Pseudo-class applied to the root element if `disabled={true}`. */\n disabled: {},\n\n /* Styles applied to the root element if `color="inherit"`. */\n colorInherit: {\n color: \'inherit\',\n borderColor: \'currentColor\'\n },\n\n /* Styles applied to the root element if `size="small"` and `variant="text"`. */\n textSizeSmall: {\n padding: \'4px 5px\',\n fontSize: theme.typography.pxToRem(13)\n },\n\n /* Styles applied to the root element if `size="large"` and `variant="text"`. */\n textSizeLarge: {\n padding: \'8px 11px\',\n fontSize: theme.typography.pxToRem(15)\n },\n\n /* Styles applied to the root element if `size="small"` and `variant="outlined"`. */\n outlinedSizeSmall: {\n padding: \'3px 9px\',\n fontSize: theme.typography.pxToRem(13)\n },\n\n /* Styles applied to the root element if `size="large"` and `variant="outlined"`. */\n outlinedSizeLarge: {\n padding: \'7px 21px\',\n fontSize: theme.typography.pxToRem(15)\n },\n\n /* Styles applied to the root element if `size="small"` and `variant="contained"`. */\n containedSizeSmall: {\n padding: \'4px 10px\',\n fontSize: theme.typography.pxToRem(13)\n },\n\n /* Styles applied to the root element if `size="large"` and `variant="contained"`. */\n containedSizeLarge: {\n padding: \'8px 22px\',\n fontSize: theme.typography.pxToRem(15)\n },\n\n /* Styles applied to the root element if `size="small"`. */\n sizeSmall: {},\n\n /* Styles applied to the root element if `size="large"`. */\n sizeLarge: {},\n\n /* Styles applied to the root element if `fullWidth={true}`. */\n fullWidth: {\n width: \'100%\'\n },\n\n /* Styles applied to the startIcon element if supplied. */\n startIcon: {\n display: \'inherit\',\n marginRight: 8,\n marginLeft: -4,\n \'&$iconSizeSmall\': {\n marginLeft: -2\n }\n },\n\n /* Styles applied to the endIcon element if supplied. */\n endIcon: {\n display: \'inherit\',\n marginRight: -4,\n marginLeft: 8,\n \'&$iconSizeSmall\': {\n marginRight: -2\n }\n },\n\n /* Styles applied to the icon element if supplied and `size="small"`. */\n iconSizeSmall: {\n \'& > *:first-child\': {\n fontSize: 18\n }\n },\n\n /* Styles applied to the icon element if supplied and `size="medium"`. */\n iconSizeMedium: {\n \'& > *:first-child\': {\n fontSize: 20\n }\n },\n\n /* Styles applied to the icon element if supplied and `size="large"`. */\n iconSizeLarge: {\n \'& > *:first-child\': {\n fontSize: 22\n }\n }\n };\n};\nvar Button = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.forwardRef(function Button(props, ref) {\n var children = props.children,\n classes = props.classes,\n className = props.className,\n _props$color = props.color,\n color = _props$color === void 0 ? \'default\' : _props$color,\n _props$component = props.component,\n component = _props$component === void 0 ? \'button\' : _props$component,\n _props$disabled = props.disabled,\n disabled = _props$disabled === void 0 ? false : _props$disabled,\n _props$disableElevati = props.disableElevation,\n disableElevation = _props$disableElevati === void 0 ? false : _props$disableElevati,\n _props$disableFocusRi = props.disableFocusRipple,\n disableFocusRipple = _props$disableFocusRi === void 0 ? false : _props$disableFocusRi,\n endIconProp = props.endIcon,\n focusVisibleClassName = props.focusVisibleClassName,\n _props$fullWidth = props.fullWidth,\n fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,\n _props$size = props.size,\n size = _props$size === void 0 ? \'medium\' : _props$size,\n startIconProp = props.startIcon,\n _props$type = props.type,\n type = _props$type === void 0 ? \'button\' : _props$type,\n _props$variant = props.variant,\n variant = _props$variant === void 0 ? \'text\' : _props$variant,\n other = (0,_babel_runtime_helpers_esm_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_0__["default"])(props, ["children", "classes", "className", "color", "component", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"]);\n\n var startIcon = startIconProp && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement("span", {\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_3__["default"])(classes.startIcon, classes["iconSize".concat((0,_utils_capitalize__WEBPACK_IMPORTED_MODULE_5__["default"])(size))])\n }, startIconProp);\n var endIcon = endIconProp && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement("span", {\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_3__["default"])(classes.endIcon, classes["iconSize".concat((0,_utils_capitalize__WEBPACK_IMPORTED_MODULE_5__["default"])(size))])\n }, endIconProp);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(_ButtonBase__WEBPACK_IMPORTED_MODULE_6__["default"], (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__["default"])({\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_3__["default"])(classes.root, classes[variant], className, color === \'inherit\' ? classes.colorInherit : color !== \'default\' && classes["".concat(variant).concat((0,_utils_capitalize__WEBPACK_IMPORTED_MODULE_5__["default"])(color))], size !== \'medium\' && [classes["".concat(variant, "Size").concat((0,_utils_capitalize__WEBPACK_IMPORTED_MODULE_5__["default"])(size))], classes["size".concat((0,_utils_capitalize__WEBPACK_IMPORTED_MODULE_5__["default"])(size))]], disableElevation && classes.disableElevation, disabled && classes.disabled, fullWidth && classes.fullWidth),\n component: component,\n disabled: disabled,\n focusRipple: !disableFocusRipple,\n focusVisibleClassName: (0,clsx__WEBPACK_IMPORTED_MODULE_3__["default"])(classes.focusVisible, focusVisibleClassName),\n ref: ref,\n type: type\n }, other), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement("span", {\n className: classes.label\n }, startIcon, children, endIcon));\n});\n false ? 0 : void 0;\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,_styles_withStyles__WEBPACK_IMPORTED_MODULE_7__["default"])(styles, {\n name: \'MuiButton\'\n})(Button));\n\n//# sourceURL=webpack://frontend/./node_modules/@material-ui/core/esm/Button/Button.js?')},"./node_modules/@material-ui/core/esm/ButtonBase/ButtonBase.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "styles": () => (/* binding */ styles),\n/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/esm/extends */ "./node_modules/@babel/runtime/helpers/esm/extends.js");\n/* harmony import */ var _babel_runtime_helpers_esm_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/esm/objectWithoutProperties */ "./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-dom */ "./node_modules/react-dom/index.js");\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! clsx */ "./node_modules/clsx/dist/clsx.m.js");\n/* harmony import */ var _utils_useForkRef__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../utils/useForkRef */ "./node_modules/@material-ui/core/esm/utils/useForkRef.js");\n/* harmony import */ var _utils_useEventCallback__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../utils/useEventCallback */ "./node_modules/@material-ui/core/esm/utils/useEventCallback.js");\n/* harmony import */ var _styles_withStyles__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../styles/withStyles */ "./node_modules/@material-ui/core/esm/styles/withStyles.js");\n/* harmony import */ var _utils_useIsFocusVisible__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../utils/useIsFocusVisible */ "./node_modules/@material-ui/core/esm/utils/useIsFocusVisible.js");\n/* harmony import */ var _TouchRipple__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./TouchRipple */ "./node_modules/@material-ui/core/esm/ButtonBase/TouchRipple.js");\n\n\n\n\n\n\n\n\n\n\n\n\n\nvar styles = {\n /* Styles applied to the root element. */\n root: {\n display: \'inline-flex\',\n alignItems: \'center\',\n justifyContent: \'center\',\n position: \'relative\',\n WebkitTapHighlightColor: \'transparent\',\n backgroundColor: \'transparent\',\n // Reset default value\n // We disable the focus ring for mouse, touch and keyboard users.\n outline: 0,\n border: 0,\n margin: 0,\n // Remove the margin in Safari\n borderRadius: 0,\n padding: 0,\n // Remove the padding in Firefox\n cursor: \'pointer\',\n userSelect: \'none\',\n verticalAlign: \'middle\',\n \'-moz-appearance\': \'none\',\n // Reset\n \'-webkit-appearance\': \'none\',\n // Reset\n textDecoration: \'none\',\n // So we take precedent over the style of a native element.\n color: \'inherit\',\n \'&::-moz-focus-inner\': {\n borderStyle: \'none\' // Remove Firefox dotted outline.\n\n },\n \'&$disabled\': {\n pointerEvents: \'none\',\n // Disable link interactions\n cursor: \'default\'\n },\n \'@media print\': {\n colorAdjust: \'exact\'\n }\n },\n\n /* Pseudo-class applied to the root element if `disabled={true}`. */\n disabled: {},\n\n /* Pseudo-class applied to the root element if keyboard focused. */\n focusVisible: {}\n};\n/**\n * `ButtonBase` contains as few styles as possible.\n * It aims to be a simple building block for creating a button.\n * It contains a load of style reset and some focus/ripple logic.\n */\n\nvar ButtonBase = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.forwardRef(function ButtonBase(props, ref) {\n var action = props.action,\n buttonRefProp = props.buttonRef,\n _props$centerRipple = props.centerRipple,\n centerRipple = _props$centerRipple === void 0 ? false : _props$centerRipple,\n children = props.children,\n classes = props.classes,\n className = props.className,\n _props$component = props.component,\n component = _props$component === void 0 ? \'button\' : _props$component,\n _props$disabled = props.disabled,\n disabled = _props$disabled === void 0 ? false : _props$disabled,\n _props$disableRipple = props.disableRipple,\n disableRipple = _props$disableRipple === void 0 ? false : _props$disableRipple,\n _props$disableTouchRi = props.disableTouchRipple,\n disableTouchRipple = _props$disableTouchRi === void 0 ? false : _props$disableTouchRi,\n _props$focusRipple = props.focusRipple,\n focusRipple = _props$focusRipple === void 0 ? false : _props$focusRipple,\n focusVisibleClassName = props.focusVisibleClassName,\n onBlur = props.onBlur,\n onClick = props.onClick,\n onFocus = props.onFocus,\n onFocusVisible = props.onFocusVisible,\n onKeyDown = props.onKeyDown,\n onKeyUp = props.onKeyUp,\n onMouseDown = props.onMouseDown,\n onMouseLeave = props.onMouseLeave,\n onMouseUp = props.onMouseUp,\n onTouchEnd = props.onTouchEnd,\n onTouchMove = props.onTouchMove,\n onTouchStart = props.onTouchStart,\n onDragLeave = props.onDragLeave,\n _props$tabIndex = props.tabIndex,\n tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,\n TouchRippleProps = props.TouchRippleProps,\n _props$type = props.type,\n type = _props$type === void 0 ? \'button\' : _props$type,\n other = (0,_babel_runtime_helpers_esm_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1__["default"])(props, ["action", "buttonRef", "centerRipple", "children", "classes", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "onBlur", "onClick", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "onDragLeave", "tabIndex", "TouchRippleProps", "type"]);\n\n var buttonRef = react__WEBPACK_IMPORTED_MODULE_2__.useRef(null);\n\n function getButtonNode() {\n // #StrictMode ready\n return react_dom__WEBPACK_IMPORTED_MODULE_3__.findDOMNode(buttonRef.current);\n }\n\n var rippleRef = react__WEBPACK_IMPORTED_MODULE_2__.useRef(null);\n\n var _React$useState = react__WEBPACK_IMPORTED_MODULE_2__.useState(false),\n focusVisible = _React$useState[0],\n setFocusVisible = _React$useState[1];\n\n if (disabled && focusVisible) {\n setFocusVisible(false);\n }\n\n var _useIsFocusVisible = (0,_utils_useIsFocusVisible__WEBPACK_IMPORTED_MODULE_5__["default"])(),\n isFocusVisible = _useIsFocusVisible.isFocusVisible,\n onBlurVisible = _useIsFocusVisible.onBlurVisible,\n focusVisibleRef = _useIsFocusVisible.ref;\n\n react__WEBPACK_IMPORTED_MODULE_2__.useImperativeHandle(action, function () {\n return {\n focusVisible: function focusVisible() {\n setFocusVisible(true);\n buttonRef.current.focus();\n }\n };\n }, []);\n react__WEBPACK_IMPORTED_MODULE_2__.useEffect(function () {\n if (focusVisible && focusRipple && !disableRipple) {\n rippleRef.current.pulsate();\n }\n }, [disableRipple, focusRipple, focusVisible]);\n\n function useRippleHandler(rippleAction, eventCallback) {\n var skipRippleAction = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : disableTouchRipple;\n return (0,_utils_useEventCallback__WEBPACK_IMPORTED_MODULE_6__["default"])(function (event) {\n if (eventCallback) {\n eventCallback(event);\n }\n\n var ignore = skipRippleAction;\n\n if (!ignore && rippleRef.current) {\n rippleRef.current[rippleAction](event);\n }\n\n return true;\n });\n }\n\n var handleMouseDown = useRippleHandler(\'start\', onMouseDown);\n var handleDragLeave = useRippleHandler(\'stop\', onDragLeave);\n var handleMouseUp = useRippleHandler(\'stop\', onMouseUp);\n var handleMouseLeave = useRippleHandler(\'stop\', function (event) {\n if (focusVisible) {\n event.preventDefault();\n }\n\n if (onMouseLeave) {\n onMouseLeave(event);\n }\n });\n var handleTouchStart = useRippleHandler(\'start\', onTouchStart);\n var handleTouchEnd = useRippleHandler(\'stop\', onTouchEnd);\n var handleTouchMove = useRippleHandler(\'stop\', onTouchMove);\n var handleBlur = useRippleHandler(\'stop\', function (event) {\n if (focusVisible) {\n onBlurVisible(event);\n setFocusVisible(false);\n }\n\n if (onBlur) {\n onBlur(event);\n }\n }, false);\n var handleFocus = (0,_utils_useEventCallback__WEBPACK_IMPORTED_MODULE_6__["default"])(function (event) {\n // Fix for https://github.com/facebook/react/issues/7769\n if (!buttonRef.current) {\n buttonRef.current = event.currentTarget;\n }\n\n if (isFocusVisible(event)) {\n setFocusVisible(true);\n\n if (onFocusVisible) {\n onFocusVisible(event);\n }\n }\n\n if (onFocus) {\n onFocus(event);\n }\n });\n\n var isNonNativeButton = function isNonNativeButton() {\n var button = getButtonNode();\n return component && component !== \'button\' && !(button.tagName === \'A\' && button.href);\n };\n /**\n * IE 11 shim for https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat\n */\n\n\n var keydownRef = react__WEBPACK_IMPORTED_MODULE_2__.useRef(false);\n var handleKeyDown = (0,_utils_useEventCallback__WEBPACK_IMPORTED_MODULE_6__["default"])(function (event) {\n // Check if key is already down to avoid repeats being counted as multiple activations\n if (focusRipple && !keydownRef.current && focusVisible && rippleRef.current && event.key === \' \') {\n keydownRef.current = true;\n event.persist();\n rippleRef.current.stop(event, function () {\n rippleRef.current.start(event);\n });\n }\n\n if (event.target === event.currentTarget && isNonNativeButton() && event.key === \' \') {\n event.preventDefault();\n }\n\n if (onKeyDown) {\n onKeyDown(event);\n } // Keyboard accessibility for non interactive elements\n\n\n if (event.target === event.currentTarget && isNonNativeButton() && event.key === \'Enter\' && !disabled) {\n event.preventDefault();\n\n if (onClick) {\n onClick(event);\n }\n }\n });\n var handleKeyUp = (0,_utils_useEventCallback__WEBPACK_IMPORTED_MODULE_6__["default"])(function (event) {\n // calling preventDefault in keyUp on a