zIndex

src/component/index.js

@@ -25,6 +25,7 @@ const dashed = keyframes`
 
 const Component = styled.div`
   position: absolute;
+  z-index: ${props => props.zIndex};
   left: 50%;
   border-radius: 20px;
   width: 40px;
@@ -45,7 +46,7 @@ const DashedCircle = styled.circle`
 
 export default (props, state, children) => {
   const { max, yRefreshing, y, phase } = state
-  const { color, bgColor } = props
+  const { zIndex, color, bgColor } = props
   const p = Math.atan(y / max)
   const pMax = Math.atan(yRefreshing / max)
   const r = Math.PI * 10 * 2
@@ -55,6 +56,7 @@ export default (props, state, children) => {
   return [
     <Component
       key='pull'
+      zIndex={zIndex}
       style={{
         top: Math.max(refreshed ? Math.atan(1) : p, 0) * max - 10,
         transform: `translate(-50%, -100%) scale(${refreshed ? p : 1},${refreshed ? p : 1})`,

src/index.js

@@ -91,7 +91,17 @@ export default class PullRefresh extends Component {
     this._spring.onUpdate = ::this.onSpringUpdate
   }
   render() {
-    const { render, bgColor, color, onRefresh, disabled, as, children, ...props } = this.props
+    const {
+      zIndex,
+      render,
+      bgColor,
+      color,
+      onRefresh,
+      disabled,
+      as,
+      children,
+      ...props
+    } = this.props
     const Container = as
     return (
       <Container
@@ -116,14 +126,8 @@ PullRefresh.propTypes = {
   disabled: PropTypes.bool,
   color: PropTypes.string,
   bgColor: PropTypes.string,
-  render: PropTypes.func
-  // max: PropTypes.number,
-  // offset: PropTypes.number,
-  // size: PropTypes.number,
-  // waitingComponent: PropTypes.oneOfType([ PropTypes.func, PropTypes.bool ]),
-  // pullingComponent: PropTypes.oneOfType([ PropTypes.func, PropTypes.bool ]),
-  // pulledComponent: PropTypes.oneOfType([ PropTypes.func, PropTypes.bool ]),
-  // supportDesktop: PropTypes.bool
+  render: PropTypes.func,
+  zIndex: PropTypes.number
 }
 
 PullRefresh.defaultProps = {
@@ -132,12 +136,6 @@ PullRefresh.defaultProps = {
   disabled: false,
   color: '#787878',
   bgColor: '#fff',
-  render: renderDefault
-  // max: 100,
-  // offset: 0,
-  // size: 40,
-  // waitingComponent: undefined,
-  // pullingComponent: undefined,
-  // pulledComponent: undefined,
-  // supportDesktop: false
+  render: renderDefault,
+  zIndex: undefined
 }