@mpxjs/webpack-plugin 2.9.59 → 2.9.62

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

@@ -0,0 +1,155 @@
+import { View } from 'react-native'
+import { PickerValue } from '@ant-design/react-native'
+import React, { forwardRef, useRef, useContext, useState } from 'react'
+import useInnerProps, { getCustomEvent } from '../getInnerListeners'
+import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
+import Selector from './selector'
+import TimeSelector from './time'
+import DateSelector from './date'
+import MultiSelector from './multiSelector'
+import RegionSelector from './region'
+import { PickerProps, EventType, ValueType } from './type'
+import { FormContext, FormFieldValue } from '../context'
+import { throwReactWarning } from '../utils'
+
+/**
+ * ✔ mode
+ * ✔ disabled
+ * ✔ bindcancel
+ * ✔ bindchange
+ * ✔ range
+ * ✔ range-key
+ * ✔ value
+ * ✔ start
+ * ✔ end
+ * ✔ fields 有效值 year,month,day，表示选择器的粒度
+ * ✔ end
+ * ✔ custom-item
+ * ✔ level 选择器层级 province，city，region，<sub-district不支持>
+ * ✔ level
+ * ✘ header-text
+ * ✘ bindcolumnchange
+ */
+
+const _Picker = forwardRef<HandlerRef<View, PickerProps>, PickerProps>((props: PickerProps, ref): React.JSX.Element => {
+  const { mode = 'selector', value, bindcancel, bindchange, children, bindcolumnchange } = props
+  let innerLayout = useRef({})
+  const { nodeRef } = useNodesRef<View, PickerProps>(props, ref, {
+  })
+  const innerProps = useInnerProps(props, {
+    ref: nodeRef
+  }, [], { layoutRef: innerLayout })
+
+  const [pickerValue, setPickerValue] = useState(value as ValueType)
+  const defaultValues = {
+    selector: 0,
+    multiSelector: [0],
+    time: props.start,
+    date: props.start,
+    region: undefined
+  }
+
+  const formContext = useContext(FormContext)
+
+  let formValuesMap: Map<string, FormFieldValue> | undefined
+
+  // 判断 context 是否存在，存在的话读取 context 中存的 formValuesMap
+  if (formContext) {
+    formValuesMap = formContext.formValuesMap
+  }
+
+  const resetValue = () => {
+    type curMode = keyof typeof defaultValues
+    const defalutValue = (defaultValues[mode as curMode] !== undefined ? defaultValues[mode as curMode] : value) as ValueType
+    setPickerValue(defalutValue)
+  }
+
+  const getValue = () => {
+    return pickerValue
+  }
+  if (formValuesMap) {
+    if (!props.name) {
+      throwReactWarning('[Mpx runtime warn]: If a form component is used, the name attribute is required.')
+    } else {
+      formValuesMap.set(props.name, { getValue, resetValue })
+    }
+  }
+
+  const getInnerLayout = (layout: React.MutableRefObject<{}>) => {
+    innerLayout.current = layout.current
+  }
+
+  const onChange = (event: EventType) => {
+    const eventData = getCustomEvent('change', {}, { detail: event.detail, layoutRef: innerLayout })
+    bindchange && bindchange(eventData)
+    setPickerValue(event.detail.value as ValueType)
+  }
+
+  const columnChange = (value: PickerValue[], index: number) => {
+    // type: "columnchange", detail: {column: 1, value: 2}
+    const eventData = getCustomEvent('columnchange', {}, { detail: { column: index, value }, layoutRef: innerLayout })
+    bindcolumnchange && bindcolumnchange(eventData)
+  }
+  const commonProps = {
+    ...{ innerProps },
+    mode,
+    children,
+    bindchange: onChange,
+    bindcolumnchange: columnChange,
+    bindcancel,
+    getInnerLayout
+  }
+
+  const selectorProps = {
+    ...commonProps,
+    value: pickerValue as PickerValue,
+    range: props['range'],
+    'range-key': props['range-key']
+  }
+
+  const multiProps = {
+    ...commonProps,
+    value: pickerValue as Array<number>,
+    range: props['range'],
+    'range-key': props['range-key']
+  }
+
+  const timeProps = {
+    ...commonProps,
+    value: pickerValue as string,
+    start: props['start'],
+    end: props['end']
+  }
+
+  const dateProps = {
+    ...commonProps,
+    value: pickerValue as string,
+    start: props['start'],
+    end: props['end'],
+    fileds: props.fields || 'day'
+  }
+
+  const regionProps = {
+    ...commonProps,
+    value: pickerValue as Array<string>,
+    level: props.level || 'sub-district'
+  }
+
+  if (mode === 'selector') {
+    return <Selector {...selectorProps}></Selector>
+  } else if (mode === 'multiSelector') {
+    return <MultiSelector {...multiProps}></MultiSelector>
+  } else if (mode === 'time') {
+    return <TimeSelector {...timeProps}></TimeSelector>
+  } else if (mode === 'date') {
+    return <DateSelector {...dateProps}></DateSelector>
+  } else if (mode === 'region') {
+    return <RegionSelector {...regionProps}></RegionSelector>
+  } else {
+    return <View>只支持selector, multiSelector, time, date, region 这些类型</View>
+  }
+})
+
+_Picker.displayName = 'mpx-picker';
+
+export default _Picker

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

@@ -0,0 +1,153 @@
+import { View, TouchableWithoutFeedback } from 'react-native'
+import { Picker, PickerValue } from '@ant-design/react-native'
+import React, { forwardRef, useState, useRef, useEffect } from 'react'
+import { MultiSelectorProps, LayoutType } from './type'
+import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
+
+function convertToObj(item?: any, rangeKey = ''): any {
+  if (typeof item === 'object') {
+    return { value: item[rangeKey], label: item[rangeKey] }
+  } else {
+    return { value: item, label: item }
+  }
+}
+
+// eslint-disable-next-line default-param-last
+function formatRangeFun(range: any[][] = [], rangeKey?: string): any[] {
+  const result = (range[0] || []).map(item => {
+    return convertToObj(item, rangeKey)
+  })
+  let tmp = result
+  for (let i = 1; i < range.length; i++) {
+    let child = Array.isArray(range[i]) ? range[i] : []
+    const nextColData = child.map(item => {
+      return convertToObj(item, rangeKey)
+    })
+    tmp.forEach(item => {
+      item.children = nextColData
+    })
+    tmp = nextColData
+  }
+  return result
+}
+
+function getIndexByValues(range: any[] = [], value: any[] = []): number[] {
+  let tmp = range
+  return value.map(v => {
+    for (let i = 0; i < tmp.length; i++) {
+      if (tmp[i].value === v) {
+        tmp = tmp[i].children || []
+        return i
+      }
+    }
+    return 0
+  })
+}
+// [1,1,2] 寻找出[]
+function getInnerValueByIndex(range: any[] = [], value: any[] = []): string[] {
+  let tmp = range
+  return value.map(v => {
+    let current = tmp[v].value
+    tmp = tmp[v].children
+    return current
+  })
+}
+// column = 1 value = ['无脊柱动物', '扁性动物', '吸血虫'] 根据column 和value 获取到当前列变动选择的值所在当前列的索引
+function getColumnIndexByValue(range: any[] = [], column: number, value: any[] = []): number {
+  let curRange = range
+  let changeIndex = 0
+  let tmpRange: any[] = []
+  value.map((item, index) => {
+    if (column === index) {
+      curRange.map((ritem, rindex) => {
+        if (ritem.value === item) {
+          changeIndex = rindex
+        }
+      })
+    } else {
+    curRange.map((citem, cindex) => {
+        if (citem.value === item) {
+          tmpRange = citem.children
+        }
+    })
+    curRange = tmpRange
+    }
+  })
+  return changeIndex
+}
+
+const _MultiSelectorPicker = forwardRef<HandlerRef<View, MultiSelectorProps>, MultiSelectorProps>((props: MultiSelectorProps, ref): React.JSX.Element => {
+  const { range, value, disabled, bindchange, bindcancel, children, bindcolumnchange } = props
+  let formatRange = formatRangeFun(range, props['range-key'])
+  let initValue = getInnerValueByIndex(formatRange, value)
+  // 选中的索引值
+  const [selected, setSelected] = useState(initValue)
+  // range数据源
+  const [data, setData] = useState(formatRange || [])
+  // 存储layout布局信息
+  const layoutRef = useRef({})
+  const { nodeRef: viewRef } = useNodesRef<View, MultiSelectorProps>(props, ref, {
+  })
+
+  useEffect(() => {
+    if (range) {
+      const newFormatRange = formatRangeFun(range, props['range-key'])
+      setData(newFormatRange)
+    }
+    const newValue = getInnerValueByIndex(formatRange, value)
+    value && setSelected(newValue)
+  }, [range, value])
+
+  const onChange = (value: PickerValue[]) => {
+    // e.detail.value 都是索引multi
+    const strIndex = getIndexByValues(data, value)
+    bindchange && bindchange({
+      detail: {
+        value: strIndex
+      }
+    })
+  }
+
+  const onPickerChange = (value: PickerValue[], column: number) => {
+    // onPickerChange--- ["无脊柱动物", "节肢动物", "吸血虫"] 1  拿着column
+    const changeIndex = getColumnIndexByValue(data, column, value)
+    bindcolumnchange && bindcolumnchange(changeIndex, column)
+  }
+
+  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 antPickerProps = {
+    data,
+    value: selected,
+    cols: range.length,
+    defaultValue: initValue,
+    disabled,
+    itemHeight: 40,
+    onChange,
+    onDismiss: bindcancel && bindcancel,
+    onPickerChange: onPickerChange
+  } as any
+
+  const touchProps = {
+    onLayout: onElementLayout,
+    ref: viewRef
+  }
+
+  return (<Picker {...antPickerProps}>
+      <TouchableWithoutFeedback>
+        <View {...touchProps}>
+          {children}
+        </View>
+      </TouchableWithoutFeedback>
+    </Picker>
+  )
+})
+
+_MultiSelectorPicker.displayName = 'mpx-picker-multiselector'
+
+export default _MultiSelectorPicker

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

@@ -0,0 +1,104 @@
+import { View, TouchableWithoutFeedback } from 'react-native'
+import { Picker } from '@ant-design/react-native'
+import { regionData } from './regionData'
+import React, { forwardRef, useState, useRef } from 'react'
+import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
+import { RegionProps, RegionObj, PickerData, LayoutType } from './type'
+
+function formateRegionData(clObj: RegionObj[] = [], customItem?: string, depth = 2): PickerData[] {
+  const l = depth
+  const obj: PickerData[] = []
+  if (customItem) {
+    const objClone: PickerData = {
+      value: customItem,
+      label: customItem,
+      children: []
+    }
+    const panding = { ...objClone }
+    let loop = panding
+    while (depth-- > 0) {
+      loop.children = [{ ...objClone }]
+      loop = loop.children[0] as PickerData
+    }
+    obj.push(panding)
+  }
+  for (let i = 0; i < clObj.length; i++) {
+    const region: PickerData = {
+      value: clObj[i].value,
+      label: clObj[i].value,
+    }
+    if (clObj[i].children) {
+      region.children = formateRegionData(clObj[i].children, customItem, l - 1)
+    }
+    obj.push(region)
+  }
+  return obj
+}
+
+
+
+const _RegionPicker = forwardRef<HandlerRef<View, RegionProps>, RegionProps>((props: RegionProps, ref): React.JSX.Element => {
+  const { children, value, bindchange, bindcancel, disabled } = props
+  let formatRegionData = formateRegionData(regionData, props['custom-item'])
+
+  const [regionvalue, setRegionValue] = useState(value)
+  // 存储layout布局信息
+  const layoutRef = useRef({})
+  const { nodeRef: viewRef } = useNodesRef<View, RegionProps>(props, ref, {
+  })
+
+  const onChange = (value: string[]): void => {
+    // 通过 value 查找 code
+    let tmp: RegionObj[] = regionData
+    const postcode: (string | undefined)[] = []
+    const code = value.map((item) => {
+      for (let i = 0; i < tmp.length; i++) {
+        if (tmp[i].value === item) {
+          const code = tmp[i].code
+          postcode.push(tmp[i].postcode)
+          tmp = tmp[i].children || []
+          return code
+        }
+      }
+    }).filter(code => !!code)
+    const detail: Record<string, any> = { value, code }
+    if (postcode[2]) detail.postcode = postcode[2]
+    setRegionValue(value)
+    bindchange && bindchange({
+      detail
+    })
+  }
+
+  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 regionProps = {
+    data: formatRegionData,
+    value: regionvalue,
+    onChange,
+    disabled,
+    onDismiss: bindcancel && bindcancel
+  }
+
+  const touchProps = {
+    onLayout: onElementLayout,
+    ref: viewRef
+  }
+
+  return (
+    // @ts-ignore
+    <Picker {...regionProps}>
+      <TouchableWithoutFeedback>
+        <View {...touchProps}>{children}</View>
+      </TouchableWithoutFeedback>
+    </Picker>
+  )
+
+})
+
+_RegionPicker.displayName === 'mpx-picker-region'
+export default _RegionPicker