mirror of https://github.com/sgoudham/carbon.git
Merge remote-tracking branch 'origin/master' into HEAD
Jake Dexheimer
7 years ago
commit
c90099f72a
@ -1,145 +1,171 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import enhanceWithClickOutside from 'react-click-outside'
|
import Downshift from 'downshift'
|
||||||
import ArrowDown from './svg/Arrowdown'
|
import ArrowDown from './svg/Arrowdown'
|
||||||
import Checkmark from './svg/Checkmark'
|
import CheckMark from './svg/Checkmark'
|
||||||
import { COLORS } from '../lib/constants'
|
import { COLORS } from '../lib/constants'
|
||||||
|
|
||||||
class Dropdown extends React.Component {
|
const Dropdown = ({ button, color, list, selected, onChange }) => {
|
||||||
constructor(props) {
|
return (
|
||||||
super(props)
|
<Downshift
|
||||||
this.state = {
|
render={renderDropdown({ button, color, list, selected })}
|
||||||
isVisible: false
|
selectedItem={selected}
|
||||||
}
|
defaultHighlightedIndex={list.findIndex(it => it === selected)}
|
||||||
this.select = this.select.bind(this)
|
itemToString={item => item.name}
|
||||||
this.toggle = this.toggle.bind(this)
|
onChange={onChange}
|
||||||
|
stateReducer={reduceState(list)}
|
||||||
|
/>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
select(item) {
|
const reduceState = list => (state, changes) => {
|
||||||
if (this.props.selected !== item) {
|
switch (changes.type) {
|
||||||
this.props.onChange(item)
|
case Downshift.stateChangeTypes.keyDownArrowUp:
|
||||||
|
case Downshift.stateChangeTypes.keyDownArrowDown:
|
||||||
|
return { ...changes, selectedItem: list[changes.highlightedIndex] }
|
||||||
|
default:
|
||||||
|
return changes
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
toggle() {
|
const renderDropdown = ({ button, color, list, selected }) => ({
|
||||||
this.setState({ isVisible: !this.state.isVisible })
|
isOpen,
|
||||||
}
|
highlightedIndex,
|
||||||
|
setHighlightedIndex,
|
||||||
handleClickOutside() {
|
selectHighlightedItem,
|
||||||
this.setState({ isVisible: false })
|
selectedItem,
|
||||||
|
getRootProps,
|
||||||
|
getButtonProps,
|
||||||
|
getInputProps,
|
||||||
|
getItemProps
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<DropdownContainer
|
||||||
|
{...getRootProps({ refKey: 'innerRef' })}
|
||||||
|
minWidth={minWidth(button, selected, list)}
|
||||||
|
>
|
||||||
|
<SelectedItem {...getButtonProps()} {...getInputProps()} isOpen={isOpen} color={color}>
|
||||||
|
{selectedItem.name}
|
||||||
|
</SelectedItem>
|
||||||
|
{isOpen ? (
|
||||||
|
<ListItems color={color}>
|
||||||
|
{list.map((item, index) => (
|
||||||
|
<ListItem
|
||||||
|
key={index}
|
||||||
|
color={color}
|
||||||
|
{...getItemProps({
|
||||||
|
item,
|
||||||
|
isSelected: selectedItem === item,
|
||||||
|
isHighlighted: highlightedIndex === index
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
{item.name}
|
||||||
|
</ListItem>
|
||||||
|
))}
|
||||||
|
</ListItems>
|
||||||
|
) : null}
|
||||||
|
</DropdownContainer>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
renderListItems() {
|
const DropdownContainer = ({ children, innerRef, minWidth, ...rest }) => {
|
||||||
return this.props.list.map((item, i) => (
|
return (
|
||||||
<div className="dropdown-list-item" key={i} onClick={this.select.bind(null, item)}>
|
<div {...rest} ref={innerRef} className="dropdown-container">
|
||||||
<span>{item.name}</span>
|
{children}
|
||||||
{this.props.selected === item ? <Checkmark /> : null}
|
|
||||||
<style jsx>{`
|
<style jsx>{`
|
||||||
.dropdown-list-item {
|
.dropdown-container {
|
||||||
display: flex;
|
min-width: ${minWidth}px;
|
||||||
align-items: center;
|
cursor: pointer;
|
||||||
justify-content: space-between;
|
|
||||||
background: ${COLORS.BLACK};
|
|
||||||
user-select: none;
|
|
||||||
padding: 8px 16px;
|
|
||||||
border-bottom: 1px solid ${this.props.color || COLORS.SECONDARY};
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-list-item span {
|
|
||||||
color: ${this.props.color || '#fff'};
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-list-item:hover {
|
|
||||||
background: ${COLORS.HOVER};
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-list-item:last-of-type {
|
|
||||||
border-bottom: none;
|
|
||||||
border-radius: 0px 0px 2px 2px;
|
|
||||||
}
|
}
|
||||||
`}</style>
|
`}</style>
|
||||||
</div>
|
</div>
|
||||||
))
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
const SelectedItem = ({ children, isOpen, color, ...rest }) => {
|
||||||
const color = this.props.color || COLORS.SECONDARY
|
const itemColor = color || COLORS.SECONDARY
|
||||||
|
|
||||||
// find longest list value in number of characters
|
|
||||||
const list = this.props.button ? [...this.props.list, this.props.selected] : this.props.list
|
|
||||||
const MIN_WIDTH = list.reduce(
|
|
||||||
(max, { name }) => (name && name.length > max ? name.length : max),
|
|
||||||
0
|
|
||||||
)
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<span {...rest} tabIndex="0" className="dropdown-display">
|
||||||
className="dropdown-container"
|
<span className="dropdown-display-text">{children}</span>
|
||||||
style={{ minWidth: MIN_WIDTH * 10 + 32 }}
|
<div className={`dropdown-arrow ${isOpen ? 'is-reverse' : ''}`}>
|
||||||
onClick={this.toggle}
|
<ArrowDown fill={itemColor} />
|
||||||
>
|
|
||||||
<div className={`dropdown-display ${this.state.isVisible ? 'is-visible' : ''}`}>
|
|
||||||
<span style={{ minWidth: '4rem' }}>{this.props.selected.name}</span>
|
|
||||||
<div className="arrow-down">
|
|
||||||
<ArrowDown fill={color} />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="dropdown-list">{this.renderListItems()}</div>
|
|
||||||
<style jsx>{`
|
<style jsx>{`
|
||||||
.arrow-down {
|
|
||||||
position: absolute;
|
|
||||||
right: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.is-visible > .arrow-down {
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.is-visible {
|
|
||||||
border-radius: 3px 3px 0px 0px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-container {
|
|
||||||
height: 100%;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-display {
|
.dropdown-display {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border: 1px solid ${color};
|
border: 1px solid ${itemColor};
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
user-select: none;
|
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
display: flex;
|
outline: none;
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-display span {
|
|
||||||
color: ${color};
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-display:hover {
|
.dropdown-display:hover {
|
||||||
background: ${COLORS.HOVER};
|
background: ${COLORS.HOVER};
|
||||||
}
|
}
|
||||||
|
.dropdown-display-text {
|
||||||
.is-visible + .dropdown-list {
|
flex-grow: 1;
|
||||||
display: block;
|
color: ${itemColor};
|
||||||
|
}
|
||||||
|
.dropdown-arrow.is-reverse {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
|
</span>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const ListItems = ({ children, color }) => {
|
||||||
|
return (
|
||||||
|
<ul className="dropdown-list">
|
||||||
|
{children}
|
||||||
|
<style jsx>{`
|
||||||
.dropdown-list {
|
.dropdown-list {
|
||||||
display: none;
|
|
||||||
margin-top: -1px;
|
margin-top: -1px;
|
||||||
border: 1px solid ${color};
|
border: 1px solid ${color || COLORS.SECONDARY};
|
||||||
border-radius: 0px 0px 3px 3px;
|
border-radius: 0 0 3px 3px;
|
||||||
max-height: 350px;
|
max-height: 350px;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
}
|
}
|
||||||
`}</style>
|
`}</style>
|
||||||
</div>
|
</ul>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const ListItem = ({ children, color, isHighlighted, isSelected, ...rest }) => {
|
||||||
|
const itemColor = color || COLORS.SECONDARY
|
||||||
|
|
||||||
|
return (
|
||||||
|
<li {...rest} className="dropdown-list-item">
|
||||||
|
<span className="dropdown-list-item-text">{children}</span>
|
||||||
|
{isSelected ? <CheckMark /> : null}
|
||||||
|
<style jsx>{`
|
||||||
|
.dropdown-list-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background: ${isHighlighted ? COLORS.HOVER : COLORS.BLACK};
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-bottom: 1px solid ${itemColor};
|
||||||
|
}
|
||||||
|
.dropdown-list-item:hover {
|
||||||
|
background: ${COLORS.HOVER};
|
||||||
|
}
|
||||||
|
.dropdown-list-item-text {
|
||||||
|
flex-grow: 1;
|
||||||
|
color: ${itemColor};
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
|
</li>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function minWidth(isButton, selected, list) {
|
||||||
|
const items = isButton ? [...list, selected] : list
|
||||||
|
|
||||||
|
return items.reduce((max, { name }) => {
|
||||||
|
const wordSize = name.length * 10 + 32
|
||||||
|
return wordSize > max ? wordSize : max
|
||||||
|
}, 0)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default enhanceWithClickOutside(Dropdown)
|
export default Dropdown
|
||||||
|
|||||||
@ -0,0 +1,88 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { COLORS } from '../lib/constants'
|
||||||
|
import Checkmark from './svg/Checkmark'
|
||||||
|
import { EXPORT_SIZES } from '../lib/constants'
|
||||||
|
|
||||||
|
export default class extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super()
|
||||||
|
this.state = { isVisible: false }
|
||||||
|
this.select = this.select.bind(this)
|
||||||
|
this.toggle = this.toggle.bind(this)
|
||||||
|
}
|
||||||
|
|
||||||
|
select(exportSize) {
|
||||||
|
if (this.props.selected !== exportSize) {
|
||||||
|
this.props.onChange(exportSize)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
toggle() {
|
||||||
|
this.setState({ isVisible: !this.state.isVisible })
|
||||||
|
}
|
||||||
|
|
||||||
|
renderExportSizes() {
|
||||||
|
return EXPORT_SIZES.map((exportSize, i) => {
|
||||||
|
return (
|
||||||
|
<div className="list-item" key={i} onClick={this.select.bind(null, exportSize.id)}>
|
||||||
|
<span style={{ ExportSize: exportSize.id }}>{exportSize.name}</span>
|
||||||
|
{this.props.selected === exportSize.id ? <Checkmark /> : null}
|
||||||
|
<style jsx>{`
|
||||||
|
.list-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-bottom: 1px solid ${COLORS.SECONDARY};
|
||||||
|
background: rgba(255, 255, 255, 0.165);
|
||||||
|
}
|
||||||
|
.list-item:first-of-type {
|
||||||
|
border-top: 1px solid ${COLORS.SECONDARY};
|
||||||
|
}
|
||||||
|
.list-item:last-of-type {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const selectedExportSize =
|
||||||
|
EXPORT_SIZES.filter(exportSize => exportSize.id === this.props.selected)[0] || {}
|
||||||
|
return (
|
||||||
|
<div className="export-size-select-container">
|
||||||
|
<div
|
||||||
|
onClick={this.toggle}
|
||||||
|
className={`display ${this.state.isVisible ? 'is-visible' : ''}`}
|
||||||
|
>
|
||||||
|
<span className="label">Export Size</span>
|
||||||
|
<span style={{ exportSize: selectedExportSize.id }}>{selectedExportSize.name}</span>
|
||||||
|
</div>
|
||||||
|
<div className="list">{this.renderExportSizes()}</div>
|
||||||
|
<style jsx>{`
|
||||||
|
.display {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
.list {
|
||||||
|
display: none;
|
||||||
|
margin-top: -1px;
|
||||||
|
max-height: 80px;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
.is-visible + .list {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
/* eslint-env mocha */
|
||||||
|
/* global cy */
|
||||||
|
import { editorVisible } from '../support'
|
||||||
|
describe('Gist', () => {
|
||||||
|
const themeDropdown = () => cy.get('#toolbar .dropdown-container').first()
|
||||||
|
|
||||||
|
it('Should pull text from the first Gist file', () => {
|
||||||
|
cy.visit('/3208813b324d82a9ebd197e4b1c3bae8')
|
||||||
|
editorVisible()
|
||||||
|
|
||||||
|
cy.contains('Y-Combinator implemented in JavaScript')
|
||||||
|
})
|
||||||
|
})
|
||||||
@ -0,0 +1,600 @@
|
|||||||
|
const colors = new Set([
|
||||||
|
'indian red',
|
||||||
|
'crimson',
|
||||||
|
'lightpink',
|
||||||
|
'lightpink 1',
|
||||||
|
'lightpink 2',
|
||||||
|
'lightpink 3',
|
||||||
|
'lightpink 4',
|
||||||
|
'pink',
|
||||||
|
'pink 1',
|
||||||
|
'pink 2',
|
||||||
|
'pink 3',
|
||||||
|
'pink 4',
|
||||||
|
'palevioletred',
|
||||||
|
'palevioletred 1',
|
||||||
|
'palevioletred 2',
|
||||||
|
'palevioletred 3',
|
||||||
|
'palevioletred 4',
|
||||||
|
'lavenderblush 1',
|
||||||
|
'lavenderblush',
|
||||||
|
'lavenderblush 2',
|
||||||
|
'lavenderblush 3',
|
||||||
|
'lavenderblush 4',
|
||||||
|
'violetred 1',
|
||||||
|
'violetred 2',
|
||||||
|
'violetred 3',
|
||||||
|
'violetred 4',
|
||||||
|
'hotpink',
|
||||||
|
'hotpink 1',
|
||||||
|
'hotpink 2',
|
||||||
|
'hotpink 3',
|
||||||
|
'hotpink 4',
|
||||||
|
'raspberry',
|
||||||
|
'deeppink 1',
|
||||||
|
'deeppink',
|
||||||
|
'deeppink 2',
|
||||||
|
'deeppink 3',
|
||||||
|
'deeppink 4',
|
||||||
|
'maroon 1',
|
||||||
|
'maroon 2',
|
||||||
|
'maroon 3',
|
||||||
|
'maroon 4',
|
||||||
|
'mediumvioletred',
|
||||||
|
'violetred',
|
||||||
|
'orchid',
|
||||||
|
'orchid 1',
|
||||||
|
'orchid 2',
|
||||||
|
'orchid 3',
|
||||||
|
'orchid 4',
|
||||||
|
'thistle',
|
||||||
|
'thistle 1',
|
||||||
|
'thistle 2',
|
||||||
|
'thistle 3',
|
||||||
|
'thistle 4',
|
||||||
|
'plum 1',
|
||||||
|
'plum 2',
|
||||||
|
'plum 3',
|
||||||
|
'plum 4',
|
||||||
|
'plum',
|
||||||
|
'violet',
|
||||||
|
'magenta',
|
||||||
|
'fuchsia',
|
||||||
|
'magenta 2',
|
||||||
|
'magenta 3',
|
||||||
|
'magenta 4',
|
||||||
|
'darkmagenta',
|
||||||
|
'purple',
|
||||||
|
'mediumorchid',
|
||||||
|
'mediumorchid 1',
|
||||||
|
'mediumorchid 2',
|
||||||
|
'mediumorchid 3',
|
||||||
|
'mediumorchid 4',
|
||||||
|
'darkviolet',
|
||||||
|
'darkorchid',
|
||||||
|
'darkorchid 1',
|
||||||
|
'darkorchid 2',
|
||||||
|
'darkorchid 3',
|
||||||
|
'darkorchid 4',
|
||||||
|
'indigo',
|
||||||
|
'blueviolet',
|
||||||
|
'purple 1',
|
||||||
|
'purple 2',
|
||||||
|
'purple 3',
|
||||||
|
'purple 4',
|
||||||
|
'mediumpurple',
|
||||||
|
'mediumpurple 1',
|
||||||
|
'mediumpurple 2',
|
||||||
|
'mediumpurple 3',
|
||||||
|
'mediumpurple 4',
|
||||||
|
'darkslateblue',
|
||||||
|
'lightslateblue',
|
||||||
|
'mediumslateblue',
|
||||||
|
'slateblue',
|
||||||
|
'slateblue 1',
|
||||||
|
'slateblue 2',
|
||||||
|
'slateblue 3',
|
||||||
|
'slateblue 4',
|
||||||
|
'ghostwhite',
|
||||||
|
'lavender',
|
||||||
|
'blue',
|
||||||
|
'blue 2',
|
||||||
|
'blue 3',
|
||||||
|
'mediumblue',
|
||||||
|
'blue 4',
|
||||||
|
'darkblue',
|
||||||
|
'navy',
|
||||||
|
'midnightblue',
|
||||||
|
'cobalt',
|
||||||
|
'royalblue',
|
||||||
|
'royalblue 1',
|
||||||
|
'royalblue 2',
|
||||||
|
'royalblue 3',
|
||||||
|
'royalblue 4',
|
||||||
|
'cornflowerblue',
|
||||||
|
'lightsteelblue',
|
||||||
|
'lightsteelblue 1',
|
||||||
|
'lightsteelblue 2',
|
||||||
|
'lightsteelblue 3',
|
||||||
|
'lightsteelblue 4',
|
||||||
|
'lightslategray',
|
||||||
|
'slategray',
|
||||||
|
'slategray 1',
|
||||||
|
'slategray 2',
|
||||||
|
'slategray 3',
|
||||||
|
'slategray 4',
|
||||||
|
'dodgerblue 1',
|
||||||
|
'dodgerblue',
|
||||||
|
'dodgerblue 2',
|
||||||
|
'dodgerblue 3',
|
||||||
|
'dodgerblue 4',
|
||||||
|
'aliceblue',
|
||||||
|
'steelblue',
|
||||||
|
'steelblue 1',
|
||||||
|
'steelblue 2',
|
||||||
|
'steelblue 3',
|
||||||
|
'steelblue 4',
|
||||||
|
'lightskyblue',
|
||||||
|
'lightskyblue 1',
|
||||||
|
'lightskyblue 2',
|
||||||
|
'lightskyblue 3',
|
||||||
|
'lightskyblue 4',
|
||||||
|
'skyblue 1',
|
||||||
|
'skyblue 2',
|
||||||
|
'skyblue 3',
|
||||||
|
'skyblue 4',
|
||||||
|
'skyblue',
|
||||||
|
'deepskyblue 1',
|
||||||
|
'deepskyblue',
|
||||||
|
'deepskyblue 2',
|
||||||
|
'deepskyblue 3',
|
||||||
|
'deepskyblue 4',
|
||||||
|
'peacock',
|
||||||
|
'lightblue',
|
||||||
|
'lightblue 1',
|
||||||
|
'lightblue 2',
|
||||||
|
'lightblue 3',
|
||||||
|
'lightblue 4',
|
||||||
|
'powderblue',
|
||||||
|
'cadetblue 1',
|
||||||
|
'cadetblue 2',
|
||||||
|
'cadetblue 3',
|
||||||
|
'cadetblue 4',
|
||||||
|
'turquoise 1',
|
||||||
|
'turquoise 2',
|
||||||
|
'turquoise 3',
|
||||||
|
'turquoise 4',
|
||||||
|
'cadetblue',
|
||||||
|
'darkturquoise',
|
||||||
|
'azure 1',
|
||||||
|
'azure',
|
||||||
|
'azure 2',
|
||||||
|
'azure 3',
|
||||||
|
'azure 4',
|
||||||
|
'lightcyan 1',
|
||||||
|
'lightcyan',
|
||||||
|
'lightcyan 2',
|
||||||
|
'lightcyan 3',
|
||||||
|
'lightcyan 4',
|
||||||
|
'paleturquoise 1',
|
||||||
|
'paleturquoise 2',
|
||||||
|
'paleturquoise',
|
||||||
|
'paleturquoise 3',
|
||||||
|
'paleturquoise 4',
|
||||||
|
'darkslategray',
|
||||||
|
'darkslategray 1',
|
||||||
|
'darkslategray 2',
|
||||||
|
'darkslategray 3',
|
||||||
|
'darkslategray 4',
|
||||||
|
'cyan',
|
||||||
|
'aqua',
|
||||||
|
'cyan 2',
|
||||||
|
'cyan 3',
|
||||||
|
'cyan 4',
|
||||||
|
'darkcyan',
|
||||||
|
'teal',
|
||||||
|
'mediumturquoise',
|
||||||
|
'lightseagreen',
|
||||||
|
'manganeseblue',
|
||||||
|
'turquoise',
|
||||||
|
'coldgrey',
|
||||||
|
'turquoiseblue',
|
||||||
|
'aquamarine 1',
|
||||||
|
'aquamarine',
|
||||||
|
'aquamarine 2',
|
||||||
|
'aquamarine 3',
|
||||||
|
'mediumaquamarine',
|
||||||
|
'aquamarine 4',
|
||||||
|
'mediumspringgreen',
|
||||||
|
'mintcream',
|
||||||
|
'springgreen',
|
||||||
|
'springgreen 1',
|
||||||
|
'springgreen 2',
|
||||||
|
'springgreen 3',
|
||||||
|
'mediumseagreen',
|
||||||
|
'seagreen 1',
|
||||||
|
'seagreen 2',
|
||||||
|
'seagreen 3',
|
||||||
|
'seagreen 4',
|
||||||
|
'seagreen',
|
||||||
|
'emeraldgreen',
|
||||||
|
'mint',
|
||||||
|
'cobaltgreen',
|
||||||
|
'honeydew 1',
|
||||||
|
'honeydew',
|
||||||
|
'honeydew 2',
|
||||||
|
'honeydew 3',
|
||||||
|
'honeydew 4',
|
||||||
|
'darkseagreen',
|
||||||
|
'darkseagreen 1',
|
||||||
|
'darkseagreen 2',
|
||||||
|
'darkseagreen 3',
|
||||||
|
'darkseagreen 4',
|
||||||
|
'palegreen',
|
||||||
|
'palegreen 1',
|
||||||
|
'palegreen 2',
|
||||||
|
'lightgreen',
|
||||||
|
'palegreen 3',
|
||||||
|
'palegreen 4',
|
||||||
|
'limegreen',
|
||||||
|
'forestgreen',
|
||||||
|
'green 1',
|
||||||
|
'lime',
|
||||||
|
'green 2',
|
||||||
|
'green 3',
|
||||||
|
'green 4',
|
||||||
|
'green',
|
||||||
|
'darkgreen',
|
||||||
|
'sapgreen',
|
||||||
|
'lawngreen',
|
||||||
|
'chartreuse 1',
|
||||||
|
'chartreuse',
|
||||||
|
'chartreuse 2',
|
||||||
|
'chartreuse 3',
|
||||||
|
'chartreuse 4',
|
||||||
|
'greenyellow',
|
||||||
|
'darkolivegreen 1',
|
||||||
|
'darkolivegreen 2',
|
||||||
|
'darkolivegreen 3',
|
||||||
|
'darkolivegreen 4',
|
||||||
|
'darkolivegreen',
|
||||||
|
'olivedrab',
|
||||||
|
'olivedrab 1',
|
||||||
|
'olivedrab 2',
|
||||||
|
'olivedrab 3',
|
||||||
|
'yellowgreen',
|
||||||
|
'olivedrab 4',
|
||||||
|
'ivory 1',
|
||||||
|
'ivory',
|
||||||
|
'ivory 2',
|
||||||
|
'ivory 3',
|
||||||
|
'ivory 4',
|
||||||
|
'beige',
|
||||||
|
'lightyellow 1',
|
||||||
|
'lightyellow',
|
||||||
|
'lightyellow 2',
|
||||||
|
'lightyellow 3',
|
||||||
|
'lightyellow 4',
|
||||||
|
'lightgoldenrodyellow',
|
||||||
|
'yellow 1',
|
||||||
|
'yellow',
|
||||||
|
'yellow 2',
|
||||||
|
'yellow 3',
|
||||||
|
'yellow 4',
|
||||||
|
'warmgrey',
|
||||||
|
'olive',
|
||||||
|
'darkkhaki',
|
||||||
|
'khaki 1',
|
||||||
|
'khaki 2',
|
||||||
|
'khaki 3',
|
||||||
|
'khaki 4',
|
||||||
|
'khaki',
|
||||||
|
'palegoldenrod',
|
||||||
|
'lemonchiffon 1',
|
||||||
|
'lemonchiffon',
|
||||||
|
'lemonchiffon 2',
|
||||||
|
'lemonchiffon 3',
|
||||||
|
'lemonchiffon 4',
|
||||||
|
'lightgoldenrod 1',
|
||||||
|
'lightgoldenrod 2',
|
||||||
|
'lightgoldenrod 3',
|
||||||
|
'lightgoldenrod 4',
|
||||||
|
'banana',
|
||||||
|
'gold 1',
|
||||||
|
'gold',
|
||||||
|
'gold 2',
|
||||||
|
'gold 3',
|
||||||
|
'gold 4',
|
||||||
|
'cornsilk 1',
|
||||||
|
'cornsilk',
|
||||||
|
'cornsilk 2',
|
||||||
|
'cornsilk 3',
|
||||||
|
'cornsilk 4',
|
||||||
|
'goldenrod',
|
||||||
|
'goldenrod 1',
|
||||||
|
'goldenrod 2',
|
||||||
|
'goldenrod 3',
|
||||||
|
'goldenrod 4',
|
||||||
|
'darkgoldenrod',
|
||||||
|
'darkgoldenrod 1',
|
||||||
|
'darkgoldenrod 2',
|
||||||
|
'darkgoldenrod 3',
|
||||||
|
'darkgoldenrod 4',
|
||||||
|
'orange 1',
|
||||||
|
'orange',
|
||||||
|
'orange 2',
|
||||||
|
'orange 3',
|
||||||
|
'orange 4',
|
||||||
|
'floralwhite',
|
||||||
|
'oldlace',
|
||||||
|
'wheat',
|
||||||
|
'wheat 1',
|
||||||
|
'wheat 2',
|
||||||
|
'wheat 3',
|
||||||
|
'wheat 4',
|
||||||
|
'moccasin',
|
||||||
|
'papayawhip',
|
||||||
|
'blanchedalmond',
|
||||||
|
'navajowhite 1',
|
||||||
|
'navajowhite',
|
||||||
|
'navajowhite 2',
|
||||||
|
'navajowhite 3',
|
||||||
|
'navajowhite 4',
|
||||||
|
'eggshell',
|
||||||
|
'tan',
|
||||||
|
'brick',
|
||||||
|
'cadmiumyellow',
|
||||||
|
'antiquewhite',
|
||||||
|
'antiquewhite 1',
|
||||||
|
'antiquewhite 2',
|
||||||
|
'antiquewhite 3',
|
||||||
|
'antiquewhite 4',
|
||||||
|
'burlywood',
|
||||||
|
'burlywood 1',
|
||||||
|
'burlywood 2',
|
||||||
|
'burlywood 3',
|
||||||
|
'burlywood 4',
|
||||||
|
'bisque 1',
|
||||||
|
'bisque',
|
||||||
|
'bisque 2',
|
||||||
|
'bisque 3',
|
||||||
|
'bisque 4',
|
||||||
|
'melon',
|
||||||
|
'carrot',
|
||||||
|
'darkorange',
|
||||||
|
'darkorange 1',
|
||||||
|
'darkorange 2',
|
||||||
|
'darkorange 3',
|
||||||
|
'darkorange 4',
|
||||||
|
'tan 1',
|
||||||
|
'tan 2',
|
||||||
|
'tan 3',
|
||||||
|
'peru',
|
||||||
|
'tan 4',
|
||||||
|
'linen',
|
||||||
|
'peachpuff 1',
|
||||||
|
'peachpuff',
|
||||||
|
'peachpuff 2',
|
||||||
|
'peachpuff 3',
|
||||||
|
'peachpuff 4',
|
||||||
|
'seashell 1',
|
||||||
|
'seashell',
|
||||||
|
'seashell 2',
|
||||||
|
'seashell 3',
|
||||||
|
'seashell 4',
|
||||||
|
'sandybrown',
|
||||||
|
'rawsienna',
|
||||||
|
'chocolate',
|
||||||
|
'chocolate 1',
|
||||||
|
'chocolate 2',
|
||||||
|
'chocolate 3',
|
||||||
|
'chocolate 4',
|
||||||
|
'saddlebrown',
|
||||||
|
'ivoryblack',
|
||||||
|
'flesh',
|
||||||
|
'cadmiumorange',
|
||||||
|
'burntsienna',
|
||||||
|
'sienna',
|
||||||
|
'sienna 1',
|
||||||
|
'sienna 2',
|
||||||
|
'sienna 3',
|
||||||
|
'sienna 4',
|
||||||
|
'lightsalmon 1',
|
||||||
|
'lightsalmon',
|
||||||
|
'lightsalmon 2',
|
||||||
|
'lightsalmon 3',
|
||||||
|
'lightsalmon 4',
|
||||||
|
'coral',
|
||||||
|
'orangered 1',
|
||||||
|
'orangered',
|
||||||
|
'orangered 2',
|
||||||
|
'orangered 3',
|
||||||
|
'orangered 4',
|
||||||
|
'sepia',
|
||||||
|
'darksalmon',
|
||||||
|
'salmon 1',
|
||||||
|
'salmon 2',
|
||||||
|
'salmon 3',
|
||||||
|
'salmon 4',
|
||||||
|
'coral 1',
|
||||||
|
'coral 2',
|
||||||
|
'coral 3',
|
||||||
|
'coral 4',
|
||||||
|
'burntumber',
|
||||||
|
'tomato 1',
|
||||||
|
'tomato',
|
||||||
|
'tomato 2',
|
||||||
|
'tomato 3',
|
||||||
|
'tomato 4',
|
||||||
|
'salmon',
|
||||||
|
'mistyrose 1',
|
||||||
|
'mistyrose',
|
||||||
|
'mistyrose 2',
|
||||||
|
'mistyrose 3',
|
||||||
|
'mistyrose 4',
|
||||||
|
'snow 1',
|
||||||
|
'snow',
|
||||||
|
'snow 2',
|
||||||
|
'snow 3',
|
||||||
|
'snow 4',
|
||||||
|
'rosybrown',
|
||||||
|
'rosybrown 1',
|
||||||
|
'rosybrown 2',
|
||||||
|
'rosybrown 3',
|
||||||
|
'rosybrown 4',
|
||||||
|
'lightcoral',
|
||||||
|
'indianred',
|
||||||
|
'indianred 1',
|
||||||
|
'indianred 2',
|
||||||
|
'indianred 4',
|
||||||
|
'indianred 3',
|
||||||
|
'brown',
|
||||||
|
'brown 1',
|
||||||
|
'brown 2',
|
||||||
|
'brown 3',
|
||||||
|
'brown 4',
|
||||||
|
'firebrick',
|
||||||
|
'firebrick 1',
|
||||||
|
'firebrick 2',
|
||||||
|
'firebrick 3',
|
||||||
|
'firebrick 4',
|
||||||
|
'red 1',
|
||||||
|
'red',
|
||||||
|
'red 2',
|
||||||
|
'red 3',
|
||||||
|
'red 4',
|
||||||
|
'darkred',
|
||||||
|
'maroon',
|
||||||
|
'sgi beet',
|
||||||
|
'sgi slateblue',
|
||||||
|
'sgi lightblue',
|
||||||
|
'sgi teal',
|
||||||
|
'sgi chartreuse',
|
||||||
|
'sgi olivedrab',
|
||||||
|
'sgi brightgray',
|
||||||
|
'sgi salmon',
|
||||||
|
'sgi darkgray',
|
||||||
|
'sgi gray 12',
|
||||||
|
'sgi gray 16',
|
||||||
|
'sgi gray 32',
|
||||||
|
'sgi gray 36',
|
||||||
|
'sgi gray 52',
|
||||||
|
'sgi gray 56',
|
||||||
|
'sgi lightgray',
|
||||||
|
'sgi gray 72',
|
||||||
|
'sgi gray 76',
|
||||||
|
'sgi gray 92',
|
||||||
|
'sgi gray 96',
|
||||||
|
'white',
|
||||||
|
'white smoke',
|
||||||
|
'gray 96',
|
||||||
|
'gainsboro',
|
||||||
|
'lightgrey',
|
||||||
|
'silver',
|
||||||
|
'darkgray',
|
||||||
|
'gray',
|
||||||
|
'dimgray',
|
||||||
|
'gray 42',
|
||||||
|
'black',
|
||||||
|
'gray 99',
|
||||||
|
'gray 98',
|
||||||
|
'gray 97',
|
||||||
|
'gray 95',
|
||||||
|
'gray 94',
|
||||||
|
'gray 93',
|
||||||
|
'gray 92',
|
||||||
|
'gray 91',
|
||||||
|
'gray 90',
|
||||||
|
'gray 89',
|
||||||
|
'gray 88',
|
||||||
|
'gray 87',
|
||||||
|
'gray 86',
|
||||||
|
'gray 85',
|
||||||
|
'gray 84',
|
||||||
|
'gray 83',
|
||||||
|
'gray 82',
|
||||||
|
'gray 81',
|
||||||
|
'gray 80',
|
||||||
|
'gray 79',
|
||||||
|
'gray 78',
|
||||||
|
'gray 77',
|
||||||
|
'gray 76',
|
||||||
|
'gray 75',
|
||||||
|
'gray 74',
|
||||||
|
'gray 73',
|
||||||
|
'gray 72',
|
||||||
|
'gray 71',
|
||||||
|
'gray 70',
|
||||||
|
'gray 69',
|
||||||
|
'gray 68',
|
||||||
|
'gray 67',
|
||||||
|
'gray 66',
|
||||||
|
'gray 65',
|
||||||
|
'gray 64',
|
||||||
|
'gray 63',
|
||||||
|
'gray 62',
|
||||||
|
'gray 61',
|
||||||
|
'gray 60',
|
||||||
|
'gray 59',
|
||||||
|
'gray 58',
|
||||||
|
'gray 57',
|
||||||
|
'gray 56',
|
||||||
|
'gray 55',
|
||||||
|
'gray 54',
|
||||||
|
'gray 53',
|
||||||
|
'gray 52',
|
||||||
|
'gray 51',
|
||||||
|
'gray 50',
|
||||||
|
'gray 49',
|
||||||
|
'gray 48',
|
||||||
|
'gray 47',
|
||||||
|
'gray 46',
|
||||||
|
'gray 45',
|
||||||
|
'gray 44',
|
||||||
|
'gray 43',
|
||||||
|
'gray 40',
|
||||||
|
'gray 39',
|
||||||
|
'gray 38',
|
||||||
|
'gray 37',
|
||||||
|
'gray 36',
|
||||||
|
'gray 35',
|
||||||
|
'gray 34',
|
||||||
|
'gray 33',
|
||||||
|
'gray 32',
|
||||||
|
'gray 31',
|
||||||
|
'gray 30',
|
||||||
|
'gray 29',
|
||||||
|
'gray 28',
|
||||||
|
'gray 27',
|
||||||
|
'gray 26',
|
||||||
|
'gray 25',
|
||||||
|
'gray 24',
|
||||||
|
'gray 23',
|
||||||
|
'gray 22',
|
||||||
|
'gray 21',
|
||||||
|
'gray 20',
|
||||||
|
'gray 19',
|
||||||
|
'gray 18',
|
||||||
|
'gray 17',
|
||||||
|
'gray 16',
|
||||||
|
'gray 15',
|
||||||
|
'gray 14',
|
||||||
|
'gray 13',
|
||||||
|
'gray 12',
|
||||||
|
'gray 11',
|
||||||
|
'gray 10',
|
||||||
|
'gray 9',
|
||||||
|
'gray 8',
|
||||||
|
'gray 7',
|
||||||
|
'gray 6',
|
||||||
|
'gray 5',
|
||||||
|
'gray 4',
|
||||||
|
'gray 3',
|
||||||
|
'gray 2',
|
||||||
|
'gray 1',
|
||||||
|
'whitesmoke'
|
||||||
|
])
|
||||||
|
|
||||||
|
export const validateColor = (str = '') => {
|
||||||
|
return /#\d{3,6}|rgba{0,1}\(.*?\)/gi.test(str) || colors.has(str.toLowerCase())
|
||||||
|
}
|
||||||
@ -0,0 +1,136 @@
|
|||||||
|
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||||
|
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||||
|
// Apache mode by gloony
|
||||||
|
|
||||||
|
const CodeMirror = require('codemirror')
|
||||||
|
|
||||||
|
CodeMirror.defineMode('apache', function(config) {
|
||||||
|
return {
|
||||||
|
token: function(stream, state) {
|
||||||
|
var sol = stream.sol() || state.afterSection
|
||||||
|
var eol = stream.eol()
|
||||||
|
|
||||||
|
state.afterSection = false
|
||||||
|
|
||||||
|
if (sol) {
|
||||||
|
if (state.nextMultiline) {
|
||||||
|
state.inMultiline = true
|
||||||
|
state.nextMultiline = false
|
||||||
|
} else {
|
||||||
|
state.position = 'def'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (eol && !state.nextMultiline) {
|
||||||
|
state.inMultiline = false
|
||||||
|
state.position = 'def'
|
||||||
|
}
|
||||||
|
|
||||||
|
if (sol) {
|
||||||
|
while (stream.eatSpace()) {}
|
||||||
|
}
|
||||||
|
|
||||||
|
var ch = stream.next()
|
||||||
|
|
||||||
|
if (sol && ch === '#') {
|
||||||
|
state.position = 'comment'
|
||||||
|
stream.skipToEnd()
|
||||||
|
return 'comment'
|
||||||
|
} else if (ch === '!' && stream.peek() !== ' ') {
|
||||||
|
return 'number'
|
||||||
|
} else if (ch === ' ') {
|
||||||
|
if (stream.peek() === '[') {
|
||||||
|
if (stream.skipTo(']')) {
|
||||||
|
stream.next()
|
||||||
|
} else {
|
||||||
|
stream.skipToEnd()
|
||||||
|
}
|
||||||
|
return 'keyword'
|
||||||
|
} else if (stream.peek() === '(') {
|
||||||
|
if (stream.skipTo(')')) {
|
||||||
|
stream.next()
|
||||||
|
} else {
|
||||||
|
stream.skipToEnd()
|
||||||
|
}
|
||||||
|
return 'string'
|
||||||
|
} else {
|
||||||
|
state.position = 'unit'
|
||||||
|
return 'unit'
|
||||||
|
}
|
||||||
|
} else if (ch === '"') {
|
||||||
|
if (stream.skipTo('"')) {
|
||||||
|
stream.next()
|
||||||
|
} else {
|
||||||
|
stream.skipToEnd()
|
||||||
|
}
|
||||||
|
return 'quote'
|
||||||
|
} else if (sol && ch === '<') {
|
||||||
|
if (stream.skipTo('>')) {
|
||||||
|
stream.next()
|
||||||
|
} else {
|
||||||
|
stream.skipToEnd()
|
||||||
|
}
|
||||||
|
return 'meta'
|
||||||
|
} else if (ch === '%') {
|
||||||
|
if (stream.peek() === '{') {
|
||||||
|
if (stream.skipTo('}')) {
|
||||||
|
stream.next()
|
||||||
|
} else {
|
||||||
|
stream.skipToEnd()
|
||||||
|
}
|
||||||
|
return 'operator'
|
||||||
|
}
|
||||||
|
} else if (ch === '$') {
|
||||||
|
if (!isNaN(stream.peek()) && stream.peek() !== ' ') {
|
||||||
|
while (!isNaN(stream.peek()) && stream.peek() !== ' ') {
|
||||||
|
stream.next()
|
||||||
|
}
|
||||||
|
return 'operator'
|
||||||
|
}
|
||||||
|
} else if (ch === '\\') {
|
||||||
|
if (stream.peek() === '.') {
|
||||||
|
if (stream.skipTo(' ')) {
|
||||||
|
stream.next()
|
||||||
|
} else {
|
||||||
|
stream.skipToEnd()
|
||||||
|
}
|
||||||
|
return 'string'
|
||||||
|
}
|
||||||
|
} else if (ch === '.') {
|
||||||
|
if (stream.peek() === '*') {
|
||||||
|
if (stream.skipTo(' ')) {
|
||||||
|
stream.next()
|
||||||
|
} else {
|
||||||
|
stream.skipToEnd()
|
||||||
|
}
|
||||||
|
return 'string'
|
||||||
|
}
|
||||||
|
} else if (ch === '^') {
|
||||||
|
if (stream.skipTo(' ')) {
|
||||||
|
stream.next()
|
||||||
|
} else {
|
||||||
|
stream.skipToEnd()
|
||||||
|
}
|
||||||
|
return 'string'
|
||||||
|
}
|
||||||
|
|
||||||
|
return state.position
|
||||||
|
},
|
||||||
|
|
||||||
|
// electricInput: /<\/[\s\w:]+>$/,
|
||||||
|
lineComment: '#',
|
||||||
|
fold: 'brace',
|
||||||
|
|
||||||
|
startState: function() {
|
||||||
|
return {
|
||||||
|
position: 'def',
|
||||||
|
nextMultiline: false,
|
||||||
|
inMultiline: false,
|
||||||
|
afterSection: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
CodeMirror.defineMIME('text/apache', 'apache')
|
||||||
|
CodeMirror.defineMIME('text/htaccess', 'apache')
|
||||||
@ -1,13 +0,0 @@
|
|||||||
const Uglify = require('uglifyjs-webpack-plugin')
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
// TODO remove `next.configs.js` when this closes: https://github.com/zeit/next.js/issues/1195
|
|
||||||
webpack: function(c, { dev }) {
|
|
||||||
if (!dev) {
|
|
||||||
c.plugins = c.plugins.filter(plugin => plugin.constructor.name !== 'UglifyJsPlugin')
|
|
||||||
c.plugins.push(new Uglify())
|
|
||||||
}
|
|
||||||
|
|
||||||
return c
|
|
||||||
}
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,14 @@
|
|||||||
|
import Document, { Head, Main, NextScript } from 'next/document'
|
||||||
|
export default class extends Document {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<html lang="en">
|
||||||
|
<Head />
|
||||||
|
<body>
|
||||||
|
<Main />
|
||||||
|
<NextScript />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue