@stokr/components-library
Version:
STOKR - Components Library
251 lines (248 loc) • 11.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.Button = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _ui = require("components/ui");
var sc = _interopRequireWildcard(require("constants/style"));
var _utils = require("utils");
const _excluded = ["children", "text", "onClick", "size", "isShare"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /* */
const buttonTextLoadingCss = (0, _styledComponents.css)(["visibility:hidden;"]);
const buttonTextHelper = _ref => {
let {
loading
} = _ref;
return loading && buttonTextLoadingCss;
};
const ButtonText = _styledComponents.default.span.withConfig({
displayName: "Button-stoDetails__ButtonText",
componentId: "sc-1pstwqz-0"
})(["line-height:", ";margin:0 auto;", ";svg,path{fill:", ";&:hover{fill:", ";}}"], _ref2 => {
let {
isShare
} = _ref2;
return isShare ? '0px' : '1em';
}, buttonTextHelper, _ref3 => {
let {
isShare
} = _ref3;
return isShare && '#cacaca';
}, _ref4 => {
let {
isShare
} = _ref4;
return isShare && sc.RED_BASE_HEX;
});
const StyledLoading = _styledComponents.default.div.withConfig({
displayName: "Button-stoDetails__StyledLoading",
componentId: "sc-1pstwqz-1"
})(["position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);"]);
// const ButtonComponent = ({ as, ...rest }) =>
// React.createElement(as, { ...rest })
const ButtonComponent = _styledComponents.default.button.withConfig({
displayName: "Button-stoDetails__ButtonComponent",
componentId: "sc-1pstwqz-2"
})([""]);
class ButtonClass extends _react.PureComponent {
constructor() {
super(...arguments);
_defineProperty(this, "handleClick", e => {
const {
disabled,
onClick
} = this.props;
return !disabled && onClick && onClick(e);
});
}
render() {
const _this$props = this.props,
{
children,
text,
onClick,
size,
isShare
} = _this$props,
rest = _objectWithoutProperties(_this$props, _excluded);
const {
loading
} = this.props;
return /*#__PURE__*/_react.default.createElement(ButtonComponent, _extends({}, rest, {
onClick: this.handleClick
}), /*#__PURE__*/_react.default.createElement(ButtonText, {
isShare: isShare,
loading: loading
}, children || text), loading && /*#__PURE__*/_react.default.createElement(StyledLoading, null, /*#__PURE__*/_react.default.createElement(_ui.Loading, {
size: size === 'xl' && 40
})));
}
}
_defineProperty(ButtonClass, "propTypes", {
children: _propTypes.default.node,
as: _propTypes.default.node,
transparent: _propTypes.default.bool,
noborder: _propTypes.default.bool,
icononly: _propTypes.default.bool,
inverted: _propTypes.default.bool,
isShare: _propTypes.default.bool,
inactive: _propTypes.default.bool
});
_defineProperty(ButtonClass, "defaultProps", {
as: 'button',
transparent: false
});
const baseButtonCss = (0, _styledComponents.css)(["transition:all 0.3s;display:inline-flex;align-items:center;justify-content:center;position:relative;border-radius:25px;font-size:11px;font-weight:bold;letter-spacing:2px;text-transform:uppercase;outline:none;cursor:pointer;white-space:nowrap;border:0;&:hover,&:active{opacity:1;}"]);
const blockButtonCss = (0, _styledComponents.css)([""]);
const importantButtonCss = (0, _styledComponents.css)([""]);
const beautyButtonCss = (0, _styledComponents.css)(["&&,&&:hover{width:auto !important;height:40px !important;padding-left:", "px;padding-right:", "px;box-shadow:0 6px 15px 2px #00000027,0px -5px 30px 2px rgba(255,255,255,0.2);background-color:", ";color:", ";margin:5px;z-index:100;transition:all 0.4s ease-out;", "{padding-left:", "px;padding-right:", "px;}}"], sc.BASE_MARGIN * 4, sc.BASE_MARGIN * 4, sc.WHITE_HEX, sc.BASE_COLOR_HEX, _utils.breakpoint.below('mobile'), sc.BASE_MARGIN * 2, sc.BASE_MARGIN * 2);
const disabledBeautyButtonCss = (0, _styledComponents.css)(["&&,&&:hover{padding-left:", "px;padding-right:", "px;background-color:", ";color:#4a90e2;margin:5px;z-index:100;border:none;cursor:not-allowed;transition:all 0.4s ease-out;&&:before{content:'';position:absolute;height:calc(100% + 10px);width:calc(100% + 10px);left:-5px;top:-5px;z-index:-2;border-radius:25px;border:1px solid #4a90e2;}", "{padding-left:", "px;padding-right:", "px;}}"], sc.BASE_MARGIN * 4, sc.BASE_MARGIN * 4, sc.BLUE_BASE_HEX, _utils.breakpoint.below('mobile'), sc.BASE_MARGIN * 2, sc.BASE_MARGIN * 2);
const disabledButtonCss = (0, _styledComponents.css)(["&&&&{background:transparent;color:#e1e1e1;border:1px solid #e1e1e1;cursor:not-allowed;}"]);
const transparentButtonCss = (0, _styledComponents.css)(["&&&&{background:transparent;border:1px solid ", ";color:", ";&:hover{background:", ";color:#fff;}}"], sc.BLUE_BASE_HEX, sc.BLUE_BASE_HEX, sc.BLUE_BASE_HEX);
const textOnlyButtonCss = (0, _styledComponents.css)(["&&&&{background:transparent;border:none;color:", ";}"], sc.BASE_COLOR_HEX);
const invertedButtonCss = (0, _styledComponents.css)([""]);
const xlSize = (0, _styledComponents.css)(["height:40px;padding-left:", "px;padding-right:", "px;width:100%;font-size:11px;"], sc.BASE_MARGIN * 2, sc.BASE_MARGIN * 2);
const mdSize = (0, _styledComponents.css)(["height:40px;padding-left:", "px;padding-right:", "px;width:192px;font-size:11px;"], sc.BASE_MARGIN * 2, sc.BASE_MARGIN * 2);
const smSize = (0, _styledComponents.css)(["height:32px;width:32px;"]);
const noborderCss = (0, _styledComponents.css)(["&&&&{border:0;}"]);
const inactiveCss = (0, _styledComponents.css)(["opacity:0.3;cursor:initial;&:hover{opacity:0.3;}"]);
const isHeroCss = (0, _styledComponents.css)(["width:222px;"]);
const isLoginMobileCss = (0, _styledComponents.css)(["margin-bottom:20px;width:163.94px;"]);
const isInvisibleCss = (0, _styledComponents.css)(["opacity:0;cursor:unset;&:hover{opacity:0;}"]);
const activeTransparentCss = (0, _styledComponents.css)(["background:", ";color:white;"], sc.RED_BASE_HEX);
const activeHelper = _ref5 => {
let {
active
} = _ref5;
return active && activeTransparentCss;
};
const buttonColor = _ref6 => {
let {
color,
inverted
} = _ref6;
switch (color) {
case 'transparent':
return (0, _styledComponents.css)(["background:transparent;border:1px solid ", ";", ";&:hover{", ";}", ";"], sc.GRAY_BASE_HEX, activeHelper, activeTransparentCss, inverted && (0, _styledComponents.css)(["border:1px solid ", ";"], sc.WHITE_HEX));
case 'white':
return (0, _styledComponents.css)(["background:white;color:", ";"], sc.BLUE_BASE_HEX);
case 'blue':
default:
return (0, _styledComponents.css)(["background:", ";color:white;&:hover{background:", ";}"], sc.BLUE_BASE_HEX, sc.BLUE_BASE_RELEASED_HEX);
}
};
const nobordersButtonHelper = _ref7 => {
let {
noborder
} = _ref7;
return noborder && noborderCss;
};
const buttonSize = _ref8 => {
let {
size,
icononly
} = _ref8;
switch (size) {
case 'xl':
return xlSize;
case 'sm':
return smSize;
case 'md':
return mdSize;
default:
return (0, _styledComponents.css)(["height:40px;padding-left:", "px;padding-right:", "px;", ";"], sc.BASE_MARGIN * 2, sc.BASE_MARGIN * 2, icononly && (0, _styledComponents.css)(["margin:0 auto;width:40px;line-height:0;text-align:center;padding:0;"]));
}
};
const buttonBlock = _ref9 => {
let {
block
} = _ref9;
return block && blockButtonCss;
};
const importantButton = _ref0 => {
let {
important
} = _ref0;
return important && importantButtonCss;
};
const beautyButton = _ref1 => {
let {
beauty
} = _ref1;
return beauty && beautyButtonCss;
};
const disabledBeautyButton = _ref10 => {
let {
disabledBeauty
} = _ref10;
return disabledBeauty && disabledBeautyButtonCss;
};
const disabledButton = _ref11 => {
let {
disabled
} = _ref11;
return disabled && disabledButtonCss;
};
const transparentButton = _ref12 => {
let {
transparent
} = _ref12;
return transparent && transparentButtonCss;
};
const textOnlyButton = _ref13 => {
let {
textOnly
} = _ref13;
return textOnly && textOnlyButtonCss;
};
const invertedButton = _ref14 => {
let {
inverted
} = _ref14;
return inverted && invertedButtonCss;
};
const inativeButton = _ref15 => {
let {
inactive
} = _ref15;
return inactive && inactiveCss;
};
const isHeroButton = _ref16 => {
let {
isHero
} = _ref16;
return isHero && isHeroCss;
};
const isLoginMobileButton = _ref17 => {
let {
isLoginMobile
} = _ref17;
return isLoginMobile && isLoginMobileCss;
};
const isInvisibleButton = _ref18 => {
let {
isInvisible
} = _ref18;
return isInvisible && isInvisibleCss;
};
const Button = exports.Button = (0, _styledComponents.default)(ButtonClass).withConfig({
displayName: "Button-stoDetails__Button",
componentId: "sc-1pstwqz-3"
})(["", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], baseButtonCss, buttonColor, buttonSize, buttonBlock, importantButton, disabledButton, transparentButton, textOnlyButton, invertedButton, nobordersButtonHelper, inativeButton, isHeroButton, isLoginMobileButton, isInvisibleButton, beautyButton, disabledBeautyButton, _ref19 => {
let {
fillRed
} = _ref19;
return fillRed && (0, _styledComponents.css)(["svg{fill:", ";}&:hover{svg{fill:", ";}}"], sc.RED_BASE_HEX, sc.WHITE_HEX);
});
Button.propTypes = {};
var _default = exports.default = Button;