zmp-react/esm/zalo-ui-kits/button.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 Button from '../components/button';
import { BUTTON_TYPE } from '../../common/constants';
import { classNames } from '../shared/utils';
/* dts-imports
import { Icon } from 'zmp-core/types';
*/

/* dts-props
  id?: string | number;
  className?: string;
  style?: React.CSSProperties;
  text? : string
  tabLink? : boolean | string
  tabLinkActive? : boolean
  type? : string
  href? : string | boolean
  target? : string
  fill? : boolean
  large? : boolean
  small? : boolean
  active? : boolean
  disabled? : boolean
  tooltip? : string
  tooltipTrigger? : string
  preloader?: boolean;
  preloaderSize?: number | string;
  preloaderColor?: string;
  loading?: boolean;
  onClick? : (event?: any) => void;
  typeName?: 'primary' | 'secondary' | 'destructive' | 'tertiary' | 'ghost';
  ref?: React.MutableRefObject<{el: HTMLElement | null}>;
  responsive: boolean
  COLOR_PROPS
  ICON_PROPS
  ACTIONS_PROPS
  CHILDREN_PROP
  iconZMP: Icon.IconZMP
*/

var ZMPButton = /*#__PURE__*/forwardRef(function (props, ref) {
  var className = props.className,
      children = props.children,
      _props$typeName = props.typeName,
      typeName = _props$typeName === void 0 ? '' : _props$typeName,
      responsive = props.responsive;
  var btnRef = useRef(null);
  useImperativeHandle(ref, function () {
    return btnRef.current;
  });

  var getButtonTypeClass = function getButtonTypeClass() {
    var classPrefix = 'zmp-btn';

    switch (typeName) {
      case BUTTON_TYPE.PRIMARY:
        return classPrefix + "-primary";

      case BUTTON_TYPE.SECONDARY:
        return classPrefix + "-secondary";

      case BUTTON_TYPE.DESTRUCTIVE:
        return classPrefix + "-destructive";

      case BUTTON_TYPE.TERTIARY:
        return classPrefix + "-tertiary";

      case BUTTON_TYPE.GHOST:
        return classPrefix + "-ghost";

      default:
        return '';
    }
  };

  var typeClass = getButtonTypeClass();
  var classes = classNames(className, typeClass, responsive ? 'zmp-btn-responsive' : '');

  var buttonProps = _extends({}, props, {
    className: classes
  });

  return /*#__PURE__*/React.createElement(Button, _extends({}, buttonProps, {
    ref: btnRef
  }), children);
});
ZMPButton.displayName = 'zmp-button';
export default ZMPButton;