Dmitry Efimenko borm

Tether Drop + React Portal + Redux

This is an example of using Tether Drop with React Portal (and Redux for managing the state). I was asked if using React Portal is redundant, as both libraries pull the content into the <body>. Using only Drop would cause an invariant violation in React becuase of the DOM mutation, so I'm using React Portal to first bring it outside without React complaining (I don't know how React Portal does it, I haven't checked out the source, but it works). Once it's out of React's supervision, I can apply Drop to it.

Dropdown.jsx is the actual dropdown component
App.jsx is just an demo that uses it

This is my lazy way out of this limitation using an existing library that has much more features than you need, but chances are that you're going to need a library like React Portal anyway for stuff like modals.

Notes

Polyfill for scrollIntoViewIfNeeded()

This gist provides polyfill code for the scrollIntoViewIfNeeded() Element method found on WebKit browsers.

Features

There is no particular requirement on the position in the hierarchy of the element being made visible with respect to any scrollable areas. Elements that are relatively positioned as well as nested scrollable areas are both supported.

Licence

	function generateAlphabets() {
	var alphabets = [];
	var start = 'A'.charCodeAt(0);
	var last = 'Z'.charCodeAt(0);
	for (var i = start; i <= last; ++i) {
	alphabets.push(String.fromCharCode(i));
	}

	return alphabets.join('');
	}

	var path = require('path');
	var webpack = require('webpack');

	var reactNativeExternalsPromise = (function () {
	var reactNativeRoot = path.dirname(require.resolve('react-native/package'));
	var blacklist = require('react-native/packager/blacklist');
	var ReactPackager = require('react-native/packager/react-packager');
	const rnEntryPoint = require.resolve('react-native');

	return ReactPackager.getDependencies({

	module.exports = {

	parserOptions: {
	ecmaVersion: 7,
	sourceType: 'module',
	ecmaFeatures: {
	jsx: true,
	experimentalObjectRestSpread: true
	}
	},

	'use strict';

	import { scaleOrdinal, schemeCategory20c } from 'd3-scale';
	import React from 'react';

	module.exports = React.createClass({

	displayName: 'BarChart',

	propTypes: {

	/* Sometimes it's pretty easy to run ito troubles with React ES6 components.
	Consider the following code: */

	class EventStub extends Component {
	componentDidMount() {
	window.addEventListener('resize', this.onResize.bind(this)); //notice .bind
	}

	componentWillUnmount() {
	window.removeEventListener('resize', this.onResize.bind(this));

	(function() {
	'use strict';

	const readableStreamClosedPromise = %CreatePrivateOwnSymbol('[[closedPromise]]');
	const readableStreamCloseRequested = %CreatePrivateOwnSymbol('[[closeRequested]]');
	const readableStreamController = %CreatePrivateOwnSymbol('[[controller]]');
	const readableStreamPullAgain = %CreatePrivateOwnSymbol('[[pullAgain]]');
	const readableStreamPulling = %CreatePrivateOwnSymbol('[[pulling]]');
	const readableStreamQueue = %CreatePrivateOwnSymbol('[[queue]]');
	const readableStreamReader = %CreatePrivateOwnSymbol('[[reader]]');

	@function strip-units($number) {// From : http://stackoverflow.com/a/12335841/1339426
	@return $number / ($number * 0 + 1);
	}

	/**
	* Use em or rem font-size in Bootstrap 3
	* Ported from Less version here: https://gist.github.com/jasny/9731895
	*/
	$font-size-root: 18px;
	$font-unit: 1rem; // Pick em or rem here

	/**
	* Use em or rem font-size in Bootstrap 3
	*/

	@font-size-root: 14px;
	@font-unit: 0rem; // Pick em or rem here


	// Convert all variables to em