@mpxjs/webpack-plugin 2.9.59 → 2.9.64

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

@@ -0,0 +1,91 @@
+/**
+ * 普通选择器，range可以是Array<Obj> 也可以是Array
+ */
+import { View, TouchableWithoutFeedback } from 'react-native'
+import React, { forwardRef, useState, useRef, useEffect } from 'react'
+import { Picker, PickerColumn, PickerValue } from '@ant-design/react-native'
+import { SelectorProps, Obj, LayoutType } from './type'
+import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
+
+type RangeItemType = Obj | number | string
+
+const formatRangeFun = (range: Array<RangeItemType>, rangeKey = ''): any => {
+  let newRange: Object[] = []
+  newRange = (range || []).map((item: RangeItemType, index) => {
+    if (typeof item === 'object') {
+      return { value: index, label: item[rangeKey as string] }
+    } else {
+      return { value: index, label: item }
+    }
+  })
+  return newRange as PickerColumn
+}
+
+const _SelectorPicker = forwardRef<HandlerRef<View, SelectorProps>, SelectorProps>((props: SelectorProps, ref): React.JSX.Element => {
+  const { range, children, value, disabled, bindchange, bindcancel } = props
+  // 格式化数据为Array<*>
+  const formatRange: PickerColumn = formatRangeFun(range, props['range-key'])
+  // 选中的索引值
+  const [selected, setSelected] = useState<PickerValue>(value || 0)
+  // range数据源
+  const [data, setData] = useState(formatRange || [])
+  // 存储layout布局信息
+  const layoutRef = useRef({})
+  const { nodeRef: viewRef } = useNodesRef<View, SelectorProps>(props, ref, {
+  })
+
+  useEffect(() => {
+    if (range) {
+      const newFormatRange = formatRangeFun(range, props['range-key'])
+      setData(newFormatRange)
+    }
+    setSelected(() => {
+      return value
+    })
+  }, [range, value])
+  const defaultValue = [value]
+
+  const onChange = (value: PickerValue[]) => {
+    bindchange && bindchange({
+      detail: {
+        value: value && value[0]
+      }
+    })
+  }
+
+  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 antPickerProps = {
+    data,
+    value: [selected],
+    cols: 1,
+    defaultValue,
+    itemHeight: 40,
+    onChange,
+    onDismiss: bindcancel && bindcancel
+  } as any
+
+  const touchProps = {
+    onLayout: onElementLayout,
+    ref: viewRef
+  }
+  return (
+    <Picker
+      {...antPickerProps}>
+        <TouchableWithoutFeedback>
+          <View {...touchProps}>
+            {children}
+          </View>
+        </TouchableWithoutFeedback>
+    </Picker>
+  )
+})
+
+_SelectorPicker.displayName = 'mpx-picker-selector'
+
+export default _SelectorPicker

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

@@ -0,0 +1,270 @@
+import { View, Text, Modal, TouchableWithoutFeedback } from 'react-native'
+import { PickerView } from '@ant-design/react-native'
+import React, { forwardRef, useState, useRef, useEffect } from 'react'
+import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
+import { TimeProps } from './type'
+
+// 可见应用窗口的大小。
+// const { height: dHeight, width: dWidth } = Dimensions.get('window');
+//  modal属性: {"height": 298.33331298828125, "offsetLeft": 0, "offsetTop": 513.6666870117188, "width": 375, "x": 0, "y": 513.6666870117188}
+// const { height: sHeight, width: sWidth } = Dimensions.get('screen');
+// 设备屏幕的大小。 screen
+const styles: { [key: string]: Object } = {
+  showModal: {
+    backgroundColor: 'black',
+    opacity: 0.5,
+    position: 'absolute',
+    width: '100%'
+  },
+  hideModal: {
+    opacity: 1,
+    height: 0
+  },
+  modal: {
+    backgroundColor: 'black',
+    opacity: 0.5
+  },
+  centeredView: {
+    position: 'absolute',
+    bottom: 0,
+    width: '100%',
+    overflow: 'scroll'
+  },
+  btnLine: {
+    width: '100%',
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    borderColor: 20,
+    borderBottomWidth: 1,
+    backgroundColor: 'white',
+    paddingLeft: 40,
+    paddingRight: 40
+  },
+  cancel: {
+    height: 50,
+    display: 'flex',
+    justifyContent: 'center'
+  },
+  ok: {
+    height: 50,
+    display: 'flex',
+    justifyContent: 'center'
+  },
+  btntext: {
+    color: '#0ae',
+    fontSize: 18
+  }
+}
+
+function formatStrToInt (timestr: string) {
+  const [start, end] = timestr.split(':')
+  return [parseInt(start), parseInt(end)]
+}
+// [9, 59] to 09:59
+function formatStr (arr: any[]) {
+  let [hour, minute] = arr
+  if (hour < 10) {
+    hour = '0' + hour
+  }
+  if (minute < 10) {
+    minute = '0' + minute
+  }
+  return hour + ':' + minute
+}
+
+function generateMinute () {
+  const arrMinute: any[] = []
+  for (let i = 0; i <= 59; i++) {
+    const obj = {
+      label: toSingleStr(i),
+      value: i,
+      children: []
+    }
+    arrMinute.push(obj)
+  }
+  return arrMinute
+}
+function generateColumns (): any[] {
+  const pickData: any[] = []
+  for (let i = 0; i <= 23; i++) {
+    const obj = {
+      label: toSingleStr(i),
+      value: i,
+      children: generateMinute()
+    }
+    pickData.push(obj)
+  }
+
+  return pickData
+}
+
+function toSingleStr (str: number) {
+  return str < 10 ? '0' + str : str
+}
+
+function toStr (time: string): string {
+  const [hour, minute]: any = formatStrToInt(time)
+  const newHour = toSingleStr(hour)
+  const newMinute = toSingleStr(minute)
+  return '' + newHour + newMinute
+}
+
+function checkSelectedIsValid (strStart: string, strEnd: string, selected: number[]): boolean {
+  const strSel = '' + toSingleStr(selected[0]) + toSingleStr(selected[1])
+  if (strSel < strStart || strSel > strEnd) return false
+  return true
+}
+/**
+ * [{label:'', value: '', key: '', children: []}]
+  label: string | ReactNode
+  value: string | number
+  key?: string | number
+  children?: PickerColumnItem[]
+*/
+// start="02:10" end = 23:01
+
+const _TimePicker = forwardRef<HandlerRef<View, TimeProps>, TimeProps>((props: TimeProps, ref): React.JSX.Element => {
+  const { children, start, end, value, bindchange, bindcancel, disabled } = props
+  const defaultProps = {
+    start: '00:10',
+    end: '23:59'
+  }
+  const defaultValue = formatStrToInt(value)
+  const [timevalue, setTimeValue] = useState(defaultValue)
+  // 存储layout布局信息
+  const layoutRef = useRef({})
+  const { nodeRef: viewRef } = useNodesRef<View, TimeProps>(props, ref, {})
+  // 存储modal的布局信息
+  const modalLayoutRef = useRef({})
+  const { nodeRef: modalRef } = useNodesRef<View, TimeProps>(props, ref, {})
+  const [visible, setVisible] = useState(false)
+  const columnData = generateColumns()
+  const [data, setData] = useState(columnData)
+  const [offsetTop, setOffsetTop] = useState(0)
+  const strStart = toStr(start)
+  const strEnd = toStr(end)
+
+  useEffect(() => {
+    const newColumnData = generateColumns()
+    setData(newColumnData)
+  }, [start, end])
+
+  useEffect(() => {
+    if (value) {
+      const nValue = formatStrToInt(value)
+      nValue && setTimeValue(nValue)
+    }
+  }, [value])
+
+  // console.log('---------------visible---', visible, JSON.stringify(columnData))
+  const handleModalStatus = (status: boolean) => {
+    setVisible(status)
+  }
+  const handleConfirm = () => {
+    handleModalStatus(false)
+    bindchange && bindchange({
+      detail: {
+        value: formatStr(timevalue)
+      }
+    })
+  }
+
+  const handleCancel = () => {
+    handleModalStatus(false)
+    bindcancel && bindcancel()
+  }
+
+  const handleChildClick = () => {
+    handleModalStatus(true)
+  }
+
+  const handlePickChange = (date: number[]): void => {
+    // 不是有效的值
+    if (!checkSelectedIsValid(strStart, strEnd, date)) {
+      setTimeValue(timevalue)
+    } else {
+      // [9, 13]
+      setTimeValue(date)
+      const strDate = formatStr(date)
+      bindchange && bindchange({
+        detail: {
+          value: strDate
+        }
+      })
+    }
+  }
+
+  const onElementLayout = () => {
+    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 onModalLayout = () => {
+    modalRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
+      modalLayoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
+      setOffsetTop(offsetTop)
+    })
+  }
+
+  const renderModalChildren = () => {
+    const pickerProps = {
+      data,
+      value: timevalue,
+      defaultValue: timevalue,
+      cols: 2,
+      onChange: handlePickChange
+    }
+    return (
+      <View style={styles.centeredView} ref={modalRef} onLayout={onModalLayout}>
+        <View style={styles.btnLine}>
+          <View style={styles.cancel}>
+            <TouchableWithoutFeedback onPress={handleCancel}>
+              <Text style={styles.btntext}>取消</Text>
+            </TouchableWithoutFeedback>
+          </View>
+          <View style={styles.ok}>
+            <TouchableWithoutFeedback onPress={handleConfirm}>
+              <Text style={styles.btntext}>确定</Text>
+            </TouchableWithoutFeedback>
+          </View>
+        </View>
+        <PickerView {...pickerProps}></PickerView>
+      </View>
+    )
+  }
+
+  const renderChildren = () => {
+    const touchProps = {
+      onLayout: onElementLayout,
+      ref: viewRef
+    }
+    return <View>
+      <TouchableWithoutFeedback onPress={handleChildClick}>
+        <View {...touchProps}>{children}</View>
+      </TouchableWithoutFeedback>
+    </View>
+  }
+  const strStyle = visible ? styles.showModal : styles.hideModal
+  const mheight = Math.floor(offsetTop)
+
+  // Animated.View
+  return (<>
+    <View style={{ ...strStyle, height: visible ? mheight : 0, bottom: 0 }}>
+      <Modal
+        animationType="slide"
+        transparent={true}
+        visible={visible}
+      >
+        {renderModalChildren()}
+      </Modal>
+    </View>
+    {renderChildren()}
+  </>)
+})
+
+_TimePicker.displayName = 'mpx-picker-time'
+
+export default _TimePicker

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

@@ -0,0 +1,107 @@
+import { ReactNode } from 'react'
+import { PickerValue } from '@ant-design/react-native'
+
+export type Obj = Record<string, any>
+export type SelectorProps = {
+  mode: string,
+  // 表示选择了 range 中的第几个（下标从 0 开始）
+  value: PickerValue
+  disabled?: boolean,
+  children: ReactNode,
+  bindcancel?: Function,
+  bindchange: Function,
+  // mode 为 selector 或 multiSelector 时，range 有效
+  range: Array<number|string|Obj>,
+  // 当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器《显示内容》 对象中的属性
+  'range-key': string,
+  getInnerLayout: Function
+  // bindcolumnchange?: Function
+}
+
+export type MultiSelectorProps = {
+  mode: string,
+  // 表示选择了 range 中的第几个（下标从 0 开始）
+  value: Array<number>,
+  disabled?: boolean,
+  children: ReactNode,
+  bindcancel?: Function,
+  bindchange: Function,
+  bindcolumnchange?: Function,
+  // mode 为 selector 或 multiSelector 时，range 有效
+  range: Array<Array<any>>,
+  // 当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器《显示内容》 对象中的属性
+  'range-key': string,
+  getInnerLayout: Function
+}
+
+export type TimeProps = {
+  mode: string,
+  // 表示选择了 range 中的第几个（下标从 0 开始）
+  value: string,
+  disabled?: boolean,
+  children: ReactNode,
+  bindcancel?: Function,
+  bindchange: Function,
+  start: string,
+  end: string,
+  getInnerLayout: Function
+}
+
+export type DateProps = {
+  mode: string,
+  // 表示选择了 range 中的第几个（下标从 0 开始）
+  value: string,
+  fields?: 'day' | 'month' | 'year',
+  disabled?: boolean,
+  children: ReactNode,
+  bindcancel?: Function,
+  bindchange: Function,
+  start: string,
+  end: string,
+  getInnerLayout: Function
+}
+
+export type RegionProps = {
+  mode: string,
+  // 表示选择了 range 中的第几个（下标从 0 开始）
+  value: Array<string>,
+  level: 'province' | 'city' | 'region' | 'sub-district'
+  'custom-item'?: string,
+  disabled?: boolean,
+  children: ReactNode,
+  bindcancel?: Function,
+  bindchange: Function,
+  getInnerLayout: Function
+}
+
+export type RegionObj = {
+  value: string,
+  code: string
+  postcode?: string
+  children?: RegionObj[]
+}
+
+export type PickerData = {
+  value: string,
+  label: string,
+  children?: Array<Object>
+}
+
+export type EventType = {
+  detail: {
+    value: PickerValue[]
+  }
+}
+
+export type LayoutType = {
+  nativeEvent: {
+    layout: Obj
+  }
+}
+
+type FormType = {
+  name: string
+}
+
+export type PickerProps = SelectorProps & MultiSelectorProps & TimeProps & DateProps & RegionProps & FormType
+export type ValueType = string | number | Array<number> | Array<string>

package/lib/runtime/components/react/mpx-picker-view-column.tsx

@@ -0,0 +1,156 @@
+
+import { View, Animated, SafeAreaView, NativeScrollEvent, NativeSyntheticEvent, LayoutChangeEvent, ScrollView } from 'react-native'
+import React, { forwardRef, useState, useEffect, ReactElement, ReactNode } from 'react'
+import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout } from './utils'
+import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
+interface ColumnProps {
+  children: React.ReactNode,
+  selectedIndex: number,
+  onColumnLayoutChange: Function,
+  getInnerLayout: Function,
+  onSelectChange: Function,
+  style: {
+    [key: string]: any
+  },
+  'enable-var': boolean
+  'external-var-context'?: Record<string, any>
+  wrapperStyle: {
+    height?: number,
+    itemHeight: string
+  },
+  prefix: number
+}
+const defaultItemHeight = 36
+// 每个Column 都有个外层的高度, 内部的元素高度
+// 默认的高度
+const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>, ColumnProps>((props: ColumnProps, ref) => {
+  const { children, selectedIndex, onColumnLayoutChange, onSelectChange, getInnerLayout, style, wrapperStyle, 'enable-var': enableVar, 'external-var-context': externalVarContext } = props
+  // PickerViewColumn
+  const {
+    normalStyle,
+    hasVarDec,
+    varContextRef,
+    hasSelfPercent,
+    setWidth,
+    setHeight
+  } = useTransformStyle(style, { enableVar, externalVarContext })
+  const { textStyle } = splitStyle(normalStyle)
+  const { textProps } = splitProps(props)
+  // const { innerStyle } = splitStyle(normalStyle)
+  // scrollView的ref
+  const { nodeRef: scrollViewRef } = useNodesRef(props, ref, {})
+  // 每个元素的高度
+  let [itemH, setItemH] = useState(0)
+
+  useEffect(() => {
+    if (selectedIndex && itemH) {
+      const offsetY = selectedIndex * itemH
+      scrollViewRef.current?.scrollTo({ x: 0, y: offsetY, animated: true })
+    }
+  }, [selectedIndex, itemH])
+
+  const onScrollViewLayout = () => {
+    getInnerLayout && getInnerLayout(layoutRef)
+  }
+
+  const {
+    // 存储layout布局信息
+    layoutRef,
+    layoutProps
+  } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout: onScrollViewLayout })
+
+  const onItemLayout = (e: LayoutChangeEvent) => {
+    const layout = e.nativeEvent.layout
+    if (layout.height && itemH !== layout.height) {
+      itemH = layout.height
+      setItemH(layout.height)
+      onColumnLayoutChange && onColumnLayoutChange({ height: layout.height * 5 })
+    }
+  }
+
+  const onMomentumScrollEnd = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+    if (scrollViewRef && itemH) {
+      const { y: scrollY } = e.nativeEvent.contentOffset
+      const selIndex = Math.floor(scrollY / itemH)
+      onSelectChange(selIndex)
+    }
+  }
+
+  const renderInnerchild = () => {
+    // Fragment 节点
+    let realElement: Array<ReactNode> = []
+    const getRealChilds = () => {
+      if (Array.isArray(children)) {
+        realElement = children
+      } else {
+        const tempChild = children as ReactElement
+        if (tempChild.props.children && tempChild.props.children) {
+          realElement = tempChild.props.children
+        } else {
+          realElement = [children]
+        }
+      }
+      return realElement
+    }
+
+    const realChilds = getRealChilds()
+    const arrChild = realChilds.map((item: React.ReactNode, index: number) => {
+      const InnerProps = index === 0 ? { onLayout: onItemLayout } : {}
+      const strKey = 'picker' + props.prefix + '-column' + index
+      const arrHeight = (wrapperStyle.itemHeight + '').match(/\d+/g) || []
+      const iHeight = (arrHeight[0] || defaultItemHeight) as number
+      return <View key={strKey} {...InnerProps} style={[{ height: iHeight, width: '100%' }]}>
+        {wrapChildren(
+          {
+            children: item
+          },
+          {
+            hasVarDec,
+            varContext: varContextRef.current,
+            textStyle,
+            textProps
+          }
+        )}
+      </View>
+    })
+    const totalHeight = itemH * 5
+    if (wrapperStyle.height && totalHeight !== wrapperStyle.height) {
+      const fix = Math.ceil((totalHeight - wrapperStyle.height) / 2)
+      arrChild.unshift(<View key="picker-column-0" style={[{ height: itemH - fix }]}></View>)
+      arrChild.unshift(<View key="picker-column-1" style={[{ height: itemH }]}></View>)
+      arrChild.push(<View key="picker-column-2" style={[{ height: itemH }]}></View>)
+      arrChild.push(<View key="picker-column-3" style={[{ height: itemH - fix }]}></View>)
+    } else {
+      arrChild.unshift(<View key="picker-column-0" style={[{ height: itemH }]}></View>)
+      arrChild.unshift(<View key="picker-column-1" style={[{ height: itemH }]}></View>)
+      arrChild.push(<View key="picker-column-2" style={[{ height: itemH }]}></View>)
+      arrChild.push(<View key="picker-column-3" style={[{ height: itemH }]}></View>)
+    }
+    return arrChild
+  }
+
+  const renderScollView = () => {
+    return (<Animated.ScrollView
+      horizontal={false}
+      ref={scrollViewRef}
+      bounces={false}
+      scrollsToTop={false}
+      removeClippedSubviews={true}
+      showsHorizontalScrollIndicator={false}
+      showsVerticalScrollIndicator={false}
+      pagingEnabled={false}
+      snapToInterval={itemH}
+      automaticallyAdjustContentInsets={false}
+      {...layoutProps}
+      onMomentumScrollEnd={onMomentumScrollEnd}>
+        {renderInnerchild()}
+    </Animated.ScrollView>)
+  }
+
+  return (<SafeAreaView style={[{ display: 'flex', flex: 1 }]}>
+    { renderScollView() }
+  </SafeAreaView>)
+})
+
+_PickerViewColumn.displayName = 'mpx-picker-view-column'
+export default _PickerViewColumn