@gm-mobile/c-react 3.12.7-beta.0 → 3.12.7-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-mobile/c-react",
-  "version": "3.12.7-beta.0",
+  "version": "3.12.7-beta.2",
   "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.7-beta.0",
-    "@gm-mobile/c-tool": "^3.12.7-beta.0",
-    "@gm-mobile/locales": "^3.12.7-beta.0",
+    "@gm-mobile/c-font": "^3.12.7-beta.2",
+    "@gm-mobile/c-tool": "^3.12.7-beta.2",
+    "@gm-mobile/locales": "^3.12.7-beta.2",
     "dayjs": "^1.11.6"
   },
   "peerDependencies": {
@@ -34,5 +34,5 @@
     "prop-types": "^15.7.2",
     "react": "^16.13.1"
   },
-  "gitHead": "6379d2f6bd34318b1357c4ffef3aeb43dc7e1d6a"
+  "gitHead": "ed1c43a175d8b7af4bc3206ce1944c56b3e48d34"
 }

package/src/component/calendar/base.tsx

@@ -31,6 +31,7 @@ const BaseCalendar: FC<BaseCalendarProps> = ({
   height = 400,
   className,
   style,
+  canScrollWhenMaxOrMinChange = false,
   ...rest
 }) => {
   const [isSelectBegin, setIsSelectBegin] = useState(true)
@@ -101,6 +102,7 @@ const BaseCalendar: FC<BaseCalendarProps> = ({
         ))}
       </Flex>
       <MonthsList
+        canScrollWhenMaxOrMinChange={canScrollWhenMaxOrMinChange}
         selected={selected}
         type={type}
         height={height - 40} // 固定展示星期头部高度40

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
@@ -51,6 +52,8 @@ interface BaseCalendarProps
   disabledDate?: (date: Date) => boolean
   /** 定义日历高度，默认400 */
   height?: number
+  /** 当min 和max 改变时是否滚动 */
+  canScrollWhenMaxOrMinChange: boolean
 }
 
 interface CalendarProps

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

package/src/component/search/search.weapp.tsx

@@ -1,5 +1,5 @@
 import { getLocale } from '@gm-mobile/locales'
-import React, { ChangeEvent, FC, FormEvent, MouseEvent, useState } from 'react'
+import React, { ChangeEvent, FC, FormEvent, MouseEvent } from 'react'
 import classNames from 'classnames'
 import _ from 'lodash'
 import Input from '../input/input'
@@ -12,9 +12,6 @@ const Search: FC<SearchProps> = ({
   value,
   placeholder = getLocale('搜索'),
   searchText,
-  searchType,
-  onSearchType,
-  searchOptions = [],
   type = 'search',
   onCancel = _.noop,
   onSearch = _.noop,
@@ -23,11 +20,6 @@ const Search: FC<SearchProps> = ({
   autoFocus,
   ...rest
 }) => {
-  const [showSelect, setShowSelect] = useState(false)
-  const needSelect = searchOptions?.length > 0
-  const searchTypeText =
-    searchOptions?.find((item) => item.key === searchType)?.name || '请选择'
-
   const handleSearch = (
     e: FormEvent<HTMLFormElement> | MouseEvent<HTMLButtonElement>
   ) => {
@@ -49,48 +41,13 @@ const Search: FC<SearchProps> = ({
     onChange('')
   }
 
-  const handleSelect = (key: string) => {
-    // eslint-disable-next-line no-unused-expressions
-    onSearchType?.(key)
-    setShowSelect(false)
-  }
-
   return (
     <View
       {...rest}
-      className={classNames('m-search m-flex m-flex-align-center', className, {
-        'm-search-select': needSelect,
-      })}
+      className={classNames('m-search m-flex m-flex-align-center', className)}
     >
       <View className='m-search-input m-flex m-flex-flex'>
-        {needSelect ? (
-          <View
-            className='m-search-select-text'
-            onClick={() => setShowSelect((prev) => !prev)}
-          >
-            <Text>{searchTypeText}</Text>
-            <Text className='m-font m-font-arrow-triangle' />
-          </View>
-        ) : (
-          <Text className='m-font m-font-search m-search-icon-search' />
-        )}
-        {showSelect && (
-          <View className='m-search-select-content'>
-            {searchOptions.map((option) => {
-              return (
-                <View
-                  key={option.key}
-                  className={classNames('m-search-select-content-item', {
-                    'm-search-select-active': searchType === option.key,
-                  })}
-                  onClick={() => handleSelect(option.key)}
-                >
-                  <Text>{option.name}</Text>
-                </View>
-              )
-            })}
-          </View>
-        )}
+        <Text className='m-font m-font-search m-search-icon-search' />
         <Input
           type='text'
           confirmType='search'

package/src/component/search/stories.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 import Search from './search'
 import SearchPage from './page'
 import FakeSearch from './fake_search'
@@ -40,24 +40,14 @@ export const normal = () => {
 }
 
 export const cancel = () => {
-  const [type, setType] = useState('1')
   return (
     <View>
       <View>带取消按钮（点Header的搜索按钮）</View>
       <View>
         <Search
           type='cancel'
-          searchType={type}
-          onSearchType={setType}
-          searchOptions={[
-            { name: '供应商', key: '1' },
-            { name: '商品', key: '2' },
-          ]}
           placeholder='在站内搜索'
           value={store.value}
-          style={{
-            background: '#fff',
-          }}
           onChange={(value) => store.setValue(value)}
           onCancel={() => console.log('cancel')}
         />

package/src/component/search/style.less

@@ -1,14 +1,13 @@
 .m-search {
   height: var(--m-size-header-height);
   padding: 0 15px;
-  position: relative;
 
   .m-search-input {
     border-radius: var(--m-size-form-height-sm);
+    overflow: hidden;
     position: relative;
 
     .m-input {
-      border-radius: var(--m-size-form-height-sm);
       height: var(--m-size-form-height-sm);
       background: var(--m-color-bg-back);
       padding: 0 25px 0 25px;
@@ -36,60 +35,6 @@
   .m-btn {
     margin-right: -15px;
   }
-
-  &.m-search-select {
-    .m-search-select-text {
-      position: absolute;
-      display: flex;
-      width: 72px;
-      flex: 1;
-      height: 100%;
-      align-items: center;
-      justify-content: center;
-
-      .m-font-arrow-triangle {
-        font-size: 6px;
-        transform: scale(0.6);
-        margin-left: 4px;
-      }
-    }
-
-    .m-input {
-      padding-left: 72px;
-    }
-
-    .m-search-select-content {
-      position: absolute;
-      top: 38px;
-      background: #fff;
-      border-radius: 4px;
-      padding: 6px 10px;
-      box-shadow: 0 0 8px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
-
-      &::before {
-        content: '';
-        position: absolute;
-        top: -8px;
-        left: calc(50% - 4px);
-        border: 4px solid transparent;
-        border-bottom: 4px solid #fff;
-      }
-
-      .m-search-select-content-item {
-        padding: 4px;
-        border-bottom: 1.5px solid #eee;
-        text-align: center;
-
-        &:last-child {
-          border-bottom: none;
-        }
-      }
-
-      .m-search-select-active {
-        color: var(--m-color-accent);
-      }
-    }
-  }
 }
 
 .m-fake-search {

package/src/component/search/type.ts

@@ -10,11 +10,6 @@ interface SearchPageProps extends Omit<PageProps, 'onChange'> {
   onSearch?: () => void
 }
 
-interface SearchOption {
-  name?: string
-  key: string
-}
-
 interface SearchProps {
   value: string
   onChange: (value: string) => void
@@ -29,16 +24,11 @@ interface SearchProps {
   searchText?: string
   className?: string
   style?: CSSProperties
-  /** options */
-  searchType?: string
-  searchOptions?: SearchOption[]
-  onSearchType?: (key: string) => void
 }
-
 interface FakeSearchProps extends HtmlHTMLAttributes<HTMLDivElement> {
   placeholder?: string
   center?: boolean
   light?: boolean
 }
 
-export type { SearchPageProps, SearchProps, SearchOption, FakeSearchProps }
+export type { SearchPageProps, SearchProps, FakeSearchProps }