mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2024-11-22 01:26:48 +03:00
chore(*): upgrade prettier (#570)
* chore(*): upgrade prettier * chore(*): upgrade prettier
This commit is contained in:
Nathan Bierema
GitHub
parent
08ef5bf838
commit
10bf7bc084
|
|
@ -4,11 +4,11 @@ module.exports = {
|
|||
[
|
||||
'@babel/plugin-transform-runtime',
|
||||
{
|
||||
regenerator: true
|
||||
}
|
||||
regenerator: true,
|
||||
},
|
||||
],
|
||||
['@babel/plugin-proposal-decorators', { legacy: true }],
|
||||
'@babel/plugin-proposal-class-properties',
|
||||
'@babel/plugin-proposal-export-default-from'
|
||||
]
|
||||
'@babel/plugin-proposal-export-default-from',
|
||||
],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ The client driver provides a way to connect to the server via websockets (see th
|
|||
```js
|
||||
var socket = socketCluster.connect({
|
||||
hostname: 'localhost',
|
||||
port: 8000
|
||||
port: 8000,
|
||||
});
|
||||
```
|
||||
|
||||
|
|
@ -39,13 +39,13 @@ SocketCluster client handles reconnecting for you, but you still might want to k
|
|||
##### JavaScript
|
||||
|
||||
```js
|
||||
socket.on('connect', status => {
|
||||
socket.on('connect', (status) => {
|
||||
// Here will come the next step
|
||||
});
|
||||
socket.on('disconnect', code => {
|
||||
socket.on('disconnect', (code) => {
|
||||
console.warn('Socket disconnected with code', code);
|
||||
});
|
||||
socket.on('error', error => {
|
||||
socket.on('error', (error) => {
|
||||
console.warn('Socket error', error);
|
||||
});
|
||||
```
|
||||
|
|
@ -125,7 +125,7 @@ const message = {
|
|||
payload: state,
|
||||
id: socket.id,
|
||||
instanceId: window.btoa(location.href),
|
||||
name: document.title
|
||||
name: document.title,
|
||||
};
|
||||
socket.emit(socket.id ? 'log' : 'log-noid', message);
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
module.exports = {
|
||||
setupFiles: ['devui/tests/setup.js']
|
||||
setupFiles: ['devui/tests/setup.js'],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
"jest": "^26.2.2",
|
||||
"lerna": "^3.22.1",
|
||||
"lint-staged": "^10.2.11",
|
||||
"prettier": "^1.19.1"
|
||||
"prettier": "^2.0.5"
|
||||
},
|
||||
"scripts": {
|
||||
"lerna": "lerna",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
d3-state-visualizer
|
||||
===================
|
||||
# d3-state-visualizer
|
||||
|
||||
Enables real-time visualization of your application state.
|
||||
|
||||
Created by [@romseguy](https://github.com/romseguy) and merged from [`reduxjs/d3-state-visualizer`](https://github.com/reduxjs/d3-state-visualizer).
|
||||
|
|
@ -18,13 +18,13 @@ import { tree } from 'd3-state-visualizer';
|
|||
const appState = {
|
||||
todoStore: {
|
||||
todos: [
|
||||
{ title: 'd3'},
|
||||
{ title: 'd3' },
|
||||
{ title: 'state' },
|
||||
{ title: 'visualizer' },
|
||||
{ title: 'tree' }
|
||||
{ title: 'tree' },
|
||||
],
|
||||
completedCount: 1
|
||||
}
|
||||
completedCount: 1,
|
||||
},
|
||||
};
|
||||
|
||||
const render = tree(document.getElementById('root'), {
|
||||
|
|
@ -35,40 +35,42 @@ const render = tree(document.getElementById('root'), {
|
|||
isSorted: false,
|
||||
widthBetweenNodesCoeff: 1.5,
|
||||
heightBetweenNodesCoeff: 2,
|
||||
style: {border: '1px solid black'},
|
||||
tooltipOptions: {offset: {left: 30, top: 10}, indentationSize: 2}
|
||||
style: { border: '1px solid black' },
|
||||
tooltipOptions: { offset: { left: 30, top: 10 }, indentationSize: 2 },
|
||||
});
|
||||
|
||||
render();
|
||||
```
|
||||
|
||||
## Charts API
|
||||
|
||||
The APIs are minimal and consists of a single function you provide with:
|
||||
|
||||
- a DOM element
|
||||
- a plain old JS object for options.
|
||||
|
||||
#### Tree
|
||||
|
||||
This chart is a bit special as it accepts either one of the two following options, but **not both**:
|
||||
|
||||
This chart is a bit special as it accepts either one of the two following options, but **not both**:
|
||||
|
||||
- `tree`: a properly formed tree structure such as one generated by [map2tree](https://github.com/reduxjs/redux-devtools/tree/master/packages/map2tree) or [react2tree](https://github.com/romseguy/react2tree)
|
||||
- `state`: a plain javascript object mapping arbitrarily nested keys to values – which will be transformed into a tree structure, again using [map2tree](https://github.com/reduxjs/redux-devtools/tree/master/packages/map2tree).
|
||||
|
||||
Other options are listed below and have reasonable default values if you want to omit them:
|
||||
|
||||
Option | Type | Default | Description
|
||||
--------------------------|----------|-------------|-------------------------------------------------------------------------
|
||||
`id` | String | `'d3svg'` | Sets the identifier of the SVG element —i.e your chart— that will be added to the DOM element you passed as first argument
|
||||
`style` | Object | `{}` | Sets the CSS style of the chart
|
||||
`size` | Number | `500` | Sets size of the chart in pixels
|
||||
`aspectRatio` | Float | `1.0` | Sets the chart height to `size * aspectRatio` and [viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox) in order to preserve the aspect ratio of the chart. [Great video](https://www.youtube.com/watch?v=FCOeMy7HrBc) if you want to learn more about how SVG works
|
||||
`widthBetweenNodesCoeff` | Float | `1.0` | Alters the horizontal space between each node
|
||||
`heightBetweenNodesCoeff` | Float | `1.0` | Alters the vertical space between each node
|
||||
`isSorted` | Boolean | `false` | Sorts the chart in alphabetical order
|
||||
`transitionDuration` | Number | `750` | Sets the duration of all the transitions used by the chart
|
||||
`tooltipOptions` | Object | [here](https://github.com/reduxjs/redux-devtools/tree/master/packages/d3tooltip) | Sets the options for the [tooltip](https://github.com/reduxjs/redux-devtools/tree/master/packages/d3tooltip) that is showing up when you're hovering the nodes
|
||||
`rootKeyName` | String | `'state'` | Sets the first node's name of the resulting tree structure. **Warning**: only works if you provide a `state` option
|
||||
`pushMethod` | String | `'push'` | Sets the method that shall be used to add array children to the tree. **Warning**: only works if you provide a `state` option
|
||||
| Option | Type | Default | Description |
|
||||
| ------------------------- | ------- | -------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `id` | String | `'d3svg'` | Sets the identifier of the SVG element —i.e your chart— that will be added to the DOM element you passed as first argument |
|
||||
| `style` | Object | `{}` | Sets the CSS style of the chart |
|
||||
| `size` | Number | `500` | Sets size of the chart in pixels |
|
||||
| `aspectRatio` | Float | `1.0` | Sets the chart height to `size * aspectRatio` and [viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox) in order to preserve the aspect ratio of the chart. [Great video](https://www.youtube.com/watch?v=FCOeMy7HrBc) if you want to learn more about how SVG works |
|
||||
| `widthBetweenNodesCoeff` | Float | `1.0` | Alters the horizontal space between each node |
|
||||
| `heightBetweenNodesCoeff` | Float | `1.0` | Alters the vertical space between each node |
|
||||
| `isSorted` | Boolean | `false` | Sorts the chart in alphabetical order |
|
||||
| `transitionDuration` | Number | `750` | Sets the duration of all the transitions used by the chart |
|
||||
| `tooltipOptions` | Object | [here](https://github.com/reduxjs/redux-devtools/tree/master/packages/d3tooltip) | Sets the options for the [tooltip](https://github.com/reduxjs/redux-devtools/tree/master/packages/d3tooltip) that is showing up when you're hovering the nodes |
|
||||
| `rootKeyName` | String | `'state'` | Sets the first node's name of the resulting tree structure. **Warning**: only works if you provide a `state` option |
|
||||
| `pushMethod` | String | `'push'` | Sets the method that shall be used to add array children to the tree. **Warning**: only works if you provide a `state` option |
|
||||
|
||||
More to come...
|
||||
|
||||
|
|
@ -80,4 +82,4 @@ More to come...
|
|||
|
||||
## Roadmap
|
||||
|
||||
* Threshold for large arrays so only a single node is displayed instead of all the children. That single node would be exclude from searching until selected.
|
||||
- Threshold for large arrays so only a single node is displayed instead of all the children. That single node would be exclude from searching until selected.
|
||||
|
|
|
|||
|
|
@ -1,42 +1,39 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>State tree with d3-state-visualizer</title>
|
||||
<style type="text/css">
|
||||
<head>
|
||||
<title>State tree with d3-state-visualizer</title>
|
||||
<style type="text/css">
|
||||
.node {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.node {
|
||||
cursor: pointer;
|
||||
}
|
||||
.nodeCircle {
|
||||
stroke: black;
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
|
||||
.nodeCircle {
|
||||
stroke: black;
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
.nodeText {
|
||||
font-family: sans-serif;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.nodeText {
|
||||
font-family: sans-serif;
|
||||
font-size: 10px;
|
||||
}
|
||||
.link {
|
||||
fill: none;
|
||||
stroke: #ccc;
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
|
||||
.link {
|
||||
fill: none;
|
||||
stroke: #ccc;
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
font-family: Consolas, Menlo, Monaco, monospace;
|
||||
font-size: 0.8em;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: white;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
</div>
|
||||
<script src="/static/bundle.js"></script>
|
||||
</body>
|
||||
.tooltip {
|
||||
font-family: Consolas, Menlo, Monaco, monospace;
|
||||
font-size: 0.8em;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: white;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script src="/static/bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -6,18 +6,18 @@ const appState = {
|
|||
{ title: 'd3' },
|
||||
{ title: 'state' },
|
||||
{ title: 'visualizer' },
|
||||
{ title: 'tree' }
|
||||
{ title: 'tree' },
|
||||
],
|
||||
completedCount: 1,
|
||||
alphabeticalOrder: true
|
||||
alphabeticalOrder: true,
|
||||
},
|
||||
someStore: {
|
||||
someProperty: 0,
|
||||
someObject: {
|
||||
anotherProperty: 'value',
|
||||
someArray: [0, 1, 2]
|
||||
}
|
||||
}
|
||||
someArray: [0, 1, 2],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const render = tree(document.getElementById('root'), {
|
||||
|
|
@ -29,7 +29,7 @@ const render = tree(document.getElementById('root'), {
|
|||
widthBetweenNodesCoeff: 1.5,
|
||||
heightBetweenNodesCoeff: 2,
|
||||
style: { border: '1px solid black' },
|
||||
tooltipOptions: { offset: { left: 30, top: 10 }, indentationSize: 2 }
|
||||
tooltipOptions: { offset: { left: 30, top: 10 }, indentationSize: 2 },
|
||||
});
|
||||
|
||||
render();
|
||||
|
|
|
|||
|
|
@ -7,9 +7,9 @@ new WebpackDevServer(webpack(config), {
|
|||
hot: true,
|
||||
historyApiFallback: true,
|
||||
stats: {
|
||||
colors: true
|
||||
}
|
||||
}).listen(3000, 'localhost', function(err) {
|
||||
colors: true,
|
||||
},
|
||||
}).listen(3000, 'localhost', function (err) {
|
||||
if (err) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(err);
|
||||
|
|
|
|||
|
|
@ -7,16 +7,16 @@ module.exports = {
|
|||
entry: [
|
||||
'webpack-dev-server/client?http://localhost:3000',
|
||||
'webpack/hot/only-dev-server',
|
||||
'./index'
|
||||
'./index',
|
||||
],
|
||||
output: {
|
||||
path: path.join(__dirname, 'dist'),
|
||||
filename: 'bundle.js',
|
||||
publicPath: '/static/'
|
||||
publicPath: '/static/',
|
||||
},
|
||||
plugins: [new webpack.HotModuleReplacementPlugin()],
|
||||
resolve: {
|
||||
extensions: ['.js']
|
||||
extensions: ['.js'],
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
|
|
@ -24,8 +24,8 @@ module.exports = {
|
|||
test: /\.js$/,
|
||||
loaders: ['babel-loader'],
|
||||
exclude: /node_modules/,
|
||||
include: __dirname
|
||||
}
|
||||
]
|
||||
}
|
||||
include: __dirname,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ function sortObject(obj, strict) {
|
|||
const tObj = {};
|
||||
Object.keys(obj)
|
||||
.sort()
|
||||
.forEach(key => (tObj[key] = sortObject(obj[key])));
|
||||
.forEach((key) => (tObj[key] = sortObject(obj[key])));
|
||||
return tObj;
|
||||
}
|
||||
|
||||
|
|
|
|||
134
packages/d3-state-visualizer/src/charts/tree/tree.js
vendored
134
packages/d3-state-visualizer/src/charts/tree/tree.js
vendored
|
|
@ -6,7 +6,7 @@ import {
|
|||
getTooltipString,
|
||||
toggleChildren,
|
||||
visit,
|
||||
getNodeGroupByDepthCount
|
||||
getNodeGroupByDepthCount,
|
||||
} from './utils';
|
||||
import d3tooltip from 'd3tooltip';
|
||||
|
||||
|
|
@ -21,20 +21,20 @@ const defaultOptions = {
|
|||
colors: {
|
||||
default: '#ccc',
|
||||
collapsed: 'lightsteelblue',
|
||||
parent: 'white'
|
||||
parent: 'white',
|
||||
},
|
||||
radius: 7
|
||||
radius: 7,
|
||||
},
|
||||
text: {
|
||||
colors: {
|
||||
default: 'black',
|
||||
hover: 'skyblue'
|
||||
}
|
||||
hover: 'skyblue',
|
||||
},
|
||||
},
|
||||
link: {
|
||||
stroke: '#000',
|
||||
fill: 'none'
|
||||
}
|
||||
fill: 'none',
|
||||
},
|
||||
},
|
||||
size: 500,
|
||||
aspectRatio: 1.0,
|
||||
|
|
@ -43,7 +43,7 @@ const defaultOptions = {
|
|||
top: 10,
|
||||
right: 10,
|
||||
bottom: 10,
|
||||
left: 50
|
||||
left: 50,
|
||||
},
|
||||
isSorted: false,
|
||||
heightBetweenNodesCoeff: 2,
|
||||
|
|
@ -57,13 +57,13 @@ const defaultOptions = {
|
|||
right: undefined,
|
||||
offset: {
|
||||
left: 0,
|
||||
top: 0
|
||||
top: 0,
|
||||
},
|
||||
style: undefined
|
||||
}
|
||||
style: undefined,
|
||||
},
|
||||
};
|
||||
|
||||
export default function(DOMNode, options = {}) {
|
||||
export default function (DOMNode, options = {}) {
|
||||
const {
|
||||
id,
|
||||
style,
|
||||
|
|
@ -81,7 +81,7 @@ export default function(DOMNode, options = {}) {
|
|||
pushMethod,
|
||||
tree,
|
||||
tooltipOptions,
|
||||
onClickText
|
||||
onClickText,
|
||||
} = deepmerge(defaultOptions, options);
|
||||
|
||||
const width = size - margin.left - margin.right;
|
||||
|
|
@ -91,7 +91,7 @@ export default function(DOMNode, options = {}) {
|
|||
|
||||
const attr = {
|
||||
id,
|
||||
preserveAspectRatio: 'xMinYMin slice'
|
||||
preserveAspectRatio: 'xMinYMin slice',
|
||||
};
|
||||
|
||||
if (!style.width) {
|
||||
|
|
@ -103,10 +103,7 @@ export default function(DOMNode, options = {}) {
|
|||
}
|
||||
|
||||
const root = d3.select(DOMNode);
|
||||
const zoom = d3.behavior
|
||||
.zoom()
|
||||
.scaleExtent([0.1, 3])
|
||||
.scale(initialZoom);
|
||||
const zoom = d3.behavior.zoom().scaleExtent([0.1, 3]).scale(initialZoom);
|
||||
const vis = root
|
||||
.append('svg')
|
||||
.attr(attr)
|
||||
|
|
@ -121,7 +118,7 @@ export default function(DOMNode, options = {}) {
|
|||
.attr({
|
||||
transform: `translate(${margin.left + style.node.radius}, ${
|
||||
margin.top
|
||||
}) scale(${initialZoom})`
|
||||
}) scale(${initialZoom})`,
|
||||
});
|
||||
|
||||
let layout = d3.layout.tree().size([width, height]);
|
||||
|
|
@ -141,8 +138,8 @@ export default function(DOMNode, options = {}) {
|
|||
id: 'root',
|
||||
parentId: null,
|
||||
x: height / 2,
|
||||
y: 0
|
||||
}
|
||||
y: 0,
|
||||
},
|
||||
};
|
||||
|
||||
// traverses a map with node positions by going through the chain
|
||||
|
|
@ -169,7 +166,7 @@ export default function(DOMNode, options = {}) {
|
|||
if (isEmpty(data) || !data.name) {
|
||||
data = {
|
||||
name: 'error',
|
||||
message: 'Please provide a state map or a tree structure'
|
||||
message: 'Please provide a state map or a tree structure',
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -181,13 +178,13 @@ export default function(DOMNode, options = {}) {
|
|||
// top-level elemnt always has id "root"
|
||||
visit(
|
||||
data,
|
||||
node => {
|
||||
(node) => {
|
||||
maxLabelLength = Math.max(node.name.length, maxLabelLength);
|
||||
node.id = node.id || 'root';
|
||||
},
|
||||
node =>
|
||||
(node) =>
|
||||
node.children && node.children.length > 0
|
||||
? node.children.map(c => {
|
||||
? node.children.map((c) => {
|
||||
c.id = `${node.id || ''}|${c.name}`;
|
||||
return c;
|
||||
})
|
||||
|
|
@ -200,69 +197,69 @@ export default function(DOMNode, options = {}) {
|
|||
|
||||
function update() {
|
||||
// path generator for links
|
||||
const diagonal = d3.svg.diagonal().projection(d => [d.y, d.x]);
|
||||
const diagonal = d3.svg.diagonal().projection((d) => [d.y, d.x]);
|
||||
// set tree dimensions and spacing between branches and nodes
|
||||
const maxNodeCountByLevel = Math.max(...getNodeGroupByDepthCount(data));
|
||||
|
||||
layout = layout.size([
|
||||
maxNodeCountByLevel * 25 * heightBetweenNodesCoeff,
|
||||
width
|
||||
width,
|
||||
]);
|
||||
|
||||
let nodes = layout.nodes(data);
|
||||
let links = layout.links(nodes);
|
||||
|
||||
nodes.forEach(
|
||||
node =>
|
||||
(node) =>
|
||||
(node.y = node.depth * (maxLabelLength * 7 * widthBetweenNodesCoeff))
|
||||
);
|
||||
|
||||
const nodePositions = nodes.map(n => ({
|
||||
const nodePositions = nodes.map((n) => ({
|
||||
parentId: n.parent && n.parent.id,
|
||||
id: n.id,
|
||||
x: n.x,
|
||||
y: n.y
|
||||
y: n.y,
|
||||
}));
|
||||
const nodePositionsById = {};
|
||||
nodePositions.forEach(node => (nodePositionsById[node.id] = node));
|
||||
nodePositions.forEach((node) => (nodePositionsById[node.id] = node));
|
||||
|
||||
// process the node selection
|
||||
let node = vis
|
||||
.selectAll('g.node')
|
||||
.property('__oldData__', d => d)
|
||||
.data(nodes, d => d.id || (d.id = ++nodeIndex));
|
||||
.property('__oldData__', (d) => d)
|
||||
.data(nodes, (d) => d.id || (d.id = ++nodeIndex));
|
||||
let nodeEnter = node
|
||||
.enter()
|
||||
.append('g')
|
||||
.attr({
|
||||
class: 'node',
|
||||
transform: d => {
|
||||
transform: (d) => {
|
||||
const position = findParentNodePosition(
|
||||
nodePositionsById,
|
||||
d.id,
|
||||
n => previousNodePositionsById[n.id]
|
||||
(n) => previousNodePositionsById[n.id]
|
||||
);
|
||||
const previousPosition =
|
||||
(position && previousNodePositionsById[position.id]) ||
|
||||
previousNodePositionsById.root;
|
||||
return `translate(${previousPosition.y},${previousPosition.x})`;
|
||||
}
|
||||
},
|
||||
})
|
||||
.style({
|
||||
fill: style.text.colors.default,
|
||||
cursor: 'pointer'
|
||||
cursor: 'pointer',
|
||||
})
|
||||
.on({
|
||||
mouseover: function mouseover() {
|
||||
d3.select(this).style({
|
||||
fill: style.text.colors.hover
|
||||
fill: style.text.colors.hover,
|
||||
});
|
||||
},
|
||||
mouseout: function mouseout() {
|
||||
d3.select(this).style({
|
||||
fill: style.text.colors.default
|
||||
fill: style.text.colors.default,
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
if (!tooltipOptions.disabled) {
|
||||
|
|
@ -280,14 +277,14 @@ export default function(DOMNode, options = {}) {
|
|||
.append('circle')
|
||||
.attr({
|
||||
class: 'nodeCircle',
|
||||
r: 0
|
||||
r: 0,
|
||||
})
|
||||
.on({
|
||||
click: clickedNode => {
|
||||
click: (clickedNode) => {
|
||||
if (d3.event.defaultPrevented) return;
|
||||
toggleChildren(clickedNode);
|
||||
update();
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
nodeEnterInnerGroup
|
||||
|
|
@ -296,29 +293,29 @@ export default function(DOMNode, options = {}) {
|
|||
class: 'nodeText',
|
||||
'text-anchor': 'middle',
|
||||
transform: 'translate(0,0)',
|
||||
dy: '.35em'
|
||||
dy: '.35em',
|
||||
})
|
||||
.style({
|
||||
'fill-opacity': 0
|
||||
'fill-opacity': 0,
|
||||
})
|
||||
.text(d => d.name)
|
||||
.text((d) => d.name)
|
||||
.on({
|
||||
click: onClickText
|
||||
click: onClickText,
|
||||
});
|
||||
|
||||
// update the text to reflect whether node has children or not
|
||||
node.select('text').text(d => d.name);
|
||||
node.select('text').text((d) => d.name);
|
||||
|
||||
// change the circle fill depending on whether it has children and is collapsed
|
||||
node.select('circle').style({
|
||||
stroke: 'black',
|
||||
'stroke-width': '1.5px',
|
||||
fill: d =>
|
||||
fill: (d) =>
|
||||
d._children
|
||||
? style.node.colors.collapsed
|
||||
: d.children
|
||||
? style.node.colors.parent
|
||||
: style.node.colors.default
|
||||
: style.node.colors.default,
|
||||
});
|
||||
|
||||
// transition nodes to their new position
|
||||
|
|
@ -326,7 +323,7 @@ export default function(DOMNode, options = {}) {
|
|||
.transition()
|
||||
.duration(transitionDuration)
|
||||
.attr({
|
||||
transform: d => `translate(${d.y},${d.x})`
|
||||
transform: (d) => `translate(${d.y},${d.x})`,
|
||||
});
|
||||
|
||||
// ensure circle radius is correct
|
||||
|
|
@ -342,7 +339,7 @@ export default function(DOMNode, options = {}) {
|
|||
(d.children || d._children ? -1 : 1) *
|
||||
(this.getBBox().width / 2 + style.node.radius + 5);
|
||||
return `translate(${x},0)`;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
// blink updated nodes
|
||||
|
|
@ -366,17 +363,17 @@ export default function(DOMNode, options = {}) {
|
|||
.transition()
|
||||
.duration(transitionDuration)
|
||||
.attr({
|
||||
transform: d => {
|
||||
transform: (d) => {
|
||||
const position = findParentNodePosition(
|
||||
previousNodePositionsById,
|
||||
d.id,
|
||||
n => nodePositionsById[n.id]
|
||||
(n) => nodePositionsById[n.id]
|
||||
);
|
||||
const futurePosition =
|
||||
(position && nodePositionsById[position.id]) ||
|
||||
nodePositionsById.root;
|
||||
return `translate(${futurePosition.y},${futurePosition.x})`;
|
||||
}
|
||||
},
|
||||
})
|
||||
.remove();
|
||||
|
||||
|
|
@ -385,7 +382,7 @@ export default function(DOMNode, options = {}) {
|
|||
nodeExit.select('text').style('fill-opacity', 0);
|
||||
|
||||
// update the links
|
||||
let link = vis.selectAll('path.link').data(links, d => d.target.id);
|
||||
let link = vis.selectAll('path.link').data(links, (d) => d.target.id);
|
||||
|
||||
// enter any new links at the parent's previous position
|
||||
link
|
||||
|
|
@ -393,30 +390,27 @@ export default function(DOMNode, options = {}) {
|
|||
.insert('path', 'g')
|
||||
.attr({
|
||||
class: 'link',
|
||||
d: d => {
|
||||
d: (d) => {
|
||||
const position = findParentNodePosition(
|
||||
nodePositionsById,
|
||||
d.target.id,
|
||||
n => previousNodePositionsById[n.id]
|
||||
(n) => previousNodePositionsById[n.id]
|
||||
);
|
||||
const previousPosition =
|
||||
(position && previousNodePositionsById[position.id]) ||
|
||||
previousNodePositionsById.root;
|
||||
return diagonal({
|
||||
source: previousPosition,
|
||||
target: previousPosition
|
||||
target: previousPosition,
|
||||
});
|
||||
}
|
||||
},
|
||||
})
|
||||
.style(style.link);
|
||||
|
||||
// transition links to their new position
|
||||
link
|
||||
.transition()
|
||||
.duration(transitionDuration)
|
||||
.attr({
|
||||
d: diagonal
|
||||
});
|
||||
link.transition().duration(transitionDuration).attr({
|
||||
d: diagonal,
|
||||
});
|
||||
|
||||
// transition exiting nodes to the parent's new position
|
||||
link
|
||||
|
|
@ -424,20 +418,20 @@ export default function(DOMNode, options = {}) {
|
|||
.transition()
|
||||
.duration(transitionDuration)
|
||||
.attr({
|
||||
d: d => {
|
||||
d: (d) => {
|
||||
const position = findParentNodePosition(
|
||||
previousNodePositionsById,
|
||||
d.target.id,
|
||||
n => nodePositionsById[n.id]
|
||||
(n) => nodePositionsById[n.id]
|
||||
);
|
||||
const futurePosition =
|
||||
(position && nodePositionsById[position.id]) ||
|
||||
nodePositionsById.root;
|
||||
return diagonal({
|
||||
source: futurePosition,
|
||||
target: futurePosition
|
||||
target: futurePosition,
|
||||
});
|
||||
}
|
||||
},
|
||||
})
|
||||
.remove();
|
||||
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ export function getNodeGroupByDepthCount(rootNode) {
|
|||
|
||||
nodeGroupByDepthCount[depth + 1] += node.children.length;
|
||||
|
||||
node.children.forEach(childNode => {
|
||||
node.children.forEach((childNode) => {
|
||||
traverseFrom(childNode, depth + 1);
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,14 +3,14 @@
|
|||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{ test: /\.js$/, loaders: ['babel-loader'], exclude: /node_modules/ }
|
||||
]
|
||||
{ test: /\.js$/, loaders: ['babel-loader'], exclude: /node_modules/ },
|
||||
],
|
||||
},
|
||||
output: {
|
||||
library: 'd3-state-visualizer',
|
||||
libraryTarget: 'umd'
|
||||
libraryTarget: 'umd',
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['.js']
|
||||
}
|
||||
extensions: ['.js'],
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@ var config = Object.assign({}, baseConfig);
|
|||
config.mode = 'development';
|
||||
config.plugins = [
|
||||
new webpack.DefinePlugin({
|
||||
'process.env.NODE_ENV': JSON.stringify('development')
|
||||
})
|
||||
'process.env.NODE_ENV': JSON.stringify('development'),
|
||||
}),
|
||||
];
|
||||
|
||||
module.exports = config;
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@ var config = Object.assign({}, baseConfig);
|
|||
config.mode = 'production';
|
||||
config.plugins = [
|
||||
new webpack.DefinePlugin({
|
||||
'process.env.NODE_ENV': JSON.stringify('production')
|
||||
})
|
||||
'process.env.NODE_ENV': JSON.stringify('production'),
|
||||
}),
|
||||
];
|
||||
|
||||
module.exports = config;
|
||||
|
|
|
|||
12
packages/d3tooltip/src/index.js
vendored
12
packages/d3tooltip/src/index.js
vendored
|
|
@ -6,7 +6,7 @@ const defaultOptions = {
|
|||
left: undefined, // mouseX
|
||||
top: undefined, // mouseY
|
||||
offset: { left: 0, top: 0 },
|
||||
root: undefined
|
||||
root: undefined,
|
||||
};
|
||||
|
||||
export default function tooltip(d3, className = 'tooltip', options = {}) {
|
||||
|
|
@ -22,7 +22,7 @@ export default function tooltip(d3, className = 'tooltip', options = {}) {
|
|||
|
||||
function tip(selection) {
|
||||
selection.on({
|
||||
'mouseover.tip': node => {
|
||||
'mouseover.tip': (node) => {
|
||||
let [mouseX, mouseY] = d3.mouse(rootNode);
|
||||
let [x, y] = [left || mouseX + offset.left, top || mouseY - offset.top];
|
||||
|
||||
|
|
@ -36,22 +36,22 @@ export default function tooltip(d3, className = 'tooltip', options = {}) {
|
|||
'z-index': 1001,
|
||||
left: x + 'px',
|
||||
top: y + 'px',
|
||||
...styles
|
||||
...styles,
|
||||
})
|
||||
.html(() => text(node));
|
||||
},
|
||||
|
||||
'mousemove.tip': node => {
|
||||
'mousemove.tip': (node) => {
|
||||
let [mouseX, mouseY] = d3.mouse(rootNode);
|
||||
let [x, y] = [left || mouseX + offset.left, top || mouseY - offset.top];
|
||||
|
||||
el.style({
|
||||
left: x + 'px',
|
||||
top: y + 'px'
|
||||
top: y + 'px',
|
||||
}).html(() => text(node));
|
||||
},
|
||||
|
||||
'mouseout.tip': () => el.remove()
|
||||
'mouseout.tip': () => el.remove(),
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
2
packages/d3tooltip/src/utils/index.js
vendored
2
packages/d3tooltip/src/utils/index.js
vendored
|
|
@ -3,5 +3,5 @@ import functor from './functor';
|
|||
|
||||
export default {
|
||||
prependClass,
|
||||
functor
|
||||
functor,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,27 +3,27 @@ const path = require('path');
|
|||
module.exports = (env = {}) => ({
|
||||
mode: 'production',
|
||||
entry: {
|
||||
app: ['./src/index.js']
|
||||
app: ['./src/index.js'],
|
||||
},
|
||||
output: {
|
||||
library: 'd3tooltip',
|
||||
libraryTarget: 'umd',
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
filename: env.minimize ? 'd3tooltip.min.js' : 'd3tooltip.js'
|
||||
filename: env.minimize ? 'd3tooltip.min.js' : 'd3tooltip.js',
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.js$/,
|
||||
loader: 'babel-loader',
|
||||
exclude: /node_modules/
|
||||
}
|
||||
]
|
||||
exclude: /node_modules/,
|
||||
},
|
||||
],
|
||||
},
|
||||
optimization: {
|
||||
minimize: !!env.minimize
|
||||
minimize: !!env.minimize,
|
||||
},
|
||||
performance: {
|
||||
hints: false
|
||||
}
|
||||
hints: false,
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ addDecorator(
|
|||
showStoriesPanel: true,
|
||||
showAddonPanel: true,
|
||||
showSearchBox: false,
|
||||
addonPanelInRight: true
|
||||
addonPanelInRight: true,
|
||||
})
|
||||
);
|
||||
|
||||
|
|
@ -24,7 +24,7 @@ addDecorator(withInfo);
|
|||
const req = require.context('../src/', true, /stories\/index\.js$/);
|
||||
|
||||
function loadStories() {
|
||||
req.keys().forEach(filename => req(filename));
|
||||
req.keys().forEach((filename) => req(filename));
|
||||
}
|
||||
|
||||
configure(loadStories, module);
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ const themes = listThemes();
|
|||
export default class Panel extends React.Component {
|
||||
state = DEFAULT_THEME_STATE;
|
||||
|
||||
onChange = o => {
|
||||
onChange = (o) => {
|
||||
const state = { [o.name.split(' ').slice(-1)[0]]: o.value };
|
||||
this.props.channel.emit(EVENT_ID_DATA, state);
|
||||
this.setState(state);
|
||||
|
|
@ -37,19 +37,19 @@ export default class Panel extends React.Component {
|
|||
type: 'select',
|
||||
name: 'theme',
|
||||
value: theme,
|
||||
options: themes
|
||||
options: themes,
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
name: 'color scheme',
|
||||
value: scheme,
|
||||
options: schemes
|
||||
options: schemes,
|
||||
},
|
||||
{
|
||||
type: 'boolean',
|
||||
name: 'light',
|
||||
value: light
|
||||
}
|
||||
value: light,
|
||||
},
|
||||
]}
|
||||
onFieldChange={this.onChange}
|
||||
onFieldClick={this.onClick}
|
||||
|
|
|
|||
|
|
@ -5,5 +5,5 @@ export const CSS_CLASS = 'redux-devtools-storybook';
|
|||
export const DEFAULT_THEME_STATE = {
|
||||
theme: 'default',
|
||||
scheme: 'default',
|
||||
light: true
|
||||
light: true,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@ import addons from '@storybook/addons';
|
|||
import Panel from './Panel';
|
||||
import { ADDON_ID, PANEL_ID } from './constant';
|
||||
|
||||
addons.register(ADDON_ID, api => {
|
||||
addons.register(ADDON_ID, (api) => {
|
||||
const channel = addons.getChannel();
|
||||
addons.addPanel(PANEL_ID, {
|
||||
title: 'Theme',
|
||||
render: ({ active }) =>
|
||||
active ? <Panel channel={channel} api={api} /> : null
|
||||
active ? <Panel channel={channel} api={api} /> : null,
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ class Theme extends React.Component {
|
|||
channel.removeListener(EVENT_ID_DATA, this.onChannel);
|
||||
}
|
||||
|
||||
onChannel = state => {
|
||||
onChannel = (state) => {
|
||||
this.setState(state);
|
||||
};
|
||||
|
||||
|
|
@ -25,4 +25,4 @@ class Theme extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
export const withTheme = story => <Theme>{story()}</Theme>;
|
||||
export const withTheme = (story) => <Theme>{story()}</Theme>;
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ export default class Button extends Component {
|
|||
);
|
||||
}
|
||||
|
||||
onMouseUp = e => {
|
||||
onMouseUp = (e) => {
|
||||
e.target.blur();
|
||||
};
|
||||
|
||||
|
|
@ -66,7 +66,7 @@ Button.propTypes = {
|
|||
'bottom-left',
|
||||
'bottom-right',
|
||||
'top-left',
|
||||
'top-right'
|
||||
'top-right',
|
||||
]),
|
||||
onClick: PropTypes.func,
|
||||
type: PropTypes.string,
|
||||
|
|
@ -82,11 +82,11 @@ Button.propTypes = {
|
|||
'base0C',
|
||||
'base0D',
|
||||
'base0E',
|
||||
'base0F'
|
||||
'base0F',
|
||||
]),
|
||||
theme: PropTypes.object
|
||||
theme: PropTypes.object,
|
||||
};
|
||||
|
||||
Button.defaultProps = {
|
||||
tooltipPosition: 'top'
|
||||
tooltipPosition: 'top',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ storiesOf('Button', module)
|
|||
'bottom-left',
|
||||
'bottom-right',
|
||||
'top-left',
|
||||
'top-right'
|
||||
'top-right',
|
||||
])}
|
||||
primary={boolean('primary', true)}
|
||||
size={select('size', ['big', 'normal', 'small'], 'normal')}
|
||||
|
|
@ -52,7 +52,7 @@ storiesOf('Button', module)
|
|||
'base0C',
|
||||
'base0D',
|
||||
'base0E',
|
||||
'base0F'
|
||||
'base0F',
|
||||
],
|
||||
'base08'
|
||||
)}
|
||||
|
|
@ -65,7 +65,7 @@ storiesOf('Button', module)
|
|||
'bottom-left',
|
||||
'bottom-right',
|
||||
'top-left',
|
||||
'top-right'
|
||||
'top-right',
|
||||
])}
|
||||
size={select('size', ['big', 'normal', 'small'], 'normal')}
|
||||
disabled={boolean('Disabled', false)}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { css } from 'styled-components';
|
|||
import { fadeIn } from '../../utils/animations';
|
||||
import colorEffect from '../../utils/color';
|
||||
|
||||
const both = tooltipPosition => {
|
||||
const both = (tooltipPosition) => {
|
||||
switch (tooltipPosition) {
|
||||
case 'bottom':
|
||||
return `
|
||||
|
|
@ -46,7 +46,7 @@ const both = tooltipPosition => {
|
|||
}
|
||||
};
|
||||
|
||||
const before = tooltipPosition => {
|
||||
const before = (tooltipPosition) => {
|
||||
switch (tooltipPosition) {
|
||||
case 'bottom-left':
|
||||
return `
|
||||
|
|
@ -110,13 +110,13 @@ const after = (tooltipPosition, color) => {
|
|||
}
|
||||
};
|
||||
|
||||
const getDirection = tooltipPosition => {
|
||||
const getDirection = (tooltipPosition) => {
|
||||
return tooltipPosition.indexOf('-') > 0
|
||||
? tooltipPosition.substring(0, tooltipPosition.indexOf('-'))
|
||||
: tooltipPosition;
|
||||
};
|
||||
|
||||
const getSize = size => {
|
||||
const getSize = (size) => {
|
||||
switch (size) {
|
||||
case 'big':
|
||||
return 'min-height: 34px; padding: 2px 12px;';
|
||||
|
|
@ -146,7 +146,7 @@ export const commonStyle = ({ theme, mark, size }) => css`
|
|||
}
|
||||
|
||||
${mark &&
|
||||
`
|
||||
`
|
||||
background-color: ${colorEffect(
|
||||
theme[mark],
|
||||
'fade',
|
||||
|
|
@ -169,7 +169,7 @@ export const tooltipStyle = ({
|
|||
tooltipTitle,
|
||||
tooltipPosition,
|
||||
mark,
|
||||
size
|
||||
size,
|
||||
}) => css`
|
||||
${commonStyle({ theme, mark, size })}
|
||||
|
||||
|
|
@ -208,7 +208,8 @@ export const tooltipStyle = ({
|
|||
${theme.type === 'material' ? `animation: ${fadeIn} 500ms;` : ''}
|
||||
}
|
||||
|
||||
${theme.type !== 'material' &&
|
||||
${
|
||||
theme.type !== 'material' &&
|
||||
`
|
||||
&:after {
|
||||
content: "";
|
||||
|
|
@ -218,7 +219,8 @@ export const tooltipStyle = ({
|
|||
${after(tooltipPosition, theme.base02)}
|
||||
${getDirection(tooltipPosition)}: 7px;
|
||||
}
|
||||
`}
|
||||
`
|
||||
}
|
||||
|
||||
&:hover:after,
|
||||
&:hover:before {
|
||||
|
|
|
|||
|
|
@ -33,14 +33,16 @@ export const style = ({ theme, primary, disabled }) => css`
|
|||
`
|
||||
}
|
||||
|
||||
${!disabled &&
|
||||
${
|
||||
!disabled &&
|
||||
`
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: ${primary ? theme.base07 : theme.base02};
|
||||
box-shadow: 1px 1px 2px ${theme.base03};
|
||||
}
|
||||
`}
|
||||
`
|
||||
}
|
||||
&:focus {
|
||||
border: 1px solid ${theme.base0D};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ Container.propTypes = {
|
|||
children: PropTypes.node,
|
||||
themeData: PropTypes.object,
|
||||
theme: PropTypes.object,
|
||||
className: PropTypes.string
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
export default Container;
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@ export const MainContainerWrapper = styled.div`
|
|||
height: 100%;
|
||||
width: 100%;
|
||||
flex-flow: column nowrap;
|
||||
background-color: ${props => color(props.theme.base00, 'lighten', 0.03)};
|
||||
color: ${props => props.theme.base07};
|
||||
background-color: ${(props) => color(props.theme.base00, 'lighten', 0.03)};
|
||||
color: ${(props) => props.theme.base07};
|
||||
font-size: 12px;
|
||||
|
||||
div,
|
||||
|
|
@ -16,13 +16,13 @@ export const MainContainerWrapper = styled.div`
|
|||
keygen,
|
||||
select,
|
||||
button {
|
||||
font-family: ${props => props.theme.fontFamily || 'monaco, monospace'};
|
||||
font-family: ${(props) => props.theme.fontFamily || 'monaco, monospace'};
|
||||
}
|
||||
|
||||
.CodeMirror div,
|
||||
pre,
|
||||
.monitor-LogMonitor * {
|
||||
font-family: ${props =>
|
||||
font-family: ${(props) =>
|
||||
props.theme.codeFontFamily || props.theme.fontFamily || 'monospace'};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -30,11 +30,11 @@ export default class ContextMenu extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
onMouseUp = e => {
|
||||
onMouseUp = (e) => {
|
||||
e.target.blur();
|
||||
};
|
||||
|
||||
onClick = e => {
|
||||
onClick = (e) => {
|
||||
this.props.onClick(e.target.value);
|
||||
};
|
||||
|
||||
|
|
@ -64,7 +64,7 @@ export default class ContextMenu extends Component {
|
|||
}
|
||||
|
||||
updateItems(items) {
|
||||
this.items = items.map(item => {
|
||||
this.items = items.map((item) => {
|
||||
const value = item.value || item.name;
|
||||
if (item.type === 'button') return item;
|
||||
return (
|
||||
|
|
@ -80,7 +80,7 @@ export default class ContextMenu extends Component {
|
|||
});
|
||||
}
|
||||
|
||||
menuRef = c => {
|
||||
menuRef = (c) => {
|
||||
this.menu = c;
|
||||
};
|
||||
|
||||
|
|
@ -103,5 +103,5 @@ ContextMenu.propTypes = {
|
|||
onClick: PropTypes.func.isRequired,
|
||||
x: PropTypes.number.isRequired,
|
||||
y: PropTypes.number.isRequired,
|
||||
visible: PropTypes.bool
|
||||
visible: PropTypes.bool,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
export const items = [
|
||||
{
|
||||
name: 'Menu Item 1'
|
||||
name: 'Menu Item 1',
|
||||
},
|
||||
{
|
||||
name: 'Menu Item 2'
|
||||
name: 'Menu Item 2',
|
||||
},
|
||||
{
|
||||
name: 'Menu Item 3'
|
||||
}
|
||||
name: 'Menu Item 3',
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -13,11 +13,11 @@ export default class Dialog extends (PureComponent || Component) {
|
|||
else this.props.onSubmit();
|
||||
};
|
||||
|
||||
getFormButtonRef = node => {
|
||||
getFormButtonRef = (node) => {
|
||||
this.submitButton = node;
|
||||
};
|
||||
|
||||
onKeyDown = e => {
|
||||
onKeyDown = (e) => {
|
||||
if (e.keyCode === 27 /* esc */) {
|
||||
e.preventDefault();
|
||||
this.props.onDismiss(false);
|
||||
|
|
@ -81,7 +81,7 @@ export default class Dialog extends (PureComponent || Component) {
|
|||
onClick={this.onSubmit}
|
||||
>
|
||||
{submitText}
|
||||
</Button>
|
||||
</Button>,
|
||||
]
|
||||
: actions}
|
||||
</div>
|
||||
|
|
@ -111,5 +111,5 @@ Dialog.propTypes = {
|
|||
modal: PropTypes.bool,
|
||||
onDismiss: PropTypes.func,
|
||||
onSubmit: PropTypes.func,
|
||||
theme: PropTypes.object
|
||||
theme: PropTypes.object,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ export default class Editor extends Component {
|
|||
readOnly: this.props.readOnly,
|
||||
autofocus: this.props.autofocus,
|
||||
foldGutter: this.props.foldGutter,
|
||||
gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
|
||||
gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
|
||||
});
|
||||
|
||||
if (this.props.onChange) {
|
||||
|
|
@ -56,7 +56,7 @@ export default class Editor extends Component {
|
|||
this.cm = null;
|
||||
}
|
||||
|
||||
getRef = node => {
|
||||
getRef = (node) => {
|
||||
this.node = node;
|
||||
};
|
||||
|
||||
|
|
@ -74,7 +74,7 @@ Editor.propTypes = {
|
|||
theme: PropTypes.object,
|
||||
foldGutter: PropTypes.bool,
|
||||
autofocus: PropTypes.bool,
|
||||
onChange: PropTypes.func
|
||||
onChange: PropTypes.func,
|
||||
};
|
||||
|
||||
Editor.defaultProps = {
|
||||
|
|
@ -84,5 +84,5 @@ Editor.defaultProps = {
|
|||
lineWrapping: false,
|
||||
readOnly: false,
|
||||
foldGutter: true,
|
||||
autofocus: false
|
||||
autofocus: false,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ const value2 = `
|
|||
/* eslint-disable react/prop-types */
|
||||
export default class WithTabs extends Component {
|
||||
state = {
|
||||
selected: 'Function 1'
|
||||
selected: 'Function 1',
|
||||
};
|
||||
|
||||
render() {
|
||||
|
|
@ -25,16 +25,16 @@ export default class WithTabs extends Component {
|
|||
{
|
||||
name: 'Function 1',
|
||||
component: Editor,
|
||||
selector: () => ({ value: value1, lineNumbers })
|
||||
selector: () => ({ value: value1, lineNumbers }),
|
||||
},
|
||||
{
|
||||
name: 'Function 2',
|
||||
component: Editor,
|
||||
selector: () => ({ value: value2, lineNumbers })
|
||||
}
|
||||
selector: () => ({ value: value2, lineNumbers }),
|
||||
},
|
||||
]}
|
||||
selected={this.state.selected}
|
||||
onClick={selected => {
|
||||
onClick={(selected) => {
|
||||
this.setState({ selected });
|
||||
}}
|
||||
align={select('align', ['left', 'right', 'center'], 'left')}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ export const defaultStyle = `
|
|||
}
|
||||
`;
|
||||
|
||||
export const themedStyle = theme => css`
|
||||
export const themedStyle = (theme) => css`
|
||||
height: 100%;
|
||||
|
||||
> div {
|
||||
|
|
|
|||
|
|
@ -49,5 +49,5 @@ Form.propTypes = {
|
|||
formData: PropTypes.any,
|
||||
widgets: PropTypes.objectOf(
|
||||
PropTypes.oneOfType([PropTypes.func, PropTypes.object])
|
||||
)
|
||||
),
|
||||
};
|
||||
|
|
|
|||
|
|
@ -22,6 +22,6 @@ storiesOf('Form', module)
|
|||
{
|
||||
info:
|
||||
'Wrapper around [`react-jsonschema-form`](https://github.com/mozilla-services/react-jsonschema-form)' +
|
||||
' with custom widgets.'
|
||||
' with custom widgets.',
|
||||
}
|
||||
);
|
||||
|
|
|
|||
|
|
@ -7,83 +7,83 @@ module.exports = {
|
|||
properties: {
|
||||
name: {
|
||||
type: 'string',
|
||||
title: 'Full name'
|
||||
title: 'Full name',
|
||||
},
|
||||
age: {
|
||||
type: 'integer',
|
||||
title: 'Age'
|
||||
title: 'Age',
|
||||
},
|
||||
bio: {
|
||||
type: 'string',
|
||||
title: 'Bio'
|
||||
title: 'Bio',
|
||||
},
|
||||
password: {
|
||||
type: 'string',
|
||||
title: 'Password',
|
||||
minLength: 3
|
||||
minLength: 3,
|
||||
},
|
||||
multipleChoicesList: {
|
||||
type: 'array',
|
||||
title: 'A multiple choices list',
|
||||
items: {
|
||||
type: 'string',
|
||||
enum: ['foo', 'bar', 'fuzz']
|
||||
enum: ['foo', 'bar', 'fuzz'],
|
||||
},
|
||||
uniqueItems: true
|
||||
uniqueItems: true,
|
||||
},
|
||||
numberEnum: {
|
||||
type: 'number',
|
||||
title: 'Number enum',
|
||||
enum: [1, 2, 3]
|
||||
enum: [1, 2, 3],
|
||||
},
|
||||
numberEnumRadio: {
|
||||
type: 'number',
|
||||
title: 'Number enum',
|
||||
enum: [1, 2, 3]
|
||||
enum: [1, 2, 3],
|
||||
},
|
||||
integerRange: {
|
||||
title: 'Integer range',
|
||||
type: 'integer',
|
||||
minimum: 42,
|
||||
maximum: 100
|
||||
}
|
||||
}
|
||||
maximum: 100,
|
||||
},
|
||||
},
|
||||
},
|
||||
uiSchema: {
|
||||
name: {
|
||||
'ui:autofocus': true
|
||||
'ui:autofocus': true,
|
||||
},
|
||||
age: {
|
||||
'ui:widget': 'updown'
|
||||
'ui:widget': 'updown',
|
||||
},
|
||||
bio: {
|
||||
'ui:widget': 'textarea'
|
||||
'ui:widget': 'textarea',
|
||||
},
|
||||
password: {
|
||||
'ui:widget': 'password',
|
||||
'ui:help': 'Hint: Make it strong!'
|
||||
'ui:help': 'Hint: Make it strong!',
|
||||
},
|
||||
date: {
|
||||
'ui:widget': 'alt-datetime'
|
||||
'ui:widget': 'alt-datetime',
|
||||
},
|
||||
multipleChoicesList: {
|
||||
'ui:widget': 'checkboxes'
|
||||
'ui:widget': 'checkboxes',
|
||||
},
|
||||
numberEnumRadio: {
|
||||
'ui:widget': 'radio',
|
||||
'ui:options': {
|
||||
inline: true
|
||||
}
|
||||
inline: true,
|
||||
},
|
||||
},
|
||||
integerRange: {
|
||||
'ui:widget': 'range'
|
||||
}
|
||||
'ui:widget': 'range',
|
||||
},
|
||||
},
|
||||
formData: {
|
||||
name: 'Chuck Norris',
|
||||
age: 75,
|
||||
bio: 'Roundhouse kicking asses since 1940',
|
||||
password: 'noneed',
|
||||
integerRange: 52
|
||||
}
|
||||
integerRange: 52,
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -49,9 +49,9 @@ Notification.propTypes = {
|
|||
children: PropTypes.any.isRequired,
|
||||
type: PropTypes.oneOf(['info', 'success', 'warning', 'error']),
|
||||
onClose: PropTypes.func,
|
||||
theme: PropTypes.object
|
||||
theme: PropTypes.object,
|
||||
};
|
||||
|
||||
Notification.defaultProps = {
|
||||
type: 'info'
|
||||
type: 'info',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -13,11 +13,11 @@ export default class SegmentedControl extends Component {
|
|||
);
|
||||
}
|
||||
|
||||
onClick = e => {
|
||||
onClick = (e) => {
|
||||
this.props.onClick(e.target.value);
|
||||
};
|
||||
|
||||
onMouseUp = e => {
|
||||
onMouseUp = (e) => {
|
||||
e.target.blur();
|
||||
};
|
||||
|
||||
|
|
@ -25,7 +25,7 @@ export default class SegmentedControl extends Component {
|
|||
const { values, selected } = this.props;
|
||||
return (
|
||||
<SegmentedWrapper disabled={this.props.disabled} theme={this.props.theme}>
|
||||
{values.map(button => (
|
||||
{values.map((button) => (
|
||||
<button
|
||||
key={button}
|
||||
value={button}
|
||||
|
|
@ -46,5 +46,5 @@ SegmentedControl.propTypes = {
|
|||
selected: PropTypes.string,
|
||||
onClick: PropTypes.func,
|
||||
disabled: PropTypes.bool,
|
||||
theme: PropTypes.object
|
||||
theme: PropTypes.object,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -23,12 +23,12 @@ Select.propTypes = {
|
|||
simpleValue: PropTypes.bool, // pass the value with label to onChange
|
||||
value: PropTypes.any, // initial field value
|
||||
valueKey: PropTypes.string, // path of the label value in option objects
|
||||
openOuterUp: PropTypes.bool // value to control the opening direction
|
||||
openOuterUp: PropTypes.bool, // value to control the opening direction
|
||||
};
|
||||
|
||||
Select.defaultProps = {
|
||||
autosize: true,
|
||||
clearable: false,
|
||||
simpleValue: true,
|
||||
menuMaxHeight: 200
|
||||
menuMaxHeight: 200,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -42,6 +42,6 @@ storiesOf('Select', module)
|
|||
{
|
||||
info:
|
||||
'Wrapper around [React Select](https://github.com/JedWatson/react-select) with themes ' +
|
||||
'and new props like `openOuterUp` and `menuMaxHeight`.'
|
||||
'and new props like `openOuterUp` and `menuMaxHeight`.',
|
||||
}
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
export const options = [
|
||||
{ value: 'one', label: 'One' },
|
||||
{ value: 'two', label: 'Two' },
|
||||
{ value: 'hundred', label: 'One hundred' }
|
||||
{ value: 'hundred', label: 'One hundred' },
|
||||
];
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ export default class Slider extends Component {
|
|||
);
|
||||
}
|
||||
|
||||
onChange = e => {
|
||||
onChange = (e) => {
|
||||
this.props.onChange(parseFloat(e.target.value));
|
||||
};
|
||||
|
||||
|
|
@ -64,7 +64,7 @@ Slider.propTypes = {
|
|||
withValue: PropTypes.bool,
|
||||
disabled: PropTypes.bool,
|
||||
onChange: PropTypes.func,
|
||||
theme: PropTypes.object
|
||||
theme: PropTypes.object,
|
||||
};
|
||||
|
||||
Slider.defaultProps = { value: 0, min: 0, max: 100 };
|
||||
|
|
|
|||
|
|
@ -15,11 +15,11 @@ export default class Tabs extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
onMouseUp = e => {
|
||||
onMouseUp = (e) => {
|
||||
e.target.blur();
|
||||
};
|
||||
|
||||
onClick = e => {
|
||||
onClick = (e) => {
|
||||
this.props.onClick(e.target.value);
|
||||
};
|
||||
|
||||
|
|
@ -89,7 +89,7 @@ Tabs.propTypes = {
|
|||
main: PropTypes.bool,
|
||||
onClick: PropTypes.func.isRequired,
|
||||
collapsible: PropTypes.bool,
|
||||
position: PropTypes.oneOf(['left', 'right', 'center'])
|
||||
position: PropTypes.oneOf(['left', 'right', 'center']),
|
||||
};
|
||||
|
||||
Tabs.defaultProps = { position: 'left' };
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ export default class TabsHeader extends Component {
|
|||
visibleTabs: props.tabs.slice(),
|
||||
hiddenTabs: [],
|
||||
subMenuOpened: false,
|
||||
contextMenu: undefined
|
||||
contextMenu: undefined,
|
||||
};
|
||||
this.iconWidth = 0;
|
||||
this.hiddenTabsWidth = [];
|
||||
|
|
@ -154,22 +154,22 @@ export default class TabsHeader extends Component {
|
|||
this.setState({ subMenuOpened: false, contextMenu: undefined });
|
||||
};
|
||||
|
||||
getTabsWrapperRef = node => {
|
||||
getTabsWrapperRef = (node) => {
|
||||
this.tabsWrapperRef = node;
|
||||
};
|
||||
|
||||
getTabsRef = node => {
|
||||
getTabsRef = (node) => {
|
||||
this.tabsRef = node;
|
||||
};
|
||||
|
||||
expandMenu = e => {
|
||||
expandMenu = (e) => {
|
||||
const rect = e.currentTarget.children[0].getBoundingClientRect();
|
||||
this.setState({
|
||||
contextMenu: {
|
||||
top: rect.top + 10,
|
||||
left: rect.left
|
||||
left: rect.left,
|
||||
},
|
||||
subMenuOpened: true
|
||||
subMenuOpened: true,
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -211,5 +211,5 @@ TabsHeader.propTypes = {
|
|||
onClick: PropTypes.func,
|
||||
position: PropTypes.string,
|
||||
collapsible: PropTypes.bool,
|
||||
selected: PropTypes.string
|
||||
selected: PropTypes.string,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ const Component = ({ selected }) => (
|
|||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
fontSize: '22px'
|
||||
fontSize: '22px',
|
||||
}}
|
||||
>
|
||||
Selected {selected}
|
||||
|
|
@ -17,24 +17,24 @@ const Component = ({ selected }) => (
|
|||
);
|
||||
/* eslint-enable react/prop-types */
|
||||
|
||||
const selector = tab => ({ selected: tab.name });
|
||||
const selector = (tab) => ({ selected: tab.name });
|
||||
|
||||
export const tabs = [
|
||||
{
|
||||
name: 'Tab1',
|
||||
component: Component,
|
||||
selector
|
||||
selector,
|
||||
},
|
||||
{
|
||||
name: 'Tab2',
|
||||
component: Component,
|
||||
selector
|
||||
selector,
|
||||
},
|
||||
{
|
||||
name: 'Tab3',
|
||||
component: Component,
|
||||
selector
|
||||
}
|
||||
selector,
|
||||
},
|
||||
];
|
||||
|
||||
export const simple10Tabs = [];
|
||||
|
|
|
|||
|
|
@ -11,12 +11,12 @@ export const TabsContainer = styled.div`
|
|||
height: 100%;
|
||||
|
||||
> div > div:first-child {
|
||||
${props =>
|
||||
${(props) =>
|
||||
props.position !== 'left' &&
|
||||
`
|
||||
margin-left: auto !important;
|
||||
`}
|
||||
${props =>
|
||||
${(props) =>
|
||||
props.position === 'center' &&
|
||||
`
|
||||
margin-right: auto !important;
|
||||
|
|
|
|||
|
|
@ -7,11 +7,13 @@ export const style = ({ theme, main }) => css`
|
|||
background-color: ${theme.base01};
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
${!main &&
|
||||
${
|
||||
!main &&
|
||||
`
|
||||
border-top: 1px solid ${theme.base01};
|
||||
border-bottom: 1px solid ${theme.base02};
|
||||
`}
|
||||
`
|
||||
}
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ export const style = ({ theme, main }) => css`
|
|||
width: 100%;
|
||||
overflow: hidden;
|
||||
${!main &&
|
||||
`
|
||||
`
|
||||
border-top: 1px solid ${theme.base01};
|
||||
border-bottom: 1px solid ${theme.base02};
|
||||
`}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import {
|
|||
text,
|
||||
number,
|
||||
boolean,
|
||||
select
|
||||
select,
|
||||
} from '@storybook/addon-knobs';
|
||||
import PlayIcon from 'react-icons/lib/md/play-arrow';
|
||||
import RecordIcon from 'react-icons/lib/md/fiber-manual-record';
|
||||
|
|
@ -21,7 +21,7 @@ import {
|
|||
Select,
|
||||
Slider,
|
||||
SegmentedControl,
|
||||
Tabs
|
||||
Tabs,
|
||||
} from '../../';
|
||||
import { options } from '../../Select/stories/options';
|
||||
import { simple10Tabs } from '../../Tabs/stories/data';
|
||||
|
|
@ -54,7 +54,7 @@ storiesOf('Toolbar', module)
|
|||
'bottom-left',
|
||||
'bottom-right',
|
||||
'top-left',
|
||||
'top-right'
|
||||
'top-right',
|
||||
])}
|
||||
disabled={boolean('Disabled', false)}
|
||||
onClick={action('button clicked')}
|
||||
|
|
@ -72,7 +72,7 @@ storiesOf('Toolbar', module)
|
|||
'bottom-left',
|
||||
'bottom-right',
|
||||
'top-left',
|
||||
'top-right'
|
||||
'top-right',
|
||||
])}
|
||||
disabled={boolean('Disabled', false)}
|
||||
onClick={action('button clicked')}
|
||||
|
|
@ -98,7 +98,7 @@ storiesOf('Toolbar', module)
|
|||
'bottom-left',
|
||||
'bottom-right',
|
||||
'top-left',
|
||||
'top-right'
|
||||
'top-right',
|
||||
])}
|
||||
disabled={boolean('Disabled', false)}
|
||||
onClick={action('button clicked')}
|
||||
|
|
@ -123,7 +123,7 @@ storiesOf('Toolbar', module)
|
|||
'bottom-left',
|
||||
'bottom-right',
|
||||
'top-left',
|
||||
'top-right'
|
||||
'top-right',
|
||||
])}
|
||||
disabled={boolean('Disabled', false)}
|
||||
onClick={action('button clicked')}
|
||||
|
|
@ -147,7 +147,7 @@ storiesOf('Toolbar', module)
|
|||
'bottom-left',
|
||||
'bottom-right',
|
||||
'top-left',
|
||||
'top-right'
|
||||
'top-right',
|
||||
])}
|
||||
onClick={action('button clicked')}
|
||||
>
|
||||
|
|
@ -171,7 +171,7 @@ storiesOf('Toolbar', module)
|
|||
'bottom-left',
|
||||
'bottom-right',
|
||||
'top-left',
|
||||
'top-right'
|
||||
'top-right',
|
||||
])}
|
||||
disabled
|
||||
onClick={action('previous state clicked')}
|
||||
|
|
@ -188,7 +188,7 @@ storiesOf('Toolbar', module)
|
|||
'bottom-left',
|
||||
'bottom-right',
|
||||
'top-left',
|
||||
'top-right'
|
||||
'top-right',
|
||||
])}
|
||||
onClick={action('next state clicked')}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import styled from 'styled-components';
|
||||
|
||||
const Divider = styled.div`
|
||||
background-color: ${props => props.theme.base02};
|
||||
box-shadow: 1px 1px 2px ${props => props.theme.base00};
|
||||
height: ${props => props.theme.inputHeight || '30'}px;
|
||||
background-color: ${(props) => props.theme.base02};
|
||||
box-shadow: 1px 1px 2px ${(props) => props.theme.base00};
|
||||
height: ${(props) => props.theme.inputHeight || '30'}px;
|
||||
width: 1px;
|
||||
margin: auto 3px !important;
|
||||
flex-shrink: 0;
|
||||
|
|
|
|||
|
|
@ -5,24 +5,24 @@ const Toolbar = styled.div`
|
|||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
font-family: ${props => props.theme.fontFamily || 'monospace'};
|
||||
font-family: ${(props) => props.theme.fontFamily || 'monospace'};
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
${props => props.fullHeight && 'height: 100%;'}
|
||||
padding: ${props => (props.compact ? '0' : '5px')} 5px;
|
||||
background-color: ${props => props.theme.base01};
|
||||
${(props) => props.fullHeight && 'height: 100%;'}
|
||||
padding: ${(props) => (props.compact ? '0' : '5px')} 5px;
|
||||
background-color: ${(props) => props.theme.base01};
|
||||
text-align: center;
|
||||
position: relative;
|
||||
${({ borderPosition, theme }) =>
|
||||
borderPosition && `border-${borderPosition}: 1px solid ${theme.base02};`}
|
||||
|
||||
& > div {
|
||||
margin: auto ${props => (props.noBorder ? '0' : '1px;')};
|
||||
margin: auto ${(props) => (props.noBorder ? '0' : '1px;')};
|
||||
}
|
||||
|
||||
& button {
|
||||
border-radius: 0;
|
||||
${props => props.noBorder && 'border-color: transparent;'}
|
||||
${(props) => props.noBorder && 'border-color: transparent;'}
|
||||
white-space: nowrap;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
|
@ -37,7 +37,7 @@ const Toolbar = styled.div`
|
|||
cursor: pointer;
|
||||
border-radius: 0 !important;
|
||||
text-align: center;
|
||||
background-color: ${props => props.theme.base01};
|
||||
background-color: ${(props) => props.theme.base01};
|
||||
}
|
||||
|
||||
.Select-menu-outer {
|
||||
|
|
|
|||
|
|
@ -16,5 +16,5 @@ export default {
|
|||
base0C: '#56b6c2',
|
||||
base0D: '#61afef',
|
||||
base0E: '#c678dd',
|
||||
base0F: '#be5046'
|
||||
base0F: '#be5046',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -18,5 +18,5 @@ export default {
|
|||
base0C: '#86c1b9',
|
||||
base0D: '#1155cc',
|
||||
base0E: '#aa17e6',
|
||||
base0F: '#a16946'
|
||||
base0F: '#a16946',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -17,5 +17,5 @@ export default {
|
|||
base0C: '#a1efe4',
|
||||
base0D: '#62d6e8',
|
||||
base0E: '#b45bcf',
|
||||
base0F: '#00f769'
|
||||
base0F: '#00f769',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -17,5 +17,5 @@ export default {
|
|||
base0C: '#0086b3',
|
||||
base0D: '#183691',
|
||||
base0E: '#795da3',
|
||||
base0F: '#ed6a43'
|
||||
base0F: '#ed6a43',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -16,5 +16,5 @@ export default {
|
|||
base0C: '#c6c5fe',
|
||||
base0D: '#96cbfe',
|
||||
base0E: '#ff73fd',
|
||||
base0F: '#b18a3d'
|
||||
base0F: '#b18a3d',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -16,5 +16,5 @@ export default {
|
|||
base0C: '#02abea',
|
||||
base0D: '#0000d3',
|
||||
base0E: '#4700a5',
|
||||
base0F: '#90713a'
|
||||
base0F: '#90713a',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -16,5 +16,5 @@ export default {
|
|||
base0C: '#80CBC4',
|
||||
base0D: '#89DDFF',
|
||||
base0E: '#82AAFF',
|
||||
base0F: '#EC5F67'
|
||||
base0F: '#EC5F67',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -16,5 +16,5 @@ export default {
|
|||
base0C: '#5FB3B3',
|
||||
base0D: '#6699CC',
|
||||
base0E: '#C594C5',
|
||||
base0F: '#AB7967'
|
||||
base0F: '#AB7967',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -16,5 +16,5 @@ export default {
|
|||
base0C: '#72b9bf',
|
||||
base0D: '#5299bf',
|
||||
base0E: '#9989cc',
|
||||
base0F: '#b08060'
|
||||
base0F: '#b08060',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -16,5 +16,5 @@ export default {
|
|||
base0C: '#29adff',
|
||||
base0D: '#83769c',
|
||||
base0E: '#ff77a8',
|
||||
base0F: '#ffccaa'
|
||||
base0F: '#ffccaa',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -16,5 +16,5 @@ export default {
|
|||
base0C: '#52CBB0',
|
||||
base0D: '#33B5E1',
|
||||
base0E: '#A363D5',
|
||||
base0F: '#D73C9A'
|
||||
base0F: '#D73C9A',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -16,5 +16,5 @@ export default {
|
|||
base0C: '#2d9574',
|
||||
base0D: '#4f97d7',
|
||||
base0E: '#a31db1',
|
||||
base0F: '#b03060'
|
||||
base0F: '#b03060',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -16,5 +16,5 @@ export default {
|
|||
base0C: '#149bda',
|
||||
base0D: '#7864fa',
|
||||
base0E: '#b33ce8',
|
||||
base0F: '#d41acd'
|
||||
base0F: '#d41acd',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -16,5 +16,5 @@ export default {
|
|||
base0C: '#6eb958',
|
||||
base0D: '#88a4d3',
|
||||
base0E: '#bb90e2',
|
||||
base0F: '#b49368'
|
||||
base0F: '#b49368',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
export default colors => ({
|
||||
export default (colors) => ({
|
||||
...colors,
|
||||
fontFamily: "'Source Sans Pro', sans-serif",
|
||||
codeFontFamily: "'Source Code Pro', monospace",
|
||||
|
|
@ -10,5 +10,5 @@ export default colors => ({
|
|||
selectArrowWidth: 4, // Math.floor(theme.inputHeight / 7)
|
||||
inputInternalHeight: 28, // theme.inputHeight - theme.inputBorderWidth * 2
|
||||
inputBorderColor: colors.base02,
|
||||
inputFocusedStyle: `border-color: ${colors.base0D}`
|
||||
inputFocusedStyle: `border-color: ${colors.base0D}`,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
export default colors => ({
|
||||
export default (colors) => ({
|
||||
fontFamily: "'Roboto', sans-serif",
|
||||
codeFontFamily: "'Roboto Mono', monospace",
|
||||
inputPadding: 5,
|
||||
inputBorderRadius: 0,
|
||||
inputBorderColor: `transparent transparent ${colors.base02}`,
|
||||
inputFocusedStyle: `box-shadow: inset 0 -2px 0 ${colors.base0D};`
|
||||
inputFocusedStyle: `box-shadow: inset 0 -2px 0 ${colors.base0D};`,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { keyframes } from 'styled-components';
|
|||
export const spin = keyframes`
|
||||
to { transform: rotate(1turn); }
|
||||
`;
|
||||
export const spinner = theme => `
|
||||
export const spinner = (theme) => `
|
||||
animation: ${spin} 400ms infinite linear;
|
||||
width: ${theme.spinnerSize}px;
|
||||
height: ${theme.spinnerSize}px;
|
||||
|
|
@ -21,7 +21,7 @@ export const fadeIn = keyframes`
|
|||
`;
|
||||
|
||||
// Based on https://github.com/mladenplavsic/css-ripple-effect
|
||||
export const ripple = theme => `
|
||||
export const ripple = (theme) => `
|
||||
& {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
export const prefixSelectors = (tag, selectors, style) =>
|
||||
selectors.map(selector => `${tag}::-${selector} ${style}`);
|
||||
selectors.map((selector) => `${tag}::-${selector} ${style}`);
|
||||
|
|
|
|||
|
|
@ -8,9 +8,6 @@ import Color from 'color';
|
|||
*/
|
||||
|
||||
export default (color, effect, val) =>
|
||||
new Color(color)
|
||||
[effect](val)
|
||||
.hsl()
|
||||
.string();
|
||||
new Color(color)[effect](val).hsl().string();
|
||||
|
||||
// TODO: memoize it
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ const getStyle = (styles, type) =>
|
|||
|
||||
export default (styles, component) =>
|
||||
styled(component || 'div')`
|
||||
${props =>
|
||||
${(props) =>
|
||||
props.theme.type
|
||||
? getStyle(styles, props.theme.type)
|
||||
: // used outside of container (theme provider)
|
||||
|
|
@ -15,7 +15,7 @@ export default (styles, component) =>
|
|||
'default'
|
||||
)({
|
||||
...props,
|
||||
theme: getDefaultTheme(props.theme)
|
||||
theme: getDefaultTheme(props.theme),
|
||||
})}
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ function invertColors(theme) {
|
|||
base04: theme.base03,
|
||||
base05: theme.base02,
|
||||
base06: theme.base01,
|
||||
base07: theme.base00
|
||||
base07: theme.base00,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,10 +5,7 @@ import * as additionalSchemes from '../colorSchemes';
|
|||
import invertColors from '../utils/invertColors';
|
||||
|
||||
export const schemes = { ...baseSchemes, ...additionalSchemes };
|
||||
export const listSchemes = () =>
|
||||
Object.keys(schemes)
|
||||
.slice(1)
|
||||
.sort(); // remove `__esModule`
|
||||
export const listSchemes = () => Object.keys(schemes).slice(1).sort(); // remove `__esModule`
|
||||
export const listThemes = () => Object.keys(themes);
|
||||
|
||||
export const getTheme = ({ theme: type, scheme, light }) => {
|
||||
|
|
@ -23,7 +20,7 @@ export const getTheme = ({ theme: type, scheme, light }) => {
|
|||
let theme = {
|
||||
type,
|
||||
light,
|
||||
...themes.default(colors)
|
||||
...themes.default(colors),
|
||||
};
|
||||
if (type !== 'default') {
|
||||
theme = { ...theme, ...themes[type](colors) };
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { render, mount } from 'enzyme';
|
|||
import { renderToJson } from 'enzyme-to-json';
|
||||
import { Button } from '../src';
|
||||
|
||||
describe('Button', function() {
|
||||
describe('Button', function () {
|
||||
it('renders correctly', () => {
|
||||
const wrapper = render(<Button>Text</Button>);
|
||||
expect(renderToJson(wrapper)).toMatchSnapshot();
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { render } from 'enzyme';
|
|||
import { renderToJson } from 'enzyme-to-json';
|
||||
import { Container } from '../src';
|
||||
|
||||
describe('Container', function() {
|
||||
describe('Container', function () {
|
||||
it('renders correctly', () => {
|
||||
const wrapper = render(
|
||||
<Container
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { renderToJson } from 'enzyme-to-json';
|
|||
import { ContextMenu } from '../src';
|
||||
import { items } from '../src/ContextMenu/stories/data';
|
||||
|
||||
describe('ContextMenu', function() {
|
||||
describe('ContextMenu', function () {
|
||||
it('renders correctly', () => {
|
||||
const wrapper = render(
|
||||
<ContextMenu items={items} onClick={() => {}} x={100} y={100} />
|
||||
|
|
@ -17,10 +17,7 @@ describe('ContextMenu', function() {
|
|||
<ContextMenu items={items} onClick={onClick} x={100} y={100} />
|
||||
);
|
||||
|
||||
wrapper
|
||||
.find('button')
|
||||
.first()
|
||||
.simulate('click');
|
||||
wrapper.find('button').first().simulate('click');
|
||||
expect(onClick).toBeCalled();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { render, mount } from 'enzyme';
|
|||
import { renderToJson } from 'enzyme-to-json';
|
||||
import { Dialog } from '../src';
|
||||
|
||||
describe('Dialog', function() {
|
||||
describe('Dialog', function () {
|
||||
it('renders correctly', () => {
|
||||
const wrapper = render(<Dialog />);
|
||||
expect(renderToJson(wrapper)).toMatchSnapshot();
|
||||
|
|
@ -27,10 +27,7 @@ describe('Dialog', function() {
|
|||
const onDismiss = jest.fn();
|
||||
const wrapper = mount(<Dialog open onDismiss={onDismiss} />);
|
||||
|
||||
wrapper
|
||||
.find('button')
|
||||
.first()
|
||||
.simulate('click');
|
||||
wrapper.find('button').first().simulate('click');
|
||||
expect(onDismiss).toBeCalled();
|
||||
});
|
||||
|
||||
|
|
@ -38,10 +35,7 @@ describe('Dialog', function() {
|
|||
const onSubmit = jest.fn();
|
||||
const wrapper = mount(<Dialog open onSubmit={onSubmit} />);
|
||||
|
||||
wrapper
|
||||
.find('button')
|
||||
.last()
|
||||
.simulate('click');
|
||||
wrapper.find('button').last().simulate('click');
|
||||
expect(onSubmit).toBeCalled();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { mountToJson } from 'enzyme-to-json';
|
|||
import { Editor } from '../src';
|
||||
import 'codemirror/mode/javascript/javascript';
|
||||
|
||||
describe('Editor', function() {
|
||||
describe('Editor', function () {
|
||||
const getBoundingClientRect = jest.fn();
|
||||
const getClientRects = jest.fn();
|
||||
|
||||
|
|
@ -19,7 +19,7 @@ describe('Editor', function() {
|
|||
return {
|
||||
item: () => null,
|
||||
length: 0,
|
||||
[Symbol.iterator]: jest.fn()
|
||||
[Symbol.iterator]: jest.fn(),
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { shallowToJson } from 'enzyme-to-json';
|
|||
import { Form } from '../src';
|
||||
import { schema, uiSchema, formData } from '../src/Form/stories/schema';
|
||||
|
||||
describe('Form', function() {
|
||||
describe('Form', function () {
|
||||
it('renders correctly', () => {
|
||||
const wrapper = shallow(
|
||||
<Form formData={formData} schema={schema} uiSchema={uiSchema} />
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { render, mount } from 'enzyme';
|
|||
import { renderToJson } from 'enzyme-to-json';
|
||||
import { Notification } from '../src';
|
||||
|
||||
describe('Notification', function() {
|
||||
describe('Notification', function () {
|
||||
it('renders correctly', () => {
|
||||
const wrapper = render(<Notification>Message</Notification>);
|
||||
expect(renderToJson(wrapper)).toMatchSnapshot();
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { render, mount } from 'enzyme';
|
|||
import { renderToJson } from 'enzyme-to-json';
|
||||
import { SegmentedControl } from '../src';
|
||||
|
||||
describe('SegmentedControl', function() {
|
||||
describe('SegmentedControl', function () {
|
||||
it('renders correctly', () => {
|
||||
const wrapper = render(
|
||||
<SegmentedControl
|
||||
|
|
@ -26,10 +26,7 @@ describe('SegmentedControl', function() {
|
|||
/>
|
||||
);
|
||||
|
||||
wrapper
|
||||
.find('button')
|
||||
.first()
|
||||
.simulate('click');
|
||||
wrapper.find('button').first().simulate('click');
|
||||
expect(onClick).toBeCalled();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { renderToJson, mountToJson } from 'enzyme-to-json';
|
|||
import { Select } from '../src';
|
||||
import { options } from '../src/Select/stories/options';
|
||||
|
||||
describe('Select', function() {
|
||||
describe('Select', function () {
|
||||
it('renders correctly', () => {
|
||||
const wrapper = render(<Select options={options} onChange={() => {}} />);
|
||||
expect(renderToJson(wrapper)).toMatchSnapshot();
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { render, mount } from 'enzyme';
|
|||
import { renderToJson } from 'enzyme-to-json';
|
||||
import { Slider } from '../src';
|
||||
|
||||
describe('Slider', function() {
|
||||
describe('Slider', function () {
|
||||
it('renders correctly', () => {
|
||||
const wrapper = render(<Slider />);
|
||||
expect(renderToJson(wrapper)).toMatchSnapshot();
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { renderToJson } from 'enzyme-to-json';
|
|||
import { Tabs } from '../src';
|
||||
import { tabs, simple10Tabs } from '../src/Tabs/stories/data';
|
||||
|
||||
describe('Tabs', function() {
|
||||
describe('Tabs', function () {
|
||||
it('renders correctly', () => {
|
||||
const wrapper = render(<Tabs tabs={tabs} onClick={() => {}} />);
|
||||
expect(renderToJson(wrapper)).toMatchSnapshot();
|
||||
|
|
@ -28,10 +28,7 @@ describe('Tabs', function() {
|
|||
const onClick = jest.fn();
|
||||
const wrapper = mount(<Tabs tabs={tabs} onClick={onClick} />);
|
||||
|
||||
wrapper
|
||||
.find('button')
|
||||
.first()
|
||||
.simulate('click');
|
||||
wrapper.find('button').first().simulate('click');
|
||||
expect(onClick).toBeCalled();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { render } from 'enzyme';
|
|||
import { renderToJson } from 'enzyme-to-json';
|
||||
import { Toolbar, Divider, Spacer, Button } from '../src';
|
||||
|
||||
describe('Toolbar', function() {
|
||||
describe('Toolbar', function () {
|
||||
it('renders correctly', () => {
|
||||
const wrapper = render(
|
||||
<Toolbar>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ map2tree(
|
|||
someMap,
|
||||
(options = {
|
||||
key: 'state', // the name you want for as the root node of the output tree
|
||||
pushMethod: 'push' // use 'unshift' to change the order children nodes are added
|
||||
pushMethod: 'push', // use 'unshift' to change the order children nodes are added
|
||||
})
|
||||
);
|
||||
```
|
||||
|
|
@ -26,14 +26,14 @@ const someMap = {
|
|||
{ title: 'map', someNestedObject: { foo: 'bar' } },
|
||||
{ title: 'to', someNestedArray: ['foo', 'bar'] },
|
||||
{ title: 'tree' },
|
||||
{ title: 'map2tree' }
|
||||
{ title: 'map2tree' },
|
||||
],
|
||||
completedCount: 1
|
||||
completedCount: 1,
|
||||
},
|
||||
otherReducer: {
|
||||
foo: 0,
|
||||
bar: { key: 'value' }
|
||||
}
|
||||
bar: { key: 'value' },
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -21,12 +21,12 @@ function getNode(tree, key) {
|
|||
|
||||
visit(
|
||||
tree,
|
||||
d => {
|
||||
(d) => {
|
||||
if (d.name === key) {
|
||||
node = d;
|
||||
}
|
||||
},
|
||||
d => d.children
|
||||
(d) => d.children
|
||||
);
|
||||
|
||||
return node;
|
||||
|
|
@ -61,7 +61,7 @@ export default function map2tree(
|
|||
for (let i = 0; i < value.length; i++) {
|
||||
newNode.children[pushMethod]({
|
||||
name: `${key}[${i}]`,
|
||||
[isPlainObject(value[i]) ? 'object' : 'value']: value[i]
|
||||
[isPlainObject(value[i]) ? 'object' : 'value']: value[i],
|
||||
});
|
||||
}
|
||||
} else if (isPlainObject(value)) {
|
||||
|
|
|
|||
|
|
@ -11,12 +11,12 @@ test('# rootNodeKey', () => {
|
|||
describe('# shallow map', () => {
|
||||
test('## null', () => {
|
||||
const map = {
|
||||
a: null
|
||||
a: null,
|
||||
};
|
||||
|
||||
const expected = {
|
||||
name: 'state',
|
||||
children: [{ name: 'a', value: null }]
|
||||
children: [{ name: 'a', value: null }],
|
||||
};
|
||||
|
||||
expect(map2tree(map)).toEqual(expected);
|
||||
|
|
@ -26,15 +26,15 @@ describe('# shallow map', () => {
|
|||
test('## value', () => {
|
||||
const map = {
|
||||
a: 'foo',
|
||||
b: 'bar'
|
||||
b: 'bar',
|
||||
};
|
||||
|
||||
const expected = {
|
||||
name: 'state',
|
||||
children: [
|
||||
{ name: 'a', value: 'foo' },
|
||||
{ name: 'b', value: 'bar' }
|
||||
]
|
||||
{ name: 'b', value: 'bar' },
|
||||
],
|
||||
};
|
||||
|
||||
expect(map2tree(map)).toEqual(expected);
|
||||
|
|
@ -43,12 +43,12 @@ describe('# shallow map', () => {
|
|||
|
||||
test('## object', () => {
|
||||
const map = {
|
||||
a: { aa: 'foo' }
|
||||
a: { aa: 'foo' },
|
||||
};
|
||||
|
||||
const expected = {
|
||||
name: 'state',
|
||||
children: [{ name: 'a', children: [{ name: 'aa', value: 'foo' }] }]
|
||||
children: [{ name: 'a', children: [{ name: 'aa', value: 'foo' }] }],
|
||||
};
|
||||
|
||||
expect(map2tree(map)).toEqual(expected);
|
||||
|
|
@ -57,7 +57,7 @@ describe('# shallow map', () => {
|
|||
|
||||
test('## immutable Map', () => {
|
||||
const map = {
|
||||
a: immutable.fromJS({ aa: 'foo', ab: 'bar' })
|
||||
a: immutable.fromJS({ aa: 'foo', ab: 'bar' }),
|
||||
};
|
||||
|
||||
const expected = {
|
||||
|
|
@ -67,10 +67,10 @@ describe('# shallow map', () => {
|
|||
name: 'a',
|
||||
children: [
|
||||
{ name: 'aa', value: 'foo' },
|
||||
{ name: 'ab', value: 'bar' }
|
||||
]
|
||||
}
|
||||
]
|
||||
{ name: 'ab', value: 'bar' },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
expect(map2tree(map)).toEqual(expected);
|
||||
|
|
@ -80,7 +80,7 @@ describe('# shallow map', () => {
|
|||
describe('# deep map', () => {
|
||||
test('## null', () => {
|
||||
const map = {
|
||||
a: { aa: null }
|
||||
a: { aa: null },
|
||||
};
|
||||
|
||||
const expected = {
|
||||
|
|
@ -91,11 +91,11 @@ describe('# deep map', () => {
|
|||
children: [
|
||||
{
|
||||
name: 'aa',
|
||||
value: null
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
value: null,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
expect(map2tree(map)).toEqual(expected);
|
||||
|
|
@ -104,7 +104,7 @@ describe('# deep map', () => {
|
|||
|
||||
test('## object', () => {
|
||||
const map = {
|
||||
a: { aa: { aaa: 'foo' } }
|
||||
a: { aa: { aaa: 'foo' } },
|
||||
};
|
||||
|
||||
const expected = {
|
||||
|
|
@ -115,11 +115,11 @@ describe('# deep map', () => {
|
|||
children: [
|
||||
{
|
||||
name: 'aa',
|
||||
children: [{ name: 'aaa', value: 'foo' }]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
children: [{ name: 'aaa', value: 'foo' }],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
expect(map2tree(map)).toEqual(expected);
|
||||
|
|
@ -129,7 +129,7 @@ describe('# deep map', () => {
|
|||
|
||||
describe('# array map', () => {
|
||||
const map = {
|
||||
a: [1, 2]
|
||||
a: [1, 2],
|
||||
};
|
||||
|
||||
test('## push', () => {
|
||||
|
|
@ -140,10 +140,10 @@ describe('# array map', () => {
|
|||
name: 'a',
|
||||
children: [
|
||||
{ name: 'a[0]', value: 1 },
|
||||
{ name: 'a[1]', value: 2 }
|
||||
]
|
||||
}
|
||||
]
|
||||
{ name: 'a[1]', value: 2 },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
expect(map2tree(map)).toEqual(expected);
|
||||
|
|
@ -159,10 +159,10 @@ describe('# array map', () => {
|
|||
name: 'a',
|
||||
children: [
|
||||
{ name: 'a[1]', value: 2 },
|
||||
{ name: 'a[0]', value: 1 }
|
||||
]
|
||||
}
|
||||
]
|
||||
{ name: 'a[0]', value: 1 },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
expect(map2tree(map, options)).toEqual(expected);
|
||||
|
|
@ -171,7 +171,7 @@ describe('# array map', () => {
|
|||
|
||||
test('## null', () => {
|
||||
const map = {
|
||||
a: [null]
|
||||
a: [null],
|
||||
};
|
||||
|
||||
const expected = {
|
||||
|
|
@ -179,9 +179,9 @@ describe('# array map', () => {
|
|||
children: [
|
||||
{
|
||||
name: 'a',
|
||||
children: [{ name: 'a[0]', value: null }]
|
||||
}
|
||||
]
|
||||
children: [{ name: 'a[0]', value: null }],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
expect(map2tree(map)).toEqual(expected);
|
||||
|
|
@ -192,7 +192,7 @@ describe('# array map', () => {
|
|||
describe('# collection map', () => {
|
||||
test('## value', () => {
|
||||
const map = {
|
||||
a: [{ aa: 1 }, { aa: 2 }]
|
||||
a: [{ aa: 1 }, { aa: 2 }],
|
||||
};
|
||||
|
||||
const expected = {
|
||||
|
|
@ -202,10 +202,10 @@ describe('# collection map', () => {
|
|||
name: 'a',
|
||||
children: [
|
||||
{ name: 'a[0]', object: { aa: 1 } },
|
||||
{ name: 'a[1]', object: { aa: 2 } }
|
||||
]
|
||||
}
|
||||
]
|
||||
{ name: 'a[1]', object: { aa: 2 } },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
expect(map2tree(map)).toEqual(expected);
|
||||
|
|
@ -214,7 +214,7 @@ describe('# collection map', () => {
|
|||
|
||||
test('## object', () => {
|
||||
const map = {
|
||||
a: [{ aa: { aaa: 'foo' } }]
|
||||
a: [{ aa: { aaa: 'foo' } }],
|
||||
};
|
||||
|
||||
const expected = {
|
||||
|
|
@ -222,9 +222,9 @@ describe('# collection map', () => {
|
|||
children: [
|
||||
{
|
||||
name: 'a',
|
||||
children: [{ name: 'a[0]', object: { aa: { aaa: 'foo' } } }]
|
||||
}
|
||||
]
|
||||
children: [{ name: 'a[0]', object: { aa: { aaa: 'foo' } } }],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
expect(map2tree(map)).toEqual(expected);
|
||||
|
|
|
|||
|
|
@ -3,27 +3,27 @@ const path = require('path');
|
|||
module.exports = (env = {}) => ({
|
||||
mode: 'production',
|
||||
entry: {
|
||||
app: ['./src/index.js']
|
||||
app: ['./src/index.js'],
|
||||
},
|
||||
output: {
|
||||
library: 'd3tooltip',
|
||||
libraryTarget: 'umd',
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
filename: env.minimize ? 'map2tree.min.js' : 'map2tree.js'
|
||||
filename: env.minimize ? 'map2tree.min.js' : 'map2tree.js',
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.js$/,
|
||||
loader: 'babel-loader',
|
||||
exclude: /node_modules/
|
||||
}
|
||||
]
|
||||
exclude: /node_modules/,
|
||||
},
|
||||
],
|
||||
},
|
||||
optimization: {
|
||||
minimize: !!env.minimize
|
||||
minimize: !!env.minimize,
|
||||
},
|
||||
performance: {
|
||||
hints: false
|
||||
}
|
||||
hints: false,
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -19,23 +19,23 @@ import base16Themes from './base16Themes';
|
|||
function getStylingFromBase16(base16Theme) {
|
||||
return {
|
||||
myComponent: {
|
||||
backgroundColor: base16Theme.base00
|
||||
backgroundColor: base16Theme.base00,
|
||||
},
|
||||
|
||||
myComponentToggleColor({ style, className }, clickCount) {
|
||||
return {
|
||||
style: {
|
||||
...style,
|
||||
backgroundColor: clickCount % 2 ? 'red' : 'blue'
|
||||
}
|
||||
backgroundColor: clickCount % 2 ? 'red' : 'blue',
|
||||
},
|
||||
};
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
const createStylingFromTheme = createStyling(getStylingFromBase16, {
|
||||
defaultBase16: base16Themes.solarized,
|
||||
base16Themes
|
||||
base16Themes,
|
||||
});
|
||||
|
||||
class MyComponent extends Component {
|
||||
|
|
|
|||
22
packages/react-base16-styling/src/index.js
vendored
22
packages/react-base16-styling/src/index.js
vendored
|
|
@ -11,7 +11,7 @@ const BASE16_KEYS = Object.keys(DEFAULT_BASE16);
|
|||
|
||||
// we need a correcting factor, so that a dark, but not black background color
|
||||
// converts to bright enough inversed color
|
||||
const flip = x => (x < 0.25 ? 1 : x < 0.5 ? 0.9 - x : 1.1 - x);
|
||||
const flip = (x) => (x < 0.25 ? 1 : x < 0.5 ? 0.9 - x : 1.1 - x);
|
||||
|
||||
const invertColor = flow(
|
||||
parse,
|
||||
|
|
@ -22,11 +22,11 @@ const invertColor = flow(
|
|||
);
|
||||
|
||||
const merger = function merger(styling) {
|
||||
return prevStyling => ({
|
||||
return (prevStyling) => ({
|
||||
className: [prevStyling.className, styling.className]
|
||||
.filter(Boolean)
|
||||
.join(' '),
|
||||
style: { ...(prevStyling.style || {}), ...(styling.style || {}) }
|
||||
style: { ...(prevStyling.style || {}), ...(styling.style || {}) },
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -51,7 +51,7 @@ const mergeStyling = function mergeStyling(customStyling, defaultStyling) {
|
|||
case 'function':
|
||||
return (styling, ...args) =>
|
||||
merger({
|
||||
className: customStyling
|
||||
className: customStyling,
|
||||
})(defaultStyling(styling, ...args));
|
||||
}
|
||||
break;
|
||||
|
|
@ -64,7 +64,7 @@ const mergeStyling = function mergeStyling(customStyling, defaultStyling) {
|
|||
case 'function':
|
||||
return (styling, ...args) =>
|
||||
merger({
|
||||
style: customStyling
|
||||
style: customStyling,
|
||||
})(defaultStyling(styling, ...args));
|
||||
}
|
||||
break;
|
||||
|
|
@ -74,7 +74,7 @@ const mergeStyling = function mergeStyling(customStyling, defaultStyling) {
|
|||
return (styling, ...args) =>
|
||||
customStyling(
|
||||
merger(styling)({
|
||||
className: defaultStyling
|
||||
className: defaultStyling,
|
||||
}),
|
||||
...args
|
||||
);
|
||||
|
|
@ -82,7 +82,7 @@ const mergeStyling = function mergeStyling(customStyling, defaultStyling) {
|
|||
return (styling, ...args) =>
|
||||
customStyling(
|
||||
merger(styling)({
|
||||
style: defaultStyling
|
||||
style: defaultStyling,
|
||||
}),
|
||||
...args
|
||||
);
|
||||
|
|
@ -120,7 +120,7 @@ const getStylingByKeys = (mergedStyling, keys, ...args) => {
|
|||
keys = [keys];
|
||||
}
|
||||
|
||||
const styles = keys.map(key => mergedStyling[key]).filter(Boolean);
|
||||
const styles = keys.map((key) => mergedStyling[key]).filter(Boolean);
|
||||
|
||||
const props = styles.reduce(
|
||||
(obj, s) => {
|
||||
|
|
@ -148,7 +148,7 @@ const getStylingByKeys = (mergedStyling, keys, ...args) => {
|
|||
return props;
|
||||
};
|
||||
|
||||
export const invertBase16Theme = base16Theme =>
|
||||
export const invertBase16Theme = (base16Theme) =>
|
||||
Object.keys(base16Theme).reduce(
|
||||
(t, key) => (
|
||||
(t[key] = /^base/.test(key)
|
||||
|
|
@ -169,7 +169,7 @@ export const createStyling = curry(
|
|||
if (base16Theme) {
|
||||
themeOrStyling = {
|
||||
...base16Theme,
|
||||
...themeOrStyling
|
||||
...themeOrStyling,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -213,7 +213,7 @@ export const getBase16Theme = (theme, base16Themes) => {
|
|||
: undefined;
|
||||
};
|
||||
|
||||
export const invertTheme = theme => {
|
||||
export const invertTheme = (theme) => {
|
||||
if (typeof theme === 'string') {
|
||||
return `${theme}:inverted`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ const base16Theme = {
|
|||
base0C: '#009999',
|
||||
base0D: '#009900',
|
||||
base0E: '#9999ff',
|
||||
base0F: '#ff0099'
|
||||
base0F: '#ff0099',
|
||||
};
|
||||
|
||||
const invertedBase16Theme = {
|
||||
|
|
@ -40,7 +40,7 @@ const invertedBase16Theme = {
|
|||
base0C: '#0fa8a8',
|
||||
base0D: '#32cb32',
|
||||
base0E: '#6868ce',
|
||||
base0F: '#ff2ac3'
|
||||
base0F: '#ff2ac3',
|
||||
};
|
||||
|
||||
const apathyInverted = {
|
||||
|
|
@ -61,28 +61,28 @@ const apathyInverted = {
|
|||
base0D: '#a7994f',
|
||||
base0E: '#469038',
|
||||
base0F: '#3a9257',
|
||||
scheme: 'apathy:inverted'
|
||||
scheme: 'apathy:inverted',
|
||||
};
|
||||
|
||||
const getStylingFromBase16 = base16 => ({
|
||||
const getStylingFromBase16 = (base16) => ({
|
||||
testClass: 'testClass',
|
||||
testStyle: {
|
||||
color: base16.base00
|
||||
color: base16.base00,
|
||||
},
|
||||
testFunc: ({ style }, arg) => ({
|
||||
className: 'testClass--' + arg,
|
||||
style: {
|
||||
...style,
|
||||
width: 0,
|
||||
color: base16.base00
|
||||
}
|
||||
color: base16.base00,
|
||||
},
|
||||
}),
|
||||
baseStyle: {
|
||||
color: 'red'
|
||||
color: 'red',
|
||||
},
|
||||
additionalStyle: {
|
||||
border: 0
|
||||
}
|
||||
border: 0,
|
||||
},
|
||||
});
|
||||
|
||||
test('invertTheme', () => {
|
||||
|
|
@ -98,26 +98,26 @@ test('getBase16Theme', () => {
|
|||
|
||||
test('createStyling (default)', () => {
|
||||
const styling = createStyling(getStylingFromBase16, {
|
||||
defaultBase16: apathy
|
||||
defaultBase16: apathy,
|
||||
});
|
||||
const defaultStyling = styling(undefined);
|
||||
|
||||
expect(defaultStyling('testClass')).toEqual({ className: 'testClass' });
|
||||
expect(defaultStyling('testStyle')).toEqual({
|
||||
style: { color: apathy.base00 }
|
||||
style: { color: apathy.base00 },
|
||||
});
|
||||
expect(defaultStyling('testFunc', 'mod')).toEqual({
|
||||
className: 'testClass--mod',
|
||||
style: {
|
||||
width: 0,
|
||||
color: apathy.base00
|
||||
}
|
||||
color: apathy.base00,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
test('createStyling (custom)', () => {
|
||||
const styling = createStyling(getStylingFromBase16, {
|
||||
defaultBase16: apathy
|
||||
defaultBase16: apathy,
|
||||
});
|
||||
let customStyling = styling({
|
||||
testClass: 'customClass',
|
||||
|
|
@ -126,35 +126,35 @@ test('createStyling (custom)', () => {
|
|||
className: styling.className + ' customClass--' + arg,
|
||||
style: {
|
||||
...styling.style,
|
||||
border: 0
|
||||
}
|
||||
})
|
||||
border: 0,
|
||||
},
|
||||
}),
|
||||
});
|
||||
|
||||
expect(customStyling('testClass')).toEqual({
|
||||
className: 'testClass customClass'
|
||||
className: 'testClass customClass',
|
||||
});
|
||||
expect(customStyling('testStyle')).toEqual({
|
||||
style: { color: apathy.base00, height: 0 }
|
||||
style: { color: apathy.base00, height: 0 },
|
||||
});
|
||||
expect(customStyling('testFunc', 'mod')).toEqual({
|
||||
className: 'testClass--mod customClass--mod',
|
||||
style: {
|
||||
width: 0,
|
||||
color: apathy.base00,
|
||||
border: 0
|
||||
}
|
||||
border: 0,
|
||||
},
|
||||
});
|
||||
|
||||
customStyling = styling({
|
||||
testClass: () => ({
|
||||
className: 'customClass'
|
||||
className: 'customClass',
|
||||
}),
|
||||
testStyle: () => ({
|
||||
style: {
|
||||
border: 0
|
||||
}
|
||||
})
|
||||
border: 0,
|
||||
},
|
||||
}),
|
||||
});
|
||||
|
||||
expect(customStyling('testClass')).toEqual({ className: 'customClass' });
|
||||
|
|
@ -163,27 +163,27 @@ test('createStyling (custom)', () => {
|
|||
|
||||
test('createStyling (multiple)', () => {
|
||||
const styling = createStyling(getStylingFromBase16, {
|
||||
defaultBase16: apathy
|
||||
defaultBase16: apathy,
|
||||
});
|
||||
let customStyling = styling({
|
||||
baseStyle: ({ style }) => ({ style: { ...style, color: 'blue' } })
|
||||
baseStyle: ({ style }) => ({ style: { ...style, color: 'blue' } }),
|
||||
});
|
||||
|
||||
expect(customStyling(['baseStyle', 'additionalStyle'])).toEqual({
|
||||
style: {
|
||||
color: 'blue',
|
||||
border: 0
|
||||
}
|
||||
border: 0,
|
||||
},
|
||||
});
|
||||
|
||||
customStyling = styling({
|
||||
additionalStyle: ({ style }) => ({ style: { ...style, border: 1 } })
|
||||
additionalStyle: ({ style }) => ({ style: { ...style, border: 1 } }),
|
||||
});
|
||||
|
||||
expect(customStyling(['baseStyle', 'additionalStyle'])).toEqual({
|
||||
style: {
|
||||
color: 'red',
|
||||
border: 1
|
||||
}
|
||||
border: 1,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ const theme = {
|
|||
base0C: '#a1efe4',
|
||||
base0D: '#66d9ef',
|
||||
base0E: '#ae81ff',
|
||||
base0F: '#cc6633'
|
||||
base0F: '#cc6633',
|
||||
};
|
||||
|
||||
<div>
|
||||
|
|
@ -80,16 +80,16 @@ const theme = {
|
|||
extend: theme,
|
||||
// underline keys for literal values
|
||||
valueLabel: {
|
||||
textDecoration: 'underline'
|
||||
textDecoration: 'underline',
|
||||
},
|
||||
// switch key for objects to uppercase when object is expanded.
|
||||
// `nestedNodeLabel` receives additional argument `expandable`
|
||||
nestedNodeLabel: ({ style }, keyPath, nodeType, expanded) => ({
|
||||
style: {
|
||||
...style,
|
||||
textTransform: expanded ? 'uppercase' : style.textTransform
|
||||
}
|
||||
})
|
||||
textTransform: expanded ? 'uppercase' : style.textTransform,
|
||||
},
|
||||
}),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -124,7 +124,7 @@ You can pass the following properties to customize rendered labels and values:
|
|||
```jsx
|
||||
<JSONTree
|
||||
labelRenderer={([key]) => <strong>{key}</strong>}
|
||||
valueRenderer={raw => <em>{raw}</em>}
|
||||
valueRenderer={(raw) => <em>{raw}</em>}
|
||||
/>
|
||||
```
|
||||
|
||||
|
|
|
|||
4
packages/react-json-tree/examples/server.js
vendored
4
packages/react-json-tree/examples/server.js
vendored
|
|
@ -6,8 +6,8 @@ var config = require('./webpack.config');
|
|||
new WebpackDevServer(webpack(config), {
|
||||
publicPath: config.output.publicPath,
|
||||
hot: true,
|
||||
historyApiFallback: true
|
||||
}).listen(3000, 'localhost', function(err) {
|
||||
historyApiFallback: true,
|
||||
}).listen(3000, 'localhost', function (err) {
|
||||
if (err) {
|
||||
console.log(err);
|
||||
}
|
||||
|
|
|
|||
48
packages/react-json-tree/examples/src/App.js
vendored
48
packages/react-json-tree/examples/src/App.js
vendored
|
|
@ -5,19 +5,19 @@ import JSONTree from 'react-json-tree';
|
|||
const getLabelStyle = ({ style }, nodeType, expanded) => ({
|
||||
style: {
|
||||
...style,
|
||||
textTransform: expanded ? 'uppercase' : style.textTransform
|
||||
}
|
||||
textTransform: expanded ? 'uppercase' : style.textTransform,
|
||||
},
|
||||
});
|
||||
|
||||
const getBoolStyle = ({ style }, nodeType) => ({
|
||||
style: {
|
||||
...style,
|
||||
border: nodeType === 'Boolean' ? '1px solid #DD3333' : style.border,
|
||||
borderRadius: nodeType === 'Boolean' ? 3 : style.borderRadius
|
||||
}
|
||||
borderRadius: nodeType === 'Boolean' ? 3 : style.borderRadius,
|
||||
},
|
||||
});
|
||||
|
||||
const getItemString = type => (
|
||||
const getItemString = (type) => (
|
||||
<span>
|
||||
{' // '}
|
||||
{type}
|
||||
|
|
@ -30,14 +30,14 @@ const getValueLabelStyle = ({ style }, nodeType, keyPath) => ({
|
|||
color:
|
||||
!Number.isNaN(keyPath[0]) && !(parseInt(keyPath, 10) % 2)
|
||||
? '#33F'
|
||||
: style.color
|
||||
}
|
||||
: style.color,
|
||||
},
|
||||
});
|
||||
|
||||
const longString =
|
||||
'Loremipsumdolorsitamet,consecteturadipiscingelit.Namtempusipsumutfelisdignissimauctor.Maecenasodiolectus,finibusegetultricesvel,aliquamutelit.Loremipsumdolorsitamet,consecteturadipiscingelit.Namtempusipsumutfelisdignissimauctor.Maecenasodiolectus,finibusegetultricesvel,aliquamutelit.Loremipsumdolorsitamet,consecteturadipiscingelit.Namtempusipsumutfelisdignissimauctor.Maecenasodiolectus,finibusegetultricesvel,aliquamutelit.'; // eslint-disable-line max-len
|
||||
|
||||
const Custom = function(value) {
|
||||
const Custom = function (value) {
|
||||
this.value = value;
|
||||
};
|
||||
Custom.prototype[Symbol.toStringTag] = 'Custom';
|
||||
|
|
@ -56,42 +56,42 @@ const data = {
|
|||
evenMoreNested: {
|
||||
veryNested: {
|
||||
insanelyNested: {
|
||||
ridiculouslyDeepValue: 'Hello'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
ridiculouslyDeepValue: 'Hello',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
baz: undefined,
|
||||
func: function User() {}
|
||||
func: function User() {},
|
||||
},
|
||||
emptyObject: {},
|
||||
symbol: Symbol('value'),
|
||||
// eslint-disable-next-line new-cap
|
||||
immutable: Map([
|
||||
['key', 'value'],
|
||||
[{ objectKey: 'value' }, { objectKey: 'value' }]
|
||||
[{ objectKey: 'value' }, { objectKey: 'value' }],
|
||||
]),
|
||||
map: new window.Map([
|
||||
['key', 'value'],
|
||||
[0, 'value'],
|
||||
[{ objectKey: 'value' }, { objectKey: 'value' }]
|
||||
[{ objectKey: 'value' }, { objectKey: 'value' }],
|
||||
]),
|
||||
weakMap: new window.WeakMap([
|
||||
[{ objectKey: 'value' }, { objectKey: 'value' }]
|
||||
[{ objectKey: 'value' }, { objectKey: 'value' }],
|
||||
]),
|
||||
set: new window.Set(['value', 0, { objectKey: 'value' }]),
|
||||
weakSet: new window.WeakSet([
|
||||
{ objectKey: 'value1' },
|
||||
{ objectKey: 'value2' }
|
||||
{ objectKey: 'value2' },
|
||||
]),
|
||||
hugeArray: Array.from({ length: 10000 }).map((_, i) => `item #${i}`),
|
||||
customProfile: {
|
||||
avatar: new Custom('placehold.it/50x50'),
|
||||
name: new Custom('Name')
|
||||
name: new Custom('Name'),
|
||||
},
|
||||
longString
|
||||
longString,
|
||||
};
|
||||
|
||||
const theme = {
|
||||
|
|
@ -112,7 +112,7 @@ const theme = {
|
|||
base0C: '#a1efe4',
|
||||
base0D: '#66d9ef',
|
||||
base0E: '#ae81ff',
|
||||
base0F: '#cc6633'
|
||||
base0F: '#cc6633',
|
||||
};
|
||||
|
||||
const App = () => (
|
||||
|
|
@ -149,7 +149,7 @@ const App = () => (
|
|||
extend: theme,
|
||||
nestedNodeLabel: getLabelStyle,
|
||||
value: getBoolStyle,
|
||||
valueLabel: getValueLabelStyle
|
||||
valueLabel: getValueLabelStyle,
|
||||
}}
|
||||
getItemString={getItemString}
|
||||
/>
|
||||
|
|
@ -163,7 +163,7 @@ const App = () => (
|
|||
data={data}
|
||||
theme={theme}
|
||||
labelRenderer={([raw]) => <span>(({raw})):</span>}
|
||||
valueRenderer={raw => (
|
||||
valueRenderer={(raw) => (
|
||||
<em>
|
||||
<span role="img" aria-label="mellow">
|
||||
😐
|
||||
|
|
|
|||
|
|
@ -9,12 +9,12 @@ module.exports = {
|
|||
entry: [
|
||||
!isProduction && 'webpack-dev-server/client?http://localhost:3000',
|
||||
!isProduction && 'webpack/hot/only-dev-server',
|
||||
'./src/index'
|
||||
'./src/index',
|
||||
].filter(Boolean),
|
||||
output: {
|
||||
path: path.join(__dirname, 'dist'),
|
||||
filename: 'bundle.js',
|
||||
publicPath: '/static/'
|
||||
publicPath: '/static/',
|
||||
},
|
||||
plugins: [new webpack.HotModuleReplacementPlugin()],
|
||||
module: {
|
||||
|
|
@ -22,8 +22,8 @@ module.exports = {
|
|||
{
|
||||
test: /\.js$/,
|
||||
loader: 'babel-loader',
|
||||
include: path.join(__dirname, 'src')
|
||||
}
|
||||
]
|
||||
}
|
||||
include: path.join(__dirname, 'src'),
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
|
|
|||
2
packages/react-json-tree/src/ItemRange.js
vendored
2
packages/react-json-tree/src/ItemRange.js
vendored
|
|
@ -8,7 +8,7 @@ export default class ItemRange extends React.Component {
|
|||
from: PropTypes.number.isRequired,
|
||||
to: PropTypes.number.isRequired,
|
||||
renderChildNodes: PropTypes.func.isRequired,
|
||||
nodeType: PropTypes.string.isRequired
|
||||
nodeType: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ const JSONArrayNode = ({ data, ...props }) => (
|
|||
);
|
||||
|
||||
JSONArrayNode.propTypes = {
|
||||
data: PropTypes.array
|
||||
data: PropTypes.array,
|
||||
};
|
||||
|
||||
export default JSONArrayNode;
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user