From c79fb643fa0a0e4b4d9b4533d40c2d872bb32a91 Mon Sep 17 00:00:00 2001 From: Shashank Sharma Date: Sat, 23 Apr 2016 22:53:21 +0800 Subject: [PATCH] add bitly command - Support to add validations in Search Widget - Using isResultList to change height of result container - Update limit to 6 from 5 - Bitly api support - Added valid-url dependency to validate URL --- README.md | 1 + package.json | 3 +- src/content/commands/Bitly/Bitly.jsx | 69 +++++++++++++++++++++++++++ src/content/commands/Bitly/bitly.png | Bin 0 -> 1840 bytes src/content/components/Search.jsx | 18 +++++-- src/content/components/Search.scss | 11 +++++ src/content/vendor/jquery.atwho.js | 2 +- 7 files changed, 97 insertions(+), 7 deletions(-) create mode 100644 src/content/commands/Bitly/Bitly.jsx create mode 100644 src/content/commands/Bitly/bitly.png 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 d6cd59e..2404c61 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,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 0000000000000000000000000000000000000000..d5aeb8822d45b3d548435292b33d9821b575cfe7 GIT binary patch literal 1840 zcmY*ac|04~7QPgNQmWRDk|7VJ5>hop#M0POQfolnem21yITi0MSMOa03BA zUIjpfQvACc3IGv&xTg=@$Hf^L5=nvug+>MwV6h~MpaK9?EK=Z-2=pLGEa@DXhK#k; z`jmkb_(B-21^JXhkFeD8adCwlkE9YH$6zKfBQ3Nv1Oh=(L(d}JG4@}|1vg7ABAre_ z!r|x7pNE}43X7zM!Hvz$&EZA}I09iP$S|Za$n>CCLo!YKGs%B=Fa%l%HJm~Zk0e8c zyg|W{(R52KEuqlY^|?=a_}Tv|k!fGX5)23zM&QOUBluTtK`BazB2QAo2?AvyKiU}e zDf9oZFFGi=Q2c+I`8??-R4^)98U_FQY-nj`jxHVm@l#G18&4mp=Y`3RFA3_MJuAfw zU&Psx*3!zR@HIj^dG7=-+oY4t=HRo_-<3xP+56-lhwAiWR6>% zGIlefHey~U;MbZSpa z@R~(at;cyhUTgPgNkM_f?`*cav}QDt$r_7`(=3%j;7ZJ>@{77t({G(fq&CPtDixU@Sf!W;L+?dpF!zI>C z<0M@WT@pBa?mACNNlD{r+x3i-B9-=QwzI6f`1p9a5#+03KseDL$Z$Q&hnU@pPw(U55W!m((tOf zGO@x1w)W1m>?at z=7a2q@>zo}h}UaYFa4|Icg?!w-UJ2vZd|rSmQDrpU-qdfC*J2)m5uIWpVqyCkKJwN@xcuT;w(>OgrCkki+4Sihr7}H=|~$ zWAim#)xe~5B%rLqI3Km7W%zIXRL}%HpEKi}m2F~j^2d$z^z`ri?-u|z{CYb{O;Rid z5moElq3i4J&bzdnT?XCl)!SS&(AWRr0Jbe`vbzJXP0z8ll)mZN;Dk}0gXt7_h z(=JUzQM1@C88<~hLfH4ib{*b>s8*0!Ne1(Ub=d?{?Ty_uSt6Y&Q?(gDy9oA*JNAuKl47`gn?(X60 zGMl{$v)%8U*r{D#?(OaEncJGW87BW>U|@hrlFPJB-b`rIe9?6&rh(MJPzX4lRJ8F| zpo2rF(%3Ig!|JSS8lJvSw$5b|<&c_I=5th5KqZpZvZr)}mAm`VVprnvIJ}$s=JrA1 OXXRvv!`!qDO#2&w9Y7-h literal 0 HcmV?d00001 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,