cbvirtua 1.0.109 → 1.0.115

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

@@ -1,161 +0,0 @@
-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

@@ -1,96 +0,0 @@
-.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

@@ -1,37 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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

@@ -1,181 +0,0 @@
-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