cbvirtua 1.0.105 → 1.0.107

package/better-scroll-dev/better-scroll-dev/packages/react-examples/public/static/css/stylesheet.css

@@ -0,0 +1,241 @@
+* {
+  box-sizing: border-box; }
+
+body {
+  padding: 0;
+  margin: 0;
+  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+  background-color: #fff;
+  color: #606c71; }
+
+a {
+  color: #1e6bb8;
+  text-decoration: none; }
+  a:hover {
+    text-decoration: underline; }
+
+.btn {
+  display: inline-block;
+  margin-bottom: 1rem;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.8);
+  background-color: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.2);
+  border-style: solid;
+  border-width: 1px;
+  border-radius: 0.3rem;
+  transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
+  .btn + .btn {
+    margin-left: 1rem; }
+
+.btn:hover {
+  color: rgba(255, 255, 255, 0.9);
+  text-decoration: none;
+  background-color: rgba(255, 255, 255, 0.2);
+  border-color: rgba(255, 255, 255, 0.3); }
+
+@media screen and (min-width: 42em) and (max-width: 64em) {
+  .btn {
+    font-size: 0.9rem; } }
+
+@media screen and (max-width: 42em) {
+  .btn {
+    display: block;
+    width: 100%;
+    padding: 0.75rem;
+    font-size: 0.9rem; }
+    .btn + .btn {
+      margin-top: 1rem;
+      margin-left: 0; } }
+
+.page-header {
+  color: #fff;
+  text-align: center;
+  font-family: 'Patrick Hand', cursive;
+  background-color: rgba(39,80,255, .7)}
+
+@media screen and (min-width: 64em) {
+  .page-header {
+    padding: 1.5rem 6rem 3rem 6rem; } }
+
+@media screen and (min-width: 42em) and (max-width: 64em) {
+  .page-header {
+    padding: 1.5rem 4rem 2rem 4rem; } }
+
+@media screen and (max-width: 42em) {
+  .page-header {
+    padding: 1.5rem 1rem 1rem 1rem; } }
+
+.project-name {
+  margin-top: 0;
+  margin-bottom: 0.1rem; }
+
+@media screen and (min-width: 64em) {
+  .project-name {
+    font-size: 3.25rem; } }
+
+@media screen and (min-width: 42em) and (max-width: 64em) {
+  .project-name {
+    font-size: 2.25rem; } }
+
+@media screen and (max-width: 42em) {
+  .project-name {
+    font-size: 1.75rem; } }
+
+.project-tagline {
+  margin-bottom: 1rem;
+  font-weight: normal;
+  opacity: 0.7; }
+
+@media screen and (min-width: 64em) {
+  .project-tagline {
+    font-size: 1.25rem; } }
+
+@media screen and (min-width: 42em) and (max-width: 64em) {
+  .project-tagline {
+    font-size: 1.15rem; } }
+
+@media screen and (max-width: 42em) {
+  .project-tagline {
+    font-size: 1rem; } }
+
+.main-content :first-child {
+  margin-top: 0; }
+.main-content img {
+  max-width: 100%; }
+.main-content h1, .main-content h2, .main-content h3, .main-content h4, .main-content h5, .main-content h6 {
+  margin-top: 1rem;
+  margin-bottom: 1rem; }
+.main-content code {
+  padding: 2px 4px;
+  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  font-size: 0.9rem;
+  color: #383e41;
+  background-color: #f3f6fa;
+  border-radius: 0.3rem; }
+.main-content pre {
+  padding: 0.8rem;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  font: 1rem Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  color: #567482;
+  word-wrap: normal;
+  background-color: #f3f6fa;
+  border: solid 1px #dce6f0;
+  border-radius: 0.3rem; }
+  .main-content pre > code {
+    padding: 0;
+    margin: 0;
+    font-size: 0.9rem;
+    color: #567482;
+    word-break: normal;
+    white-space: pre;
+    background: transparent;
+    border: 0; }
+.main-content .highlight {
+  margin-bottom: 1rem; }
+  .main-content .highlight pre {
+    margin-bottom: 0;
+    word-break: normal; }
+.main-content .highlight pre, .main-content pre {
+  padding: 0.8rem;
+  overflow: auto;
+  font-size: 0.9rem;
+  line-height: 1.45;
+  border-radius: 0.3rem; }
+.main-content pre code, .main-content pre tt {
+  display: inline;
+  max-width: initial;
+  padding: 0;
+  margin: 0;
+  overflow: initial;
+  line-height: inherit;
+  word-wrap: normal;
+  background-color: transparent;
+  border: 0; }
+  .main-content pre code:before, .main-content pre code:after, .main-content pre tt:before, .main-content pre tt:after {
+    content: normal; }
+.main-content ul, .main-content ol {
+  margin-top: 0; }
+.main-content blockquote {
+  padding: 0 1rem;
+  margin-left: 0;
+  color: #819198;
+  border-left: 0.3rem solid #dce6f0; }
+  .main-content blockquote > :first-child {
+    margin-top: 0; }
+  .main-content blockquote > :last-child {
+    margin-bottom: 0; }
+.main-content table {
+  display: block;
+  width: 100%;
+  overflow: auto;
+  word-break: normal;
+  word-break: keep-all; }
+  .main-content table th {
+    font-weight: bold; }
+  .main-content table th, .main-content table td {
+    padding: 0.5rem 1rem;
+    border: 1px solid #e9ebec; }
+.main-content dl {
+  padding: 0; }
+  .main-content dl dt {
+    padding: 0;
+    margin-top: 1rem;
+    font-size: 1rem;
+    font-weight: bold; }
+  .main-content dl dd {
+    padding: 0;
+    margin-bottom: 1rem; }
+.main-content hr {
+  height: 2px;
+  padding: 0;
+  margin: 1rem 0;
+  background-color: #eff0f1;
+  border: 0; }
+
+@media screen and (min-width: 64em) {
+  .main-content {
+    padding: 2rem 8rem;
+    margin: 0 auto;
+    font-size: 1.1rem; } }
+
+@media screen and (min-width: 42em) and (max-width: 64em) {
+  .main-content {
+    padding: 2rem 2rem;
+    font-size: 1.1rem; } }
+
+@media screen and (max-width: 42em) {
+  .main-content {
+    padding: 1rem 1rem 2rem 1rem;
+    font-size: 1rem; }
+  iframe {
+    display: none
+  }
+}
+
+.site-footer {
+  padding-top: 2rem;
+  margin-top: 2rem;
+  border-top: solid 1px #d7d7d7; }
+
+.site-footer-owner {
+  display: block;
+  font-weight: bold; }
+
+.site-footer-credits {
+  color: #819198; }
+
+@media screen and (min-width: 64em) {
+  .site-footer {
+    font-size: 1rem; } }
+
+@media screen and (min-width: 42em) and (max-width: 64em) {
+  .site-footer {
+    font-size: 1rem; } }
+
+@media screen and (max-width: 42em) {
+  .site-footer {
+    font-size: 0.9rem; } }

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/App.js

@@ -0,0 +1,109 @@
+import { useHistory } from 'react-router-dom'
+
+import Router from './router'
+
+const examples = [
+  {
+    name: 'core scroll',
+    path: '/core/',
+  },
+  {
+    name: 'observe-dom',
+    path: '/observe-dom/',
+  },
+  {
+    name: 'observe-image',
+    path: '/observe-image/',
+  },
+  {
+    name: 'slide',
+    path: '/slide',
+  },
+  {
+    name: 'zoom',
+    path: '/zoom/',
+  },
+  {
+    name: 'picker',
+    path: '/picker/',
+  },
+  {
+    name: 'pullup',
+    path: '/pullup/',
+  },
+  {
+    name: 'pulldown',
+    path: '/pulldown/',
+  },
+  {
+    name: 'scrollbar',
+    path: '/scrollbar',
+  },
+  {
+    name: 'indicators',
+    path: '/indicators',
+  },
+  {
+    name: 'infinity',
+    path: '/infinity',
+  },
+  {
+    name: 'form',
+    path: '/form',
+  },
+  {
+    name: 'nested-scroll',
+    path: '/nested-scroll',
+  },
+  {
+    name: 'mouse-wheel',
+    path: '/mouse-wheel',
+  },
+  {
+    name: 'movable',
+    path: '/movable',
+  },
+  {
+    name: 'compose plugins',
+    path: '/compose',
+  },
+]
+
+const App = () => {
+  const history = useHistory()
+
+  const goPage = (path) => {
+    history.push(path)
+  }
+
+  return (
+    <>
+      <section className="page-header">
+        <h1 className="project-name">BetterScroll</h1>
+        <h2 className="project-tagline">
+          inspired by iscroll, and it has a better scroll perfermance
+        </h2>
+      </section>
+      <section className="main-content">
+        <div className="example">
+          <ul className="example-list">
+            {examples.map((item) => (
+              <li
+                key={item.name}
+                className="example-item"
+                onClick={() => goPage(item.path)}
+              >
+                <span>{item.name}</span>
+              </li>
+            ))}
+
+            <li className="example-item placeholder"></li>
+          </ul>
+        </div>
+      </section>
+      <Router />
+    </>
+  )
+}
+
+export default App

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/index.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { HashRouter } from 'react-router-dom'
+
+import reportWebVitals from './reportWebVitals'
+import App from './App'
+
+import './index.styl'
+
+ReactDOM.render(
+  <HashRouter>
+    <App />
+  </HashRouter>,
+  document.getElementById('root')
+)
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals()

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/index.styl

@@ -0,0 +1,63 @@
+.page-header
+  h1
+    @media screen and (min-width 42rem)
+      margin-bottom 1rem
+
+    @media screen and (max-width 42rem)
+      margin-bottom 0.5rem
+
+.main-content
+  .site-footer
+    text-align center
+
+    @media screen and (max-width 42rem)
+      margin-top -1rem
+
+.example-list
+  display flex
+  justify-content space-between
+  flex-wrap wrap
+
+  @media screen and (min-width 42rem)
+    margin 2rem 0 2rem 0
+
+  @media screen and (max-width 42rem)
+    margin 1rem 0
+
+  .example-item
+    background-color $color-white
+    padding 0.8rem
+    border 1px solid rgba(0, 0, 0, 0.1)
+    box-shadow 0 1px 2px 0 rgba(0, 0, 0, 0.1)
+    text-align center
+    margin-bottom 1rem
+
+    &.placeholder
+      visibility hidden
+      height 0
+      margin 0
+      padding 0
+
+    @media screen and (min-width 42rem)
+      flex 0 1 28%
+
+    @media screen and (max-width 42rem)
+      flex 0 1 100%
+      margin-bottom 1rem
+
+.view
+  position fixed
+  top 0
+  left 0
+  bottom 0
+  right 0
+  z-index 1
+  padding 20px
+  background #fff
+  transform translate3d(0, 0, 0)
+
+  &.move-enter, &.move-leave-active
+    transform translate3d(100%, 0, 0)
+
+  &.move-enter-active, &.move-leave-active
+    transition transform 0.3s

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/pages/compose/components/pullup-pulldown-outnested.js

@@ -0,0 +1,226 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react'
+import BScroll from '@better-scroll/core'
+import PullDown from '@better-scroll/pull-down'
+import PullUp from '@better-scroll/pull-up'
+import NestedScroll from '@better-scroll/nested-scroll'
+
+BScroll.use(PullDown)
+BScroll.use(PullUp)
+BScroll.use(NestedScroll)
+
+const useStableCallback = (callback) => {
+  const callbackRef = useRef(callback)
+
+  useEffect(() => {
+    callbackRef.current = callback
+  })
+
+  return useCallback((...args) => callbackRef.current(...args), [])
+}
+
+const TIME_BOUNCE = 800
+const REQUEST_TIME = 3000
+const THRESHOLD = 70
+const STOP = 56
+
+const TOP_OUT_ITEMS = [
+  '😀  😁   😂  🤣   😃  🙃',
+  '👆🏻 Pull Down and refresh👆🏻',
+  '🙂  🤔   😄  🤨   😐  🙃',
+  '👆🏻 Pull Down and refresh👆🏻',
+  '😔  😕   🙃  🤑   😲  ☹️',
+  '🙂  🤔  😄  🤨   😐  🙃 ',
+  '👆🏻 Pull Down and refresh👆🏻',
+  '😔  😕   🙃  🤑   😲  ☹️ ',
+]
+
+const BOTTOM_OUT_ITEMS = [
+  '😀  😁   😂  🤣   😃  🙃',
+  '👆🏻 Pull Up and refresh👆🏻',
+  '🙂  🤔   😄  🤨   😐  🙃',
+  '👆🏻 Pull Up and refresh👆🏻',
+  '😔  😕   🙃  🤑   😲  ☹️',
+  '🙂  🤔  😄  🤨   😐  🙃 ',
+  '👆🏻 Pull Up and refresh👆🏻',
+  '😔  😕   🙃  🤑   😲  ☹️ ',
+]
+
+const INNER_ITEMS = [
+  'The Mountain top of Inner',
+  '😀 😁 😂 🤣 😃 🙃 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '🙂 🤔 😄 🤨 😐 🙃 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '😔 😕 🙃 🤑 😲 ☹️ ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '🐣 🐣 🐣 🐣 🐣 🐣 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '🐥 🐥 🐥 🐥 🐥 🐥 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '🤓 🤓 🤓 🤓 🤓 🤓 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '🦔 🦔 🦔 🦔 🦔 🦔 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '🙈 🙈 🙈 🙈 🙈 🙈 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '🚖 🚖 🚖 🚖 🚖 🚖 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '✌🏻 ✌🏻 ✌🏻 ✌🏻 ✌🏻 ✌🏻 ',
+  'The Mountain foot of Inner',
+]
+
+const ajaxGet = (/* url */) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({
+        topOutItems: TOP_OUT_ITEMS,
+        bottomOutItems: BOTTOM_OUT_ITEMS,
+      })
+    }, REQUEST_TIME)
+  })
+}
+
+const PullUpPullDownNestedScroll = () => {
+  const [beforePullDown, setBeforePullDown] = useState(true)
+  const [isPullingDown, setIsPullingDown] = useState(false)
+  const [isPullUpLoad, setIsPullUpLoad] = useState(false)
+  const [topOutItems, setTopOutItems] = useState(TOP_OUT_ITEMS)
+  const [bottomOutItems, setBottomOutItems] = useState(BOTTOM_OUT_ITEMS)
+
+  const wrapperRef = useRef(null)
+  const innerRef = useRef(null)
+  const scrollRef = useRef(null)
+
+  const requestData = async (type) => {
+    try {
+      const { topOutItems, bottomOutItems } = await ajaxGet(/* url */)
+      if (type === 'load') {
+        setBottomOutItems((prev) => bottomOutItems.concat(prev))
+      } else {
+        setTopOutItems(topOutItems)
+        setBottomOutItems(bottomOutItems)
+      }
+    } catch (err) {
+      // handle err
+      console.log(err)
+    }
+  }
+  const finishPullDown = () => {
+    scrollRef.current.finishPullDown()
+    setTimeout(() => {
+      setBeforePullDown(true)
+      scrollRef.current.refresh()
+    }, TIME_BOUNCE + 100)
+  }
+
+  const pullingDownHandler = useStableCallback(async () => {
+    setBeforePullDown(false)
+    setIsPullingDown(true)
+    await requestData('refresh')
+    setIsPullingDown(false)
+    finishPullDown()
+  })
+
+  const pullingUpHandler = useStableCallback(async () => {
+    setIsPullUpLoad(true)
+    await requestData('load')
+    scrollRef.current.finishPullUp()
+    scrollRef.current.refresh()
+    setIsPullUpLoad(false)
+  })
+
+  useEffect(() => {
+    if (!scrollRef.current) {
+      const BS = (scrollRef.current = new BScroll(wrapperRef.current, {
+        nestedScroll: {
+          groupId: 'pullup-pullldown',
+        },
+        bounceTime: TIME_BOUNCE,
+        // pullDown options
+        pullDownRefresh: {
+          threshold: THRESHOLD,
+          stop: STOP,
+        },
+        // pullUp options
+        pullUpLoad: {
+          threshold: THRESHOLD,
+        },
+      }))
+
+      BS.on('pullingDown', pullingDownHandler)
+      BS.on('pullingUp', pullingUpHandler)
+      BS.on('scroll', (pos) => {
+        console.log(pos.y)
+      })
+
+      new BScroll(innerRef.current, {
+        nestedScroll: {
+          groupId: 'pullup-pullldown',
+        },
+        // close bounce effects
+        bounce: {
+          top: false,
+          bottom: false,
+        },
+      })
+    }
+  }, [pullingDownHandler, pullingUpHandler])
+
+  return (
+    <div className="pullup-pulldown-outnested view">
+      <div className="outer-wrapper" ref={wrapperRef}>
+        <div className="outer-content">
+          <div className="pulldown-wrapper">
+            <div style={{ display: beforePullDown ? '' : 'none' }}>
+              <span>Pull Down and refresh</span>
+            </div>
+            <div style={{ display: beforePullDown ? 'none' : '' }}>
+              <div v-show="isPullingDown">
+                <span>Loading...</span>
+              </div>
+              <div style={{ display: isPullingDown ? 'none' : '' }}>
+                <span>Refresh success</span>
+              </div>
+            </div>
+          </div>
+          <ul>
+            {topOutItems.map((item, index) => (
+              <li key={index} className="outer-list-item">
+                {item}
+              </li>
+            ))}
+          </ul>
+          <div className="inner-wrapper" ref={innerRef}>
+            <ul className="inner-content">
+              {INNER_ITEMS.map((item, index) => (
+                <li key={index} className="inner-list-item">
+                  {item}
+                </li>
+              ))}
+            </ul>
+          </div>
+          <ul>
+            {bottomOutItems.map((item, index) => (
+              <li key={index} className="outer-list-item2">
+                {item}
+              </li>
+            ))}
+          </ul>
+          <div className="pullup-wrapper">
+            {isPullUpLoad ? (
+              <div>
+                <span>Loading...</span>
+              </div>
+            ) : (
+              <div>
+                <span>Pull Up and load</span>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default PullUpPullDownNestedScroll