cbvirtua 1.0.106 → 1.0.107

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/router.js

@@ -0,0 +1,369 @@
+import React, { lazy, Suspense } from 'react'
+import { Switch, Route } from 'react-router-dom'
+
+const ROUTES = [
+  {
+    path: '/core',
+    component: lazy(() => import('./pages/core')),
+    routes: [
+      {
+        path: '/core/default',
+        component: lazy(() => import('./pages/core/components/default')),
+      },
+      {
+        path: '/core/horizontal',
+        component: lazy(() => import('./pages/core/components/horizontal')),
+      },
+      {
+        path: '/core/dynamic-content',
+        component: lazy(() =>
+          import('./pages/core/components/dynamic-content')
+        ),
+      },
+      {
+        path: '/core/specified-content',
+        component: lazy(() =>
+          import('./pages/core/components/specified-content')
+        ),
+      },
+      {
+        path: '/core/freescroll',
+        component: lazy(() => import('./pages/core/components/freescroll')),
+      },
+      {
+        path: '/core/vertical-rotated',
+        component: lazy(() =>
+          import('./pages/core/components/vertical-rotated')
+        ),
+      },
+      {
+        path: '/core/horizontal-rotated',
+        component: lazy(() =>
+          import('./pages/core/components/horizontal-rotated')
+        ),
+      },
+    ],
+  },
+  {
+    path: '/observe-dom',
+    component: lazy(() => import('./pages/observe-dom')),
+    routes: [
+      {
+        path: '/observe-dom/',
+        component: lazy(() => import('./pages/observe-dom/components/default')),
+      },
+    ],
+  },
+  {
+    path: '/observe-image',
+    component: lazy(() => import('./pages/observe-image')),
+    routes: [
+      {
+        path: '/observe-image/',
+        component: lazy(() =>
+          import('./pages/observe-image/components/default')
+        ),
+      },
+    ],
+  },
+  {
+    path: '/slide',
+    component: lazy(() => import('./pages/slide')),
+    routes: [
+      {
+        path: '/slide/banner',
+        component: lazy(() => import('./pages/slide/components/banner')),
+      },
+      {
+        path: '/slide/fullpage',
+        component: lazy(() => import('./pages/slide/components/fullpage')),
+      },
+      {
+        path: '/slide/vertical',
+        component: lazy(() => import('./pages/slide/components/vertical')),
+      },
+      {
+        path: '/slide/dynamic',
+        component: lazy(() => import('./pages/slide/components/dynamic')),
+      },
+      {
+        path: '/slide/specified',
+        component: lazy(() =>
+          import('./pages/slide/components/specified-index')
+        ),
+      },
+    ],
+  },
+  {
+    path: '/zoom',
+    component: lazy(() => import('./pages/zoom')),
+    routes: [
+      {
+        path: '/zoom/',
+        component: lazy(() => import('./pages/zoom/components/default')),
+      },
+    ],
+  },
+  {
+    path: '/picker',
+    component: lazy(() => import('./pages/picker')),
+    routes: [
+      {
+        path: '/picker/one-column',
+        component: lazy(() => import('./pages/picker/components/one-column')),
+      },
+      {
+        path: '/picker/double-column',
+        component: lazy(() =>
+          import('./pages/picker/components/double-column')
+        ),
+      },
+      {
+        path: '/picker/linkage-column',
+        component: lazy(() =>
+          import('./pages/picker/components/linkage-column')
+        ),
+      },
+    ],
+  },
+  {
+    path: '/pullup',
+    component: lazy(() => import('./pages/pullup')),
+    routes: [
+      {
+        path: '/pullup/',
+        component: lazy(() => import('./pages/pullup/components/default')),
+      },
+    ],
+  },
+  {
+    path: '/pulldown',
+    component: lazy(() => import('./pages/pulldown')),
+    routes: [
+      {
+        path: '/pulldown/default',
+        component: lazy(() => import('./pages/pulldown/components/default')),
+      },
+      {
+        path: '/pulldown/sina',
+        component: lazy(() => import('./pages/pulldown/components/sina-weibo')),
+      },
+    ],
+  },
+  {
+    path: '/scrollbar',
+    component: lazy(() => import('./pages/scrollbar')),
+    routes: [
+      {
+        path: '/scrollbar/vertical',
+        component: lazy(() => import('./pages/scrollbar/components/vertical')),
+      },
+      {
+        path: '/scrollbar/horizontal',
+        component: lazy(() =>
+          import('./pages/scrollbar/components/horizontal')
+        ),
+      },
+      {
+        path: '/scrollbar/custom',
+        component: lazy(() => import('./pages/scrollbar/components/custom')),
+      },
+      {
+        path: '/scrollbar/mousewheel',
+        component: lazy(() =>
+          import('./pages/scrollbar/components/mousewheel')
+        ),
+      },
+    ],
+  },
+  {
+    path: '/indicators',
+    component: lazy(() => import('./pages/indicators')),
+    routes: [
+      {
+        path: '/indicators/minimap',
+        component: lazy(() => import('./pages/indicators/components/minimap')),
+      },
+      {
+        path: '/indicators/parallax-scroll',
+        component: lazy(() =>
+          import('./pages/indicators/components/parallax-scroll')
+        ),
+      },
+    ],
+  },
+  {
+    path: '/infinity',
+    component: lazy(() => import('./pages/infinity')),
+  },
+  {
+    path: '/form',
+    component: lazy(() => import('./pages/form')),
+    routes: [
+      {
+        path: '/form/textarea',
+        component: lazy(() => import('./pages/form/components/textarea')),
+      },
+    ],
+  },
+  {
+    path: '/nested-scroll',
+    component: lazy(() => import('./pages/nested-scroll')),
+    routes: [
+      {
+        path: '/nested-scroll/vertical',
+        component: lazy(() =>
+          import('./pages/nested-scroll/components/vertical')
+        ),
+      },
+      {
+        path: '/nested-scroll/horizontal',
+        component: lazy(() =>
+          import('./pages/nested-scroll/components/horizontal')
+        ),
+      },
+      {
+        path: '/nested-scroll/horizontal-in-vertical',
+        component: lazy(() =>
+          import('./pages/nested-scroll/components/horizontal-in-vertical')
+        ),
+      },
+      {
+        path: '/nested-scroll/triple-vertical',
+        component: lazy(() =>
+          import('./pages/nested-scroll/components/triple-vertical')
+        ),
+      },
+    ],
+  },
+  {
+    path: '/mouse-wheel',
+    component: lazy(() => import('./pages/mouse-wheel')),
+    routes: [
+      {
+        path: '/mouse-wheel/vertical-scroll',
+        component: lazy(() =>
+          import('./pages/mouse-wheel/components/vertical-scroll')
+        ),
+      },
+      {
+        path: '/mouse-wheel/horizontal-scroll',
+        component: lazy(() =>
+          import('./pages/mouse-wheel/components/horizontal-scroll')
+        ),
+      },
+      {
+        path: '/mouse-wheel/vertical-slide',
+        component: lazy(() =>
+          import('./pages/mouse-wheel/components/vertical-slide')
+        ),
+      },
+      {
+        path: '/mouse-wheel/horizontal-slide',
+        component: lazy(() =>
+          import('./pages/mouse-wheel/components/horizontal-slide')
+        ),
+      },
+      {
+        path: '/mouse-wheel/pullup',
+        component: lazy(() => import('./pages/mouse-wheel/components/pullup')),
+      },
+      {
+        path: '/mouse-wheel/pulldown',
+        component: lazy(() =>
+          import('./pages/mouse-wheel/components/pulldown')
+        ),
+      },
+      {
+        path: '/mouse-wheel/picker',
+        component: lazy(() => import('./pages/mouse-wheel/components/picker')),
+      },
+    ],
+  },
+  {
+    path: '/movable',
+    component: lazy(() => import('./pages/movable')),
+    routes: [
+      {
+        path: '/movable/default',
+        component: lazy(() => import('./pages/movable/components/default')),
+      },
+      {
+        path: '/movable/scale',
+        component: lazy(() => import('./pages/movable/components/scale')),
+      },
+      {
+        path: '/movable/multi-content',
+        component: lazy(() =>
+          import('./pages/movable/components/multi-content')
+        ),
+      },
+      {
+        path: '/movable/multi-content-scale',
+        component: lazy(() =>
+          import('./pages/movable/components/multi-content-scale')
+        ),
+      },
+    ],
+  },
+  {
+    path: '/compose',
+    component: lazy(() => import('./pages/compose')),
+    routes: [
+      {
+        path: '/compose/pullup-pulldown',
+        component: lazy(() =>
+          import('./pages/compose/components/pullup-pulldown')
+        ),
+      },
+      {
+        path: '/compose/pullup-pulldown-slide',
+        component: lazy(() =>
+          import('./pages/compose/components/pullup-pulldown-slide')
+        ),
+      },
+      {
+        path: '/compose/pullup-pulldown-outnested',
+        component: lazy(() =>
+          import('./pages/compose/components/pullup-pulldown-outnested')
+        ),
+      },
+      {
+        path: '/compose/slide-nested',
+        component: lazy(() =>
+          import('./pages/compose/components/slide-nested')
+        ),
+      },
+    ],
+  },
+]
+
+const renderRoute = (route) => {
+  const { component: Component, ...rest } = route
+  return (
+    <Route
+      {...rest}
+      key={route.path}
+      render={(props) => (
+        <Component {...props}>
+          <Router routes={route.routes}></Router>
+        </Component>
+      )}
+    />
+  )
+}
+
+const Router = ({ routes }) => {
+  if (!routes?.length) {
+    return null
+  }
+  return <Switch>{routes.map((route) => renderRoute(route))}</Switch>
+}
+
+const RouterView = () => (
+  <Suspense fallback={null}>
+    <Router routes={ROUTES} />
+  </Suspense>
+)
+
+export default RouterView

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

package/better-scroll-dev/better-scroll-dev/packages/scroll-bar/README.md

@@ -0,0 +1,17 @@
+# @better-scroll/scroll-bar
+
+[中文文档](https://github.com/ustbhuangyi/better-scroll/blob/master/packages/scroll-bar/README_zh-CN.md)
+
+An elegant and beautiful scroll bar.
+
+## Usage
+
+```js
+import BScroll from '@better-scroll/core'
+import Scrollbar from '@better-scroll/scroll-bar'
+BScroll.use(Scrollbar)
+
+const bs = new BScroll('.wrapper', {
+  scrollbar: true
+})
+```

package/better-scroll-dev/better-scroll-dev/packages/scroll-bar/README_zh-CN.md

@@ -0,0 +1,15 @@
+# @better-scroll/scroll-bar
+
+一个优雅美丽的滚动条.
+
+## 使用
+
+```js
+import BScroll from '@better-scroll/core'
+import Scrollbar from '@better-scroll/scroll-bar'
+BScroll.use(Scrollbar)
+
+const bs = new BScroll('.wrapper', {
+  scrollbar: true
+})
+```

package/better-scroll-dev/better-scroll-dev/packages/scroll-bar/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@better-scroll/scroll-bar",
+  "version": "2.5.1",
+  "description": "scrollbar is used to BetterScroll, which behaves like browser scrollbar",
+  "author": {
+    "name": "jizhi",
+    "email": "theniceangel@163.com"
+  },
+  "main": "dist/scroll-bar.min.js",
+  "module": "dist/scroll-bar.esm.js",
+  "typings": "dist/types/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "bugs": {
+    "url": "https://github.com/ustbhuangyi/better-scroll/issues"
+  },
+  "homepage": "https://github.com/ustbhuangyi/better-scroll",
+  "keywords": [
+    "scroll",
+    "iscroll",
+    "javascript",
+    "typescript",
+    "ios",
+    "scrollbar"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/ustbhuangyi/better-scroll.git",
+    "directory": "packages/scroll-bar"
+  },
+  "dependencies": {
+    "@better-scroll/core": "^2.5.1"
+  },
+  "gitHead": "f441227b6137d44ba0b44b97ed4cd49de9386130"
+}

package/better-scroll-dev/better-scroll-dev/packages/scroll-bar/src/__mocks__/event-handler.ts

@@ -0,0 +1,10 @@
+import { EventEmitter } from '@better-scroll/shared-utils'
+
+const EventHandler = jest.fn().mockImplementation(() => {
+  return {
+    hooks: new EventEmitter(['touchStart', 'touchMove', 'touchEnd']),
+    destroy: jest.fn(),
+  }
+})
+
+export default EventHandler

package/better-scroll-dev/better-scroll-dev/packages/scroll-bar/src/__mocks__/indicator.ts

@@ -0,0 +1,10 @@
+const mockIndicator = jest
+  .fn()
+  .mockImplementation(function IndicatorMockFn(scroll: any, options: any) {
+    return {
+      wrapper: options.wrapper,
+      destroy: jest.fn(),
+    }
+  })
+
+export default mockIndicator

package/better-scroll-dev/better-scroll-dev/packages/scroll-bar/src/__tests__/__snapshots__/index.spec.ts.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`scroll-bar unit tests constructor should create indicator elements 1`] = `
+<div>
+  <div />
+  <div
+    class="bscroll-horizontal-scrollbar"
+    style="position: absolute; z-index: 9999; overflow: hidden; height: 7px; left: 2px; right: 2px; bottom: 0px; pointer-events: none;"
+  >
+    <div
+      class="bscroll-indicator"
+      style="box-sizing: border-box; position: absolute; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255,255,255,0.9); border-radius: 3px; height: 100%;"
+    />
+  </div>
+  <div
+    class="bscroll-vertical-scrollbar"
+    style="position: absolute; z-index: 9999; overflow: hidden; width: 7px; bottom: 2px; top: 2px; right: 1px; pointer-events: none;"
+  >
+    <div
+      class="bscroll-indicator"
+      style="box-sizing: border-box; position: absolute; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255,255,255,0.9); border-radius: 3px; width: 100%;"
+    />
+  </div>
+</div>
+`;

package/better-scroll-dev/better-scroll-dev/packages/scroll-bar/src/__tests__/event-handler.spec.ts

@@ -0,0 +1,136 @@
+import Indicator, { IndicatorDirection, OffsetType } from '../indicator'
+import BScroll from '@better-scroll/core'
+import EventHandler from '../event-handler'
+import {
+  dispatchTouchStart,
+  dispatchTouchMove,
+  dispatchTouchEnd,
+} from '@better-scroll/core/src/__tests__/__utils__/event'
+
+const addProperties = <T extends Object, K extends Object>(
+  target: T,
+  source: K
+) => {
+  for (const key in source) {
+    ;(target as any)[key] = source[key]
+  }
+  return target
+}
+
+describe('scroll-bar indicator tests', () => {
+  let scroll: BScroll
+  let indicator: Indicator
+  let wrapper = document.createElement('div')
+  let indicatorEl = document.createElement('div')
+  wrapper.appendChild(indicatorEl)
+  let indicatorOptions = {
+    wrapper,
+    direction: IndicatorDirection.Vertical,
+    fade: true,
+    fadeInTime: 250,
+    fadeOutTime: 500,
+    interactive: false,
+    minSize: 8,
+    isCustom: false,
+    scrollbarTrackClickable: false,
+    scrollbarTrackOffsetType: OffsetType.Step,
+    scrollbarTrackOffsetTime: 300,
+  }
+  let EventHandlerOptions = {
+    disableMouse: false,
+    disableTouch: false,
+  }
+
+  beforeEach(() => {
+    // create Dom
+    const wrapper = document.createElement('div')
+    const content = document.createElement('div')
+    wrapper.appendChild(content)
+    scroll = new BScroll(wrapper, {})
+    indicator = new Indicator(scroll, indicatorOptions)
+  })
+
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('touchStart | touchMove | touchEnd hooks', () => {
+    const eventHandler = new EventHandler(indicator, EventHandlerOptions)
+    expect(Object.keys(eventHandler.hooks.eventTypes)).toMatchObject([
+      'touchStart',
+      'touchMove',
+      'touchEnd',
+    ])
+
+    const touchStartMockFn = jest.fn()
+    const touchMoveMockFn = jest.fn()
+    const touchEndMockFn = jest.fn()
+    const eventHandlerHooks = eventHandler.hooks
+    eventHandlerHooks.on(
+      eventHandlerHooks.eventTypes.touchStart,
+      touchStartMockFn
+    )
+    eventHandlerHooks.on(
+      eventHandlerHooks.eventTypes.touchMove,
+      touchMoveMockFn
+    )
+    eventHandlerHooks.on(eventHandlerHooks.eventTypes.touchEnd, touchEndMockFn)
+
+    // scroll is disabled
+    addProperties(scroll, {
+      enabled: false,
+    })
+    dispatchTouchStart(indicatorEl, [
+      {
+        pageX: 0,
+        pageY: 0,
+      },
+    ])
+    dispatchTouchMove(window, [
+      {
+        pageX: 10,
+        pageY: 10,
+      },
+    ])
+    dispatchTouchEnd(window, [
+      {
+        pageX: 20,
+        pageY: 20,
+      },
+    ])
+    expect(touchStartMockFn).not.toBeCalled()
+    expect(touchMoveMockFn).not.toBeCalled()
+    expect(touchEndMockFn).not.toBeCalled()
+
+    // scroll is enabled
+    addProperties(scroll, {
+      enabled: true,
+    })
+    dispatchTouchStart(indicatorEl, [
+      {
+        pageX: 0,
+        pageY: 0,
+      },
+    ])
+    dispatchTouchMove(window, [
+      {
+        pageX: 10,
+        pageY: 10,
+      },
+    ])
+    dispatchTouchEnd(window, [
+      {
+        pageX: 20,
+        pageY: 20,
+      },
+    ])
+    expect(touchStartMockFn).toBeCalled()
+    expect(touchMoveMockFn).toBeCalled()
+    expect(touchEndMockFn).toBeCalled()
+  })
+
+  it('destroy', () => {
+    const eventHandler = new EventHandler(indicator, EventHandlerOptions)
+    eventHandler.destroy()
+  })
+})