belle - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

docs/js/App.jsx

@@ -15,4 +15,4 @@ "use strict";
 const belleLogoStyle = {
-  height: 32,
-  width: 32,
+  height: 54,
+  width: 54,
   background: '#53C7F2',
@@ -29,27 +29,30 @@ display: 'inline-block',
   render() {
-    return <div style={ {margin: '0 auto', width: 640 } }>
-      <h1 style={{ fontSize: 42 }}><i style={ belleLogoStyle }></i> Belle</h1>
+    return <div>
+      <div style={ {background: 'rgb(44, 44, 44)', width: '100%'} }>
+        <div style={ {margin: '0 auto', width: 640 } }>
+          <h1 style={{ fontSize: 72, margin: 0, paddingTop: 110, color: '#FFF' }}><i style={ belleLogoStyle }></i> Belle</h1>
 
-      <p style={{ fontSize: 28, marginTop: 50 }}>
-        <i>
-          <a href="http://facebook.github.io/react/">React</a> Components with a great User Experience.
-        </i>
-      </p>
-      <p><b>Notice:</b> Keep in mind this library is early stage and might change a lot soon.</p>
+          <p style={{ fontSize: 18, marginTop: -10, paddingBottom: 60, color: '#B8B8B8'}}>
+            React Components with great User Experience.
+          </p>
+        </div>
+      </div>
 
+      <div style={ {margin: '0 auto', width: 640 } }>
+        <p><b>Notice:</b> Keep in mind this library is early stage and might change a lot soon.</p>
 
-      <h2 style={{ float: 'left' }}>Components</h2>
+        <h2 style={{ float: 'left' }}>Components</h2>
 
-      <ul style={ { listStyleType: 'none', paddingLeft: 10, paddingTop: 12, float: 'left' } }>
-        <li style={{ float: 'left', padding: '0 10px' }}><a href="#button">Button</a></li>
-        <li style={{ float: 'left', padding: '0 10px' }}><a href="#input">Input</a></li>
-        <li style={{ float: 'left', padding: '0 10px' }}><a href="#card">Card</a></li>
-      </ul>
+        <ul style={ { listStyleType: 'none', paddingLeft: 10, paddingTop: 12, float: 'left' } }>
+          <li style={{ float: 'left', padding: '0 10px' }}><a href="#button">Button</a></li>
+          <li style={{ float: 'left', padding: '0 10px' }}><a href="#input">Input</a></li>
+          <li style={{ float: 'left', padding: '0 10px' }}><a href="#card">Card</a></li>
+        </ul>
 
-      <div style={{ clear: 'left' }}></div>
+        <div style={{ clear: 'left' }}></div>
 
-      <ButtonDocumentation />
-      <InputDocumentation />
-      <CardDocumentation />
-
+        <ButtonDocumentation />
+        <InputDocumentation />
+        <CardDocumentation />
+      </div>
     </div>;
@@ -56,0 +59,0 @@ }

docs/js/InputDocumentation.jsx

@@ -22,4 +22,7 @@ "use strict";
 
-      <Input defaultValue="Jane Doe" placeholder="Name" />
+      <Input defaultValue="Jane Doe" placeholder="Name" style={ { marginBottom: 20} }/>
 
+      <Input defaultValue="This Input has allowNewLine set to true &amp;. Just press 'Return' once editing the text."
+             allowNewLine={ true } />
+
       <Code value={ exampleCode } style={ {marginTop: 40} } />
@@ -164,4 +167,8 @@
 const exampleCode = `<!-- default input with a defaultValue -->
-<Input defaultValue="Jane Doe" />`;
+<Input defaultValue="Jane Doe" placeholder="Name"/>
 
+<!-- input with allowNewLine set to true -->
+<Input defaultValue="This Input has allowNewLine set to true. Just press 'Return' once editing the text."
+       allowNewLine={ true } />`;
+
 const advancedExampleCode = `<Input minHeight={ 120 }
@@ -168,0 +175,0 @@ valueLink={ this.linkState('customInputValue') }

docs/package.json

 {
   "name": "belleDocumentation",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Docuemtation for Belle",
@@ -5,0 +5,0 @@ "author": {

lib/components/Button.js

@@ -29,4 +29,3 @@ "use strict";
 
-var injectStyle = _interopRequire(_utilsInjectStyle);
-
+var injectStyles = _utilsInjectStyle.injectStyles;
 var removeStyle = _utilsInjectStyle.removeStyle;
@@ -244,5 +243,16 @@
   var activeStyle = extend({}, baseActiveStyle, properties.activeStyle);
-  injectStyle(styleId, hoverStyle, "hover");
-  injectStyle(styleId, focusStyle, "focus");
-  injectStyle(styleId, activeStyle, "active");
+  var styles = [{
+    id: styleId,
+    style: hoverStyle,
+    pseudoClass: "hover"
+  }, {
+    id: styleId,
+    style: focusStyle,
+    pseudoClass: "focus"
+  }, {
+    id: styleId,
+    style: activeStyle,
+    pseudoClass: "active"
+  }];
+  injectStyles(styles);
 }

lib/components/Input.js

@@ -15,2 +15,4 @@ "use strict";
 
+/* jslint browser: true */
+
 var _react = require("react");
@@ -26,4 +28,3 @@
 
-var injectStyle = _interopRequire(_utilsInjectStyle);
-
+var injectStyles = _utilsInjectStyle.injectStyles;
 var removeStyle = _utilsInjectStyle.removeStyle;
@@ -37,3 +38,3 @@
 /**
- * Input component with a great UX like autogrowing & handling states
+ * Input component with great UX like autogrowing & handling states
  *
@@ -57,5 +58,5 @@ * Note on styling: Right now this component doen't allow to change style after
 
-    this.textareaProperties = sanitizeChildProperties(properties);
     this.state = {
-      height: "auto"
+      height: "auto",
+      textareaProperties: sanitizeChildProperties(properties)
     };
@@ -74,4 +75,5 @@ _get(Object.getPrototypeOf(Input.prototype), "constructor", this).call(this, properties);
           className: "" + this.props.className + " " + this.styleId,
-          onChange: this.onChange.bind(this)
-        }, this.textareaProperties));
+          onChange: this.onChange.bind(this),
+          onKeyDown: this.onKeyDown.bind(this)
+        }, this.state.textareaProperties));
       }
@@ -121,3 +123,3 @@ },
       value: function componentWillReceiveProps(properties) {
-        this.textareaProperties = sanitizeChildProperties(properties);
+        this.setState({ textareaProperties: sanitizeChildProperties(properties) });
         updatePseudoClassStyle(this.styleId, this.props);
@@ -131,13 +133,37 @@ this.resize();
        * Update the height and provide the changeCallback for valueLink.
+       *
+       * In addition newline characters are replaced by spaces in the textarea value
+       * in case allowNewLine is set to false and newLine characters could be found.
        */
 
       value: function onChange(event) {
+        var _this = this;
+
+        var value = event.target.value;
+
+        if (!this.props.allowNewLine && value.match(newLineRegex) !== null) {
+          value = event.target.value.replace(newLineRegex, " ");
+
+          // controlled textarea must have value
+          if (this.state.textareaProperties.value) {
+            this.setState({ textareaProperties: { value: value } });
+            this.forceUpdate(this.resize);
+            // uncontrolled textarea must be updated with value, but then released again
+          } else {
+            this.setState({ textareaProperties: { value: value } });
+            this.forceUpdate(function () {
+              _this.resize();
+              _this.setState({ textareaProperties: { value: undefined } });
+            });
+          }
+        }
+
         this.resize();
 
-        var changeCallback = this.props.onChange,
-            valueLink = this.props.valueLink;
+        var changeCallback = this.props.onChange;
+        var valueLink = this.props.valueLink;
 
         if (typeof valueLink == "object" && typeof valueLink.requestChange == "function") {
-          changeCallback = function (ev) {
-            return valueLink.requestChange(ev.target.value);
+          changeCallback = function (event) {
+            return valueLink.requestChange(value);
           };
@@ -151,2 +177,22 @@ }
     },
+    onKeyDown: {
+
+      /**
+       * Prevent any newline (except allowNewLine is active) and passes the event to
+       * the onKeyDown property.
+       *
+       * This is an optimization to avoid adding a newline char & removing it right
+       * away in the onChange callback.
+       */
+
+      value: function onKeyDown(event) {
+        if (!this.props.allowNewLine && event.key == "Enter") {
+          event.preventDefault();
+        }
+
+        if (this.props.onKeyDown) {
+          this.props.onKeyDown(event);
+        }
+      }
+    },
     resize: {
@@ -205,5 +251,10 @@
   hoverStyle: React.PropTypes.object,
-  focusStyle: React.PropTypes.object
+  focusStyle: React.PropTypes.object,
+  allowNewLine: React.PropTypes.bool
 };
 
+Input.defaultProps = { allowNewLine: false };
+
+var newLineRegex = /[\r\n]/g;
+
 var defaultStyle = {
@@ -245,3 +296,3 @@ /* normalize.css v3.0.1 */
 function sanitizeChildProperties(properties) {
-  var childProperties = omit(properties, ["valueLink", "onChange", "minHeight", "maxHeight", "className", "style", "hoverStyle", "focusStyle"]);
+  var childProperties = omit(properties, ["valueLink", "onChange", "onKeyDown", "minHeight", "maxHeight", "className", "style", "hoverStyle", "focusStyle"]);
   if (typeof properties.valueLink == "object") {
@@ -262,4 +313,12 @@ childProperties.value = properties.valueLink.value;
   var focusStyle = extend({}, defaultFocusStyle, properties.focusStyle);
-  injectStyle(styleId, hoverStyle, "hover");
-  injectStyle(styleId, focusStyle, "focus");
+  var styles = [{
+    id: styleId,
+    style: hoverStyle,
+    pseudoClass: "hover"
+  }, {
+    id: styleId,
+    style: focusStyle,
+    pseudoClass: "focus"
+  }];
+  injectStyles(styles);
 }

lib/utils/inject-style.js

@@ -6,2 +6,21 @@ "use strict";
 /**
+ * Injects a style tag and adds multiple passed styles.
+ *
+ * By using this function someone can make sure the DOM is updated only once.
+ *
+ * Usage:
+ * ```
+ * const styles = [
+ *   {
+ *     id: 'style-0.0.2',
+ *     style: { color: '#F00' },
+ *     pseudoClass: 'hover'
+ *   }
+ * ];
+ * injectStyles(styles);
+ * ```
+ */
+exports.injectStyles = injectStyles;
+
+/**
  * Removes all pseudoClass styles based on the provided styleId.
@@ -20,2 +39,3 @@ */
 var map = _underscore.map;
+var each = _underscore.each;
 var flatten = _underscore.flatten;
@@ -33,2 +53,24 @@
 exports["default"] = function (styleId, style, pseudoClass) {
+  injectStyleTag();
+  updateStore(styleId, style, pseudoClass);
+  updateStyling();
+};
+
+function injectStyles(styles) {
+  injectStyleTag();
+  each(styles, function (style) {
+    updateStore(style.id, style.style, style.pseudoClass);
+  });
+  updateStyling();
+}
+
+function removeStyle(styleId) {
+  styleStorage[styleId] = undefined;
+  updateStyling();
+}
+
+/**
+ * Injects the provided style into the styleStore.
+ */
+function injectStyleTag() {
   if (!styleElement) {
@@ -39,12 +81,10 @@ styleElement = document.createElement("style");
   }
+}
 
+/**
+ * Injects the provided style into the styleStore.
+ */
+function updateStore(styleId, style, pseudoClass) {
   styleStorage[styleId] = styleStorage[styleId] || {};
   styleStorage[styleId][pseudoClass] = style;
-
-  updateStyling();
-};
-
-function removeStyle(styleId) {
-  styleStorage[styleId] = undefined;
-  updateStyling();
 }
@@ -51,0 +91,0 @@

package.json

 {
   "name": "belle",
-  "version": "0.0.3",
-  "description": "React Components with a great UX",
+  "version": "0.0.4",
+  "description": "React Components with great UX",
   "author": {
@@ -6,0 +6,0 @@ "name": "Nik Graf",

README.md

 # Belle
 
-React Components with a great User Experience.
+React Components with great User Experience.
 
@@ -5,0 +5,0 @@ Notice: Keep in mind this library is early stage and might change a lot soon.

No alert changes

Improved metrics

Total package byte prevSize

846976

increased by0.65%

Number of package files

195

increased by0.52%

Lines of code

18251

increased by1.3%

No dependency changes