initial commit

Author: pfrazee

README.md

@@ -0,0 +1,26 @@
+# Selector
+
+Like a radio form-control, but with custom HTML elements
+
+![screenshot.png](screenshot.png)
+
+```jsx
+const opts = [
+  { img: '/img/pic1.jpg', label: 'First Item', value: 1 },
+  { img: '/img/pic2.jpg', label: 'Second Item', value: 2 },
+  { img: '/img/pic3.jpg', label: 'Third Item', value: 3 }
+]
+const onSelect = opt => this.setState({ current: opt.value })
+<Selector options={opts} value={this.state.current} onSelect={onSelect} />
+```
+
+```jsx
+const opts = [
+  { el: <div><strong>First</strong> El</div>, value: 1 },
+  { el: <div><strong>Second</strong> El</div>, value: 2 },
+  { el: <div><strong>Third</strong> El</div>, value: 3 }
+]
+const onSelect = opt => this.setState({ current: opt.value })
+<Selector options={opts} value={this.state.current} onSelect={onSelect} />
+</div>
+```

demo.jsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import Selector from './index'
+
+export default class SelectorDemo extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      current1: 1,
+      current2: 1
+    }
+  }
+  render() {
+    const opts1 = [
+      { img: '/img/pic1.jpg', label: 'First Item', value: 1 },
+      { img: '/img/pic2.jpg', label: 'Second Item', value: 2 },
+      { img: '/img/pic3.jpg', label: 'Third Item', value: 3 }
+    ]
+    const onSelect1 = opt => { this.setState({ current1: opt.value }); console.log('selected', opt) }
+    const opts2 = [
+      { el: <div><strong>First</strong> El</div>, value: 1 },
+      { el: <div><strong>Second</strong> El</div>, value: 2 },
+      { el: <div><strong>Third</strong> El</div>, value: 3 }
+    ]
+    const onSelect2 = opt => { this.setState({ current2: opt.value }); console.log('selected', opt) }
+    return <div>
+      <h1>patchkit-selector</h1>
+      <section className="selector-label-img">
+        <header>&lt;Selector options=[&#123; img:, label:, value: &#125;, ...]&gt;</header>
+        <div className="content">
+          <Selector options={opts1} value={this.state.current1} onSelect={onSelect1} />
+        </div>
+      </section>
+      <section className="selector-el">
+        <header>&lt;Selector options=[&#123; el:, value: &#125;, ...]&gt;</header>
+        <div className="content">
+          <Selector options={opts2} value={this.state.current2} onSelect={onSelect2} />
+        </div>
+      </section>
+    </div>
+  }
+}

index.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import cls from 'classnames'
+
+export default class Selector extends React.Component {
+  render() {
+    return <div className="selector">
+      { this.props.options.map((o, i) => {
+        const onClick = () => this.props.onSelect(o)
+        return <div key={i} className={ cls({ option: true, selected: o.value === this.props.value }) } onClick={onClick}>
+          { o.el }
+          { o.label ? <div>{o.label}</div> : '' }
+          { o.img ? <img src={o.img} /> : '' }
+        </div>
+      }) }
+    </div>
+  }
+}

package.json

@@ -0,0 +1,55 @@
+{
+  "name": "patchkit-selector",
+  "version": "1.0.0",
+  "description": "Like a radio form-control, but with custom HTML elements",
+  "main": "index.jsx",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/patchkit/patchkit-selector.git"
+  },
+  "keywords": [
+    "react"
+  ],
+  "author": "Paul Frazee <[email protected]>",
+  "license": "GPL-3.0",
+  "bugs": {
+    "url": "https://github.com/patchkit/patchkit-selector/issues"
+  },
+  "homepage": "https://github.com/patchkit/patchkit-selector#readme",
+  "dependencies": {
+    "classnames": "^2.2.3",
+    "react": "^0.14.6"
+  },
+  "devDependencies": {
+    "babel": "^6.3.26",
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-react": "^6.3.13",
+    "babel-preset-stage-0": "^6.3.13",
+    "babelify": "^7.2.0",
+    "browserify": "^13.0.0",
+    "less": "^2.5.3"
+  },
+  "browserify": {
+    "transform": [
+      [
+        "envify",
+        {
+          "global": true
+        }
+      ],
+      [
+        "babelify",
+        {
+          "presets": [
+            "es2015",
+            "stage-0",
+            "react"
+          ]
+        }
+      ]
+    ]
+  }
+}

screenshot.png

@@ -0,0 +1,28 @@
+.selector {
+  display: flex;
+  .option {
+    flex: 1;
+    text-align: center;
+    color: gray;
+    cursor: pointer;
+    padding: 10px;
+
+    &:hover {
+      background: #eee;
+    }
+
+    div {
+      margin-bottom: 5px;
+    }
+    img {
+      border-radius: 10px;
+      border: 5px solid transparent;
+    }
+    &.selected {
+      color: #4da1ff;
+      img {
+        border-color: #4da1ff;
+      }
+    }
+  }
+}