@uiw/react-baidu-map-utils/cjs/hooks.js

Baidu Map utils Components for React.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useEnableProperties = useEnableProperties;
exports.useEventProperties = useEventProperties;
exports.usePrevious = usePrevious;
exports.useProperties = useProperties;
exports.useRenderDom = useRenderDom;
exports.useVisiable = useVisiable;
var _reactDom = require("react-dom");
var _react = _interopRequireWildcard(require("react"));
var _jsxRuntime = require("react/jsx-runtime");
/// <reference types="@uiw/react-baidu-map-types" />

/**
 * 批量创建多个如下 State，监听并设置值，
 * 组件属性更改 <Componet enableDragging={true} >
 * 根据 enableDragging 的 Boolean 值，执行 `enable` 和 `disable` 开头的函数。
 * @example
 * ```js
 * const [enableDragging, setEnableDragging] = useState(props.enableDragging);
 * useEffect(() => {
 *   console.log('~~:enableDragging', enableDragging, props.enableDragging, polyline);
 *   setEnableDragging(props.enableDragging)
 * }, [polyline, enableDragging, props.enableDragging]);
 * ```
 * @param instance
 * @param props
 * @param propsName
 */
function useEnableProperties(instance) {
  let props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  let propsName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
  propsName.forEach(name => {
    const eName = `enable${name}`;
    const funName = props[eName] ? `enable${name}` : `disable${name}`;
    if (instance && props[eName] !== undefined) {
      instance[funName] && instance[funName]();
    }
  });
}

/**
 * 针对 Overlay 类型的组件，有公共的是否显示 对象处理
 * 通过参数 `visiable` 来控制执行 `show()` or `hide()`
 */
function useVisiable(instance) {
  let props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  const visiable = props.visiable;
  const [state, setState] = (0, _react.useState)(visiable);
  (0, _react.useEffect)(() => {
    if (instance && visiable !== undefined) {
      if (visiable) {
        instance.show && instance.show();
      } else {
        instance.hide && instance.hide();
      }
      if (visiable !== state) {
        setState(visiable);
      }
    }
  }, [instance, state, visiable]);
}

/**
 * 批量创建多个如下 State，监听并设置值，
 * 执行 `set` 开头的函数。
 * @param instance
 * @param props
 * @param propsName
 */
function useProperties(instance, props) {
  let propsName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
  propsName.forEach(name => {
    const eName = `${name.charAt(0).toLowerCase()}${name.slice(1)}`;
    // eslint-disable-next-line react-hooks/rules-of-hooks
    const [state, setState] = (0, _react.useState)(props[eName]);
    // eslint-disable-next-line react-hooks/rules-of-hooks
    (0, _react.useEffect)(() => {
      if (instance && instance[`set${name}`] && props[eName] !== undefined) {
        /**
         * 坐标点的参数设置，比对, 坐标点的参数设置
         */
        let data = props[eName];
        if (data && data.lng && data.lat) {
          data = new BMap.Point(data.lng, data.lat);
          let preData = state;
          if (preData && preData.lng && preData.lat) {
            preData = new BMap.Point(preData.lng, preData.lat);
            if (data.equals(preData)) {
              return;
            }
          }
        }
        instance[`set${name}`](data);
        // 属性发生变化缓存
        if (state !== props[eName]) {
          if (eName === 'bounds') {
            if (state && props[eName] && !state.equals(props[eName])) {
              setState(props[eName]);
            }
          } else {
            setState(props[eName]);
          }
        }
      }
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [instance, props[eName]]);
  });
}
/**
 * 绑定事件
 * @param instance 实例对象
 * @param props 传递进来的 props
 * @param eventName 事件的名字，如，我们使用 `onClick` 事件，最终被转换成，`click` 绑定到实例中，`onDblClick` => `dblclick`
 *
 * @example
 * ```js
 * useEventProperties<BMap.Marker, UseMarker>(marker!, props, [
 *   'Click', 'DblClick', 'MouseDown', 'MouseUp', 'MouseOut', 'MouseOver'
 * ]);
 * ```
 */
function useEventProperties(instance) {
  let props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  let eventName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
  let type = arguments.length > 3 ? arguments[3] : undefined;
  eventName.forEach(name => {
    const eventName = `on${name}`;
    const eventHandle = props[eventName];
    // eslint-disable-next-line react-hooks/rules-of-hooks
    (0, _react.useEffect)(() => {
      if (!instance) return;
      if (eventHandle && name) {
        let eName = name;
        if (type === 'CamelCase') {
          eName = name.replace(name[0], name[0].toLowerCase());
        } else {
          eName = name.toLowerCase();
        }
        try {
          instance.addEventListener(eName, eventHandle);
        } catch (error) {}
        return () => {
          try {
            instance.removeEventListener(eName, eventHandle);
          } catch (error) {}
        };
      }
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [instance, props[eventName]]);
  });
}

/**
 * 获取上一轮的 props 或 state
 * How to get the previous props or state?
 * https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
 * @example
 * ```js
 * function Counter() {
 *   const [count, setCount] = useState(0);
 *   const prevCount = usePrevious(count);
 *   return <h1>Now: {count}, before: {prevCount}</h1>;
 * }
 * ```
 */
function usePrevious(value) {
  const ref = (0, _react.useRef)();
  (0, _react.useEffect)(() => {
    ref.current = value;
  });
  return ref.current;
}
function useRenderDom(props) {
  const container = (0, _react.useRef)(document.createElement('div'));
  (0, _react.useLayoutEffect)(() => {
    (0, _reactDom.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
      children: props.children
    }), container.current);
  }, [props.children]);
  return {
    container: container.current
  };
}