2019-06-18 14:37:36 +00:00
|
|
|
import React from "react";
|
|
|
|
import PropTypes from 'prop-types';
|
2019-06-19 15:32:29 +00:00
|
|
|
import styled from 'styled-components';
|
2019-06-18 14:37:36 +00:00
|
|
|
import Loader from '../loader';
|
|
|
|
|
|
|
|
const StyledOuter = styled.div`
|
|
|
|
position: fixed;
|
|
|
|
text-align: center;
|
|
|
|
top: 10px;
|
|
|
|
width: 100%;
|
|
|
|
z-index: ${props => props.zIndex};
|
|
|
|
display: ${props => props.visible ? 'block' : 'none'};
|
|
|
|
`;
|
|
|
|
|
|
|
|
const StyledInner = styled.div`
|
|
|
|
background-color: #fff;
|
|
|
|
border: 1px solid #cacaca;
|
|
|
|
color: ${props => props.fontColor};
|
|
|
|
display: inline-block;
|
|
|
|
font-size: ${props => props.fontSize}px;
|
|
|
|
white-space: nowrap;
|
|
|
|
overflow: hidden;
|
|
|
|
padding: 5px 10px;
|
|
|
|
line-height: 16px;
|
|
|
|
z-index: ${props => props.zIndex};
|
|
|
|
border-radius: 5px;
|
|
|
|
-moz-border-radius: 5px;
|
|
|
|
-webkit-border-radius: 5px;
|
|
|
|
box-shadow: 0 2px 8px rgba(0,0,0,.3);
|
|
|
|
-moz-box-shadow: 0 2px 8px rgba(0,0,0,.3);
|
|
|
|
-webkit-box-shadow: 0 2px 8px rgba(0,0,0,.3);
|
|
|
|
`;
|
|
|
|
|
|
|
|
const OvalLoader = styled(Loader)`
|
|
|
|
display: inline;
|
|
|
|
margin-right: 10px;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const RequestLoader = props => {
|
2019-07-24 17:39:19 +00:00
|
|
|
//console.log("RequestLoader render");
|
2019-06-18 14:37:36 +00:00
|
|
|
const { loaderColor, loaderSize, label } = props;
|
|
|
|
return (
|
|
|
|
<StyledOuter {...props}>
|
|
|
|
<StyledInner {...props}>
|
|
|
|
<OvalLoader type="oval" color={loaderColor} size={loaderSize} label={label} />
|
|
|
|
{label}
|
|
|
|
</StyledInner>
|
|
|
|
</StyledOuter>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
RequestLoader.propTypes = {
|
|
|
|
visible: PropTypes.bool,
|
|
|
|
zIndex: PropTypes.number,
|
|
|
|
loaderSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
|
|
loaderColor: PropTypes.string,
|
|
|
|
label: PropTypes.string,
|
|
|
|
fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
|
|
fontColor: PropTypes.string,
|
2019-12-03 12:48:20 +00:00
|
|
|
className: PropTypes.string,
|
|
|
|
id: PropTypes.string,
|
|
|
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
|
2019-06-18 14:37:36 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
RequestLoader.defaultProps = {
|
|
|
|
visible: false,
|
|
|
|
zIndex: 256,
|
|
|
|
loaderSize: 16,
|
|
|
|
loaderColor: '#999',
|
|
|
|
label: 'Loading... Please wait...',
|
|
|
|
fontSize: 12,
|
|
|
|
fontColor: '#999'
|
|
|
|
};
|
|
|
|
|
|
|
|
export default RequestLoader;
|