@antmjs/vantui/es/nav-bar/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 = ["fixed", "placeholder", "border", "zIndex", "safeAreaInsetTop", "leftArrow", "leftText", "title", "rightText", "renderTitle", "renderLeft", "renderRight", "onClickLeft", "onClickRight", "style", "className"];
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 { useMemo, useState } from 'react';
import { View } from '@tarojs/components';
import * as utils from '../wxs/utils';
import { getWindowInfo } from '../common/utils';
import { Icon } from '../icon';
import { get } from '../default-props';
import * as computed from './wxs';
import { jsx as _jsx } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export function NavBar(props) {
  var _useState = useState(get().NavBar),
    _useState2 = _slicedToArray(_useState, 1),
    d = _useState2[0];
  var _d$props = _objectSpread(_objectSpread({}, d), props),
    fixed = _d$props.fixed,
    placeholder = _d$props.placeholder,
    _d$props$border = _d$props.border,
    border = _d$props$border === void 0 ? true : _d$props$border,
    zIndex = _d$props.zIndex,
    _d$props$safeAreaInse = _d$props.safeAreaInsetTop,
    safeAreaInsetTop = _d$props$safeAreaInse === void 0 ? true : _d$props$safeAreaInse,
    leftArrow = _d$props.leftArrow,
    leftText = _d$props.leftText,
    title = _d$props.title,
    rightText = _d$props.rightText,
    renderTitle = _d$props.renderTitle,
    renderLeft = _d$props.renderLeft,
    renderRight = _d$props.renderRight,
    onClickLeft = _d$props.onClickLeft,
    onClickRight = _d$props.onClickRight,
    style = _d$props.style,
    className = _d$props.className,
    others = _objectWithoutProperties(_d$props, _excluded);
  var statusBarHeight = useMemo(function () {
    var _getWindowInfo = getWindowInfo(),
      _statusBarHeight = _getWindowInfo.statusBarHeight;
    if (isNaN(_statusBarHeight)) {
      return 22;
    }
    return _statusBarHeight;
  }, []);
  var getNavBarStyle = useMemo(function () {
    return utils.style([computed.barStyle({
      zIndex: zIndex,
      statusBarHeight: statusBarHeight,
      safeAreaInsetTop: safeAreaInsetTop,
      height: 50
    }) + '; ' + style]);
  }, [zIndex, statusBarHeight, safeAreaInsetTop, style]);
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [fixed && placeholder && /*#__PURE__*/_jsx(View, {
      style: getNavBarStyle
    }), /*#__PURE__*/_jsx(View, _objectSpread(_objectSpread({
      className: utils.bem('nav-bar', {
        fixed: fixed
      }) + '  ' + (border ? 'van-hairline--bottom' : '') + " ".concat(className || ''),
      style: getNavBarStyle
    }, others), {}, {
      children: /*#__PURE__*/_jsxs(View, {
        className: "van-nav-bar__content",
        children: [/*#__PURE__*/_jsx(View, {
          className: "van-nav-bar__left",
          onClick: onClickLeft,
          children: leftArrow || leftText ? /*#__PURE__*/_jsxs(_Fragment, {
            children: [leftArrow && /*#__PURE__*/_jsx(Icon, {
              size: 64,
              name: "arrow-left",
              className: "van-nav-bar__arrow"
            }), leftText && /*#__PURE__*/_jsx(View, {
              className: "van-nav-bar__text",
              hoverClass: "van-nav-bar__text--hover",
              hoverStayTime: 70,
              children: leftText
            })]
          }) : renderLeft
        }), /*#__PURE__*/_jsx(View, {
          className: "van-nav-bar__title van-nav-bar__title-h5  title-class van-ellipsis",
          children: title ? /*#__PURE__*/_jsx(_Fragment, {
            children: title
          }) : renderTitle
        }), /*#__PURE__*/_jsx(View, {
          className: "van-nav-bar__right",
          onClick: onClickRight,
          children: rightText ? /*#__PURE__*/_jsx(View, {
            className: "van-nav-bar__text",
            hoverClass: "van-nav-bar__text--hover",
            hoverStayTime: 70,
            children: rightText
          }) : renderRight
        })]
      })
    }))]
  });
}
export default NavBar;