menu.tsx; transpiled into commonjs & es6

menu.tsx

import * as React from 'react';
import { NavPane, NavPaneItem, Text } from 'react-desktop/windows';

export class Menu extends React.Component<any, any> {
	static defaultProps = {
		color: '#cc7f29',
		theme: 'light'
	};

	state: {
		selected: string;
	}

	_isMounted: boolean = false;

	constructor() {
		super(Menu.defaultProps);
		this.state = {
			selected: 'Item 1'
		}
	}

	componentDidMount() {
		this._isMounted = true;
	}
	componentWillUnmount() {
		this._isMounted = false;
	}

	render() {
		return (
			<NavPane openLength={200} push color={this.props.color} theme={this.props.theme}>
				{this.renderItem('Item 1', 'Content 1') }
				{this.renderItem('Item 2', 'Content 2') }
				{this.renderItem('Item 3', 'Content 3') }
			</NavPane>
		);
	}

	renderItem(title, content) {
		return (
			<NavPaneItem
				title={title}
				icon={ this.renderIcon(title) }
				theme="light"
				background="#ffffff"
				selected={this.state.selected === title}
				onSelect={ () => {if(this._isMounted){ this.setState({ selected: title }) }} }
				padding="10px 20px"
				push
				>
				<Text>{content}</Text>
			</NavPaneItem>
		);
	}

	renderIcon(name) {
		const fill = this.props.theme === 'dark' ? '#ffffff' : '#000000';
		switch (name) {
			case 'Item 1':
				return (
					<svg width="16px" height="14.9px" viewBox="0 0 16 14.9">
						<polygon fill={fill} points="16,5.6 10.6,4.7 8,0 5.4,4.7 0,5.7 3.8,9.6 3.1,14.9 8,12.6 13,14.8 12.3,9.5 "/>
					</svg>
				);
			case 'Item 2':
				return (
					<svg width="16px" height="13.5px" viewBox="0 0 16 13.5">
						<path
							fill={fill}
							d="M16,4.2C16,1.9,14.1,0,11.7,0c-1.4,0-2.6,0.6-3.4,1.6c0,0,0,0,0,0C8.3,1.7,8.1,1.8,8,1.8c-0.2,0-0.3-0.1-0.4-0.2c0,0,0,0,0,0C6.8,0.6,5.6,0,4.3,0C1.9,0,0,1.9,0,4.2c0,0,0,0.1,0,0.1l0,0c0,0,0,0.1,0,0.3C0,4.8,0.1,5,0.1,5.2c0.3,1.4,1.4,4.1,5.1,6.5c2.1,1.4,2.6,1.8,2.8,1.8c0,0,0,0,0,0c0,0,0,0,0,0c0.1,0,0.7-0.4,2.8-1.8 c3.5-2.3,4.6-4.8,5-6.3C15.9,5.1,16,4.8,16,4.5C16,4.3,16,4.2,16,4.2L16,4.2C16,4.2,16,4.2,16,4.2z"
							/>
					</svg>
				);
			case 'Item 3':
				return (
					<svg width="16px" height="15.6px" viewBox="0 0 16 15.6">
						<path
							fill={fill}
							d="M14.9,3.2c0.7-0.9,1-1.7,1.1-2.4c0-0.2,0-0.4-0.1-0.5c0,0,0-0.1-0.1-0.1c0,0-0.1-0.1-0.1-0.1C15.6,0,15.4,0,15.2,0c-0.7,0-1.6,0.4-2.4,1c-0.7,0.5-1.4,1.2-2.4,2.3C10.2,3.5,10,3.6,9.8,3.8L8.3,3.4L7.9,3.3C8,3.2,8.1,3.1,8.1,3c0-0.1,0-0.2-0.1-0.3L7.6,2.3C7.5,2.3,7.4,2.2,7.3,2.2c-0.1,0-0.2,0-0.3,0.1L6.5,2.8L6.2,2.8c0.1-0.1,0.1-0.2,0.1-0.3c0-0.1,0-0.2-0.1-0.3L5.8,1.9C5.7,1.8,5.6,1.8,5.5,1.8c-0.1,0-0.2,0-0.3,0.1L4.7,2.3L2.8,1.8c0,0-0.1,0-0.1,0c-0.1,0-0.3,0.1-0.4,0.1L1.6,2.6C1.5,2.6,1.5,2.7,1.5,2.8c0,0.1,0.1,0.3,0.2,0.3l4.1,2.2c0,0,0.1,0.1,0.1,0.1L7,6.6C6,7.7,5,8.8,4.2,9.7C4.2,9.8,4.1,9.9,4,10L0.9,9.7c0,0,0,0-0.1,0c-0.1,0-0.3,0.1-0.4,0.2l-0.3,0.3C0,10.3,0,10.4,0,10.5c0,0.1,0.1,0.3,0.2,0.3l2.2,1c0,0,0.1,0,0.1,0.1l0.2,0.2c-0.1,0.2-0.1,0.3-0.1,0.4c0,0.2,0.1,0.3,0.2,0.4C2.9,13,3,13.1,3.2,13.1c0.1,0,0.3,0,0.4-0.1l0.2,0.2c0,0,0,0.1,0.1,0.1l1.1,2.2c0.1,0.1,0.2,0.2,0.4,0.2c0.1,0,0.2,0,0.3-0.1l0.3-0.3C6,15.1,6,14.9,6,14.8c0,0-0.3-3.1-0.3-3.1c0.1-0.1,0.2-0.1,0.3-0.2c1-0.7,2.1-1.7,3.2-2.7l1.2,1.1c0,0,0.1,0.1,0.1,0.1l2.3,4c0.1,0.1,0.2,0.2,0.3,0.2c0.1,0,0.2,0,0.3-0.1l0.7-0.7c0.1-0.1,0.1-0.2,0.1-0.3c0,0,0-0.1,0-0.1l-0.5-1.8L13.6,11l0.5-0.4c0.1-0.1,0.1-0.2,0.1-0.3c0-0.1,0-0.2-0.1-0.3l-0.3-0.3c-0.1-0.1-0.2-0.1-0.3-0.1c-0.1,0-0.2,0-0.3,0.1l-0.1-0.3l0.5-0.5c0.1-0.1,0.1-0.2,0.1-0.3c0-0.1,0-0.2-0.1-0.3l-0.3-0.3c-0.1-0.1-0.2-0.1-0.3-0.1c-0.1,0-0.2,0-0.3,0.1L12.1,6c0.2-0.2,0.4-0.4,0.6-0.5C13.7,4.5,14.4,3.8,14.9,3.2z"
							/>
					</svg>
				);
		}
	}
}

menu_commonjs.js

"use strict";
const React = require( 'react' );
const windows_1 = require( 'react-desktop/windows' );
class Menu extends React.Component
{
    constructor( )
    {
        super( Menu.defaultProps );
        this._isMounted = false;
        this.state = {
            selected: 'Item 1'
        };
    }
    componentDidMount( )
    {
        this._isMounted = true;
    }
    componentWillUnmount( )
    {
        this._isMounted = false;
    }
    render( )
    {
        return (
            React.createElement( windows_1.NavPane,
            {
                openLength: 200,
                push: true,
                color: this.props.color,
                theme: this.props.theme
            }, this.renderItem( 'Item 1', 'Content 1' ), this.renderItem( 'Item 2', 'Content 2' ), this.renderItem( 'Item 3', 'Content 3' ) ) );
    }
    renderItem( title, content )
    {
        return ( React.createElement( windows_1.NavPaneItem,
        {
            title: title,
            icon: this.renderIcon( title ),
            theme: "light",
            background: "#ffffff",
            selected: this.state.selected === title,
            onSelect: ( ) =>
            {
                if ( this._isMounted )
                {
                    this.setState(
                    {
                        selected: title
                    } );
                }
            },
            padding: "10px 20px",
            push: true
        }, React.createElement( windows_1.Text, null, content ) ) );
    }
    renderIcon( name )
    {
        const fill = this.props.theme === 'dark' ? '#ffffff' : '#000000';
        switch ( name )
        {
            case 'Item 1':
                return ( React.createElement( "svg",
                {
                    width: "16px",
                    height: "14.9px",
                    viewBox: "0 0 16 14.9"
                }, React.createElement( "polygon",
                {
                    fill: fill,
                    points: "16,5.6 10.6,4.7 8,0 5.4,4.7 0,5.7 3.8,9.6 3.1,14.9 8,12.6 13,14.8 12.3,9.5 "
                } ) ) );
            case 'Item 2':
                return ( React.createElement( "svg",
                {
                    width: "16px",
                    height: "13.5px",
                    viewBox: "0 0 16 13.5"
                }, React.createElement( "path",
                {
                    fill: fill,
                    d: "M16,4.2C16,1.9,14.1,0,11.7,0c-1.4,0-2.6,0.6-3.4,1.6c0,0,0,0,0,0C8.3,1.7,8.1,1.8,8,1.8c-0.2,0-0.3-0.1-0.4-0.2c0,0,0,0,0,0C6.8,0.6,5.6,0,4.3,0C1.9,0,0,1.9,0,4.2c0,0,0,0.1,0,0.1l0,0c0,0,0,0.1,0,0.3C0,4.8,0.1,5,0.1,5.2c0.3,1.4,1.4,4.1,5.1,6.5c2.1,1.4,2.6,1.8,2.8,1.8c0,0,0,0,0,0c0,0,0,0,0,0c0.1,0,0.7-0.4,2.8-1.8 c3.5-2.3,4.6-4.8,5-6.3C15.9,5.1,16,4.8,16,4.5C16,4.3,16,4.2,16,4.2L16,4.2C16,4.2,16,4.2,16,4.2z"
                } ) ) );
            case 'Item 3':
                return ( React.createElement( "svg",
                {
                    width: "16px",
                    height: "15.6px",
                    viewBox: "0 0 16 15.6"
                }, React.createElement( "path",
                {
                    fill: fill,
                    d: "M14.9,3.2c0.7-0.9,1-1.7,1.1-2.4c0-0.2,0-0.4-0.1-0.5c0,0,0-0.1-0.1-0.1c0,0-0.1-0.1-0.1-0.1C15.6,0,15.4,0,15.2,0c-0.7,0-1.6,0.4-2.4,1c-0.7,0.5-1.4,1.2-2.4,2.3C10.2,3.5,10,3.6,9.8,3.8L8.3,3.4L7.9,3.3C8,3.2,8.1,3.1,8.1,3c0-0.1,0-0.2-0.1-0.3L7.6,2.3C7.5,2.3,7.4,2.2,7.3,2.2c-0.1,0-0.2,0-0.3,0.1L6.5,2.8L6.2,2.8c0.1-0.1,0.1-0.2,0.1-0.3c0-0.1,0-0.2-0.1-0.3L5.8,1.9C5.7,1.8,5.6,1.8,5.5,1.8c-0.1,0-0.2,0-0.3,0.1L4.7,2.3L2.8,1.8c0,0-0.1,0-0.1,0c-0.1,0-0.3,0.1-0.4,0.1L1.6,2.6C1.5,2.6,1.5,2.7,1.5,2.8c0,0.1,0.1,0.3,0.2,0.3l4.1,2.2c0,0,0.1,0.1,0.1,0.1L7,6.6C6,7.7,5,8.8,4.2,9.7C4.2,9.8,4.1,9.9,4,10L0.9,9.7c0,0,0,0-0.1,0c-0.1,0-0.3,0.1-0.4,0.2l-0.3,0.3C0,10.3,0,10.4,0,10.5c0,0.1,0.1,0.3,0.2,0.3l2.2,1c0,0,0.1,0,0.1,0.1l0.2,0.2c-0.1,0.2-0.1,0.3-0.1,0.4c0,0.2,0.1,0.3,0.2,0.4C2.9,13,3,13.1,3.2,13.1c0.1,0,0.3,0,0.4-0.1l0.2,0.2c0,0,0,0.1,0.1,0.1l1.1,2.2c0.1,0.1,0.2,0.2,0.4,0.2c0.1,0,0.2,0,0.3-0.1l0.3-0.3C6,15.1,6,14.9,6,14.8c0,0-0.3-3.1-0.3-3.1c0.1-0.1,0.2-0.1,0.3-0.2c1-0.7,2.1-1.7,3.2-2.7l1.2,1.1c0,0,0.1,0.1,0.1,0.1l2.3,4c0.1,0.1,0.2,0.2,0.3,0.2c0.1,0,0.2,0,0.3-0.1l0.7-0.7c0.1-0.1,0.1-0.2,0.1-0.3c0,0,0-0.1,0-0.1l-0.5-1.8L13.6,11l0.5-0.4c0.1-0.1,0.1-0.2,0.1-0.3c0-0.1,0-0.2-0.1-0.3l-0.3-0.3c-0.1-0.1-0.2-0.1-0.3-0.1c-0.1,0-0.2,0-0.3,0.1l-0.1-0.3l0.5-0.5c0.1-0.1,0.1-0.2,0.1-0.3c0-0.1,0-0.2-0.1-0.3l-0.3-0.3c-0.1-0.1-0.2-0.1-0.3-0.1c-0.1,0-0.2,0-0.3,0.1L12.1,6c0.2-0.2,0.4-0.4,0.6-0.5C13.7,4.5,14.4,3.8,14.9,3.2z"
                } ) ) );
        }
    }
}
Menu.defaultProps = {
    color: '#cc7f29',
    theme: 'light'
};
exports.Menu = Menu;
//# sourceMappingURL=menu.js.map

menu_es6.js

declare module 'react-desktop/windows' {


	interface defaultProps {
		color?: string,
		theme?: string
	}
		/**
	type __CheckboxProps = {
		defaultValue?: string,
		defaultChecked?: boolean,
		hidden?: boolean,
		label?: string,
		onChange?: any
	}
	**/

	// React.HTMLAttributes

	//interface __TextProps extends __AlignedProps {
	interface __TextProps extends __AlignedProps {
		hidden?: boolean;
		height?: number;

	}

	interface __AlignedProps extends defaultProps {
		background?: string | boolean;
		verticalAlignment?: "top" | "center" | "bottom";
		padding?: string;
		margin?: string;
		horizontalAlignment?: "left" | "center" | "right";
	}

	type __ElementsType = string | JSX.Element | string[] | JSX.Element[];
	/**
	 * @function render()
	 * @returns {JXS.Element}
	 */
	//type render = () => JSX.Element

	class Checkbox extends React.Component<React.HTMLAttributes,void> { }


	/** START file: navPane/windows/navPane.js */
	interface __NavPaneProps extends defaultProps {
		canPaneToggle?: boolean;
		defaultIsPaneExpanded?: string;
		onPaneToggle?: React.EventHandler<any>;
		paneCompactedLength?: string | number;
		paneExpandedLength?: string | number;
		openLength: string | number;
		push: boolean;
	}

	export class NavPane extends React.Component<__NavPaneProps,void> {
		propTypes: __NavPaneProps
		contextTypes: themeContextTypes;
		render(): JSX.Element
		renderContent(): any
	}
	/** END file: navPane/windows/navPane.js */

	/** START file: navPane/windows/pane/pane.js */
	export class Pane extends React.Component<__NavPaneProps,void> {
		constructor(props,...any)
		propTypes: {
			items: __ElementsType
			canPaneToggle: boolean
			onPaneToggle: Function
			defaultIsPaneExpanded: boolean
			paneCompactedLength: string | number
			paneExpandedLength: string | number
		}
		defaultProps: {
			canPaneToggle: boolean
			defaultIsPaneExpanded: boolean
			paneCompactedLength: string | number
			paneExpandedLength: string | number
		}
		toggleOpen:Function;
		render(): JSX.Element
		renderItems(): JSX.Element | JSX.Element[]
	}
	/** END file: navPane/windows/pane/pane.js */

	/** START file: navPane/windows/item/item.js */
	interface __NavPaneItemState {
		prevTitle: __ElementsType;
	}
	interface __NavPaneItemProps extends __AlignedProps {
		title?: __ElementsType
		icon?: __ElementsType
		push?: boolean;
		onSelect?: React.EventHandler<any>;
		selected?: boolean;
		paneTheme?: string;
	}

	class NavPaneItem extends React.Component<__NavPaneItemProps,__NavPaneItemState> {
		constructor()
		componentWillReceiveProps(nextProps);
	 }
	/** END file: navPane/windows/item/item.js */

	/** START file: style/hidden.js */

	type hiddenPropTypes = { 
		hidden: boolean
	}

	function removeHiddenProps(props: props): {string: any}

	function mapHiddenStyle(key: any, value: any): any

	//function styleHelper(...options, hiddenPropTypes, mapHiddenStyle):
	class styleHelper {
		constructor(any,propTypes,mapStyleCallback,mapStylesCallback,mapProps) 

		doStyleHelper(WrappedComponent): JSX.Element
	}

	/** END file: style/hidden.js */

	/** START file: style/color/windows */

	type colorPropTypes = string | boolean;

	type colorContextType = string | boolean;

	type applyColorProps = ( props: props, context: context ) => { applyDefaultProps(props: props,context: context, {color: string}) }

	/**
	 * @function ColorContext
	 * @param {boolean} preserveProperty
	 */
	function ColorContext(preserveProperty: boolean): ComposedComponent;

	/** END file: style/color/windows */

	/** START file: src/button/windows/button.js */

	class Button extends React.Component<__NavPaneItemProps,__NavPaneItemState> {
		propTypes:
			colorPropTypes |
			themePropTypes | 
			{
				type: string
				push: boolean
				onClick: Function
			}

			contextTypes: {

			}

	}

	/** END file: src/button/windows/button.js */

	class Text extends React.Component<__TextProps,void> { }

	/** START file: Style/theme/windows */

	type themePropTypes = {
		theme: string
	};

	type themeContextTypes = {
		theme: string
	}

	type props = {};
	type context = {};

	/**
	 * @function
	 * @return {props} applyDefaultProps()
	 */
	interface applyThemeProps { ( props: props , context: context ): applyDefaultProps }

	function ThemeContext(): ComposedComponent;

	class ComposedComponent extends React.Component<themePropTypes,void> {
		propTypes: themePropTypes;
		contextTypes: themeContextTypes;
		childContextTypes: themeContextTypes;

		getChildContext(): themePropTypes;
		/**
		 * @function render
		 * @returns {JSX.Element} | returns ComposedComponent
		 */
		render(): JSX.Element;
	}

	/** END file: Style/theme/windows */


	/** file: styleHelper */

	/**
	 * @function applyDefaultProps
	 * @param {props} props
	 * @param {context} context
	 * @param {defaultProps} defaultProps | set to { theme: 'light' } by default
	 * @return {props} finalProps;
	 */
	type applyDefaultProps = ( props: props , context: context , defaultProps: props ) => props

	/**
	 * @function extractProps
	 * @return {[props,props]} finalProps,extractedProps
	 */
	function extractProps(props: props, proptypes: props): [props, props]





}