BlockStorage/repertory-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Removed react-css-modules

Browse Source
This commit is contained in:
Scott E. Graves
2019-04-09 12:18:57 -05:00
parent 177fd97c4b
commit 35a38977b6
46 changed files with 201 additions and 1395 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.css
View File

@@ -10,7 +10,7 @@
background-size: cover;
}
.Container {
.AppContainer {
display: flex;
flex-direction: column;
width: 100%;
@@ -18,13 +18,13 @@
box-sizing: border-box;
}
.Header {
.AppHeader {
height: 28px;
margin-bottom: 8px;
box-sizing: border-box;
}
.Content {
.AppContent {
flex: 1;
box-sizing: border-box;
}

13
src/App.js
View File

@@ -1,9 +1,8 @@
import React from 'react';
import axios from 'axios';
import styles from './App.css';
import './App.css';
import Box from './components/UI/Box/Box';
import Configuration from './containers/Configuration/Configuration';
import CSSModules from 'react-css-modules';
import DependencyList from './components/DependencyList/DependencyList';
import DownloadProgress from './components/DownloadProgress/DownloadProgress';
import ErrorDetails from './components/ErrorDetails/ErrorDetails';
@@ -698,14 +697,14 @@ class App extends IPCContainer {
}
return (
<div styleName='App'>
<div className={'App'}>
{errorDisplay}
{dependencyDisplay}
{upgradeDisplay}
{downloadDisplay}
{configDisplay}
<div styleName='Container'>
<div styleName='Header'>
<div className={'AppContainer'}>
<div className={'AppHeader'}>
<Box>
<Grid>
<Text col={0}
@@ -725,7 +724,7 @@ class App extends IPCContainer {
</Grid>
</Box>
</div>
<div styleName='Content'>
<div className={'AppContent'}>
<Box dxStyle={{padding: '8px 8px 0px 8px'}}>
{mainContent}
</Box>
@@ -736,4 +735,4 @@ class App extends IPCContainer {
}
}
export default CSSModules(App, styles, {allowMultiple: true});
export default App;

6
src/components/ConfigurationItem/ConfigurationItem.css
View File

@@ -3,7 +3,7 @@
padding: 0;
}
input.Input {
input.ConfigurationItemInput {
display: block;
margin: 0;
padding: 2px;
@@ -16,7 +16,7 @@ input.Input {
box-sizing: border-box;
}
.Select {
.ConfigurationItemSelect {
display: block;
margin: 0;
padding: 2px;
@@ -29,7 +29,7 @@ input.Input {
box-sizing: border-box;
}
.Option {
.ConfigurationItemOption {
background: rgba(10, 10, 15, 0.8);
border-color: rgba(10, 10, 20, 0.9);
color: var(--text_color);

25
src/components/ConfigurationItem/ConfigurationItem.js
View File

@@ -1,8 +1,7 @@
import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './ConfigurationItem.css';
import './ConfigurationItem.css';
export default CSSModules((props) => {
export default props => {
const handleChanged = (e) => {
const target = e.target;
if (target.type === 'checkbox') {
@@ -23,7 +22,7 @@ export default CSSModules((props) => {
data = <input min={0.0}
onChange={e=>handleChanged(e)}
step={"0.01"}
styleName='Input'
className={'ConfigurationItemInput'}
type={'number'}
value={parseFloat(props.value).toFixed(2)}/>;
break;
@@ -31,13 +30,13 @@ export default CSSModules((props) => {
case "list":
const options = props.items.map((s, i) => {
return (
<option styleName='Option' key={i} value={s}>{s}</option>
<option className={'ConfigurationItemOption'} key={i} value={s}>{s}</option>
);
});
data = (
<select onChange={e=>handleChanged(e)}
styleName='Select'
className={'ConfigurationItemSelect'}
value={props.value}>
{options}
</select>
@@ -46,7 +45,7 @@ export default CSSModules((props) => {
case "string":
data = <input onChange={e=>handleChanged(e)}
styleName='Input'
className={'ConfigurationItemInput'}
type={'text'}
value={props.value}/>;
break;
@@ -55,7 +54,7 @@ export default CSSModules((props) => {
data = <input max={255}
min={0}
onChange={e=>handleChanged(e)}
styleName='Input'
className={'ConfigurationItemInput'}
type={'number'}
value={props.value}/>;
break;
@@ -64,7 +63,7 @@ export default CSSModules((props) => {
data = <input max={65535}
min={0}
onChange={e=>handleChanged(e)}
styleName='Input'
className={'ConfigurationItemInput'}
type={'number'}
value={props.value}/>;
break;
@@ -73,7 +72,7 @@ export default CSSModules((props) => {
data = <input max={4294967295}
min={0}
onChange={e=>handleChanged(e)}
styleName='Input'
className={'ConfigurationItemInput'}
type={'number'}
value={props.value}/>;
break;
@@ -82,7 +81,7 @@ export default CSSModules((props) => {
data = <input max={18446744073709551615}
min={0}
onChange={e=>handleChanged(e)}
styleName='Input'
className={'ConfigurationItemInput'}
type={'number'}
value={props.value}/>;
break;
@@ -92,7 +91,7 @@ export default CSSModules((props) => {
}
return (
<div styleName='ConfigurationItem'>
<div className={'ConfigurationItem'}>
<table cellPadding='2'
width='100%'>
<tbody>
@@ -104,4 +103,4 @@ export default CSSModules((props) => {
</table>
</div>
);
}, styles, {allowMultiple: true});
};

2
src/components/DependencyList/Dependency/Dependency.css
View File

@@ -4,6 +4,6 @@
width: 100%;
}
.Link {
.DependencyLink {
cursor: pointer;
}

12
src/components/DependencyList/Dependency/Dependency.js
View File

@@ -1,10 +1,9 @@
import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './Dependency.css';
import './Dependency.css';
export default CSSModules((props) => {
export default props => {
return (
<div styleName='Dependency'>
<div className={'Dependency'}>
<table width="100%">
<tbody>
<tr>
@@ -13,7 +12,7 @@ export default CSSModules((props) => {
</td>
<td>
{props.allowDownload ?
<a styleName='Link' href={void(0)} onClick={()=>{props.onDownload(props.download); return false;}}><u>Install</u></a> :
<a href={void(0)} className={'DependencyLink'} onClick={()=>{props.onDownload(props.download); return false;}}><u>Install</u></a> :
'Installing...'}
</td>
</tr>
@@ -21,5 +20,4 @@ export default CSSModules((props) => {
</table>
</div>
);
}, styles, {allowMultiple: true});
};

7
src/components/DependencyList/DependencyList.js
View File

@@ -1,10 +1,9 @@
import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './DependencyList.css';
import './DependencyList.css';
import Dependency from './Dependency/Dependency';
import Box from '../UI/Box/Box';
export default CSSModules((props) => {
export default props => {
const items = props.dependencies.map((k, i)=> {
return (
<Dependency allowDownload={props.allowDownload}
@@ -24,4 +23,4 @@ export default CSSModules((props) => {
</Box>
);
}, styles, {allowMultiple: true});
};

7
src/components/DownloadProgress/DownloadProgress.js
View File

@@ -1,9 +1,8 @@
import Box from '../UI/Box/Box';
import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './DownloadProgress.css';
import './DownloadProgress.css';
export default CSSModules((props) => {
export default props => {
return (
<Box dxStyle={{width: '380px', height: 'auto', padding: '5px'}}>
@@ -14,4 +13,4 @@ export default CSSModules((props) => {
style={{width: '100%'}}
value={props.progress}/>
</Box>);
}, styles, {allowMultiple: true});
};

4
src/components/ErrorDetails/ErrorDetails.css
View File

@@ -1,10 +1,10 @@
.Heading {
.ErrorDetailsHeading {
color: var(--text_color_error);
text-align: center;
margin-bottom: 4px;
}
.Content {
.ErrorDetailsContent {
max-height: 60vh;
overflow-y: auto;
margin-bottom: 8px;

12
src/components/ErrorDetails/ErrorDetails.js
View File

@@ -1,18 +1,16 @@
import React from 'react';
import Box from '../UI/Box/Box';
import Button from '../UI/Button/Button';
import CSSModules from 'react-css-modules';
import styles from './ErrorDetails.css';
import './ErrorDetails.css';
export default CSSModules((props) => {
export default props => {
return (
<Box dxStyle={{padding: '8px'}}>
<h1 styleName='Heading'>Application Error</h1>
<div styleName='Content'>
<h1 className={'ErrorDetailsHeading'}>Application Error</h1>
<div className={'ErrorDetailsContent'}>
<p>{props.error.toString()}</p>
</div>
<Button clicked={props.closed}>Dismiss</Button>
</Box>
);
}, styles, {allowMultiple: true});
};

2
src/components/MountItem/MountItem.css
View File

@@ -1,4 +1,4 @@
input.Input {
input.MountItemInput {
margin: 0;
padding: 3px;
border-radius: var(--border_radius);

9
src/components/MountItem/MountItem.js
View File

@@ -1,6 +1,5 @@
import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './MountItem.css';
import './MountItem.css';
import DropDown from '../UI/DropDown/DropDown';
import Button from '../UI/Button/Button';
import Loader from 'react-loader-spinner';
@@ -9,7 +8,7 @@ import Grid from '../UI/Grid/Grid';
import configureImage from '../../assets/images/configure.png';
import RootElem from '../../hoc/RootElem/RootElem';
export default CSSModules((props) => {
export default props => {
let configButton = null;
let secondRow = 6;
if (props.allowConfig) {
@@ -51,7 +50,7 @@ export default CSSModules((props) => {
maxLength={4096}
onChange={props.changed}
size={4096}
styleName={'Input'}
className={'MountItemInput'}
type={'text'}
value={props.location}/>
</RootElem>
@@ -122,4 +121,4 @@ export default CSSModules((props) => {
{autoRestartControl}
</Grid>
);
}, styles, {allowMultiple: true});
};

7
src/components/ReleaseVersionDisplay/ReleaseVersionDisplay.js
View File

@@ -1,13 +1,12 @@
import React from 'react';
import styles from './ReleaseVersionDisplay.css';
import CSSModules from 'react-css-modules';
import './ReleaseVersionDisplay.css';
import DropDown from '../UI/DropDown/DropDown';
import Grid from '../UI/Grid/Grid';
import Text from '../UI/Text/Text';
import Button from '../UI/Button/Button';
import UpgradeIcon from '../UpgradeIcon/UpgradeIcon';
export default CSSModules((props) => {
export default props => {
let optionsDisplay = [];
let key = 0;
if (props.releaseExtracting) {
@@ -97,4 +96,4 @@ export default CSSModules((props) => {
{optionsDisplay}
</Grid>
);
}, styles, {allowMultiple: true});
};

8
src/components/UI/Box/Box.css
View File

@@ -15,12 +15,12 @@
}
.Box.SlideOut {
animation: slide-out 0.5s forwards;
animation: box-slide-out 0.5s forwards;
transform: translateX(-100%);
}
.Box.SlideOutTop {
animation: slide-out-top 0.5s forwards;
animation: box-slide-out-top 0.5s forwards;
transform: translateY(-100%);
}
@@ -28,13 +28,13 @@
transition: 0.3s;
}
@keyframes slide-out {
@keyframes box-slide-out {
100% {
transform: translateX(0%);
}
}
@keyframes slide-out-top {
@keyframes box-slide-out-top {
100% {
transform: translateY(0%);
}

9
src/components/UI/Box/Box.js
View File

@@ -1,8 +1,7 @@
import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './Box.css';
import './Box.css';
export default CSSModules((props) => {
export default props => {
const styleList = [];
styleList.push('Box');
if (props.dxDark) {
@@ -20,10 +19,10 @@ export default CSSModules((props) => {
return (
<div
onClick={props.clicked}
styleName={styleList.join(' ')}
className={styleList.join(' ')}
style={{...props.dxStyle}}>
{props.children}
</div>
);
}, styles, {allowMultiple: true});
};

9
src/components/UI/Button/Button.js
View File

@@ -1,13 +1,12 @@
import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './Button.css';
import './Button.css';
export default CSSModules((props) => {
export default props => {
return (
<button disabled={props.disabled}
styleName={'Button'}
className={'Button'}
style={props.buttonStyles}
onClick={props.clicked}>{props.children}</button>
);
}, styles, {allowMultiple: true});
};

12
src/components/UI/DropDown/DropDown.css
View File

@@ -6,7 +6,7 @@
padding: 0;
}
.Select {
.DropDownSelect {
width: 100%;
height: 100%;
display: block;
@@ -19,21 +19,21 @@
box-sizing: border-box;
}
.Option {
.DropDownOption {
background: rgba(10, 10, 15, 0.8);
border-color: rgba(10, 10, 20, 0.9);
color: var(--text_color);
}
.Select:hover:enabled {
.DropDownSelect:hover:enabled {
cursor: pointer;
}
.Select:hover:disabled {
.DropDownSelect:hover:disabled {
cursor: no-drop;
}
.Select:active,
.Select.active {
.DropDownSelect:active,
.DropDownSelect.active {
cursor: pointer;
}

13
src/components/UI/DropDown/DropDown.js
View File

@@ -1,20 +1,19 @@
import React from 'react';
import styles from './DropDown.css';
import CSSModules from 'react-css-modules';
import './DropDown.css';
export default CSSModules((props) => {
export default props => {
const options = props.items.map((s, i) => {
return (
<option styleName='Option' key={i} value={i}>{s}</option>
<option className={'DropDownOption'} key={i} value={i}>{s}</option>
);
});
return (
<div styleName='DropDown'>
<select styleName='Select' disabled={props.disabled} onChange={props.changed} value={props.selected}>
<div className={'DropDown'}>
<select className={'DropDownSelect'} disabled={props.disabled} onChange={props.changed} value={props.selected}>
{options}
</select>
</div>
);
}, styles, {allowMultiple: true});
};

18
src/components/UI/Grid/Grid.js
View File

@@ -1,9 +1,8 @@
import React, {Component} from 'react';
import CSSModules from 'react-css-modules';
import styles from './Grid.css';
import './Grid.css';
import GridComponent from './GridComponent/GridComponent';
export default CSSModules(class extends Component {
export default class extends Component {
constructor(props) {
super(props);
window.addEventListener("resize", this.updateSizeAsync);
@@ -58,11 +57,11 @@ export default CSSModules(class extends Component {
});
};
componentDidMount = () => {
componentDidMount() {
this.updateSizeAsync();
};
}
componentWillUnmount = () => {
componentWillUnmount() {
window.removeEventListener("resize", this.updateSizeAsync);
clearInterval(this.checkSizeInterval);
};
@@ -121,12 +120,11 @@ export default CSSModules(class extends Component {
return (
<div
ref='GridOwner'
styleName='GridOwner'>
<div styleName='Grid' {...style}>
className={'GridOwner'}>
<div className={'Grid'} {...style}>
{children}
</div>
</div>
)
};
}, styles, {allowMultiple: true});
};

9
src/components/UI/Grid/GridComponent/GridComponent.js
View File

@@ -1,8 +1,7 @@
import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './GridComponent.css';
import './GridComponent.css';
export default CSSModules((props) => {
export default props => {
const style = {
style: {
gridRowStart: Math.floor(props.row + 1),
@@ -13,9 +12,9 @@ export default CSSModules((props) => {
};
return (
<div styleName='GridComponent' {...style}>
<div className={'GridComponent'} {...style}>
{props.children}
</div>
);
}, styles, {allowMultiple: true});
};

2
src/components/UI/Loading/Loading.css
View File

@@ -6,7 +6,7 @@
box-sizing: border-box;
}
.Content {
.LoadingContent {
margin: 0;
padding: 0;
position: relative;

11
src/components/UI/Loading/Loading.js
View File

@@ -1,17 +1,16 @@
import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './Loading.css'
import './Loading.css'
import Loader from 'react-loader-spinner';
export default CSSModules((props) => {
export default props => {
return (
<div
styleName='Loading'>
<div styleName='Content'>
className={'Loading'}>
<div className={'LoadingContent'}>
<Loader color={'var(--heading_text_color)'}
height='28px'
width='28px'
type='ThreeDots'/>
</div>
</div>);
}, styles, {allowMultiple: true});
};

4
src/components/UI/Modal/Modal.css
View File

@@ -8,7 +8,7 @@
z-index: 2000;
}
.Content {
.ModalContent {
position: fixed;
width: auto;
height: auto;
@@ -22,6 +22,6 @@
z-index: 2100;
}
.Content.Critical {
.ModalContent.Critical {
z-index: 2101;
}

17
src/components/UI/Modal/Modal.js
View File

@@ -1,23 +1,22 @@
import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './Modal.css'
import './Modal.css'
export default CSSModules((props) => {
export default props => {
let modalStyles = [];
let contentStyles = [];
modalStyles.push('Modal');
contentStyles.push('Content');
contentStyles.push('ModalContent');
if (props.critical) {
modalStyles.push('Critical');
contentStyles.push('Critical');
modalStyles.push('ModalCritical');
contentStyles.push('ModalCritical');
}
return (
<div
styleName={modalStyles.join(' ')}
className={modalStyles.join(' ')}
onClick={props.clicked}>
<div styleName={contentStyles.join(' ')}>
<div className={contentStyles.join(' ')}>
{props.children}
</div>
</div>);
}, styles, {allowMultiple: true});
};

8
src/components/UI/Text/Text.css
View File

@@ -19,21 +19,21 @@
color: var(--text_color);
}
.Heading1 {
.TextHeading1 {
font-weight: bold;
color: var(--heading_text_color);
}
.Heading2 {
.TextHeading2 {
font-weight: bold;
color: var(--heading_other_text_color);
}
.Heading3 {
.TextHeading3 {
font-weight: bold;
color: var(--heading_other_text_color);
}
.AltTextColor {
.TextAltTextColor {
color: var(--heading_other_text_color);
}

14
src/components/UI/Text/Text.js
View File

@@ -1,12 +1,11 @@
import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './Text.css';
import './Text.css';
export default CSSModules((props) => {
export default props => {
const styleList = [];
styleList.push('Text');
if (props.type) {
styleList.push(props.type);
styleList.push('Text' + props.type);
}
let style = {...props.style};
@@ -16,13 +15,12 @@ export default CSSModules((props) => {
const text = (
<div
styleName={styleList.join(' ')}
className={styleList.join(' ')}
style={style}>{props.text}
</div>);
return props.noOwner ? text : (
<div styleName={'TextOwner'}>
<div className={'TextOwner'}>
{text}
</div>);
}, styles, {allowMultiple: true});
};

2
src/components/UpgradeIcon/UpgradeIcon.css
View File

@@ -1,4 +1,4 @@
.Owner {
.UpgradeIconOwner {
padding: 0;
margin: 0;
width: 100%;

11
src/components/UpgradeIcon/UpgradeIcon.js
View File

@@ -1,10 +1,9 @@
import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './UpgradeIcon.css';
import './UpgradeIcon.css';
import availableImage from '../../assets/images/release_available.png';
import ReactTooltip from 'react-tooltip';
export default CSSModules((props) => {
export default props => {
let placement = 'left';
let toolTipText = 'UI Upgrade Available';
if (props.release) {
@@ -15,15 +14,15 @@ export default CSSModules((props) => {
return props
.available ?
(
<div styleName='Owner'>
<div className={'UpgradeIconOwner'}>
<p data-tip='' data-for={placement}>
<img alt=''
onClick={props.clicked}
src={availableImage}
styleName='UpgradeIcon'/>
className={'UpgradeIcon'}/>
</p>
<ReactTooltip id={placement} place={placement}>{toolTipText}</ReactTooltip>
</div>
)
: null;
}, styles, {allowMultiple: true});
};

7
src/components/UpgradeUI/UpgradeUI.js
View File

@@ -1,10 +1,9 @@
import Button from '../UI/Button/Button';
import Box from '../UI/Box/Box';
import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './UpgradeUI.css';
import './UpgradeUI.css';
export default CSSModules((props) => {
export default props => {
return (
<Box dxStyle={{width: '180px', height: 'auto', padding: '5px'}}>
<div style={{width: '100%', height: 'auto'}}>
@@ -25,4 +24,4 @@ export default CSSModules((props) => {
</tbody>
</table>
</Box>);
}, styles, {allowMultiple: true});
};

9
src/containers/Configuration/Configuration.js
View File

@@ -1,9 +1,8 @@
import React, {Component} from 'react';
import styles from './Configuration.css';
import React from 'react';
import './Configuration.css';
import Box from '../../components/UI/Box/Box';
import Button from '../../components/UI/Button/Button';
import ConfigurationItem from '../../components/ConfigurationItem/ConfigurationItem';
import CSSModules from 'react-css-modules';
import Modal from '../../components/UI/Modal/Modal';
import IPCContainer from '../IPCContainer/IPCContainer';
@@ -258,7 +257,7 @@ class Configuration extends IPCContainer {
}
return (
<div styleName='Configuration'>
<div className={'Configuration'}>
{confirmSave}
<Box dxDark dxStyle={{padding: '8px'}}>
<div style={{float: 'right', margin: 0, padding: 0, marginTop: '-4px', boxSizing: 'border-box', display: 'block'}}>
@@ -277,4 +276,4 @@ class Configuration extends IPCContainer {
}
}
export default CSSModules(Configuration, styles, {allowMultiple: true});
export default Configuration;

7
src/containers/MountItems/MountItems.js
View File

@@ -1,8 +1,7 @@
import React from 'react';
import Box from '../../components/UI/Box/Box';
import Button from '../../components/UI/Button/Button';
import CSSModules from 'react-css-modules';
import styles from './MountItems.css';
import './MountItems.css';
import Modal from '../../components/UI/Modal/Modal';
import MountItem from '../../components/MountItem/MountItem';
import IPCContainer from '../IPCContainer/IPCContainer';
@@ -304,11 +303,11 @@ class MountItems extends IPCContainer {
}
return (
<div styleName='MountItems'>
<div className={'MountItems'}>
{retryDisplay}
{items}
</div>);
}
}
export default CSSModules(MountItems, styles, {allowMultiple: true});
export default MountItems;

4
src/index.js
View File

@@ -2,8 +2,8 @@ import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import packageJson from '../package.json';
import registerServiceWorker from './registerServiceWorker';
const Constants = require('./constants');
@@ -17,7 +17,7 @@ if (!process.versions.hasOwnProperty('electron')) {
}
ReactDOM.render(<App platform={arg.data} version={packageJson.version}/>, document.getElementById('root'));
registerServiceWorker();
serviceWorker.unregister();
});
ipcRenderer.send(Constants.IPC_Get_Platform);
}

74
src/registerServiceWorker.js → src/serviceWorker.js
View File

@@ -1,31 +1,33 @@
// In production, we register a service worker to serve assets from local cache.
// This optional code is used to register a service worker.
// register() is not called by default.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on the "N+1" visit to a page, since previously
// cached resources are updated in the background.
// will only see deployed updates on subsequent visits to a page, after all the
// existing tabs open on the page have been closed, since previously cached
// resources are updated in the background.
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
// This link also includes instructions on opting out of this behavior.
// To learn more about the benefits of this model and instructions on how to
// opt-in, read https://bit.ly/CRA-PWA
const isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
// [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' ||
// 127.0.0.1/8 is considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
// [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' ||
// 127.0.0.1/8 is considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
);
export default function register() {
export function register(config) {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
return;
}
@@ -33,44 +35,59 @@ export default function register() {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) {
// This is running on localhost. Lets check if a service worker still exists or not.
checkValidServiceWorker(swUrl);
// This is running on localhost. Let's check if a service worker still exists or not.
checkValidServiceWorker(swUrl, config);
// Add some additional logging to localhost, pointing developers to the
// service worker/PWA documentation.
navigator.serviceWorker.ready.then(() => {
console.log(
'This web app is being served cache-first by a service ' +
'worker. To learn more, visit https://goo.gl/SC7cgQ'
'worker. To learn more, visit https://bit.ly/CRA-PWA'
);
});
} else {
// Is not local host. Just register service worker
registerValidSW(swUrl);
// Is not localhost. Just register service worker
registerValidSW(swUrl, config);
}
});
}
}
function registerValidSW(swUrl) {
function registerValidSW(swUrl, config) {
navigator.serviceWorker
.register(swUrl)
.then(registration => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
if (installingWorker == null) {
return;
}
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the old content will have been purged and
// the fresh content will have been added to the cache.
// It's the perfect time to display a "New content is
// available; please refresh." message in your web app.
console.log('New content is available; please refresh.');
// At this point, the updated precached content has been fetched,
// but the previous service worker will still serve the older
// content until all client tabs are closed.
console.log(
'New content is available and will be used when all ' +
'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
);
// Execute callback
if (config && config.onUpdate) {
config.onUpdate(registration);
}
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.');
// Execute callback
if (config && config.onSuccess) {
config.onSuccess(registration);
}
}
}
};
@@ -81,14 +98,15 @@ function registerValidSW(swUrl) {
});
}
function checkValidServiceWorker(swUrl) {
function checkValidServiceWorker(swUrl, config) {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl)
.then(response => {
// Ensure service worker exists, and that we really are getting a JS file.
const contentType = response.headers.get('content-type');
if (
response.status === 404 ||
response.headers.get('content-type').indexOf('javascript') === -1
(contentType != null && contentType.indexOf('javascript') === -1)
) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then(registration => {
@@ -98,7 +116,7 @@ function checkValidServiceWorker(swUrl) {
});
} else {
// Service worker found. Proceed as normal.
registerValidSW(swUrl);
registerValidSW(swUrl, config);
}
})
.catch(() => {