react-misc-toolbox
Version:
- [ ] diagramexample | optimize creating from blank slate
598 lines (527 loc) • 22.5 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Button = undefined;
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _reactDeviceDetect = require('react-device-detect');
var _recompose = require('recompose');
var _helperFunctions = require('./helperFunctions');
var _SVGClear = require('./svg/SVGClear');
var _SVGClear2 = _interopRequireDefault(_SVGClear);
var _SVGDone = require('./svg/SVGDone');
var _SVGDone2 = _interopRequireDefault(_SVGDone);
var _SVGAdd = require('./svg/SVGAdd');
var _SVGAdd2 = _interopRequireDefault(_SVGAdd);
var _SVGRemove = require('./svg/SVGRemove');
var _SVGRemove2 = _interopRequireDefault(_SVGRemove);
var _SVGExpandLess = require('./svg/SVGExpandLess');
var _SVGExpandLess2 = _interopRequireDefault(_SVGExpandLess);
var _SVGExpandMore = require('./svg/SVGExpandMore');
var _SVGExpandMore2 = _interopRequireDefault(_SVGExpandMore);
var _defaultStyles = require('./defaultStyles');
var _SVGCancel = require('./svg/SVGCancel');
var _SVGCancel2 = _interopRequireDefault(_SVGCancel);
var _tinycolor = require('tinycolor2');
var _tinycolor2 = _interopRequireDefault(_tinycolor);
var _SVGCross = require('./svg/SVGCross');
var _SVGCross2 = _interopRequireDefault(_SVGCross);
var _SVGFullscreen = require('./svg/SVGFullscreen');
var _SVGFullscreen2 = _interopRequireDefault(_SVGFullscreen);
var _SVGFullscreenExit = require('./svg/SVGFullscreenExit');
var _SVGFullscreenExit2 = _interopRequireDefault(_SVGFullscreenExit);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
// import {getButtonStyles} from './defaultStyles'
var Button = function Button(_ref) {
var _ref$shouldRenderIcon = _ref.shouldRenderIcon,
shouldRenderIcon = _ref$shouldRenderIcon === undefined ? true : _ref$shouldRenderIcon,
_ref$renderIcon = _ref.renderIcon,
renderIcon = _ref$renderIcon === undefined ? null : _ref$renderIcon,
_ref$dataTestId = _ref.dataTestId,
dataTestId = _ref$dataTestId === undefined ? 'button' : _ref$dataTestId,
_ref$type = _ref.type,
type = _ref$type === undefined ? 'default' : _ref$type,
_ref$invert = _ref.invert,
invert = _ref$invert === undefined ? false : _ref$invert,
transition = _ref.transition,
children = _ref.children,
containerRef = _ref.containerRef,
className = _ref.className,
style = _ref.style,
isOn = _ref.isOn,
isDisabled = _ref.disabled,
onClick = _ref.onClick,
_onMouseOver = _ref.onMouseOver,
_onTouchStart = _ref.onTouchStart,
_onTouchEnd = _ref.onTouchEnd,
_onMouseLeave = _ref.onMouseLeave,
_onMouseDown = _ref.onMouseDown,
_onMouseUp = _ref.onMouseUp,
_ref$size = _ref.size,
size = _ref$size === undefined ? 'm' : _ref$size,
_ref$colors = _ref.colors,
colorsProp = _ref$colors === undefined ? _defaultStyles.buttonStyles.neutral : _ref$colors,
transparency = _ref.transparency,
props = (0, _objectWithoutProperties3.default)(_ref, ['shouldRenderIcon', 'renderIcon', 'dataTestId', 'type', 'invert', 'transition', 'children', 'containerRef', 'className', 'style', 'isOn', 'disabled', 'onClick', 'onMouseOver', 'onTouchStart', 'onTouchEnd', 'onMouseLeave', 'onMouseDown', 'onMouseUp', 'size', 'colors', 'transparency']);
var colors = void 0;
if (typeof colorsProp === 'string') {
colors = _defaultStyles.buttonStyles[colorsProp];
} else {
colors = colorsProp;
}
var _useReducer = (0, _react.useReducer)(function (state, newState) {
return (0, _extends3.default)({}, state, newState);
}, {
isMouseOver: false,
isMouseDown: false
}),
_useReducer2 = (0, _slicedToArray3.default)(_useReducer, 2),
state = _useReducer2[0],
setState = _useReducer2[1];
var isMouseOver = state.isMouseOver,
isMouseDown = state.isMouseDown;
var setIsMouseOver = function setIsMouseOver(x) {
return setState({ isMouseOver: x });
};
var setIsMouseDown = function setIsMouseDown(x) {
return setState({ isMouseDown: x });
};
var hasTouch = function hasTouch() {
return 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
};
var getClassName = function getClassName(_ref2) {
var className = _ref2.className,
isOn = _ref2.isOn,
isDisabled = _ref2.isDisabled;
var baseClass = 'button button--' + type;
var baseDisabledClass = 'button--disabled button--' + type + '--disabled';
var baseToggleClass = 'button--' + type + '--' + (isOn ? 'on' : 'off');
if (!isDisabled) {
if (typeof isOn !== 'undefined') {
if (typeof className !== 'undefined') {
return baseClass + ' ' + baseToggleClass + ' ' + className;
} else {
return baseClass + ' ' + baseToggleClass;
}
} else {
if (typeof className !== 'undefined') {
return baseClass + ' ' + className;
} else {
return '' + baseClass;
}
}
} else {
if (typeof className !== 'undefined') {
return baseClass + ' ' + baseDisabledClass + ' ' + className;
} else {
return baseClass + ' ' + baseDisabledClass;
}
}
};
var getButtonProps = function getButtonProps() {
var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _onClick = _ref3.onClick,
className = _ref3.className,
style = _ref3.style,
props = (0, _objectWithoutProperties3.default)(_ref3, ['onClick', 'className', 'style']);
var transitionType = transition ? transition : colors.transition;
var getTransitionStyle = function getTransitionStyle() {
var _colors = colors,
iOn = _colors.on,
iOff = _colors.off,
disabled = _colors.disabled;
var on = void 0,
off = void 0;
if (invert) {
on = iOff;
off = iOn;
} else {
on = iOn;
off = iOff;
}
var color = void 0,
backgroundColor = void 0;
if (!isDisabled) {
var getBackgroundColor = function getBackgroundColor() {
var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 50;
var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'on';
if (on.backgroundColor && off.backgroundColor) {
switch (transitionType) {
case 'text':
case 'mix':
return _tinycolor2.default.mix(on.backgroundColor, off.backgroundColor, amount);
case 'smooth':
if (prefix === 'on') {
return (0, _tinycolor2.default)(on.backgroundColor).darken(amount / 5);
} else {
return (0, _tinycolor2.default)(off.backgroundColor).darken(amount / 5);
}
case 'contrast':
if (prefix === 'on') {
return (0, _tinycolor2.default)(off.backgroundColor).darken(amount / 5);
} else {
return (0, _tinycolor2.default)(on.backgroundColor).darken(amount / 5);
}
default:
break;
}
}
};
var getColor = function getColor() {
var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 50;
var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'on';
switch (transitionType) {
case 'text':
case 'mix':
return _tinycolor2.default.mix(on.color, off.color, amount);
case 'smooth':
if (prefix === 'on') {
return (0, _tinycolor2.default)(on.color).darken(amount / 5);
} else {
return (0, _tinycolor2.default)(off.color).darken((100 - amount) / 5);
}
case 'contrast':
if (prefix === 'on') {
return (0, _tinycolor2.default)(off.color).darken(amount / 5);
} else {
return (0, _tinycolor2.default)(on.color).darken((100 - amount) / 5);
}
default:
break;
}
};
if (isOn) {
if (isMouseDown && isMouseOver) {
color = getColor(50, 'on');
backgroundColor = getBackgroundColor(50, 'on');
} else {
if (isMouseOver && !hasTouch()) {
color = getColor(25, 'on');
backgroundColor = getBackgroundColor(25, 'on');
} else {
color = on.color;
backgroundColor = on.backgroundColor;
}
}
} else {
if (isMouseDown && isMouseOver) {
color = getColor(50, 'off');
backgroundColor = getBackgroundColor(50, 'off');
} else {
if (isMouseOver && !hasTouch()) {
color = getColor(75, 'off');
backgroundColor = getBackgroundColor(75, 'off');
} else {
color = off.color;
backgroundColor = off.backgroundColor;
}
}
}
} else {
color = disabled && disabled.color ? disabled.color : _defaultStyles.buttonStyles.neutral.disabled.color;
backgroundColor = disabled && disabled.backgroundColor ? disabled.backgroundColor : _defaultStyles.buttonStyles.neutral.disabled.backgroundColor;
}
if (transparency) {
backgroundColor = (0, _tinycolor2.default)(backgroundColor).setAlpha(transparency);
}
return {
color: color,
backgroundColor: backgroundColor
};
};
var getSize = function getSize() {
switch (size) {
case 'none':
return {};
case 's':
return { padding: '0.25rem 0.5rem', fontSize: '1.25rem' };
case 'm':
return { padding: '0.5rem 0.75rem', fontSize: '1.5rem' };
case 'l':
return { padding: '0.75rem 1rem', fontSize: '1.75rem' };
default:
return {};
}
};
var getDefaultStyle = function getDefaultStyle() {
return (0, _extends3.default)({
display: 'flex',
fontFamily: 'PT Sans, sans-serif',
alignItems: 'center',
justifyContent: 'center',
transition: 'background 250ms ease-in-out, color 250ms ease-in-out',
cursor: 'pointer'
}, getSize(), getTransitionStyle());
};
if (isDisabled) {
return {
'data-testid': dataTestId + '-disabled',
style: (0, _extends3.default)({}, getDefaultStyle(), style),
className: getClassName({ className: className, isOn: isOn, isDisabled: isDisabled })
};
}
return (0, _extends3.default)({
ref: containerRef,
'data-testid': dataTestId,
style: (0, _extends3.default)({}, getDefaultStyle(), style),
onClick: function onClick(e) {
for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
e.stopPropagation();
!isDisabled && _onClick && _onClick.apply(undefined, [e].concat(args));
//setIsMouseOver(false)
},
onMouseOver: function onMouseOver(e) {
for (var _len2 = arguments.length, args = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
args[_key2 - 1] = arguments[_key2];
}
_onMouseOver && _onMouseOver.apply(undefined, [e].concat(args));
setIsMouseOver(true);
},
onMouseLeave: function onMouseLeave(e) {
for (var _len3 = arguments.length, args = Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
args[_key3 - 1] = arguments[_key3];
}
_onMouseLeave && _onMouseLeave.apply(undefined, [e].concat(args));
setIsMouseOver(false);
setIsMouseDown(false);
},
onMouseDown: function onMouseDown(e) {
for (var _len4 = arguments.length, args = Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
args[_key4 - 1] = arguments[_key4];
}
_onMouseDown && _onMouseDown.apply(undefined, [e].concat(args));
setIsMouseDown(true);
},
onMouseUp: function onMouseUp(e) {
for (var _len5 = arguments.length, args = Array(_len5 > 1 ? _len5 - 1 : 0), _key5 = 1; _key5 < _len5; _key5++) {
args[_key5 - 1] = arguments[_key5];
}
_onMouseUp && _onMouseUp.apply(undefined, [e].concat(args));
setIsMouseDown(false);
},
onTouchStart: function onTouchStart(e) {
for (var _len6 = arguments.length, args = Array(_len6 > 1 ? _len6 - 1 : 0), _key6 = 1; _key6 < _len6; _key6++) {
args[_key6 - 1] = arguments[_key6];
}
_onTouchStart && _onTouchStart.apply(undefined, [e].concat(args));
},
onTouchEnd: function onTouchEnd(e) {
for (var _len7 = arguments.length, args = Array(_len7 > 1 ? _len7 - 1 : 0), _key7 = 1; _key7 < _len7; _key7++) {
args[_key7 - 1] = arguments[_key7];
}
_onTouchEnd && _onTouchEnd.apply(undefined, [e].concat(args));
},
className: getClassName({ className: className, isOn: isOn, isDisabled: isDisabled })
}, props);
};
var renderChildren = function renderChildren(type) {
var icon = void 0;
switch (type) {
case 'caretdown':
icon = isOn ? _react2.default.createElement(_SVGExpandLess2.default, { style: { pointerEvents: 'none' } }) : _react2.default.createElement(_SVGExpandMore2.default, { style: { pointerEvents: 'none' } });
renderIcon = function renderIcon(props) {
return isOn ? _react2.default.createElement(_SVGExpandLess2.default, (0, _extends3.default)({ style: { pointerEvents: 'none' } }, props)) : _react2.default.createElement(_SVGExpandMore2.default, (0, _extends3.default)({ style: { pointerEvents: 'none' } }, props));
};
return typeof children === 'function' ? children({ getButtonProps: getButtonProps, isMouseOver: isMouseOver, icon: icon, renderIcon: renderIcon }) : _react2.default.createElement(
'div',
(0, _extends3.default)({}, getButtonProps({
onClick: onClick,
className: className,
style: (0, _extends3.default)({ justifyContent: 'space-between' }, style)
})),
children ? _react2.default.createElement(
_react.Fragment,
null,
_react2.default.createElement(
'div',
{ style: { display: 'flex', justifyContent: 'space-between' } },
children
),
renderIcon({ style: { pointerEvents: 'none', marginLeft: '0.75rem' } })
) : renderIcon({ style: { pointerEvents: 'none' } })
);
case 'cancel':
icon = _react2.default.createElement(_SVGCross2.default, { viewBox: '0 0 20 20', size: 16 });
renderIcon = function renderIcon(props) {
return _react2.default.createElement(_SVGCross2.default, (0, _extends3.default)({ viewBox: '0 0 20 20', size: 16 }, props));
};
return typeof children === 'function' ? children({ getButtonProps: getButtonProps, isMouseOver: isMouseOver, icon: icon }) : _react2.default.createElement(
'div',
(0, _extends3.default)({}, getButtonProps({
onClick: onClick,
className: className,
style: (0, _extends3.default)({ justifyContent: 'center', alignItems: 'center' }, style)
})),
children ? _react2.default.createElement(
_react.Fragment,
null,
_react2.default.createElement(
'div',
{ style: { display: 'flex', justifyContent: 'space-between' } },
children
),
renderIcon({ style: { pointerEvents: 'none', marginLeft: '0.75rem' } })
) : renderIcon({ style: { pointerEvents: 'none' } })
);
case 'facebook':
renderIcon = function renderIcon(props) {
return _react2.default.createElement('div', props);
};
return typeof children === 'function' ? children({
getButtonProps: getButtonProps,
isMouseOver: isMouseOver,
icon: icon
}) : _react2.default.createElement(
'div',
(0, _extends3.default)({}, getButtonProps({
onClick: onClick,
className: className,
style: (0, _extends3.default)({ justifyContent: 'flex-start', alignItems: 'center' }, style)
})),
children ? _react2.default.createElement(
_react.Fragment,
null,
renderIcon({
style: {
pointerEvents: 'none',
backgroundImage: 'url(\'/static/facebook.svg\')',
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
height: '1.5rem',
marginRight: '1.5rem',
width: '1.5rem',
padding: '0.6rem'
}
}),
_react2.default.createElement(
'div',
{ style: { display: 'flex', justifyContent: 'space-between' } },
children
)
) : renderIcon({
style: {
pointerEvents: 'none',
backgroundImage: 'url(\'/static/facebook.svg\')'
}
})
);
case 'google':
renderIcon = function renderIcon(props) {
return _react2.default.createElement('div', props);
};
return typeof children === 'function' ? children({ getButtonProps: getButtonProps, isMouseOver: isMouseOver, icon: icon }) : _react2.default.createElement(
'div',
(0, _extends3.default)({}, getButtonProps({
onClick: onClick,
className: className,
style: (0, _extends3.default)({ justifyContent: 'flex-start', alignItems: 'center' }, style)
})),
children ? _react2.default.createElement(
_react.Fragment,
null,
renderIcon({
style: {
pointerEvents: 'none',
backgroundImage: 'url(\'/static/google.svg\')',
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
height: '1.5rem',
marginRight: '1.5rem',
width: '1.5rem',
padding: '0.6rem'
}
}),
_react2.default.createElement(
'div',
{ style: { display: 'flex', justifyContent: 'space-between' } },
children
)
) : renderIcon({
style: {
pointerEvents: 'none',
backgroundImage: 'url(\'/static/facebook.svg\')'
}
})
);
case 'mercurydrop':
renderIcon = shouldRenderIcon ? renderIcon ? renderIcon : function (props) {
return isOn ? _react2.default.createElement(_SVGFullscreenExit2.default, (0, _extends3.default)({ viewBox: '0 0 20 20', size: 16 }, props)) : _react2.default.createElement(_SVGFullscreen2.default, (0, _extends3.default)({ viewBox: '0 0 20 20', size: 16 }, props));
} : function () {
return null;
};
return typeof children === 'function' ? children({
getButtonProps: getButtonProps,
renderIcon: renderIcon
}) : _react2.default.createElement(
'div',
(0, _extends3.default)({}, getButtonProps({
onClick: onClick,
className: className,
style: (0, _extends3.default)({ justifyContent: 'center', alignItems: 'center' }, style)
})),
_react2.default.createElement('div', {
style: {
flexGrow: isOn ? 1 : 0.5,
backgroundColor: '#33b',
transition: 'flex-grow 0.5s ease-in-out',
height: '1rem'
},
className: (0, _helperFunctions.flippyClass)(isOn, 'mercurydrop__left', 'collapsed', 'expanded')
}),
renderIcon(),
_react2.default.createElement(
'div',
{
style: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexGrow: isOn ? 0.5 : 1
},
className: (0, _helperFunctions.flippyClass)(isOn, 'mercurydrop__center', 'collapsed', 'expanded')
},
children
),
renderIcon(),
_react2.default.createElement('div', {
style: {
flexGrow: isOn ? 1 : 0.5,
backgroundColor: '#33b',
transition: 'flex-grow 0.5s ease-in-out',
height: '1rem'
},
className: (0, _helperFunctions.flippyClass)(isOn, 'mercurydrop__right', 'collapsed', 'expanded')
})
);
default:
return typeof children === 'function' ? children({ getButtonProps: getButtonProps, isMouseOver: isMouseOver }) : _react2.default.createElement(
'div',
(0, _extends3.default)({}, getButtonProps((0, _extends3.default)({ onClick: onClick, className: className, style: style }, props))),
children
);
}
};
return renderChildren(type);
};
exports.Button = Button;
Button.defaultProps = {
colors: _defaultStyles.buttonStyles.transparentNeutral
};
var enhance = (0, _recompose.compose)();
//onlyUpdateForKeys([`isOn`, `isMouseOver`, `isMouseDown`, `children`, `disabled`])
Button.propTypes = {
type: _propTypes2.default.string,
onClick: _propTypes2.default.func
};
exports.default = enhance(Button);