zmp-react/cjs/zalo-ui-kits/button.js

Build full featured iOS & Android apps using ZMP & React

"use strict";

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

exports.__esModule = true;
exports.default = void 0;

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

var _react = _interopRequireWildcard(require("react"));

var _button = _interopRequireDefault(require("../components/button"));

var _constants = require("../../common/constants");

var _utils = require("../shared/utils");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

/* 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__*/(0, _react.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 = (0, _react.useRef)(null);
  (0, _react.useImperativeHandle)(ref, function () {
    return btnRef.current;
  });

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

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

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

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

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

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

      default:
        return '';
    }
  };

  var typeClass = getButtonTypeClass();
  var classes = (0, _utils.classNames)(className, typeClass, responsive ? 'zmp-btn-responsive' : '');
  var buttonProps = (0, _extends2.default)({}, props, {
    className: classes
  });
  return /*#__PURE__*/_react.default.createElement(_button.default, (0, _extends2.default)({}, buttonProps, {
    ref: btnRef
  }), children);
});
ZMPButton.displayName = 'zmp-button';
var _default = ZMPButton;
exports.default = _default;