rc-drawer
Advanced tools
Comparing version
754
es/Drawer.js
import _defineProperty from 'babel-runtime/helpers/defineProperty'; | ||
import _extends from 'babel-runtime/helpers/extends'; | ||
import _typeof from 'babel-runtime/helpers/typeof'; | ||
import _classCallCheck from 'babel-runtime/helpers/classCallCheck'; | ||
@@ -9,23 +7,12 @@ import _createClass from 'babel-runtime/helpers/createClass'; | ||
import React from 'react'; | ||
import { createPortal } from 'react-dom'; | ||
import PropTypes from 'prop-types'; | ||
import ReactDOM from 'react-dom'; | ||
import classNames from 'classnames'; | ||
import classnames from 'classnames'; | ||
import { dataToArray, transitionEnd } from './utils'; | ||
function getOffset(ele) { | ||
var el = ele; | ||
var _x = 0; | ||
var _y = 0; | ||
while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) { | ||
_x += el.offsetLeft - el.scrollLeft; | ||
_y += el.offsetTop - el.scrollTop; | ||
el = el.offsetParent; | ||
} | ||
return { top: _y, left: _x }; | ||
} | ||
var windowIsUndefined = typeof window === 'undefined'; | ||
var CANCEL_DISTANCE_ON_SCROLL = 20; | ||
var Drawer = function (_React$PureComponent) { | ||
_inherits(Drawer, _React$PureComponent); | ||
var Drawer = function (_React$Component) { | ||
_inherits(Drawer, _React$Component); | ||
function Drawer(props) { | ||
@@ -36,447 +23,384 @@ _classCallCheck(this, Drawer); | ||
_this.onOverlayClicked = function () { | ||
if (_this.props.open) { | ||
// see https://github.com/react-component/drawer/issues/9 | ||
setTimeout(function () { | ||
_this.props.onOpenChange(false, { overlayClicked: true }); | ||
}, 0); | ||
} | ||
_initialiseProps.call(_this); | ||
if (props.onIconClick || props.parent || props.iconChild || props.width) { | ||
console.warn('rc-drawer-menu API has been changed, please look at the releases, ' + 'https://github.com/react-component/drawer-menu/releases'); | ||
} | ||
_this.state = { | ||
open: props.open !== undefined ? props.open : !!props.defaultOpen | ||
}; | ||
return _this; | ||
} | ||
_this.onTouchStart = function (ev) { | ||
// filter out if a user starts swiping with a second finger | ||
if (!_this.isTouching()) { | ||
var touch = ev.targetTouches[0]; | ||
_this.setState({ | ||
touchIdentifier: !_this.notTouch ? touch.identifier : null, | ||
touchStartX: touch.clientX, | ||
touchStartY: touch.clientY, | ||
touchCurrentX: touch.clientX, | ||
touchCurrentY: touch.clientY | ||
_createClass(Drawer, [{ | ||
key: 'componentDidMount', | ||
value: function componentDidMount() { | ||
this.getParentAndLevelDom(this.props); | ||
if (this.props.getContainer || this.props.parent) { | ||
this.container = this.defaultGetContainer(); | ||
} | ||
this.forceUpdate(); | ||
} | ||
}, { | ||
key: 'componentWillReceiveProps', | ||
value: function componentWillReceiveProps(nextProps) { | ||
var open = nextProps.open, | ||
placement = nextProps.placement; | ||
if (open !== undefined && open !== this.props.open) { | ||
this.isOpenChange = true; | ||
this.setState({ | ||
open: open | ||
}); | ||
} | ||
}; | ||
_this.onTouchMove = function (ev) { | ||
// ev.preventDefault(); // cannot touchmove with FastClick | ||
if (_this.isTouching()) { | ||
for (var ind = 0; ind < ev.targetTouches.length; ind++) { | ||
// we only care about the finger that we are tracking | ||
if (ev.targetTouches[ind].identifier === _this.state.touchIdentifier) { | ||
_this.setState({ | ||
touchCurrentX: ev.targetTouches[ind].clientX, | ||
touchCurrentY: ev.targetTouches[ind].clientY | ||
}); | ||
break; | ||
} | ||
if (placement !== this.props.placement) { | ||
// test η bug, ζε¨η»θΏεΊοΌε ι€ dom | ||
this.contextDom = null; | ||
} | ||
if (this.props.level !== nextProps.level) { | ||
this.getParentAndLevelDom(nextProps); | ||
} | ||
} | ||
}, { | ||
key: 'componentWillUnmount', | ||
value: function componentWillUnmount() { | ||
if (this.container) { | ||
this.setLevelDomTransform(false, true); | ||
// ζ¦δΈδ½γγη΄ζ₯ε ι€οΌ | ||
if (this.props.getContainer) { | ||
this.container.parentNode.removeChild(this.container); | ||
} | ||
} | ||
}; | ||
} | ||
}, { | ||
key: 'render', | ||
value: function render() { | ||
var _this2 = this; | ||
_this.onTouchEnd = function () { | ||
_this.notTouch = false; | ||
if (_this.isTouching()) { | ||
// trigger a change to open if sidebar has been dragged beyond dragToggleDistance | ||
var touchWidth = _this.touchSidebarWidth(); | ||
var children = this.getChildToRender(); | ||
if (!this.props.getContainer) { | ||
return React.createElement( | ||
'div', | ||
{ className: this.props.wrapperClassName, ref: function ref(c) { | ||
_this2.container = c; | ||
} }, | ||
children | ||
); | ||
} | ||
if (!this.container) { | ||
return null; | ||
} | ||
return createPortal(children, this.container); | ||
} | ||
}]); | ||
if (_this.props.open && touchWidth < _this.state.sidebarWidth - _this.props.dragToggleDistance || !_this.props.open && touchWidth > _this.props.dragToggleDistance) { | ||
_this.props.onOpenChange(!_this.props.open); | ||
} | ||
return Drawer; | ||
}(React.PureComponent); | ||
var touchHeight = _this.touchSidebarHeight(); | ||
Drawer.propTypes = { | ||
wrapperClassName: PropTypes.string, | ||
open: PropTypes.bool, | ||
bodyStyle: PropTypes.object, | ||
defaultOpen: PropTypes.bool, | ||
placement: PropTypes.string, | ||
level: PropTypes.oneOfType([PropTypes.string, PropTypes.array]), | ||
levelTransition: PropTypes.string, | ||
getContainer: PropTypes.string, | ||
handleChild: PropTypes.any, | ||
handleStyle: PropTypes.object, | ||
onChange: PropTypes.func, | ||
onMaskClick: PropTypes.func, | ||
onHandleClick: PropTypes.func, | ||
showMask: PropTypes.bool, | ||
maskStyle: PropTypes.object | ||
}; | ||
Drawer.defaultProps = { | ||
className: '', | ||
prefixCls: 'drawer', | ||
placement: 'left', | ||
getContainer: 'body', | ||
level: 'all', | ||
levelTransition: 'transform .3s cubic-bezier(0.78, 0.14, 0.15, 0.86)', | ||
onChange: function onChange() {}, | ||
onMaskClick: function onMaskClick() {}, | ||
onHandleClick: function onHandleClick() {}, | ||
handleChild: React.createElement('i', { className: 'drawer-handle-icon' }), | ||
handleStyle: {}, | ||
showMask: true, | ||
maskStyle: {} | ||
}; | ||
if (_this.props.open && touchHeight < _this.state.sidebarHeight - _this.props.dragToggleDistance || !_this.props.open && touchHeight > _this.props.dragToggleDistance) { | ||
_this.props.onOpenChange(!_this.props.open); | ||
} | ||
var _initialiseProps = function _initialiseProps() { | ||
var _this3 = this; | ||
_this.setState({ | ||
touchIdentifier: null, | ||
touchStartX: null, | ||
touchStartY: null, | ||
touchCurrentX: null, | ||
touchCurrentY: null | ||
}); | ||
} | ||
}; | ||
this.levelDom = []; | ||
this.contextDom = null; | ||
this.maskDom = null; | ||
this.handleDom = null; | ||
this.mousePos = null; | ||
_this.onScroll = function () { | ||
if (_this.isTouching() && _this.inCancelDistanceOnScroll()) { | ||
_this.setState({ | ||
touchIdentifier: null, | ||
touchStartX: null, | ||
touchStartY: null, | ||
touchCurrentX: null, | ||
touchCurrentY: null | ||
this.getParentAndLevelDom = function (props) { | ||
if (windowIsUndefined) { | ||
return; | ||
} | ||
var level = props.level, | ||
getContainer = props.getContainer; | ||
_this3.levelDom = []; | ||
_this3.parent = getContainer && document.querySelectorAll(getContainer)[0] || _this3.container.parentNode; | ||
if (level === 'all') { | ||
var children = Array.prototype.slice.call(_this3.parent.children); | ||
children.forEach(function (child) { | ||
if (child.nodeName !== 'SCRIPT' && child.nodeName !== 'STYLE' && child !== _this3.container) { | ||
_this3.levelDom.push(child); | ||
} | ||
}); | ||
} else if (level) { | ||
dataToArray(level).forEach(function (key) { | ||
document.querySelectorAll(key).forEach(function (item) { | ||
_this3.levelDom.push(item); | ||
}); | ||
} | ||
}; | ||
}); | ||
} | ||
}; | ||
_this.inCancelDistanceOnScroll = function () { | ||
var cancelDistanceOnScroll = void 0; | ||
switch (_this.props.position) { | ||
case 'right': | ||
cancelDistanceOnScroll = Math.abs(_this.state.touchCurrentX - _this.state.touchStartX) < CANCEL_DISTANCE_ON_SCROLL; | ||
break; | ||
case 'bottom': | ||
cancelDistanceOnScroll = Math.abs(_this.state.touchCurrentY - _this.state.touchStartY) < CANCEL_DISTANCE_ON_SCROLL; | ||
break; | ||
case 'top': | ||
cancelDistanceOnScroll = Math.abs(_this.state.touchStartY - _this.state.touchCurrentY) < CANCEL_DISTANCE_ON_SCROLL; | ||
break; | ||
case 'left': | ||
default: | ||
cancelDistanceOnScroll = Math.abs(_this.state.touchStartX - _this.state.touchCurrentX) < CANCEL_DISTANCE_ON_SCROLL; | ||
} | ||
return cancelDistanceOnScroll; | ||
}; | ||
this.trnasitionEnd = function (e) { | ||
var dom = e.target; | ||
dom.removeEventListener(transitionEnd, _this3.trnasitionEnd); | ||
dom.style.transition = ''; | ||
}; | ||
_this.isTouching = function () { | ||
return _this.state.touchIdentifier !== null; | ||
this.onTouchEnd = function (e, close) { | ||
if (_this3.props.open !== undefined) { | ||
return; | ||
} | ||
var open = close || _this3.state.open; | ||
_this3.isOpenChange = true; | ||
_this3.setState({ | ||
open: !open | ||
}); | ||
}; | ||
this.onMaskTouchEnd = function (e) { | ||
_this3.props.onMaskClick(e); | ||
_this3.onTouchEnd(e, true); | ||
}; | ||
this.onIconTouchEnd = function (e) { | ||
_this3.props.onHandleClick(e); | ||
_this3.onTouchEnd(e); | ||
}; | ||
this.onScrollTouchStart = function (e) { | ||
if (e.touches.length > 1) { | ||
return; | ||
} | ||
var touchs = e.touches[0]; | ||
_this3.mousePos = { | ||
x: touchs.pageX, | ||
y: touchs.pageY | ||
}; | ||
}; | ||
_this.saveSidebarSize = function () { | ||
var sidebar = ReactDOM.findDOMNode(_this.refs.sidebar); | ||
var width = sidebar.offsetWidth; | ||
var height = sidebar.offsetHeight; | ||
var sidebarTop = getOffset(ReactDOM.findDOMNode(_this.refs.sidebar)).top; | ||
var dragHandleTop = getOffset(ReactDOM.findDOMNode(_this.refs.dragHandle)).top; | ||
this.onScrollTouchEnd = function () { | ||
_this3.mousePos = null; | ||
}; | ||
if (width !== _this.state.sidebarWidth) { | ||
_this.setState({ sidebarWidth: width }); | ||
this.getScollDom = function (dom) { | ||
var doms = []; | ||
var setScrollDom = function setScrollDom(d) { | ||
if (!d) { | ||
return; | ||
} | ||
if (height !== _this.state.sidebarHeight) { | ||
_this.setState({ sidebarHeight: height }); | ||
if (d.scrollHeight > d.clientHeight || d.scrollWidth > d.clientWidth) { | ||
doms.push(d); | ||
} | ||
if (sidebarTop !== _this.state.sidebarTop) { | ||
_this.setState({ sidebarTop: sidebarTop }); | ||
if (d !== _this3.contextDom && d !== _this3.handleDom && d !== _this3.maskDom) { | ||
setScrollDom(d.parentNode); | ||
} | ||
if (dragHandleTop !== _this.state.dragHandleTop) { | ||
_this.setState({ dragHandleTop: dragHandleTop }); | ||
} | ||
}; | ||
setScrollDom(dom); | ||
return doms[doms.length - 1]; | ||
}; | ||
_this.touchSidebarWidth = function () { | ||
// if the sidebar is open and start point of drag is inside the sidebar | ||
// we will only drag the distance they moved their finger | ||
// otherwise we will move the sidebar to be below the finger. | ||
if (_this.props.position === 'right') { | ||
if (_this.props.open && window.innerWidth - _this.state.touchStartX < _this.state.sidebarWidth) { | ||
if (_this.state.touchCurrentX > _this.state.touchStartX) { | ||
return _this.state.sidebarWidth + _this.state.touchStartX - _this.state.touchCurrentX; | ||
} | ||
return _this.state.sidebarWidth; | ||
} | ||
return Math.min(window.innerWidth - _this.state.touchCurrentX, _this.state.sidebarWidth); | ||
} | ||
this.getIsHandleDom = function (dom) { | ||
if (dom.className === _this3.props.className + '-handle') { | ||
return true; | ||
} | ||
if (dom.parentNode) { | ||
return _this3.getIsHandleDom(dom.parentNode); | ||
} | ||
return false; | ||
}; | ||
if (_this.props.position === 'left') { | ||
if (_this.props.open && _this.state.touchStartX < _this.state.sidebarWidth) { | ||
if (_this.state.touchCurrentX > _this.state.touchStartX) { | ||
return _this.state.sidebarWidth; | ||
} | ||
return _this.state.sidebarWidth - _this.state.touchStartX + _this.state.touchCurrentX; | ||
} | ||
return Math.min(_this.state.touchCurrentX, _this.state.sidebarWidth); | ||
this.removeScroll = function (e) { | ||
if (!_this3.props.showMask) { | ||
return; | ||
} | ||
var dom = e.target; | ||
var scrollDom = _this3.getScollDom(dom); | ||
if (dom === _this3.maskDom || _this3.getIsHandleDom(dom) || !scrollDom) { | ||
if (e.preventDefault) { | ||
e.preventDefault(); | ||
} | ||
}; | ||
e.returnValue = false; | ||
return; | ||
} | ||
_this.touchSidebarHeight = function () { | ||
// if the sidebar is open and start point of drag is inside the sidebar | ||
// we will only drag the distance they moved their finger | ||
// otherwise we will move the sidebar to be below the finger. | ||
if (_this.props.position === 'bottom') { | ||
if (_this.props.open && window.innerHeight - _this.state.touchStartY < _this.state.sidebarHeight) { | ||
if (_this.state.touchCurrentY > _this.state.touchStartY) { | ||
return _this.state.sidebarHeight + _this.state.touchStartY - _this.state.touchCurrentY; | ||
} | ||
return _this.state.sidebarHeight; | ||
} | ||
return Math.min(window.innerHeight - _this.state.touchCurrentY, _this.state.sidebarHeight); | ||
var y = e.deltaY; | ||
var x = e.deltaX; | ||
if (e.type === 'touchmove') { | ||
if (e.touches.length > 1 || !_this3.mousePos) { | ||
return; | ||
} | ||
if (_this.props.position === 'top') { | ||
var touchStartOffsetY = _this.state.touchStartY - _this.state.sidebarTop; | ||
if (_this.props.open && touchStartOffsetY < _this.state.sidebarHeight) { | ||
if (_this.state.touchCurrentY > _this.state.touchStartY) { | ||
return _this.state.sidebarHeight; | ||
} | ||
return _this.state.sidebarHeight - _this.state.touchStartY + _this.state.touchCurrentY; | ||
} | ||
return Math.min(_this.state.touchCurrentY - _this.state.dragHandleTop, _this.state.sidebarHeight); | ||
var touches = e.touches[0]; | ||
// δΈζ»δΈΊζ£οΌδΈζ»δΈΊθ΄ | ||
y = _this3.mousePos.y - touches.pageY; | ||
x = _this3.mousePos.x - touches.pageX; | ||
} | ||
// η«ε | ||
var scrollTop = scrollDom.scrollTop; | ||
var height = scrollDom.clientHeight; | ||
var scrollHeight = scrollDom.scrollHeight; | ||
var isScrollY = scrollHeight - height > 2; | ||
var maxOrMinScrollY = isScrollY && (scrollTop <= 0 && y < 0 || scrollTop + height >= scrollHeight && y > 0); | ||
// ζ¨ͺε | ||
var width = scrollDom.clientWidth; | ||
var scrollLeft = scrollDom.scrollLeft; | ||
var scrollWidth = scrollDom.scrollWidth; | ||
var isScrollX = scrollWidth - width > 2; | ||
var maxOrMinScrollX = scrollWidth - width > 2 && (scrollLeft <= 0 && x < 0 || scrollLeft + width >= scrollWidth && x > 0); | ||
if (!isScrollY && !isScrollX || maxOrMinScrollY || maxOrMinScrollX) { | ||
if (e.preventDefault) { | ||
e.preventDefault(); | ||
} | ||
}; | ||
e.returnValue = false; | ||
return; | ||
} | ||
}; | ||
_this.renderStyle = function (_ref) { | ||
var sidebarStyle = _ref.sidebarStyle, | ||
isTouching = _ref.isTouching, | ||
overlayStyle = _ref.overlayStyle, | ||
contentStyle = _ref.contentStyle; | ||
this.setLevelDomTransform = function (open, openTransition, placementName, value) { | ||
var _props = _this3.props, | ||
placement = _props.placement, | ||
levelTransition = _props.levelTransition, | ||
onChange = _props.onChange; | ||
if (_this.props.position === 'right' || _this.props.position === 'left') { | ||
sidebarStyle.transform = 'translateX(0%)'; | ||
sidebarStyle.WebkitTransform = 'translateX(0%)'; | ||
if (isTouching) { | ||
var percentage = _this.touchSidebarWidth() / _this.state.sidebarWidth; | ||
// slide open to what we dragged | ||
if (_this.props.position === 'right') { | ||
sidebarStyle.transform = 'translateX(' + (1 - percentage) * 100 + '%)'; | ||
sidebarStyle.WebkitTransform = 'translateX(' + (1 - percentage) * 100 + '%)'; | ||
} | ||
if (_this.props.position === 'left') { | ||
sidebarStyle.transform = 'translateX(-' + (1 - percentage) * 100 + '%)'; | ||
sidebarStyle.WebkitTransform = 'translateX(-' + (1 - percentage) * 100 + '%)'; | ||
} | ||
// fade overlay to match distance of drag | ||
overlayStyle.opacity = percentage; | ||
overlayStyle.visibility = 'visible'; | ||
} | ||
if (contentStyle) { | ||
contentStyle[_this.props.position] = _this.state.sidebarWidth + 'px'; | ||
} | ||
_this3.levelDom.forEach(function (dom) { | ||
if (_this3.isOpenChange || openTransition) { | ||
dom.style.transition = levelTransition; | ||
dom.addEventListener(transitionEnd, _this3.trnasitionEnd); | ||
} | ||
if (_this.props.position === 'top' || _this.props.position === 'bottom') { | ||
sidebarStyle.transform = 'translateY(0%)'; | ||
sidebarStyle.WebkitTransform = 'translateY(0%)'; | ||
if (isTouching) { | ||
var _percentage = _this.touchSidebarHeight() / _this.state.sidebarHeight; | ||
// slide open to what we dragged | ||
if (_this.props.position === 'bottom') { | ||
sidebarStyle.transform = 'translateY(' + (1 - _percentage) * 100 + '%)'; | ||
sidebarStyle.WebkitTransform = 'translateY(' + (1 - _percentage) * 100 + '%)'; | ||
var placementPos = placement === 'left' || placement === 'top' ? value : -value; | ||
dom.style.transform = open ? placementName + '(' + placementPos + 'px)' : ''; | ||
}); | ||
// ε€η body ζ»ε¨ | ||
if (!windowIsUndefined) { | ||
var passiveSupported = false; | ||
try { | ||
window.addEventListener('test', null, Object.defineProperty({}, 'passive', { | ||
get: function get() { | ||
passiveSupported = true; | ||
} | ||
if (_this.props.position === 'top') { | ||
sidebarStyle.transform = 'translateY(-' + (1 - _percentage) * 100 + '%)'; | ||
sidebarStyle.WebkitTransform = 'translateY(-' + (1 - _percentage) * 100 + '%)'; | ||
} | ||
// fade overlay to match distance of drag | ||
overlayStyle.opacity = _percentage; | ||
overlayStyle.visibility = 'visible'; | ||
} | ||
if (contentStyle) { | ||
contentStyle[_this.props.position] = _this.state.sidebarHeight + 'px'; | ||
} | ||
})); | ||
} catch (err) { | ||
console.log(err); | ||
} | ||
}; | ||
_this.state = { | ||
// the detected width of the sidebar in pixels | ||
sidebarWidth: 0, | ||
sidebarHeight: 0, | ||
sidebarTop: 0, | ||
dragHandleTop: 0, | ||
// keep track of touching params | ||
touchIdentifier: null, | ||
touchStartX: null, | ||
touchStartY: null, | ||
touchCurrentX: null, | ||
touchCurrentY: null, | ||
// if touch is supported by the browser | ||
touchSupported: (typeof window === 'undefined' ? 'undefined' : _typeof(window)) === 'object' && 'ontouchstart' in window | ||
}; | ||
return _this; | ||
} | ||
_createClass(Drawer, [{ | ||
key: 'componentDidMount', | ||
value: function componentDidMount() { | ||
this.saveSidebarSize(); | ||
} | ||
}, { | ||
key: 'componentDidUpdate', | ||
value: function componentDidUpdate() { | ||
// filter out the updates when we're touching | ||
if (!this.isTouching()) { | ||
this.saveSidebarSize(); | ||
var passive = passiveSupported ? { passive: false } : false; | ||
if (open) { | ||
document.body.addEventListener('mousewheel', _this3.removeScroll); | ||
document.body.addEventListener('touchmove', _this3.removeScroll, passive); | ||
} else { | ||
document.body.removeEventListener('mousewheel', _this3.removeScroll); | ||
document.body.removeEventListener('touchmove', _this3.removeScroll, passive); | ||
} | ||
} | ||
if (onChange && _this3.isOpenChange) { | ||
onChange(open); | ||
_this3.isOpenChange = false; | ||
} | ||
}; | ||
// This logic helps us prevents the user from sliding the sidebar horizontally | ||
// while scrolling the sidebar vertically. When a scroll event comes in, we're | ||
// cancelling the ongoing gesture if it did not move horizontally much. | ||
this.getChildToRender = function () { | ||
var _classnames; | ||
var open = _this3.props.open !== undefined ? _this3.props.open : _this3.state.open; | ||
var _props2 = _this3.props, | ||
className = _props2.className, | ||
prefixCls = _props2.prefixCls, | ||
style = _props2.style, | ||
placement = _props2.placement, | ||
children = _props2.children, | ||
handleChild = _props2.handleChild, | ||
handleStyle = _props2.handleStyle, | ||
showMask = _props2.showMask, | ||
maskStyle = _props2.maskStyle; | ||
// True if the on going gesture X distance is less than the cancel distance | ||
// calculate the sidebarWidth based on current touch info | ||
// calculate the sidebarHeight based on current touch info | ||
}, { | ||
key: 'render', | ||
value: function render() { | ||
var _rootCls, | ||
_this2 = this; | ||
var _props = this.props, | ||
className = _props.className, | ||
style = _props.style, | ||
prefixCls = _props.prefixCls, | ||
position = _props.position, | ||
transitions = _props.transitions, | ||
touch = _props.touch, | ||
enableDragHandle = _props.enableDragHandle, | ||
sidebar = _props.sidebar, | ||
children = _props.children, | ||
docked = _props.docked, | ||
open = _props.open; | ||
var sidebarStyle = _extends({}, this.props.sidebarStyle); | ||
var contentStyle = _extends({}, this.props.contentStyle); | ||
var overlayStyle = _extends({}, this.props.overlayStyle); | ||
var rootCls = (_rootCls = {}, _defineProperty(_rootCls, className, !!className), _defineProperty(_rootCls, prefixCls, true), _defineProperty(_rootCls, prefixCls + '-' + position, true), _rootCls); | ||
var rootProps = { style: style }; | ||
var isTouching = this.isTouching(); | ||
if (isTouching) { | ||
this.renderStyle({ sidebarStyle: sidebarStyle, isTouching: true, overlayStyle: overlayStyle }); | ||
} else if (docked) { | ||
if (this.state.sidebarWidth !== 0) { | ||
rootCls[prefixCls + '-docked'] = true; | ||
this.renderStyle({ sidebarStyle: sidebarStyle, contentStyle: contentStyle }); | ||
var wrapperClassname = classnames(prefixCls, (_classnames = {}, _defineProperty(_classnames, prefixCls + '-' + placement, true), _defineProperty(_classnames, prefixCls + '-open', open), _defineProperty(_classnames, className, !!className), _classnames)); | ||
var value = _this3.contextDom ? _this3.contextDom.getBoundingClientRect()[placement === 'left' || placement === 'right' ? 'width' : 'height'] : 0; | ||
var placementName = 'translate' + (placement === 'left' || placement === 'right' ? 'X' : 'Y'); | ||
// ηΎεζ―δΈεη΄ ε¨η»δΈεζ₯οΌη¬¬δΈζ¬‘ζη¨εε ¨η¨εη΄ ε¨η»γ | ||
var defaultValue = !_this3.contextDom ? '100%' : value + 'px'; | ||
var placementPos = placement === 'left' || placement === 'top' ? '-' + defaultValue : defaultValue; | ||
var transform = open ? '' : placementName + '(' + placementPos + ')'; | ||
if (_this3.isOpenChange === undefined || _this3.isOpenChange) { | ||
_this3.setLevelDomTransform(open, false, placementName, value); | ||
} | ||
return React.createElement( | ||
'div', | ||
{ className: wrapperClassname, style: style }, | ||
showMask && React.createElement('div', { | ||
className: prefixCls + '-mask', | ||
onClick: _this3.onMaskTouchEnd, | ||
style: maskStyle, | ||
ref: function ref(c) { | ||
_this3.maskDom = c; | ||
} | ||
} else if (open) { | ||
rootCls[prefixCls + '-open'] = true; | ||
this.renderStyle({ sidebarStyle: sidebarStyle }); | ||
overlayStyle.opacity = 1; | ||
overlayStyle.visibility = 'visible'; | ||
} | ||
if (isTouching || !transitions) { | ||
sidebarStyle.transition = 'none'; | ||
sidebarStyle.WebkitTransition = 'none'; | ||
contentStyle.transition = 'none'; | ||
overlayStyle.transition = 'none'; | ||
} | ||
var dragHandle = null; | ||
if (this.state.touchSupported && touch) { | ||
if (open) { | ||
rootProps.onTouchStart = function (ev) { | ||
_this2.notTouch = true; | ||
_this2.onTouchStart(ev); | ||
}; | ||
rootProps.onTouchMove = this.onTouchMove; | ||
rootProps.onTouchEnd = this.onTouchEnd; | ||
rootProps.onTouchCancel = this.onTouchEnd; | ||
rootProps.onScroll = this.onScroll; | ||
} else if (enableDragHandle) { | ||
dragHandle = React.createElement('div', { className: prefixCls + '-draghandle', style: this.props.dragHandleStyle, | ||
onTouchStart: this.onTouchStart, onTouchMove: this.onTouchMove, | ||
onTouchEnd: this.onTouchEnd, onTouchCancel: this.onTouchEnd, | ||
ref: 'dragHandle' | ||
}); | ||
} | ||
} | ||
// const evt = {}; | ||
// // FastClick use touchstart instead of click | ||
// if (this.state.touchSupported) { | ||
// evt.onTouchStart = () => { | ||
// this.notTouch = true; | ||
// this.onOverlayClicked(); | ||
// }; | ||
// evt.onTouchEnd = () => { | ||
// this.notTouch = false; | ||
// this.setState({ | ||
// touchIdentifier: null, | ||
// }); | ||
// }; | ||
// } else { | ||
// evt.onClick = this.onOverlayClicked; | ||
// } | ||
return React.createElement( | ||
}), | ||
React.createElement( | ||
'div', | ||
_extends({ className: classNames(rootCls) }, rootProps), | ||
{ | ||
className: prefixCls + '-content-wrapper', | ||
style: { transform: transform } | ||
}, | ||
React.createElement( | ||
'div', | ||
{ className: prefixCls + '-sidebar', style: sidebarStyle, | ||
ref: 'sidebar' | ||
{ | ||
className: prefixCls + '-content', | ||
onTouchStart: _this3.onScrollTouchStart, | ||
onTouchEnd: _this3.onScrollTouchEnd, | ||
ref: function ref(c) { | ||
_this3.contextDom = c; | ||
} | ||
}, | ||
sidebar | ||
children | ||
), | ||
React.createElement('div', { className: prefixCls + '-overlay', | ||
style: overlayStyle, | ||
role: 'presentation', | ||
ref: 'overlay', | ||
onClick: this.onOverlayClicked | ||
}), | ||
React.createElement( | ||
handleChild && React.createElement( | ||
'div', | ||
{ className: prefixCls + '-content', style: contentStyle, | ||
ref: 'content' | ||
{ | ||
className: prefixCls + '-handle', | ||
onClick: _this3.onIconTouchEnd, | ||
style: handleStyle, | ||
ref: function ref(c) { | ||
_this3.handleDom = c; | ||
} | ||
}, | ||
dragHandle, | ||
children | ||
handleChild | ||
) | ||
); | ||
) | ||
); | ||
}; | ||
this.defaultGetContainer = function () { | ||
if (windowIsUndefined) { | ||
return null; | ||
} | ||
}]); | ||
var container = document.createElement('div'); | ||
_this3.parent.appendChild(container); | ||
if (_this3.props.wrapperClassName) { | ||
container.className = _this3.props.wrapperClassName; | ||
} | ||
return container; | ||
}; | ||
}; | ||
return Drawer; | ||
}(React.Component); | ||
Drawer.propTypes = { | ||
prefixCls: PropTypes.string, | ||
className: PropTypes.string, | ||
// main content to render | ||
children: PropTypes.node.isRequired, | ||
// styles | ||
// styles: PropTypes.shape({ | ||
// dragHandle: PropTypes.object, | ||
// }), | ||
style: PropTypes.object, | ||
sidebarStyle: PropTypes.object, | ||
contentStyle: PropTypes.object, | ||
overlayStyle: PropTypes.object, | ||
dragHandleStyle: PropTypes.object, | ||
// sidebar content to render | ||
sidebar: PropTypes.node.isRequired, | ||
// boolean if sidebar should be docked | ||
docked: PropTypes.bool, | ||
// boolean if sidebar should slide open | ||
open: PropTypes.bool, | ||
// boolean if transitions should be disabled | ||
transitions: PropTypes.bool, | ||
// boolean if touch gestures are enabled | ||
touch: PropTypes.bool, | ||
enableDragHandle: PropTypes.bool, | ||
// where to place the sidebar | ||
position: PropTypes.oneOf(['left', 'right', 'top', 'bottom']), | ||
// distance we have to drag the sidebar to toggle open state | ||
dragToggleDistance: PropTypes.number, | ||
// callback called when the overlay is clicked | ||
onOpenChange: PropTypes.func | ||
}; | ||
Drawer.defaultProps = { | ||
prefixCls: 'rc-drawer', | ||
sidebarStyle: {}, | ||
contentStyle: {}, | ||
overlayStyle: {}, | ||
dragHandleStyle: {}, | ||
docked: false, | ||
open: false, | ||
transitions: true, | ||
touch: true, | ||
enableDragHandle: true, | ||
position: 'left', | ||
dragToggleDistance: 30, | ||
onOpenChange: function onOpenChange() {} | ||
}; | ||
export default Drawer; |
// export this package's api | ||
import Drawer from './Drawer'; | ||
export default Drawer; |
@@ -11,10 +11,2 @@ 'use strict'; | ||
var _extends2 = require('babel-runtime/helpers/extends'); | ||
var _extends3 = _interopRequireDefault(_extends2); | ||
var _typeof2 = require('babel-runtime/helpers/typeof'); | ||
var _typeof3 = _interopRequireDefault(_typeof2); | ||
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); | ||
@@ -40,2 +32,4 @@ | ||
var _reactDom = require('react-dom'); | ||
var _propTypes = require('prop-types'); | ||
@@ -45,29 +39,15 @@ | ||
var _reactDom = require('react-dom'); | ||
var _classnames2 = require('classnames'); | ||
var _reactDom2 = _interopRequireDefault(_reactDom); | ||
var _classnames3 = _interopRequireDefault(_classnames2); | ||
var _classnames = require('classnames'); | ||
var _utils = require('./utils'); | ||
var _classnames2 = _interopRequireDefault(_classnames); | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } | ||
function getOffset(ele) { | ||
var el = ele; | ||
var _x = 0; | ||
var _y = 0; | ||
while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) { | ||
_x += el.offsetLeft - el.scrollLeft; | ||
_y += el.offsetTop - el.scrollTop; | ||
el = el.offsetParent; | ||
} | ||
return { top: _y, left: _x }; | ||
} | ||
var windowIsUndefined = typeof window === 'undefined'; | ||
var CANCEL_DISTANCE_ON_SCROLL = 20; | ||
var Drawer = function (_React$PureComponent) { | ||
(0, _inherits3['default'])(Drawer, _React$PureComponent); | ||
var Drawer = function (_React$Component) { | ||
(0, _inherits3['default'])(Drawer, _React$Component); | ||
function Drawer(props) { | ||
@@ -78,447 +58,384 @@ (0, _classCallCheck3['default'])(this, Drawer); | ||
_this.onOverlayClicked = function () { | ||
if (_this.props.open) { | ||
// see https://github.com/react-component/drawer/issues/9 | ||
setTimeout(function () { | ||
_this.props.onOpenChange(false, { overlayClicked: true }); | ||
}, 0); | ||
} | ||
_initialiseProps.call(_this); | ||
if (props.onIconClick || props.parent || props.iconChild || props.width) { | ||
console.warn('rc-drawer-menu API has been changed, please look at the releases, ' + 'https://github.com/react-component/drawer-menu/releases'); | ||
} | ||
_this.state = { | ||
open: props.open !== undefined ? props.open : !!props.defaultOpen | ||
}; | ||
return _this; | ||
} | ||
_this.onTouchStart = function (ev) { | ||
// filter out if a user starts swiping with a second finger | ||
if (!_this.isTouching()) { | ||
var touch = ev.targetTouches[0]; | ||
_this.setState({ | ||
touchIdentifier: !_this.notTouch ? touch.identifier : null, | ||
touchStartX: touch.clientX, | ||
touchStartY: touch.clientY, | ||
touchCurrentX: touch.clientX, | ||
touchCurrentY: touch.clientY | ||
(0, _createClass3['default'])(Drawer, [{ | ||
key: 'componentDidMount', | ||
value: function componentDidMount() { | ||
this.getParentAndLevelDom(this.props); | ||
if (this.props.getContainer || this.props.parent) { | ||
this.container = this.defaultGetContainer(); | ||
} | ||
this.forceUpdate(); | ||
} | ||
}, { | ||
key: 'componentWillReceiveProps', | ||
value: function componentWillReceiveProps(nextProps) { | ||
var open = nextProps.open, | ||
placement = nextProps.placement; | ||
if (open !== undefined && open !== this.props.open) { | ||
this.isOpenChange = true; | ||
this.setState({ | ||
open: open | ||
}); | ||
} | ||
}; | ||
_this.onTouchMove = function (ev) { | ||
// ev.preventDefault(); // cannot touchmove with FastClick | ||
if (_this.isTouching()) { | ||
for (var ind = 0; ind < ev.targetTouches.length; ind++) { | ||
// we only care about the finger that we are tracking | ||
if (ev.targetTouches[ind].identifier === _this.state.touchIdentifier) { | ||
_this.setState({ | ||
touchCurrentX: ev.targetTouches[ind].clientX, | ||
touchCurrentY: ev.targetTouches[ind].clientY | ||
}); | ||
break; | ||
} | ||
if (placement !== this.props.placement) { | ||
// test η bug, ζε¨η»θΏεΊοΌε ι€ dom | ||
this.contextDom = null; | ||
} | ||
if (this.props.level !== nextProps.level) { | ||
this.getParentAndLevelDom(nextProps); | ||
} | ||
} | ||
}, { | ||
key: 'componentWillUnmount', | ||
value: function componentWillUnmount() { | ||
if (this.container) { | ||
this.setLevelDomTransform(false, true); | ||
// ζ¦δΈδ½γγη΄ζ₯ε ι€οΌ | ||
if (this.props.getContainer) { | ||
this.container.parentNode.removeChild(this.container); | ||
} | ||
} | ||
}; | ||
} | ||
}, { | ||
key: 'render', | ||
value: function render() { | ||
var _this2 = this; | ||
_this.onTouchEnd = function () { | ||
_this.notTouch = false; | ||
if (_this.isTouching()) { | ||
// trigger a change to open if sidebar has been dragged beyond dragToggleDistance | ||
var touchWidth = _this.touchSidebarWidth(); | ||
var children = this.getChildToRender(); | ||
if (!this.props.getContainer) { | ||
return _react2['default'].createElement( | ||
'div', | ||
{ className: this.props.wrapperClassName, ref: function ref(c) { | ||
_this2.container = c; | ||
} }, | ||
children | ||
); | ||
} | ||
if (!this.container) { | ||
return null; | ||
} | ||
return (0, _reactDom.createPortal)(children, this.container); | ||
} | ||
}]); | ||
return Drawer; | ||
}(_react2['default'].PureComponent); | ||
if (_this.props.open && touchWidth < _this.state.sidebarWidth - _this.props.dragToggleDistance || !_this.props.open && touchWidth > _this.props.dragToggleDistance) { | ||
_this.props.onOpenChange(!_this.props.open); | ||
} | ||
Drawer.propTypes = { | ||
wrapperClassName: _propTypes2['default'].string, | ||
open: _propTypes2['default'].bool, | ||
bodyStyle: _propTypes2['default'].object, | ||
defaultOpen: _propTypes2['default'].bool, | ||
placement: _propTypes2['default'].string, | ||
level: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].array]), | ||
levelTransition: _propTypes2['default'].string, | ||
getContainer: _propTypes2['default'].string, | ||
handleChild: _propTypes2['default'].any, | ||
handleStyle: _propTypes2['default'].object, | ||
onChange: _propTypes2['default'].func, | ||
onMaskClick: _propTypes2['default'].func, | ||
onHandleClick: _propTypes2['default'].func, | ||
showMask: _propTypes2['default'].bool, | ||
maskStyle: _propTypes2['default'].object | ||
}; | ||
Drawer.defaultProps = { | ||
className: '', | ||
prefixCls: 'drawer', | ||
placement: 'left', | ||
getContainer: 'body', | ||
level: 'all', | ||
levelTransition: 'transform .3s cubic-bezier(0.78, 0.14, 0.15, 0.86)', | ||
onChange: function onChange() {}, | ||
onMaskClick: function onMaskClick() {}, | ||
onHandleClick: function onHandleClick() {}, | ||
handleChild: _react2['default'].createElement('i', { className: 'drawer-handle-icon' }), | ||
handleStyle: {}, | ||
showMask: true, | ||
maskStyle: {} | ||
}; | ||
var touchHeight = _this.touchSidebarHeight(); | ||
var _initialiseProps = function _initialiseProps() { | ||
var _this3 = this; | ||
if (_this.props.open && touchHeight < _this.state.sidebarHeight - _this.props.dragToggleDistance || !_this.props.open && touchHeight > _this.props.dragToggleDistance) { | ||
_this.props.onOpenChange(!_this.props.open); | ||
} | ||
this.levelDom = []; | ||
this.contextDom = null; | ||
this.maskDom = null; | ||
this.handleDom = null; | ||
this.mousePos = null; | ||
_this.setState({ | ||
touchIdentifier: null, | ||
touchStartX: null, | ||
touchStartY: null, | ||
touchCurrentX: null, | ||
touchCurrentY: null | ||
}); | ||
} | ||
}; | ||
this.getParentAndLevelDom = function (props) { | ||
if (windowIsUndefined) { | ||
return; | ||
} | ||
var level = props.level, | ||
getContainer = props.getContainer; | ||
_this.onScroll = function () { | ||
if (_this.isTouching() && _this.inCancelDistanceOnScroll()) { | ||
_this.setState({ | ||
touchIdentifier: null, | ||
touchStartX: null, | ||
touchStartY: null, | ||
touchCurrentX: null, | ||
touchCurrentY: null | ||
_this3.levelDom = []; | ||
_this3.parent = getContainer && document.querySelectorAll(getContainer)[0] || _this3.container.parentNode; | ||
if (level === 'all') { | ||
var children = Array.prototype.slice.call(_this3.parent.children); | ||
children.forEach(function (child) { | ||
if (child.nodeName !== 'SCRIPT' && child.nodeName !== 'STYLE' && child !== _this3.container) { | ||
_this3.levelDom.push(child); | ||
} | ||
}); | ||
} else if (level) { | ||
(0, _utils.dataToArray)(level).forEach(function (key) { | ||
document.querySelectorAll(key).forEach(function (item) { | ||
_this3.levelDom.push(item); | ||
}); | ||
} | ||
}; | ||
}); | ||
} | ||
}; | ||
_this.inCancelDistanceOnScroll = function () { | ||
var cancelDistanceOnScroll = void 0; | ||
switch (_this.props.position) { | ||
case 'right': | ||
cancelDistanceOnScroll = Math.abs(_this.state.touchCurrentX - _this.state.touchStartX) < CANCEL_DISTANCE_ON_SCROLL; | ||
break; | ||
case 'bottom': | ||
cancelDistanceOnScroll = Math.abs(_this.state.touchCurrentY - _this.state.touchStartY) < CANCEL_DISTANCE_ON_SCROLL; | ||
break; | ||
case 'top': | ||
cancelDistanceOnScroll = Math.abs(_this.state.touchStartY - _this.state.touchCurrentY) < CANCEL_DISTANCE_ON_SCROLL; | ||
break; | ||
case 'left': | ||
default: | ||
cancelDistanceOnScroll = Math.abs(_this.state.touchStartX - _this.state.touchCurrentX) < CANCEL_DISTANCE_ON_SCROLL; | ||
} | ||
return cancelDistanceOnScroll; | ||
}; | ||
this.trnasitionEnd = function (e) { | ||
var dom = e.target; | ||
dom.removeEventListener(_utils.transitionEnd, _this3.trnasitionEnd); | ||
dom.style.transition = ''; | ||
}; | ||
_this.isTouching = function () { | ||
return _this.state.touchIdentifier !== null; | ||
this.onTouchEnd = function (e, close) { | ||
if (_this3.props.open !== undefined) { | ||
return; | ||
} | ||
var open = close || _this3.state.open; | ||
_this3.isOpenChange = true; | ||
_this3.setState({ | ||
open: !open | ||
}); | ||
}; | ||
this.onMaskTouchEnd = function (e) { | ||
_this3.props.onMaskClick(e); | ||
_this3.onTouchEnd(e, true); | ||
}; | ||
this.onIconTouchEnd = function (e) { | ||
_this3.props.onHandleClick(e); | ||
_this3.onTouchEnd(e); | ||
}; | ||
this.onScrollTouchStart = function (e) { | ||
if (e.touches.length > 1) { | ||
return; | ||
} | ||
var touchs = e.touches[0]; | ||
_this3.mousePos = { | ||
x: touchs.pageX, | ||
y: touchs.pageY | ||
}; | ||
}; | ||
_this.saveSidebarSize = function () { | ||
var sidebar = _reactDom2['default'].findDOMNode(_this.refs.sidebar); | ||
var width = sidebar.offsetWidth; | ||
var height = sidebar.offsetHeight; | ||
var sidebarTop = getOffset(_reactDom2['default'].findDOMNode(_this.refs.sidebar)).top; | ||
var dragHandleTop = getOffset(_reactDom2['default'].findDOMNode(_this.refs.dragHandle)).top; | ||
this.onScrollTouchEnd = function () { | ||
_this3.mousePos = null; | ||
}; | ||
if (width !== _this.state.sidebarWidth) { | ||
_this.setState({ sidebarWidth: width }); | ||
this.getScollDom = function (dom) { | ||
var doms = []; | ||
var setScrollDom = function setScrollDom(d) { | ||
if (!d) { | ||
return; | ||
} | ||
if (height !== _this.state.sidebarHeight) { | ||
_this.setState({ sidebarHeight: height }); | ||
if (d.scrollHeight > d.clientHeight || d.scrollWidth > d.clientWidth) { | ||
doms.push(d); | ||
} | ||
if (sidebarTop !== _this.state.sidebarTop) { | ||
_this.setState({ sidebarTop: sidebarTop }); | ||
if (d !== _this3.contextDom && d !== _this3.handleDom && d !== _this3.maskDom) { | ||
setScrollDom(d.parentNode); | ||
} | ||
if (dragHandleTop !== _this.state.dragHandleTop) { | ||
_this.setState({ dragHandleTop: dragHandleTop }); | ||
} | ||
}; | ||
setScrollDom(dom); | ||
return doms[doms.length - 1]; | ||
}; | ||
_this.touchSidebarWidth = function () { | ||
// if the sidebar is open and start point of drag is inside the sidebar | ||
// we will only drag the distance they moved their finger | ||
// otherwise we will move the sidebar to be below the finger. | ||
if (_this.props.position === 'right') { | ||
if (_this.props.open && window.innerWidth - _this.state.touchStartX < _this.state.sidebarWidth) { | ||
if (_this.state.touchCurrentX > _this.state.touchStartX) { | ||
return _this.state.sidebarWidth + _this.state.touchStartX - _this.state.touchCurrentX; | ||
} | ||
return _this.state.sidebarWidth; | ||
} | ||
return Math.min(window.innerWidth - _this.state.touchCurrentX, _this.state.sidebarWidth); | ||
} | ||
this.getIsHandleDom = function (dom) { | ||
if (dom.className === _this3.props.className + '-handle') { | ||
return true; | ||
} | ||
if (dom.parentNode) { | ||
return _this3.getIsHandleDom(dom.parentNode); | ||
} | ||
return false; | ||
}; | ||
if (_this.props.position === 'left') { | ||
if (_this.props.open && _this.state.touchStartX < _this.state.sidebarWidth) { | ||
if (_this.state.touchCurrentX > _this.state.touchStartX) { | ||
return _this.state.sidebarWidth; | ||
} | ||
return _this.state.sidebarWidth - _this.state.touchStartX + _this.state.touchCurrentX; | ||
} | ||
return Math.min(_this.state.touchCurrentX, _this.state.sidebarWidth); | ||
this.removeScroll = function (e) { | ||
if (!_this3.props.showMask) { | ||
return; | ||
} | ||
var dom = e.target; | ||
var scrollDom = _this3.getScollDom(dom); | ||
if (dom === _this3.maskDom || _this3.getIsHandleDom(dom) || !scrollDom) { | ||
if (e.preventDefault) { | ||
e.preventDefault(); | ||
} | ||
}; | ||
e.returnValue = false; | ||
return; | ||
} | ||
_this.touchSidebarHeight = function () { | ||
// if the sidebar is open and start point of drag is inside the sidebar | ||
// we will only drag the distance they moved their finger | ||
// otherwise we will move the sidebar to be below the finger. | ||
if (_this.props.position === 'bottom') { | ||
if (_this.props.open && window.innerHeight - _this.state.touchStartY < _this.state.sidebarHeight) { | ||
if (_this.state.touchCurrentY > _this.state.touchStartY) { | ||
return _this.state.sidebarHeight + _this.state.touchStartY - _this.state.touchCurrentY; | ||
} | ||
return _this.state.sidebarHeight; | ||
} | ||
return Math.min(window.innerHeight - _this.state.touchCurrentY, _this.state.sidebarHeight); | ||
var y = e.deltaY; | ||
var x = e.deltaX; | ||
if (e.type === 'touchmove') { | ||
if (e.touches.length > 1 || !_this3.mousePos) { | ||
return; | ||
} | ||
if (_this.props.position === 'top') { | ||
var touchStartOffsetY = _this.state.touchStartY - _this.state.sidebarTop; | ||
if (_this.props.open && touchStartOffsetY < _this.state.sidebarHeight) { | ||
if (_this.state.touchCurrentY > _this.state.touchStartY) { | ||
return _this.state.sidebarHeight; | ||
} | ||
return _this.state.sidebarHeight - _this.state.touchStartY + _this.state.touchCurrentY; | ||
} | ||
return Math.min(_this.state.touchCurrentY - _this.state.dragHandleTop, _this.state.sidebarHeight); | ||
var touches = e.touches[0]; | ||
// δΈζ»δΈΊζ£οΌδΈζ»δΈΊθ΄ | ||
y = _this3.mousePos.y - touches.pageY; | ||
x = _this3.mousePos.x - touches.pageX; | ||
} | ||
// η«ε | ||
var scrollTop = scrollDom.scrollTop; | ||
var height = scrollDom.clientHeight; | ||
var scrollHeight = scrollDom.scrollHeight; | ||
var isScrollY = scrollHeight - height > 2; | ||
var maxOrMinScrollY = isScrollY && (scrollTop <= 0 && y < 0 || scrollTop + height >= scrollHeight && y > 0); | ||
// ζ¨ͺε | ||
var width = scrollDom.clientWidth; | ||
var scrollLeft = scrollDom.scrollLeft; | ||
var scrollWidth = scrollDom.scrollWidth; | ||
var isScrollX = scrollWidth - width > 2; | ||
var maxOrMinScrollX = scrollWidth - width > 2 && (scrollLeft <= 0 && x < 0 || scrollLeft + width >= scrollWidth && x > 0); | ||
if (!isScrollY && !isScrollX || maxOrMinScrollY || maxOrMinScrollX) { | ||
if (e.preventDefault) { | ||
e.preventDefault(); | ||
} | ||
}; | ||
e.returnValue = false; | ||
return; | ||
} | ||
}; | ||
_this.renderStyle = function (_ref) { | ||
var sidebarStyle = _ref.sidebarStyle, | ||
isTouching = _ref.isTouching, | ||
overlayStyle = _ref.overlayStyle, | ||
contentStyle = _ref.contentStyle; | ||
this.setLevelDomTransform = function (open, openTransition, placementName, value) { | ||
var _props = _this3.props, | ||
placement = _props.placement, | ||
levelTransition = _props.levelTransition, | ||
onChange = _props.onChange; | ||
if (_this.props.position === 'right' || _this.props.position === 'left') { | ||
sidebarStyle.transform = 'translateX(0%)'; | ||
sidebarStyle.WebkitTransform = 'translateX(0%)'; | ||
if (isTouching) { | ||
var percentage = _this.touchSidebarWidth() / _this.state.sidebarWidth; | ||
// slide open to what we dragged | ||
if (_this.props.position === 'right') { | ||
sidebarStyle.transform = 'translateX(' + (1 - percentage) * 100 + '%)'; | ||
sidebarStyle.WebkitTransform = 'translateX(' + (1 - percentage) * 100 + '%)'; | ||
} | ||
if (_this.props.position === 'left') { | ||
sidebarStyle.transform = 'translateX(-' + (1 - percentage) * 100 + '%)'; | ||
sidebarStyle.WebkitTransform = 'translateX(-' + (1 - percentage) * 100 + '%)'; | ||
} | ||
// fade overlay to match distance of drag | ||
overlayStyle.opacity = percentage; | ||
overlayStyle.visibility = 'visible'; | ||
} | ||
if (contentStyle) { | ||
contentStyle[_this.props.position] = _this.state.sidebarWidth + 'px'; | ||
} | ||
_this3.levelDom.forEach(function (dom) { | ||
if (_this3.isOpenChange || openTransition) { | ||
dom.style.transition = levelTransition; | ||
dom.addEventListener(_utils.transitionEnd, _this3.trnasitionEnd); | ||
} | ||
if (_this.props.position === 'top' || _this.props.position === 'bottom') { | ||
sidebarStyle.transform = 'translateY(0%)'; | ||
sidebarStyle.WebkitTransform = 'translateY(0%)'; | ||
if (isTouching) { | ||
var _percentage = _this.touchSidebarHeight() / _this.state.sidebarHeight; | ||
// slide open to what we dragged | ||
if (_this.props.position === 'bottom') { | ||
sidebarStyle.transform = 'translateY(' + (1 - _percentage) * 100 + '%)'; | ||
sidebarStyle.WebkitTransform = 'translateY(' + (1 - _percentage) * 100 + '%)'; | ||
var placementPos = placement === 'left' || placement === 'top' ? value : -value; | ||
dom.style.transform = open ? placementName + '(' + placementPos + 'px)' : ''; | ||
}); | ||
// ε€η body ζ»ε¨ | ||
if (!windowIsUndefined) { | ||
var passiveSupported = false; | ||
try { | ||
window.addEventListener('test', null, Object.defineProperty({}, 'passive', { | ||
get: function get() { | ||
passiveSupported = true; | ||
} | ||
if (_this.props.position === 'top') { | ||
sidebarStyle.transform = 'translateY(-' + (1 - _percentage) * 100 + '%)'; | ||
sidebarStyle.WebkitTransform = 'translateY(-' + (1 - _percentage) * 100 + '%)'; | ||
} | ||
// fade overlay to match distance of drag | ||
overlayStyle.opacity = _percentage; | ||
overlayStyle.visibility = 'visible'; | ||
} | ||
if (contentStyle) { | ||
contentStyle[_this.props.position] = _this.state.sidebarHeight + 'px'; | ||
} | ||
})); | ||
} catch (err) { | ||
console.log(err); | ||
} | ||
}; | ||
_this.state = { | ||
// the detected width of the sidebar in pixels | ||
sidebarWidth: 0, | ||
sidebarHeight: 0, | ||
sidebarTop: 0, | ||
dragHandleTop: 0, | ||
// keep track of touching params | ||
touchIdentifier: null, | ||
touchStartX: null, | ||
touchStartY: null, | ||
touchCurrentX: null, | ||
touchCurrentY: null, | ||
// if touch is supported by the browser | ||
touchSupported: (typeof window === 'undefined' ? 'undefined' : (0, _typeof3['default'])(window)) === 'object' && 'ontouchstart' in window | ||
}; | ||
return _this; | ||
} | ||
(0, _createClass3['default'])(Drawer, [{ | ||
key: 'componentDidMount', | ||
value: function componentDidMount() { | ||
this.saveSidebarSize(); | ||
} | ||
}, { | ||
key: 'componentDidUpdate', | ||
value: function componentDidUpdate() { | ||
// filter out the updates when we're touching | ||
if (!this.isTouching()) { | ||
this.saveSidebarSize(); | ||
var passive = passiveSupported ? { passive: false } : false; | ||
if (open) { | ||
document.body.addEventListener('mousewheel', _this3.removeScroll); | ||
document.body.addEventListener('touchmove', _this3.removeScroll, passive); | ||
} else { | ||
document.body.removeEventListener('mousewheel', _this3.removeScroll); | ||
document.body.removeEventListener('touchmove', _this3.removeScroll, passive); | ||
} | ||
} | ||
if (onChange && _this3.isOpenChange) { | ||
onChange(open); | ||
_this3.isOpenChange = false; | ||
} | ||
}; | ||
// This logic helps us prevents the user from sliding the sidebar horizontally | ||
// while scrolling the sidebar vertically. When a scroll event comes in, we're | ||
// cancelling the ongoing gesture if it did not move horizontally much. | ||
this.getChildToRender = function () { | ||
var _classnames; | ||
var open = _this3.props.open !== undefined ? _this3.props.open : _this3.state.open; | ||
var _props2 = _this3.props, | ||
className = _props2.className, | ||
prefixCls = _props2.prefixCls, | ||
style = _props2.style, | ||
placement = _props2.placement, | ||
children = _props2.children, | ||
handleChild = _props2.handleChild, | ||
handleStyle = _props2.handleStyle, | ||
showMask = _props2.showMask, | ||
maskStyle = _props2.maskStyle; | ||
// True if the on going gesture X distance is less than the cancel distance | ||
// calculate the sidebarWidth based on current touch info | ||
// calculate the sidebarHeight based on current touch info | ||
}, { | ||
key: 'render', | ||
value: function render() { | ||
var _rootCls, | ||
_this2 = this; | ||
var _props = this.props, | ||
className = _props.className, | ||
style = _props.style, | ||
prefixCls = _props.prefixCls, | ||
position = _props.position, | ||
transitions = _props.transitions, | ||
touch = _props.touch, | ||
enableDragHandle = _props.enableDragHandle, | ||
sidebar = _props.sidebar, | ||
children = _props.children, | ||
docked = _props.docked, | ||
open = _props.open; | ||
var sidebarStyle = (0, _extends3['default'])({}, this.props.sidebarStyle); | ||
var contentStyle = (0, _extends3['default'])({}, this.props.contentStyle); | ||
var overlayStyle = (0, _extends3['default'])({}, this.props.overlayStyle); | ||
var rootCls = (_rootCls = {}, (0, _defineProperty3['default'])(_rootCls, className, !!className), (0, _defineProperty3['default'])(_rootCls, prefixCls, true), (0, _defineProperty3['default'])(_rootCls, prefixCls + '-' + position, true), _rootCls); | ||
var rootProps = { style: style }; | ||
var isTouching = this.isTouching(); | ||
if (isTouching) { | ||
this.renderStyle({ sidebarStyle: sidebarStyle, isTouching: true, overlayStyle: overlayStyle }); | ||
} else if (docked) { | ||
if (this.state.sidebarWidth !== 0) { | ||
rootCls[prefixCls + '-docked'] = true; | ||
this.renderStyle({ sidebarStyle: sidebarStyle, contentStyle: contentStyle }); | ||
var wrapperClassname = (0, _classnames3['default'])(prefixCls, (_classnames = {}, (0, _defineProperty3['default'])(_classnames, prefixCls + '-' + placement, true), (0, _defineProperty3['default'])(_classnames, prefixCls + '-open', open), (0, _defineProperty3['default'])(_classnames, className, !!className), _classnames)); | ||
var value = _this3.contextDom ? _this3.contextDom.getBoundingClientRect()[placement === 'left' || placement === 'right' ? 'width' : 'height'] : 0; | ||
var placementName = 'translate' + (placement === 'left' || placement === 'right' ? 'X' : 'Y'); | ||
// ηΎεζ―δΈεη΄ ε¨η»δΈεζ₯οΌη¬¬δΈζ¬‘ζη¨εε ¨η¨εη΄ ε¨η»γ | ||
var defaultValue = !_this3.contextDom ? '100%' : value + 'px'; | ||
var placementPos = placement === 'left' || placement === 'top' ? '-' + defaultValue : defaultValue; | ||
var transform = open ? '' : placementName + '(' + placementPos + ')'; | ||
if (_this3.isOpenChange === undefined || _this3.isOpenChange) { | ||
_this3.setLevelDomTransform(open, false, placementName, value); | ||
} | ||
return _react2['default'].createElement( | ||
'div', | ||
{ className: wrapperClassname, style: style }, | ||
showMask && _react2['default'].createElement('div', { | ||
className: prefixCls + '-mask', | ||
onClick: _this3.onMaskTouchEnd, | ||
style: maskStyle, | ||
ref: function ref(c) { | ||
_this3.maskDom = c; | ||
} | ||
} else if (open) { | ||
rootCls[prefixCls + '-open'] = true; | ||
this.renderStyle({ sidebarStyle: sidebarStyle }); | ||
overlayStyle.opacity = 1; | ||
overlayStyle.visibility = 'visible'; | ||
} | ||
if (isTouching || !transitions) { | ||
sidebarStyle.transition = 'none'; | ||
sidebarStyle.WebkitTransition = 'none'; | ||
contentStyle.transition = 'none'; | ||
overlayStyle.transition = 'none'; | ||
} | ||
var dragHandle = null; | ||
if (this.state.touchSupported && touch) { | ||
if (open) { | ||
rootProps.onTouchStart = function (ev) { | ||
_this2.notTouch = true; | ||
_this2.onTouchStart(ev); | ||
}; | ||
rootProps.onTouchMove = this.onTouchMove; | ||
rootProps.onTouchEnd = this.onTouchEnd; | ||
rootProps.onTouchCancel = this.onTouchEnd; | ||
rootProps.onScroll = this.onScroll; | ||
} else if (enableDragHandle) { | ||
dragHandle = _react2['default'].createElement('div', { className: prefixCls + '-draghandle', style: this.props.dragHandleStyle, | ||
onTouchStart: this.onTouchStart, onTouchMove: this.onTouchMove, | ||
onTouchEnd: this.onTouchEnd, onTouchCancel: this.onTouchEnd, | ||
ref: 'dragHandle' | ||
}); | ||
} | ||
} | ||
// const evt = {}; | ||
// // FastClick use touchstart instead of click | ||
// if (this.state.touchSupported) { | ||
// evt.onTouchStart = () => { | ||
// this.notTouch = true; | ||
// this.onOverlayClicked(); | ||
// }; | ||
// evt.onTouchEnd = () => { | ||
// this.notTouch = false; | ||
// this.setState({ | ||
// touchIdentifier: null, | ||
// }); | ||
// }; | ||
// } else { | ||
// evt.onClick = this.onOverlayClicked; | ||
// } | ||
return _react2['default'].createElement( | ||
}), | ||
_react2['default'].createElement( | ||
'div', | ||
(0, _extends3['default'])({ className: (0, _classnames2['default'])(rootCls) }, rootProps), | ||
{ | ||
className: prefixCls + '-content-wrapper', | ||
style: { transform: transform } | ||
}, | ||
_react2['default'].createElement( | ||
'div', | ||
{ className: prefixCls + '-sidebar', style: sidebarStyle, | ||
ref: 'sidebar' | ||
{ | ||
className: prefixCls + '-content', | ||
onTouchStart: _this3.onScrollTouchStart, | ||
onTouchEnd: _this3.onScrollTouchEnd, | ||
ref: function ref(c) { | ||
_this3.contextDom = c; | ||
} | ||
}, | ||
sidebar | ||
children | ||
), | ||
_react2['default'].createElement('div', { className: prefixCls + '-overlay', | ||
style: overlayStyle, | ||
role: 'presentation', | ||
ref: 'overlay', | ||
onClick: this.onOverlayClicked | ||
}), | ||
_react2['default'].createElement( | ||
handleChild && _react2['default'].createElement( | ||
'div', | ||
{ className: prefixCls + '-content', style: contentStyle, | ||
ref: 'content' | ||
{ | ||
className: prefixCls + '-handle', | ||
onClick: _this3.onIconTouchEnd, | ||
style: handleStyle, | ||
ref: function ref(c) { | ||
_this3.handleDom = c; | ||
} | ||
}, | ||
dragHandle, | ||
children | ||
handleChild | ||
) | ||
); | ||
) | ||
); | ||
}; | ||
this.defaultGetContainer = function () { | ||
if (windowIsUndefined) { | ||
return null; | ||
} | ||
}]); | ||
return Drawer; | ||
}(_react2['default'].Component); | ||
var container = document.createElement('div'); | ||
_this3.parent.appendChild(container); | ||
if (_this3.props.wrapperClassName) { | ||
container.className = _this3.props.wrapperClassName; | ||
} | ||
return container; | ||
}; | ||
}; | ||
Drawer.propTypes = { | ||
prefixCls: _propTypes2['default'].string, | ||
className: _propTypes2['default'].string, | ||
// main content to render | ||
children: _propTypes2['default'].node.isRequired, | ||
// styles | ||
// styles: PropTypes.shape({ | ||
// dragHandle: PropTypes.object, | ||
// }), | ||
style: _propTypes2['default'].object, | ||
sidebarStyle: _propTypes2['default'].object, | ||
contentStyle: _propTypes2['default'].object, | ||
overlayStyle: _propTypes2['default'].object, | ||
dragHandleStyle: _propTypes2['default'].object, | ||
// sidebar content to render | ||
sidebar: _propTypes2['default'].node.isRequired, | ||
// boolean if sidebar should be docked | ||
docked: _propTypes2['default'].bool, | ||
// boolean if sidebar should slide open | ||
open: _propTypes2['default'].bool, | ||
// boolean if transitions should be disabled | ||
transitions: _propTypes2['default'].bool, | ||
// boolean if touch gestures are enabled | ||
touch: _propTypes2['default'].bool, | ||
enableDragHandle: _propTypes2['default'].bool, | ||
// where to place the sidebar | ||
position: _propTypes2['default'].oneOf(['left', 'right', 'top', 'bottom']), | ||
// distance we have to drag the sidebar to toggle open state | ||
dragToggleDistance: _propTypes2['default'].number, | ||
// callback called when the overlay is clicked | ||
onOpenChange: _propTypes2['default'].func | ||
}; | ||
Drawer.defaultProps = { | ||
prefixCls: 'rc-drawer', | ||
sidebarStyle: {}, | ||
contentStyle: {}, | ||
overlayStyle: {}, | ||
dragHandleStyle: {}, | ||
docked: false, | ||
open: false, | ||
transitions: true, | ||
touch: true, | ||
enableDragHandle: true, | ||
position: 'left', | ||
dragToggleDistance: 30, | ||
onOpenChange: function onOpenChange() {} | ||
}; | ||
exports['default'] = Drawer; | ||
module.exports = exports['default']; |
{ | ||
"name": "rc-drawer", | ||
"version": "0.4.11", | ||
"description": "drawer ui component for react", | ||
"version": "1.2.0", | ||
"description": "drawer component for react", | ||
"keywords": [ | ||
@@ -9,53 +9,64 @@ "react", | ||
"react-drawer", | ||
"drawer" | ||
"drawer", | ||
"drawer-menu", | ||
"rc-drawer-menu", | ||
"react-drawer-menu", | ||
"animation", | ||
"drawer-motion", | ||
"drawer-animation" | ||
], | ||
"engines": { | ||
"node": ">=4.0.0" | ||
"homepage": "https://github.com/ant-motion/drawer", | ||
"author": "155259966@qq.com", | ||
"repository": { | ||
"type": "git", | ||
"url": "https://github.com/ant-motion/drawer.git" | ||
}, | ||
"homepage": "https://github.com/react-component/drawer", | ||
"author": "", | ||
"repository": "react-component/drawer", | ||
"bugs": "https://github.com/react-component/drawer/issues", | ||
"bugs": { | ||
"url": "https://github.com/ant-motion/drawer/issues" | ||
}, | ||
"files": [ | ||
"es", | ||
"lib", | ||
"assets/*.css" | ||
"assets/*.css", | ||
"dist", | ||
"es" | ||
], | ||
"license": "MIT", | ||
"licenses": "MIT", | ||
"main": "./lib/index", | ||
"module": "./es/index", | ||
"config": { | ||
"port": 8099 | ||
"port": 8009, | ||
"entry": { | ||
"rc-drawer": [ | ||
"./assets/index.less", | ||
"./src/index.js" | ||
] | ||
} | ||
}, | ||
"scripts": { | ||
"dist": "rc-tools run dist", | ||
"build": "rc-tools run build", | ||
"dist": "rc-tools run dist", | ||
"compile": "rc-tools run compile --babel-runtime", | ||
"gh-pages": "rc-tools run gh-pages", | ||
"start": "rc-tools run server", | ||
"compile": "rc-tools run compile --babel-runtime", | ||
"pub": "rc-tools run pub --babel-runtime", | ||
"lint": "rc-tools run lint", | ||
"test": "jest", | ||
"coverage": "jest --coverage && cat ./coverage/lcov.info | coveralls" | ||
"karma": "rc-test run karma", | ||
"saucelabs": "rc-test run saucelabs", | ||
"test": "rc-test run test", | ||
"chrome-test": "rc-test run chrome-test", | ||
"coverage": "rc-test run coverage" | ||
}, | ||
"jest": { | ||
"collectCoverageFrom": [ | ||
"src/**/*" | ||
], | ||
"transform": { | ||
"\\.jsx?$": "./node_modules/rc-tools/scripts/jestPreprocessor.js" | ||
} | ||
}, | ||
"devDependencies": { | ||
"coveralls": "^2.13.1", | ||
"enzyme": "^2.6.0", | ||
"enzyme-to-json": "^1.4.5", | ||
"jest": "^18.0.0", | ||
"antd": "^2.13.8", | ||
"core-js": "^2.5.1", | ||
"expect.js": "0.3.x", | ||
"pre-commit": "1.x", | ||
"precommit-hook": "1.x", | ||
"rc-dialog": "~5.2.1", | ||
"rc-test": "6.x", | ||
"rc-tools": "6.x", | ||
"react": "15.x", | ||
"react-dom": "15.x", | ||
"react-test-renderer": "^15.6.1" | ||
"react": "^16.0.0", | ||
"react-dom": "^16.0.0" | ||
}, | ||
"pre-commit": [ | ||
"precommit": [ | ||
"lint" | ||
@@ -65,5 +76,5 @@ ], | ||
"babel-runtime": "6.x", | ||
"classnames": "^2.2.4", | ||
"prop-types": "^15.5.10" | ||
"classnames": "^2.2.5", | ||
"prop-types": "^15.5.0" | ||
} | ||
} |
107
README.md
# rc-drawer | ||
--- | ||
React Drawer Component | ||
[![NPM version][npm-image]][npm-url] | ||
[![build status][travis-image]][travis-url] | ||
[![Test coverage][coveralls-image]][coveralls-url] | ||
[![gemnasium deps][gemnasium-image]][gemnasium-url] | ||
[![node version][node-image]][node-url] | ||
[![npm download][download-image]][download-url] | ||
@@ -19,4 +16,2 @@ | ||
[coveralls-url]: https://coveralls.io/r/react-component/drawer?branch=master | ||
[gemnasium-image]: http://img.shields.io/gemnasium/react-component/drawer.svg?style=flat-square | ||
[gemnasium-url]: https://gemnasium.com/react-component/drawer | ||
[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square | ||
@@ -27,80 +22,58 @@ [node-url]: http://nodejs.org/download/ | ||
## Example | ||
## Screenshots | ||
http://react-component.github.io/drawer/examples/ | ||
<img src="https://os.alipayobjects.com/rmsportal/gqhazYYGIaUmunx.png" width="288"/> | ||
## Usage | ||
```js | ||
import Drawer from 'rc-drawer'; | ||
import React from 'react'; | ||
import ReactDom from 'react-dom'; | ||
## Development | ||
ReactDom.render( | ||
<Drawer> | ||
{menu children} | ||
</Drawer> | ||
, mountNode); | ||
``` | ||
npm install | ||
npm start | ||
``` | ||
## Example | ||
## Install | ||
http://localhost:8099/examples/ | ||
online example: http://react-component.github.io/drawer/ | ||
## install | ||
[](https://npmjs.org/package/rc-drawer) | ||
## Browser Support | ||
## Usage | ||
| |  |  |  | | | ||
| --- | --- | --- | --- | --- | | ||
| IE 10+ β | Chrome 31.0+ β | Firefox 31.0+ β | Opera 30.0+ β | Safari 7.0+ β | | ||
```js | ||
var Drawer = require('rc-drawer'); | ||
var React = require('react'); | ||
React.render(<Drawer />, container); | ||
``` | ||
## API | ||
### props | ||
| props | type | default | description | | ||
|------------|----------------|---------|----------------| | ||
| className | string | null | - | | ||
| prefixCls | string | 'drawer' | prefix class | | ||
| wrapperClassName | string | null | wrapper class name | | ||
| open | boolean | false | open or close menu | | ||
| defaultOpen | boolean | false | default open menu | | ||
| handleChild | boolean / ReactElement | true | true or false or ReactElement | | ||
| handleStyle | object | null | handle style | | ||
| placement | string | `left` | `left` `top` `right` `bottom` | | ||
| level | string or array | `all` | With the drawer level element. `all`/ null / className / id / tagName / array | | ||
| levelTransition | string | `transform .3s cubic-bezier(0.78, 0.14, 0.15, 0.86)` | level css transition | | ||
| getContainer | string | `body` | Return the mount node for Drawer. if is `null` use React.creactElement | | ||
| showMask | boolean | true | mask is show | | ||
| maskStyle | object | null | mask style | | ||
| onChange | func | null | change callback(open) | | ||
| onMaskClick | func | null | mask close click function | | ||
| onHandleClick | func | nul | handle icon click function | | ||
| Property name | Description | Type | Default | | ||
|---------------|-------------|------|---------| | ||
| className | additional css class of root dom node | String | '' | | ||
| prefixCls | prefix class | String | 'rc-drawer' | | ||
| children | The main content | any | n/a | | ||
| sidebarStyle | Inline styles. | Object | {} | | ||
| contentStyle | Inline styles. | Object | {} | | ||
| overlayStyle | Inline styles. | Object | {} | | ||
| dragHandleStyle | Inline styles. | Object | {} | | ||
| sidebar | The sidebar content | any | n/a | | ||
| onOpenChange | Callback called when the sidebar wants to change the open prop. Happens after sliding the sidebar and when the overlay is clicked when the sidebar is open. | Function | n/a | | ||
| open | If the sidebar should be open | Boolean | false | | ||
| position | where to place the sidebar | String | 'left', enum{'left', 'right', 'top', 'bottom'} | | ||
| docked | If the sidebar should be docked in document | Boolean | false | | ||
| transitions | If transitions should be enabled | Boolean | true | | ||
| touch | If touch gestures should be enabled | Boolean | true | | ||
| enableDragHandle | If dragHandle should be enabled | Boolean | true | | ||
| dragToggleDistance | Distance the sidebar has to be dragged before it will open/close after it is released. | Number | 30 | | ||
> 1.0 remove `openClassName` `width`, update `iconChild` -> `handleChild` `onIconClick` -> `onHandleClick` `parent` -> `getContainer`, add `handleStyle` `showMask`. | ||
> change from [https://github.com/balloob/react-sidebar](https://github.com/balloob/react-sidebar) | ||
## Development | ||
## Test Case | ||
``` | ||
npm test | ||
npm run chrome-test | ||
npm install | ||
npm start | ||
``` | ||
## Coverage | ||
``` | ||
npm run coverage | ||
``` | ||
open coverage/ dir | ||
## License | ||
rc-drawer is released under the MIT license. |
Sorry, the diff of this file is not supported yet
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Uses eval
Supply chain riskPackage uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.
Found 1 instance in 1 package
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 2 instances in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
URL strings
Supply chain riskPackage contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.
Found 1 instance in 1 package
No contributors or author data
MaintenancePackage does not specify a list of contributors or an author in package.json.
Found 1 instance in 1 package
No bug tracker
MaintenancePackage does not have a linked bug tracker in package.json.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
331754
658.45%18
125%4113
318.84%0
-100%10
11.11%78
-25.71%11
1000%4
Infinity%Updated
Updated