add bitly command

README.md

@@ -20,6 +20,7 @@ Now, would you like to give it a try?
 
 ## Current commands
 
+* */bitly* - add shorten link 
 * */emoji* - add emoji
 * */giphy* - search and add a GIF
 * */help* - learn how to use Command

package.json

@@ -29,7 +29,8 @@
     "react-native-listener": "^1.0.1",
     "react-spinner": "^0.2.3",
     "react-webcam": "0.0.10",
-    "redux": "^3.3.1"
+    "redux": "^3.3.1",
+    "valid-url": "1.0.9"
   },
   "devDependencies": {
     "archiver": "^0.21.0",

src/content/commands/Bitly/Bitly.jsx

@@ -0,0 +1,69 @@
+import _ from 'lodash'
+import $ from 'jquery'
+import React from 'react'
+import classnames from 'classnames'
+import { mountReactComponent } from 'content/commands/mount'
+
+import * as Types from 'content/types'
+import * as Search from 'content/components/Search'
+import Container from 'content/components/Container'
+var validUrl = require('valid-url');
+
+const API_BASE = 'https://api-ssl.bitly.com/v3/shorten'
+
+let search = (query, options={}, s) => {
+  return $.ajax({
+    url: API_BASE,
+    data: {
+      login: 'o_781236c20b',
+      apiKey: 'R_439a3dbcf1c1492eb6a99b793dac2c42',
+      longUrl: query
+    }
+  }).then((data) => {
+    return [data.data]
+  })
+}
+
+let validate = (query) => {
+  return query=="" || !validUrl.isUri(query)
+}
+
+let BitlyResult = (props) => {
+    return (
+      <div>
+        {props.url}
+      </div>
+    )
+}
+
+class Bitly extends React.Component {
+  onSelect(result) {
+        this.props.onDone(new Types.Link({
+          href: result.url
+      }))
+  }
+
+  render() {
+    return (
+      <Container {...this.props}>
+        <Search.Widget
+          placeholder="Paste a link to shorten it..."
+          onSearch={search}
+          onSelect={this.onSelect.bind(this)}
+          onEsc={this.props.onDone}
+          ResultClass={BitlyResult}
+          columns={0}
+          isResultList={false}
+          validate={validate}
+        />
+      </Container>
+    )
+  }
+}
+Bitly.propTypes = {
+  onDone: React.PropTypes.func.isRequired
+}
+
+export let match = 'bitly'
+export let icon = require('./Bitly.png')
+export let mount = mountReactComponent.bind(null, Bitly)

src/content/components/Search.jsx

@@ -232,7 +232,7 @@ export class Widget extends React.Component {
   }
 
   search(query) {
-    if (query == "") {
+    if (this.props.validate(query)) {
       return this.setState({
         query: query,
         IS_LOADING: false,
@@ -250,8 +250,12 @@ export class Widget extends React.Component {
   }
 
   render() {
-    let classes = classnames(styles.widget, this.props.className, {
-      [styles.isExpanded]: this.state.query != "" || this.props.isExpanded,
+    var widgetClass=styles.widget
+    if(!this.props.isResultList) {
+      widgetClass=styles.widgetWithoutList
+    }
+    let classes = classnames(widgetClass, this.props.className, {
+      [styles.isExpanded]: !this.props.validate(this.state.query) || this.props.isExpanded,
       [styles.hasResults]: this.state.results.length > 0,
       [styles.hasColumns]: this.props.columns
     })
@@ -290,7 +294,9 @@ export class Widget extends React.Component {
 }
 Widget.defaultProps = {
   placeholder: "Search...",
-  columns: 4
+  columns: 4,
+  isResultList: true,
+  validate: (data) => {return data==""}
 }
 Widget.propTypes = {
   results: React.PropTypes.array,
@@ -301,9 +307,11 @@ Widget.propTypes = {
   placeholder: React.PropTypes.string,
   onSearch: React.PropTypes.func.isRequired,
   onSelect: React.PropTypes.func.isRequired,
+  validate: React.PropTypes.func.isRequired,
   onEsc: React.PropTypes.func.isRequired,
   ResultClass: React.PropTypes.oneOfType([
     React.PropTypes.func.isRequired,
     React.PropTypes.element.isRequired,
-  ])
+  ]),
+  isResultList: React.PropTypes.bool
 }

src/content/components/Search.scss

@@ -11,6 +11,17 @@
   }
 }
 
+.widgetWithoutList {
+  height: 70px;
+  transition: height 300ms;
+  &.isExpanded {
+    height: 100px;
+  }
+  &.hasResults .results {
+    opacity: 1;
+  }
+}
+
 input[type="search"].input {
   width: 100%;
   padding: 8px;

src/content/vendor/jquery.atwho.js

@@ -1181,7 +1181,7 @@ $.fn.atwho["default"] = {
   hideWithoutSuffix: false,
   startWithSpace: true,
   highlightFirst: true,
-  limit: 5,
+  limit: 6,
   maxLen: 20,
   minLen: 0,
   displayTimeout: 300,