πŸš€ Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more β†’
Socket
Book a DemoInstallSign in
Socket

rc-drawer

Package Overview
Dependencies
Maintainers
1
Versions
136
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

rc-drawer - npm Package Compare versions

Comparing version

to
1.2.0

dist/rc-drawer.css

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"
}
}
# 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
[![rc-drawer](https://nodei.co/npm/rc-drawer.png)](https://npmjs.org/package/rc-drawer)
## Browser Support
## Usage
|![IE](https://github.com/alrra/browser-logos/blob/master/src/edge/edge_48x48.png?raw=true) | ![Chrome](https://github.com/alrra/browser-logos/blob/master/src/chrome/chrome_48x48.png?raw=true) | ![Firefox](https://github.com/alrra/browser-logos/blob/master/src/firefox/firefox_48x48.png?raw=true) | ![Opera](https://github.com/alrra/browser-logos/blob/master/src/opera/opera_48x48.png?raw=true) | ![Safari](https://github.com/alrra/browser-logos/blob/master/src/safari/safari_48x48.png?raw=true)|
| --- | --- | --- | --- | --- |
| 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