ipanel-rnapp-ajb-base 1.0.13 → 1.0.15

package/app/components/common/PickerV2Base/picker-view/index.tsx

@@ -0,0 +1,69 @@
+import useMergedState from 'rc-util/lib/hooks/useMergedState'
+import React, {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+} from 'react'
+import { mergeProps } from '../_util/with-default-props'
+import { WithThemeStyles } from '../style'
+import { PickerValue, PickerViewPropsType } from './PropsType'
+import { getColumns, getValueExtend } from './columns-extend'
+import RMCPickerView from './picker-view'
+import { PickerViewStyle } from './style'
+
+export interface PickerViewProps
+  extends PickerViewPropsType,
+    WithThemeStyles<PickerViewStyle> {}
+
+const defaultProps = {
+  cols: 3,
+  cascade: true,
+}
+
+const PickerView = forwardRef<any, PickerViewProps>((props, ref) => {
+  const p = mergeProps(defaultProps, props)
+
+  const [innerValue, setInnerValue] = useMergedState<PickerValue[]>([], {
+    value: p.value,
+    defaultValue: p.defaultValue,
+  })
+
+  useImperativeHandle(ref, () => ({
+    value: innerValue,
+  }))
+
+  const columns = useMemo(
+    () => getColumns(p.data, innerValue, p.cols, p.cascade),
+    [p.data, innerValue, p.cols, p.cascade],
+  )
+
+  const handleSelect = useCallback(
+    (val: PickerValue, index: number) => {
+      const value = innerValue?.slice?.(0) || []
+      value[index] = val
+      const { nextValue, extend } = getValueExtend(
+        p.data,
+        value,
+        p.cols,
+        p.cascade,
+      )
+      setInnerValue(nextValue)
+      p.onChange?.(nextValue, { items: extend, columns })
+    },
+    [p, columns, innerValue, setInnerValue],
+  )
+
+  return (
+    <RMCPickerView
+      {...p}
+      value={innerValue}
+      columns={columns}
+      handleSelect={handleSelect}
+    />
+  )
+})
+
+PickerView.displayName = 'AntmPickerView'
+
+export default PickerView

package/app/components/common/PickerV2Base/picker-view/index.zh-CN.md

@@ -0,0 +1,72 @@
+---
+category: Components
+type: Data Entry
+title: PickerView
+subtitle: 选择器
+---
+
+PickerView 的功能类似于 Picker ，但它是直接渲染在区域中，而不是弹出窗口。
+
+## API
+
+### 属性
+
+属性 | 说明 | 类型 | 默认值
+----|-----|------|------
+| data  | 数据源     | `PickerColumn` / `PickerColumn[]` | -   |
+| value  | 选中项  | `PickerValue[]`  | -   |
+| defaultValue  | 默认选中项  | `PickerValue[]`  | -   |
+| cascade  | 是否级联。<br/>子级来自`data`参数内的`children`属性   | Boolean | `true` |
+| cols     | 列数    | Number | `3` |
+| onChange | 选中后的回调，可使用[rc-form](https://github.com/react-component/form) | `(value: PickerValue[], extend: PickerValueExtend) => void`      | -   |
+| renderLabel | 	自定义渲染每列展示的内容  |   `(item: PickerColumnItem, index: number) => ReactNode`   | `(item) => item.label`  |
+| loading  | 是否处于加载状态  | Boolean | -  |
+| loadingContent  | 加载状态下展示的内容  | ReactNode | `<ActivityIndicator/>`  |
+| indicatorStyle  | 默认Indicator的样式  | Object | -  |
+
+关于 `PickerColumnItem` `PickerColumn` `PickerValue` `PickerValueExtend` 的类型定义，请参考 [Picker](/components/picker-cn/) 的文档。
+
+### 自定义样式
+
+属性 | 说明 | 类型 | 默认值
+----|-----|------|------
+| style    | 外部样式   | `StyleProp<ViewStyle>` | -   |
+| styles   | 语义化结构 style   | [PickerViewStyle](#pickerviewstyle-语义化样式) | -   |
+| itemStyle| 每列样式   | `StyleProp<TextStyle>` | -   |
+| itemHeight | 每列固定高度，未设值时会根据`numberOfLines`动态计算；`itemStyle`属性设置`{height}`值是无效的  |   Number   | -  |
+| numberOfLines | 允许每列显示行数  |   Number   | `1`  |
+
+#### PickerViewStyle 语义化样式
+
+```jsx
+interface PickerViewStyle {
+  wrappper: ViewStyle
+  wheelWrapper: ViewStyle
+  mask: ViewStyle
+  maskTop: ViewStyle
+  maskMiddle: ViewStyle
+  maskBottom: ViewStyle
+}
+```
+
+#### 遮罩层
+
+还支持自定义遮罩样式，如使用渐变组件`<LinearGradient />`。当前默认为白色半透明。
+
+属性 | 说明 | 类型 | 默认值
+----|-----|------|------
+| renderMaskTop | 自定义渲染上半部分遮罩层 | `()=> ReactNode` | `<View style={{ flex: 1, backgroundColor: 'rgba(255,255,255,0.8)' }} />` |
+| renderMaskBottom | 自定义渲染下半部分遮罩层 | `()=> ReactNode` | `<View style={{ flex: 1, backgroundColor: 'rgba(255,255,255,0.8)' }} />` |
+
+## FAQ
+
+### 在Android平台，ScrollView中嵌套使用PickerView，会发生Picker Item不能滑动的情况，怎么办？
+
+`5.1.3`新增支持。 设置`ScrollView`的`nestedScrollEnabled`属性为`true`即可。
+
+```jsx
+<ScrollView nestedScrollEnabled={true}>
+  ...
+  <PickerView />
+</ScrollView>
+```

package/app/components/common/PickerV2Base/picker-view/picker-view.tsx

@@ -0,0 +1,166 @@
+import React from 'react'
+import { ActivityIndicator, LayoutChangeEvent, Text, View } from 'react-native'
+import { WithTheme, WithThemeStyles } from '../style'
+import {
+  PickerColumn,
+  PickerColumnItem,
+  PickerValue,
+  PickerViewPropsType,
+} from './PropsType'
+import Wheel from './Wheel'
+import pickerViewStyles, { PickerViewStyle } from './style/index'
+
+export type RMCPickerViewProps = Omit<
+  PickerViewPropsType,
+  'data' | 'cols' | 'cascade' | 'onChange'
+> &
+  WithThemeStyles<PickerViewStyle> & {
+    columns: PickerColumn[]
+    handleSelect: (value: PickerValue, index: number) => void
+  }
+export default class RMCPickerView extends React.Component<
+  RMCPickerViewProps,
+  any
+> {
+  static defaultProps = {
+    value: [],
+    itemHeight: 0,
+    numberOfLines: 1,
+    renderMaskTop: () => (
+      <View style={{ flex: 1, backgroundColor: 'rgba(255,255,255,0.8)' }} />
+    ),
+    renderMaskBottom: () => (
+      <View style={{ flex: 1, backgroundColor: 'rgba(255,255,255,0.8)' }} />
+    ),
+  }
+
+  constructor(props: RMCPickerViewProps) {
+    super(props)
+    this.state = {
+      itemHeight: 0,
+      wheelHeight: 0,
+    }
+  }
+
+  wrapperMeasure = (e: LayoutChangeEvent) => {
+    const { height } = e.nativeEvent.layout
+    this.setState({ wheelHeight: height })
+  }
+
+  itemHeightMeasure = (e: LayoutChangeEvent) => {
+    const { height } = e.nativeEvent.layout
+    this.setState({ itemHeight: height })
+  }
+
+  renderLabel = (item: PickerColumnItem, index: number) => {
+    return (
+      <View
+        key={item.key || item.value}
+        style={[
+          {
+            height: this.props.itemHeight || this.state.itemHeight || 'auto',
+            overflow: 'hidden',
+            justifyContent: 'center',
+          },
+        ]}>
+        {this.props.renderLabel?.(item, index) || (
+          <Text
+            style={[
+              {
+                fontSize: 16,
+                color: '#333',
+                textAlign: 'center',
+                includeFontPadding: false,
+                padding: 8,
+              },
+              this.props.itemStyle,
+              // itemStyle was not allowed to set height
+              { height: 'auto' },
+            ]}
+            numberOfLines={this.props.numberOfLines}>
+            {item.label}
+          </Text>
+        )}
+      </View>
+    )
+  }
+
+  renderMask = (s: PickerViewStyle) => (
+    <View style={s.mask} pointerEvents="none">
+      <View style={s.maskTop}>{this.props.renderMaskTop?.()}</View>
+      <View
+        style={[
+          s.maskMiddle,
+          { height: this.props.itemHeight || this.state.itemHeight },
+        ]}
+      />
+      <View style={s.maskBottom}>{this.props.renderMaskBottom?.()}</View>
+    </View>
+  )
+
+  render() {
+    const { wheelHeight } = this.state
+    const {
+      style,
+      styles,
+      columns,
+      value,
+      loading,
+      indicatorStyle,
+      numberOfLines,
+      handleSelect,
+      loadingContent,
+    } = this.props
+    const itemHeight = this.props.itemHeight || this.state.itemHeight
+    return (
+      <WithTheme themeStyles={pickerViewStyles} styles={styles}>
+        {(s) =>
+          // {/* 计算中文占位符换行的高度后，items统一这个高度 */}
+          itemHeight === 0 ? (
+            <View onLayout={this.itemHeightMeasure}>
+              {this.renderLabel(
+                {
+                  value: 'layout',
+                  label: <>{Array(numberOfLines).join('\n')}&#12288;</>,
+                },
+                0,
+              )}
+            </View>
+          ) : (
+            <View
+              style={[{ height: 7 * itemHeight }, s.wrappper, style]}
+              onLayout={this.wrapperMeasure}>
+              <View style={[s.wheelWrapper, { height: wheelHeight }]}>
+                {(loading || columns?.length === 0) && loading !== false
+                  ? loadingContent || (
+                      <View style={{ flex: 1, alignSelf: 'center' }}>
+                        <ActivityIndicator
+                          animating
+                          style={indicatorStyle || {}}
+                        />
+                      </View>
+                    )
+                  : itemHeight > 0 &&
+                    wheelHeight > 0 &&
+                    columns.map((column, index) => (
+                      <Wheel
+                        key={index}
+                        index={index}
+                        column={column}
+                        value={value?.[index]}
+                        onSelect={handleSelect}
+                        itemHeight={itemHeight}
+                        wheelHeight={wheelHeight}
+                        renderLabel={this.renderLabel}
+                      />
+                    ))}
+              </View>
+              {/* mask */}
+              {this.renderMask(s)}
+            </View>
+          )
+        }
+      </WithTheme>
+    )
+  }
+}

package/app/components/common/PickerV2Base/picker-view/style/index.tsx

@@ -0,0 +1,51 @@
+import { StyleSheet, ViewStyle } from 'react-native'
+
+export interface PickerViewStyle {
+  wrappper: ViewStyle
+  wheelWrapper: ViewStyle
+  mask: ViewStyle
+  maskTop: ViewStyle
+  maskMiddle: ViewStyle
+  maskBottom: ViewStyle
+}
+
+export default () =>
+  StyleSheet.create<PickerViewStyle>({
+    wrappper: {
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      overflow: 'hidden',
+      backgroundColor: '#fff',
+    },
+    wheelWrapper: {
+      display: 'flex',
+      flexDirection: 'row',
+    },
+    mask: {
+      position: 'absolute',
+      zIndex: 10000,
+      left: 0,
+      top: 0,
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+    },
+
+    maskTop: {
+      flex: 1,
+      overflow: 'hidden',
+    },
+
+    maskMiddle: {
+      borderColor: '#eee',
+      borderTopWidth: 1,
+      borderBottomWidth: 1,
+    },
+
+    maskBottom: {
+      flex: 1,
+      overflow: 'hidden',
+    },
+  })

package/app/components/common/PickerV2Base/style/index.tsx

@@ -0,0 +1,96 @@
+import React from 'react'
+import shallowequal from 'shallowequal'
+import defaultTheme from './themes/default'
+
+export const ThemeContext = React.createContext(defaultTheme)
+export type Theme = typeof defaultTheme & { [key: string]: any }
+export type PartialTheme = Partial<Theme>
+export interface ThemeProviderProps {
+  value?: PartialTheme
+  children?: React.ReactNode
+}
+export const ThemeProvider = (props: ThemeProviderProps) => {
+  const { value, children } = props
+  const theme = React.useMemo(() => ({ ...defaultTheme, ...value }), [value])
+  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
+}
+export interface UseThemeContextProps {
+  theme?: PartialTheme
+}
+
+// useTheme hook
+export function useTheme<T>(props: {
+  themeStyles: (theme: Theme) => T
+  styles?: Partial<T>
+}): T {
+  const theme = React.useContext(ThemeContext)
+  const { themeStyles, styles } = props
+
+  const stylesRef = React.useRef<Partial<T>>({})
+  const cache = React.useRef<T | any>(themeStyles(theme))
+
+  return React.useMemo(() => {
+    if (styles && !shallowequal(stylesRef.current, styles)) {
+      stylesRef.current = styles
+      const themeStyle = themeStyles(theme)
+      // merge styles from user defined
+      for (let key in styles) {
+        if (cache.current[key]) {
+          cache.current[key] = [themeStyle[key], styles[key]]
+        }
+      }
+    }
+
+    return cache.current
+  }, [styles, theme, themeStyles])
+}
+
+export interface WithThemeProps<T, S> {
+  themeStyles?: (theme: Theme) => T
+  styles?: S & { [key: string]: any }
+  children: (
+    // fix: styles[`${size}RawText`]
+    styles: T & { [key: string]: any },
+    theme: Theme,
+  ) => React.ReactNode
+}
+
+/**
+ * Component can extends this props
+ */
+export type WithThemeStyles<T> = { styles?: Partial<T> }
+
+export function WithTheme<T, S>(props: WithThemeProps<T, S>) {
+  const { children, themeStyles, styles } = props
+
+  const stylesRef = React.useRef<S | undefined>(undefined)
+  const cache = React.useRef<T | any>(undefined)
+
+  const getStyles = React.useCallback(
+    (theme: Theme) => {
+      if (!cache.current) {
+        cache.current = themeStyles?.(theme) as typeof styles
+      }
+
+      if (styles && !shallowequal(stylesRef.current, styles)) {
+        stylesRef.current = styles
+        const themeStyle = themeStyles?.(theme) as typeof styles
+        // merge styles from user defined
+        for (let key in styles) {
+          if (cache.current[key]) {
+            cache.current[key] = [themeStyle[key], styles[key]]
+          }
+        }
+      }
+
+      return cache.current
+    },
+    [themeStyles, styles],
+  )
+
+  return (
+    <ThemeContext.Consumer>
+      {(theme) => children(getStyles(theme), theme)}
+    </ThemeContext.Consumer>
+  )
+}

package/app/components/common/PickerV2Base/style/themes/default.tsx

@@ -0,0 +1,203 @@
+const brandPrimary = '#108ee9'
+const brandPrimaryTap = '#1284d6'
+
+export default {
+  // 支付宝钱包默认主题
+  // https://github.com/ant-design/ant-design-mobile/wiki/设计变量表及命名规范
+
+  // 色彩, NOTE: must use `#000000` instead of `#000`
+  // https://facebook.github.io/react-native/docs/colors.html
+  // 8-digit-hex to 4-digit hex https://css-tricks.com/8-digit-hex-codes/
+  // https://www.chromestatus.com/feature/5685348285808640 chrome will support `#RGBA`
+  // 文字色
+  color_text_base: '#000000', // 基本
+  color_text_base_inverse: '#ffffff', // 基本 _ 反色
+  color_text_secondary: '#a4a9b0', // 辅助色
+  color_text_placeholder: '#bbbbbb', // 文本框提示
+  color_text_disabled: '#bbbbbb', // 失效
+  color_text_caption: '#888888', // 辅助描述
+  color_text_paragraph: '#333333', // 段落
+  color_link: brandPrimary, // 链接
+  color_error: '#ff4d4f', // 错误(form validate)
+  color_warning: '#faad14', // 警告
+  color_success: '#52c41a',
+  color_primary: '#1677ff',
+
+  // 背景色
+  fill_base: '#ffffff', // 组件默认背景
+  fill_body: '#f5f5f9', // 页面背景
+  fill_tap: '#dddddd', // 组件默认背景 _ 按下
+  fill_disabled: '#dddddd', // 通用失效背景
+  fill_mask: 'rgba(0, 0, 0, .4)', // 遮罩背景
+  color_icon_base: '#cccccc', // 许多小图标的背景，比如一些小圆点，加减号
+  fill_grey: '#f7f7f7',
+
+  // 透明度
+  opacity_disabled: '0.3', // switch checkbox radio 等组件禁用的透明度
+
+  // 全局/品牌色
+  brand_primary: brandPrimary,
+  brand_primary_tap: brandPrimaryTap,
+  brand_success: '#6abf47',
+  brand_warning: '#f4333c',
+  brand_error: '#f4333c',
+  brand_important: '#ff5b05', // 用于小红点
+  brand_wait: '#108ee9',
+
+  // 边框色
+  border_color_base: '#dddddd',
+
+  // 字体尺寸
+  // ---
+  font_size_icontext: 10,
+  font_size_caption_sm: 12,
+  font_size_base: 14,
+  font_size_subhead: 15,
+  font_size_caption: 16,
+  font_size_heading: 17,
+
+  // 圆角
+  // ---
+  radius_xs: 2,
+  radius_sm: 3,
+  radius_md: 5,
+  radius_lg: 7,
+
+  // 边框尺寸
+  // ---
+  border_width_sm: 0.5,
+  border_width_md: 1,
+  border_width_lg: 2,
+
+  // 间距
+  // ---
+  // 水平间距
+  h_spacing_sm: 5,
+  h_spacing_md: 8,
+  h_spacing_lg: 15,
+
+  // 垂直间距
+  v_spacing_xs: 3,
+  v_spacing_sm: 6,
+  v_spacing_md: 9,
+  v_spacing_lg: 15,
+  v_spacing_xl: 21,
+
+  // 高度
+  // ---
+  line_height_base: 1, // 单行行高
+  line_height_paragraph: 1.5, // 多行行高
+
+  // 图标尺寸
+  // ---
+  icon_size_xxs: 15,
+  icon_size_xs: 18,
+  icon_size_sm: 21,
+  icon_size_md: 22, // 导航条上的图标
+  icon_size_lg: 36,
+
+  // 动画缓动
+  // ---
+  ease_in_out_quint: 'cubic_bezier(0.86, 0, 0.07, 1)',
+
+  // 组件变量
+  // ---
+
+  actionsheet_item_height: 50,
+  actionsheet_item_font_size: 18,
+
+  // button
+  button_height: 47,
+  button_font_size: 18,
+
+  button_height_sm: 23,
+  button_font_size_sm: 12,
+
+  primary_button_fill: brandPrimary,
+  primary_button_fill_tap: '#0e80d2',
+
+  ghost_button_color: brandPrimary, // 同时应用于背景、文字颜色、边框色
+  ghost_button_fill_tap: `${brandPrimary}99`, // alpha 60%  https://codepen.io/chriscoyier/pen/XjbzAW
+
+  warning_button_fill: '#e94f4f',
+  warning_button_fill_tap: '#d24747',
+
+  link_button_fill_tap: '#dddddd',
+  link_button_font_size: 16,
+
+  // modal
+  modal_font_size_heading: 18,
+  modal_button_font_size: 18, // 按钮字号
+  modal_button_height: 50, // 按钮高度
+
+  // list
+  list_title_height: 30,
+  list_item_height_sm: 35,
+  list_item_height: 44,
+
+  // input
+  input_label_width: 17, // InputItem、TextareaItem 文字长度基础值
+  input_font_size: 17,
+  input_color_icon: '#cccccc',
+  input_color_icon_tap: brandPrimary,
+
+  // tabs
+  tabs_color: brandPrimary,
+  tabs_height: 42,
+  tabs_font_size_heading: 15,
+
+  // segmented_control
+  segmented_control_color: brandPrimary, // 同时应用于背景、文字颜色、边框色
+  segmented_control_height: 27,
+  segmented_control_fill_tap: `${brandPrimary}10`,
+
+  // tab_bar
+  tab_bar_fill: '#ebeeef',
+  tab_bar_height: 50,
+
+  // toast
+  toast_fill: 'rgba(0, 0, 0, .8)',
+
+  // search_bar
+  search_bar_fill: '#efeff4',
+  search_bar_height: 44,
+  search_bar_input_height: 28,
+  search_bar_font_size: 15,
+  search_color_icon: '#bbbbbb', // input search icon 的背景色
+
+  // notice_bar
+  notice_bar_fill: '#fffada',
+  notice_bar_height: 36,
+
+  // checkbox
+  checkbox_fill: '#1890ff',
+  checkbox_fill_disabled: '#f5f5f5',
+  checkbox_border: '#d9d9d9',
+  checkbox_border_disabled: '#b9b9b9',
+
+  // switch
+  switch_fill: '#1890ff',
+  switch_unchecked: '#cccccc',
+  switch_unchecked_disabled: '#cccccc66', // switch_fill的40%透明度
+  switch_checked_disabled: '#1890ff66', // switch_unchecked的40%透明度
+
+  // tag
+  tag_height: 25,
+  tag_small_height: 15,
+
+  // picker
+  option_height: 42, // picker 标题的高度
+
+  // form
+  prefix_width: 65, // 水平布局时，表单项的标签宽度
+  prefix_padding: 6, // form item 上下内边距
+  extra_max_width: '50%',
+
+  toast_zindex: 1999,
+  action_sheet_zindex: 1000,
+  popup_zindex: 999,
+  modal_zindex: 999,
+  tooltip_zindex: 999,
+  tooltip_dark: 'rgba(0, 0, 0, 0.75)',
+  arrow_size: 8,
+}

package/app/components/index.js

@@ -6,3 +6,5 @@ export ActionPicker from './common/ActionPicker';
 export ScreenBackHeader from './common/ScreenBackHeader';
 export CustomDialog from './common/CustomDialog';
 export OnceTouchable from './common/OnceTouchable';
+export PickerV2 from './common/PickerV2';
+export PickerV1 from "./common/PickerV1";

package/app/eventBus/index.js

@@ -50,5 +50,6 @@ export const EVENTS = {
     RECONNECT: 'shop.message.reconnect', // 触发websocket重连事件
     ONLINE_LIST: 'shop.message.online', // 商城在线用户
     CUSTOM_SERVICE_CONNECT_CHANGE: 'shop.message.customServiceConnectChange', // 智能客服转人工的进入和退出事件
+    HISTORY_MESSAGE_LIST: 'shop.message.history', //  获取历史消息
   },
 };

package/app/hooks/shopMessageManager.js

@@ -107,7 +107,7 @@ const ShopMessageManager = () => {
       `user_id=${accountData?.user?.user_id}`,
       'platform=web',
       'api=ipanel_test',
-      `source=${'dev.ipanelcloud2.ipanel.cn' || config.IPANEL_CLOUD_DOMAIN}`,
+      `source=${config.IPANEL_CLOUD_DOMAIN}`,
     ];
 
     // 缓存全局商城客服websocket连接
@@ -153,9 +153,11 @@ const ShopMessageManager = () => {
           msgData.route === 'message_list_new')
       ) {
         if (msgData?.data) {
-          console.log(msgData, 'message_list_new');
           const msgList = JSON.parse(msgData?.data);
-          global.base.shopMessageManager.messages = msgList || [];
+          global.base.shopMessageManager.messages =
+            msgList?.list || msgList || [];
+          let list = msgList?.list || msgList || [];
+          eventBus.emit(EVENTS.SHOPMESSAGE.HISTORY_MESSAGE_LIST, list);
         }
       }
     };