From 058245ed19da57d2867090905cebe714e3e29c0f Mon Sep 17 00:00:00 2001
From: Mohammed Yasser <mhmd21.yasser@gmail.com>
Date: Wed, 17 Mar 2021 00:59:48 +0200
Subject: [PATCH 1/3] added clear functionality to icon in input component

---
 src/content/Input/input.playground.jsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/content/Input/input.playground.jsx b/src/content/Input/input.playground.jsx
index d9bec86..4458d3d 100644
--- a/src/content/Input/input.playground.jsx
+++ b/src/content/Input/input.playground.jsx
@@ -1,11 +1,8 @@
 import * as React from "react";
-import { useState } from "react";
-import { View } from "react-native";
 import { Input } from "react-native-elements";
 import Icon from "react-native-vector-icons/dist/MaterialCommunityIcons";
 import Playground from "../../components/playground";
 import { useView, PropTypes } from "react-view";
-
 const InputPlayground = () => {
   const params = useView({
     componentName: "Input",
@@ -22,7 +19,6 @@ const InputPlayground = () => {
         type: PropTypes.Object,
         value: `{background:"#ddd"}`,
       },
-
       inputContainerStyle: {
         type: PropTypes.Object,
         value: `{}`,
@@ -69,7 +65,7 @@ const InputPlayground = () => {
       },
       rightIcon: {
         type: PropTypes.ReactNode,
-        value: `<Icon name="close" size={20}/>`,
+        value: `<Icon name="close" size={20} onPress={() => this.clearButton.clear()}/>`,
       },
       rightIconContainerStyle: {
         type: PropTypes.Object,
@@ -88,6 +84,11 @@ const InputPlayground = () => {
         type: PropTypes.String,
         value: "Enter Name",
       },
+      ref: {
+        type: PropTypes.Object,
+        value: "(input) =>  {this.clearButton = input}",
+        hidden: true,
+      },
     },
     scope: {
       Input,

From 15b2f5bcc30cf4b01f024e75956228b0bbda521b Mon Sep 17 00:00:00 2001
From: Mohammed Yasser <mhmd21.yasser@gmail.com>
Date: Sat, 20 Mar 2021 00:59:20 +0200
Subject: [PATCH 2/3] changed ref implementation to use state hooks

---
 src/content/Input/input.playground.jsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/content/Input/input.playground.jsx b/src/content/Input/input.playground.jsx
index 4458d3d..b0063cd 100644
--- a/src/content/Input/input.playground.jsx
+++ b/src/content/Input/input.playground.jsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React, { useRef } from "react";
 import { Input } from "react-native-elements";
 import Icon from "react-native-vector-icons/dist/MaterialCommunityIcons";
 import Playground from "../../components/playground";
@@ -7,6 +7,12 @@ const InputPlayground = () => {
   const params = useView({
     componentName: "Input",
     props: {
+      ref: {
+        type: PropTypes.Object,
+        value: "React.createRef()",
+        hidden: true,
+        stateful: true,
+      },
       containerStyle: {
         type: PropTypes.Object,
         value: `{}`,
@@ -65,7 +71,7 @@ const InputPlayground = () => {
       },
       rightIcon: {
         type: PropTypes.ReactNode,
-        value: `<Icon name="close" size={20} onPress={() => this.clearButton.clear()}/>`,
+        value: `<Icon name="close" size={20} onPress={() => ref.current.clear()}/>`,
       },
       rightIconContainerStyle: {
         type: PropTypes.Object,
@@ -84,11 +90,6 @@ const InputPlayground = () => {
         type: PropTypes.String,
         value: "Enter Name",
       },
-      ref: {
-        type: PropTypes.Object,
-        value: "(input) =>  {this.clearButton = input}",
-        hidden: true,
-      },
     },
     scope: {
       Input,

From 0c4414690a17d61adbda79ad96bc280dcc345efa Mon Sep 17 00:00:00 2001
From: Mohammed Yasser <mhmd21.yasser@gmail.com>
Date: Wed, 24 Mar 2021 14:05:40 +0200
Subject: [PATCH 3/3] updated repo

---
 src/content/Input/input.playground.jsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/content/Input/input.playground.jsx b/src/content/Input/input.playground.jsx
index d9bec86..7b8f269 100644
--- a/src/content/Input/input.playground.jsx
+++ b/src/content/Input/input.playground.jsx
@@ -1,15 +1,18 @@
-import * as React from "react";
-import { useState } from "react";
-import { View } from "react-native";
+import React from "react";
 import { Input } from "react-native-elements";
 import Icon from "react-native-vector-icons/dist/MaterialCommunityIcons";
 import Playground from "../../components/playground";
 import { useView, PropTypes } from "react-view";
-
 const InputPlayground = () => {
   const params = useView({
     componentName: "Input",
     props: {
+      ref: {
+        type: PropTypes.Object,
+        value: "React.createRef()",
+        hidden: true,
+        stateful: true,
+      },
       containerStyle: {
         type: PropTypes.Object,
         value: `{}`,
@@ -22,7 +25,6 @@ const InputPlayground = () => {
         type: PropTypes.Object,
         value: `{background:"#ddd"}`,
       },
-
       inputContainerStyle: {
         type: PropTypes.Object,
         value: `{}`,
@@ -69,7 +71,7 @@ const InputPlayground = () => {
       },
       rightIcon: {
         type: PropTypes.ReactNode,
-        value: `<Icon name="close" size={20}/>`,
+        value: `<Icon name="close" size={20} onPress={() => ref.current.clear()}/>`,
       },
       rightIconContainerStyle: {
         type: PropTypes.Object,