nice-ui
Version:
React design system, components, and utilities
83 lines (82 loc) • 2.62 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Ripple = void 0;
const react_1 = require("react");
const nano_theme_1 = require("nano-theme");
const noop = () => { };
const rippleClass = (0, nano_theme_1.rule)({
bdrad: '50%',
h: '100px',
w: '100px',
pos: 'absolute',
transform: 'scale(0)',
op: 1,
pointerEvents: 'none',
'@keyframes decor-ripple': {
'100%': {
transform: 'scale(12)',
op: 0,
},
},
});
class Ripple extends react_1.Component {
constructor() {
super(...arguments);
this.el = null;
this.elRipple = null;
this.ref = (originalRef) => (el) => {
this.el = el;
(originalRef || noop)(el);
};
this.refRipple = (el) => {
this.elRipple = el;
};
this.onMouseDown = (originalMouseDown) => (event) => {
if (this.props.disabled)
return;
if (!this.elRipple || !this.el)
return;
const { left, top } = this.el.getBoundingClientRect();
const posX = left + window.scrollX;
const posY = top + window.scrollY;
const elX = event.pageX - posX;
const elY = event.pageY - posY;
const style = this.elRipple.style;
style.removeProperty('animation');
style.top = elY - 50 + 'px';
style.left = elX - 50 + 'px';
setTimeout(() => {
style.setProperty('animation', `decor-ripple ${this.props.ms}ms linear`);
}, 35);
(originalMouseDown || noop)(event);
};
}
render() {
const { children, color } = this.props;
const element = react_1.Children.only(children);
const ripple = (0, react_1.createElement)('div', {
className: rippleClass,
style: {
background: color,
},
ref: this.refRipple,
});
let style = element.props.style || {};
style = Object.assign({}, style, {
overflow: 'hidden',
position: 'relative',
});
const innerChildren = react_1.Children.toArray(element.props.children);
return (0, react_1.cloneElement)(element, {
...element.props,
style,
ref: this.ref(element.props.ref),
onMouseDown: this.onMouseDown(element.props.onMouseDown),
}, ...[ripple, ...innerChildren]);
}
}
exports.Ripple = Ripple;
Ripple.defaultProps = {
color: 'rgba(0,0,0,.2)',
ms: 400,
};