@zohodesk/components/lib/v1/MultiSelect/MobileHeader/MobileHeader.js

In this Package, we Provide Some Basic Components to Build Web App

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = MobileHeader;

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

var _Button = _interopRequireDefault(require("../../Button/Button"));

var _Layout = require("../../Layout");

var _defaultProps = require("./props/defaultProps");

var _propTypes = require("./props/propTypes");

var _MobileHeaderModule = _interopRequireDefault(require("../../../MultiSelect/MobileHeader/MobileHeader.module.css"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function MobileHeader(props) {
  var i18nKeys = props.i18nKeys,
      onClick = props.onClick,
      selectedOptions = props.selectedOptions,
      children = props.children;
  var i18nText = Object.assign({}, i18nKeys, {
    mobileHeaderText: i18nKeys.mobileHeaderText ? "".concat(i18nKeys.mobileHeaderText) : "".concat(selectedOptions.length, " Selected")
  });
  var mobilePrimaryButtonText = i18nText.mobilePrimaryButtonText,
      mobileSecondaryButtonText = i18nText.mobileSecondaryButtonText,
      mobileHeaderText = i18nText.mobileHeaderText;
  var showMobileHeader = i18nKeys.mobileHeaderText || !i18nKeys.mobileHeaderText && selectedOptions.length >= 1;
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: _MobileHeaderModule["default"].container
  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
    isCover: false,
    align: "vertical",
    alignContent: "between",
    alignBox: "row",
    className: _MobileHeaderModule["default"].header
  }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
    className: _MobileHeaderModule["default"].cardHeading,
    "data-title": showMobileHeader ? mobileHeaderText : null,
    flexible: true
  }, showMobileHeader && mobileHeaderText), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
    shrink: true
  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
    onClick: onClick,
    isBold: true,
    size: "medium",
    text: selectedOptions.length >= 1 ? mobilePrimaryButtonText : mobileSecondaryButtonText,
    palette: "plainPrimary",
    customClass: {
      customButton: _MobileHeaderModule["default"].buttonText
    },
    "data-title": mobilePrimaryButtonText
  }))), children);
}

MobileHeader.defaultProps = _defaultProps.defaultProps;
MobileHeader.propTypes = _propTypes.propTypes;