		{
		"name": "react-split-pane-refined",
		"description": "Fork of React split-pane component",
		"description": "Fork of React split-pane component v2",
		"main": "index.js",
		"types": "index.d.ts",
		"version": "0.0.3",
		"version": "2.0.0-beta.0",
		"repository": {
		@@ -8,0 +8,0 @@ "type": "git",

-6

.editorconfig

		# editorconfig.org
		root = true

		[*]
		indent_style = space
		indent_size = 2

-2

.storybook/addons.js

		import '@storybook/addon-actions/register';
		import '@storybook/addon-links/register';

-9

.storybook/config.js

		import { configure } from '@storybook/react';

		// automatically import all files ending in *.stories.js
		const req = require.context('../stories', true, /.stories.js$/);
		function loadStories() {
		req.keys().forEach((filename) => req(filename));
		}

		configure(loadStories, module);

-33

.storybook/preview-head.html

		<style>


		, :before, *:after {
		box-sizing: border-box;
		position: relative;
		}

		html {
		font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
		font-weight: 400;
		font-size: 16px;
		line-height: 1.5;
		}

		body, html, #root {
		margin: 0;
		height: 100vh;
		min-height: 100vh;
		width: 100vw;
		}

		a {
		-webkit-tap-highlight-color: rgba(0,0,0,0);
		}

		#root {
		display: flex;
		flex-direction: column;
		flex: 1;
		}

		</style>

-10

.travis.yml

		language: node_js
		sudo: required
		dist: trusty
		node_js:
		- stable
		script:
		- npm test
		after_script:
		- npm run test:coverage
		- '[ "${TRAVIS_PULL_REQUEST}" = "false" ] && npm run demo:publish \|\| false'

-213

coverage/base.css

		body, html {
		margin:0; padding: 0;
		height: 100%;
		}
		body {
		font-family: Helvetica Neue, Helvetica, Arial;
		font-size: 14px;
		color:#333;
		}
		.small { font-size: 12px; }
		, :after, *:before {
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
		}
		h1 { font-size: 20px; margin: 0;}
		h2 { font-size: 14px; }
		pre {
		font: 12px/1.4 Consolas, "Liberation Mono", Menlo, Courier, monospace;
		margin: 0;
		padding: 0;
		-moz-tab-size: 2;
		-o-tab-size: 2;
		tab-size: 2;
		}
		a { color:#0074D9; text-decoration:none; }
		a:hover { text-decoration:underline; }
		.strong { font-weight: bold; }
		.space-top1 { padding: 10px 0 0 0; }
		.pad2y { padding: 20px 0; }
		.pad1y { padding: 10px 0; }
		.pad2x { padding: 0 20px; }
		.pad2 { padding: 20px; }
		.pad1 { padding: 10px; }
		.space-left2 { padding-left:55px; }
		.space-right2 { padding-right:20px; }
		.center { text-align:center; }
		.clearfix { display:block; }
		.clearfix:after {
		content:'';
		display:block;
		height:0;
		clear:both;
		visibility:hidden;
		}
		.fl { float: left; }
		@media only screen and (max-width:640px) {
		.col3 { width:100%; max-width:100%; }
		.hide-mobile { display:none!important; }
		}

		.quiet {
		color: #7f7f7f;
		color: rgba(0,0,0,0.5);
		}
		.quiet a { opacity: 0.7; }

		.fraction {
		font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
		font-size: 10px;
		color: #555;
		background: #E8E8E8;
		padding: 4px 5px;
		border-radius: 3px;
		vertical-align: middle;
		}

		div.path a:link, div.path a:visited { color: #333; }
		table.coverage {
		border-collapse: collapse;
		margin: 10px 0 0 0;
		padding: 0;
		}

		table.coverage td {
		margin: 0;
		padding: 0;
		vertical-align: top;
		}
		table.coverage td.line-count {
		text-align: right;
		padding: 0 5px 0 20px;
		}
		table.coverage td.line-coverage {
		text-align: right;
		padding-right: 10px;
		min-width:20px;
		}

		table.coverage td span.cline-any {
		display: inline-block;
		padding: 0 5px;
		width: 100%;
		}
		.missing-if-branch {
		display: inline-block;
		margin-right: 5px;
		border-radius: 3px;
		position: relative;
		padding: 0 4px;
		background: #333;
		color: yellow;
		}

		.skip-if-branch {
		display: none;
		margin-right: 10px;
		position: relative;
		padding: 0 4px;
		background: #ccc;
		color: white;
		}
		.missing-if-branch .typ, .skip-if-branch .typ {
		color: inherit !important;
		}
		.coverage-summary {
		border-collapse: collapse;
		width: 100%;
		}
		.coverage-summary tr { border-bottom: 1px solid #bbb; }
		.keyline-all { border: 1px solid #ddd; }
		.coverage-summary td, .coverage-summary th { padding: 10px; }
		.coverage-summary tbody { border: 1px solid #bbb; }
		.coverage-summary td { border-right: 1px solid #bbb; }
		.coverage-summary td:last-child { border-right: none; }
		.coverage-summary th {
		text-align: left;
		font-weight: normal;
		white-space: nowrap;
		}
		.coverage-summary th.file { border-right: none !important; }
		.coverage-summary th.pct { }
		.coverage-summary th.pic,
		.coverage-summary th.abs,
		.coverage-summary td.pct,
		.coverage-summary td.abs { text-align: right; }
		.coverage-summary td.file { white-space: nowrap; }
		.coverage-summary td.pic { min-width: 120px !important; }
		.coverage-summary tfoot td { }

		.coverage-summary .sorter {
		height: 10px;
		width: 7px;
		display: inline-block;
		margin-left: 0.5em;
		background: url(sort-arrow-sprite.png) no-repeat scroll 0 0 transparent;
		}
		.coverage-summary .sorted .sorter {
		background-position: 0 -20px;
		}
		.coverage-summary .sorted-desc .sorter {
		background-position: 0 -10px;
		}
		.status-line { height: 10px; }
		/* dark red */
		.red.solid, .status-line.low, .low .cover-fill { background:#C21F39 }
		.low .chart { border:1px solid #C21F39 }
		/* medium red */
		.cstat-no, .fstat-no, .cbranch-no, .cbranch-no { background:#F6C6CE }
		/* light red */
		.low, .cline-no { background:#FCE1E5 }
		/* light green */
		.high, .cline-yes { background:rgb(230,245,208) }
		/* medium green */
		.cstat-yes { background:rgb(161,215,106) }
		/* dark green */
		.status-line.high, .high .cover-fill { background:rgb(77,146,33) }
		.high .chart { border:1px solid rgb(77,146,33) }
		/* dark yellow (gold) */
		.medium .chart { border:1px solid #f9cd0b; }
		.status-line.medium, .medium .cover-fill { background: #f9cd0b; }
		/* light yellow */
		.medium { background: #fff4c2; }
		/* light gray */
		span.cline-neutral { background: #eaeaea; }

		.cbranch-no { background: yellow !important; color: #111; }

		.cstat-skip { background: #ddd; color: #111; }
		.fstat-skip { background: #ddd; color: #111 !important; }
		.cbranch-skip { background: #ddd !important; color: #111; }


		.cover-fill, .cover-empty {
		display:inline-block;
		height: 12px;
		}
		.chart {
		line-height: 0;
		}
		.cover-empty {
		background: white;
		}
		.cover-full {
		border-right: none !important;
		}
		pre.prettyprint {
		border: none !important;
		padding: 0 !important;
		margin: 0 !important;
		}
		.com { color: #999 !important; }
		.ignore-none { color: #999; font-weight: normal; }

		.wrapper {
		min-height: 100%;
		height: auto !important;
		height: 100%;
		margin: 0 auto -48px;
		}
		.footer, .push {
		height: 48px;
		}

-93

coverage/index.html

		<!doctype html>
		<html lang="en">
		<head>
		<title>Code coverage report for All files</title>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="prettify.css" />
		<link rel="stylesheet" href="base.css" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<style type='text/css'>
		.coverage-summary .sorter {
		background-image: url(sort-arrow-sprite.png);
		}
		</style>
		</head>
		<body>
		<div class='wrapper'>
		<div class='pad1'>
		<h1>
		/
		</h1>
		<div class='clearfix'>
		<div class='fl pad1y space-right2'>
		<span class="strong">87.57% </span>
		<span class="quiet">Statements</span>
		<span class='fraction'>324/370</span>
		</div>
		<div class='fl pad1y space-right2'>
		<span class="strong">65.38% </span>
		<span class="quiet">Branches</span>
		<span class='fraction'>136/208</span>
		</div>
		<div class='fl pad1y space-right2'>
		<span class="strong">76.32% </span>
		<span class="quiet">Functions</span>
		<span class='fraction'>58/76</span>
		</div>
		<div class='fl pad1y space-right2'>
		<span class="strong">88.58% </span>
		<span class="quiet">Lines</span>
		<span class='fraction'>256/289</span>
		</div>
		</div>
		</div>
		<div class='status-line high'></div>
		<div class="pad1">
		<table class="coverage-summary">
		<thead>
		<tr>
		<th data-col="file" data-fmt="html" data-html="true" class="file">File</th>
		<th data-col="pic" data-type="number" data-fmt="html" data-html="true" class="pic"></th>
		<th data-col="statements" data-type="number" data-fmt="pct" class="pct">Statements</th>
		<th data-col="statements_raw" data-type="number" data-fmt="html" class="abs"></th>
		<th data-col="branches" data-type="number" data-fmt="pct" class="pct">Branches</th>
		<th data-col="branches_raw" data-type="number" data-fmt="html" class="abs"></th>
		<th data-col="functions" data-type="number" data-fmt="pct" class="pct">Functions</th>
		<th data-col="functions_raw" data-type="number" data-fmt="html" class="abs"></th>
		<th data-col="lines" data-type="number" data-fmt="pct" class="pct">Lines</th>
		<th data-col="lines_raw" data-type="number" data-fmt="html" class="abs"></th>
		</tr>
		</thead>
		<tbody><tr>
		<td class="file high" data-value="src/"><a href="src/index.html">src/</a></td>
		<td data-value="87.57" class="pic high"><div class="chart"><div class="cover-fill" style="width: 87%;"></div><div class="cover-empty" style="width:13%;"></div></div></td>
		<td data-value="87.57" class="pct high">87.57%</td>
		<td data-value="370" class="abs high">324/370</td>
		<td data-value="65.38" class="pct medium">65.38%</td>
		<td data-value="208" class="abs medium">136/208</td>
		<td data-value="76.32" class="pct medium">76.32%</td>
		<td data-value="76" class="abs medium">58/76</td>
		<td data-value="88.58" class="pct high">88.58%</td>
		<td data-value="289" class="abs high">256/289</td>
		</tr>

		</tbody>
		</table>
		</div><div class='push'></div><!-- for sticky footer -->
		</div><!-- /wrapper -->
		<div class='footer quiet pad2 space-top1 center small'>
		Code coverage
		generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Thu May 03 2018 01:34:45 GMT+0300 (+03)
		</div>
		</div>
		<script src="prettify.js"></script>
		<script>
		window.onload = function () {
		if (typeof prettyPrint === 'function') {
		prettyPrint();
		}
		};
		</script>
		<script src="sorter.js"></script>
		</body>
		</html>

-1

coverage/prettify.css

.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}

-1

coverage/prettify.js

coverage/sort-arrow-sprite.png

Sorry, the diff of this file is not supported yet

-158

coverage/sorter.js

		var addSorting = (function () {
		"use strict";
		var cols,
		currentSort = {
		index: 0,
		desc: false
		};

		// returns the summary table element
		function getTable() { return document.querySelector('.coverage-summary'); }
		// returns the thead element of the summary table
		function getTableHeader() { return getTable().querySelector('thead tr'); }
		// returns the tbody element of the summary table
		function getTableBody() { return getTable().querySelector('tbody'); }
		// returns the th element for nth column
		function getNthColumn(n) { return getTableHeader().querySelectorAll('th')[n]; }

		// loads all columns
		function loadColumns() {
		var colNodes = getTableHeader().querySelectorAll('th'),
		colNode,
		cols = [],
		col,
		i;

		for (i = 0; i < colNodes.length; i += 1) {
		colNode = colNodes[i];
		col = {
		key: colNode.getAttribute('data-col'),
		sortable: !colNode.getAttribute('data-nosort'),
		type: colNode.getAttribute('data-type') \|\| 'string'
		};
		cols.push(col);
		if (col.sortable) {
		col.defaultDescSort = col.type === 'number';
		colNode.innerHTML = colNode.innerHTML + '<span class="sorter"></span>';
		}
		}
		return cols;
		}
		// attaches a data attribute to every tr element with an object
		// of data values keyed by column name
		function loadRowData(tableRow) {
		var tableCols = tableRow.querySelectorAll('td'),
		colNode,
		col,
		data = {},
		i,
		val;
		for (i = 0; i < tableCols.length; i += 1) {
		colNode = tableCols[i];
		col = cols[i];
		val = colNode.getAttribute('data-value');
		if (col.type === 'number') {
		val = Number(val);
		}
		data[col.key] = val;
		}
		return data;
		}
		// loads all row data
		function loadData() {
		var rows = getTableBody().querySelectorAll('tr'),
		i;

		for (i = 0; i < rows.length; i += 1) {
		rows[i].data = loadRowData(rows[i]);
		}
		}
		// sorts the table using the data for the ith column
		function sortByIndex(index, desc) {
		var key = cols[index].key,
		sorter = function (a, b) {
		a = a.data[key];
		b = b.data[key];
		return a < b ? -1 : a > b ? 1 : 0;
		},
		finalSorter = sorter,
		tableBody = document.querySelector('.coverage-summary tbody'),
		rowNodes = tableBody.querySelectorAll('tr'),
		rows = [],
		i;

		if (desc) {
		finalSorter = function (a, b) {
		return -1 * sorter(a, b);
		};
		}

		for (i = 0; i < rowNodes.length; i += 1) {
		rows.push(rowNodes[i]);
		tableBody.removeChild(rowNodes[i]);
		}

		rows.sort(finalSorter);

		for (i = 0; i < rows.length; i += 1) {
		tableBody.appendChild(rows[i]);
		}
		}
		// removes sort indicators for current column being sorted
		function removeSortIndicators() {
		var col = getNthColumn(currentSort.index),
		cls = col.className;

		cls = cls.replace(/ sorted$/, '').replace(/ sorted-desc$/, '');
		col.className = cls;
		}
		// adds sort indicators for current column being sorted
		function addSortIndicators() {
		getNthColumn(currentSort.index).className += currentSort.desc ? ' sorted-desc' : ' sorted';
		}
		// adds event listeners for all sorter widgets
		function enableUI() {
		var i,
		el,
		ithSorter = function ithSorter(i) {
		var col = cols[i];

		return function () {
		var desc = col.defaultDescSort;

		if (currentSort.index === i) {
		desc = !currentSort.desc;
		}
		sortByIndex(i, desc);
		removeSortIndicators();
		currentSort.index = i;
		currentSort.desc = desc;
		addSortIndicators();
		};
		};
		for (i =0 ; i < cols.length; i += 1) {
		if (cols[i].sortable) {
		// add the click event handler on the th so users
		// dont have to click on those tiny arrows
		el = getNthColumn(i).querySelector('.sorter').parentElement;
		if (el.addEventListener) {
		el.addEventListener('click', ithSorter(i));
		} else {
		el.attachEvent('onclick', ithSorter(i));
		}
		}
		}
		}
		// adds sorting functionality to the UI
		return function () {
		if (!getTable()) {
		return;
		}
		cols = loadColumns();
		loadData(cols);
		addSortIndicators();
		enableUI();
		};
		})();

		window.addEventListener('load', addSorting);

-119

coverage/src/index.html

		<!doctype html>
		<html lang="en">
		<head>
		<title>Code coverage report for src/</title>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="../prettify.css" />
		<link rel="stylesheet" href="../base.css" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<style type='text/css'>
		.coverage-summary .sorter {
		background-image: url(../sort-arrow-sprite.png);
		}
		</style>
		</head>
		<body>
		<div class='wrapper'>
		<div class='pad1'>
		<h1>
		<a href="../index.html">all files</a> src/
		</h1>
		<div class='clearfix'>
		<div class='fl pad1y space-right2'>
		<span class="strong">87.57% </span>
		<span class="quiet">Statements</span>
		<span class='fraction'>324/370</span>
		</div>
		<div class='fl pad1y space-right2'>
		<span class="strong">65.38% </span>
		<span class="quiet">Branches</span>
		<span class='fraction'>136/208</span>
		</div>
		<div class='fl pad1y space-right2'>
		<span class="strong">76.32% </span>
		<span class="quiet">Functions</span>
		<span class='fraction'>58/76</span>
		</div>
		<div class='fl pad1y space-right2'>
		<span class="strong">88.58% </span>
		<span class="quiet">Lines</span>
		<span class='fraction'>256/289</span>
		</div>
		</div>
		</div>
		<div class='status-line high'></div>
		<div class="pad1">
		<table class="coverage-summary">
		<thead>
		<tr>
		<th data-col="file" data-fmt="html" data-html="true" class="file">File</th>
		<th data-col="pic" data-type="number" data-fmt="html" data-html="true" class="pic"></th>
		<th data-col="statements" data-type="number" data-fmt="pct" class="pct">Statements</th>
		<th data-col="statements_raw" data-type="number" data-fmt="html" class="abs"></th>
		<th data-col="branches" data-type="number" data-fmt="pct" class="pct">Branches</th>
		<th data-col="branches_raw" data-type="number" data-fmt="html" class="abs"></th>
		<th data-col="functions" data-type="number" data-fmt="pct" class="pct">Functions</th>
		<th data-col="functions_raw" data-type="number" data-fmt="html" class="abs"></th>
		<th data-col="lines" data-type="number" data-fmt="pct" class="pct">Lines</th>
		<th data-col="lines_raw" data-type="number" data-fmt="html" class="abs"></th>
		</tr>
		</thead>
		<tbody><tr>
		<td class="file high" data-value="Pane.js"><a href="Pane.js.html">Pane.js</a></td>
		<td data-value="89.87" class="pic high"><div class="chart"><div class="cover-fill" style="width: 89%;"></div><div class="cover-empty" style="width:11%;"></div></div></td>
		<td data-value="89.87" class="pct high">89.87%</td>
		<td data-value="79" class="abs high">71/79</td>
		<td data-value="52.94" class="pct medium">52.94%</td>
		<td data-value="51" class="abs medium">27/51</td>
		<td data-value="85.71" class="pct high">85.71%</td>
		<td data-value="14" class="abs high">12/14</td>
		<td data-value="92.59" class="pct high">92.59%</td>
		<td data-value="54" class="abs high">50/54</td>
		</tr>

		<tr>
		<td class="file medium" data-value="Resizer.js"><a href="Resizer.js.html">Resizer.js</a></td>
		<td data-value="77.27" class="pic medium"><div class="chart"><div class="cover-fill" style="width: 77%;"></div><div class="cover-empty" style="width:23%;"></div></div></td>
		<td data-value="77.27" class="pct medium">77.27%</td>
		<td data-value="66" class="abs medium">51/66</td>
		<td data-value="54.9" class="pct medium">54.9%</td>
		<td data-value="51" class="abs medium">28/51</td>
		<td data-value="54.55" class="pct medium">54.55%</td>
		<td data-value="22" class="abs medium">12/22</td>
		<td data-value="72.5" class="pct medium">72.5%</td>
		<td data-value="40" class="abs medium">29/40</td>
		</tr>

		<tr>
		<td class="file high" data-value="SplitPane.js"><a href="SplitPane.js.html">SplitPane.js</a></td>
		<td data-value="89.78" class="pic high"><div class="chart"><div class="cover-fill" style="width: 89%;"></div><div class="cover-empty" style="width:11%;"></div></div></td>
		<td data-value="89.78" class="pct high">89.78%</td>
		<td data-value="225" class="abs high">202/225</td>
		<td data-value="76.42" class="pct medium">76.42%</td>
		<td data-value="106" class="abs medium">81/106</td>
		<td data-value="85" class="pct high">85%</td>
		<td data-value="40" class="abs high">34/40</td>
		<td data-value="90.77" class="pct high">90.77%</td>
		<td data-value="195" class="abs high">177/195</td>
		</tr>

		</tbody>
		</table>
		</div><div class='push'></div><!-- for sticky footer -->
		</div><!-- /wrapper -->
		<div class='footer quiet pad2 space-top1 center small'>
		Code coverage
		generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Thu May 03 2018 01:34:45 GMT+0300 (+03)
		</div>
		</div>
		<script src="../prettify.js"></script>
		<script>
		window.onload = function () {
		if (typeof prettyPrint === 'function') {
		prettyPrint();
		}
		};
		</script>
		<script src="../sorter.js"></script>
		</body>
		</html>

lcov.info

Sorry, the diff of this file is not supported yet

-11

tsconfig.json

		{
		"compilerOptions": {
		"allowSyntheticDefaultImports": true,
		"moduleResolution": "node",
		"noImplicitAny": true,
		"strict": true
		},
		"exclude": [
		"node_modules"
		]
		}

react-split-pane-refined - npm Package Compare versions

Fixed alerts

Improved metrics

Worsened metrics