feat: 升级1.9.1

AntmJS · Oct 11, 2021 · df7916b · df7916b
1 parent 2831135
commit df7916b
Show file tree

Hide file tree

Showing 13 changed files with 111 additions and 34 deletions.
diff --git a/packages/vantui/src/components/calendar/index.tsx b/packages/vantui/src/components/calendar/index.tsx
@@ -253,7 +253,7 @@ function Index(
       if (maxRange && calcDateNum(date) > maxRange) {
         if (showRangePrompt) {
           Toast({
-            duration: 0,
+            // duration: 0,
             message: rangePrompt || `选择天数不能超过 ${maxRange} 天`,
           })
         }

diff --git a/packages/vantui/src/components/circle/index.tsx b/packages/vantui/src/components/circle/index.tsx
@@ -127,12 +127,13 @@ export default function Index(props: CircleProps) {
   }, [size, type])
   const setHoverColor = useCallback(() => {
     if (isObj(color)) {
+      const _color = color as Record<string, string>
       return getContext().then((context: any) => {
         const LinearColor = context.createLinearGradient(size, 0, 0, 0)
         Object.keys(color)
           .sort((a, b) => parseFloat(a) - parseFloat(b))
           .map((key: any) =>
-            LinearColor.addColorStop(parseFloat(key) / 100, color[key]),
+            LinearColor.addColorStop(parseFloat(key) / 100, _color[key]),
           )
         setState((state) => {
           return {
@@ -142,7 +143,7 @@ export default function Index(props: CircleProps) {
         })
       })
     }
-    setState((state) => {
+    setState((state: any) => {
       return {
         ...state,
         hoverColor: color,

diff --git a/packages/vantui/src/components/mixins/page-scroll.ts b/packages/vantui/src/components/mixins/page-scroll.ts
@@ -25,7 +25,7 @@ export function usePageScroll(scroller: any) {
     return () => {
       let _a
       const page = getCurrentPage() as any
-      if (!isDef(page)) {
+      if (isDef(page)) {
         page.vanPageScroller =
           ((_a = page.vanPageScroller) === null || _a === undefined
             ? undefined

diff --git a/packages/vantui/src/components/slider/index.tsx b/packages/vantui/src/components/slider/index.tsx
@@ -4,7 +4,7 @@ import * as utils from '../wxs/utils'
 import { style } from '../wxs/style'
 import { SliderProps } from '../../../types/slider'
 import { canIUseModel } from '../common/version.js'
-import { getRect } from '../common/utils.js'
+import { getRect, addUnit } from '../common/utils.js'
 
 const MIN_DISTANCE = 10
 function getDirection(x: number, y: number) {
@@ -29,6 +29,7 @@ export default function Index(props: SliderProps) {
     step = 1,
     value = 0,
     barHeight,
+    vertical = false,
     onDrag,
     onChange,
     onDragStart,
@@ -41,6 +42,7 @@ export default function Index(props: SliderProps) {
   } = props
 
   const [barStyle, setBarStyle] = useState<React.CSSProperties>()
+  const [wrapperStyle, setWrapperStyle] = useState<React.CSSProperties>()
   const [value_, setValue] = useState<any>()
   const [dragStatus, setDragStatus] = useState<any>()
   const [buttonIndex, setButtonIndex] = useState<any>()
@@ -117,6 +119,14 @@ export default function Index(props: SliderProps) {
     [getScope, isRange, max, min, value_],
   )
 
+  const calcOffset = useCallback(() => {
+    const scope = getScope(max, min)
+    if (isRange(value_)) {
+      return ((value_[0] - Number(min)) * 100) / scope + '%'
+    }
+    return '0%'
+  }, [getScope, isRange, max, min, value_])
+
   const format = useCallback(
     function (value) {
       return Math.round(Math.max(min, Math.min(value, max)) / step) * step
@@ -133,20 +143,29 @@ export default function Index(props: SliderProps) {
 
   const updateValue = useCallback(
     function (value: any, end?: any, drag?: boolean) {
-      console.info(value, end, drag, 'updateValueupdateValue')
+      // console.info(value, end, drag, 'updateValueupdateValue')
       if (isRange(value)) {
         value = handleOverlap(value).map((val: any) => format(val))
       } else {
         value = format(value)
       }
 
+      const mainAxis = vertical ? 'height' : 'width'
+
       setValue(value)
+
+      setWrapperStyle({
+        background: inactiveColor || '',
+        [vertical ? 'width' : 'height']: addUnit(barHeight) || '',
+      })
       const styleBar: any = {
-        width: calcMainAxis(),
-        left: isRange(value) ? `${value[0]}%` : 0,
+        [mainAxis]: calcMainAxis(),
+        left: vertical ? 0 : calcOffset(),
+        top: vertical ? calcOffset() : 0,
       }
       if (drag) styleBar.transition = 'none'
       setBarStyle(styleBar)
+      drag ? 'transition: none;' : ''
       if (drag && onDrag) {
         onDrag({ detail: value } as ITouchEvent)
       }
@@ -157,7 +176,18 @@ export default function Index(props: SliderProps) {
         setValue(value)
       }
     },
-    [calcMainAxis, format, handleOverlap, isRange, onChange, onDrag],
+    [
+      calcMainAxis,
+      format,
+      handleOverlap,
+      isRange,
+      onChange,
+      onDrag,
+      barHeight,
+      calcOffset,
+      inactiveColor,
+      vertical,
+    ],
   )
 
   useEffect(
@@ -213,7 +243,11 @@ export default function Index(props: SliderProps) {
       const touchState = touchMove(event)
       setDragStatus('draging')
       getRect(null, '.van-slider').then((rect: any) => {
-        const diff = (touchState.deltaX / rect.width) * getRange()
+        // const diff = (touchState.deltaX / rect.width) * getRange()
+        const delta = vertical ? touchState.deltaY : touchState.deltaX
+        const total = vertical ? rect.height : rect.width
+        const diff = (delta / total) * getRange()
+
         if (isRange(startValue)) {
           newValue[buttonIndex] = startValue[buttonIndex] + diff
           setNewValue(newValue)
@@ -236,6 +270,7 @@ export default function Index(props: SliderProps) {
       startValue,
       touchMove,
       updateValue,
+      vertical,
     ],
   )
 
@@ -254,8 +289,14 @@ export default function Index(props: SliderProps) {
     function (event: any) {
       if (disabled) return
       getRect(null, '.van-slider').then((rect: any) => {
-        const value =
-          ((event.clientX - rect.left) / rect.width) * getRange() + min
+        const touchState = touchMove(event)
+        // const value = ((event.clientX - rect.left) / rect.width) * getRange() + min
+        const delta = vertical
+          ? touchState.clientY - rect.top
+          : touchState.clientX - rect.left
+        const total = vertical ? rect.height : rect.width
+        const value = Number(min) + (delta / total) * getRange()
+
         if (isRange(value_)) {
           const [left, right] = value_
           const middle = (left + right) / 2
@@ -269,7 +310,16 @@ export default function Index(props: SliderProps) {
         }
       })
     },
-    [disabled, getRange, isRange, min, updateValue, value_],
+    [
+      disabled,
+      getRange,
+      isRange,
+      min,
+      updateValue,
+      value_,
+      vertical,
+      touchMove,
+    ],
   )
 
   return (
@@ -278,17 +328,12 @@ export default function Index(props: SliderProps) {
         'custom-class ' +
         utils.bem('slider', {
           disabled,
+          vertical,
         }) +
         ' ' +
         className
       }
-      style={utils.style([
-        style({
-          background: inactiveColor,
-          height: utils.addUnit(barHeight),
-        }),
-        style,
-      ])}
+      style={utils.style([wrapperStyle, style])}
       onClick={onClick}
       {...others}
     >

diff --git a/packages/vantui/src/components/tabs/index.tsx b/packages/vantui/src/components/tabs/index.tsx
@@ -56,6 +56,7 @@ export default function Index(props: TabsProps) {
     offsetY: 0,
     startX: 0,
     startY: 0,
+    swiping: false,
   })
   const [state, setState]: any = useState({
     tabs: [],
@@ -197,6 +198,7 @@ export default function Index(props: TabsProps) {
         setState((pre: any) => {
           return { ...pre, lineOffsetLeft }
         })
+        ref.current.swiping = true
         if (skipTransition) {
           Taro.nextTick(() => {
             setState((pre: any) => {
@@ -305,7 +307,7 @@ export default function Index(props: TabsProps) {
   }
 
   const onTouchMove = function (event: any) {
-    if (!swipeable) return
+    if (!swipeable || ref.current.swiping) return
     touchMove(event)
   }
 
@@ -319,20 +321,21 @@ export default function Index(props: TabsProps) {
         setCurrentIndex(index)
       }
     }
+
+    ref.current.swiping = false
   }
 
   useEffect(function () {
     requestAnimationFrame(() => {
+      ref.current.swiping = true
       setState((pre: any) => {
         return {
           ...pre,
           container: Taro.createSelectorQuery().select('.van-tabs'),
         }
       })
-      if (!ref.current.skipInit) {
-        resize()
-        scrollIntoView()
-      }
+      resize()
+      scrollIntoView()
     })
     Taro.nextTick(function () {
       resize()
@@ -343,9 +346,6 @@ export default function Index(props: TabsProps) {
 
   useEffect(
     function () {
-      if (!ref.current.skipInit) {
-        ref.current.skipInit = true
-      }
       if (active !== getCurrentName()) {
         setCurrentIndexByName(active)
       }

diff --git a/packages/vantui/src/style/components/slider.less b/packages/vantui/src/style/components/slider.less
@@ -53,4 +53,35 @@
   &--disabled {
     .theme(opacity, '@slider-disabled-opacity');
   }
+
+  &--vertical {
+    display: inline-block;
+    .theme(width, '@slider-bar-height');
+
+    height: 100%;
+
+    .van-slider__button-wrapper,
+    .van-slider__button-wrapper-right {
+      top: auto;
+      right: 50%;
+      bottom: 0;
+      transform: translate3d(50%, 50%, 0);
+    }
+
+    .van-slider__button-wrapper-left {
+      top: 0;
+      right: 50%;
+      left: auto;
+      transform: translate3d(50%, -50%, 0);
+    }
+
+    // use pseudo element to expand click area
+    &::before {
+      top: 0;
+      .theme(right, '-@padding-xs');
+
+      bottom: 0;
+      .theme(left, '-@padding-xs');
+    }
+  }
 }
diff --git a/packages/vantui/src/style/components/stepper.less b/packages/vantui/src/style/components/stepper.less
@@ -114,7 +114,6 @@
     min-height: 0;
     margin: 2px;
     padding: 2px;
-    font-size: 28px;
     text-align: center;
     vertical-align: middle;
     border: 0;

diff --git a/packages/vantui/types/circle.d.ts b/packages/vantui/types/circle.d.ts
@@ -9,7 +9,7 @@ export interface CircleProps extends StandardProps {
   size?: number
   fill?: string
   layerColor?: string
-  color?: string
+  color?: string | Record<string, string>
   type?: string
   strokeWidth?: number
   clockwise?: boolean

diff --git a/packages/vantui/types/grid.d.ts b/packages/vantui/types/grid.d.ts
@@ -3,7 +3,7 @@ import { StandardProps } from '@tarojs/components'
 
 export interface GridProps extends StandardProps {
   square?: boolean
-  gutter?: number
+  gutter?: number | string
   clickable?: boolean
   columnNum?: number
   center?: boolean

diff --git a/packages/vantui/types/radio.d.ts b/packages/vantui/types/radio.d.ts
@@ -10,7 +10,7 @@ export interface RadioProps extends StandardProps {
   labelPosition?: string
   labelDisabled?: boolean
   shape?: 'round' | 'square'
-  iconSize?: number
+  iconSize?: number | string
   children?: ReactNode
   renderIcon?: ReactNode
   onChange?: (event: ITouchEvent) => any

diff --git a/packages/vantui/types/share-sheet.d.ts b/packages/vantui/types/share-sheet.d.ts
@@ -20,7 +20,7 @@ export interface ShareSheetProps extends StandardProps {
   overlay?: boolean
   safeAreaInsetBottom?: boolean
   closeOnClickOverlay?: boolean
-  duration?: number
+  duration?: number | string
   onClickOverlay?: () => void
   onCancel?: () => void
   onSelect?: (

diff --git a/packages/vantui/types/slider.d.ts b/packages/vantui/types/slider.d.ts
@@ -17,6 +17,7 @@ export interface SliderProps extends StandardProps {
   step?: number
   value?: number
   barHeight?: number | string
+  vertical?: boolean
   onDrag?: (e: ITouchEvent & SliderEvent) => void
   onChange?: (e: ITouchEvent & SliderEvent) => void
   onDragStart?: () => void

diff --git a/packages/vantui/types/swipe-cell.d.ts b/packages/vantui/types/swipe-cell.d.ts
@@ -26,7 +26,7 @@ export interface SwipeCellProps extends StandardProps {
   leftWidth?: number
   rightWidth?: number
   asyncClose?: boolean
-  name?: string
+  name?: string | number
   catchMove?: boolean
   wrapperStyle?: React.CSSProperties
   onOpen?: (e: ITouchEvent & SwipeCellOpen) => void