buttons replaced by navigation icons

alirezafarin · alirezafarin · commit 85bf289ef0e6 · 2020-12-28T14:16:27.000+03:30
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,15 +1,15 @@
 {
 	"name": "saffroncodejs",
-	"version": "1.8.4",
+	"version": "1.9.3",
 	"description": "Package of optimised react components and javascript functions for developers ♫♪",
 	"main": "./lib/SaffronCode.js",
 	"types": "./lib/SaffronCode.d.ts",
 	"directories": {
 		"doc": "doc"
 	},
 	"scripts": {
-    "build": "rmdir lib /s /q && tsc",
-    "copy-files": "cp ./src/ ./dist/",
+		"build": "rmdir lib /s /q && tsc",
+		"copy-files": "cp ./src/ ./dist/",
 		"test": "echo \"Error: no test specified\" && exit 1"
 	},
 	"repository": {
@@ -49,7 +49,10 @@
 		"ReactRouter",
 		"framework",
 		"EventDispatcher",
-		"ActionScript"
+		"ActionScript",
+		"ReactItemSlider",
+		"ReactSlider",
+		"ReactTagInput"
 	],
 	"author": "SaffronCode Co <ebrahimsepehr@gmail.com>",
 	"license": "MIT",
@@ -58,6 +61,9 @@
 	},
 	"homepage": "https://github.com/SaffronCode/SaffronCodeJS#readme",
 	"dependencies": {
+		"@fortawesome/fontawesome-svg-core": "^1.2.32",
+		"@fortawesome/free-solid-svg-icons": "^5.15.1",
+		"@fortawesome/react-fontawesome": "^0.1.14",
 		"@types/react": "^16.14.2",
 		"@types/react-dom": "^16.9.10",
 		"npm": "^6.14.10",
diff --git a/src/ui/ItemsSlider.tsx b/src/ui/ItemsSlider.tsx
@@ -1,11 +1,18 @@
 import React, { Component } from 'react'
-
 import './ItemsSlider.css';
 
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faChevronLeft,
+  faChevronRight
+} from "@fortawesome/free-solid-svg-icons";
 interface ItemSliderProps {
   children: React.ReactNode,
   id: string,
-  rtl: boolean
+  rtl: boolean,
+  top: string,
+  fontSize: string,
+  color: string
 }
 
 export default class ItemsSlider extends Component<ItemSliderProps> {
@@ -139,32 +146,34 @@ export default class ItemsSlider extends Component<ItemSliderProps> {
       position: "relative"
     }
 
+    const top = (this.props.top) ? this.props.top : '39%';
+
     const navButtonsStyle:object = {
       position: "absolute",
       width: "100%",
       display: "flex",
       justifyContent: "space-between",
-      top: "39%",
+      top,
       left: "0"
     }
 
+    const fontSize = (this.props.fontSize) ? this.props.fontSize : '20px';
+
+    const iconsFontSize:object = {
+      fontSize,
+      cursor: 'pointer' 
+    }
+
     return (
       <div>
         <div style={sliderContainer}>
           <div className="saffronJsSlider-13" id={this.props.id}>
+            
             {this.props.children}
+            
             <div style={navButtonsStyle}>
-              <button
-                disabled={this.state.beforeDisable}
-                onClick={(e) => this.scrollTo(e, "before")}
-              >
-                before
-              </button>
-              <button
-                disabled={this.state.nextDisable}
-                onClick={(e) => this.scrollTo(e, "next")}>
-                next
-              </button>
+              <FontAwesomeIcon color={(this.state.beforeDisable) ? '#777777' : this.props.color} style={iconsFontSize} icon={(this.props.rtl) ? faChevronRight : faChevronLeft} onClick={(e) => this.scrollTo(e, "before")} />
+              <FontAwesomeIcon color={(this.state.nextDisable) ? '#777777' : this.props.color} style={iconsFontSize} icon={(this.props.rtl) ? faChevronLeft : faChevronRight} onClick={(e) => this.scrollTo(e, "next")} />
             </div>
           </div>
         </div>
