@meksiabdou/alert-reactjs
Version:
Alert for reactjs
370 lines (339 loc) • 10 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = require('react');
var React__default = _interopDefault(React);
function _extends() {
_extends = Object.assign ? Object.assign.bind() : function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function SvgSuccesscheckmarkcircle(props) {
return React.createElement("svg", Object.assign({
viewBox: "0 0 32 32",
xmlns: "http://www.w3.org/2000/svg"
}, props), React.createElement("path", {
d: "M15.191 19.749a.997.997 0 01-.707-.293l-2.5-2.5a1 1 0 111.413-1.415l1.794 1.794 4.792-4.791a1 1 0 111.414 1.414l-5.499 5.498a.997.997 0 01-.707.293z"
}), React.createElement("path", {
d: "M16 29C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13zm0-24C9.935 5 5 9.935 5 16s4.935 11 11 11 11-4.935 11-11S22.065 5 16 5z"
}));
}
function SvgErrorcheckmarkcircle(props) {
return React.createElement("svg", Object.assign({
viewBox: "0 0 512 512",
xmlns: "http://www.w3.org/2000/svg"
}, props), React.createElement("g", {
"data-name": 1
}, React.createElement("path", {
d: "M257 461.46c-114 0-206.73-92.74-206.73-206.73S143 48 257 48s206.73 92.74 206.73 206.73S371 461.46 257 461.46zM257 78c-97.45 0-176.73 79.28-176.73 176.73S159.55 431.46 257 431.46s176.73-79.28 176.73-176.73S354.45 78 257 78z"
}), React.createElement("path", {
d: "M342.92 358a15 15 0 01-10.61-4.39L160.47 181.76a15 15 0 1121.21-21.21L353.53 332.4a15 15 0 01-10.61 25.6z"
}), React.createElement("path", {
d: "M171.07 358a15 15 0 01-10.6-25.6l171.84-171.85a15 15 0 0121.22 21.21L181.68 353.61a15 15 0 01-10.61 4.39z"
})));
}
function SvgWarning(props) {
return React.createElement("svg", Object.assign({
viewBox: "0 0 32 32",
xmlns: "http://www.w3.org/2000/svg"
}, props), React.createElement("g", {
"data-name": "Layer 58",
id: "warning_svg__Layer_58"
}, React.createElement("path", {
className: "warning_svg__cls-1",
d: "M16 26a2 2 0 112-2 2 2 0 01-2 2zm0-2zM16 20a1 1 0 01-1-1v-8a1 1 0 012 0v8a1 1 0 01-1 1z"
}), React.createElement("path", {
className: "warning_svg__cls-1",
d: "M27.78 30H4.22a3.19 3.19 0 01-2.77-1.57 3.13 3.13 0 01-.06-3.13L13.17 3.67a3.23 3.23 0 015.66 0L30.61 25.3a3.13 3.13 0 01-.06 3.13A3.19 3.19 0 0127.78 30zM16 4a1.18 1.18 0 00-1.07.63L3.15 26.25a1.12 1.12 0 000 1.16 1.19 1.19 0 001 .59h23.63a1.19 1.19 0 001-.59 1.12 1.12 0 000-1.16L17.07 4.63A1.18 1.18 0 0016 4z"
})));
}
var defaultIconStyle = {
height: 26,
width: 26
};
var flexStyle = {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-start'
};
var textStyle = {
margin: 0,
fontSize: '14px'
};
var defaultStyle = {
success: {
icon: {
fill: 'rgb(4 108 78)'
},
closeIcon: {
color: 'rgb(4 108 78)'
},
text: {
color: 'rgb(4 108 78)'
},
alert: {
backgroundColor: 'rgb(222 247 236)'
}
},
info: {
icon: {
fill: 'rgb(26 86 219)'
},
closeIcon: {
color: 'rgb(26 86 219)'
},
text: {
color: 'rgb(26 86 219)'
},
alert: {
backgroundColor: 'rgb(225 239 254)'
}
},
error: {
icon: {
fill: 'rgb(200 30 30)'
},
closeIcon: {
color: 'rgb(200 30 30)'
},
text: {
color: 'rgb(200 30 30)'
},
alert: {
backgroundColor: 'rgb(253 232 232)'
}
},
warning: {
icon: {
fill: 'rgb(142 75 16)'
},
closeIcon: {
color: 'rgb(142 75 16)'
},
text: {
color: 'rgb(142 75 16)'
},
alert: {
backgroundColor: 'rgb(253 246 178)'
}
},
dark: {
icon: {
fill: '#fff'
},
closeIcon: {
color: '#fff'
},
text: {
color: '#fff'
},
alert: {
backgroundColor: '#2c2c2c'
}
}
};
var icons = {
success: {
render: function render(iconStyle) {
return React__default.createElement(SvgSuccesscheckmarkcircle //fill={iconStyle.fill}
//{...(defaultIconStyle as any)}
, {
//fill={iconStyle.fill}
//{...(defaultIconStyle as any)}
style: iconStyle
});
}
},
error: {
render: function render(iconStyle) {
return React__default.createElement(SvgErrorcheckmarkcircle //fill={iconStyle.fill}
//{...(defaultIconStyle as any)}
, {
//fill={iconStyle.fill}
//{...(defaultIconStyle as any)}
style: iconStyle
});
}
},
warning: {
render: function render(iconStyle) {
return React__default.createElement(SvgWarning //fill={iconStyle.fill}
//{...(defaultIconStyle as any)}
, {
//fill={iconStyle.fill}
//{...(defaultIconStyle as any)}
style: iconStyle
});
}
},
info: {
render: function render(iconStyle) {
return React__default.createElement(SvgWarning //fill={iconStyle.fill}
//{...(defaultIconStyle as any)}
, {
//fill={iconStyle.fill}
//{...(defaultIconStyle as any)}
style: iconStyle
});
}
},
dark: {
render: function render() {
return null;
}
}
};
var isValidType = function isValidType(type, data) {
if (type && data != null && data[type]) {
return data[type];
} else if (!type && data != null && data['success']) {
return data['success'];
}
return {};
};
var Alert = function Alert(props) {
var className = props.className,
customAlertStyle = props.alertStyle,
show = props.show,
message = props.message,
onHide = props.onHide,
type = props.type,
defaultTransitionTime = props.transitionTime,
customIcon = props.customIcon;
var _useState = React.useState(false),
alertShow = _useState[0],
setAlertShow = _useState[1];
var _useState2 = React.useState(0.6),
opacity = _useState2[0],
setOpacity = _useState2[1];
var alertRef = React.useRef(null);
var alertStyleDefault = isValidType(type, defaultStyle);
var _useState3 = React.useState(alertStyleDefault),
style = _useState3[0],
setStyle = _useState3[1];
var _useState4 = React.useState(isValidType(type, icons)),
icon = _useState4[0],
setIcon = _useState4[1];
var transitionTime = typeof defaultTransitionTime === 'number' ? defaultTransitionTime : 250;
var alertStyle = {
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
position: 'relative',
padding: '0.4rem 0.6rem',
marginBottom: '0.5rem',
border: '1px solid transparent',
borderRadius: '.25rem',
transition: transitionTime + "ms all",
opacity: 0
};
var btnStyle = {
display: 'inline-block',
fontWeight: 700,
lineHeight: 1,
textAlign: 'center',
textDecoration: 'none',
verticalAlign: 'middle',
cursor: 'pointer',
userSelect: 'none',
backgroundColor: 'transparent',
border: '1px solid transparent',
padding: '.375rem',
fontSize: '1.5em',
opacity: opacity,
textShadow: 'none',
fontFamily: 'initial'
};
React.useEffect(function () {
setStyle(isValidType(type, defaultStyle));
setIcon(isValidType(type, icons));
}, [type]);
React.useEffect(function () {
if (customAlertStyle && type && customAlertStyle[type]) {
setStyle(customAlertStyle[type]);
}
}, [customAlertStyle]);
React.useEffect(function () {
var id = null;
if (alertShow) {
id = setTimeout(function () {
if (alertRef.current) {
alertRef.current.style.opacity = '1';
}
}, transitionTime);
}
return function () {
return clearTimeout(id);
};
}, [alertShow]);
React.useEffect(function () {
if (show) {
setAlertShow(true);
}
}, [show]);
React.useEffect(function () {
var id = null;
if (!show) {
id = hide();
}
return function () {
return clearTimeout(id);
};
}, [show]);
var hide = function hide() {
if (alertRef.current) {
alertRef.current.style.opacity = '0';
}
return setTimeout(function () {
setAlertShow(false);
if (onHide) {
onHide();
}
}, transitionTime);
};
if (alertShow) {
return React__default.createElement("div", {
ref: alertRef,
style: _extends({}, alertStyle, alertStyleDefault.alert, style == null ? void 0 : style.alert),
className: ("alert-reactjs " + (className || '')).trim()
}, React__default.createElement("div", {
style: flexStyle,
className: "alert-reactjs-body"
}, React__default.createElement("button", {
onMouseOver: function onMouseOver() {
return setOpacity(1);
},
onMouseOut: function onMouseOut() {
return setOpacity(0.6);
},
style: _extends({}, btnStyle, alertStyleDefault.closeIcon, style.closeIcon),
onClick: hide,
type: "button"
}, "\xD7"), React__default.createElement("p", {
style: _extends({}, textStyle, alertStyleDefault.text, style == null ? void 0 : style.text)
}, React.isValidElement(message) ? message : message)), React__default.createElement("div", {
className: "alert-reactjs-icon"
}, React.isValidElement(customIcon) ? customIcon : icon == null ? void 0 : icon.render == null ? void 0 : icon.render(_extends({}, defaultIconStyle, alertStyleDefault.icon, style == null ? void 0 : style.icon))));
}
return null;
};
Alert.defaultProps = {
className: undefined,
show: false,
message: undefined,
type: 'success',
customIcon: undefined,
alertStyle: undefined,
transitionTime: 250
};
exports.default = Alert;
//# sourceMappingURL=alert-reactjs.cjs.development.js.map