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

Use dynamic import components (#642)

Browse Source 
* use dynamic import components

 - react-color components
 - Watermark

* Dynamically import modes

* revert next.config.js

* update language filter
main
Michael Fix 6 years ago committed by GitHub
parent 543ef105f8
commit 80122adea6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 228 additions and 202 deletions
Show Stats Download Patch File Download Diff File

6
components/Carbon.js
Unescape Escape View File

@ -1,4 +1,5 @@
import React from 'react'
import dynamic from 'next/dynamic'
import * as hljs from 'highlight.js'
import ResizeObserver from 'resize-observer-polyfill'
import debounce from 'lodash.debounce'
@ -6,7 +7,6 @@ import ms from 'ms'
import { Controlled as CodeMirror } from 'react-codemirror2'
import WindowControls from '../components/WindowControls'
import Watermark from '../components/svg/Watermark'
import {
COLORS,
LANGUAGE_MODE_HASH,
@ -15,6 +15,10 @@ import {
DEFAULT_SETTINGS
} from '../lib/constants'
const Watermark = dynamic(() => import('../components/svg/Watermark'), {
loading: () => null
})
class Carbon extends React.PureComponent {
static defaultProps = {
onAspectRatioChange: () => {},

6
components/Editor.js
Unescape Escape View File

@ -6,11 +6,11 @@ import { DragDropContext } from 'react-dnd'
import domtoimage from 'dom-to-image'
import ReadFileDropContainer, { DATA_URL, TEXT } from 'dropperx'
import Spinner from 'react-spinner'
import dynamic from 'next/dynamic'
// Ours
import Button from './Button'
import Dropdown from './Dropdown'
import BackgroundSelect from './BackgroundSelect'
import Settings from './Settings'
import Toolbar from './Toolbar'
import Overlay from './Overlay'
@ -36,6 +36,10 @@ import LanguageIcon from './svg/Language'
const languageIcon = <LanguageIcon />
const BackgroundSelect = dynamic(() => import('./BackgroundSelect'), {
loading: () => null
})
class Editor extends React.Component {
constructor(props) {
super(props)

189
components/Themes/ThemeCreate.js
Unescape Escape View File

@ -0,0 +1,189 @@
import React from 'react'
import Input from '../Input'
import Button from '../Button'
import ListSetting from '../ListSetting'
import Popout from '../Popout'
import ColorPicker from '../ColorPicker'
import { HIGHLIGHT_KEYS, COLORS } from '../../lib/constants'
import { capitalize } from '../../lib/util'
const colorPickerStyle = {
backgroundColor: COLORS.BLACK,
padding: 0,
margin: '4px'
}
const colorPresets = []
const HighlightPicker = ({ title, onChange, color }) => (
<div className="color-picker-container">
<div className="color-picker-header">
<span>{title}</span>
</div>
<ColorPicker
color={color}
onChange={onChange}
presets={colorPresets}
style={colorPickerStyle}
/>
<style jsx>
{`
.color-picker-container {
width: 218px;
border-left: 2px solid ${COLORS.SECONDARY};
padding: 2px;
}
.color-picker-header {
background-color: ${COLORS.BLACK};
display: flex;
justify-content: center;
align-items: center;
padding: 8px 0;
}
`}
</style>
</div>
)
const ThemeCreate = ({
theme,
themes,
highlights,
name,
preset,
selected,
createTheme,
applyPreset,
updateName,
selectHighlight,
updateHighlight
}) => (
<Popout pointerLeft="15px" style={{ display: 'flex' }}>
<div className="theme-settings">
<div className="field name-field">
<span>Name</span>
<Input
title="name"
name="name"
placeholder="Custom Theme"
value={name}
onChange={updateName}
maxLength="32"
/>
</div>
<div className="theme-select">
<ListSetting
title="Preset"
items={themes}
selected={preset || theme}
onOpen={selectHighlight(null)}
onChange={applyPreset}
>
{({ name }) => <span>{name}</span>}
</ListSetting>
</div>
<div className="theme-colors">
{HIGHLIGHT_KEYS.map(key => (
<div className="field" key={key}>
<Button
padding="4px 4px 4px 8px"
onClick={selectHighlight(key)}
background={selected === key ? COLORS.HOVER : COLORS.BLACK}
>
<div className="row">
<span>{capitalize(key)}</span>
<span
className="color-square"
style={{
backgroundColor: highlights[key],
boxShadow: `inset 0px 0px 0px ${selected === key ? 2 : 1}px ${COLORS.SECONDARY}`
}}
/>
</div>
</Button>
</div>
))}
</div>
<Button
center
disabled={!name}
className="create-button"
padding="8px 0"
background={COLORS.SECONDARY}
hoverBackground={COLORS.SECONDARY}
color={COLORS.BLACK}
onClick={createTheme}
>
Create +
</Button>
</div>
{selected && (
<HighlightPicker
title={capitalize(selected)}
color={highlights[selected]}
onChange={updateHighlight}
/>
)}
<style jsx>
{`
.field {
align-items: center;
border-bottom: solid 1px ${COLORS.SECONDARY};
display: flex;
height: 35px;
justify-content: space-between;
position: relative;
}
.field:nth-last-child(-n + 2) {
border-width: 2px;
}
.row {
display: flex;
flex: 1;
align-items: center;
justify-content: space-between;
}
.name-field {
padding: 8px;
}
.theme-select {
width: 100%;
}
.theme-settings {
display: flex;
flex-direction: column;
width: 224px;
}
.theme-colors {
display: flex;
flex-wrap: wrap;
border-top: 2px solid ${COLORS.SECONDARY};
text-transform: capitalize;
}
.theme-colors .field {
width: 50%;
}
.theme-colors .field:nth-child(odd) {
border-right: 1px solid ${COLORS.SECONDARY};
}
.color-square {
border-radius: 3px;
padding: 12px;
}
`}
</style>
</Popout>
)
export default ThemeCreate

196
components/Themes.js → components/Themes/index.js
Unescape Escape View File

@ -1,192 +1,16 @@
import React from 'react'
import dynamic from 'next/dynamic'
import Dropdown from './Dropdown'
import Input from './Input'
import Button from './Button'
import ListSetting from './ListSetting'
import Popout, { managePopout } from './Popout'
import ColorPicker from './ColorPicker'
import ThemeIcon from './svg/Theme'
import RemoveIcon from './svg/Remove'
import { THEMES, HIGHLIGHT_KEYS, COLORS, DEFAULT_THEME } from '../lib/constants'
import { getThemes, saveThemes, capitalize, stringifyRGBA, generateId } from '../lib/util'
const colorPickerStyle = {
backgroundColor: COLORS.BLACK,
padding: 0,
margin: '4px'
}
const colorPresets = []
const HighlightPicker = ({ title, onChange, color }) => (
<div className="color-picker-container">
<div className="color-picker-header">
<span>{title}</span>
</div>
<ColorPicker
color={color}
onChange={onChange}
presets={colorPresets}
style={colorPickerStyle}
/>
<style jsx>
{`
.color-picker-container {
width: 218px;
border-left: 2px solid ${COLORS.SECONDARY};
padding: 2px;
}
.color-picker-header {
background-color: ${COLORS.BLACK};
display: flex;
justify-content: center;
align-items: center;
padding: 8px 0;
}
`}
</style>
</div>
)
import Dropdown from '../Dropdown'
import { managePopout } from '../Popout'
import ThemeIcon from '../svg/Theme'
import RemoveIcon from '../svg/Remove'
import { THEMES, COLORS, DEFAULT_THEME } from '../../lib/constants'
import { getThemes, saveThemes, stringifyRGBA, generateId } from '../../lib/util'
const ThemeCreate = ({
theme,
themes,
highlights,
name,
preset,
selected,
createTheme,
applyPreset,
updateName,
selectHighlight,
updateHighlight
}) => (
<Popout pointerLeft="15px" style={{ display: 'flex' }}>
<div className="theme-settings">
<div className="field name-field">
<span>Name</span>
<Input
title="name"
name="name"
placeholder="Custom Theme"
value={name}
onChange={updateName}
maxLength="32"
/>
</div>
<div className="theme-select">
<ListSetting
title="Preset"
items={themes}
selected={preset || theme}
onOpen={selectHighlight(null)}
onChange={applyPreset}
>
{({ name }) => <span>{name}</span>}
</ListSetting>
</div>
<div className="theme-colors">
{HIGHLIGHT_KEYS.map(key => (
<div className="field" key={key}>
<Button
padding="4px 4px 4px 8px"
onClick={selectHighlight(key)}
background={selected === key ? COLORS.HOVER : COLORS.BLACK}
>
<div className="row">
<span>{capitalize(key)}</span>
<span
className="color-square"
style={{
backgroundColor: highlights[key],
boxShadow: `inset 0px 0px 0px ${selected === key ? 2 : 1}px ${COLORS.SECONDARY}`
}}
/>
</div>
</Button>
</div>
))}
</div>
<Button
center
disabled={!name}
className="create-button"
padding="8px 0"
background={COLORS.SECONDARY}
hoverBackground={COLORS.SECONDARY}
color={COLORS.BLACK}
onClick={createTheme}
>
Create +
</Button>
</div>
{selected && (
<HighlightPicker
title={capitalize(selected)}
color={highlights[selected]}
onChange={updateHighlight}
/>
)}
<style jsx>
{`
.field {
align-items: center;
border-bottom: solid 1px ${COLORS.SECONDARY};
display: flex;
height: 35px;
justify-content: space-between;
position: relative;
}
.field:nth-last-child(-n + 2) {
border-width: 2px;
}
.row {
display: flex;
flex: 1;
align-items: center;
justify-content: space-between;
}
.name-field {
padding: 8px;
}
.theme-select {
width: 100%;
}
.theme-settings {
display: flex;
flex-direction: column;
width: 224px;
}
.theme-colors {
display: flex;
flex-wrap: wrap;
border-top: 2px solid ${COLORS.SECONDARY};
text-transform: capitalize;
}
.theme-colors .field {
width: 50%;
}
.theme-colors .field:nth-child(odd) {
border-right: 1px solid ${COLORS.SECONDARY};
}
.color-square {
border-radius: 3px;
padding: 12px;
}
`}
</style>
</Popout>
)
const ThemeCreate = dynamic(() => import('./ThemeCreate'), {
loading: () => null
})
const ThemeItem = ({ children, item, isSelected, onClick }) => (
<div className="theme-item">

14
lib/constants.js
Unescape Escape View File

@ -908,18 +908,8 @@ const unfold = (f, seed) => {
}`
if (typeof window !== 'undefined' && typeof window.navigator !== 'undefined') {
const alreadyLoaded = new Set()
LANGUAGES.filter(language => language.mode !== 'auto' && language.mode !== 'text').forEach(
language => {
if (language.mode && !alreadyLoaded.has(language.mode)) {
alreadyLoaded.add(language.mode)
language.custom
? require(`./custom/modes/${language.mode}`)
: require(`codemirror/mode/${language.mode}/${language.mode}`)
}
}
)
require(`codemirror/mode/javascript/javascript`)
import('./modes')
}
export const DEFAULT_SETTINGS = {

15
lib/modes.js
Unescape Escape View File

@ -0,0 +1,15 @@
import { LANGUAGES } from './constants'
const modes = LANGUAGES.filter(
language =>
language.mode &&
language.mode !== 'auto' &&
language.mode !== 'text' &&
language.mode !== 'javascript'
).forEach(language =>
language.custom
? require(`./custom/modes/${language.mode}`)
: require(`codemirror/mode/${language.mode}/${language.mode}`)
)
export default modes
Write Preview
Loading…
Cancel
Save