vantui-edit/es/notify/index.js

一套适用于Taro3及React的vantui组件库

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
var _excluded = ["style", "className", "zIndex"];

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

import { nextTick } from '@tarojs/taro';
import { useState, useEffect, useCallback } from 'react';
import { View, Text } from '@tarojs/components';
import * as utils from '../wxs/utils';
import VanTransition from '../transition/index';
import { getSystemInfoSync } from '../common/utils';
import * as computed from './wxs';
import { on, off, trigger } from './events';
import notify from './notify';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var defaultId = 'van-notify';
var defaultOptions = {
  selector: '#van-notify',
  message: '',
  background: '',
  type: 'danger',
  color: '#fff',
  duration: 3000,
  safeAreaInsetTop: false,
  top: 0,
  id: defaultId
};
var timer = null;

function parseOptions(message) {
  if (message == null) {
    return {};
  }

  return typeof message === 'string' ? {
    message: message
  } : message;
}

export function Notify(props) {
  var _useState = useState({
    selector: '#van-notify',
    show: false,
    statusBarHeight: undefined,
    message: '',
    background: '',
    type: 'danger',
    color: '#fff',
    duration: 3000,
    safeAreaInsetTop: false,
    top: 0,
    id: defaultId,
    onClick: function onClick(_data) {},
    onOpened: function onOpened() {},
    onClose: function onClose() {}
  }),
      _useState2 = _slicedToArray(_useState, 2),
      state = _useState2[0],
      setState = _useState2[1];

  var style = props.style,
      className = props.className,
      zIndex = props.zIndex,
      others = _objectWithoutProperties(props, _excluded);

  useEffect(function () {
    setState(function (state) {
      return _objectSpread(_objectSpread({}, state), {}, {
        id: props.id || defaultId
      });
    });
  }, [props]);
  useEffect(function () {
    var _getSystemInfoSync = getSystemInfoSync(),
        statusBarHeight = _getSystemInfoSync.statusBarHeight;

    setState(function (state) {
      return _objectSpread(_objectSpread({}, state), {}, {
        statusBarHeight: statusBarHeight
      });
    });
  }, []);
  useEffect(function () {
    on('notify_show', function (notifyOptions) {
      var options = Object.assign(Object.assign({}, defaultOptions), parseOptions(notifyOptions));

      if (options.id === state.id || !options.id && state.id === defaultId) {
        setState(function (state) {
          return _objectSpread(_objectSpread({}, state), options);
        });
        show(notifyOptions);
      }

      on('notify_clear', function () {
        hide(notifyOptions);
      });
    });
    return function () {
      off('notify_show');
      off('notify_clear');
    };
    /* eslint-disable-next-line */
  }, []);
  var hide = useCallback(function (notifyOptions) {
    clearTimeout(timer);
    setState(function (state) {
      return _objectSpread(_objectSpread({}, state), {}, {
        show: false
      });
    });
    nextTick(function () {
      var _notifyOptions$onClos;

      notifyOptions === null || notifyOptions === void 0 ? void 0 : (_notifyOptions$onClos = notifyOptions.onClose) === null || _notifyOptions$onClos === void 0 ? void 0 : _notifyOptions$onClos.call(notifyOptions);
    });
  }, []);
  var show = useCallback(function (notifyOptions) {
    clearTimeout(timer);
    setState(function (state) {
      return _objectSpread(_objectSpread({}, state), {}, {
        show: true
      });
    });
    nextTick(function () {
      var _notifyOptions$onOpen;

      notifyOptions === null || notifyOptions === void 0 ? void 0 : (_notifyOptions$onOpen = notifyOptions.onOpened) === null || _notifyOptions$onOpen === void 0 ? void 0 : _notifyOptions$onOpen.call(notifyOptions);
    });
    var delay = notifyOptions.duration || state.duration;

    if (delay > 0 && delay !== Infinity) {
      timer = setTimeout(function () {
        // hide(notifyOptions)
        trigger('notify_clear', notifyOptions);
      }, delay);
    }
  }, [state.duration]);
  var onTap = useCallback(function (event) {
    var _state$onClick;

    (_state$onClick = state.onClick) === null || _state$onClick === void 0 ? void 0 : _state$onClick.call(state, event);
  }, [state]);
  return /*#__PURE__*/_jsx(VanTransition, _objectSpread(_objectSpread({
    name: "slide-down",
    show: state.show,
    className: "van-notify__container ".concat(className),
    style: utils.style([computed.rootStyle(zIndex ? {
      zIndex: zIndex,
      top: state.top
    } : {
      top: state.top
    }), style]),
    onClick: onTap
  }, others), {}, {
    children: /*#__PURE__*/_jsxs(View, {
      className: 'van-notify van-notify--' + state.type,
      style: computed.notifyStyle({
        background: state.background,
        color: state.color
      }),
      children: [state.safeAreaInsetTop && /*#__PURE__*/_jsx(View, {
        style: 'height: ' + state.statusBarHeight + 'px'
      }), /*#__PURE__*/_jsx(Text, {
        children: state.message
      })]
    })
  }));
}
Notify.show = notify;
Notify.clear = notify.clear;
export default Notify;