@zohodesk/dot
Version:
In this Library, we Provide Some Basic Components to Build Your Application
205 lines (200 loc) • 6.76 kB
JavaScript
/**** Libraries ****/
import React, { Component } from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
/**** Components ****/
import Lookup from "../../../lookup/Lookup/Lookup";
import AlertHeader from "../AlertHeader/AlertHeader";
import Button from '@zohodesk/components/lib/Button/Button';
import Section from "../../../lookup/Section/Section";
import FormAction from "../../../FormAction/FormAction";
import { Container, Box } from '@zohodesk/components/lib/Layout';
import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
/**** CSS ****/
import style from "./AlertLookupNew.module.css";
let buttonPaletteObject = {
success: {
buttonPalette: 'successFilled'
},
error: {
buttonPalette: 'dangerFilled'
},
danger: {
buttonPalette: 'dangerFilled'
},
warning: {
buttonPalette: 'dangerFilled'
},
info: {
buttonPalette: 'primaryFilled'
},
notification: {
buttonPalette: 'primaryFilled'
}
};
export default class AlertLookup extends Component {
constructor(props) {
super(props);
this.getAriaId = getUniqueId(this); // this.documentKeydownHandler = this.documentKeydownHandler.bind(this);
} // componentDidMount() {
// let { isActive } = this.props;
// if (isActive) {
// document.addEventListener('keydown', this.documentKeydownHandler)
// }
// }
// componentDidUpdate(prevProps) {
// let { isActive } = this.props;
// if (prevProps.isActive !== isActive) {
// isActive
// ? document.addEventListener('keydown', this.documentKeydownHandler)
// : document.removeEventListener('keydown', this.documentKeydownHandler);
// }
// }
// componentWillUnmount() {
// document.removeEventListener('keydown', this.documentKeydownHandler);
// }
// documentKeydownHandler(e = {}) {
// let { onSubmitClick, onCancelClick, isActive, onEsc, onClose } = this.props;
// if (e.keyCode === 27 && isActive) {
// e && e.preventDefault && e.preventDefault();
// onEsc == 'close'
// ? onClose && onClose(e)
// : onCancelClick && onCancelClick(e);
// } else if (e.keyCode === 13 && isActive) {
// e && e.preventDefault && e.preventDefault();
// onSubmitClick && onSubmitClick(e);
// }
// }
render() {
let {
isActive,
size,
type = 'danger',
title,
message,
confirmationMessage,
submitText,
cancelText,
onSubmitClick,
onCancelClick,
children,
forwardRef,
onClose,
headerChildren,
wrapHeader,
dataId,
onLookupClick,
customClass = {},
needIcon,
a11y,
customProps,
align,
childAnimationName,
isHtmlContent,
scroll,
isDefaultFocus,
onEsc
} = this.props;
const {
LookupProps = {},
AlertHeaderProps = {},
PrimaryButtonProps = {},
SecondaryButtonProps = {}
} = customProps;
let {
containerClass = '',
sectionClass = ''
} = customClass;
let {
buttonPalette = 'dangerFilled'
} = buttonPaletteObject[type] || {};
let ariaMessageId = this.getAriaId();
let ariaConfirmMsgId = this.getAriaId();
let ariaTitleId = this.getAriaId();
let ariaLeaveButtonId = this.getAriaId();
let ariaStayButtonId = this.getAriaId();
a11y = {
ariaLabelledby: a11y && a11y.ariaLabelledby ? a11y.ariaLabelledby : ariaTitleId,
ariaDescribedby: a11y && a11y.ariaDescribedby ? a11y.ariaDescribedby : ariaMessageId + ' ' + ariaConfirmMsgId
};
return /*#__PURE__*/React.createElement(Lookup, {
onClose: onEsc == 'close' ? onClose : onCancelClick,
needFocusScope: true,
isActive: isActive,
size: size,
dataId: dataId,
forwardRef: forwardRef,
onClick: onLookupClick,
customClass: containerClass,
a11y: a11y,
childAnimationName: childAnimationName,
...LookupProps
}, /*#__PURE__*/React.createElement(Container, {
alignBox: "row",
align: align,
wrap: "wrap"
}, /*#__PURE__*/React.createElement(Section, {
alignBox: "row",
className: style.section
}, /*#__PURE__*/React.createElement(Container, {
alignBox: "column"
}, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(AlertHeader, {
htmlId: ariaTitleId,
title: title,
type: type,
needIcon: needIcon,
onClose: onClose,
breakChildren: wrapHeader,
...AlertHeaderProps
}, headerChildren ? headerChildren() : null)), /*#__PURE__*/React.createElement(Box, {
flexible: true
}, /*#__PURE__*/React.createElement("div", {
className: `${style.innerSection} ${style[`${scroll}Scroll`] ? style[`${scroll}Scroll`] : ''} ${sectionClass}`
}, children ? children : /*#__PURE__*/React.createElement(React.Fragment, null, isHtmlContent && message ? /*#__PURE__*/React.createElement("div", {
id: ariaMessageId,
dangerouslySetInnerHTML: {
__html: message
}
}) : /*#__PURE__*/React.createElement("div", {
id: ariaMessageId
}, message), confirmationMessage && /*#__PURE__*/React.createElement("div", {
id: ariaConfirmMsgId,
className: `${message ? style.confirmMsgText : ''}`
}, confirmationMessage)))), submitText || onSubmitClick || cancelText || onCancelClick ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
className: style.footer
}, /*#__PURE__*/React.createElement(FormAction, {
size: "small",
paddingLeftSize: "xmedium"
}, /*#__PURE__*/React.createElement(Button, {
text: submitText,
dataId: dataId === 'alertPopup' ? 'alertConfirmButton' : `${dataId}_confirmButton`,
onClick: onSubmitClick,
palette: buttonPalette,
customProps: {
'data-a11y-autofocus': isDefaultFocus
},
...PrimaryButtonProps,
a11y: {
'aria-labelledby': ariaTitleId + ' ' + ariaMessageId + ' ' + ariaLeaveButtonId
},
id: ariaLeaveButtonId
}), cancelText && /*#__PURE__*/React.createElement(Button, {
dataId: dataId === 'alertPopup' ? 'alertCancelButton' : `${dataId}_cancelButton`,
text: cancelText,
onClick: onCancelClick,
palette: "secondary",
...SecondaryButtonProps,
a11y: {
'aria-labelledby': ariaTitleId + ' ' + ariaMessageId + ' ' + ariaStayButtonId
},
id: ariaStayButtonId
})))) : null))));
}
}
AlertLookup.propTypes = propTypes;
AlertLookup.defaultProps = defaultProps; // if (__DOCS__) {
// AlertLookup.docs = {
// componentGroup: 'AlertLookup',
// folderName: 'Alert'
// };
// }