@ray-js/ipc-player-integration 0.0.28 → 0.0.29-beta.1

package/lib/widgets/multiCamera/moveablePtzControl.js

@@ -0,0 +1,302 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { CoverView, View } from '@ray-js/ray';
+import { getDpIdByCode, publishDps } from '@ray-js/ray-ipc-utils';
+import _find from 'lodash/find';
+import _get from 'lodash/get';
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import IpcPtzZoom from '@ray-js/ipc-ptz-zoom';
+import { useStore } from '../../ctx/store';
+import { useMemoizedFn } from '../../hooks';
+import { MultiCameraScreenMode } from '../../interface';
+import { pauseTimeToHideAllComponent, startTimeToHideAllComponent } from '../../ui/constant';
+import { UIEventContext } from '../../ui/context';
+import { getEnumRangeIsValid } from '../../utils/device';
+import Styles from '../ptz/ptz.less';
+import { multiPrefix } from './constants';
+import './index.less';
+import MoveView from './moveView';
+const getPtzData = devId => {
+  return [{
+    type: 'top',
+    show: getEnumRangeIsValid(devId, 'ptz_control', '0'),
+    dpValue: '0',
+    icon: 'ptz-arrow'
+  }, {
+    type: 'right',
+    show: getEnumRangeIsValid(devId, 'ptz_control', '2'),
+    dpValue: '2',
+    icon: 'ptz-arrow'
+  }, {
+    type: 'left',
+    show: getEnumRangeIsValid(devId, 'ptz_control', '6'),
+    dpValue: '6',
+    icon: 'ptz-arrow'
+  }, {
+    type: 'bottom',
+    show: getEnumRangeIsValid(devId, 'ptz_control', '4'),
+    dpValue: '4',
+    icon: 'ptz-arrow'
+  }];
+};
+const getZoomData = devId => {
+  return [{
+    type: 'zoomIn',
+    show: getEnumRangeIsValid(devId, 'zoom_control', '1'),
+    dpValue: '1',
+    icon: 'zoom-in'
+  }, {
+    type: 'zoomOut',
+    show: getEnumRangeIsValid(devId, 'zoom_control', '0'),
+    dpValue: '0',
+    icon: 'zoom-out'
+  }];
+};
+/**
+ * 可移动的 PTZ 控制器，目前仅在多目使用
+ */
+export const MoveablePtzControlItem = props => {
+  const {
+    devId,
+    multiCameraCtx,
+    positionLeft = 24,
+    positionBottom = 90,
+    height = 172,
+    onDragStart,
+    onDragEnd
+  } = props;
+  const {
+    brandColor,
+    selectedLenInfo,
+    screenMode
+  } = useStore({
+    brandColor: props.brandColor,
+    selectedLenInfo: multiCameraCtx.selectedLenInfo,
+    screenMode: multiCameraCtx.screenMode
+  });
+  const [style, setStyle] = useState({
+    positionLeft,
+    positionBottom,
+    height
+  });
+  const moveDomRef = useRef();
+  const pageStartRef = useRef({
+    pageX: 0,
+    pageY: 0
+  });
+  const canMoveRef = useRef(false);
+  const {
+    event
+  } = useContext(UIEventContext);
+  const ptzTimeId = useRef(null);
+  const ptzData = useRef(getPtzData(devId));
+  const zoomData = useRef(getZoomData(devId));
+  useEffect(() => {
+    const pages = getCurrentPages();
+    const page = pages[pages.length - 1];
+    const compTime = page.selectComponent('#moveable-ptz-control-move-view');
+    moveDomRef.current = compTime;
+  }, []);
+  useEffect(() => {
+    return () => {
+      if (ptzTimeId.current) {
+        clearInterval(ptzTimeId.current);
+        ptzTimeId.current = null;
+      }
+    };
+  }, []);
+  const onTouchPtzStart = useMemoizedFn(async data => {
+    event.emit(pauseTimeToHideAllComponent);
+    const {
+      type,
+      event: touchEvent
+    } = data;
+    touchEvent.stopPropagation();
+    const dpData = await getDpIdByCode(devId, 'ipc_multi_ptz_control');
+    if (dpData.code === 0) {
+      const ptzControlId = dpData.data;
+      const direction = _get(_find(ptzData.current, {
+        type
+      }), 'dpValue', null);
+      const sndDpValue = JSON.stringify({
+        index: selectedLenInfo.index,
+        direction
+      });
+      publishDps(devId, {
+        [ptzControlId]: sndDpValue
+      });
+      ptzTimeId.current = setInterval(() => {
+        publishDps(devId, {
+          [ptzControlId]: sndDpValue
+        });
+      }, 1000);
+    }
+  });
+  const onTouchZoomStart = useMemoizedFn(async data => {
+    event.emit(pauseTimeToHideAllComponent);
+    const {
+      type,
+      event: touchEvent
+    } = data;
+    touchEvent.stopPropagation();
+    const dpData = await getDpIdByCode(devId, 'ipc_multi_zoom_control');
+    if (dpData.code === 0) {
+      const ptzControlId = dpData.data;
+      const control = _get(_find(ptzData.current, {
+        type
+      }), 'dpValue', null);
+      const sndDpValue = JSON.stringify({
+        index: selectedLenInfo.index,
+        control
+      });
+      publishDps(devId, {
+        [ptzControlId]: sndDpValue
+      });
+      ptzTimeId.current = setInterval(() => {
+        publishDps(devId, {
+          [ptzControlId]: sndDpValue
+        });
+      }, 1000);
+    }
+  });
+  return /*#__PURE__*/React.createElement(CoverView, {
+    style: {
+      position: 'absolute',
+      zIndex: 89,
+      left: `${style.positionLeft}px`,
+      bottom: `${style.positionBottom}px`,
+      height: `${style.height}px`
+    }
+  }, /*#__PURE__*/React.createElement(MoveView, {
+    instanceId: "moveable-ptz-control-move-view"
+  }, /*#__PURE__*/React.createElement(View, {
+    onTouchMove: event => {
+      var _moveDomRef$current;
+      if (!canMoveRef.current || !moveDomRef.current) return;
+      const {
+        pageX,
+        pageY
+      } = event.changedTouches[0];
+      (_moveDomRef$current = moveDomRef.current) === null || _moveDomRef$current === void 0 || _moveDomRef$current.setStyle({
+        transform: `translateY(${pageY - pageStartRef.current.pageY}px) translateX(${pageX - pageStartRef.current.pageX}px)`
+      });
+    },
+    onTouchStart: event => {
+      onDragStart === null || onDragStart === void 0 || onDragStart({
+        positionLeft: style.positionLeft,
+        positionBottom: style.positionBottom
+      });
+      const {
+        pageX,
+        pageY
+      } = event.changedTouches[0];
+      pageStartRef.current = {
+        pageX,
+        pageY
+      };
+      canMoveRef.current = true;
+      ty.nativeDisabled(true);
+    },
+    onTouchEnd: event => {
+      if (!canMoveRef.current || !moveDomRef.current) return;
+      canMoveRef.current = false;
+      const {
+        pageX,
+        pageY
+      } = event.changedTouches[0];
+      const deltaX = pageX - pageStartRef.current.pageX;
+      const deltaY = pageY - pageStartRef.current.pageY;
+      const newPositionLeft = deltaX + style.positionLeft;
+      const newPositionBottom = style.positionBottom - deltaY;
+      onDragEnd === null || onDragEnd === void 0 || onDragEnd({
+        positionLeft: newPositionLeft,
+        positionBottom: newPositionBottom
+      });
+      ty.nativeDisabled(false);
+    }
+  }, /*#__PURE__*/React.createElement(IpcPtzZoom, {
+    className: `${multiPrefix}-moveable-ptz-control`,
+    ptzSize: "172px",
+    zoomSize: "66px",
+    zoomData: selectedLenInfo.supportZoom ? zoomData.current : [],
+    ptzData: selectedLenInfo.supportPTZ ? ptzData.current : [],
+    onTouchPtzStart: onTouchPtzStart,
+    onTouchPtzEnd: async () => {
+      screenMode === MultiCameraScreenMode.landscape && event.emit(startTimeToHideAllComponent);
+      const ptzStopData = await getDpIdByCode(devId, 'ipc_multi_ptz_stop');
+      if (ptzStopData.code === 0) {
+        const ptzStopId = ptzStopData.data;
+        const sendDpValue = JSON.stringify({
+          index: selectedLenInfo.index
+        });
+        publishDps(devId, {
+          [ptzStopId]: sendDpValue
+        });
+      }
+      if (ptzTimeId.current) {
+        clearInterval(ptzTimeId.current);
+        ptzTimeId.current = null;
+      }
+    },
+    onTouchZoomStart: onTouchZoomStart,
+    onTouchZoomEnd: async () => {
+      screenMode === MultiCameraScreenMode.landscape && event.emit(startTimeToHideAllComponent);
+      const ptzStopData = await getDpIdByCode(devId, 'ipc_multi_zoom_stop');
+      if (ptzStopData.code === 0) {
+        const ptzStopId = ptzStopData.data;
+        const sendDpValue = JSON.stringify({
+          index: selectedLenInfo.index
+        });
+        publishDps(devId, {
+          [ptzStopId]: sendDpValue
+        });
+      }
+      if (ptzTimeId.current) {
+        clearInterval(ptzTimeId.current);
+        ptzTimeId.current = null;
+      }
+    },
+    brandColor: brandColor,
+    iconClassName: Styles['arrow-icon-wrapper']
+  }))));
+};
+export const MoveablePtzControl = props => {
+  const {
+    event,
+    multiCameraCtx,
+    positionLeft = 24,
+    positionBottom = 90,
+    height = 172
+  } = props;
+  const [style, setStyle] = useState({
+    positionLeft,
+    positionBottom,
+    height
+  });
+  const {
+    screenMode
+  } = useStore({
+    screenMode: multiCameraCtx.screenMode
+  });
+
+  // 处理因为状态更新不同步导致的闪烁问题
+  const activeViewRef = useRef(0);
+  const onDragStart = () => {
+    screenMode === MultiCameraScreenMode.landscape && event.emit(pauseTimeToHideAllComponent);
+  };
+  const onDragEnd = data => {
+    screenMode === MultiCameraScreenMode.landscape && event.emit(startTimeToHideAllComponent);
+    activeViewRef.current = activeViewRef.current === 0 ? 1 : 0;
+    setStyle(prev => _objectSpread(_objectSpread({}, prev), {}, {
+      positionLeft: data.positionLeft,
+      positionBottom: data.positionBottom
+    }));
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, activeViewRef.current === 0 && /*#__PURE__*/React.createElement(MoveablePtzControlItem, _extends({}, props, style, {
+    onDragStart: onDragStart,
+    onDragEnd: onDragEnd
+  })), activeViewRef.current === 1 && /*#__PURE__*/React.createElement(MoveablePtzControlItem, _extends({}, props, style, {
+    onDragStart: onDragStart,
+    onDragEnd: onDragEnd
+  })));
+};

package/lib/widgets/multiCamera/multiPtz.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ComponentConfigProps } from '../../interface';
+import './index.less';
+type Props = ComponentConfigProps & {
+    className?: string;
+};
+/**
+ * 多目ptz
+ */
+export declare const MultiPtz: (props: Props) => React.JSX.Element | null;
+export {};

package/lib/widgets/multiCamera/multiPtz.js

@@ -0,0 +1,46 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { View, Text } from '@ray-js/ray';
+import clsx from 'clsx';
+import React from 'react';
+import { useMemoizedFn } from 'ahooks';
+import { useStore } from '../../ctx/store';
+import './index.less';
+/**
+ * 多目ptz
+ */
+export const MultiPtz = props => {
+  const {
+    multiCameraCtx,
+    className
+  } = props;
+  const {
+    brandColor
+  } = useStore({
+    brandColor: props.brandColor
+  });
+  const {
+    ptzStatus,
+    selectedLenInfo
+  } = useStore({
+    ptzStatus: multiCameraCtx.ptzStatus,
+    selectedLenInfo: multiCameraCtx.selectedLenInfo
+  });
+  const onPtz = useMemoizedFn(() => {
+    multiCameraCtx.setPtzStatus(!ptzStatus);
+  });
+  if (!selectedLenInfo.supportPTZ && !selectedLenInfo.supportZoom) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(View, {
+    className: clsx('ipc-player-plugin-ptz-text-icon', className),
+    style: _objectSpread({}, ptzStatus && {
+      borderColor: brandColor
+    }),
+    onClick: onPtz
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: clsx('icon-panel', 'icon-panel-ptz', 'ipc-player-plugin-ptz-text-icon'),
+    style: _objectSpread({}, ptzStatus && {
+      color: brandColor
+    })
+  }));
+};

package/lib/widgets/multiCamera/ptzMoveableTip.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ComponentConfigProps } from '../../interface';
+import './index.less';
+type Props = ComponentConfigProps & {
+    positionLeft?: number;
+};
+export declare const PtzMoveableTip: (props: Props) => React.JSX.Element | null;
+export {};

package/lib/widgets/multiCamera/ptzMoveableTip.js

@@ -0,0 +1,66 @@
+import React, { useMemo, useState } from 'react';
+import { View, CoverView, Text } from '@ray-js/ray';
+import clsx from 'clsx';
+import { useStore } from '../../ctx/store';
+import { ptzMoveableTipId } from '../../ui/constant';
+import { PlayState } from '../../interface';
+import Strings from '../../i18n';
+import { multiPrefix } from './constants';
+import { Storage } from '../../utils/storage';
+import './index.less';
+export const PtzMoveableTip = props => {
+  const {
+    devId,
+    positionLeft = 24,
+    multiCameraCtx,
+    deleteContent
+  } = props;
+  const [showTipModal, setShowTipModal] = useState(true);
+  const {
+    playState,
+    selectedLenInfo
+  } = useStore({
+    playState: props.playState,
+    selectedLenInfo: multiCameraCtx.selectedLenInfo
+  });
+  const positionInfo = useMemo(() => {
+    if (selectedLenInfo.supportPTZ && selectedLenInfo.supportZoom) {
+      return {
+        content: `${positionLeft + 70}px`,
+        tip: `${positionLeft + 120}px`
+      };
+    }
+    return {
+      content: `${positionLeft - 15}px`,
+      tip: `${positionLeft + 40}px`
+    };
+  }, [selectedLenInfo]);
+
+  // 获取缓存状态
+  const hideTipModal = () => {
+    setShowTipModal(false);
+    deleteContent('absolute', ptzMoveableTipId);
+    const storage = new Storage(devId);
+    storage.set(ptzMoveableTipId, true);
+  };
+  if (showTipModal && playState === PlayState.PLAYING) {
+    return /*#__PURE__*/React.createElement(CoverView, null, /*#__PURE__*/React.createElement(View, {
+      className: clsx(`${multiPrefix}-tile-tip-content`, `${multiPrefix}-ptz-tip`),
+      style: {
+        left: positionInfo.content
+      }
+    }), /*#__PURE__*/React.createElement(Text, {
+      className: clsx(`${multiPrefix}-tile-tip-text`, `${multiPrefix}-ptz-tip`),
+      style: {
+        left: positionInfo.tip
+      }
+    }, Strings.getLang(`ipc_player_ptz_moveable_tip_text`)), /*#__PURE__*/React.createElement(View, {
+      className: clsx(`${multiPrefix}-tile-tip-button`, `${multiPrefix}-ptz-tip`),
+      style: {
+        left: positionInfo.tip
+      },
+      onClick: hideTipModal
+    }, Strings.getLang('ipc_player_tip_confirm')));
+  }
+  return null;
+};

package/lib/widgets/multiCamera/switchLayout.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type ComponentConfigProps } from '../../interface';
+import './index.less';
+type Props = ComponentConfigProps & {
+    className?: string;
+};
+export declare function SwitchLayout(props: Props): React.JSX.Element;
+export {};

package/lib/widgets/multiCamera/switchLayout.js

@@ -0,0 +1,57 @@
+import { Text, View } from '@ray-js/ray';
+import clsx from 'clsx';
+import React, { useMemo } from 'react';
+import { useStore } from '../../ctx/store';
+import { MultiCameraLayoutStyle, MultiCameraScreenMode } from '../../interface';
+import { multiPrefix } from './constants';
+import './index.less';
+export function SwitchLayout(props) {
+  const {
+    className,
+    multiCameraCtx
+  } = props;
+  const {
+    layoutStyle,
+    screenMode,
+    nextLayoutStyle
+  } = useStore({
+    layoutStyle: multiCameraCtx.layoutStyle,
+    screenMode: multiCameraCtx.screenMode,
+    nextLayoutStyle: multiCameraCtx.nextLayoutStyle
+  });
+  const iconClassName = useMemo(() => {
+    if (screenMode === MultiCameraScreenMode.short) return 'icon-panel-expand';
+    if (screenMode === MultiCameraScreenMode.full) return 'icon-panel-collapse';
+    if (screenMode === MultiCameraScreenMode.landscape) {
+      if (layoutStyle === MultiCameraLayoutStyle.pip) return 'icon-panel-pip';
+      if (layoutStyle === MultiCameraLayoutStyle.tile) return 'icon-panel-landscape-tile';
+      if (layoutStyle === MultiCameraLayoutStyle.grid) return 'icon-panel-landscape-grid';
+      if (layoutStyle === MultiCameraLayoutStyle.thumbnail) return 'icon-panel-landscape-thumbnail';
+    }
+    return '';
+  }, [layoutStyle, screenMode]);
+
+  // 点击事件处理函数
+
+  return /*#__PURE__*/React.createElement(View, {
+    className: clsx(className),
+    onTouchStart: () => {
+      if (screenMode !== MultiCameraScreenMode.landscape) {
+        // 非横屏模式下，本组件只负责切换屏幕模式
+        const nextScreenMode = screenMode === MultiCameraScreenMode.short ? MultiCameraScreenMode.full : MultiCameraScreenMode.short;
+
+        // 避免闪烁，直接重置 ptz
+        if (nextScreenMode === MultiCameraScreenMode.short) {
+          multiCameraCtx.setPtzStatus(false);
+          // hideContent('absolute', tileActionsId);
+        }
+        multiCameraCtx.setScreenMode(nextScreenMode);
+      } else {
+        // 横屏模式下，本组件负责切换布局样式
+        multiCameraCtx.setLayoutStyle(nextLayoutStyle);
+      }
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: clsx(['icon-panel', iconClassName, multiPrefix])
+  }));
+}

package/lib/widgets/multiCamera/tileActions.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { ComponentConfigProps } from '../../interface';
+import './index.less';
+type Props = ComponentConfigProps;
+export declare function TileActions(props: Props): React.JSX.Element;
+export {};

package/lib/widgets/multiCamera/tileActions.js

@@ -0,0 +1,15 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { View } from '@ray-js/ray';
+import React from 'react';
+import clsx from 'clsx';
+import { TileSwitchLayout } from './tileSwitchLayout';
+import { multiPrefix } from './constants';
+import { TileMultiPtz } from './tileMultiPtz';
+import './index.less';
+export function TileActions(props) {
+  return /*#__PURE__*/React.createElement(View, {
+    className: clsx(`${multiPrefix}-actions`)
+  }, /*#__PURE__*/React.createElement(TileSwitchLayout, props), /*#__PURE__*/React.createElement(TileMultiPtz, _extends({}, props, {
+    className: `${multiPrefix}-action-wrap`
+  })));
+}

package/lib/widgets/multiCamera/tileMultiPtz.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ComponentConfigProps } from '../../interface';
+import './index.less';
+type Props = ComponentConfigProps & {
+    className?: string;
+};
+/**
+ * 多目竖屏平铺ptz
+ */
+export declare const TileMultiPtz: (props: Props) => React.JSX.Element | null;
+export {};

package/lib/widgets/multiCamera/tileMultiPtz.js

@@ -0,0 +1,48 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { View, Text } from '@ray-js/ray';
+import clsx from 'clsx';
+import React from 'react';
+import { useMemoizedFn } from 'ahooks';
+import Color from 'color';
+import { useStore } from '../../ctx/store';
+import { multiPrefix } from './constants';
+import './index.less';
+/**
+ * 多目竖屏平铺ptz
+ */
+export const TileMultiPtz = props => {
+  const {
+    multiCameraCtx,
+    className,
+    devId
+  } = props;
+  const {
+    brandColor,
+    ptzStatus,
+    selectedLenInfo
+  } = useStore({
+    brandColor: props.brandColor,
+    ptzStatus: multiCameraCtx.ptzStatus,
+    selectedLenInfo: multiCameraCtx.selectedLenInfo
+  });
+  const lighterBrandColor = new Color(brandColor).alpha(0.2).hexa();
+  const onPtz = useMemoizedFn(() => {
+    multiCameraCtx.setPtzStatus(!ptzStatus);
+  });
+  if (!selectedLenInfo.supportPTZ && !selectedLenInfo.supportZoom) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(View, {
+    className: clsx(`${multiPrefix}-action-wrap`, className),
+    style: _objectSpread({}, ptzStatus && {
+      borderColor: brandColor,
+      backgroundColor: lighterBrandColor
+    }),
+    onClick: onPtz
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: clsx('icon-panel', 'icon-panel-ptz', multiPrefix),
+    style: _objectSpread({}, ptzStatus && {
+      color: brandColor
+    })
+  }));
+};

package/lib/widgets/multiCamera/tileSwitchLayout.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type ComponentConfigProps } from '../../interface';
+import './index.less';
+type Props = ComponentConfigProps & {
+    className?: string;
+};
+export declare function TileSwitchLayout(props: Props): React.JSX.Element | null;
+export {};

package/lib/widgets/multiCamera/tileSwitchLayout.js

@@ -0,0 +1,38 @@
+import { View, Text } from '@ray-js/ray';
+import React, { useMemo } from 'react';
+import clsx from 'clsx';
+import { MultiCameraLayoutStyle } from '../../interface';
+import { multiPrefix } from './constants';
+import { useStore } from '../../ctx/store';
+import './index.less';
+export function TileSwitchLayout(props) {
+  const {
+    className,
+    multiCameraCtx
+  } = props;
+  const {
+    layoutStyle,
+    screenMode,
+    nextLayoutStyle
+  } = useStore({
+    layoutStyle: multiCameraCtx.layoutStyle,
+    screenMode: multiCameraCtx.screenMode,
+    nextLayoutStyle: multiCameraCtx.nextLayoutStyle
+  });
+  const iconClassName = useMemo(() => {
+    if (layoutStyle === MultiCameraLayoutStyle.tile) return 'icon-panel-tile';
+    if (layoutStyle === MultiCameraLayoutStyle.pip) return 'icon-panel-pip';
+    if (layoutStyle === MultiCameraLayoutStyle.grid) return 'icon-panel-pin';
+    if (layoutStyle === MultiCameraLayoutStyle.thumbnail) return 'icon-panel-thumbnail';
+    return '';
+  }, [layoutStyle, screenMode]);
+  if (nextLayoutStyle === MultiCameraLayoutStyle.invalid) return null;
+  return /*#__PURE__*/React.createElement(View, {
+    className: clsx(`${multiPrefix}-action-wrap`, className),
+    onClick: () => {
+      multiCameraCtx.setLayoutStyle(nextLayoutStyle);
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: clsx('icon-panel', iconClassName, multiPrefix)
+  }));
+}

package/lib/widgets/multiCamera/tileTip.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ComponentConfigProps } from '../../interface';
+import './index.less';
+type Props = ComponentConfigProps;
+export declare const TileTip: (props: Props) => React.JSX.Element | null;
+export {};