smart-react-components
Version:
React UI library, wide variety of editable ready to use Styled and React components.
184 lines (178 loc) • 7.26 kB
JavaScript
'use strict';
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var index = require('./index-6d498b59.js');
var DOMHelper = require('./DOMHelper-c0bd5a29.js');
var React = require('react');
var React__default = _interopDefault(React);
var styled = require('styled-components');
var styled__default = _interopDefault(styled);
var reactDom = require('react-dom');
/// <reference path="../modules/global.d.tsx" />
let id = 0;
const getID = () => process.env.NODE_ENV !== "test" ? id++ : 0;
if (typeof global !== "undefined")
global.srcWaveEffectCleanID = () => id = 0;
const GlobalStyle = styled.createGlobalStyle(({ theme, id, type }) => `
*[data-src-wave-effect="${id}"] {
position: relative;
overflow: hidden;
-webkit-tap-highlight-color: transparent;
.src-wave-ripple {
position: absolute;
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
border-radius: 50%;
background: ${theme.src.type[type].waveEffect.color};
pointer-events: none;
transform: scale(0);
opacity: 0;
transition: ${theme.src.waveEffect.transition};
transition-property: transform, opacity;
}
}
`);
class WaveEffect extends React__default.Component {
constructor() {
super(...arguments);
this.active = false;
this.lastRippleEl = null;
this.id = getID();
this.removeRippleElement = (rippleEl) => {
const ignored = rippleEl.offsetWidth;
rippleEl.style.opacity = "0";
setTimeout(() => {
const containerEl = reactDom.findDOMNode(this);
containerEl.removeChild(rippleEl);
if (this.lastRippleEl == rippleEl)
this.lastRippleEl = null;
}, index.DV.WAVE_EFFECT_TRANSITION_DURATION);
};
this.mouseDown = (e) => {
if (DOMHelper.DOMHelper.isMobile)
return;
if (this.props.children.props.onMouseDown)
this.props.children.props.onMouseDown(e);
this.start(e);
};
this.touchStart = (e) => {
if (this.props.children.props.onTouchStart)
this.props.children.props.onTouchStart(e);
this.start(e);
};
this.start = (e) => {
if (e.button == 2)
return;
if (!this.active) {
this.active = true;
this.addEventListener();
}
const containerEl = reactDom.findDOMNode(this);
const rippleEl = this.lastRippleEl = document.createElement("div");
const rect = containerEl.getBoundingClientRect();
const scale = (containerEl.clientWidth / 100) * 3;
let left;
let top;
if (DOMHelper.DOMHelper.isMobile) {
const t = e.touches[0];
left = (t.pageX - window.pageXOffset) - rect.left;
top = (t.pageY - window.pageYOffset) - rect.top;
}
else {
left = e.clientX - rect.left;
top = e.clientY - rect.top;
}
rippleEl.classList.add("src-wave-ripple");
rippleEl.setAttribute("data-src-end-time", (new Date().getTime() + 275).toString());
containerEl.appendChild(rippleEl);
const ignored = rippleEl.offsetWidth;
rippleEl.setAttribute("style", `
left: ${left}px;
top: ${top}px;
transform: scale(${scale});
opacity: 1;
`);
setTimeout(() => {
if (!this.active || this.lastRippleEl != rippleEl)
this.removeRippleElement(rippleEl);
}, 275);
};
this.mouseMove = (e) => {
if (DOMHelper.DOMHelper.isMobile)
return;
if (this.props.children.props.onMouseMove)
this.props.children.props.onMouseMove(e);
this.move(e);
};
this.touchMove = (e) => {
if (this.props.children.props.onTouchMove)
this.props.children.props.onTouchMove(e);
this.move(e);
};
this.move = (e) => {
if (this.active && this.lastRippleEl) {
const target = e.target;
const containerEl = reactDom.findDOMNode(this);
if (target != containerEl && !containerEl.contains(target)) {
this.active = false;
this.removeEventListener();
this.removeRippleElement(this.lastRippleEl);
}
}
};
this.mouseUp = (e) => {
if (DOMHelper.DOMHelper.isMobile)
return;
if (this.props.children.props.onMouseUp)
this.props.children.props.onMouseUp(e);
this.end();
};
this.touchEnd = (e) => {
if (this.props.children.props.onTouchEnd)
this.props.children.props.onTouchEnd(e);
this.end();
};
this.end = () => {
if (this.active) {
this.active = false;
this.removeEventListener();
if (this.lastRippleEl) {
const date = parseInt(this.lastRippleEl.getAttribute("data-src-end-time"));
if (date < new Date().getTime())
this.removeRippleElement(this.lastRippleEl);
}
}
};
}
componentDidMount() {
const el = reactDom.findDOMNode(this);
if (el)
el.setAttribute("data-src-wave-effect", this.id.toString());
}
addEventListener() {
DOMHelper.DOMHelper.addEventListener(window, ["mousemove"], this.mouseMove);
DOMHelper.DOMHelper.addEventListener(window, ["touchmove"], this.touchMove);
DOMHelper.DOMHelper.addEventListener(window, ["mouseup"], this.mouseUp);
DOMHelper.DOMHelper.addEventListener(window, ["touchend"], this.touchEnd);
}
removeEventListener() {
DOMHelper.DOMHelper.removeEventListener(window, ["mousemove"], this.mouseMove);
DOMHelper.DOMHelper.removeEventListener(window, ["touchmove"], this.touchMove);
DOMHelper.DOMHelper.removeEventListener(window, ["mouseup"], this.mouseUp);
DOMHelper.DOMHelper.removeEventListener(window, ["touchend"], this.touchEnd);
}
render() {
return (React__default.createElement(React__default.Fragment, null,
React__default.createElement(GlobalStyle, { id: this.id, type: this.props.type }),
React__default.cloneElement(this.props.children, {
"data-src-wave-effect": this.id.toString(),
onMouseDown: this.mouseDown,
onTouchStart: this.touchStart
})));
}
}
WaveEffect.defaultProps = {
type: "light"
};
exports.WaveEffect = WaveEffect;