cbvirtua 1.0.105 → 1.0.107

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

@@ -0,0 +1,161 @@
+import React, { useRef, useEffect } from 'react'
+import BScroll from '@better-scroll/core'
+import InfinityScroll from '@better-scroll/infinity'
+
+import message from './data/message.json'
+
+import './index.styl'
+
+BScroll.use(InfinityScroll)
+
+const NUM_AVATARS = 4
+const NUM_IMAGES = 77
+const INIT_TIME = new Date().getTime()
+
+function getItem(id) {
+  function pickRandom(a) {
+    return a[Math.floor(Math.random() * a.length)]
+  }
+
+  return new Promise((resolve) => {
+    const item = {
+      id: id,
+      avatar: Math.floor(Math.random() * NUM_AVATARS),
+      self: Math.random() < 0.1,
+      image:
+        Math.random() < 1.0 / 20 ? Math.floor(Math.random() * NUM_IMAGES) : '',
+      time: new Date(
+        Math.floor(INIT_TIME + id * 20 * 1000 + Math.random() * 20 * 1000)
+      ),
+      message: pickRandom(message),
+    }
+    if (item.image === '') {
+      resolve(item)
+    } else {
+      let image = new Image()
+      image.src = require(`./image/image${item.image}.jpg`)
+      image.addEventListener('load', function () {
+        item.image = image
+        resolve(item)
+      })
+      image.addEventListener('error', function () {
+        item.image = ''
+        resolve(item)
+      })
+    }
+  })
+}
+
+let nextItem = 0
+let pageNum = 0
+
+const InfinityPage = () => {
+  const messageRef = useRef(null)
+  const tombstoneRef = useRef(null)
+  const wrapperRef = useRef(null)
+  const scrollRef = useRef(null)
+
+  useEffect(() => {
+    if (!scrollRef.current) {
+      const BS = (scrollRef.current = new BScroll(wrapperRef.current, {
+        infinity: {
+          render: (item, div) => {
+            div = div || messageRef.current.cloneNode(true)
+            div.dataset.id = item.id
+            div.querySelector(
+              '.infinity-avatar'
+            ).src = require(`./image/avatar${item.avatar}.jpg`)
+            div.querySelector('.infinity-bubble p').textContent =
+              item.id + '  ' + item.message
+            div.querySelector(
+              '.infinity-bubble .infinity-posted-date'
+            ).textContent = item.time.toString()
+
+            let img = div.querySelector('.infinity-bubble img')
+            if (item.image !== '') {
+              img.style.display = ''
+              img.src = item.image.src
+              img.width = item.image.width
+              img.height = item.image.height
+            } else {
+              img.src = ''
+              img.style.display = 'none'
+            }
+
+            if (item.self) {
+              div.classList.add('infinity-from-me')
+            } else {
+              div.classList.remove('infinity-from-me')
+            }
+            return div
+          },
+          createTombstone: () => tombstoneRef.current.cloneNode(true),
+          fetch: (count) => {
+            count = Math.max(30, count)
+            return new Promise((resolve, reject) => {
+              // Assume 50 ms per item.
+              setTimeout(() => {
+                if (++pageNum > 20) {
+                  resolve(false)
+                } else {
+                  console.log('pageNum', pageNum)
+                  let items = []
+                  for (let i = 0; i < Math.abs(count); i++) {
+                    items[i] = getItem(nextItem++)
+                  }
+                  resolve(Promise.all(items))
+                }
+              }, 500)
+            })
+          },
+        },
+      }))
+
+      BS.on('scroll', () => {
+        console.log('is scrolling')
+      })
+      BS.on('scrollEnd', () => {
+        console.log('scrollEnd')
+      })
+    }
+  }, [])
+
+  return (
+    <div className="infinity view">
+      <div className="template">
+        <li ref={messageRef} className="infinity-item">
+          <img className="infinity-avatar" width="48" height="48" alt="" />
+          <div className="infinity-bubble">
+            <p></p>
+            <img width="300" height="300" alt="" />
+            <div className="infinity-meta">
+              <time className="infinity-posted-date"></time>
+            </div>
+          </div>
+        </li>
+        <li ref={tombstoneRef} className="infinity-item tombstone">
+          <img
+            className="infinity-avatar"
+            width="48"
+            height="48"
+            src={require('./image/unknown.jpg')}
+            alt=""
+          />
+          <div className="infinity-bubble">
+            <p></p>
+            <p></p>
+            <p></p>
+            <div className="infinity-meta">
+              <time className="infinity-posted-date"></time>
+            </div>
+          </div>
+        </li>
+      </div>
+      <div ref={wrapperRef} className="infinity-timeline">
+        <ul></ul>
+      </div>
+    </div>
+  )
+}
+
+export default InfinityPage

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

@@ -0,0 +1,96 @@
+.infinity
+  height: 100%
+  .template
+    display: none
+
+.infinity-timeline
+  position: relative
+  height: 100%
+  padding: 0 10px
+  border: 1px solid #ccc
+  overflow: hidden
+  will-change: transform
+  background-color: #efeff5
+
+.infinity-timeline > ul
+  position: relative
+  -webkit-backface-visibility: hidden
+  -webkit-transform-style: flat
+
+.infinity-item
+  display: flex
+  left: 0
+  padding: 10px 0
+  width: 100%
+  contain: layout
+  will-change: transform
+  list-style: none
+
+.infinity-avatar
+  border-radius: 500px
+  margin-left: 20px
+  margin-right: 6px
+  min-width: 48px
+
+.infinity-item
+  p
+    margin: 0
+    word-wrap: break-word
+    font-size: 13px
+
+.infinity-item.tombstone
+  p
+    width: 100%
+    height: 0.5em
+    background-color: #ccc
+    margin: 0.5em 0
+
+.infinity-bubble img
+  max-width: 100%
+  height: auto
+
+.infinity-bubble
+  padding: 7px 10px
+  color: #333
+  background: #fff
+  /*box-shadow: 0 3px 2px rgba(0, 0, 0, 0.1)*/
+  position: relative
+  max-width: 420px
+  min-width: 80px
+  margin: 0 5px
+
+.infinity-bubble::before
+  content: ''
+  border-style: solid
+  border-width: 0 10px 10px 0
+  border-color: transparent #fff transparent transparent
+  position: absolute
+  top: 0
+  left: -10px
+
+.infinity-meta
+  font-size: 0.8rem
+  color: #999
+  margin-top: 3px
+
+.infinity-from-me
+  justify-content: flex-end
+
+.infinity-from-me .infinity-avatar
+  order: 1
+  margin-left: 6px
+  margin-right: 20px
+
+.infinity-from-me .infinity-bubble
+  background: #F9D7FF
+
+.infinity-from-me .infinity-bubble::before
+  left: 100%
+  border-width: 10px 10px 0 0
+  /*border-color: #F9D7FF transparent transparent transparent*/
+
+.infinity-state
+  display: none
+
+.infinity-invisible
+  display: none

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/pages/mouse-wheel/components/horizontal-scroll.js

@@ -0,0 +1,37 @@
+import React, { useRef, useEffect } from 'react'
+import BScroll from '@better-scroll/core'
+import MouseWheel from '@better-scroll/mouse-wheel'
+
+BScroll.use(MouseWheel)
+
+const createArray = (length) => Array.from({ length }, (_v, i) => i + 1)
+const data = createArray(100)
+
+const HorizontalScroll = () => {
+  const wrapperRef = useRef(null)
+  const scrollRef = useRef(null)
+
+  useEffect(() => {
+    scrollRef.current = new BScroll(wrapperRef.current, {
+      scrollX: true,
+      scrollY: false,
+      mouseWheel: true,
+    })
+  }, [])
+
+  return (
+    <div className="mouse-wheel-horizontal-scroll view">
+      <div className="mouse-wheel-wrapper" ref={wrapperRef}>
+        <div className="mouse-wheel-content">
+          {data.map((item, index) => (
+            <div key={index} className="mouse-wheel-item">
+              {item}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default HorizontalScroll

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/pages/mouse-wheel/components/horizontal-slide.js

@@ -0,0 +1,76 @@
+import React, { useState, useRef, useEffect } from 'react'
+import classNames from 'classnames'
+import BScroll from '@better-scroll/core'
+import Slide from '@better-scroll/slide'
+import MouseWheel from '@better-scroll/mouse-wheel'
+
+BScroll.use(Slide)
+BScroll.use(MouseWheel)
+
+const createArray = (length) => Array.from({ length }, (_v, i) => i + 1)
+const nums = createArray(4)
+
+const HorizontalSlide = () => {
+  const [currentPageIndex, setCurrentPageIndex] = useState(0)
+
+  const wrapperRef = useRef(null)
+  const scrollRef = useRef(null)
+
+  useEffect(() => {
+    if (!scrollRef.current) {
+      const BS = (scrollRef.current = new BScroll(wrapperRef.current, {
+        scrollX: true,
+        scrollY: false,
+        slide: {
+          loop: true,
+          threshold: 100,
+        },
+        useTransition: false,
+        momentum: false,
+        bounce: false,
+        stopPropagation: true,
+        mouseWheel: {
+          speed: 2,
+          invert: false,
+          easeTime: 300,
+        },
+      }))
+
+      BS.on('scrollEnd', () => {
+        setCurrentPageIndex(BS.getCurrentPage().pageY)
+      })
+    }
+
+    return () => {
+      scrollRef.current?.destroy()
+    }
+  }, [])
+
+  return (
+    <div className="mouse-wheel-horizontal-slide view">
+      <div className="slide-container">
+        <div className="slide-wrapper" ref={wrapperRef}>
+          <div className="slide-content">
+            {nums.map((num) => (
+              <div key={num} className={`slide-page page${num}`}>
+                page {num}
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="dots-wrapper">
+          {nums.map((num) => (
+            <span
+              key={num}
+              className={classNames('dot', {
+                active: currentPageIndex === num - 1,
+              })}
+            ></span>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default HorizontalSlide

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/pages/mouse-wheel/components/picker.js

@@ -0,0 +1,181 @@
+import React, { useState, useRef, useEffect } from 'react'
+import classNames from 'classnames'
+import { CSSTransition } from 'react-transition-group'
+import BScroll from '@better-scroll/core'
+import Wheel from '@better-scroll/wheel'
+import MouseWheel from '@better-scroll/mouse-wheel'
+
+BScroll.use(Wheel)
+BScroll.use(MouseWheel)
+
+const DATA = [
+  {
+    text: 'Venomancer',
+    value: 1,
+    disabled: 'wheel-disabled-item',
+  },
+  {
+    text: 'Nerubian Weaver',
+    value: 2,
+  },
+  {
+    text: 'Spectre',
+    value: 3,
+  },
+  {
+    text: 'Juggernaut',
+    value: 4,
+  },
+  {
+    text: 'Karl',
+    value: 5,
+  },
+  {
+    text: 'Zeus',
+    value: 6,
+  },
+  {
+    text: 'Witch Doctor',
+    value: 7,
+  },
+  {
+    text: 'Lich',
+    value: 8,
+  },
+  {
+    text: 'Oracle',
+    value: 9,
+  },
+  {
+    text: 'Earthshaker',
+    value: 10,
+  },
+]
+
+const stopPropagation = (e) => {
+  e.stopPropagation()
+}
+
+const preventDefault = (e) => {
+  e.preventDefault()
+}
+
+const OneColumn = () => {
+  const [visible, setVisible] = useState(false)
+  const [selectedIndex, setSelectedIndex] = useState(2)
+  const [selectedText, setSelectedText] = useState('open')
+
+  const wrapperRef = useRef(null)
+  const scrollRef = useRef(null)
+
+  useEffect(() => {
+    if (visible) {
+      if (!scrollRef.current) {
+        const wrapper = wrapperRef.current.children[0]
+        const BS = (scrollRef.current = new BScroll(wrapper, {
+          wheel: {
+            wheelWrapperClass: 'wheel-scroll',
+            wheelItemClass: 'wheel-item',
+            wheelDisabledItemClass: 'wheel-disabled-item',
+            selectedIndex,
+          },
+          useTransition: false,
+          probeType: 3,
+        }))
+
+        BS.on('scrollEnd', () => {
+          console.log('BS.getSelectedIndex()', BS.getSelectedIndex())
+        })
+      } else {
+        scrollRef.current.refresh()
+      }
+    }
+  }, [visible, selectedIndex])
+
+  const handleShow = () => {
+    if (visible) {
+      return
+    }
+    setVisible(true)
+  }
+
+  const handleHide = () => {
+    setVisible(false)
+  }
+
+  const handleConfirm = () => {
+    scrollRef.current.stop()
+    handleHide()
+    const currentSelectedIndex = scrollRef.current.getSelectedIndex()
+    setSelectedIndex(currentSelectedIndex)
+    setSelectedText(`${DATA[currentSelectedIndex].text}`)
+  }
+
+  const handleCancel = () => {
+    scrollRef.current.restorePosition()
+    handleHide()
+  }
+
+  return (
+    <div className="container view">
+      <div className="container-btn" onClick={handleShow}>
+        {selectedText}
+      </div>
+      <CSSTransition
+        in={visible}
+        classNames="picker-fade"
+        timeout={300}
+        onEnter={(node) => {
+          node.style.display = 'block'
+        }}
+        onExited={(node) => {
+          node.style.display = ''
+        }}
+      >
+        <div
+          className="picker"
+          onClick={handleCancel}
+          onTouchMove={preventDefault}
+        >
+          <CSSTransition in={visible} classNames="picker-move" timeout={300}>
+            <div className="picker-panel" onClick={stopPropagation}>
+              <div className="picker-choose border-bottom-1px">
+                <span className="cancel" onClick={handleCancel}>
+                  Cancel
+                </span>
+                <span className="confirm" onClick={handleConfirm}>
+                  Confirm
+                </span>
+                <h1 className="picker-title">Title</h1>
+              </div>
+              <div className="picker-content">
+                <div className="mask-top border-bottom-1px"></div>
+                <div className="mask-bottom border-top-1px"></div>
+                <div className="wheel-wrapper" ref={wrapperRef}>
+                  <div className="wheel">
+                    <ul className="wheel-scroll">
+                      {DATA.map((item, index) => (
+                        <li
+                          key={index}
+                          className={classNames([
+                            'wheel-item',
+                            { 'wheel-disabled-item': item.disabled },
+                          ])}
+                        >
+                          {item.text}
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                </div>
+              </div>
+              <div className="picker-footer"></div>
+            </div>
+          </CSSTransition>
+        </div>
+      </CSSTransition>
+    </div>
+  )
+}
+
+export default OneColumn