From ea13c769186e20f6ca9f8333ea6b8961b32f8821 Mon Sep 17 00:00:00 2001
From: wassname <wassname@wassname.org>
Date: Fri, 8 Apr 2016 14:21:58 +0800
Subject: [PATCH] Added react-tagcloud

---
 react-select/react-select-tests.tsx     | 163 ++++++++++++++++++------
 react-select/react-select.d.ts          | 139 ++++++++++++++++++--
 react-tagcloud/react-tagcloud-tests.tsx | 102 +++++++++++++++
 react-tagcloud/react-tagcloud.d.ts      |  41 ++++++
 4 files changed, 398 insertions(+), 47 deletions(-)
 create mode 100644 react-tagcloud/react-tagcloud-tests.tsx
 create mode 100644 react-tagcloud/react-tagcloud.d.ts

diff --git a/react-select/react-select-tests.tsx b/react-select/react-select-tests.tsx
index cc2cc7376..e42fde53b 100644
--- a/react-select/react-select-tests.tsx
+++ b/react-select/react-select-tests.tsx
@@ -7,32 +7,79 @@ import * as ReactDOM from "react-dom";
 
 import * as Select from "react-select";
 
-import * as React from "react";
-import * as ReactDOM from "react-dom";
-
-import * as Select from "react-select";
+// some example values
+const options = [{ label: "Bar", value: "bar" }];
+const value = [{ label: "Foo", value: "foo", clearableValue: false }];
+const func: any = (newValue: any, event: any) => { return; };
+const filterOption = (options: ReactSelect.Option, filter: string) => options;
+const filterOptions = (options: ReactSelect.Option[], filter: string, currentValues: (string | number)[]) => options;
+const newOptionCreator = (input: string) => ({ label: input, value: input });
+const loadOptions = (input: string, callback: (options: any[]) => {}) => { };
 
 class SelectTest extends React.Component<React.Props<{}>, {}> {
 
     render() {
-        const options: ReactSelect.Option[] = [{ label: "Foo", value: "bar" }];
-        const onChange = (value: any) => console.log(value);
         return <div>
             <Select
-                name="test-select"
-                className="test-select"
-                key="1"
+                addLabelText={"string"}
+                allowCreate={false}
+                autoBlur={false}
+                autofocus={false}
+                autosize={false}
+                backspaceRemoves={false}
+                className={"string"}
+                clearAllText={"stringOrNode"}
+                clearValueText={"stringOrNode"}
+                clearable={false}
+                delimiter={"string"}
+                disabled={false}
+                escapeClearsValue={false}
+                filterOption={filterOption}
+                filterOptions={filterOptions}
+                ignoreAccents={false}
+                ignoreCase={false}
+                inputProps={{}}
+                isLoading={false}
+                joinValues={false}
+                labelKey={"string"}
+                loadOptions={loadOptions}
+                matchPos={"string"}
+                matchProp={"string"}
+                menuBuffer={1}
+                menuContainerStyle={{}}
+                menuRenderer={func}
+                menuStyle={{}}
+                multi={false}
+                name={"string"}
+                newOptionCreator={newOptionCreator}
+                noResultsText={"stringOrNode"}
+                onBlur={func}
+                onBlurResetsInput={false}
+                onChange={func}
+                onClose={func}
+                onFocus={func}
+                onInputChange={func}
+                onMenuScrollToBottom={func}
+                onOpen={func}
+                onValueClick={func}
+                openAfterFocus={false}
+                optionClassName={"string"}
+                optionComponent={func}
+                optionRenderer={func}
                 options={options}
-                matchPos={"any"}
-                matchProp={"any"}
-                multi={true}
-                onValueClick={onChange}
-                valueKey="github"
-                labelKey="name"
-                onChange={onChange}
-                simpleValue
+                placeholder={"stringOrNode"}
+                required={false}
+                scrollMenuIntoView={false}
+                searchable={false}
+                simpleValue={false}
+                style={{}}
+                tabIndex={"string"}
                 value={options}
-                 />
+                valueComponent={func}
+                valueKey={"string"}
+                valueRenderer={func}
+                wrapperStyle={{}}
+                />
         </div>;
     }
 }
@@ -40,29 +87,69 @@ class SelectTest extends React.Component<React.Props<{}>, {}> {
 class SelectAsyncTest extends React.Component<React.Props<{}>, {}> {
 
     render() {
-        const getOptions = (input: string, callback: Function) => {
-            setTimeout(function() {
-                callback(null, options);
-            }, 500);
-        };
-        const options: ReactSelect.Option[] = [{ label: "Foo", value: "bar" }];
-        const onChange = (value: any) => console.log(value);
         return <div>
             <Select.Async
-                name="test-select"
-                className="test-select"
-                key="1"
-                matchPos={"any"}
-                matchProp={"any"}
-                multi={true}
-                onValueClick={onChange}
-                valueKey="github"
-                labelKey="name"
-                onChange={onChange}
-                simpleValue
+                addLabelText={"string"}
+                allowCreate={false}
+                autoBlur={false}
+                autofocus={false}
+                autosize={false}
+                backspaceRemoves={false}
+                className={"string"}
+                clearAllText={"stringOrNode"}
+                clearValueText={"stringOrNode"}
+                clearable={false}
+                delimiter={"string"}
+                disabled={false}
+                escapeClearsValue={false}
+                filterOption={filterOption}
+                filterOptions={filterOptions}
+                ignoreCase={false}
+                inputProps={{}}
+                isLoading={false}
+                joinValues={false}
+                labelKey={"string"}
+                matchPos={"string"}
+                matchProp={"string"}
+                menuBuffer={1}
+                menuContainerStyle={{}}
+                menuRenderer={func}
+                menuStyle={{}}
+                multi={false}
+                name={"string"}
+                newOptionCreator={newOptionCreator}
+                noResultsText={"stringOrNode"}
+                onBlur={func}
+                onBlurResetsInput={false}
+                onChange={func}
+                onClose={func}
+                onFocus={func}
+                onInputChange={func}
+                onMenuScrollToBottom={func}
+                onOpen={func}
+                onValueClick={func}
+                openAfterFocus={false}
+                optionClassName={"string"}
+                optionComponent={func}
+                optionRenderer={func}
+                options={options}
+                placeholder={"stringOrNode"}
+                required={false}
+                scrollMenuIntoView={false}
+                searchable={false}
+                simpleValue={false}
+                style={{}}
+                tabIndex={"string"}
                 value={options}
-                loadOptions={getOptions}
-            />
+                valueComponent={func}
+                valueKey={"string"}
+                valueRenderer={func}
+                wrapperStyle={{}}
+                cache={{}}
+                loadOptions={loadOptions}
+                ignoreAccents={false}
+                loadingPlaceholder={"string"}
+                />
         </div>;
     }
 
diff --git a/react-select/react-select.d.ts b/react-select/react-select.d.ts
index 3414b4472..afaf75325 100644
--- a/react-select/react-select.d.ts
+++ b/react-select/react-select.d.ts
@@ -6,6 +6,9 @@
 /// <reference path="../react/react.d.ts"/>
 
 declare namespace ReactSelect {
+
+    type stringOrNode = string | __React.ReactNode
+
     interface Option {
         /** Text for rendering */
         label: string;
@@ -63,12 +66,12 @@ declare namespace ReactSelect {
          * title for the "clear" control when `multi` is true
          * @default "Clear all"
          */
-        clearAllText?: string;
+        clearAllText?: stringOrNode;
         /**
          * title for the "clear" control
          * @default "Clear value"
          */
-        clearValueText?: string;
+        clearValueText?: stringOrNode;
         /**
          * delimiter to use to join multiple values
          * @default ","
@@ -145,7 +148,7 @@ declare namespace ReactSelect {
          * placeholder displayed when there are no matching search results or a falsy value to hide it
          * @default "No results found"
          */
-        noResultsText?: string;
+        noResultsText?: stringOrNode;
         onBlur?: __React.FocusEventHandler;
         /**
          * whether to clear input on blur or not
@@ -169,7 +172,7 @@ declare namespace ReactSelect {
          * field placeholder, displayed when there's no value
          * @default "Select..."
          */
-        placeholder?: string;
+        placeholder?: stringOrNode;
         /**
          * whether to enable searching feature or not
          * @default true;
@@ -199,22 +202,140 @@ declare namespace ReactSelect {
          * @default false
          */
         valueRenderer?: () => void;
+
+        // autofocus the component on mount
+        autofocus?: boolean;
+
+        // whether to enable autosizing or not
+        autosize?: boolean;
+
+        // whether escape clears the value when the menu is closed
+        escapeClearsValue?: boolean;
+
+        // whether to strip diacritics when filtering
+        ignoreAccents?: boolean;
+
+        // joins multiple values into a single form field with the delimiter (legacy mode)
+        joinValues?: boolean;
+
+        // optional style to apply to the menu container
+        menuContainerStyle?: any;
+
+        // renders a custom menu with options
+        menuRenderer?: Function;
+
+        // optional style to apply to the menu
+        menuStyle?: any;
+
+        // fires when the menu is closed
+        onClose?: Function;
+
+        // fires when the menu is scrolled to the bottom; can be used to paginate options
+        onMenuScrollToBottom?: Function;
+
+        // fires when the menu is opened
+        onOpen?: Function;
+
+        // onClick handler for value labels: function (value, event) {}
+        onValueClick?: Function;
+
+        // boolean to enable opening dropdown when focused
+        openAfterFocus?: boolean;
+
+        // additional class(es) to apply to the <Option /> elements
+        optionClassName?: string;
+
+        // option component to render in dropdown
+        optionComponent?: Function;
+
+        // applies HTML5 required attribute when needed
+        required?: boolean;
+
+        // boolean to enable the viewport to shift so that the full menu fully visible when engaged
+        scrollMenuIntoView?: boolean;
+
+        // pass the value to onChange as a simple value (legacy pre 1.0 mode), defaults to false
+        simpleValue?: boolean;
+
+        // optional style to apply to the control
+        style?: any;
+
+        // optional tab index of the control
+        tabIndex?: string;
+
+        // value component to render
+        valueComponent?: Function;
+
+        // optional style to apply to the component wrapper
+        wrapperStyle?: any;
     }
 
-    interface ReactAsyncSelectProps extends __React.Props<ReactSelect> {
+    interface ReactAsyncSelectProps extends ReactSelectProps {
+
+        /**
+         *  object to use to cache results; can be null to disable cache
+        **/
         cache?: any;
-        loadOptions?: () => void;
+
+        /**
+         *  whether to strip diacritics when filtering (shared with Select)
+        **/
         ignoreAccents?: boolean;
+
+        /**
+         *  whether to perform case-insensitive filtering (shared with Select)
+        **/
+        ignoreCase?: boolean;
+
+        /**
+         *  overrides the isLoading state when set to true
+        **/
         isLoading?: boolean;
+
+        /**
+         *  function to call to load options asynchronously
+        **/
+        loadOptions: (input: string, callback: (options: Option[]) => any) => any;
+
+        /**
+         *  replaces the placeholder while options are loading
+        **/
         loadingPlaceholder?: string;
+
+        /**
+         *  the minimum number of characters that trigger loadOptions
+        **/
+        minimumInput?: number;
+
+        /**
+         *  placeholder displayed when there are no matching search results (shared with Select)
+        **/
+        noResultsText?: string;
+
+        /**
+         *  field placeholder; displayed when there's no value (shared with Select)
+        **/
+        placeholder?: stringOrNode;
+
+        /**
+         *  label to prompt for search input
+        **/
+        searchPromptText?: string;
+
+        /**
+         *  message to display while options are loading
+        **/
+        searchingText?: string;
+    }
+
+    interface ReactSelectAsyncClass extends __React.ComponentClass<ReactAsyncSelectProps> {
     }
 
     interface ReactSelect extends  __React.ReactElement<ReactSelectProps> { }
-    interface ReactSelectAsyncClass extends __React.ComponentClass<ReactAsyncSelectProps> {
-    }
-    const Async: ReactSelectAsyncClass;
+
     interface ReactSelectClass extends __React.ComponentClass<ReactSelectProps> {
         Async: ReactSelectAsyncClass;
+        Option: Option;
     }
 
 }
diff --git a/react-tagcloud/react-tagcloud-tests.tsx b/react-tagcloud/react-tagcloud-tests.tsx
new file mode 100644
index 000000000..76a032867
--- /dev/null
+++ b/react-tagcloud/react-tagcloud-tests.tsx
@@ -0,0 +1,102 @@
+/// <reference path="../react/react.d.ts" />
+/// <reference path="../react/react-dom.d.ts" />
+/// <reference path="./react-tagcloud.d.ts" />
+
+
+// simple cloud
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import {TagCloud, DefaultRenderer} from "react-tagcloud";
+
+let data = [
+    { value: "jQuery", count: 25 }, { value: "MongoDB", count: 18 },
+    { value: "JavaScript", count: 38 }, { value: "React", count: 30 },
+    { value: "Nodejs", count: 28 }, { value: "Express.js", count: 25 },
+    { value: "HTML5", count: 33 }, { value: "CSS3", count: 20 }
+];
+
+ReactDOM.render(
+    // minSize, maxSize - font size in px
+    // tags - array of objects with properties value and count
+    // shuffle - indicates if data should be shuffled (true by default)
+    // onClick event handler has `tag` and `event` parameter
+    <TagCloud minSize={12}
+              maxSize={35}
+              tags={data}
+              shuffle={false}
+              onClick={(tag:string) => console.log("clicking on tag:", tag)} />,
+    document.getElementById("simple-cloud")
+);
+
+
+
+// default-renderer
+
+// DefaultRenderer creates default renderer implementation with custom options
+// usage of tagRenderer option is described in ./custom-tag-renderer.js
+
+// custom props will be applied on each tag component
+const props = {
+    style: {border: "1px solid silver", padding: "5px"},
+    className: "my-tag-class"
+};
+
+// custom random color options
+// see randomColor package: https://github.com/davidmerfield/randomColor
+const colorOptions = {
+    luminosity: "light",
+    hue: "blue"
+};
+
+let customizedDefaultRenderer = new DefaultRenderer({ props, colorOptions });
+
+ReactDOM.render(
+    <TagCloud minSize={12}
+              maxSize={35}
+              tags={data}
+              renderer={customizedDefaultRenderer} />,
+    document.getElementById("default-renderer")
+);
+//
+// custom-renderer.js
+// using custom renderer the default renderer will be overriden
+
+// custom renderer is function which takes tag, computed font size and
+// elemnt key as arguments, and returns react component
+let customRenderer2 = (tag: any, size: number, key: string|number) => {
+    return <span key={key} className={`tag-${size}`}>{tag.value}</span>;
+};
+
+ReactDOM.render(
+    <TagCloud tags={data}
+              minSize={1}
+              maxSize={5}
+              renderer={customRenderer2} />,
+    document.getElementById("custom-renderer")
+);
+
+
+// example from custom-tag-renderer.js
+let data2 = [
+    { value: { name: "google", link: "http://google.com" }, count: 25 },
+    { value: { name: "yahoo", link: "http://yahoo.com" }, count: 18 },
+    { value: { name: "facebook", link: "http://facebook.com" }, count: 38 },
+    { value: { name: "twitter", link: "http://twitter.com" }, count: 30 },
+    { value: { name: "github", link: "http://github.com" }, count: 28 },
+    { value: { name: "npmjs", link: "http://npmjs.com" }, count: 25 },
+    { value: { name: "stackoverflow", link: "http://stackoverflow.com" }, count: 33 }
+];
+
+// with tagRenderer option it is possible to customize rendering of each tag
+// tagRender is a function which takes tag as argument and returns react component or simple string
+const tagRenderer = (tag: any) => (<a href={tag.value.link}>{tag.value.name}</a>);
+
+const customizedDefaultRenderer4 = new DefaultRenderer({ tagRenderer });
+
+ReactDOM.render(
+    <TagCloud minSize={12}
+              maxSize={35}
+              tags={data2}
+              renderer={customizedDefaultRenderer4} />,
+    document.getElementById("custom-tag-renderer")
+);
diff --git a/react-tagcloud/react-tagcloud.d.ts b/react-tagcloud/react-tagcloud.d.ts
new file mode 100644
index 000000000..1c4c50dd7
--- /dev/null
+++ b/react-tagcloud/react-tagcloud.d.ts
@@ -0,0 +1,41 @@
+// Type definitions for react-tagcloud v0.4.0
+// Project: https://github.com/madox2/react-tagcloud
+// Definitions by: wassname <wassname@wassname.org>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+declare namespace ReactTagCloud {
+    interface TagCloudProps extends __React.Props<void> {
+        tags: any[]
+        maxSize: number,
+        minSize: number,
+        shuffle?: boolean,
+        renderer?: Function,
+        className?: string
+        onClick?: Function
+    }
+    interface TagCloudClass extends __React.ComponentClass<TagCloudProps> {}
+
+    interface DefaultRendererFactoryOptions {
+        tagRenderer?: Function
+        colorOptions?: any
+        props?: any
+    }
+    interface RendererFunction {
+         (tag:any, size:number, key:string|number, handlers:any):any
+    }
+    interface DefaultRendererFactory {
+        new(_ref?: DefaultRendererFactoryOptions): RendererFunction;
+        (_ref?: DefaultRendererFactoryOptions): RendererFunction
+    }
+}
+
+
+// export = TagCloud
+declare module reactTagCloud {
+    var TagCloud: ReactTagCloud.TagCloudClass;
+    var DefaultRenderer: ReactTagCloud.DefaultRendererFactory;
+}
+
+declare module "react-tagcloud" {
+    export = reactTagCloud
+}