@zohodesk/components
Version:
Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development
50 lines • 1.73 kB
JavaScript
import React from 'react';
import Button from "../../Button/Button";
import { Container, Box } from "../../Layout";
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
import style from "./MobileHeader.module.css";
export default function MobileHeader(props) {
let {
i18nKeys,
onClick,
selectedOptions,
children
} = props;
const i18nText = Object.assign({}, i18nKeys, {
mobileHeaderText: i18nKeys.mobileHeaderText ? `${i18nKeys.mobileHeaderText}` : `${selectedOptions.length} Selected`
});
let {
mobilePrimaryButtonText,
mobileSecondaryButtonText,
mobileHeaderText
} = i18nText;
const showMobileHeader = i18nKeys.mobileHeaderText || !i18nKeys.mobileHeaderText && selectedOptions.length >= 1;
return /*#__PURE__*/React.createElement("div", {
className: style.container
}, /*#__PURE__*/React.createElement(Container, {
isCover: false,
align: "vertical",
alignContent: "between",
alignBox: "row",
className: style.header
}, /*#__PURE__*/React.createElement(Box, {
className: style.cardHeading,
"data-title": showMobileHeader ? mobileHeaderText : null,
flexible: true
}, showMobileHeader && mobileHeaderText), /*#__PURE__*/React.createElement(Box, {
shrink: true
}, /*#__PURE__*/React.createElement(Button, {
onClick: onClick,
isBold: true,
size: "medium",
text: selectedOptions.length >= 1 ? mobilePrimaryButtonText : mobileSecondaryButtonText,
palette: "plainPrimary",
customClass: {
customButton: style.buttonText
},
"data-title": mobilePrimaryButtonText
}))), children);
}
MobileHeader.defaultProps = defaultProps;
MobileHeader.propTypes = propTypes;