@mpxjs/webpack-plugin 2.10.3-beta.6 → 2.10.4-beta.10

package/lib/runtime/components/react/mpx-picker/date.tsx

@@ -1,86 +1,243 @@
-import { View, TouchableWithoutFeedback } from 'react-native'
-import { DatePicker } from '@ant-design/react-native'
-import React, { forwardRef, useState, useRef, useEffect } from 'react'
-import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
-import { DateProps, LayoutType } from './type'
-
-function formatTimeStr (time = ''): Date {
-  let [year, month, day]: any = time.split('-')
-  year = ~~year || 2000
-  month = ~~month || 1
-  day = ~~day || 1
-  return new Date(year, month - 1, day)
+import React, { forwardRef, useCallback, useMemo, useRef, useState, useEffect, useImperativeHandle } from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import MpxPickerView from '../mpx-picker-view'
+import MpxPickerViewColumn from '../mpx-picker-view-column'
+import { DateProps, TimeValue } from './type'
+import { HandlerRef } from '../useNodesRef'
+import { useUpdateEffect } from '../utils'
+import { years, months, daysInMonth, wrapDate, daysInMonthLength, START_YEAR, END_YEAR } from './dateData'
+
+type FormatObj = {
+  indexArr: number[]
+  rangeArr: string[][]
+  nameArr?: string[]
 }
 
-function dateToString (date: Date, fields: 'day' | 'month' | 'year' = 'day'): string {
-  const yyyy: string = date.getFullYear() + ''
-  const MM: string = ('0' + (date.getMonth() + 1)).slice(-2)
-  const dd: string = ('0' + date.getDate()).slice(-2)
-  let ret: string = yyyy
-  if (fields === 'month' || fields === 'day') {
-    ret += `-${MM}`
-    if (fields === 'day') {
-      ret += `-${dd}`
-    }
+const START_DATE: TimeValue = `${START_YEAR}-01-01`
+const END_DATE: TimeValue = `${END_YEAR}-12-31`
+const START_DATE_ARR = [START_YEAR, 1, 1]
+const END_DATE_ARR = [END_YEAR, 12, 31]
+
+const styles = StyleSheet.create({
+  pickerContainer: {
+    height: 240,
+    paddingHorizontal: 10,
+    borderTopLeftRadius: 10,
+    borderTopRightRadius: 10
+  },
+  pickerIndicator: {
+    height: 45
+  },
+  pickerItem: {
+    fontSize: 16,
+    lineHeight: 45,
+    textAlign: 'center'
+  }
+})
+
+const getColumnLength = (fields: DateProps['fields'] = 'day') => {
+  return fields === 'year' ? 1 : fields === 'month' ? 2 : 3
+}
+
+const compareDateStr = (date1: TimeValue | number[], date2: TimeValue | number[]) => {
+  const [y1 = START_YEAR, m1 = 0, d1 = 0] = typeof date1 === 'string' ? date1.split('-').map(Number) : date1
+  const [y2 = START_YEAR, m2 = 0, d2 = 0] = typeof date2 === 'string' ? date2.split('-').map(Number) : date2
+  const num1 = y1 * 10000 + m1 * 100 + d1
+  const num2 = y2 * 10000 + m2 * 100 + d2
+  if (num1 === num2) {
+    return 0
   }
-  return ret
+  return num1 > num2 ? 1 : -1
 }
 
-const _DatePicker = forwardRef<HandlerRef<View, DateProps>, DateProps>((props: DateProps, ref): React.JSX.Element => {
-  const { children, start = '1970-01-01', end = '2999-01-01', value, bindchange, bindcancel, disabled, fields, style } = props
-  const [datevalue, setDateValue] = useState(value)
-  // 存储layout布局信息
-  const layoutRef = useRef({})
-  const viewRef = useRef<View>(null)
-  const nodeRef = useRef<View>(null)
-  useNodesRef<View, DateProps>(props, ref, nodeRef, {
-    style
-  })
+const getDateArr = (date: TimeValue | number[]): number[] => {
+  const [y, m, d] = typeof date === 'string' ? date.split('-').map(Number) : date
+  return [y || 0, m || 0, d || 0]
+}
 
-  useEffect(() => {
-    value && setDateValue(value)
-  }, [value])
-
-  const onChange = (date: Date): void => {
-    const { fields = 'day' } = props
-    const ret = dateToString(date, fields)
-    setDateValue(ret)
-    bindchange && bindchange({ detail: { value: ret } })
+const calibrateDate = (date: TimeValue | number[], start: TimeValue, end: TimeValue): number[] => {
+  let startArr = getDateArr(start)
+  let endArr = getDateArr(end)
+  let dateArr = getDateArr(date)
+  if (compareDateStr(startArr, endArr) > 0) {
+    startArr = START_DATE_ARR
+  }
+  if (compareDateStr(endArr, startArr) < 0) {
+    endArr = END_DATE_ARR
+  }
+  if (compareDateStr(start, end) > 0) {
+    startArr = START_DATE_ARR
+    endArr = END_DATE_ARR
   }
+  if (compareDateStr(dateArr, endArr) > 0) {
+    dateArr = endArr
+  }
+  if (compareDateStr(dateArr, startArr) < 0) {
+    dateArr = startArr
+  }
+  return dateArr
+}
 
-  const onDismiss = (): void => {
-    bindcancel && bindcancel()
+const initDateStr2Arr = (dateStr: TimeValue | number[], start: TimeValue, end: TimeValue): number[] => {
+  if (!dateStr) {
+    const today = new Date()
+    const todayYear = today.getFullYear()
+    const todayMonth = today.getMonth() + 1
+    const todayDay = today.getDate()
+    dateStr = [todayYear, todayMonth, todayDay]
   }
+  const [y, m, d] = getDateArr(dateStr)
+  const year = Math.min(Math.max(START_YEAR, y), END_YEAR)
+  const month = Math.min(Math.max(1, m), 12)
+  const day = Math.min(Math.max(1, d), daysInMonthLength(year, month))
+  const res = [year, month, day]
+  return calibrateDate(res, start, end)
+}
 
-  const onElementLayout = (layout: LayoutType) => {
-    viewRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
-      layoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
-      props.getInnerLayout && props.getInnerLayout(layoutRef)
-    })
+const valueStr2Obj = (
+  _value: TimeValue | number[] = '', // eg: 2025-2-12
+  limit: number,
+  start: TimeValue,
+  end: TimeValue
+): FormatObj => {
+  const [y, m, d] = initDateStr2Arr(_value, start, end)
+  const ans = {
+    indexArr: [y - START_YEAR],
+    rangeArr: [years]
+  }
+  if (limit === 2) {
+    ans.indexArr.push(m - 1)
+    ans.rangeArr.push(months)
+  } else if (limit === 3) {
+    const days = daysInMonth(y, m)
+    ans.indexArr.push(m - 1, d - 1)
+    ans.rangeArr.push(months, days)
   }
+  return ans
+}
+
+const valueChanged2Obj = (currentObj: FormatObj, value: number[], limit = 3) => {
+  const currentValue = currentObj.indexArr
+  const rangeArr = currentObj.rangeArr
 
-  const dateProps = {
-    ref: nodeRef,
-    precision: fields,
-    value: formatTimeStr(datevalue),
-    minDate: formatTimeStr(start),
-    maxDate: formatTimeStr(end),
-    onChange,
-    onDismiss,
-    disabled
+  if (limit === 3 && (currentValue[0] !== value[0] || currentValue[1] !== value[1])) {
+    const days = daysInMonth(value[0], value[1] + 1)
+    rangeArr[2] = days
+    const maxIndex = days.length - 1
+    if (value[2] > maxIndex) {
+      value[2] = maxIndex
+    }
   }
-  const touchProps = {
-    onLayout: onElementLayout,
-    ref: viewRef
+
+  return {
+    indexArr: value,
+    rangeArr
   }
+}
+
+const valueChanged2Obj2 = (value: number[], limit = 3, start: TimeValue, end: TimeValue) => {
+  const y = value[0] + START_YEAR
+  const m = value[1] + 1
+  const d = value[2] + 1
+  return valueStr2Obj([y, m, d], limit, start, end)
+}
+
+const valueNum2String = (value: number[]) => {
+  return value.map((item, index) => {
+    if (index === 0) {
+      return item + START_YEAR
+    } else {
+      return wrapDate()(item + 1)
+    }
+  }).join('-')
+}
+
+const hasDiff = (currentValue: number[], value: number[], limit = 3) => {
+  for (let i = 0; i < limit; i++) {
+    if (currentValue[i] !== value[i]) {
+      return true
+    }
+  }
+  return false
+}
+
+const PickerDate = forwardRef<
+  HandlerRef<View, DateProps>,
+  DateProps
+>((props: DateProps, ref): React.JSX.Element => {
+  const { value = '', start = START_DATE, end = END_DATE, fields, bindchange } = props
+  const nodeRef = useRef(null)
+  const columnLength = useMemo(() => getColumnLength(fields), [fields])
+  const [formatObj, setFormatObj] = useState<FormatObj>(valueStr2Obj(value, columnLength, start, end))
+  const timerRef = useRef<NodeJS.Timeout | null>(null)
+
+  useEffect(() => {
+    return () => {
+      timerRef.current && clearTimeout(timerRef.current)
+    }
+  }, [])
+
+  useUpdateEffect(() => {
+    const calibratedValue = valueStr2Obj(value, columnLength, start, end)
+    setFormatObj(calibratedValue)
+  }, [value, columnLength, start, end])
+
+  const updateValue = useCallback((value: TimeValue = '') => {
+    const calibratedValue = valueStr2Obj(value, columnLength, start, end)
+    setFormatObj(calibratedValue)
+  }, [columnLength, start, end])
+
+  const _props = useRef(props)
+  _props.current = props
+  useImperativeHandle(ref, () => ({
+    updateValue,
+    getNodeInstance: () => ({
+      props: _props,
+      nodeRef,
+      instance: {
+        style: {}
+      }
+    })
+  }))
+
+  const onChange = useCallback((e: { detail: { value: number[] } }) => {
+    const { value } = e.detail
+    const currentValue = formatObj.indexArr
+    const newObj = valueChanged2Obj(formatObj, value, columnLength)
+    if (hasDiff(currentValue, value, columnLength)) {
+      setFormatObj(newObj)
+      const newObj2 = valueChanged2Obj2(value, columnLength, start, end)
+      if (hasDiff(newObj.indexArr, newObj2.indexArr, columnLength)) {
+        timerRef.current && clearTimeout(timerRef.current)
+        timerRef.current = setTimeout(() => setFormatObj(newObj2))
+      }
+    }
+    bindchange?.({ detail: { value: valueNum2String(newObj.indexArr) } })
+  }, [formatObj, columnLength, bindchange, start, end])
+
+  const renderColumn = () => {
+    return formatObj.rangeArr?.map((item, index) => (
+      // @ts-expect-error ignore
+      <MpxPickerViewColumn key={index}>
+        {item.map((item, index) => {
+          return <Text key={index} style={styles.pickerItem}>
+            {item}
+          </Text>
+        })}
+      </MpxPickerViewColumn>
+    ))
+  }
+
   return (
-    <DatePicker {...dateProps}>
-      <TouchableWithoutFeedback>
-        <View {...touchProps}>{children}</View>
-      </TouchableWithoutFeedback>
-    </DatePicker>
-  )
+    <MpxPickerView
+      style={styles.pickerContainer}
+      indicator-style={styles.pickerIndicator}
+      value={formatObj.indexArr}
+      bindchange={onChange}
+    >
+      {renderColumn()}
+    </MpxPickerView>)
 })
 
-_DatePicker.displayName = 'mpx-picker-date'
-export default _DatePicker
+PickerDate.displayName = 'MpxPickerDate'
+export default PickerDate

package/lib/runtime/components/react/mpx-picker/dateData.ts

@@ -0,0 +1,22 @@
+export const wrapDate = (union = '') => (num: number) => String(num).padStart(2, '0') + union
+
+export const START_YEAR = 1900
+export const END_YEAR = 2099
+
+export const years = Array.from({ length: 200 }, (_, index) => index + START_YEAR + '年')
+
+export const months = Array.from({ length: 12 }, (_, index) => index + 1).map(wrapDate('月'))
+
+export const daysInMonthLength = (year: number, month: number) => {
+  return month === 2
+    ? year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0)
+      ? 29
+      : 28
+    : [4, 6, 9, 11].includes(month)
+        ? 30
+        : 31
+}
+
+export const daysInMonth = (year: number, month: number) => {
+  return Array.from({ length: daysInMonthLength(year, month) }, (_, index) => index + 1).map(wrapDate('日'))
+}