+);
+React.render(example, mountNode);
\ No newline at end of file
diff --git a/docs/package.json b/docs/package.json
index 38b006d7..3e762a76 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -24,8 +24,6 @@
"node-fs": "^0.1.7",
"node-jsx": "~0.12.0",
"open": "^0.0.5",
- "react": "~0.13.1",
- "react-async": "^2.1.0",
"reactify": "^1.1.0",
"uglify-js": "^2.3.6",
"watchify": "^3.1.0"
diff --git a/docs/public/assets/bundle.js b/docs/public/assets/bundle.js
index f649ce49..4d74c2e4 100644
--- a/docs/public/assets/bundle.js
+++ b/docs/public/assets/bundle.js
@@ -10,8 +10,7 @@ window.React = React;
React.render(React.createElement(App, null), document.getElementById('application'));
-
-},{"./src/App.jsx":160,"react":159}],2:[function(require,module,exports){
+},{"./src/App.jsx":5,"react":208}],2:[function(require,module,exports){
},{}],3:[function(require,module,exports){
// shim for using process in browser
@@ -19,32 +18,66 @@ React.render(React.createElement(App, null), document.getElementById('applicatio
var process = module.exports = {};
var queue = [];
var draining = false;
+var currentQueue;
+var queueIndex = -1;
+
+function cleanUpNextTick() {
+ draining = false;
+ if (currentQueue.length) {
+ queue = currentQueue.concat(queue);
+ } else {
+ queueIndex = -1;
+ }
+ if (queue.length) {
+ drainQueue();
+ }
+}
function drainQueue() {
if (draining) {
return;
}
+ var timeout = setTimeout(cleanUpNextTick);
draining = true;
- var currentQueue;
+
var len = queue.length;
while(len) {
currentQueue = queue;
queue = [];
- var i = -1;
- while (++i < len) {
- currentQueue[i]();
+ while (++queueIndex < len) {
+ if (currentQueue) {
+ currentQueue[queueIndex].run();
+ }
}
+ queueIndex = -1;
len = queue.length;
}
+ currentQueue = null;
draining = false;
+ clearTimeout(timeout);
}
+
process.nextTick = function (fun) {
- queue.push(fun);
- if (!draining) {
+ var args = new Array(arguments.length - 1);
+ if (arguments.length > 1) {
+ for (var i = 1; i < arguments.length; i++) {
+ args[i - 1] = arguments[i];
+ }
+ }
+ queue.push(new Item(fun, args));
+ if (queue.length === 1 && !draining) {
setTimeout(drainQueue, 0);
}
};
+// v8 likes predictible objects
+function Item(fun, array) {
+ this.fun = fun;
+ this.array = array;
+}
+Item.prototype.run = function () {
+ this.fun.apply(null, this.array);
+};
process.title = 'browser';
process.browser = true;
process.env = {};
@@ -66,7 +99,6 @@ process.binding = function (name) {
throw new Error('process.binding is not supported');
};
-// TODO(shtylman)
process.cwd = function () { return '/' };
process.chdir = function (dir) {
throw new Error('process.chdir is not supported');
@@ -119,9263 +151,7283 @@ if (typeof define !== 'undefined' && define.amd) {
}
},{}],5:[function(require,module,exports){
-/**
- * Copyright 2013-2015, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * @providesModule AutoFocusMixin
- * @typechecks static-only
- */
+var React = require('react');
-'use strict';
+var HomePage = require('./HomePage.jsx');
-var focusNode = require("./focusNode");
+var App = React.createClass({displayName: "App",
+ statics: {
-var AutoFocusMixin = {
- componentDidMount: function() {
- if (this.props.autoFocus) {
- focusNode(this.getDOMNode());
+ /**
+ * Get the doctype the page expects to be rendered with
+ *
+ * @returns {string}
+ */
+ getDoctype: function () {
+ return '';
+ },
+
+ renderToString: function (props) {
+ return App.getDoctype() +
+ React.renderToString(React.createElement(App, React.__spread({}, props)));
+ },
+
+ /**
+ * Get the list of pages that are renderable
+ *
+ * @returns {Array}
+ */
+ getPages: function () {
+ return ['index.html'];
}
- }
-};
-module.exports = AutoFocusMixin;
+ },
-},{"./focusNode":123}],6:[function(require,module,exports){
-/**
- * Copyright 2013-2015 Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * @providesModule BeforeInputEventPlugin
- * @typechecks static-only
- */
+ render: function () {
-'use strict';
+ return (
+ React.createElement("div", {className: "wrapper"},
+ React.createElement(HomePage, null)
+ )
+ );
+ }
+});
-var EventConstants = require("./EventConstants");
-var EventPropagators = require("./EventPropagators");
-var ExecutionEnvironment = require("./ExecutionEnvironment");
-var FallbackCompositionState = require("./FallbackCompositionState");
-var SyntheticCompositionEvent = require("./SyntheticCompositionEvent");
-var SyntheticInputEvent = require("./SyntheticInputEvent");
+module.exports = App;
-var keyOf = require("./keyOf");
-var END_KEYCODES = [9, 13, 27, 32]; // Tab, Return, Esc, Space
-var START_KEYCODE = 229;
+},{"./HomePage.jsx":9,"react":208}],6:[function(require,module,exports){
+var React = require('react');
+var fs = require('fs');
-var canUseCompositionEvent = (
- ExecutionEnvironment.canUseDOM &&
- 'CompositionEvent' in window
-);
+var CustomComponent = require('./CustomComponent.jsx');
-var documentMode = null;
-if (ExecutionEnvironment.canUseDOM && 'documentMode' in document) {
- documentMode = document.documentMode;
-}
+var Components = React.createClass({displayName: "Components",
+ render: function () {
+ return (
+ React.createElement("main", {role: "main"},
+ React.createElement("section", {id: "atoms"},
+ React.createElement("h2", {className: "page-header"}, "Atoms"),
+ React.createElement("p", null, "Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button."),
-// Webkit offers a very useful `textInput` event that can be used to
-// directly represent `beforeInput`. The IE `textinput` event is not as
-// useful, so we don't use it.
-var canUseTextInputEvent = (
- ExecutionEnvironment.canUseDOM &&
- 'TextEvent' in window &&
- !documentMode &&
- !isPresto()
-);
+ React.createElement("article", {id: "anchor"},
+ React.createElement("h3", null, "Anchor"),
+ React.createElement("p", null, "The Anchor defines a hyperlink to a location on the same page or any other page on the Web"),
+ React.createElement(CustomComponent, {codeText: "var example = (\n
\n Why not visit the UI Toolkit for awesome react components\n
\n);\n\nReact.render(example, mountNode);\n"}),
+ React.createElement("h4", null, "Attributes"),
+ React.createElement("ul", null,
+ React.createElement("li", null, React.createElement("code", null, "data"), " Object - Where ", React.createElement("code", null, "keys"), " will be data attributes and ", React.createElement("code", null, "values"), " will be their values (uses ", React.createElement("a", {href: "https://github.com/holidayextras/react-data-attributes-mixin", alt: "React Data Attributes Mixin"}, "React Data Attributes Mixin"), ")"),
+ React.createElement("li", null, React.createElement("code", null, "handleClick"), " Function - handle click events on the anchor"),
+ React.createElement("li", null, React.createElement("code", null, "href"), " String - The location you want to anchor to"),
+ React.createElement("li", null, React.createElement("code", null, "target"), " String - This attribute specifies where to display the linked resource. Can be ", React.createElement("code", null, "_self"), ", ", React.createElement("code", null, "_blank"), ", ", React.createElement("code", null, "_parent"), " or ", React.createElement("code", null, "_top")),
+ React.createElement("li", null, React.createElement("code", null, "title"), " String - A well worded title for the anchor")
+ )
+ ),
-// In IE9+, we have access to composition events, but the data supplied
-// by the native compositionend event may be incorrect. Japanese ideographic
-// spaces, for instance (\u3000) are not recorded correctly.
-var useFallbackCompositionData = (
- ExecutionEnvironment.canUseDOM &&
- (
- (!canUseCompositionEvent || documentMode && documentMode > 8 && documentMode <= 11)
- )
-);
+ React.createElement("article", {id: "button"},
+ React.createElement("h3", null, "Buttons"),
+ React.createElement("p", null, "A clickable/tappable button element"),
+ React.createElement("p", null, "To give the button a purpose, add ", React.createElement("code", null, "purpose"), " etc."),
+ React.createElement(CustomComponent, {codeText: "var example = (\n
\n);\n\nReact.render(example, mountNode);\n"}),
+ React.createElement("h4", null, "Attributes"),
+ React.createElement("ul", null,
+ React.createElement("li", null, React.createElement("code", null, "data"), " Object - Where ", React.createElement("code", null, "keys"), " will be data attributes and ", React.createElement("code", null, "values"), " will be their values (uses ", React.createElement("a", {href: "https://github.com/holidayextras/react-data-attributes-mixin", alt: "React Data Attributes Mixin"}, "React Data Attributes Mixin"), ")"),
+ React.createElement("li", null, React.createElement("code", null, "disabled"), " Boolean - Determines the state of the button"),
+ React.createElement("li", null, React.createElement("code", null, "href"), " String - If an href is passed to a button, it changes to an anchor with button styling"),
+ React.createElement("li", null, React.createElement("code", null, "purpose"), " String - default, primary, secondary, success, info, warning, danger"),
+ React.createElement("li", null, React.createElement("code", null, "size"), " String - small, medium (default), large, extra-large, block"),
+ React.createElement("li", null, React.createElement("code", null, "target"), " String - Standard html traget attribute")
+ )
+ ),
-/**
- * Opera <= 12 includes TextEvent in window, but does not fire
- * text input events. Rely on keypress instead.
- */
-function isPresto() {
- var opera = window.opera;
- return (
- typeof opera === 'object' &&
- typeof opera.version === 'function' &&
- parseInt(opera.version(), 10) <= 12
- );
-}
+ React.createElement("article", {id: "flags"},
+ React.createElement("h3", null, "Flags"),
+ React.createElement("p", null, "Flags are used to highlight taxonomy terms or 'tags' on elements. For example 'special offer' or 'limited time only'"),
+ React.createElement("p", null, "To give the flag a purpose, add ", React.createElement("code", null, "purpose"), " etc."),
+ React.createElement(CustomComponent, {codeText: "var example = (\n
\n);\n\nReact.render(example, mountNode);\n"}),
+ React.createElement("h4", null, "Size"),
+ React.createElement("p", null, "Fancy larger or smaller flags? Add ", React.createElement("code", null, "size"), " for additional sizes."),
+ React.createElement(CustomComponent, {codeText: "var example = (\n
\n Small\n Default\n Large\n Extra Large \n
\n);\n\nReact.render(example, mountNode);\n"}),
+ React.createElement("h4", null, "Position"),
+ React.createElement("p", null, "Need to position your flag? You can position the flag anywhere in a container using ", React.createElement("code", null, "position")),
+ React.createElement("p", null, "The container must have a ", React.createElement("code", null, "relative:position"), " and a ", React.createElement("code", null, "z-index:x"), " applied."),
+ React.createElement(CustomComponent, {codeText: "var example = (\n
\n Left\n Right\n Bottom Left\n Bottom Right\n
\n);\n\nReact.render(example, mountNode);\n"}),
+ React.createElement("h4", null, "Attributes"),
+ React.createElement("ul", null,
+ React.createElement("li", null, React.createElement("code", null, "position"), " String - top (default), bottom, left, right"),
+ React.createElement("li", null, React.createElement("code", null, "purpose"), " String - default, primary, secondary, success, info, warning, danger"),
+ React.createElement("li", null, React.createElement("code", null, "size"), " String - small, medium (default), large, extra-large")
+ )
+ ),
-var SPACEBAR_CODE = 32;
-var SPACEBAR_CHAR = String.fromCharCode(SPACEBAR_CODE);
+ React.createElement("article", {id: "image"},
+ React.createElement("h3", null, "Image"),
+ React.createElement("p", null, "A standard Image Component which is set at 100% width by default to ensure the image works responsively."),
+ React.createElement(CustomComponent, {codeText: "var image = {\n src: 'http://brand.holidayextras.com/img/product-dessert.jpg',\n alt: 'Delicious strawberry cheesecake'\n};\n\nvar example = (\n \n);\n\nReact.render(example, mountNode);\n"}),
+ React.createElement("h4", null, "Responsive Image"),
+ React.createElement("p", null, "This component also utilises the ", React.createElement("code", null, "srcset"), " attribute, which helps if you are implementing responsive images (different images in HTML for different situations) and all you are doing is switching between different versions of the same image (the vast majority of usage). Historically for high resolution (2x) desktop screens we often use high-res, large dimension images. For smaller screens this means downloading a large file when not necessary. For more information visit ", React.createElement("a", {href: "https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/", title: "CSS Tricks guide to srcset"}, "CSS Tricks"), "."),
+ React.createElement(CustomComponent, {codeText: "var image = {\n srcSet: 'https://open-source.holidayextras.com/ui-toolkit/images/panda2000.jpg 2000w, https://open-source.holidayextras.com/ui-toolkit/images/panda1500.jpg 1500w, https://open-source.holidayextras.com/ui-toolkit/images/panda1000.jpg 1000w, https://open-source.holidayextras.com/ui-toolkit/images/panda500.jpg 500w',\n src: 'https://open-source.holidayextras.com/ui-toolkit/images/panda500.jpg',\n alt: 'A cute panda'\n};\n\nvar example = (\n \n);\n\nReact.render(example, mountNode);\n"}),
+ React.createElement("h4", null, "Attributes"),
+ React.createElement("ul", null,
+ React.createElement("li", null, React.createElement("code", null, "alt"), " String - Image alt attribute"),
+ React.createElement("li", null, React.createElement("code", null, "handleClick"), " Function - handle click events on the image"),
+ React.createElement("li", null, React.createElement("code", null, "src"), " String - Image src attribute"),
+ React.createElement("li", null, React.createElement("code", null, "href"), " String - an href that wraps the image in an anchor"),
+ React.createElement("li", null, React.createElement("code", null, "data"), " Object - Where ", React.createElement("code", null, "keys"), " will be data attributes and ", React.createElement("code", null, "values"), " will be their values (uses ", React.createElement("a", {href: "https://github.com/holidayextras/react-data-attributes-mixin", alt: "React Data Attributes Mixin"}, "React Data Attributes Mixin"), ")"),
+ React.createElement("li", null, React.createElement("code", null, "srcset"), " String - a comma separated list of images and their file size, perfect for responsive images"),
+ React.createElement("li", null, React.createElement("code", null, "sizes"), " String (optional) - A rough start size for your image. To be used in conjunction with srcset when implementing responsive images. Please note that this is an optimisation only and its default is set to ", React.createElement("code", null, "100vw"))
+ )
+ ),
-var topLevelTypes = EventConstants.topLevelTypes;
+ React.createElement("article", {id: "input"},
+ React.createElement("h3", null, "Input"),
+ React.createElement("p", null, "Custom Input for Text, Email, Telephone & Number Types"),
+ React.createElement(CustomComponent, {codeText: "var example = (\n
\n \n Default Value\n \n
\n\n);\n\nReact.render(example, mountNode);\n"}),
+ React.createElement("h4", null, "Attributes"),
+ React.createElement("ul", null,
+ React.createElement("li", null, React.createElement("code", null, "type"), " String - Type of Input Field can be ", React.createElement("code", null, "text"), ", ", React.createElement("code", null, "email"), ", ", React.createElement("code", null, "tel"), " or ", React.createElement("code", null, "number")),
+ React.createElement("li", null, React.createElement("code", null, "name"), " String - Optional Name for Input Field"),
+ React.createElement("li", null, React.createElement("code", null, "id"), " String - Optional ID for Input Field"),
+ React.createElement("li", null, React.createElement("code", null, "label"), " String - Optional Label in front of Input Field"),
+ React.createElement("li", null, React.createElement("code", null, "placeHolder"), " String - Optional Placeholder for Input Field"),
+ React.createElement("li", null, React.createElement("code", null, "validator"), " String - Optional Regular Expression to Validate Input"),
+ React.createElement("li", null, React.createElement("code", null, "errorMessage"), " String - Optional Error Message to show if ", React.createElement("code", null, "validator"), " returns false"),
+ React.createElement("li", null, React.createElement("code", null, "disabled"), " Boolean - Whether to Disable the Input Field"),
+ React.createElement("li", null, React.createElement("code", null, "readOnly"), " Boolean - Whether to set the Input Field to Read Only"),
+ React.createElement("li", null, React.createElement("code", null, "required"), " Boolean - Whether to set the Input Field to be Required"),
+ React.createElement("li", null, React.createElement("code", null, "handleChange"), " Function - Optional Function which is called onChange")
+ )
+ ),
-// Events and their corresponding property names.
-var eventTypes = {
- beforeInput: {
- phasedRegistrationNames: {
- bubbled: keyOf({onBeforeInput: null}),
- captured: keyOf({onBeforeInputCapture: null})
- },
- dependencies: [
- topLevelTypes.topCompositionEnd,
- topLevelTypes.topKeyPress,
- topLevelTypes.topTextInput,
- topLevelTypes.topPaste
- ]
- },
- compositionEnd: {
- phasedRegistrationNames: {
- bubbled: keyOf({onCompositionEnd: null}),
- captured: keyOf({onCompositionEndCapture: null})
- },
- dependencies: [
- topLevelTypes.topBlur,
- topLevelTypes.topCompositionEnd,
- topLevelTypes.topKeyDown,
- topLevelTypes.topKeyPress,
- topLevelTypes.topKeyUp,
- topLevelTypes.topMouseDown
- ]
- },
- compositionStart: {
- phasedRegistrationNames: {
- bubbled: keyOf({onCompositionStart: null}),
- captured: keyOf({onCompositionStartCapture: null})
- },
- dependencies: [
- topLevelTypes.topBlur,
- topLevelTypes.topCompositionStart,
- topLevelTypes.topKeyDown,
- topLevelTypes.topKeyPress,
- topLevelTypes.topKeyUp,
- topLevelTypes.topMouseDown
- ]
- },
- compositionUpdate: {
- phasedRegistrationNames: {
- bubbled: keyOf({onCompositionUpdate: null}),
- captured: keyOf({onCompositionUpdateCapture: null})
- },
- dependencies: [
- topLevelTypes.topBlur,
- topLevelTypes.topCompositionUpdate,
- topLevelTypes.topKeyDown,
- topLevelTypes.topKeyPress,
- topLevelTypes.topKeyUp,
- topLevelTypes.topMouseDown
- ]
- }
-};
-
-// Track whether we've ever handled a keypress on the space key.
-var hasSpaceKeypress = false;
+ React.createElement("article", {id: "lists"},
+ React.createElement("h3", null, "Lists"),
+ React.createElement("h4", null, "Icon list"),
+ React.createElement("p", null, "An unordered list that uses ", React.createElement("a", {href: "http://fortawesome.github.io/Font-Awesome/icons/"}, "Font Awesome"), " for the bullets"),
+ React.createElement(CustomComponent, {codeText: "var example = (\n \n Suitable for all terminals\n Transfers run every 5 minutes\n Car parked for you\n Success!\n \n);\n\nReact.render(example, mountNode);\n"}),
+ React.createElement("h4", null, "Attributes (for ListGroupItem)"),
+ React.createElement("ul", null,
+ React.createElement("li", null, React.createElement("code", null, "icon"), " String - The name of the ", React.createElement("a", {href: "http://fortawesome.github.io/Font-Awesome/icons/"}, "Font Awesome"), " icon that you want to display"),
+ React.createElement("li", null, React.createElement("code", null, "purpose"), " String - default, primary, secondary, success, info, warning, danger")
+ )
+ ),
-/**
- * Return whether a native keypress event is assumed to be a command.
- * This is required because Firefox fires `keypress` events for key commands
- * (cut, copy, select-all, etc.) even though no character is inserted.
- */
-function isKeypressCommand(nativeEvent) {
- return (
- (nativeEvent.ctrlKey || nativeEvent.altKey || nativeEvent.metaKey) &&
- // ctrlKey && altKey is equivalent to AltGr, and is not a command.
- !(nativeEvent.ctrlKey && nativeEvent.altKey)
- );
-}
+ React.createElement("article", {id: "lozenge"},
+ React.createElement("h3", null, "Lozenge"),
+ React.createElement("p", null, "A small pill shaped item for displaying information"),
+ React.createElement(CustomComponent, {codeText: "var example = (\n
\n);\n\nReact.render(example, mountNode);\n"}),
+ React.createElement("h4", null, "Attributes"),
+ React.createElement("ul", null,
+ React.createElement("li", null, React.createElement("code", null, "purpose"), " String - default, primary, secondary, success, info, warning, danger"),
+ React.createElement("li", null, React.createElement("code", null, "size"), " String - small, medium (default), large, extra-large, block"),
+ React.createElement("li", null, React.createElement("code", null, "tip"), " String - Tooltip text to display")
+ )
+ ),
+ React.createElement("article", {id: "quote"},
+ React.createElement("h3", null, "Quote"),
+ React.createElement("p", null, "A quote is used referencing blocks of content from another source within your document. They come as a ", React.createElement("code", null, "Block"), " (default) or ", React.createElement("code", null, "inline")),
+ React.createElement(CustomComponent, {codeText: "var example = (\n
\n It's not about what we do, it's about what we enable other people to do\n Fix the broken things before you build the shiney new broken things\n
\n);\n\nReact.render(example, mountNode);\n"}),
+ React.createElement("h4", null, "Inline"),
+ React.createElement("p", null, "Inline quotes are for referencing something inline within a section of prose"),
+ React.createElement(CustomComponent, {codeText: "var example = (\n
\n
Gandalf, Captain of the Starship Enterprise said Use The Force Harry\n
\n
\n);\n\nReact.render(example, mountNode);\n"}),
+ React.createElement("h4", null, "Attributes"),
+ React.createElement("ul", null,
+ React.createElement("li", null, React.createElement("code", null, "author"), " String - The author of the quote"),
+ React.createElement("li", null, React.createElement("code", null, "cite"), " String - cited title of a work; for example, the title of a book mentioned within the main text flow of a document"),
+ React.createElement("li", null, React.createElement("code", null, "purpose"), " String - default, primary, secondary, success, info, warning, danger"),
+ React.createElement("li", null, React.createElement("code", null, "role"), " String - The role/job title of the author"),
+ React.createElement("li", null, React.createElement("code", null, "size"), " String - small, medium (default), large, extra-large"),
+ React.createElement("li", null, React.createElement("code", null, "type"), " String - Block (default) or Inline")
+ )
+ )
+ ),
-/**
- * Translate native top level events into event types.
- *
- * @param {string} topLevelType
- * @return {object}
- */
-function getCompositionEventType(topLevelType) {
- switch (topLevelType) {
- case topLevelTypes.topCompositionStart:
- return eventTypes.compositionStart;
- case topLevelTypes.topCompositionEnd:
- return eventTypes.compositionEnd;
- case topLevelTypes.topCompositionUpdate:
- return eventTypes.compositionUpdate;
- }
-}
+ React.createElement("section", {id: "molecules"},
+ React.createElement("h2", {className: "page-header"}, "Molecules"),
+ React.createElement("p", null, "Things start getting more interesting and tangible when we start combining atoms together. Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. These molecules take on their own properties and serve as the backbone of our design systems."),
-/**
- * Does our fallback best-guess model think this event signifies that
- * composition has begun?
- *
- * @param {string} topLevelType
- * @param {object} nativeEvent
- * @return {boolean}
- */
-function isFallbackCompositionStart(topLevelType, nativeEvent) {
- return (
- topLevelType === topLevelTypes.topKeyDown &&
- nativeEvent.keyCode === START_KEYCODE
- );
-}
+ React.createElement("article", {id: "alert"},
+ React.createElement("h3", null, "Alert"),
+ React.createElement("p", null, "An alert is used to display helpful or factual information usually used as a prompt."),
+ React.createElement(CustomComponent, {codeText: "var example = (\n
\n This link is a great thing\n be careful\n You should pay attention\n Stranger danger\n
\n);\n\nReact.render(example, mountNode);\n"}),
+ React.createElement("h4", null, "Attributes"),
+ React.createElement("ul", null,
+ React.createElement("li", null, React.createElement("code", null, "purpose"), " String - default, primary, secondary, success, info, warning, danger"),
+ React.createElement("li", null, React.createElement("code", null, "size"), " String - small, medium (default), large, extra-large"),
+ React.createElement("li", null, React.createElement("code", null, "title"), " String - The title of the alert")
+ )
+ ),
-/**
- * Does our fallback mode think that this event is the end of composition?
- *
- * @param {string} topLevelType
- * @param {object} nativeEvent
- * @return {boolean}
- */
-function isFallbackCompositionEnd(topLevelType, nativeEvent) {
- switch (topLevelType) {
- case topLevelTypes.topKeyUp:
- // Command keys insert or clear IME input.
- return (END_KEYCODES.indexOf(nativeEvent.keyCode) !== -1);
- case topLevelTypes.topKeyDown:
- // Expect IME keyCode on each keydown. If we get any other
- // code we must have exited earlier.
- return (nativeEvent.keyCode !== START_KEYCODE);
- case topLevelTypes.topKeyPress:
- case topLevelTypes.topMouseDown:
- case topLevelTypes.topBlur:
- // Events are not possible without cancelling IME.
- return true;
- default:
- return false;
- }
-}
+ React.createElement("article", {id: "countdown"},
+ React.createElement("h3", null, "Countdown"),
+ React.createElement("p", null, "Countdowns allow you to find the time difference between the current date and a date in the future. To do this you pass in a ", React.createElement("code", null, "until"), " value of any date format."),
+ React.createElement(CustomComponent, {codeText: "var example = (\n
\n \n
\n);\n\nReact.render(example, mountNode);\n"}),
+ React.createElement("h4", null, "Attributes"),
+ React.createElement("ul", null,
+ React.createElement("li", null, React.createElement("code", null, "until"), " String - Date in the future")
+ )
+ ),
-/**
- * Google Input Tools provides composition data via a CustomEvent,
- * with the `data` property populated in the `detail` object. If this
- * is available on the event object, use it. If not, this is a plain
- * composition event and we have nothing special to extract.
- *
- * @param {object} nativeEvent
- * @return {?string}
- */
-function getDataFromCustomEvent(nativeEvent) {
- var detail = nativeEvent.detail;
- if (typeof detail === 'object' && 'data' in detail) {
- return detail.data;
- }
- return null;
-}
+ React.createElement("article", {id: "payment-card"},
+ React.createElement("h3", null, "Payment Cards"),
+ React.createElement("p", null, "Easily display what payment cards your website accepts"),
+ React.createElement(CustomComponent, {codeText: "var example = (\n
\n \n \n \n \n \n
\n);\n\nReact.render(example, mountNode);\n"}),
+ React.createElement("h4", null, "Attributes"),
+ React.createElement("ul", null,
+ React.createElement("li", null, React.createElement("code", null, "type")), " String - ", React.createElement("code", null, "amazon amex apple cirrus delta directdebit discover electron google maestro mastercard paym paypal sage sepa solo switch ukash visa visadebit westernunion")
+ )
+ ),
-// Track the current IME composition fallback object, if any.
-var currentComposition = null;
+ React.createElement("article", null,
+ React.createElement("h3", {id: "rating"}, "Rating"),
+ React.createElement("p", null, "Ratings can be used to display a series of icons intended to represent a score."),
+ React.createElement(CustomComponent, {codeText: "var example = (\n ★\n);\nReact.render(example, mountNode);"}),
+ React.createElement("h4", null, "Attributes"),
+ React.createElement("ul", null,
+ React.createElement("li", null, React.createElement("code", null, "blankIcon"), " [optional] Node (any displayable item) - the icon to display for empty ratings."),
+ React.createElement("li", null, React.createElement("code", null, "outOf"), " [optional] Number - The total count the rating value is out of."),
+ React.createElement("li", null, React.createElement("code", null, "rating"), " Number - The count of positive icons to display.")
+ ),
-/**
- * @param {string} topLevelType Record from `EventConstants`.
- * @param {DOMEventTarget} topLevelTarget The listening component root node.
- * @param {string} topLevelTargetID ID of `topLevelTarget`.
- * @param {object} nativeEvent Native browser event.
- * @return {?object} A SyntheticCompositionEvent.
- */
-function extractCompositionEvent(
- topLevelType,
- topLevelTarget,
- topLevelTargetID,
- nativeEvent
-) {
- var eventType;
- var fallbackData;
+ "The ", React.createElement("code", null, "outOf"), " and ", React.createElement("code", null, "blankIcon"), " attributes are optional and dependent upon each other."
+ ),
- if (canUseCompositionEvent) {
- eventType = getCompositionEventType(topLevelType);
- } else if (!currentComposition) {
- if (isFallbackCompositionStart(topLevelType, nativeEvent)) {
- eventType = eventTypes.compositionStart;
- }
- } else if (isFallbackCompositionEnd(topLevelType, nativeEvent)) {
- eventType = eventTypes.compositionEnd;
- }
+ React.createElement("article", {id: "tile"},
+ React.createElement("h3", null, "Tile"),
+ React.createElement("p", null, "A tile for displaying an image with a title. The width of a tile is 100% of a container."),
+ React.createElement(CustomComponent, {codeText: "var image = {\n src: 'http://brand.holidayextras.com/img/product-main.jpg',\n alt: 'Tender sirloin steak with blue cheese dressing'\n}\n\nvar example = (\n \n);\n\nReact.render(example, mountNode);\n"}),
+ React.createElement("h4", null, "Attributes"),
+ React.createElement("ul", null,
+ React.createElement("li", null, React.createElement("code", null, "image"), " Object - Containing ", React.createElement("code", null, "src"), " and ", React.createElement("code", null, "alt"), " keys"),
+ React.createElement("li", null, React.createElement("code", null, "title"), " String - The title of the tile")
+ )
+ ),
- if (!eventType) {
- return null;
- }
+ React.createElement("article", {id: "weather"},
+ React.createElement("h3", null, "Weather"),
+ React.createElement("p", null, "Display weather information in a standard format. Combine a few of these components to create weather patterns i.e a 5 day forecast"),
+ React.createElement(CustomComponent, {codeText: "var example = (\n
\n \n \n \n \n \n
\n);\n\nReact.render(example, mountNode);\n"}),
+ React.createElement("h4", null, "Attributes"),
+ React.createElement("ul", null,
+ React.createElement("li", null, React.createElement("code", null, "weather"), " String - The type of weather that is occuring. Can be ", React.createElement("code", null, "cloudy"), ", ", React.createElement("code", null, "fog"), ", ", React.createElement("code", null, "hail"), ", ", React.createElement("code", null, "heavy-rain"), ", ", React.createElement("code", null, "heavy-snow"), ", ", React.createElement("code", null, "light-rain"), ", ", React.createElement("code", null, "light-snow"), ", ", React.createElement("code", null, "night-clear"), ", ", React.createElement("code", null, "night-partly-cloudy"), ", ", React.createElement("code", null, "partly-cloudy"), ", ", React.createElement("code", null, "storm"), ", ", React.createElement("code", null, "sunny"), " or ", React.createElement("code", null, "windy"), " (more to come)"),
+ React.createElement("li", null, React.createElement("code", null, "temperature"), " Number - The current temperature"),
+ React.createElement("li", null, React.createElement("code", null, "unit"), " String - The unit of measurement for temperature ", React.createElement("code", null, "C"), " (Celsius), ", React.createElement("code", null, "F"), " (Fahrenheit), ", React.createElement("code", null, "K"), " (Kelvin) or ", React.createElement("code", null, "R"), " (Rankine)"),
+ React.createElement("li", null, React.createElement("code", null, "date"), " String - The date of the weather you want displayed passed in ", React.createElement("a", {href: "https://en.wikipedia.org/wiki/ISO_8601"}, "ISO8601"), " format"),
+ React.createElement("li", null, React.createElement("code", null, "format"), " String - Date format required i.e ", React.createElement("code", null, "dddd"), ", ", React.createElement("code", null, "HH:mm"), " (default) etc")
+ ),
+ React.createElement("small", null, "We currently use a small sample of ", React.createElement("a", {href: "http://www.alessioatzeni.com/meteocons/", title: "Meteocons"}, "Meteocons"))
+ ),
- if (useFallbackCompositionData) {
- // The current composition is stored statically and must not be
- // overwritten while composition continues.
- if (!currentComposition && eventType === eventTypes.compositionStart) {
- currentComposition = FallbackCompositionState.getPooled(topLevelTarget);
- } else if (eventType === eventTypes.compositionEnd) {
- if (currentComposition) {
- fallbackData = currentComposition.getData();
- }
- }
+ React.createElement("article", {id: "stepper"},
+ React.createElement("h3", null, "Stepper"),
+ React.createElement("p", null, "Display an input with a number value that is surrounded by decrement and increment buttons"),
+ React.createElement(CustomComponent, {codeText: "var example = (\n
\n \n
\n);\nReact.render(example, mountNode);"}),
+ React.createElement("h4", null, "Attributes"),
+ React.createElement("ul", null,
+ React.createElement("li", null, React.createElement("code", null, "value"), " Number - The value of the stepper"),
+ React.createElement("li", null, React.createElement("code", null, "onChange"), " Function - The function to call when the value changes"),
+ React.createElement("li", null, React.createElement("code", null, "minValue"), " Number - The minimum value the stepper can decrement to"),
+ React.createElement("li", null, React.createElement("code", null, "maxValue"), " Number - The maximum value the stepper can increment to"),
+ React.createElement("li", null, React.createElement("code", null, "incrementDisplayString"), " String - The string to display in the decrement button"),
+ React.createElement("li", null, React.createElement("code", null, "decrementDisplayString"), " String - The string to display in the increment button")
+ )
+ )
+ )
+ )
+ );
}
+});
- var event = SyntheticCompositionEvent.getPooled(
- eventType,
- topLevelTargetID,
- nativeEvent
- );
+module.exports = Components;
- if (fallbackData) {
- // Inject data generated from fallback path into the synthetic event.
- // This matches the property of native CompositionEventInterface.
- event.data = fallbackData;
- } else {
- var customData = getDataFromCustomEvent(nativeEvent);
- if (customData !== null) {
- event.data = customData;
- }
- }
- EventPropagators.accumulateTwoPhaseDispatches(event);
- return event;
-}
+},{"./CustomComponent.jsx":7,"fs":2,"react":208}],7:[function(require,module,exports){
+(function (global){
+var React = require('react');
+var classNames = require('classnames');
+var CodeMirror = global.CodeMirror;
+var JSXTransformer = global.JSXTransformer;
+var UIToolkit = require('../../'); // ui-toolkit root
-/**
- * @param {string} topLevelType Record from `EventConstants`.
- * @param {object} nativeEvent Native browser event.
- * @return {?string} The string corresponding to this `beforeInput` event.
- */
-function getNativeBeforeInputChars(topLevelType, nativeEvent) {
- switch (topLevelType) {
- case topLevelTypes.topCompositionEnd:
- return getDataFromCustomEvent(nativeEvent);
- case topLevelTypes.topKeyPress:
- /**
- * If native `textInput` events are available, our goal is to make
- * use of them. However, there is a special case: the spacebar key.
- * In Webkit, preventing default on a spacebar `textInput` event
- * cancels character insertion, but it *also* causes the browser
- * to fall back to its default spacebar behavior of scrolling the
- * page.
- *
- * Tracking at:
- * https://code.google.com/p/chromium/issues/detail?id=355103
- *
- * To avoid this issue, use the keypress event as if no `textInput`
- * event is available.
- */
- var which = nativeEvent.which;
- if (which !== SPACEBAR_CODE) {
- return null;
- }
+var IS_MOBILE = typeof navigator !== 'undefined' && (
+ navigator.userAgent.match(/Android/i)
+ || navigator.userAgent.match(/webOS/i)
+ || navigator.userAgent.match(/iPhone/i)
+ || navigator.userAgent.match(/iPad/i)
+ || navigator.userAgent.match(/iPod/i)
+ || navigator.userAgent.match(/BlackBerry/i)
+ || navigator.userAgent.match(/Windows Phone/i)
+ );
- hasSpaceKeypress = true;
- return SPACEBAR_CHAR;
+var CodeMirrorEditor = React.createClass({displayName: "CodeMirrorEditor",
+ componentDidMount: function() {
+ if (IS_MOBILE) return;
- case topLevelTypes.topTextInput:
- // Record the characters to be added to the DOM.
- var chars = nativeEvent.data;
+ this.editor = CodeMirror.fromTextArea(this.refs.editor.getDOMNode(), {
+ mode: 'javascript',
+ lineNumbers: false,
+ matchBrackets: true,
+ tabSize: 2,
+ theme: 'solarized-light',
+ readOnly: this.props.readOnly
+ });
+ this.editor.on('change', this.handleChange);
+ },
- // If it's a spacebar character, assume that we have already handled
- // it at the keypress level and bail immediately. Android Chrome
- // doesn't give us keycodes, so we need to blacklist it.
- if (chars === SPACEBAR_CHAR && hasSpaceKeypress) {
- return null;
- }
+ componentDidUpdate: function() {
+ if (this.props.readOnly) {
+ this.editor.setValue(this.props.codeText);
+ }
+ },
- return chars;
+ handleChange: function() {
+ if (!this.props.readOnly) {
+ this.props.onChange && this.props.onChange(this.editor.getValue());
+ }
+ },
- default:
- // For other native event types, do nothing.
- return null;
- }
-}
+ render: function() {
+ // wrap in a div to fully contain CodeMirror
+ var editor;
-/**
- * For browsers that do not provide the `textInput` event, extract the
- * appropriate string to use for SyntheticInputEvent.
- *
- * @param {string} topLevelType Record from `EventConstants`.
- * @param {object} nativeEvent Native browser event.
- * @return {?string} The fallback string for this `beforeInput` event.
- */
-function getFallbackBeforeInputChars(topLevelType, nativeEvent) {
- // If we are currently composing (IME) and using a fallback to do so,
- // try to extract the composed characters from the fallback object.
- if (currentComposition) {
- if (
- topLevelType === topLevelTypes.topCompositionEnd ||
- isFallbackCompositionEnd(topLevelType, nativeEvent)
- ) {
- var chars = currentComposition.getData();
- FallbackCompositionState.release(currentComposition);
- currentComposition = null;
- return chars;
+ if (IS_MOBILE) {
+ var preStyles = {overflow: 'scroll'};
+ editor = React.createElement("pre", {style: preStyles}, this.props.codeText);
+ } else {
+ editor = React.createElement("textarea", {ref: "editor", defaultValue: this.props.codeText});
}
- return null;
- }
- switch (topLevelType) {
- case topLevelTypes.topPaste:
- // If a paste event occurs after a keypress, throw out the input
- // chars. Paste events should not lead to BeforeInput events.
- return null;
- case topLevelTypes.topKeyPress:
- /**
- * As of v27, Firefox may fire keypress events even when no character
- * will be inserted. A few possibilities:
- *
- * - `which` is `0`. Arrow keys, Esc key, etc.
- *
- * - `which` is the pressed key code, but no char is available.
- * Ex: 'AltGr + d` in Polish. There is no modified character for
- * this key combination and no character is inserted into the
- * document, but FF fires the keypress for char code `100` anyway.
- * No `input` event will occur.
- *
- * - `which` is the pressed key code, but a command combination is
- * being used. Ex: `Cmd+C`. No character is inserted, and no
- * `input` event will occur.
- */
- if (nativeEvent.which && !isKeypressCommand(nativeEvent)) {
- return String.fromCharCode(nativeEvent.which);
- }
- return null;
- case topLevelTypes.topCompositionEnd:
- return useFallbackCompositionData ? null : nativeEvent.data;
- default:
- return null;
+ return (
+ React.createElement("div", {style: this.props.style, className: this.props.className},
+ editor
+ )
+ );
}
-}
+});
-/**
- * Extract a SyntheticInputEvent for `beforeInput`, based on either native
- * `textInput` or fallback behavior.
- *
- * @param {string} topLevelType Record from `EventConstants`.
- * @param {DOMEventTarget} topLevelTarget The listening component root node.
- * @param {string} topLevelTargetID ID of `topLevelTarget`.
- * @param {object} nativeEvent Native browser event.
- * @return {?object} A SyntheticInputEvent.
- */
-function extractBeforeInputEvent(
- topLevelType,
- topLevelTarget,
- topLevelTargetID,
- nativeEvent
-) {
- var chars;
+var selfCleaningTimeout = {
+ componentDidUpdate: function() {
+ clearTimeout(this.timeoutID);
+ },
- if (canUseTextInputEvent) {
- chars = getNativeBeforeInputChars(topLevelType, nativeEvent);
- } else {
- chars = getFallbackBeforeInputChars(topLevelType, nativeEvent);
+ setTimeout: function() {
+ clearTimeout(this.timeoutID);
+ this.timeoutID = setTimeout.apply(null, arguments);
}
+};
- // If no characters are being inserted, no BeforeInput event should
- // be fired.
- if (!chars) {
- return null;
- }
+var CustomComponent = React.createClass({displayName: "CustomComponent",
+ mixins: [selfCleaningTimeout],
- var event = SyntheticInputEvent.getPooled(
- eventTypes.beforeInput,
- topLevelTargetID,
- nativeEvent
- );
+ MODES: {JSX: 'JSX', JS: 'JS', NONE: null},
- event.data = chars;
- EventPropagators.accumulateTwoPhaseDispatches(event);
- return event;
-}
+ propTypes: {
+ codeText: React.PropTypes.string.isRequired,
+ transformer: React.PropTypes.func,
+ renderCode: React.PropTypes.bool
+ },
-/**
- * Create an `onBeforeInput` event to match
- * http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105/#events-inputevents.
- *
- * This event plugin is based on the native `textInput` event
- * available in Chrome, Safari, Opera, and IE. This event fires after
- * `onKeyPress` and `onCompositionEnd`, but before `onInput`.
- *
- * `beforeInput` is spec'd but not implemented in any browsers, and
- * the `input` event does not provide any useful information about what has
- * actually been added, contrary to the spec. Thus, `textInput` is the best
- * available event to identify the characters that have actually been inserted
- * into the target node.
- *
- * This plugin is also responsible for emitting `composition` events, thus
- * allowing us to share composition fallback code for both `beforeInput` and
- * `composition` event types.
- */
-var BeforeInputEventPlugin = {
+ getDefaultProps: function() {
+ return {
+ transformer: function(code) {
+ return JSXTransformer.transform(code).code;
+ }
+ };
+ },
- eventTypes: eventTypes,
+ getInitialState: function() {
+ return {
+ mode: this.MODES.NONE,
+ code: this.props.codeText
+ };
+ },
- /**
- * @param {string} topLevelType Record from `EventConstants`.
- * @param {DOMEventTarget} topLevelTarget The listening component root node.
- * @param {string} topLevelTargetID ID of `topLevelTarget`.
- * @param {object} nativeEvent Native browser event.
- * @return {*} An accumulation of synthetic events.
- * @see {EventPluginHub.extractEvents}
- */
- extractEvents: function(
- topLevelType,
- topLevelTarget,
- topLevelTargetID,
- nativeEvent
- ) {
- return [
- extractCompositionEvent(
- topLevelType,
- topLevelTarget,
- topLevelTargetID,
- nativeEvent
- ),
- extractBeforeInputEvent(
- topLevelType,
- topLevelTarget,
- topLevelTargetID,
- nativeEvent
- )
- ];
- }
-};
+ handleCodeChange: function(value) {
+ this.setState({code: value});
+ this.executeCode();
+ },
-module.exports = BeforeInputEventPlugin;
+ handleCodeModeSwitch: function(mode) {
+ this.setState({mode: mode});
+ },
-},{"./EventConstants":18,"./EventPropagators":23,"./ExecutionEnvironment":24,"./FallbackCompositionState":25,"./SyntheticCompositionEvent":97,"./SyntheticInputEvent":101,"./keyOf":145}],7:[function(require,module,exports){
-/**
- * Copyright 2013-2015, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * @providesModule CSSProperty
- */
+ handleCodeModeToggle: function(e) {
+ var mode;
-'use strict';
+ e.preventDefault();
-/**
- * CSS properties which accept numbers but are not in units of "px".
- */
-var isUnitlessNumber = {
- boxFlex: true,
- boxFlexGroup: true,
- columnCount: true,
- flex: true,
- flexGrow: true,
- flexPositive: true,
- flexShrink: true,
- flexNegative: true,
- fontWeight: true,
- lineClamp: true,
- lineHeight: true,
- opacity: true,
- order: true,
- orphans: true,
- widows: true,
- zIndex: true,
- zoom: true,
+ switch (this.state.mode) {
+ case this.MODES.NONE:
+ mode = this.MODES.JSX;
+ break;
+ case this.MODES.JSX:
+ default:
+ mode = this.MODES.NONE;
+ }
- // SVG-related properties
- fillOpacity: true,
- strokeDashoffset: true,
- strokeOpacity: true,
- strokeWidth: true
-};
+ this.setState({mode: mode});
+ },
-/**
- * @param {string} prefix vendor-specific prefix, eg: Webkit
- * @param {string} key style name, eg: transitionDuration
- * @return {string} style name prefixed with `prefix`, properly camelCased, eg:
- * WebkitTransitionDuration
- */
-function prefixKey(prefix, key) {
- return prefix + key.charAt(0).toUpperCase() + key.substring(1);
-}
+ compileCode: function() {
+ return this.props.transformer(this.state.code);
+ },
-/**
- * Support style names that may come passed in prefixed by adding permutations
- * of vendor prefixes.
- */
-var prefixes = ['Webkit', 'ms', 'Moz', 'O'];
+ render: function() {
+ var classes = {
+ 'toolkit-example': true
+ };
+ var toggleClasses = {
+ 'code-toggle': true
+ };
+ var editor;
-// Using Object.keys here, or else the vanilla for-in loop makes IE8 go into an
-// infinite loop, because it iterates over the newly added props too.
-Object.keys(isUnitlessNumber).forEach(function(prop) {
- prefixes.forEach(function(prefix) {
- isUnitlessNumber[prefixKey(prefix, prop)] = isUnitlessNumber[prop];
- });
-});
+ if (this.props.exampleClassName){
+ classes[this.props.exampleClassName] = true;
+ }
-/**
- * Most style properties can be unset by doing .style[prop] = '' but IE8
- * doesn't like doing that with shorthand properties so for the properties that
- * IE8 breaks on, which are listed here, we instead unset each of the
- * individual properties. See http://bugs.jquery.com/ticket/12385.
- * The 4-value 'clock' properties like margin, padding, border-width seem to
- * behave without any problems. Curiously, list-style works too without any
- * special prodding.
- */
-var shorthandPropertyExpansions = {
- background: {
- backgroundImage: true,
- backgroundPosition: true,
- backgroundRepeat: true,
- backgroundColor: true
- },
- border: {
- borderWidth: true,
- borderStyle: true,
- borderColor: true
- },
- borderBottom: {
- borderBottomWidth: true,
- borderBottomStyle: true,
- borderBottomColor: true
+ if (this.state.mode !== this.MODES.NONE) {
+ editor = (
+ React.createElement(CodeMirrorEditor, {key: "jsx", onChange: this.handleCodeChange, className: "highlight", codeText: this.state.code})
+ );
+ toggleClasses.open = true;
+ }
+ return (
+ React.createElement("div", {className: "playground"},
+ React.createElement("div", {className: classNames(classes)},
+ React.createElement("div", {ref: "mount"})
+ ),
+ editor,
+ React.createElement("a", {className: classNames(toggleClasses), onClick: this.handleCodeModeToggle, href: "#"}, this.state.mode === this.MODES.NONE ? 'show code' : 'hide code')
+ )
+ );
},
- borderLeft: {
- borderLeftWidth: true,
- borderLeftStyle: true,
- borderLeftColor: true
+
+ componentDidMount: function() {
+ this.executeCode();
},
- borderRight: {
- borderRightWidth: true,
- borderRightStyle: true,
- borderRightColor: true
+
+ componentWillUpdate: function(nextProps, nextState) {
+ // execute code only when the state's not being updated by switching tab
+ // this avoids re-displaying the error, which comes after a certain delay
+ if (this.state.code !== nextState.code) {
+ this.executeCode();
+ }
},
- borderTop: {
- borderTopWidth: true,
- borderTopStyle: true,
- borderTopColor: true
+
+ componentWillUnmount: function() {
+ var mountNode = this.refs.mount.getDOMNode();
+ try {
+ React.unmountComponentAtNode(mountNode);
+ } catch (e) { }
},
- font: {
- fontStyle: true,
- fontVariant: true,
- fontWeight: true,
- fontSize: true,
- lineHeight: true,
- fontFamily: true
+
+ executeCode: function() {
+ var mountNode = this.refs.mount.getDOMNode();
+
+ try {
+ React.unmountComponentAtNode(mountNode);
+ } catch (e) { }
+
+ try {
+ var compiledCode = this.compileCode();
+ if (this.props.renderCode) {
+ React.render(
+ React.createElement(CodeMirrorEditor, {codeText: compiledCode, readOnly: true}),
+ mountNode
+ );
+ } else {
+ eval(compiledCode);
+ }
+ } catch (err) {
+ this.setTimeout(function() {
+ if(typeof console !== 'undefined')
+ {
+ console.error(err);
+ }
+ React.render(
+ React.createElement("div", {className: "alert alert-danger"}, err.toString()),
+ mountNode
+ );
+ }, 500);
+ }
}
-};
+});
-var CSSProperty = {
- isUnitlessNumber: isUnitlessNumber,
- shorthandPropertyExpansions: shorthandPropertyExpansions
-};
+module.exports = CustomComponent;
-module.exports = CSSProperty;
-},{}],8:[function(require,module,exports){
-(function (process){
-/**
- * Copyright 2013-2015, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * @providesModule CSSPropertyOperations
- * @typechecks static-only
- */
-
-'use strict';
+}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
+},{"../../":13,"classnames":4,"react":208}],8:[function(require,module,exports){
+var React = require('react');
-var CSSProperty = require("./CSSProperty");
-var ExecutionEnvironment = require("./ExecutionEnvironment");
+var GettingStarted = React.createClass({displayName: "GettingStarted",
+ render: function () {
+ return (
+ React.createElement("section", null,
+ React.createElement("h2", {id: "setup", className: "page-header"}, "Get started"),
+ React.createElement("p", null, "You can install UI Toolkit using npm."),
-var camelizeStyleName = require("./camelizeStyleName");
-var dangerousStyleValue = require("./dangerousStyleValue");
-var hyphenateStyleName = require("./hyphenateStyleName");
-var memoizeStringOnly = require("./memoizeStringOnly");
-var warning = require("./warning");
+ React.createElement("h3", {id: "terminal"}, "Terminal"),
+ React.createElement("div", {className: "highlight"},
+ React.createElement("pre", null,
+ React.createElement("code", {className: "shell"}, '$ npm install --save holidayextras/ui-toolkit\n')
+ )
+ ),
-var processStyleName = memoizeStringOnly(function(styleName) {
- return hyphenateStyleName(styleName);
+ React.createElement("h3", {id: "usage"}, "Sample Usage"),
+ React.createElement("p", null, "You can then use ", React.createElement("a", {href: "#components"}, "UI Toolkit's Custom Components"), " via:"),
+ React.createElement("div", {className: "highlight"},
+ React.createElement("pre", null,
+ React.createElement("code", {className: "js"}, 'var Button = require(\'ui-toolkit\').Button;')
+ )
+ )
+ )
+ );
+ }
});
-var styleFloatAccessor = 'cssFloat';
-if (ExecutionEnvironment.canUseDOM) {
- // IE8 only supports accessing cssFloat (standard) as styleFloat
- if (document.documentElement.style.cssFloat === undefined) {
- styleFloatAccessor = 'styleFloat';
- }
-}
+module.exports = GettingStarted;
-if ("production" !== process.env.NODE_ENV) {
- // 'msTransform' is correct, but the other prefixes should be capitalized
- var badVendoredStyleNamePattern = /^(?:webkit|moz|o)[A-Z]/;
- // style values shouldn't contain a semicolon
- var badStyleValueWithSemicolonPattern = /;\s*$/;
+},{"react":208}],9:[function(require,module,exports){
+var React = require('react');
- var warnedStyleNames = {};
- var warnedStyleValues = {};
+var PageHeader = require('./PageHeader.jsx');
+var GettingStarted = require('./GettingStarted.jsx');
+var Components = require('./Components.jsx');
+var Nav = require('./Nav.jsx');
+var PageFooter = require('./PageFooter.jsx');
- var warnHyphenatedStyleName = function(name) {
- if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) {
- return;
- }
+var HomePage = React.createClass({displayName: "HomePage",
+ render: function () {
+ return (
+ React.createElement("div", null,
+ React.createElement(PageHeader, null),
+ React.createElement("div", {className: "container"},
+ React.createElement("div", {className: "col-xs-12 col-md-9"},
+ React.createElement(GettingStarted, null),
+ React.createElement(Components, null)
+ ),
+ React.createElement("div", {className: "col-xs-12 col-md-3"},
+ React.createElement(Nav, null)
+ )
+ ),
+ React.createElement(PageFooter, null)
+ )
+ );
+ }
+});
- warnedStyleNames[name] = true;
- ("production" !== process.env.NODE_ENV ? warning(
- false,
- 'Unsupported style property %s. Did you mean %s?',
- name,
- camelizeStyleName(name)
- ) : null);
- };
+module.exports = HomePage;
- var warnBadVendoredStyleName = function(name) {
- if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) {
- return;
- }
- warnedStyleNames[name] = true;
- ("production" !== process.env.NODE_ENV ? warning(
- false,
- 'Unsupported vendor-prefixed style property %s. Did you mean %s?',
- name,
- name.charAt(0).toUpperCase() + name.slice(1)
- ) : null);
- };
+},{"./Components.jsx":6,"./GettingStarted.jsx":8,"./Nav.jsx":10,"./PageFooter.jsx":11,"./PageHeader.jsx":12,"react":208}],10:[function(require,module,exports){
+var React = require('react');
- var warnStyleValueWithSemicolon = function(name, value) {
- if (warnedStyleValues.hasOwnProperty(value) && warnedStyleValues[value]) {
- return;
- }
+var Nav = React.createClass({displayName: "Nav",
+ render: function () {
+ return (
+ React.createElement("nav", {className: "hidden-xs hidden-sm", role: "navigation"},
- warnedStyleValues[value] = true;
- ("production" !== process.env.NODE_ENV ? warning(
- false,
- 'Style property values shouldn\'t contain a semicolon. ' +
- 'Try "%s: %s" instead.',
- name,
- value.replace(badStyleValueWithSemicolonPattern, '')
- ) : null);
- };
+ React.createElement("ul", null,
+ React.createElement("li", null,
+ React.createElement("a", {href: "#setup"}, "Get started"),
+ React.createElement("ul", null,
+ React.createElement("li", null, React.createElement("a", {href: "#terminal"}, "Terminal")),
+ React.createElement("li", null, React.createElement("a", {href: "#usage"}, "Sample usage"))
+ )
+ ),
- /**
- * @param {string} name
- * @param {*} value
- */
- var warnValidStyle = function(name, value) {
- if (name.indexOf('-') > -1) {
- warnHyphenatedStyleName(name);
- } else if (badVendoredStyleNamePattern.test(name)) {
- warnBadVendoredStyleName(name);
- } else if (badStyleValueWithSemicolonPattern.test(value)) {
- warnStyleValueWithSemicolon(name, value);
- }
- };
-}
+ React.createElement("li", null,
+ React.createElement("a", {href: "#atoms"}, "Atoms"),
+ React.createElement("ul", null,
+ React.createElement("li", null, React.createElement("a", {href: "#anchor"}, "Anchor")),
+ React.createElement("li", null, React.createElement("a", {href: "#button"}, "Buttons")),
+ React.createElement("li", null, React.createElement("a", {href: "#flags"}, "Flags")),
+ React.createElement("li", null, React.createElement("a", {href: "#image"}, "Image")),
+ React.createElement("li", null, React.createElement("a", {href: "#input"}, "Input")),
+ React.createElement("li", null, React.createElement("a", {href: "#lists"}, "Lists")),
+ React.createElement("li", null, React.createElement("a", {href: "#lozenge"}, "Lozenge")),
+ React.createElement("li", null, React.createElement("a", {href: "#quote"}, "Quote"))
+ ),
+ React.createElement("a", {href: "#molecules"}, "Molecules"),
+ React.createElement("ul", null,
+ React.createElement("li", null, React.createElement("a", {href: "#alert"}, "Alert")),
+ React.createElement("li", null, React.createElement("a", {href: "#countdown"}, "Countdown")),
+ React.createElement("li", null, React.createElement("a", {href: "#payment-card"}, "Payment Card")),
+ React.createElement("li", null, React.createElement("a", {href: "#rating"}, "Rating")),
+ React.createElement("li", null, React.createElement("a", {href: "#tile"}, "Tile")),
+ React.createElement("li", null, React.createElement("a", {href: "#weather"}, "Weather")),
+ React.createElement("li", null, React.createElement("a", {href: "#stepper"}, "Stepper"))
+ )
+ )
+ )
-/**
- * Operations for dealing with CSS properties.
- */
-var CSSPropertyOperations = {
+ )
+ );
+ }
+});
- /**
- * Serializes a mapping of style properties for use as inline styles:
- *
- * > createMarkupForStyles({width: '200px', height: 0})
- * "width:200px;height:0;"
- *
- * Undefined values are ignored so that declarative programming is easier.
- * The result should be HTML-escaped before insertion into the DOM.
- *
- * @param {object} styles
- * @return {?string}
- */
- createMarkupForStyles: function(styles) {
- var serialized = '';
- for (var styleName in styles) {
- if (!styles.hasOwnProperty(styleName)) {
- continue;
- }
- var styleValue = styles[styleName];
- if ("production" !== process.env.NODE_ENV) {
- warnValidStyle(styleName, styleValue);
- }
- if (styleValue != null) {
- serialized += processStyleName(styleName) + ':';
- serialized += dangerousStyleValue(styleName, styleValue) + ';';
- }
- }
- return serialized || null;
- },
+module.exports = Nav;
- /**
- * Sets the value for multiple styles on a node. If a value is specified as
- * '' (empty string), the corresponding style property will be unset.
- *
- * @param {DOMElement} node
- * @param {object} styles
- */
- setValueForStyles: function(node, styles) {
- var style = node.style;
- for (var styleName in styles) {
- if (!styles.hasOwnProperty(styleName)) {
- continue;
- }
- if ("production" !== process.env.NODE_ENV) {
- warnValidStyle(styleName, styles[styleName]);
- }
- var styleValue = dangerousStyleValue(styleName, styles[styleName]);
- if (styleName === 'float') {
- styleName = styleFloatAccessor;
- }
- if (styleValue) {
- style[styleName] = styleValue;
- } else {
- var expansion = CSSProperty.shorthandPropertyExpansions[styleName];
- if (expansion) {
- // Shorthand property that IE8 won't like unsetting, so unset each
- // component to placate it
- for (var individualStyleName in expansion) {
- style[individualStyleName] = '';
- }
- } else {
- style[styleName] = '';
- }
- }
- }
- }
-};
+},{"react":208}],11:[function(require,module,exports){
+'use strict';
-module.exports = CSSPropertyOperations;
+var React = require('react');
+var packageJSON = require('../../package.json');
-}).call(this,require('_process'))
-},{"./CSSProperty":7,"./ExecutionEnvironment":24,"./camelizeStyleName":112,"./dangerousStyleValue":117,"./hyphenateStyleName":137,"./memoizeStringOnly":147,"./warning":158,"_process":3}],9:[function(require,module,exports){
-(function (process){
-/**
- * Copyright 2013-2015, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * @providesModule CallbackQueue
- */
+var PageHeader = React.createClass({displayName: "PageHeader",
+ render: function () {
+ return (
+ React.createElement("footer", {className: "bs-docs-footer", role: "contentinfo"},
+ React.createElement("div", {className: "container"},
+ React.createElement("ul", {className: "bs-docs-footer-links muted"},
+ React.createElement("li", null, "Currently v", packageJSON.version),
+ React.createElement("li", null, "·"),
+ React.createElement("li", null, React.createElement("a", {href: packageJSON.homepage}, "GitHub")),
+ React.createElement("li", null, "·"),
+ React.createElement("li", null, React.createElement("a", {href: packageJSON.homepage + '/issues?state=open'}, "Issues")),
+ React.createElement("li", null, "·"),
+ React.createElement("li", null, React.createElement("a", {href: packageJSON.homepage + '/releases'}, "Releases"))
+ )
+ )
+ )
+ );
+ }
+});
-'use strict';
+module.exports = PageHeader;
-var PooledClass = require("./PooledClass");
-var assign = require("./Object.assign");
-var invariant = require("./invariant");
+},{"../../package.json":209,"react":208}],12:[function(require,module,exports){
+var React = require('react');
-/**
- * A specialized pseudo-event module to help keep track of components waiting to
- * be notified when their DOM representations are available for use.
- *
- * This implements `PooledClass`, so you should never need to instantiate this.
- * Instead, use `CallbackQueue.getPooled()`.
- *
- * @class ReactMountReady
- * @implements PooledClass
- * @internal
- */
-function CallbackQueue() {
- this._callbacks = null;
- this._contexts = null;
-}
+var packageJSON = require('../../package.json');
-assign(CallbackQueue.prototype, {
+var PageHeader = React.createClass({displayName: "PageHeader",
+ render: function () {
+ return (
+ React.createElement("header", null,
+ React.createElement("div", {className: "container"},
+ React.createElement("img", {src: "./assets/toolkit-logo.svg", alt: "Toolkit"}),
+ React.createElement("h1", null, packageJSON.description),
+ React.createElement("p", {className: "lead"}, "A set of styled components built with React")
+ )
+ )
+ );
+ }
+});
- /**
- * Enqueues a callback to be invoked when `notifyAll` is invoked.
- *
- * @param {function} callback Invoked when `notifyAll` is invoked.
- * @param {?object} context Context to call `callback` with.
- * @internal
- */
- enqueue: function(callback, context) {
- this._callbacks = this._callbacks || [];
- this._contexts = this._contexts || [];
- this._callbacks.push(callback);
- this._contexts.push(context);
- },
+module.exports = PageHeader;
- /**
- * Invokes all enqueued callbacks and clears the queue. This is invoked after
- * the DOM representation of a component has been created or updated.
- *
- * @internal
- */
- notifyAll: function() {
- var callbacks = this._callbacks;
- var contexts = this._contexts;
- if (callbacks) {
- ("production" !== process.env.NODE_ENV ? invariant(
- callbacks.length === contexts.length,
- 'Mismatched list of contexts in callback queue'
- ) : invariant(callbacks.length === contexts.length));
- this._callbacks = null;
- this._contexts = null;
- for (var i = 0, l = callbacks.length; i < l; i++) {
- callbacks[i].call(contexts[i]);
- }
- callbacks.length = 0;
- contexts.length = 0;
- }
- },
- /**
- * Resets the internal queue.
- *
- * @internal
- */
- reset: function() {
- this._callbacks = null;
- this._contexts = null;
- },
+},{"../../package.json":209,"react":208}],13:[function(require,module,exports){
+module.exports = require('./src/ui-toolkit');
- /**
- * `PooledClass` looks for this.
- */
- destructor: function() {
- this.reset();
- }
-});
+},{"./src/ui-toolkit":283}],14:[function(require,module,exports){
+/*!
+ Copyright (c) 2015 Jed Watson.
+ Licensed under the MIT License (MIT), see
+ http://jedwatson.github.io/classnames
+*/
+/* global define */
-PooledClass.addPoolingTo(CallbackQueue);
+(function () {
+ 'use strict';
-module.exports = CallbackQueue;
+ var hasOwn = {}.hasOwnProperty;
-}).call(this,require('_process'))
-},{"./Object.assign":30,"./PooledClass":31,"./invariant":139,"_process":3}],10:[function(require,module,exports){
-/**
- * Copyright 2013-2015, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * @providesModule ChangeEventPlugin
- */
+ function classNames () {
+ var classes = '';
-'use strict';
+ for (var i = 0; i < arguments.length; i++) {
+ var arg = arguments[i];
+ if (!arg) continue;
-var EventConstants = require("./EventConstants");
-var EventPluginHub = require("./EventPluginHub");
-var EventPropagators = require("./EventPropagators");
-var ExecutionEnvironment = require("./ExecutionEnvironment");
-var ReactUpdates = require("./ReactUpdates");
-var SyntheticEvent = require("./SyntheticEvent");
+ var argType = typeof arg;
-var isEventSupported = require("./isEventSupported");
-var isTextInputElement = require("./isTextInputElement");
-var keyOf = require("./keyOf");
+ if (argType === 'string' || argType === 'number') {
+ classes += ' ' + arg;
+ } else if (Array.isArray(arg)) {
+ classes += ' ' + classNames.apply(null, arg);
+ } else if (argType === 'object') {
+ for (var key in arg) {
+ if (hasOwn.call(arg, key) && arg[key]) {
+ classes += ' ' + key;
+ }
+ }
+ }
+ }
-var topLevelTypes = EventConstants.topLevelTypes;
+ return classes.substr(1);
+ }
-var eventTypes = {
- change: {
- phasedRegistrationNames: {
- bubbled: keyOf({onChange: null}),
- captured: keyOf({onChangeCapture: null})
- },
- dependencies: [
- topLevelTypes.topBlur,
- topLevelTypes.topChange,
- topLevelTypes.topClick,
- topLevelTypes.topFocus,
- topLevelTypes.topInput,
- topLevelTypes.topKeyDown,
- topLevelTypes.topKeyUp,
- topLevelTypes.topSelectionChange
- ]
- }
-};
+ if (typeof module !== 'undefined' && module.exports) {
+ module.exports = classNames;
+ } else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {
+ // register as 'classnames', consistent with npm package name
+ define('classnames', function () {
+ return classNames;
+ });
+ } else {
+ window.classNames = classNames;
+ }
+}());
+},{}],15:[function(require,module,exports){
/**
- * For IE shims
+ * lodash 3.1.0 (Custom Build)
+ * Build: `lodash modern modularize exports="npm" -o ./`
+ * Copyright 2012-2015 The Dojo Foundation
+ * Based on Underscore.js 1.8.2
+ * Copyright 2009-2015 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ * Available under MIT license
*/
-var activeElement = null;
-var activeElementID = null;
-var activeElementValue = null;
-var activeElementValueProp = null;
+var baseFlatten = require('lodash._baseflatten'),
+ bindCallback = require('lodash._bindcallback'),
+ pickByArray = require('lodash._pickbyarray'),
+ pickByCallback = require('lodash._pickbycallback'),
+ restParam = require('lodash.restparam');
/**
- * SECTION: handle `change` event
+ * Creates an object composed of the picked `object` properties. Property
+ * names may be specified as individual arguments or as arrays of property
+ * names. If `predicate` is provided it is invoked for each property of `object`
+ * picking the properties `predicate` returns truthy for. The predicate is
+ * bound to `thisArg` and invoked with three arguments: (value, key, object).
+ *
+ * @static
+ * @memberOf _
+ * @category Object
+ * @param {Object} object The source object.
+ * @param {Function|...(string|string[])} [predicate] The function invoked per
+ * iteration or property names to pick, specified as individual property
+ * names or arrays of property names.
+ * @param {*} [thisArg] The `this` binding of `predicate`.
+ * @returns {Object} Returns the new object.
+ * @example
+ *
+ * var object = { 'user': 'fred', 'age': 40 };
+ *
+ * _.pick(object, 'user');
+ * // => { 'user': 'fred' }
+ *
+ * _.pick(object, _.isString);
+ * // => { 'user': 'fred' }
*/
-function shouldUseChangeEvent(elem) {
- return (
- elem.nodeName === 'SELECT' ||
- (elem.nodeName === 'INPUT' && elem.type === 'file')
- );
-}
+var pick = restParam(function(object, props) {
+ if (object == null) {
+ return {};
+ }
+ return typeof props[0] == 'function'
+ ? pickByCallback(object, bindCallback(props[0], props[1], 3))
+ : pickByArray(object, baseFlatten(props));
+});
-var doesChangeEventBubble = false;
-if (ExecutionEnvironment.canUseDOM) {
- // See `handleChange` comment below
- doesChangeEventBubble = isEventSupported('change') && (
- (!('documentMode' in document) || document.documentMode > 8)
- );
-}
+module.exports = pick;
-function manualDispatchChangeEvent(nativeEvent) {
- var event = SyntheticEvent.getPooled(
- eventTypes.change,
- activeElementID,
- nativeEvent
- );
- EventPropagators.accumulateTwoPhaseDispatches(event);
+},{"lodash._baseflatten":16,"lodash._bindcallback":19,"lodash._pickbyarray":20,"lodash._pickbycallback":21,"lodash.restparam":26}],16:[function(require,module,exports){
+/**
+ * lodash 3.1.4 (Custom Build)
+ * Build: `lodash modern modularize exports="npm" -o ./`
+ * Copyright 2012-2015 The Dojo Foundation
+ * Based on Underscore.js 1.8.3
+ * Copyright 2009-2015 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ * Available under MIT license
+ */
+var isArguments = require('lodash.isarguments'),
+ isArray = require('lodash.isarray');
- // If change and propertychange bubbled, we'd just bind to it like all the
- // other events and have it go through ReactBrowserEventEmitter. Since it
- // doesn't, we manually listen for the events and so we have to enqueue and
- // process the abstract event manually.
- //
- // Batching is necessary here in order to ensure that all event handlers run
- // before the next rerender (including event handlers attached to ancestor
- // elements instead of directly on the input). Without this, controlled
- // components don't work properly in conjunction with event bubbling because
- // the component is rerendered and the value reverted before all the event
- // handlers can run. See https://github.com/facebook/react/issues/708.
- ReactUpdates.batchedUpdates(runEventInBatch, event);
+/**
+ * Checks if `value` is object-like.
+ *
+ * @private
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
+ */
+function isObjectLike(value) {
+ return !!value && typeof value == 'object';
}
-function runEventInBatch(event) {
- EventPluginHub.enqueueEvents(event);
- EventPluginHub.processEventQueue();
-}
+/**
+ * Used as the [maximum length](http://ecma-international.org/ecma-262/6.0/#sec-number.max_safe_integer)
+ * of an array-like value.
+ */
+var MAX_SAFE_INTEGER = 9007199254740991;
-function startWatchingForChangeEventIE8(target, targetID) {
- activeElement = target;
- activeElementID = targetID;
- activeElement.attachEvent('onchange', manualDispatchChangeEvent);
-}
+/**
+ * Appends the elements of `values` to `array`.
+ *
+ * @private
+ * @param {Array} array The array to modify.
+ * @param {Array} values The values to append.
+ * @returns {Array} Returns `array`.
+ */
+function arrayPush(array, values) {
+ var index = -1,
+ length = values.length,
+ offset = array.length;
-function stopWatchingForChangeEventIE8() {
- if (!activeElement) {
- return;
+ while (++index < length) {
+ array[offset + index] = values[index];
}
- activeElement.detachEvent('onchange', manualDispatchChangeEvent);
- activeElement = null;
- activeElementID = null;
+ return array;
}
-function getTargetIDForChangeEvent(
- topLevelType,
- topLevelTarget,
- topLevelTargetID) {
- if (topLevelType === topLevelTypes.topChange) {
- return topLevelTargetID;
- }
-}
-function handleEventsForChangeEventIE8(
- topLevelType,
- topLevelTarget,
- topLevelTargetID) {
- if (topLevelType === topLevelTypes.topFocus) {
- // stopWatching() should be a noop here but we call it just in case we
- // missed a blur event somehow.
- stopWatchingForChangeEventIE8();
- startWatchingForChangeEventIE8(topLevelTarget, topLevelTargetID);
- } else if (topLevelType === topLevelTypes.topBlur) {
- stopWatchingForChangeEventIE8();
+/**
+ * The base implementation of `_.flatten` with added support for restricting
+ * flattening and specifying the start index.
+ *
+ * @private
+ * @param {Array} array The array to flatten.
+ * @param {boolean} [isDeep] Specify a deep flatten.
+ * @param {boolean} [isStrict] Restrict flattening to arrays-like objects.
+ * @param {Array} [result=[]] The initial result value.
+ * @returns {Array} Returns the new flattened array.
+ */
+function baseFlatten(array, isDeep, isStrict, result) {
+ result || (result = []);
+
+ var index = -1,
+ length = array.length;
+
+ while (++index < length) {
+ var value = array[index];
+ if (isObjectLike(value) && isArrayLike(value) &&
+ (isStrict || isArray(value) || isArguments(value))) {
+ if (isDeep) {
+ // Recursively flatten arrays (susceptible to call stack limits).
+ baseFlatten(value, isDeep, isStrict, result);
+ } else {
+ arrayPush(result, value);
+ }
+ } else if (!isStrict) {
+ result[result.length] = value;
+ }
}
+ return result;
}
-
/**
- * SECTION: handle `input` event
+ * The base implementation of `_.property` without support for deep paths.
+ *
+ * @private
+ * @param {string} key The key of the property to get.
+ * @returns {Function} Returns the new function.
*/
-var isInputEventSupported = false;
-if (ExecutionEnvironment.canUseDOM) {
- // IE9 claims to support the input event but fails to trigger it when
- // deleting text, so we ignore its input events
- isInputEventSupported = isEventSupported('input') && (
- (!('documentMode' in document) || document.documentMode > 9)
- );
+function baseProperty(key) {
+ return function(object) {
+ return object == null ? undefined : object[key];
+ };
}
/**
- * (For old IE.) Replacement getter/setter for the `value` property that gets
- * set on the active element.
+ * Gets the "length" property value of `object`.
+ *
+ * **Note:** This function is used to avoid a [JIT bug](https://bugs.webkit.org/show_bug.cgi?id=142792)
+ * that affects Safari on at least iOS 8.1-8.3 ARM64.
+ *
+ * @private
+ * @param {Object} object The object to query.
+ * @returns {*} Returns the "length" value.
*/
-var newValueProp = {
- get: function() {
- return activeElementValueProp.get.call(this);
- },
- set: function(val) {
- // Cast to a string so we can do equality checks.
- activeElementValue = '' + val;
- activeElementValueProp.set.call(this, val);
- }
-};
+var getLength = baseProperty('length');
/**
- * (For old IE.) Starts tracking propertychange events on the passed-in element
- * and override the value property so that we can distinguish user events from
- * value changes in JS.
+ * Checks if `value` is array-like.
+ *
+ * @private
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is array-like, else `false`.
*/
-function startWatchingForValueChange(target, targetID) {
- activeElement = target;
- activeElementID = targetID;
- activeElementValue = target.value;
- activeElementValueProp = Object.getOwnPropertyDescriptor(
- target.constructor.prototype,
- 'value'
- );
-
- Object.defineProperty(activeElement, 'value', newValueProp);
- activeElement.attachEvent('onpropertychange', handlePropertyChange);
+function isArrayLike(value) {
+ return value != null && isLength(getLength(value));
}
/**
- * (For old IE.) Removes the event listeners from the currently-tracked element,
- * if any exists.
+ * Checks if `value` is a valid array-like length.
+ *
+ * **Note:** This function is based on [`ToLength`](http://ecma-international.org/ecma-262/6.0/#sec-tolength).
+ *
+ * @private
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a valid length, else `false`.
*/
-function stopWatchingForValueChange() {
- if (!activeElement) {
- return;
- }
-
- // delete restores the original property definition
- delete activeElement.value;
- activeElement.detachEvent('onpropertychange', handlePropertyChange);
-
- activeElement = null;
- activeElementID = null;
- activeElementValue = null;
- activeElementValueProp = null;
+function isLength(value) {
+ return typeof value == 'number' && value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;
}
+module.exports = baseFlatten;
+
+},{"lodash.isarguments":17,"lodash.isarray":18}],17:[function(require,module,exports){
/**
- * (For old IE.) Handles a propertychange event, sending a `change` event if
- * the value of the active element has changed.
+ * lodash 3.0.4 (Custom Build)
+ * Build: `lodash modern modularize exports="npm" -o ./`
+ * Copyright 2012-2015 The Dojo Foundation
+ * Based on Underscore.js 1.8.3
+ * Copyright 2009-2015 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ * Available under MIT license
*/
-function handlePropertyChange(nativeEvent) {
- if (nativeEvent.propertyName !== 'value') {
- return;
- }
- var value = nativeEvent.srcElement.value;
- if (value === activeElementValue) {
- return;
- }
- activeElementValue = value;
- manualDispatchChangeEvent(nativeEvent);
+/**
+ * Checks if `value` is object-like.
+ *
+ * @private
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
+ */
+function isObjectLike(value) {
+ return !!value && typeof value == 'object';
}
+/** Used for native method references. */
+var objectProto = Object.prototype;
+
+/** Used to check objects for own properties. */
+var hasOwnProperty = objectProto.hasOwnProperty;
+
+/** Native method references. */
+var propertyIsEnumerable = objectProto.propertyIsEnumerable;
+
/**
- * If a `change` event should be fired, returns the target's ID.
+ * Used as the [maximum length](http://ecma-international.org/ecma-262/6.0/#sec-number.max_safe_integer)
+ * of an array-like value.
*/
-function getTargetIDForInputEvent(
- topLevelType,
- topLevelTarget,
- topLevelTargetID) {
- if (topLevelType === topLevelTypes.topInput) {
- // In modern browsers (i.e., not IE8 or IE9), the input event is exactly
- // what we want so fall through here and trigger an abstract event
- return topLevelTargetID;
- }
-}
+var MAX_SAFE_INTEGER = 9007199254740991;
-// For IE8 and IE9.
-function handleEventsForInputEventIE(
- topLevelType,
- topLevelTarget,
- topLevelTargetID) {
- if (topLevelType === topLevelTypes.topFocus) {
- // In IE8, we can capture almost all .value changes by adding a
- // propertychange handler and looking for events with propertyName
- // equal to 'value'
- // In IE9, propertychange fires for most input events but is buggy and
- // doesn't fire when text is deleted, but conveniently, selectionchange
- // appears to fire in all of the remaining cases so we catch those and
- // forward the event if the value has changed
- // In either case, we don't want to call the event handler if the value
- // is changed from JS so we redefine a setter for `.value` that updates
- // our activeElementValue variable, allowing us to ignore those changes
- //
- // stopWatching() should be a noop here but we call it just in case we
- // missed a blur event somehow.
- stopWatchingForValueChange();
- startWatchingForValueChange(topLevelTarget, topLevelTargetID);
- } else if (topLevelType === topLevelTypes.topBlur) {
- stopWatchingForValueChange();
- }
-}
-
-// For IE8 and IE9.
-function getTargetIDForInputEventIE(
- topLevelType,
- topLevelTarget,
- topLevelTargetID) {
- if (topLevelType === topLevelTypes.topSelectionChange ||
- topLevelType === topLevelTypes.topKeyUp ||
- topLevelType === topLevelTypes.topKeyDown) {
- // On the selectionchange event, the target is just document which isn't
- // helpful for us so just check activeElement instead.
- //
- // 99% of the time, keydown and keyup aren't necessary. IE8 fails to fire
- // propertychange on the first input event after setting `value` from a
- // script and fires only keydown, keypress, keyup. Catching keyup usually
- // gets it and catching keydown lets us fire an event for the first
- // keystroke if user does a key repeat (it'll be a little delayed: right
- // before the second keystroke). Other input methods (e.g., paste) seem to
- // fire selectionchange normally.
- if (activeElement && activeElement.value !== activeElementValue) {
- activeElementValue = activeElement.value;
- return activeElementID;
- }
- }
+/**
+ * The base implementation of `_.property` without support for deep paths.
+ *
+ * @private
+ * @param {string} key The key of the property to get.
+ * @returns {Function} Returns the new function.
+ */
+function baseProperty(key) {
+ return function(object) {
+ return object == null ? undefined : object[key];
+ };
}
-
/**
- * SECTION: handle `click` event
+ * Gets the "length" property value of `object`.
+ *
+ * **Note:** This function is used to avoid a [JIT bug](https://bugs.webkit.org/show_bug.cgi?id=142792)
+ * that affects Safari on at least iOS 8.1-8.3 ARM64.
+ *
+ * @private
+ * @param {Object} object The object to query.
+ * @returns {*} Returns the "length" value.
*/
-function shouldUseClickEvent(elem) {
- // Use the `click` event to detect changes to checkbox and radio inputs.
- // This approach works across all browsers, whereas `change` does not fire
- // until `blur` in IE8.
- return (
- elem.nodeName === 'INPUT' &&
- (elem.type === 'checkbox' || elem.type === 'radio')
- );
-}
+var getLength = baseProperty('length');
-function getTargetIDForClickEvent(
- topLevelType,
- topLevelTarget,
- topLevelTargetID) {
- if (topLevelType === topLevelTypes.topClick) {
- return topLevelTargetID;
- }
+/**
+ * Checks if `value` is array-like.
+ *
+ * @private
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is array-like, else `false`.
+ */
+function isArrayLike(value) {
+ return value != null && isLength(getLength(value));
}
/**
- * This plugin creates an `onChange` event that normalizes change events
- * across form elements. This event fires at a time when it's possible to
- * change the element's value without seeing a flicker.
+ * Checks if `value` is a valid array-like length.
*
- * Supported elements are:
- * - input (see `isTextInputElement`)
- * - textarea
- * - select
+ * **Note:** This function is based on [`ToLength`](http://ecma-international.org/ecma-262/6.0/#sec-tolength).
+ *
+ * @private
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a valid length, else `false`.
*/
-var ChangeEventPlugin = {
-
- eventTypes: eventTypes,
-
- /**
- * @param {string} topLevelType Record from `EventConstants`.
- * @param {DOMEventTarget} topLevelTarget The listening component root node.
- * @param {string} topLevelTargetID ID of `topLevelTarget`.
- * @param {object} nativeEvent Native browser event.
- * @return {*} An accumulation of synthetic events.
- * @see {EventPluginHub.extractEvents}
- */
- extractEvents: function(
- topLevelType,
- topLevelTarget,
- topLevelTargetID,
- nativeEvent) {
-
- var getTargetIDFunc, handleEventFunc;
- if (shouldUseChangeEvent(topLevelTarget)) {
- if (doesChangeEventBubble) {
- getTargetIDFunc = getTargetIDForChangeEvent;
- } else {
- handleEventFunc = handleEventsForChangeEventIE8;
- }
- } else if (isTextInputElement(topLevelTarget)) {
- if (isInputEventSupported) {
- getTargetIDFunc = getTargetIDForInputEvent;
- } else {
- getTargetIDFunc = getTargetIDForInputEventIE;
- handleEventFunc = handleEventsForInputEventIE;
- }
- } else if (shouldUseClickEvent(topLevelTarget)) {
- getTargetIDFunc = getTargetIDForClickEvent;
- }
-
- if (getTargetIDFunc) {
- var targetID = getTargetIDFunc(
- topLevelType,
- topLevelTarget,
- topLevelTargetID
- );
- if (targetID) {
- var event = SyntheticEvent.getPooled(
- eventTypes.change,
- targetID,
- nativeEvent
- );
- EventPropagators.accumulateTwoPhaseDispatches(event);
- return event;
- }
- }
-
- if (handleEventFunc) {
- handleEventFunc(
- topLevelType,
- topLevelTarget,
- topLevelTargetID
- );
- }
- }
-
-};
-
-module.exports = ChangeEventPlugin;
+function isLength(value) {
+ return typeof value == 'number' && value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;
+}
-},{"./EventConstants":18,"./EventPluginHub":20,"./EventPropagators":23,"./ExecutionEnvironment":24,"./ReactUpdates":91,"./SyntheticEvent":99,"./isEventSupported":140,"./isTextInputElement":142,"./keyOf":145}],11:[function(require,module,exports){
/**
- * Copyright 2013-2015, Facebook, Inc.
- * All rights reserved.
+ * Checks if `value` is classified as an `arguments` object.
*
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
+ * @static
+ * @memberOf _
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is correctly classified, else `false`.
+ * @example
*
- * @providesModule ClientReactRootIndex
- * @typechecks
+ * _.isArguments(function() { return arguments; }());
+ * // => true
+ *
+ * _.isArguments([1, 2, 3]);
+ * // => false
*/
+function isArguments(value) {
+ return isObjectLike(value) && isArrayLike(value) &&
+ hasOwnProperty.call(value, 'callee') && !propertyIsEnumerable.call(value, 'callee');
+}
-'use strict';
+module.exports = isArguments;
-var nextReactRootIndex = 0;
+},{}],18:[function(require,module,exports){
+/**
+ * lodash 3.0.4 (Custom Build)
+ * Build: `lodash modern modularize exports="npm" -o ./`
+ * Copyright 2012-2015 The Dojo Foundation
+ * Based on Underscore.js 1.8.3
+ * Copyright 2009-2015 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ * Available under MIT license
+ */
-var ClientReactRootIndex = {
- createReactRootIndex: function() {
- return nextReactRootIndex++;
- }
-};
+/** `Object#toString` result references. */
+var arrayTag = '[object Array]',
+ funcTag = '[object Function]';
-module.exports = ClientReactRootIndex;
+/** Used to detect host constructors (Safari > 5). */
+var reIsHostCtor = /^\[object .+?Constructor\]$/;
-},{}],12:[function(require,module,exports){
-(function (process){
/**
- * Copyright 2013-2015, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
+ * Checks if `value` is object-like.
*
- * @providesModule DOMChildrenOperations
- * @typechecks static-only
+ * @private
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
*/
+function isObjectLike(value) {
+ return !!value && typeof value == 'object';
+}
-'use strict';
+/** Used for native method references. */
+var objectProto = Object.prototype;
-var Danger = require("./Danger");
-var ReactMultiChildUpdateTypes = require("./ReactMultiChildUpdateTypes");
+/** Used to resolve the decompiled source of functions. */
+var fnToString = Function.prototype.toString;
-var setTextContent = require("./setTextContent");
-var invariant = require("./invariant");
+/** Used to check objects for own properties. */
+var hasOwnProperty = objectProto.hasOwnProperty;
/**
- * Inserts `childNode` as a child of `parentNode` at the `index`.
- *
- * @param {DOMElement} parentNode Parent node in which to insert.
- * @param {DOMElement} childNode Child node to insert.
- * @param {number} index Index at which to insert the child.
- * @internal
+ * Used to resolve the [`toStringTag`](http://ecma-international.org/ecma-262/6.0/#sec-object.prototype.tostring)
+ * of values.
*/
-function insertChildAt(parentNode, childNode, index) {
- // By exploiting arrays returning `undefined` for an undefined index, we can
- // rely exclusively on `insertBefore(node, null)` instead of also using
- // `appendChild(node)`. However, using `undefined` is not allowed by all
- // browsers so we must replace it with `null`.
- parentNode.insertBefore(
- childNode,
- parentNode.childNodes[index] || null
- );
-}
-
-/**
- * Operations for updating with DOM children.
- */
-var DOMChildrenOperations = {
-
- dangerouslyReplaceNodeWithMarkup: Danger.dangerouslyReplaceNodeWithMarkup,
-
- updateTextContent: setTextContent,
-
- /**
- * Updates a component's children by processing a series of updates. The
- * update configurations are each expected to have a `parentNode` property.
- *
- * @param {array