codingfishman / react-scroll-pagination Goto Github PK

npm view react-scroll-pagination

{ name: 'react-scroll-pagination',
  description: 'A component for pagination with scrolling',
  'dist-tags': { latest: '0.1.9' },
  versions:
   [ '0.1.0',
     '0.1.1',
     '0.1.2',
     '0.1.3',
     '0.1.4',
     '0.1.5',
     '0.1.6',
     '0.1.7',
     '0.1.8',
     '0.1.9' ],
  maintainers: [ 'codingfishman <[email protected]>' ],
  time:
   { modified: '2016-05-08T08:02:14.967Z',
     created: '2016-04-10T11:43:45.522Z',
     '0.1.0': '2016-04-10T11:43:45.522Z',
     '0.1.1': '2016-04-10T11:48:25.634Z',
     '0.1.2': '2016-04-10T12:52:34.946Z',
     '0.1.3': '2016-04-10T13:24:57.398Z',
     '0.1.4': '2016-04-10T14:10:33.436Z',
     '0.1.5': '2016-04-10T15:08:59.110Z',
     '0.1.6': '2016-04-10T15:31:27.948Z',
     '0.1.7': '2016-04-16T12:13:38.509Z',
     '0.1.8': '2016-04-24T14:23:52.112Z',
     '0.1.9': '2016-05-08T08:02:14.967Z' },
  homepage: 'https://github.com/codingfishman/react-scroll-pagination#readme',
  keywords: [ 'react', 'pagination', '翻页', '滑动翻页', '当前页', '翻页状态' ],
  repository:
   { type: 'git',
     url: 'git+https://github.com/codingfishman/react-scroll-pagination.git' },
  author: 'codingfishman',
  bugs: { url: 'https://github.com/codingfishman/react-scroll-pagination/issues' },
  license: 'MIT',
  readmeFilename: 'README.md',
  version: '0.1.9',
  main: 'dist/index.js',
  scripts: { test: 'jest --no-watchman' },
  dependencies: { jquery: '^1.0.0' },
  devDependencies:
   { 'babel-eslint': '^6.0.3',
     'babel-jest': '^9.0.0',
     'babel-preset-es2015': '^6.6.0',
     'babel-preset-react': '^6.5.0',
     eslint: '^2.8.0',
     'eslint-plugin-flow-vars': '^0.3.0',
     'gulp-babel': '^6.1.2',
     'jest-cli': '*',
     jscs: '^3.0.3',
     react: '~0.14.0',
     'react-addons-test-utils': '~0.14.0',
     'react-dom': '^0.14.0' },
  jest:
   { unmockedModulePathPatterns:
      [ '<rootDir>/node_modules/react',
        '<rootDir>/node_modules/react-dom',
        '<rootDir>/node_modules/react-addons-test-utils',
        '<rootDir>/node_modules/jquery' ],
     collectCoverage: true },
  gitHead: '6643624bbad6e1c0ddcd36161837f102f3f27849',
  dist:
   { shasum: '73dfca721d8da7a6405df04afe4b516aa3ff2934',
     tarball: 'https://registry.npmjs.org/react-scroll-pagination/-/react-scroll-pagination-0.1.9.tgz' },
  directories: {} }```

fetchFunction is undefined

I have a container in the middle of my website and I would like that when it reached the bottom of the container will run pagination, is this possible?

Is it possible this feature in React Table , I Want to apply pagination at react table scroll down/up .

import ReactScrollPagination from "react-scroll-pagination";

webpack==>>error
WARNING in ./~/react/lib/KeyEscapeUtils.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

WARNING in ./~/React/lib/KeyEscapeUtils.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

WARNING in ./~/react/lib/ReactPropTypeLocationNames.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

WARNING in ./~/React/lib/ReactPropTypeLocationNames.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

WARNING in ./~/react/lib/ReactPropTypesSecret.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

WARNING in ./~/React/lib/ReactPropTypesSecret.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.
webpack building...
webpack built 1063cf63ba2b95d3ce8c in 4777ms

./~/react-scroll-pagination/dist/index.js
Module not found: /Users/me/Projects/product-catalogue/node_modules/react-scroll-pagination/node_modules/React/react.js does not match the corresponding path on disk react.

Same happens with jQuery also. This was just after updating to the new version. I just checked the commit changes.

In webpack.config.js

https://github.com/codingfishman/react-scroll-pagination/blob/master/webpack.config.js#L9

changing

externals: { react:'React', jquery: 'jQuery' }

to

externals: { react:'react', jquery: 'jquery' }

fixed the issue. Can you please check and confirm. Also the Example fiddle is broken.

if i use 'totalPages = {state.redux.itemList.totalPage} '

error... so, refresh(F5) -> not loading - but menu tab click -> open page

Warning: setState(...): Can only update a mounted or mounting component. this usually means you called setState() on an unmounted component. This is a no-op. Please check~..

I tried to render two components using this module at the same time but its seems that doesn't work. Same list of items, same time reaching the bottom of the screen, but the seconds list doesn't fires the fetchFunc function.

Is it possible to do that with this component?

Thanks.

Hello Sir, Your Code was excellent. I have worked on your web demo and i was able to code it to suit my need. But Am having one serious issue.
The problem is that it keeps on displaying more records as user scroll down the page without stop even when there is no more records in the Json Files or in the database.For instance in the json files or in the database, assuming I have just 2 records, Those two records will keep on replicating as long as I still scroll down the page.
Can someone help me fix this issue so that it can display a message eg (No more Records to Load) once all the records finished displaying as user scroll down the page.I have attached the script along with both Json File. You can add more data to json file and see what am telling you. Thanks

data.json
[{"name":"fred","description":"first"},{"name":"tony","description":"second"}]

here is the script index.html

`

const ReactScrollPagination = React.createClass({
isolate: {
onePageHeight: null,
timeoutFunc: null,
excludeHeight: null,
defaultShowTime: 2000
},
pageDivStle: {
position: 'fixed',
bottom: '15px',
left: 0,
right: 0,
textAlign: 'center'
},
pageContentStyle: {
display: 'inline-block',
background: 'rgba(6, 6, 6, 0.54)',
borderRadius: '5px',
padding: '3px 15px',
minWidth: '80px',
color: '#fff',
textAlign: 'center',
margin: '0 auto',
opacity: 1,
WebkitTransition: 'opacity 0.8s',
MozTransition: 'opacity 0.8s',
OTransition: 'opacity 0.8s',
transition: 'opacity 0.8s'
},
getInitialState: function () {
return {
currentPage: 1,
totalPages: null,
showPageStatus: false
}
},
showPageDiv: function () {
if (this.isolate.timeoutFunc) {
clearTimeout(this.isolate.timeoutFunc)
}
this.setState({showPageStatus: true})
let showTime = this.props.paginationShowTime ? parseInt(this.props.paginationShowTime)
: this.isolate.defaultShowTime

this.isolate.timeoutFunc = setTimeout(() => {
  this.setState({showPageStatus: false})
}, showTime)

},
getExcludeHeight: function () {
if (this.isolate.excludeHeight !== null) {
return this.isolate.excludeHeight
}

let excludeHeight = 0

if (this.props.excludeHeight) {
  let propsExcludeHeight = parseInt(this.props.excludeHeight)
  if (isNaN(propsExcludeHeight)) {
    console.error('WARN: Failed to convert the props excludeHeight "' + this.props.excludeHeight +
      '" to Number, please verify. Will take "0" by default.')
  } else {
    excludeHeight = propsExcludeHeight
  }
} else if (this.props.excludeElement && typeof this.props.excludeElement === 'string') {
  let excludeEle = jQuery(this.props.excludeElement)

  if (excludeEle.size() === 0) {
    console.error('WARN: Failed to get the element with given selectdor "' + this.props.excludeElement +
      '", please veirify. Will take "0" by default.')
  } else {
    excludeHeight = excludeEle.height()
  }
}
this.isolate.excludeHeight = excludeHeight

return excludeHeight

},
initialOnePageHeight: function () {
const documentHeight = jQuery(document).height()

if (typeof this.props.totalPages === 'number' && this.props.totalPages > 0 && this.isolate.onePageHeight === null) {
  let excludeHeight = this.getExcludeHeight()
  this.isolate.onePageHeight = documentHeight - excludeHeight
}

},
handlePageValue: function () {

this.initialOnePageHeight()

let windowHeight = jQuery(window).height()
let scrollTop = jQuery(window).scrollTop() + windowHeight - this.getExcludeHeight()

if (this.isolate.onePageHeight !== null) {
  let currentPage = Math.ceil(scrollTop / this.isolate.onePageHeight) || 1
  this.setState({currentPage: currentPage})
  this.showPageDiv()
}

},
scrollHanlder: function () {
let documentHeight = jQuery(document).height()

let windowHeight = jQuery(window).height()
let scrollBottom = jQuery(window).scrollTop() + windowHeight

if ((scrollBottom + 30) >= documentHeight) {
  this.props.fetchFunc()
}
this.handlePageValue()

},
componentWillUnmount: function () {
jQuery(window).unbind('scroll', this.scrollHanlder)
},
componentDidMount: function () {
jQuery(window).scroll(this.scrollHanlder)
},

render: function () {
let acutalPageContentDivStyle = jQuery.extend({}, this.props.innerDivStyle || this.pageContentStyle)

if (!this.state.showPageStatus) {
  acutalPageContentDivStyle.opacity = 0
}

// let actualDiv = this.state.showPageStatus ? withPageDiv : null
return (
  <div style={this.props.outterDivStyle || this.pageDivStle} >
    <div style={acutalPageContentDivStyle} >
      <span >
        {this.state.currentPage}
      </span>
      /
      <span >
        {this.props.totalPages || 1}
      </span>
    </div>
  </div>
)

}
})

// pagination ends

// THE REAL CODE
const Item = React.createClass({
itemStyle: {
overflow: 'hidden',
background: '#fff',
padding: '7px 15px 8px',
color: '#777',
lineHeight: '1.5',
fontSize: '12px',
fontFamily: 'PingFangSC-Light, Roboto, sans-serif, Helvetica',
borderBottom: '1px solid #ccc'
},
titleStyle: {
fontSize: '14px',
color: '#333'
},
indexStyle: {
color: '#5cb85c',
fontSize: '20px',
float: 'left'
},
render: function () {
return (

const List = React.createClass({
isolate: {
pageNo: 0,
isRequesting: false,
totalPages: 0
},
getInitialState: function () {
return {
totalPages: 0,
list: []
}
},
generateList: function () {
let result = []
for (let i = 0; i< 15; i++) {
result.push({
name: 'Item Name',
description: 'Scroll DOWN to load next page, and UP to see current position.'
})
}
return result
},
getNextPage: function () {
let self = this
if (this.isolate.isRequesting || (this.isolate.pageNo > 0 && this.isolate.pageNo >= this.isolate.totalPages)) {

  return
}
this.isolate.pageNo ++
this.isolate.isRequesting = true

let jqXhr = $.ajax({
type: 'POST',
url: 'data.json',
//url: 'data.php',
dataType: 'json',
data: {
pageNo: this.isolate.pageNo,
json: JSON.stringify({
totalPages: 5,
list: this.generateList()
}),
delay: 0.1
}
})

jqXhr.done((result) => {
    this.isolate.isRequesting = false
    this.isolate.totalPages = result.totalPages
    let newList = this.state.list.concat(result)
    this.setState({
        totalPages: result.totalPages,
        list: newList
    })
})

jqXhr.fail((reason) => {
   this.isolate.isRequesting = false
   this.isolate.pageNo --
   console.error('Loading next page failed')
})

},
componentDidMount: function () {
this.getNextPage()
},
render: function () {
console.log(this.state.list);
let listItemDiv = this.state.list.map((obj, index) => {
return (

)
})

return (
    <div >
    {listItemDiv}
    <ReactScrollPagination
        fetchFunc={this.getNextPage}
      totalPages={this.state.totalPages}
    />
  </div>
)

}
})

const APP = React.createClass({
render: function() {
return ;
}
});

ReactDOM.render(
,
document.getElementById('container')
);

Hello
The demo looks great but I wouldn't able to use it...
Could you please add example use case - how to use this repo?
I don't understand exactly what should fetchFunc return?

Thanks a lot!!
Ido