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 enhanceWithClickOutside from 'react-click-outside'
|
||||
import Downshift from 'downshift'
|
||||
import ArrowDown from './svg/Arrowdown'
|
||||
import Checkmark from './svg/Checkmark'
|
||||
import CheckMark from './svg/Checkmark'
|
||||
import { COLORS } from '../lib/constants'
|
||||
|
||||
class Dropdown extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
isVisible: false
|
||||
}
|
||||
this.select = this.select.bind(this)
|
||||
this.toggle = this.toggle.bind(this)
|
||||
const Dropdown = ({ button, color, list, selected, onChange }) => {
|
||||
return (
|
||||
<Downshift
|
||||
render={renderDropdown({ button, color, list, selected })}
|
||||
selectedItem={selected}
|
||||
defaultHighlightedIndex={list.findIndex(it => it === selected)}
|
||||
itemToString={item => item.name}
|
||||
onChange={onChange}
|
||||
stateReducer={reduceState(list)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
select(item) {
|
||||
if (this.props.selected !== item) {
|
||||
this.props.onChange(item)
|
||||
const reduceState = list => (state, changes) => {
|
||||
switch (changes.type) {
|
||||
case Downshift.stateChangeTypes.keyDownArrowUp:
|
||||
case Downshift.stateChangeTypes.keyDownArrowDown:
|
||||
return { ...changes, selectedItem: list[changes.highlightedIndex] }
|
||||
default:
|
||||
return changes
|
||||
}
|
||||
}
|
||||
|
||||
toggle() {
|
||||
this.setState({ isVisible: !this.state.isVisible })
|
||||
}
|
||||
|
||||
handleClickOutside() {
|
||||
this.setState({ isVisible: false })
|
||||
const renderDropdown = ({ button, color, list, selected }) => ({
|
||||
isOpen,
|
||||
highlightedIndex,
|
||||
setHighlightedIndex,
|
||||
selectHighlightedItem,
|
||||
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() {
|
||||
return this.props.list.map((item, i) => (
|
||||
<div className="dropdown-list-item" key={i} onClick={this.select.bind(null, item)}>
|
||||
<span>{item.name}</span>
|
||||
{this.props.selected === item ? <Checkmark /> : null}
|
||||
const DropdownContainer = ({ children, innerRef, minWidth, ...rest }) => {
|
||||
return (
|
||||
<div {...rest} ref={innerRef} className="dropdown-container">
|
||||
{children}
|
||||
<style jsx>{`
|
||||
.dropdown-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
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;
|
||||
.dropdown-container {
|
||||
min-width: ${minWidth}px;
|
||||
cursor: pointer;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
))
|
||||
)
|
||||
}
|
||||
|
||||
render() {
|
||||
const color = this.props.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
|
||||
)
|
||||
const SelectedItem = ({ children, isOpen, color, ...rest }) => {
|
||||
const itemColor = color || COLORS.SECONDARY
|
||||
|
||||
return (
|
||||
<div
|
||||
className="dropdown-container"
|
||||
style={{ minWidth: MIN_WIDTH * 10 + 32 }}
|
||||
onClick={this.toggle}
|
||||
>
|
||||
<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>
|
||||
<span {...rest} tabIndex="0" className="dropdown-display">
|
||||
<span className="dropdown-display-text">{children}</span>
|
||||
<div className={`dropdown-arrow ${isOpen ? 'is-reverse' : ''}`}>
|
||||
<ArrowDown fill={itemColor} />
|
||||
</div>
|
||||
<div className="dropdown-list">{this.renderListItems()}</div>
|
||||
<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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
border: 1px solid ${color};
|
||||
border: 1px solid ${itemColor};
|
||||
border-radius: 3px;
|
||||
user-select: none;
|
||||
padding: 8px 16px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.dropdown-display span {
|
||||
color: ${color};
|
||||
}
|
||||
|
||||
.dropdown-display:hover {
|
||||
background: ${COLORS.HOVER};
|
||||
}
|
||||
|
||||
.is-visible + .dropdown-list {
|
||||
display: block;
|
||||
.dropdown-display-text {
|
||||
flex-grow: 1;
|
||||
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 {
|
||||
display: none;
|
||||
margin-top: -1px;
|
||||
border: 1px solid ${color};
|
||||
border-radius: 0px 0px 3px 3px;
|
||||
border: 1px solid ${color || COLORS.SECONDARY};
|
||||
border-radius: 0 0 3px 3px;
|
||||
max-height: 350px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
`}</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