@mpxjs/webpack-plugin 2.9.59 → 2.9.62

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

@@ -0,0 +1,92 @@
+/**
+ * 普通选择器，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<*>
+  let 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,274 @@
+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) {
+  let [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() {
+  let arrMinute: any[] = []
+  for (let i = 0; i <= 59; i++) {
+    let obj = {
+      label: toSingleStr(i),
+      value: i,
+      children: []
+    }
+    arrMinute.push(obj)
+  }
+  return arrMinute
+}
+function generateColumns(): any[] {
+  let pickData: any[] = []
+  for (let i = 0; i <= 23; i++) {
+    let 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,28 @@
+
+import { View } from 'react-native'
+import React, { forwardRef, useRef } from 'react'
+import useInnerProps from './getInnerListeners'
+import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
+
+interface ColumnProps {
+  children: React.ReactNode
+}
+
+const _PickerViewColumn = forwardRef<HandlerRef<View, ColumnProps>, ColumnProps>((props: ColumnProps, ref) => {
+  const { children } = props
+  const layoutRef = useRef({})
+  const { nodeRef } = useNodesRef(props, ref, {})
+  const innerProps = useInnerProps(props, {}, [], { layoutRef })
+  return (
+    <View
+    ref={nodeRef}
+    {...innerProps}>
+    {children}
+    </View>
+  )
+})
+
+_PickerViewColumn.displayName = 'mpx-picker-view-column';
+
+export default _PickerViewColumn
+

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

@@ -0,0 +1,104 @@
+import { View } from 'react-native'
+import React, { forwardRef, useState, useRef, useEffect } from 'react'
+import { PickerView } from '@ant-design/react-native'
+import useInnerProps from './getInnerListeners'
+import { getCustomEvent } from './getInnerListeners'
+import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
+/**
+ * ✔ value
+ * ✔ bindchange
+ * ✘ bindpickstart
+ * ✘ bindpickend
+ * ✘ mask-class
+ * ✘ indicator-style
+ * ✘ indicator-class
+ * ✘ mask-style
+ * ✘ immediate-change
+ */
+
+interface PickerViewProps {
+  children: React.ReactNode
+  // 初始的defaultValue数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。
+  value?: Array<number>
+  bindchange?: Function
+}
+
+const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProps>((props: PickerViewProps, ref) => {
+  const { children, ...restProps } = props
+  const layoutRef = useRef({})
+  const { nodeRef } = useNodesRef(props, ref, {})
+  const [value, setValue] = useState(props.value)
+  useEffect(() => {
+    // 确认这个是变化的props变化的时候才执行，还是初始化的时候就执行
+    setValue(props.value)
+  }, [props.value]);
+
+  const onLayout = () => {
+    nodeRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
+      layoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
+    })
+  }
+  const innerProps = useInnerProps(props, {}, [], { layoutRef })
+
+
+  const onChange = (val: Array<number>): void => {
+    const eventData = getCustomEvent('change', {}, { detail: {value: val, source: 'touch' }, layoutRef: layoutRef })
+    setValue(val)
+    props.bindchange && props.bindchange(eventData)
+  }
+
+  const joinString = (data: string | any[] | React.ReactElement): string => {
+    return (Array.isArray(data) ? data : [data]).join('')
+  }
+
+  const getLabelFromChildren = (child: React.ReactElement): string => {
+    return child.props && child.props.children ? getLabelFromChildren(child.props.children) : joinString(child)
+  }
+
+  const handleChildren = (children: React.ReactNode[]): any[] => {
+    return children.map((child: any, index: number) => {
+      return {
+        label: getLabelFromChildren(child),
+        value: index
+      }
+    })
+  }
+
+  const getDataFromChildren = (children: React.ReactNode): any[] => {
+    return (Array.isArray(children) ? children : [children]).map((child: any) => {
+      return handleChildren(child.props && child.props.children ? child.props.children : [child])
+    })
+  }
+
+  const columns = Array.isArray(children) ? children.length : 1
+  const originData = getDataFromChildren(children)
+  // 子节点默认的序号，这里是更新默认值的
+  const subChildLength = originData.map((item) => {
+    return item.length
+  })
+  const defaultValue = (props.value || []).map((item, index) => {
+    if (item > subChildLength[index]) {
+      return subChildLength[index] - 1
+    } else {
+      return item
+    }
+  })
+
+  return (
+    <PickerView
+    {...restProps}
+    cols={columns}
+    // 默认选中项
+    defaultValue={defaultValue}
+    // 内部维护选中项
+    value={value}
+    // data数据源column
+    data={originData}
+    onChange={onChange}
+    cascade={false}/>
+  )
+})
+
+_PickerView.displayName = 'mpx-picker-view';
+
+export default _PickerView