Fully working giphy selector

Author: tshaddix

example/bundle.js

@@ -0,0 +1,39 @@
+.customQueryFormSubmit {
+	background: #0097cf;
+	color: #fff;
+	border: 0;
+	padding: 10px 20px;
+	font-size: 16px;
+	font-weight: bold;
+}
+
+.customQueryFormInput {
+	padding-left: 10px;
+	padding-right: 10px;
+	border: 1px solid #e0e0e0;
+	border-right: 0;
+	box-shadow: none;
+}
+
+.customSearchResults {
+	max-height: 400px;
+	margin-top: 10px;
+	margin-bottom: 10px;
+}
+
+/********************************
+CSS classes for example fake modal
+********************************/
+
+body {
+	background: #333;
+	font-family: sans-serif;
+}
+
+.modal {
+	max-width: 600px;
+	margin: 60px auto;
+	background: #fff;
+	padding: 20px;
+	border-bottom: 5px solid #111;
+}

example/bundle.js.map

@@ -0,0 +1,97 @@
+import { Selector, Rating } from "../../lib";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+
+const customStyle = require("./example.css");
+
+// feel free to change these :)
+const suggestions = [
+  "watching",
+  "quiz",
+  "stop it",
+  "nice one",
+  "learning",
+  "reading",
+  "working"
+];
+
+interface IExampleProps {
+  suggestions: string[];
+}
+
+interface IExampleState {
+  apiKey: string;
+  isKeySubmitted: boolean;
+}
+
+class ExampleApp extends React.Component<IExampleProps, IExampleState> {
+  state: IExampleState;
+
+  constructor(props: IExampleProps) {
+    super(props);
+
+    this.state = {
+      apiKey: "",
+      isKeySubmitted: false
+    };
+
+    this.onKeyChange = this.onKeyChange.bind(this);
+    this.onKeySubmit = this.onKeySubmit.bind(this);
+    this.onGifSelected = this.onGifSelected.bind(this);
+  }
+
+  public onKeyChange(event: any): void {
+    this.setState({ apiKey: event.target.value });
+  }
+
+  public onKeySubmit(event: any): void {
+    event.preventDefault();
+
+    this.setState({
+      isKeySubmitted: true
+    });
+  }
+
+  public onGifSelected(gifObject: any): void {
+    alert(`You selected a gif! id: ${gifObject.id}`);
+  }
+
+  public render(): JSX.Element {
+    const { apiKey, isKeySubmitted } = this.state;
+    const { suggestions } = this.props;
+
+    if (!isKeySubmitted) {
+      return (
+        <form onSubmit={this.onKeySubmit}>
+          <input
+            type="text"
+            placeholder="Enter your Giphy API Key"
+            value={apiKey}
+            onChange={this.onKeyChange}
+          />
+          <button type="submit">Set API Key</button>
+        </form>
+      );
+    }
+
+    return (
+      <div className={customStyle.modal}>
+        <Selector
+          apiKey={apiKey}
+          suggestions={suggestions}
+          onGifSelected={this.onGifSelected}
+          rating={Rating.G}
+          queryFormInputClassName={customStyle.customQueryFormInput}
+          queryFormSubmitClassName={customStyle.customQueryFormSubmit}
+          searchResultsClassName={customStyle.customSearchResults}
+          searchResultClassName={customStyle.customSearchResult}
+        />
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(
+  <ExampleApp suggestions={suggestions} />,
+  document.getElementById("example")
+);

example/example.tsx

@@ -1,5 +1,5 @@
 module.exports = {
-  entry: "./example/example.tsx",
+  entry: "./example/src/example.tsx",
   output: {
     filename: "bundle.js",
     path: __dirname
@@ -19,7 +19,12 @@ module.exports = {
       { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
 
       // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
-      { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
+      { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
+      
+      {
+        test: /\.css$/,
+        loader: ["style-loader", "css-loader?sourceMap&modules"]
+      }
     ]
   }
 };