zmp-react/esm/zalo-ui-kits/nav-left.js

Build full featured iOS & Android apps using ZMP & React

import _extends from "@babel/runtime/helpers/extends";
import React, { forwardRef, useImperativeHandle, useRef } from 'react';
import { ICON_CHEVRON_LEFT } from '../../common/constants';
import NavLeft from '../components/nav-left';
import Link from '../components/link';
import { getExtraAttrs, emit } from '../shared/utils';
/* dts-props
  id?: string | number;
  className?: string;
  style?: React.CSSProperties;
  backLink? : boolean | string;
  backLinkUrl? : string;
  backLinkForce? : boolean;
  backLinkShowText? : boolean;
  sliding? : boolean;
  COLOR_PROPS
  onBackClick? : (event?: any) => void;
  onClickBack? : (event?: any) => void;
  ref?: React.MutableRefObject<{el: HTMLElement | null}>;
  CHILDREN_PROP
*/

var ZMPNavLeft = /*#__PURE__*/forwardRef(function (props, ref) {
  var id = props.id,
      style = props.style,
      children = props.children,
      backLink = props.backLink,
      backLinkUrl = props.backLinkUrl,
      backLinkForce = props.backLinkForce,
      backLinkShowText = props.backLinkShowText;
  var extraAttrs = getExtraAttrs(props);
  var elRef = useRef(null);
  useImperativeHandle(ref, function () {
    return elRef.current;
  });

  var onBackClick = function onBackClick(event) {
    emit(props, 'backClick clickBack', event);
  };

  var needBackLinkText = backLinkShowText;
  var linkEl;

  if (backLink) {
    var text = backLink !== true && needBackLinkText ? backLink : undefined;
    linkEl = /*#__PURE__*/React.createElement(Link, {
      href: backLinkUrl || '#',
      back: true,
      noLinkClass: true,
      iconZMP: ICON_CHEVRON_LEFT,
      force: backLinkForce || undefined,
      className: !text ? 'icon-only no-ripple' : undefined,
      text: text,
      onClick: onBackClick
    });
  }

  return /*#__PURE__*/React.createElement(NavLeft, _extends({
    id: id,
    style: style,
    backLink: false,
    ref: elRef
  }, extraAttrs), linkEl, children);
});
ZMPNavLeft.displayName = 'zmp-nav-left';
export default ZMPNavLeft;