Merge pull request airbnb#6 from drivetribe/container

OlivierCo · OlivierCo · commit dbcad6208e0a · 2016-06-02T12:28:54.000+01:00
Scrollable container horizontal &amp; vertical + some input refactoring
diff --git a/react-dom/DTImage/src/index.js b/react-dom/DTImage/src/index.js
@@ -3,8 +3,9 @@ import wrapImageInApiParser from '@drivetribe/react-higher-wrap-image-in-api-par
 
 const DTImage = (props) => (
   <img
-    {...props}
+    alt={props.alt}
     role="presentation"
+    {...props}
   />
 );
 
diff --git a/react-dom/DTInput/DefaultInput/index.js b/react-dom/DTInput/DefaultInput/index.js
@@ -0,0 +1,36 @@
+import React, { PropTypes } from 'react';
+import classNames from 'classnames';
+import styles from './styles.css';
+
+/**
+ * Class representing a DefaultInput.
+ * @author julia.sklyar@drivetribe.com
+ */
+
+const DefaultInput = ({ error, valid, disabled, className, ...restProps }) => {
+  const InputClass = classNames({
+    [styles.defaultInput]: true,
+    [styles.error]: error,
+    [styles.valid]: valid,
+    [styles.disabled]: disabled,
+    className,
+  });
+
+  return (
+    <input
+      className={InputClass}
+      {...restProps}
+    />
+  );
+};
+
+DefaultInput.propTypes = {
+  type: PropTypes.string.isRequired,
+  error: PropTypes.boolean,
+  valid: PropTypes.boolean,
+  disabled: PropTypes.boolean,
+  className: PropTypes.string,
+  placeholder: PropTypes.string,
+};
+
+export default DefaultInput;
diff --git a/react-dom/DTInput/DefaultInput/styles.css b/react-dom/DTInput/DefaultInput/styles.css
@@ -1,4 +1,4 @@
-.default {
+.defaultInput {
   padding: 8px 10px;
   border: 1px solid #ccc;
   font-size: 16px;
@@ -7,14 +7,14 @@
   box-sizing: border-box;
 }
 
-.default:focus {
+.defaultInput:focus {
   outline: 0;
   border-color: #129fea;
   box-shadow: 0 0 3px #74bee6;
 }
 
 .error {
-  composes: default;
+  composes: defaultInput;
   border: 1px solid #cb0101;
 }
 
@@ -25,7 +25,7 @@
 }
 
 .valid {
-  composes: default;
+  composes: defaultInput;
   border: 1px solid #05b636;
 }
 
@@ -36,7 +36,7 @@
 }
 
 .disabled {
-  composes: default;
+  composes: defaultInput;
   cursor: not-allowed;
   background-color: #eaeded;
   color: #cad2d3;
diff --git a/react-dom/DTInput/Email/index.js b/react-dom/DTInput/Email/index.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import DefaultInput from '../DefaultInput';
+
+/**
+ * Class representing a DefaultInput.
+ * @author julia.sklyar@drivetribe.com
+ * @extends DefaultInput
+ */
+
+const EmailInput = (props) => (
+  <DefaultInput
+    type="email"
+    placeholder="Email"
+    {...props}
+  />
+);
+
+export default EmailInput;
diff --git a/react-dom/DTInput/EmailInput/index.js b/react-dom/DTInput/EmailInput/index.js
diff --git a/react-dom/DTInput/Input/index.js b/react-dom/DTInput/Input/index.js
diff --git a/react-dom/DTInput/Password/index.js b/react-dom/DTInput/Password/index.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import DefaultInput from '../DefaultInput';
+
+/**
+ * Class representing a DefaultInput.
+ * @author julia.sklyar@drivetribe.com
+ * @extends DefaultInput
+ */
+
+const PasswordInput = (props) => (
+  <DefaultInput
+    type="password"
+    placeholder="Password"
+    {...props}
+  />
+);
+
+export default PasswordInput;
diff --git a/react-dom/DTInput/PasswordInput/index.js b/react-dom/DTInput/PasswordInput/index.js
diff --git a/react-dom/DTInput/Text/index.js b/react-dom/DTInput/Text/index.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import DefaultInput from '../DefaultInput';
+
+/**
+ * Class representing a DefaultInput.
+ * @author julia.sklyar@drivetribe.com
+ * @extends DefaultInput
+ */
+
+const TextInput = (props) => (
+  <DefaultInput type="text" {...props} />
+);
+
+export default TextInput;
diff --git a/react-dom/DTInput/TextInput/index.js b/react-dom/DTInput/TextInput/index.js
diff --git a/react-dom/DTLayout/Column/styles.css b/react-dom/DTLayout/Column/styles.css
@@ -10,7 +10,6 @@
   }
 }
 
-
 @mixin column;
 
 @media (min-width: 568px) {
diff --git a/react-dom/DTView/Container/README.md b/react-dom/DTView/Container/README.md
@@ -0,0 +1,11 @@
+# DTView > Container
+
+A reusable image component, build with ES2015.
+
+## Installation
+
+Install the module directly from npm:
+
+```bash
+npm install @drivetribe/react-dom-container --save
+```
diff --git a/react-dom/DTView/Container/index.js b/react-dom/DTView/Container/index.js
@@ -0,0 +1,36 @@
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+import styles from './styles.css';
+
+/**
+ * Class representing a container.
+ * @author olivier.colonna@drivetribe.com
+ * @extends Component
+ */
+class Container extends Component {
+
+  render() {
+    const { children, vertical, horizontal, className } = this.props;
+    const containerClass = classNames({
+      [styles.container]: true,
+      [styles.containerScrollY]: vertical,
+      [styles.containerScrollX]: horizontal,
+      [className]: className,
+    });
+
+    return (
+      <div className={containerClass}>
+        {children}
+      </div>
+    );
+  }
+}
+
+Container.propTypes = {
+  children: PropTypes.node.isRequired,
+  vertical: PropTypes.boolean,
+  horizontal: PropTypes.boolean,
+  className: PropTypes.string,
+};
+
+export default Container;
diff --git a/react-dom/DTView/Container/styles.css b/react-dom/DTView/Container/styles.css
@@ -0,0 +1,16 @@
+.container {
+  position: relative;
+  width: 100%;
+}
+
+.containerScrollX {
+  overflow-x: scroll;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+}
+
+.containerScrollY {
+  overflow-x: hidden;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+}

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-.default {`
	`1`	`+.defaultInput {`
`2`	`2`	`padding: 8px 10px;`
`3`	`3`	`border: 1px solid #ccc;`
`4`	`4`	`font-size: 16px;`
`@@ -7,14 +7,14 @@`
`7`	`7`	`box-sizing: border-box;`
`8`	`8`	`}`
`9`	`9`
`10`		`-.default:focus {`
	`10`	`+.defaultInput:focus {`
`11`	`11`	`outline: 0;`
`12`	`12`	`border-color: #129fea;`
`13`	`13`	`box-shadow: 0 0 3px #74bee6;`
`14`	`14`	`}`
`15`	`15`
`16`	`16`	`.error {`
`17`		`- composes: default;`
	`17`	`+ composes: defaultInput;`
`18`	`18`	`border: 1px solid #cb0101;`
`19`	`19`	`}`
`20`	`20`
`@@ -25,7 +25,7 @@`
`25`	`25`	`}`
`26`	`26`
`27`	`27`	`.valid {`
`28`		`- composes: default;`
	`28`	`+ composes: defaultInput;`
`29`	`29`	`border: 1px solid #05b636;`
`30`	`30`	`}`
`31`	`31`
`@@ -36,7 +36,7 @@`
`36`	`36`	`}`
`37`	`37`
`38`	`38`	`.disabled {`
`39`		`- composes: default;`
	`39`	`+ composes: defaultInput;`
`40`	`40`	`cursor: not-allowed;`
`41`	`41`	`background-color: #eaeded;`
`42`	`42`	`color: #cad2d3;`