cbvirtua 1.0.109 → 1.0.115

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/pages/picker/components/one-column.js

@@ -1,195 +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'
-
-BScroll.use(Wheel)
-
-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,
-        }))
-
-        // < v2.1.0
-        BS.on('scrollEnd', () => {
-          console.log('BS.getSelectedIndex()', BS.getSelectedIndex())
-        })
-        // v2.1.0, only when selectedIndex changed
-        BS.on('wheelIndexChanged', (index) => {
-          console.log(index)
-        })
-      } else {
-        scrollRef.current.refresh()
-      }
-    }
-  }, [visible, selectedIndex])
-
-  const handleShow = () => {
-    if (visible) {
-      return
-    }
-    setVisible(true)
-  }
-
-  const handleHide = () => {
-    setVisible(false)
-  }
-
-  const handleConfirm = () => {
-    /*
-     * if bs is scrolling, force it stop at the nearest wheel-item
-     * or you can use 'restorePosition' method as the below
-     */
-    scrollRef.current.stop()
-    handleHide()
-    const currentSelectedIndex = scrollRef.current.getSelectedIndex()
-    setSelectedIndex(currentSelectedIndex)
-    setSelectedText(
-      `${DATA[currentSelectedIndex].text}-${currentSelectedIndex}`
-    )
-  }
-
-  const handleCancel = () => {
-    /*
-     * if bs is scrolling, restore it to the start position
-     * it is same with iOS picker and web Select element implementation
-     * supported at v2.1.0
-     */
-    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

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

@@ -1,43 +0,0 @@
-import React from 'react'
-
-import './index.styl'
-
-const examples = [
-  {
-    path: '/picker/one-column',
-    name: 'One Column Picker',
-  },
-  {
-    path: '/picker/double-column',
-    name: 'Double Column Picker',
-  },
-  {
-    path: '/picker/linkage-column',
-    name: 'Linkage Column Picker',
-  },
-]
-
-const Picker = (props) => {
-  const goPage = (path) => {
-    props.history.push(path)
-  }
-
-  return (
-    <div className="view core">
-      <ul className="example-list">
-        {examples.map((item) => (
-          <li
-            className="example-item"
-            onClick={() => goPage(item.path)}
-            key={item.path}
-          >
-            <span>{item.name}</span>
-          </li>
-        ))}
-      </ul>
-      {props.children}
-    </div>
-  )
-}
-
-export default Picker

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

@@ -1,156 +0,0 @@
-/* reset */
-ul
-  list-style none
-  padding 0
-
-.border-bottom-1px, .border-top-1px
-  position: relative
-  &:before, &:after
-    content: ""
-    display: block
-    position: absolute
-    transform-origin: 0 0
-.border-bottom-1px
-  &:after
-    border-bottom: 1px solid #ebebeb
-    left: 0
-    bottom: 0
-    width: 100%
-    transform-origin: 0 bottom
-.border-top-1px
-  &:before
-    border-top: 1px solid #ebebeb
-    left: 0
-    top: 0
-    width: 100%
-    transform-origin: 0 top
-@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2)
-  .border-top-1px
-    &:before
-      width: 200%
-      transform: scale(.5) translateZ(0)
-  .border-bottom-1px
-    &:after
-      width: 200%
-      transform: scale(.5) translateZ(0)
-
-@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3)
-  .border-top-1px
-    &:before
-      width: 300%
-      transform: scale(.333) translateZ(0)
-  .border-bottom-1px
-    &:after
-      width: 300%
-      transform: scale(.333) translateZ(0)
-.container-btn
-  margin: 2rem
-  background-color white
-  padding: 0.8rem
-  border: 1px solid rgba(0, 0, 0, .1)
-  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1)
-  text-align: center
-
-.picker
-  display: none
-  position: fixed
-  left: 0
-  top: 0
-  z-index: 100
-  width: 100%
-  height: 100%
-  overflow: hidden
-  text-align: center
-  font-size: 14px
-  background-color: rgba(37, 38, 45, .4)
-  &.picker-fade-enter
-    opacity: 0
-  &.picker-fade-enter-active
-    opacity: 1
-    transition: all .3s ease-in-out
-  &.picker-fade-exit-active
-    opacity: 0;
-    transition: all .3s ease-in-out
-
-
-  .picker-panel
-    position: absolute
-    z-index: 600
-    bottom: 0
-    width: 100%
-    height: 273px
-    background: white
-    &.picker-move-enter
-      transform: translate3d(0, 273px, 0)
-    &.picker-move-enter-active
-      transform: translate3d(0, 0, 0)
-      transition: all .3s ease-in-out
-    &.picker-move-exit-active
-      transform: translate3d(0, 273px, 0)
-      transition: all .3s ease-in-out
-    .picker-choose
-      position: relative
-      height: 60px
-      color: #999
-      .picker-title
-        margin: 0
-        line-height: 60px
-        font-weight: normal
-        text-align: center
-        font-size: 18px
-        color: #333
-      .confirm, .cancel
-        position: absolute
-        top: 6px
-        padding: 16px
-        font-size: 14px
-      .confirm
-        right: 0
-        color: #007bff
-        &:active
-          color: #5aaaff
-      .cancel
-        left: 0
-        &:active
-          color: #c2c2c2
-    .picker-content
-      position: relative
-      top: 20px
-      .mask-top, .mask-bottom
-        z-index: 10
-        width: 100%
-        height: 68px
-        pointer-events: none
-        transform: translateZ(0)
-      .mask-top
-        position: absolute
-        top: 0
-        background: linear-gradient(to top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8))
-      .mask-bottom
-        position: absolute
-        bottom: 1px
-        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8))
-    .wheel-wrapper
-      display: flex
-      padding: 0 16px
-      .wheel
-        flex: 1
-        width: 1%
-        height: 173px
-        overflow: hidden
-        font-size: 18px
-        .wheel-scroll
-          padding: 0
-          margin-top: 68px
-          line-height: 36px
-          list-style: none
-          .wheel-item
-            list-style: none
-            height: 36px
-            overflow: hidden
-            white-space: nowrap
-            color: #333
-            &.wheel-disabled-item
-              opacity: .2;
-  .picker-footer
-    height: 20px

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/pages/pulldown/components/default.js

@@ -1,129 +0,0 @@
-import React, { useState, useRef, useEffect, useCallback } from 'react'
-import BScroll from '@better-scroll/core'
-import PullDown from '@better-scroll/pull-down'
-
-BScroll.use(PullDown)
-
-const useStableCallback = (callback) => {
-  const callbackRef = useRef(callback)
-
-  useEffect(() => {
-    callbackRef.current = callback
-  })
-
-  return useCallback((...args) => callbackRef.current(...args), [])
-}
-
-const ajaxGet = (/* url */) => {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      const dataList = generateData()
-      resolve(dataList)
-    }, 1000)
-  })
-}
-
-const TIME_BOUNCE = 800
-let STEP = 0
-
-function generateData() {
-  const BASE = 30
-  const begin = BASE * STEP
-  const end = BASE * (STEP + 1)
-  let ret = []
-  for (let i = end; i > begin; i--) {
-    ret.push(i)
-  }
-  return ret
-}
-
-const Default = () => {
-  const [beforePullDown, setBeforePullDown] = useState(true)
-  const [isPullingDown, setIsPullingDown] = useState(false)
-  const [data, setData] = useState(generateData())
-
-  const wrapperRef = useRef(null)
-  const scrollRef = useRef(null)
-
-  const requestData = async () => {
-    try {
-      const newData = await ajaxGet(/* url */)
-      setData((prev) => newData.concat(prev))
-    } 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)
-    STEP += 1
-    await requestData()
-    setIsPullingDown(false)
-    finishPullDown()
-  })
-
-  useEffect(() => {
-    if (!scrollRef.current) {
-      const BS = (scrollRef.current = new BScroll(wrapperRef.current, {
-        scrollY: true,
-        bounceTime: TIME_BOUNCE,
-        useTransition: false,
-        pullDownRefresh: {
-          threshold: 70,
-          stop: 56,
-        },
-      }))
-
-      BS.on('pullingDown', pullingDownHandler)
-
-      BS.on('scroll', (pos) => {
-        console.log(pos.y)
-      })
-
-      BS.on('scrollEnd', () => {
-        console.log('scrollEnd')
-      })
-    }
-  }, [pullingDownHandler])
-
-  return (
-    <div className="pulldown view">
-      <div className="pulldown-bswrapper" ref={wrapperRef}>
-        <div className="pulldown-scroller">
-          <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 className="pulldown-list">
-            {data.map((item, index) => (
-              <li key={index} className="pulldown-list-item">
-                {`I am item ${item} `}
-              </li>
-            ))}
-          </ul>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default Default

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/pages/pulldown/components/sina-weibo.js

@@ -1,143 +0,0 @@
-import React, { useState, useRef, useEffect, useCallback } from 'react'
-import BScroll from '@better-scroll/core'
-import PullDown from '@better-scroll/pull-down'
-
-BScroll.use(PullDown)
-
-function generateData() {
-  const BASE = 30
-  const begin = BASE * STEP
-  const end = BASE * (STEP + 1)
-  let ret = []
-  for (let i = end; i > begin; i--) {
-    ret.push(i)
-  }
-  return ret
-}
-
-// pulldownRefresh state
-const PHASE = {
-  moving: {
-    enter: 'enter',
-    leave: 'leave',
-  },
-  fetching: 'fetching',
-  succeed: 'succeed',
-}
-const TIME_BOUNCE = 800
-const REQUEST_TIME = 2000
-const THRESHOLD = 70
-const STOP = 56
-let STEP = 0
-const ARROW_BOTTOM =
-  '<svg width="16" height="16" viewBox="0 0 512 512"><path fill="currentColor" d="M367.997 338.75l-95.998 95.997V17.503h-32v417.242l-95.996-95.995l-22.627 22.627L256 496l134.624-134.623l-22.627-22.627z"></path></svg>'
-const ARROW_UP =
-  '<svg width="16" height="16" viewBox="0 0 512 512"><path fill="currentColor" d="M390.624 150.625L256 16L121.376 150.625l22.628 22.627l95.997-95.998v417.982h32V77.257l95.995 95.995l22.628-22.627z"></path></svg>'
-
-const mockFetchData = (/* url */) => {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      const dataList = generateData()
-      resolve(dataList)
-    }, REQUEST_TIME)
-  })
-}
-
-const useStableCallback = (callback) => {
-  const callbackRef = useRef(callback)
-
-  useEffect(() => {
-    callbackRef.current = callback
-  })
-
-  return useCallback((...args) => callbackRef.current(...args), [])
-}
-
-const Sina = () => {
-  const [tipText, setTipText] = useState('')
-  const [data, setData] = useState(generateData())
-
-  const wrapperRef = useRef(null)
-  const scrollRef = useRef(null)
-
-  const getData = async () => {
-    try {
-      const newData = await mockFetchData()
-      setData((prev) => newData.concat(prev))
-    } catch (err) {
-      // handle err
-      console.log(err)
-    }
-  }
-
-  const pullingDownHandler = useStableCallback(async () => {
-    updateTipText(PHASE.fetching)
-    STEP += 1
-    await getData()
-    updateTipText(PHASE.succeed)
-    scrollRef.current.finishPullDown()
-    setTimeout(() => {
-      scrollRef.current.refresh()
-    }, TIME_BOUNCE + 50)
-  })
-
-  const updateTipText = useStableCallback((phase = PHASE.default) => {
-    const TEXTS_MAP = {
-      enter: `${ARROW_BOTTOM} Pull down`,
-      leave: `${ARROW_UP} Release`,
-      fetching: 'Loading...',
-      succeed: 'Refresh succeed',
-    }
-    setTipText(TEXTS_MAP[phase])
-  })
-
-  useEffect(() => {
-    if (!scrollRef.current) {
-      const BS = (scrollRef.current = new BScroll(wrapperRef.current, {
-        scrollY: true,
-        bounceTime: TIME_BOUNCE,
-        useTransition: false,
-        pullDownRefresh: {
-          threshold: THRESHOLD,
-          stop: STOP,
-        },
-      }))
-
-      BS.on('pullingDown', pullingDownHandler)
-
-      BS.on('scrollEnd', () => {
-        console.log('scrollEnd')
-      })
-
-      // v2.4.0 supported
-      BS.on('enterThreshold', () => {
-        updateTipText(PHASE.moving.enter)
-      })
-
-      BS.on('leaveThreshold', () => {
-        updateTipText(PHASE.moving.leave)
-      })
-    }
-  }, [pullingDownHandler, updateTipText])
-
-  return (
-    <div className="pulldown view">
-      <div className="pulldown-bswrapper" ref={wrapperRef}>
-        <div className="pulldown-scroller">
-          <div className="pulldown-wrapper">
-            <div dangerouslySetInnerHTML={{ __html: tipText }}></div>
-          </div>
-          <ul className="pulldown-list">
-            {data.map((item, index) => (
-              <li key={index} className="pulldown-list-item">
-                {`I am item ${item} `}
-              </li>
-            ))}
-          </ul>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default Sina

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

@@ -1,39 +0,0 @@
-import React from 'react'
-
-import './index.styl'
-
-const examples = [
-  {
-    path: '/pulldown/default',
-    name: 'Default',
-  },
-  {
-    path: '/pulldown/sina',
-    name: 'Sina-Weibo(v2.4.0)',
-  },
-]
-
-const Pulldown = (props) => {
-  const goPage = (path) => {
-    props.history.push(path)
-  }
-
-  return (
-    <div className="view core">
-      <ul className="example-list">
-        {examples.map((item) => (
-          <li
-            className="example-item"
-            onClick={() => goPage(item.path)}
-            key={item.path}
-          >
-            <span>{item.name}</span>
-          </li>
-        ))}
-      </ul>
-      {props.children}
-    </div>
-  )
-}
-
-export default Pulldown