Added react-tagcloud

2026-09-09 11:13:57 +08:00 · 2016-04-08 14:21:58 +08:00
parent 9fd33e689d
commit ea13c76918
4 changed files with 398 additions and 47 deletions
@@ -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>;
    }

@@ -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;
    }

 }
@@ -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")
+);
@@ -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
+}