cbvirtua 1.0.106 → 1.0.107

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/pages/core/components/dynamic-content.js

@@ -0,0 +1,71 @@
+import React, { useState, useRef, useEffect } from 'react'
+import BScroll from '@better-scroll/core'
+
+const createArray = (length) => Array.from({ length }, (_v, i) => i + 1)
+const nums1 = createArray(30)
+const nums2 = createArray(60)
+
+const DynamicContent = () => {
+  const [switcher, setSwitcher] = useState(false)
+
+  const wrapperRef = useRef(null)
+  const scrollRef = useRef(null)
+
+  useEffect(() => {
+    if (!scrollRef.current) {
+      const BS = (scrollRef.current = new BScroll(wrapperRef.current, {
+        probeType: 3,
+      }))
+
+      BS.on('contentChanged', (content) => {
+        console.log('--- newContent ---')
+        console.log(content)
+      })
+      BS.on('scroll', () => {
+        console.log('scrolling-')
+      })
+      BS.on('scrollEnd', () => {
+        console.log('scrollingEnd')
+      })
+    }
+  }, [])
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.refresh()
+    }
+  }, [switcher])
+
+  const handleClick = () => {
+    setSwitcher((value) => !value)
+  }
+
+  return (
+    <div className="core-dynamic-content-container view">
+      <div className="scroll-wrapper" ref={wrapperRef}>
+        {switcher ? (
+          <div className="scroll-content c2" key="c2">
+            {nums2.map((item) => (
+              <div key={item} className="scroll-item">
+                {nums2.length - item + 1}
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="scroll-content c1" key="c1">
+            {nums1.map((item) => (
+              <div key={item} className="scroll-item">
+                {item}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+      <button className="btn" onClick={handleClick}>
+        switch content element
+      </button>
+    </div>
+  )
+}
+
+export default DynamicContent

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/pages/core/components/freescroll.js

@@ -0,0 +1,114 @@
+import React, { useRef, useEffect } from 'react'
+import BScroll from '@better-scroll/core'
+
+const FreeScroll = () => {
+  const wrapperRef = useRef(null)
+  const scrollRef = useRef(null)
+
+  useEffect(() => {
+    if (!scrollRef.current) {
+      scrollRef.current = new BScroll(wrapperRef.current, {
+        freeScroll: true,
+        bounce: {
+          bottom: false,
+          left: false,
+          right: false,
+          top: false,
+        },
+      })
+    }
+  }, [])
+
+  return (
+    <div className="free-scroll-container view">
+      <div className="free-scroll-wrapper">
+        <div className="scroll-wrapper" ref={wrapperRef}>
+          <div className="scroll-content">
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+              sunt in culpa qui officia deserunt mollit anim id est laborum.
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+              sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+              sunt in culpa qui officia deserunt mollit anim id est laborum.
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+              sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+              sunt in culpa qui officia deserunt mollit anim id est laborum.
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+              sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+              sunt in culpa qui officia deserunt mollit anim id est laborum.
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+              sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+              sunt in culpa qui officia deserunt mollit anim id est laborum.
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+              sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default FreeScroll

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/pages/core/components/horizontal-rotated.js

@@ -0,0 +1,38 @@
+import React, { useRef, useEffect } from 'react'
+import BScroll from '@better-scroll/core'
+
+const createArray = (length) => Array.from({ length }, (_v, i) => i + 1)
+const nums = createArray(8)
+
+const HorizontalRotated = () => {
+  const wrapperRef = useRef(null)
+  const scrollRef = useRef(null)
+
+  useEffect(() => {
+    if (!scrollRef.current) {
+      scrollRef.current = new BScroll(wrapperRef.current, {
+        scrollX: true,
+        scrollY: false,
+        // v2.3.0
+        quadrant: 3, // rotate 180
+      })
+    }
+  }, [])
+
+  return (
+    <div className="horizontal-rotated-container view">
+      <div className="description">Flipping layout via CSS</div>
+      <div className="scroll-wrapper" ref={wrapperRef}>
+        <div className="scroll-content">
+          {nums.map((item, index) => (
+            <div key={index} className="scroll-item">
+              {item}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default HorizontalRotated

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

@@ -0,0 +1,57 @@
+import React, { useRef, useEffect } from 'react'
+import BScroll from '@better-scroll/core'
+
+const emojis = [
+  '👉🏼 😁 😂 🤣 👈🏼',
+  '😄 😅 😆 😉 😊',
+  '😫 😴 😌 😛 😜',
+  '👆🏻 😒 😓 😔 👇🏻',
+  '😑 😶 🙄 😏 😣',
+  '😞 😟 😤 😢 😭',
+  '🤑 😲 ☹️ 🙁 😖',
+  '👍 👎 👊 ✊ 🤛',
+  '☝️ ✋ 🤚 🖐 🖖',
+  '👍🏼 👎🏼 👊🏼 ✊🏼 🤛🏼',
+  '☝🏽 ✋🏽 🤚🏽 🖐🏽 🖖🏽',
+  '🌖 🌗 🌘 🌑 🌒',
+]
+
+const Horizontal = () => {
+  const wrapperRef = useRef(null)
+  const scrollRef = useRef(null)
+
+  useEffect(() => {
+    if (!scrollRef.current) {
+      const BS = (scrollRef.current = new BScroll(wrapperRef.current, {
+        scrollX: true,
+        probeType: 3, // listening scroll event
+      }))
+
+      BS.on('scrollStart', () => {
+        console.log('scrollStart-')
+      })
+      BS.on('scroll', ({ y }) => {
+        console.log('scrolling-')
+      })
+      BS.on('scrollEnd', (pos) => {
+        console.log(pos)
+      })
+    }
+  }, [])
+
+  return (
+    <div className="horizontal-container view">
+      <div className="scroll-wrapper" ref={wrapperRef}>
+        <div className="scroll-content">
+          {emojis.map((item, index) => (
+            <div key={index} className="scroll-item">
+              {item}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Horizontal

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/pages/core/components/specified-content.js

@@ -0,0 +1,45 @@
+import React, { useRef, useEffect } from 'react'
+import BScroll from '@better-scroll/core'
+
+const createArray = (length) => Array.from({ length }, (_v, i) => i + 1)
+const nums = createArray(30)
+
+const SpecifiedContent = () => {
+  const wrapperRef = useRef(null)
+  const scrollRef = useRef(null)
+
+  useEffect(() => {
+    if (!scrollRef.current) {
+      const BS = (scrollRef.current = new BScroll(wrapperRef.current, {
+        specifiedIndexAsContent: 1,
+        probeType: 3,
+      }))
+
+      BS.on('scroll', () => {
+        console.log('scrolling-')
+      })
+      BS.on('scrollEnd', () => {
+        console.log('scrollingEnd')
+      })
+    }
+  }, [])
+
+  return (
+    <div className="core-specified-content-container view">
+      <div className="scroll-wrapper" ref={wrapperRef}>
+        <div className="ignore-content">
+          The Blue area is not taken as BetterScroll's content
+        </div>
+        <div className="scroll-content">
+          {nums.map((item) => (
+            <div key={item} className="scroll-item">
+              {item}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SpecifiedContent

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/pages/core/components/vertical-rotated.js

@@ -0,0 +1,36 @@
+import React, { useRef, useEffect } from 'react'
+import BScroll from '@better-scroll/core'
+
+const createArray = (length) => Array.from({ length }, (_v, i) => i + 1)
+const nums = createArray(8)
+
+const VerticalRotated = () => {
+  const wrapperRef = useRef(null)
+  const scrollRef = useRef(null)
+
+  useEffect(() => {
+    if (!scrollRef.current) {
+      scrollRef.current = new BScroll(wrapperRef.current, {
+        // v2.3.0
+        quadrant: 2, // rotate 90
+      })
+    }
+  }, [])
+
+  return (
+    <div className="vertical-rotated-container view">
+      <div className="description">Horizontal layout via CSS</div>
+      <div className="scroll-wrapper" ref={wrapperRef}>
+        <div className="scroll-content">
+          {nums.map((item, index) => (
+            <div key={index} className="scroll-item">
+              {item}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default VerticalRotated

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

@@ -0,0 +1,59 @@
+import React from 'react'
+
+import './index.styl'
+
+const examples = [
+  {
+    path: '/core/default',
+    name: 'vertical',
+  },
+  {
+    path: '/core/horizontal',
+    name: 'horizontal',
+  },
+  {
+    path: '/core/dynamic-content',
+    name: 'dynamic-content',
+  },
+  {
+    path: '/core/specified-content',
+    name: 'specified-content',
+  },
+  {
+    path: '/core/freescroll',
+    name: 'freescroll',
+  },
+  {
+    path: '/core/vertical-rotated',
+    name: 'vertical-rotated(v2.3.0)',
+  },
+  {
+    path: '/core/horizontal-rotated',
+    name: 'horizontal-rotated(v2.3.0)',
+  },
+]
+
+const Core = (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 Core

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

@@ -0,0 +1,166 @@
+.free-scroll-container
+  &.view
+    position fixed!important
+
+.core-container
+  .scroll-wrapper
+    height 400px
+    position relative
+    overflow hidden
+    .scroll-item
+      height 50px
+      line-height 50px
+      font-size 24px
+      font-weight bold
+      border-bottom 1px solid #eee
+      text-align center
+      &:nth-child(2n)
+        background-color #f3f5f7
+      &:nth-child(2n+1)
+        background-color #42b983
+
+.horizontal-container
+  .scroll-wrapper
+    position relative
+    width 90%
+    margin 80px auto
+    white-space nowrap
+    border 3px solid #42b983
+    border-radius 5px
+    overflow hidden
+    .scroll-content
+      display inline-block
+    .scroll-item
+      height 50px
+      line-height 50px
+      font-size 24px
+      display inline-block
+      text-align center
+      padding 0 10px
+
+
+.core-dynamic-content-container
+  text-align center
+  .scroll-wrapper
+    height 300px
+    overflow hidden
+    .scroll-item
+      height 50px
+      line-height 50px
+      font-size 24px
+      font-weight bold
+      border-bottom 1px solid #eee
+      text-align center
+      &:nth-child(2n)
+        background-color #f3f5f7
+      &:nth-child(2n+1)
+        background-color #42b983
+	.btn
+		margin 40px auto
+		padding 10px
+		color #fff!important
+		border-radius 4px
+		font-size 20px
+		background-color #666!important
+
+.core-specified-content-container
+  text-align center
+  .scroll-wrapper
+    height 400px
+    overflow hidden
+    border 1px solid #42b983
+    .ignore-content
+      padding 20px
+      color white
+      font-size 20px
+      font-weight bold
+      background-color #2c3e50
+    .scroll-item
+      height 50px
+      line-height 50px
+      font-size 24px
+      font-weight bold
+      border-bottom 1px solid #eee
+      text-align center
+      &:nth-child(2n)
+        background-color #f3f5f7
+      &:nth-child(2n+1)
+        background-color #42b983
+
+.free-scroll-container
+  position: relative
+  width: 100%
+  height: 100%
+  .free-scroll-wrapper
+    position: relative
+    width: 100%
+    height: 100%
+    border: 1px solid rgb(96, 108, 113)
+    box-sizing: border-box
+    .scroll-wrapper
+      position: absolute
+      top: 0
+      left: 0
+      right: 0
+      bottom: 0
+      overflow: hidden
+      .scroll-content
+        background-color: #efeff4
+        width: 1500px
+        height: 1000px
+        p
+          font-size: 16px
+          padding: 20px
+          line-height: 200%
+          margin: 0
+
+.vertical-rotated-container
+  .description
+    text-align center
+  .scroll-wrapper
+    height 250px
+    width 100px
+    position relative
+    overflow hidden
+    margin 0 auto
+    border 1px solid #ccc
+    transform rotate(90deg)
+    .scroll-item
+      height 100px
+      width 100px
+      line-height 100px
+      font-size 24px
+      font-weight bold
+      text-align center
+      &:nth-child(2n)
+        background-color #f3f5f7
+      &:nth-child(2n+1)
+        background-color #42b983
+
+.horizontal-rotated-container
+  .description
+    margin-bottom 40px
+    text-align center
+  .scroll-wrapper
+    height 100px
+    width 250px
+    position relative
+    overflow hidden
+    white-space nowrap
+    margin 0 auto
+    border 1px solid #ccc
+    transform rotate(180deg)
+    .scroll-content
+      display inline-block
+    .scroll-item
+      height 100px
+      width 100px
+      line-height 100px
+      font-size 24px
+      font-weight bold
+      text-align center
+      display inline-block
+      &:nth-child(2n)
+        background-color #f3f5f7
+      &:nth-child(2n+1)
+        background-color #42b983

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/pages/form/components/textarea.js

@@ -0,0 +1,45 @@
+import React, { useRef, useEffect } from 'react'
+import BScroll from '@better-scroll/core'
+
+const createArray = (length) => Array.from({ length }, (_v, i) => i + 1)
+const data = createArray(10)
+
+const Textarea = () => {
+  const wrapperRef = useRef(null)
+  const scrollRef = useRef(null)
+
+  useEffect(() => {
+    if (!scrollRef.current) {
+      scrollRef.current = new BScroll(wrapperRef.current, {
+        autoBlur: true, // for blur
+      })
+    }
+  }, [])
+
+  return (
+    <div className="textarea-container view">
+      <div className="textarea-wrapper" ref={wrapperRef}>
+        <div className="textarea-scroller">
+          <ul className="textarea-list">
+            {data.map((item) => (
+              <li key={item} className="textarea-list-item"></li>
+            ))}
+            <textarea
+              className="textarea-text"
+              name=""
+              id=""
+              cols="30"
+              rows="10"
+              defaultValue="Manipulating this area can not make BetterScroll work."
+            ></textarea>
+            {data.map((item) => (
+              <li key={item} className="textarea-list-item"></li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Textarea

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

@@ -0,0 +1,35 @@
+import React from 'react'
+
+import './index.styl'
+
+const examples = [
+  {
+    path: '/form/textarea',
+    name: 'textarea',
+  },
+]
+
+const Form = (props) => {
+  const goPage = (path) => {
+    props.history.push(path)
+  }
+
+  return (
+    <div className="view">
+      <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 Form

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

@@ -0,0 +1,22 @@
+.textarea-container
+  height: 100%
+.textarea-wrapper
+  height: 100%
+  padding: 0 10px
+  border: 1px solid #ccc
+  overflow: hidden
+.textarea-list
+  padding: 0
+  text-align: center
+.textarea-list-item
+  padding: 10px 0
+  height: 40px
+  list-style: none
+  border-bottom: 1px solid #ccc
+.textarea-text
+  border: 2px solid #62B791
+  border-radius: 5px
+  margin: 40px auto 0
+  line-height: 2
+  font-size: 20px
+  height: 200px