diff --git a/README.md b/README.md index e79d8d7..81aa2f4 100644 --- a/README.md +++ b/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 diff --git a/package.json b/package.json index 52b0097..07cb8f9 100644 --- a/package.json +++ b/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", diff --git a/src/content/commands/Bitly/Bitly.jsx b/src/content/commands/Bitly/Bitly.jsx new file mode 100644 index 0000000..e25a96f --- /dev/null +++ b/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 ( +
+ {props.url} +
+ ) +} + +class Bitly extends React.Component { + onSelect(result) { + this.props.onDone(new Types.Link({ + href: result.url + })) + } + + render() { + return ( + + + + ) + } +} +Bitly.propTypes = { + onDone: React.PropTypes.func.isRequired +} + +export let match = 'bitly' +export let icon = require('./Bitly.png') +export let mount = mountReactComponent.bind(null, Bitly) diff --git a/src/content/commands/Bitly/bitly.png b/src/content/commands/Bitly/bitly.png new file mode 100644 index 0000000..d5aeb88 Binary files /dev/null and b/src/content/commands/Bitly/bitly.png differ diff --git a/src/content/components/Search.jsx b/src/content/components/Search.jsx index 937de76..f331294 100644 --- a/src/content/components/Search.jsx +++ b/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 } diff --git a/src/content/components/Search.scss b/src/content/components/Search.scss index e1ff933..55d8935 100644 --- a/src/content/components/Search.scss +++ b/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; diff --git a/src/content/vendor/jquery.atwho.js b/src/content/vendor/jquery.atwho.js index f0f60d0..a578f76 100644 --- a/src/content/vendor/jquery.atwho.js +++ b/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,