zarm/lib/use-orientation/index.js

基于 React 的移动端UI库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = require("react");

var _events = _interopRequireDefault(require("../utils/events"));

var defaultProps = {
  angle: 0,
  type: 'portrait-primary'
};

var useOrientation = function useOrientation() {
  var initialState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultProps;

  var _useState = (0, _react.useState)(initialState),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      state = _useState2[0],
      setState = _useState2[1];

  (0, _react.useEffect)(function () {
    var _window = window,
        screen = _window.screen;
    var mounted = true;

    var onChange = function onChange() {
      if (mounted) {
        var orientation = screen.orientation;

        if (orientation) {
          var angle = orientation.angle,
              type = orientation.type;
          setState({
            angle: angle,
            type: type
          });
        } else if (window.orientation !== undefined) {
          setState({
            angle: typeof window.orientation === 'number' ? window.orientation : 0,
            type: ''
          });
        } else {
          setState(initialState);
        }
      }
    };

    _events.default.on(window, 'orientationchange', onChange);

    onChange();
    return function () {
      mounted = false;

      _events.default.off(window, 'orientationchange', onChange);
    };
  }, []);
  return state;
};

var _default = useOrientation;
exports.default = _default;