hammy
/
carbon
mirror of https://github.com/sgoudham/carbon.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

update spinner for react-codemirror2 (#470)

Browse Source
main
Michael Fix 6 years ago committed by GitHub
parent 2abef908ce
commit 86be3aae35
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 154 additions and 148 deletions
Show Stats Download Patch File Download Diff File

284
components/Carbon.js
Unescape Escape View File

@ -3,10 +3,11 @@ import * as hljs from 'highlight.js'
import ResizeObserver from 'resize-observer-polyfill'
import debounce from 'lodash.debounce'
import ms from 'ms'
import {Controlled as CodeMirror} from 'react-codemirror2'
import Spinner from 'react-spinner'
import WindowControls from '../components/WindowControls'
import Watermark from '../components/svg/Watermark'
import CodeMirror from '../lib/react-codemirror'
import { COLORS, LANGUAGE_MODE_HASH, LANGUAGE_NAME_HASH, DEFAULT_SETTINGS } from '../lib/constants'
const handleLanguageChange = (newCode, props) => {
@ -28,6 +29,7 @@ class Carbon extends PureComponent {
super(props)
this.state = {
loading: true,
language: props.config.language
}
@ -38,6 +40,7 @@ class Carbon extends PureComponent {
}
componentDidMount() {
this.setState({ loading: false })
this.setState(handleLanguageChange(this.props.children, this.props))
const ro = new ResizeObserver(entries => {
@ -87,146 +90,161 @@ class Carbon extends PureComponent {
(this.props.config.backgroundImage && this.props.config.backgroundImageSelection) ||
this.props.config.backgroundImage
const content = (
<div id="container">
{config.windowControls ? (
<WindowControls
titleBar={this.props.titleBar}
theme={config.windowTheme}
handleTitleBarChange={this.handleTitleBarChange}
/>
) : null}
<CodeMirror
className={`CodeMirror__container window-theme__${config.windowTheme}`}
onBeforeChange={this.onBeforeChange}
value={this.props.children}
options={options}
/>
{config.watermark && <Watermark />}
<div id="container-bg">
<div className="white eliminateOnRender" />
<div className="alpha eliminateOnRender" />
<div className="bg" />
</div>
let content = (
<div>
<Spinner />
<style jsx>
{`
#container {
position: relative;
min-width: ${config.widthAdjustment ? '90px' : '680px'};
max-width: 1024px;
padding: ${config.paddingVertical} ${config.paddingHorizontal};
}
#container :global(.watermark) {
fill-opacity: 0.3;
position: absolute;
z-index: 2;
bottom: calc(${config.paddingVertical} + 16px);
right: calc(${config.paddingHorizontal} + 16px);
}
#container #container-bg {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
#container .white {
background: #fff;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
#container .bg {
${this.props.config.backgroundMode === 'image'
? `background: url(${backgroundImage});
background-size: cover;
background-repeat: no-repeat;`
: `background: ${this.props.config.backgroundColor || config.backgroundColor};
background-size: auto;
background-repeat: repeat;`} position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
#container .alpha {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==);
}
#container :global(.cm-s-dracula .CodeMirror-cursor) {
border-left: solid 2px #159588;
}
#container :global(.cm-s-solarized) {
box-shadow: none;
}
#container :global(.cm-s-solarized.cm-s-light) {
text-shadow: #eee8d5 0 1px;
}
#container :global(.CodeMirror-gutters) {
background-color: unset;
border-right: none;
}
#container :global(.CodeMirror__container) {
min-width: inherit;
position: relative;
z-index: 1;
border-radius: 5px;
${config.dropShadow
? `box-shadow: 0 ${config.dropShadowOffsetY} ${
config.dropShadowBlurRadius
} rgba(0, 0, 0, 0.55)`
: ''};
}
#container :global(.CodeMirror__container .CodeMirror) {
height: auto;
min-width: inherit;
padding: 18px 18px;
${config.lineNumbers ? 'padding-left: 12px;' : ''} border-radius: 5px;
font-family: ${config.fontFamily}, monospace !important;
font-size: ${config.fontSize};
line-height: ${config.lineHeight};
font-variant-ligatures: contextual;
font-feature-settings: 'calt' 1;
user-select: none;
}
#container :global(.CodeMirror-scroll) {
overflow: hidden !important;
}
#container :global(.window-theme__sharp > .CodeMirror) {
border-radius: 0px;
}
#container :global(.window-theme__bw > .CodeMirror) {
border: 2px solid ${COLORS.SECONDARY};
}
#container :global(.window-controls + .CodeMirror__container > .CodeMirror) {
padding-top: 48px;
div {
height: 352px;
}
`}
</style>
</div>
)
if (this.state.loading === false) {
content = (
<div id="container">
{config.windowControls ? (
<WindowControls
titleBar={this.props.titleBar}
theme={config.windowTheme}
handleTitleBarChange={this.handleTitleBarChange}
/>
) : null}
<CodeMirror
className={`CodeMirror__container window-theme__${config.windowTheme}`}
onBeforeChange={this.onBeforeChange}
value={this.props.children}
options={options}
/>
{config.watermark && <Watermark />}
<div id="container-bg">
<div className="white eliminateOnRender" />
<div className="alpha eliminateOnRender" />
<div className="bg" />
</div>
<style jsx>
{`
#container {
position: relative;
min-width: ${config.widthAdjustment ? '90px' : '680px'};
max-width: 1024px;
padding: ${config.paddingVertical} ${config.paddingHorizontal};
}
#container :global(.watermark) {
fill-opacity: 0.3;
position: absolute;
z-index: 2;
bottom: calc(${config.paddingVertical} + 16px);
right: calc(${config.paddingHorizontal} + 16px);
}
#container #container-bg {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
#container .white {
background: #fff;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
#container .bg {
${this.props.config.backgroundMode === 'image'
? `background: url(${backgroundImage});
background-size: cover;
background-repeat: no-repeat;`
: `background: ${this.props.config.backgroundColor || config.backgroundColor};
background-size: auto;
background-repeat: repeat;`} position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
#container .alpha {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==);
}
#container :global(.cm-s-dracula .CodeMirror-cursor) {
border-left: solid 2px #159588;
}
#container :global(.cm-s-solarized) {
box-shadow: none;
}
#container :global(.cm-s-solarized.cm-s-light) {
text-shadow: #eee8d5 0 1px;
}
#container :global(.CodeMirror-gutters) {
background-color: unset;
border-right: none;
}
#container :global(.CodeMirror__container) {
min-width: inherit;
position: relative;
z-index: 1;
border-radius: 5px;
${config.dropShadow
? `box-shadow: 0 ${config.dropShadowOffsetY} ${
config.dropShadowBlurRadius
} rgba(0, 0, 0, 0.55)`
: ''};
}
#container :global(.CodeMirror__container .CodeMirror) {
height: auto;
min-width: inherit;
padding: 18px 18px;
${config.lineNumbers ? 'padding-left: 12px;' : ''} border-radius: 5px;
font-family: ${config.fontFamily}, monospace !important;
font-size: ${config.fontSize};
line-height: ${config.lineHeight};
font-variant-ligatures: contextual;
font-feature-settings: 'calt' 1;
user-select: none;
}
#container :global(.CodeMirror-scroll) {
overflow: hidden !important;
}
#container :global(.window-theme__sharp > .CodeMirror) {
border-radius: 0px;
}
#container :global(.window-theme__bw > .CodeMirror) {
border: 2px solid ${COLORS.SECONDARY};
}
#container :global(.window-controls + .CodeMirror__container > .CodeMirror) {
padding-top: 48px;
}
`}
</style>
</div>
)
}
return (
<div id="section">
<div id="export-container" ref={ele => (this.exportContainerNode = ele)}>

6
components/Editor.js
Unescape Escape View File

@ -4,7 +4,6 @@ import HTML5Backend from 'react-dnd-html5-backend'
import { DragDropContext } from 'react-dnd'
import domtoimage from 'dom-to-image'
import ReadFileDropContainer, { DATA_URL, TEXT } from 'dropperx'
import Spinner from 'react-spinner'
// Ours
import Button from './Button'
@ -44,7 +43,6 @@ class Editor extends React.Component {
super(props)
this.state = {
...DEFAULT_SETTINGS,
loading: true,
uploading: false,
code: props.content,
online: true
@ -72,7 +70,6 @@ class Editor extends React.Component {
this.setState({
...getState(localStorage),
...this.props.initialState,
loading: false,
online: Boolean(window && window.navigator && window.navigator.onLine)
})
@ -216,9 +213,6 @@ class Editor extends React.Component {
}
render() {
if (this.state.loading) {
return <Spinner />
}
return (
<React.Fragment>
<div id="editor">

6
lib/react-codemirror.js vendored
Unescape Escape View File

@ -1,6 +0,0 @@
// For SSR, CodeMirror will throw an error, so return a div instead
let CodeMirror = 'div'
if (typeof window !== 'undefined' && typeof window.navigator !== 'undefined') {
CodeMirror = require('react-codemirror2').Controlled
}
export default CodeMirror

2
package.json
Unescape Escape View File

@ -42,7 +42,7 @@
"puppeteer": "1.7.0",
"react": "16.3.*",
"react-click-outside": "^3.0.0",
"react-codemirror2": "^5.0.0",
"react-codemirror2": "^5.1.0",
"react-color": "^2.13.8",
"react-dnd": "^5.0.0",
"react-dnd-html5-backend": "^5.0.0",

2
static/react-spinner.css
Unescape Escape View File

@ -1 +1 @@
.react-spinner{position:relative;width:32px;height:32px;top:50%;left:50%}.react-spinner_bar{-webkit-animation:react-spinner_spin 1.2s linear infinite;-moz-animation:react-spinner_spin 1.2s linear infinite;animation:react-spinner_spin 1.2s linear infinite;border-radius:5px;background-color:#fff;position:absolute;width:20%;height:7.8%;top:-3.9%;left:-10%}@keyframes react-spinner_spin{0%{opacity:1}100%{opacity:.15}}@-moz-keyframes react-spinner_spin{0%{opacity:1}100%{opacity:.15}}@-webkit-keyframes react-spinner_spin{0%{opacity:1}100%{opacity:.15}}
.react-spinner{z-index: 999;position:relative;width:32px;height:32px;top:50%;left:50%}.react-spinner_bar{-webkit-animation:react-spinner_spin 1.2s linear infinite;-moz-animation:react-spinner_spin 1.2s linear infinite;animation:react-spinner_spin 1.2s linear infinite;border-radius:5px;background-color:#fff;position:absolute;width:20%;height:7.8%;top:-3.9%;left:-10%}@keyframes react-spinner_spin{0%{opacity:1}100%{opacity:.15}}@-moz-keyframes react-spinner_spin{0%{opacity:1}100%{opacity:.15}}@-webkit-keyframes react-spinner_spin{0%{opacity:1}100%{opacity:.15}}

2
yarn.lock
Unescape Escape View File

@ -5765,7 +5765,7 @@ react-click-outside@^3.0.0:
dependencies:
hoist-non-react-statics "^2.1.1"
react-codemirror2@^5.0.0:
react-codemirror2@^5.1.0:
version "5.1.0"
resolved "https://registry.yarnpkg.com/react-codemirror2/-/react-codemirror2-5.1.0.tgz#62de4460178adea40eb52eabf7491669bf3794b8"

Write Preview
Loading…
Cancel
Save