fix typescript support in examples

MostafaRostami72 · Oct 31, 2021 · c7d19e4 · c7d19e4
1 parent a67f4cf
commit c7d19e4
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -7,6 +7,7 @@
 ## Full Document and Demo
 -   [Document And Demo](https://mostafarostami72.github.io/react-selection-box/)
 
+### ** Supports typescript **
 
 ## Install
 

diff --git a/example/src/App.js b/example/src/App.js
@@ -14,6 +14,7 @@ import "nprogress/nprogress.css";
 const Home = lazy(() => import('./pages/home'));
 const BasicUsage = lazy(() => import('./pages/basic_usage'));
 const Examples = lazy(() => import('./pages/examples'));
+const TypescriptPage = lazy(() => import('./pages/typescript'));
 const PropsPage = lazy(() => import('./pages/props'));
 const Styles = lazy(() => import('./pages/styles'));
 
@@ -69,6 +70,7 @@ const App = () => {
                                         <Switch>
                                             <Route path="/react-selection-box/basic_usage" exact component={BasicUsage}/>
                                             <Route path="/react-selection-box/examples" exact component={Examples}/>
+                                            <Route path="/react-selection-box/typescript" exact component={TypescriptPage}/>
                                             <Route path="/react-selection-box/props" exact component={PropsPage}/>
                                             <Route path="/react-selection-box/styles" exact component={Styles}/>
                                             <Route path="/react-selection-box/" component={Home}/>

diff --git a/example/src/components/includes/sidebar.js b/example/src/components/includes/sidebar.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import {Link} from "react-router-dom";
 import {useLocation} from "react-router-dom";
-import {DocumentTextIcon, ChevronRightIcon, CubeIcon, CursorClickIcon, KeyIcon, PhotographIcon} from '@heroicons/react/outline'
+import {DocumentTextIcon, ChevronRightIcon, CubeIcon, CursorClickIcon, KeyIcon, PhotographIcon, BeakerIcon} from '@heroicons/react/outline'
 
 const Sidebar = () => {
     const location = useLocation();
@@ -27,6 +27,12 @@ const Sidebar = () => {
             active: (pathname === '/react-selection-box/examples'),
             icon: DocumentTextIcon
         },
+        {
+            link: '/react-selection-box/typescript',
+            title: 'Typescript',
+            active: (pathname === '/react-selection-box/typescript'),
+            icon: BeakerIcon
+        },
         {
             link: '/react-selection-box/props',
             title: 'Props',

diff --git a/example/src/pages/typescript.js b/example/src/pages/typescript.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import Code from "../components/code";
+
+const TypescriptPage = () => {
+    return (
+        <div className="my-3">
+            <h2 className="">Supports typescript</h2>
+            <p className="">
+                You can use <span className="bg-info px-1 font-weight-500">react-selection-box</span> in your typescript projects
+            </p>
+
+            <Code className="mt-3">
+                {
+                    `
+import Selection, {
+    IReactSelectionBoxProps,
+    ITypes,
+    IOptions,
+    IDefaultSelectedRange,
+    ITranslates
+} from 'react-selection-box';
+import 'react-selection-box/dist/index.css'
+`
+                }
+            </Code>
+        </div>
+    );
+};
+
+export default React.memo(TypescriptPage);
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-selection-box",
-  "version": "1.0.2",
+  "version": "1.1.3",
   "description": "A beautiful and responsive Select Input control for ReactJS with singleselect, multiselect, rangeselect and autocomplete (async) support.",
   "author": "MostafaRostami72",
   "license": "MIT",

diff --git a/react-selection-box.d.ts b/react-selection-box.d.ts
@@ -1,24 +1,24 @@
 import * as React from 'react';
 
-type ITypes = 'single' | 'multiple' | 'range'
+export type ITypes = 'single' | 'multiple' | 'range'
 
-interface IOptions {
+export interface IOptions {
     value: number | string
     label: number | string
     checked: boolean
 }
 
-interface IValueAnsLabelShape {
+interface IValueAndLabelShape {
     value: number | string
     label: number | string
 }
 
-interface IDefaultSelectedRange {
-    min?: IValueAnsLabelShape,
-    max?: IValueAnsLabelShape
+export interface IDefaultSelectedRange {
+    min?: IValueAndLabelShape,
+    max?: IValueAndLabelShape
 }
 
-interface ITranslates {
+export interface ITranslates {
     label?: {
         from: string,
         to: string