@gm-mobile/c-react 3.12.6 → 3.12.7-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-mobile/c-react",
-  "version": "3.12.6",
+  "version": "3.12.7-beta.1",
   "description": "> TODO: description",
   "author": "liyatang <liyatang@qq.com>",
   "homepage": "https://github.com/gmfe/gm-mobile#readme",
@@ -21,9 +21,9 @@
     "url": "https://github.com/gmfe/gm-mobile/issues"
   },
   "dependencies": {
-    "@gm-mobile/c-font": "^3.12.6",
-    "@gm-mobile/c-tool": "^3.12.6",
-    "@gm-mobile/locales": "^3.12.6",
+    "@gm-mobile/c-font": "^3.12.7-beta.1",
+    "@gm-mobile/c-tool": "^3.12.7-beta.1",
+    "@gm-mobile/locales": "^3.12.7-beta.1",
     "dayjs": "^1.11.6"
   },
   "peerDependencies": {
@@ -34,5 +34,5 @@
     "prop-types": "^15.7.2",
     "react": "^16.13.1"
   },
-  "gitHead": "80976ed55d6e7cea433903dc5ad4bf6bb7343cf6"
+  "gitHead": "9b275d36b99b3612258531c0b44d59a14e672f60"
 }

package/src/component/calendar/months_list.tsx

@@ -6,10 +6,36 @@ import { VList, VListRef } from '../v_list'
 import Month from './month'
 import { CALENDAR_TYPE } from './util'
 import { MonthListProps } from './types'
+import usePreviousObject from './use_previous'
 
 // 目前只支持固定高度，定为265
 const MONTH_HEIGHT = 265
 
+function whichValueChanged(
+  prevArray: [Dayjs, Dayjs],
+  currentArray: [Dayjs, Dayjs]
+) {
+  const changes: number[] = []
+
+  if (!prevArray) {
+    return 0
+  }
+
+  if (!moment(prevArray[0]).isSame(moment(currentArray[0]))) {
+    changes.push(0)
+  }
+
+  if (!moment(prevArray[1]).isSame(moment(currentArray[1]))) {
+    changes.push(1)
+  }
+
+  /** 没有变化 */
+  if (changes.length === 0) return 0
+  /** 两个都变化了 */
+  if (changes.length === 2) return 1
+  return 0
+}
+
 const MonthsList: FC<MonthListProps> = ({
   min,
   max,
@@ -19,8 +45,10 @@ const MonthsList: FC<MonthListProps> = ({
   onSelectDay,
   disabledDate,
   showDateLabel,
+  canScrollWhenMaxOrMinChange = false,
 }) => {
   const refList = useRef<VListRef>(null)
+  const previous = usePreviousObject(selected)
 
   const computedMonthList = () => {
     // 优先 min，其次 begin ，其次 当前
@@ -50,7 +78,7 @@ const MonthsList: FC<MonthListProps> = ({
   }
   const monthsList = computedMonthList()
 
-  useEffect(() => {
+  const scrollToTarget = (flag: boolean) => {
     if (selected.length) {
       const date = type === CALENDAR_TYPE.RANGE ? selected[1] : selected[0]
       const targetId = _.findIndex(
@@ -60,12 +88,39 @@ const MonthsList: FC<MonthListProps> = ({
           moment(item).month() === moment(date).month()
       )
 
-      setTimeout(() => {
+      if (flag) {
+        setTimeout(() => {
+          refList.current && refList.current.apiDoScrollToKey(targetId)
+        }, 200)
+      } else {
         refList.current && refList.current.apiDoScrollToKey(targetId)
-      }, 200)
+      }
     }
+  }
+
+  useEffect(() => {
+    scrollToTarget(true)
   }, [])
 
+  useEffect(() => {
+    if (!canScrollWhenMaxOrMinChange) {
+      return
+    }
+    if (max || min) {
+      const flagItem = whichValueChanged(previous as any, selected as any)
+      const date = selected[flagItem]
+      const targetId = _.findIndex(
+        monthsList,
+        (item) =>
+          moment(item).year() === moment(date).year() &&
+          moment(item).month() === moment(date).month()
+      )
+      if (targetId !== -1) {
+        refList.current && refList.current.apiDoScrollToKey(targetId)
+      }
+    }
+  }, [max, min])
+
   return (
     <VList
       ref={refList}

package/src/component/calendar/types.ts

@@ -31,6 +31,7 @@ interface MonthProps {
 
 interface MonthListProps extends Omit<MonthProps, 'currentMoment'> {
   height: number
+  canScrollWhenMaxOrMinChange?: boolean
 }
 
 interface BaseCalendarProps

package/src/component/calendar/use_previous.ts

@@ -0,0 +1,13 @@
+import { useEffect, useRef } from 'react'
+
+function usePreviousObject<T extends Record<string, any>>(obj: T): T {
+  const ref = useRef<T | null>(null)
+
+  useEffect(() => {
+    ref.current = obj
+  }, [obj])
+
+  return ref.current as T
+}
+
+export default usePreviousObject