cbvirtua 1.0.106 → 1.0.107

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

@@ -0,0 +1,48 @@
+import React, { useRef, useEffect } from 'react'
+import BScroll from '@better-scroll/core'
+import Movable from '@better-scroll/movable'
+
+BScroll.use(Movable)
+
+const emojis = [
+  '😀 😁 😂 🤣 😃',
+  '😄 😅 😆 😉 😊',
+  '😫 😴 😌 😛 😜',
+  '👆🏻 😒 😓 😔 👇🏻',
+]
+
+const Default = () => {
+  const wrapperRef = useRef(null)
+
+  useEffect(() => {
+    const BS = new BScroll(wrapperRef.current, {
+      bindToTarget: true,
+      scrollX: true,
+      scrollY: true,
+      freeScroll: true,
+      movable: true,
+      startX: 20,
+      startY: 20,
+    })
+
+    return () => {
+      BS.destroy()
+    }
+  }, [])
+
+  return (
+    <div className="movable-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 Default

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/pages/movable/components/multi-content-scale.js

@@ -0,0 +1,80 @@
+import React, { useRef, useEffect } from 'react'
+import BScroll from '@better-scroll/core'
+import Movable from '@better-scroll/movable'
+import Zoom from '@better-scroll/zoom'
+
+import SwordsmanLink from './ftstr.png'
+import WitchLink from './qos_crop.png'
+
+BScroll.use(Movable)
+BScroll.use(Zoom)
+
+const MultiContentScale = () => {
+  const wrapperRef = useRef(null)
+  const scrollRef2 = useRef(null)
+
+  useEffect(() => {
+    const BS1 = new BScroll(wrapperRef.current, {
+      bindToTarget: true,
+      scrollX: true,
+      scrollY: true,
+      freeScroll: true,
+      movable: true,
+      zoom: {
+        start: 1.2,
+        min: 0.5,
+        max: 3,
+      },
+    })
+    BS1.putAt('center', 'center', 0)
+
+    const BS2 = (scrollRef2.current = new BScroll(wrapperRef.current, {
+      // use wrapper.children[1] as content
+      specifiedIndexAsContent: 1,
+      bindToTarget: true,
+      scrollX: true,
+      scrollY: true,
+      freeScroll: true,
+      movable: true,
+      startY: 150,
+      zoom: {
+        start: 1,
+        min: 0.5,
+        max: 3,
+      },
+    }))
+
+    return () => {
+      BS1.destroy()
+      BS2.destroy()
+    }
+  }, [])
+
+  const handleClick = () => {
+    scrollRef2.current.putAt('right', 'bottom', 500)
+  }
+
+  return (
+    <div className="movable-multi-content-container view">
+      <div className="scroll-wrapper" ref={wrapperRef}>
+        <div className="scroll-content content1">
+          <figure>
+            <figcaption>Cold Oasis</figcaption>
+            <img className="picture" src={SwordsmanLink} alt="ftstr" />
+          </figure>
+        </div>
+        <div className="scroll-content content2">
+          <figure>
+            <figcaption>Warm Oasis</figcaption>
+            <img className="picture" src={WitchLink} alt="qos_crop" />
+          </figure>
+        </div>
+      </div>
+      <button className="btn" onClick={handleClick}>
+        Put The Warm at center position
+      </button>
+    </div>
+  )
+}
+
+export default MultiContentScale

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/pages/movable/components/multi-content.js

@@ -0,0 +1,70 @@
+import React, { useRef, useEffect } from 'react'
+import BScroll from '@better-scroll/core'
+import Movable from '@better-scroll/movable'
+
+import picture1 from './oasis_one.png'
+import picture2 from './oasis_two.png'
+
+BScroll.use(Movable)
+
+const MultiContent = () => {
+  const wrapperRef = useRef(null)
+  const scrollRef2 = useRef(null)
+
+  useEffect(() => {
+    const BS1 = new BScroll(wrapperRef.current, {
+      bindToTarget: true,
+      scrollX: true,
+      scrollY: true,
+      freeScroll: true,
+      movable: true,
+      startX: 10,
+      startY: 10,
+    })
+
+    const BS2 = (scrollRef2.current = new BScroll(wrapperRef.current, {
+      // use wrapper.children[1] as content
+      specifiedIndexAsContent: 1,
+      bindToTarget: true,
+      scrollX: true,
+      scrollY: true,
+      freeScroll: true,
+      movable: true,
+      startX: 0,
+      startY: 170,
+    }))
+
+    return () => {
+      BS1.destroy()
+      BS2.destroy()
+    }
+  }, [])
+
+  const handleClick = () => {
+    scrollRef2.current.putAt('center', 'center')
+  }
+
+  return (
+    <div className="movable-multi-content-container view">
+      <div className="scroll-wrapper" ref={wrapperRef}>
+        <div className="scroll-content content1">
+          <figure>
+            <figcaption>Cold Oasis</figcaption>
+            <img className="picture" src={picture1} alt="Cold Oasis" />
+          </figure>
+        </div>
+        <div className="scroll-content content2">
+          <figure>
+            <figcaption>Warm Oasis</figcaption>
+            <img className="picture" src={picture2} alt="Warm Oasis" />
+          </figure>
+        </div>
+      </div>
+      <button className="btn" onClick={handleClick}>
+        Put The Warm at center position
+      </button>
+    </div>
+  )
+}
+
+export default MultiContent

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/pages/movable/components/scale.js

@@ -0,0 +1,53 @@
+import React, { useRef, useEffect } from 'react'
+import BScroll from '@better-scroll/core'
+import Movable from '@better-scroll/movable'
+import Zoom from '@better-scroll/zoom'
+
+BScroll.use(Movable)
+BScroll.use(Zoom)
+
+const emojis = [
+  '😀 😁 😂 🤣 😃',
+  '😄 😅 😆 😉 😊',
+  '😫 😴 😌 😛 😜',
+  '👆🏻 😒 😓 😔 👇🏻',
+]
+
+const Scale = () => {
+  const wrapperRef = useRef(null)
+
+  useEffect(() => {
+    const BS = new BScroll(wrapperRef.current, {
+      bindToTarget: true,
+      scrollX: true,
+      scrollY: true,
+      freeScroll: true,
+      movable: true,
+      zoom: {
+        start: 1,
+        min: 0.5,
+        max: 3,
+      },
+    })
+
+    return () => {
+      BS.destroy()
+    }
+  }, [])
+
+  return (
+    <div className="movable-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 Scale

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

@@ -0,0 +1,47 @@
+import React from 'react'
+
+import './index.styl'
+
+const examples = [
+  {
+    path: '/movable/default',
+    name: 'default',
+  },
+  {
+    path: '/movable/scale',
+    name: 'scale',
+  },
+  {
+    path: '/movable/multi-content',
+    name: 'multi-content',
+  },
+  {
+    path: '/movable/multi-content-scale',
+    name: 'multi-content-scale',
+  },
+]
+
+const Movable = (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 Movable

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

@@ -0,0 +1,59 @@
+.movable-container
+  .scroll-wrapper
+    height 400px
+    overflow hidden
+    box-shadow 0 0 3px rgba(0, 0, 0, .3)
+    .scroll-content
+      width 220px
+    .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
+
+.movable-multi-content-container
+  .scroll-wrapper
+    height 400px
+    overflow hidden
+    position relative
+    box-shadow 0 0 3px rgba(0, 0, 0, .3)
+    .scroll-content
+      position absolute
+      top 0
+      left 0
+      width 200px
+      figure
+        margin 0
+      figcaption
+        font-weight bold
+        margin-bottom 5px
+        text-align center
+        color #ea4c89
+      .picture
+        width 200px
+        height 150px
+        border-radius 10px
+    .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
+    border-radius 4px
+    font-size 20px
+    background-color #666

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/pages/nested-scroll/components/horizontal-in-vertical.js

@@ -0,0 +1,119 @@
+import React, { useRef, useEffect } from 'react'
+import BScroll from '@better-scroll/core'
+import NestedScroll from '@better-scroll/nested-scroll'
+import Slide from '@better-scroll/slide'
+
+BScroll.use(NestedScroll)
+BScroll.use(Slide)
+
+const outerOpenData = [
+  '😀 😁 😂 🤣 😃 🙃 ',
+  '👆🏻 vertical scroll 👇🏻 ',
+  '🙂 🤔 😄 🤨 😐 🙃 ',
+]
+
+const outerCloseData = [
+  '😀 😁 😂 🤣 😃 🙃 ',
+  '👆🏻 vertical scroll 👇🏻 ',
+  '🙂 🤔 😄 🤨 😐 🙃 ',
+  '👆🏻 vertical scroll 👇🏻 ',
+  '😔 😕 🙃 🤣 😲 🙃 🤣',
+  '🙂 🤔 😄 🤨  😐 🙃 ',
+  '👆🏻 vertical scroll 👇🏻 ',
+  '😔 😕 🙃 🤣 😲 🙃 🤣',
+  '👆🏻 vertical scroll 👇🏻 ',
+  '😔 😕 🙃 🤣 😲 🙃 🤣',
+  '🙂 🤔 😄 🤨 😐 🙃 ',
+  '👆🏻 vertical scroll 👇🏻 ',
+  '😔 😕 🙃 🤣 😲 🙃 🤣',
+  '👆🏻 vertical scroll 👇🏻 ',
+  '😔 😕 🙃 🤣 😲 🙃 🤣',
+  '🙂 🤔 😄 🤨  😐 🙃 ',
+  '👆🏻 vertical scroll 👇🏻 ',
+  '😔 😕 🙃 🤣 😲 🙃 🤣',
+]
+
+const handleOuterClick = () => {
+  alert('clicked outer item')
+}
+
+const handleInnerClick = () => {
+  alert('clicked inner item')
+}
+
+const HorizontalInVertical = () => {
+  const outerWrapperRef = useRef(null)
+  const outerScrollRef = useRef(null)
+  const innerWrapperRef = useRef(null)
+  const innerScrollRef = useRef(null)
+
+  useEffect(() => {
+    if (!outerScrollRef.current) {
+      outerScrollRef.current = new BScroll(outerWrapperRef.current, {
+        nestedScroll: {
+          groupId: 'mixed-nested-scroll',
+        },
+        click: true,
+      })
+    }
+    if (!innerScrollRef.current) {
+      innerScrollRef.current = new BScroll(innerWrapperRef.current, {
+        nestedScroll: {
+          groupId: 'mixed-nested-scroll',
+        },
+        scrollX: true,
+        scrollY: false,
+        slide: {
+          loop: false,
+          autoplay: false,
+          threshold: 100,
+        },
+        momentum: false,
+        bounce: false,
+        click: true,
+      })
+    }
+
+    return () => {
+      outerScrollRef.current?.destroy()
+      innerScrollRef.current?.destroy()
+    }
+  }, [])
+
+  return (
+    <div className="horizontal-in-vertical-container view">
+      <div className="vertical-wrapper" ref={outerWrapperRef}>
+        <div className="vertical-content">
+          {outerOpenData.map((item, index) => (
+            <li
+              key={index}
+              className="vertical-item"
+              onClick={handleOuterClick}
+            >
+              {item}
+            </li>
+          ))}
+          <div className="horizontal-wrapper" ref={innerWrapperRef}>
+            <div className="slide-banner-content" onClick={handleInnerClick}>
+              <div className="slide-item page1">horizontal scroll 1</div>
+              <div className="slide-item page2">horizontal scroll 2</div>
+              <div className="slide-item page3">horizontal scroll 3</div>
+              <div className="slide-item page4">horizontal scroll 4</div>
+            </div>
+          </div>
+          {outerCloseData.map((item, index) => (
+            <div
+              key={index}
+              className="vertical-item"
+              onClick={handleOuterClick}
+            >
+              {item}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default HorizontalInVertical

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

@@ -0,0 +1,113 @@
+import React, { useRef, useEffect } from 'react'
+import BScroll from '@better-scroll/core'
+import NestedScroll from '@better-scroll/nested-scroll'
+
+BScroll.use(NestedScroll)
+
+const outerOpenData = ['👈🏻  outer 👉🏻 ', '🙂 🤔 😄 🤨 😐 🙃 ']
+
+const outerCloseData = ['😔 😕 🙃 🤑 😲 😲 ', '👈🏻  outer 👉🏻 ']
+
+const innerData = [
+  '👈🏻  inner 👉🏻  ',
+  '🙂 🤔 😄 🤨 😐 🙃 ',
+  '👈🏻  inner 👉🏻 ',
+  '😔 😕 🙃 🤑 😲 ☹️ ',
+  '👈🏻  inner 👉🏻 ',
+  '🐣 🐣 🐣 🐣 🐣 🐣 ',
+  '👈🏻  inner 👉🏻 ',
+  '🐥 🐥 🐥 🐥 🐥 🐥 ',
+]
+
+const handleOuterClick = () => {
+  alert('clicked outer item')
+}
+
+const handleInnerClick = () => {
+  alert('clicked inner item')
+}
+
+const Horizontal = () => {
+  const outerWrapperRef = useRef(null)
+  const outerScrollRef = useRef(null)
+  const innerWrapperRef = useRef(null)
+  const innerScrollRef = useRef(null)
+
+  useEffect(() => {
+    if (!outerScrollRef.current) {
+      outerScrollRef.current = new BScroll(outerWrapperRef.current, {
+        nestedScroll: {
+          groupId: 'horizontal-nested-scroll', // groupId is a string or number
+        },
+        scrollX: true,
+        scrollY: false,
+        click: true,
+      })
+    }
+    if (!innerScrollRef.current) {
+      innerScrollRef.current = new BScroll(innerWrapperRef.current, {
+        // please keep the same groupId as above
+        // outerScroll and innerScroll will be controlled by the same nestedScroll instance
+        nestedScroll: {
+          groupId: 'horizontal-nested-scroll',
+        },
+        scrollX: true,
+        scrollY: false,
+        click: true,
+      })
+    }
+
+    return () => {
+      outerScrollRef.current?.destroy()
+      innerScrollRef.current?.destroy()
+    }
+  }, [])
+
+  return (
+    <div className="view">
+      <div className="horizontal">
+        <div className="outer-wrapper" ref={outerWrapperRef}>
+          <div className="outer-content">
+            <ul>
+              {outerOpenData.map((item, index) => (
+                <li
+                  key={index}
+                  className="list-item"
+                  onClick={handleOuterClick}
+                >
+                  {item}
+                </li>
+              ))}
+              <li className="list-item inner-list-item">
+                <div className="inner-wrapper" ref={innerWrapperRef}>
+                  <ul className="inner-content">
+                    {innerData.map((item, index) => (
+                      <li
+                        key={index}
+                        className="list-item"
+                        onClick={handleInnerClick}
+                      >
+                        {item}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </li>
+              {outerCloseData.map((item, index) => (
+                <li
+                  key={index}
+                  className="list-item"
+                  onClick={handleOuterClick}
+                >
+                  {item}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Horizontal