From 6ac97295c3021da696916f481c86fa99b3a28230 Mon Sep 17 00:00:00 2001 From: Lucas Murta Date: Fri, 30 Dec 2022 10:09:06 -0300 Subject: [PATCH 1/3] feat(input): add and test input component --- src/components/input/event/bdsChange.js | 132 ++++++++++++++++++ src/components/input/event/bdsFocus.js | 132 ++++++++++++++++++ src/components/input/event/bdsInput.js | 132 ++++++++++++++++++ .../input/event/bdsKeyDownBackspace.js | 132 ++++++++++++++++++ src/components/input/event/bdsOnBlur.js | 132 ++++++++++++++++++ .../input/event/bdsPatterValidation.js | 132 ++++++++++++++++++ src/components/input/event/bdsSubmit.js | 132 ++++++++++++++++++ src/components/input/input.js | 84 +++++++++++ src/components/input/method/clear.js | 119 ++++++++++++++++ .../input/method/getInputElement.js | 119 ++++++++++++++++ src/components/input/method/isValid.js | 119 ++++++++++++++++ src/components/input/method/removeFocus.js | 119 ++++++++++++++++ src/components/input/method/setFocus.js | 119 ++++++++++++++++ .../input/structures/counterInput.js | 55 ++++++++ .../input/structures/dangerInput.js | 55 ++++++++ .../input/structures/defaultInput.js | 46 ++++++ .../input/structures/disabledInput.js | 57 ++++++++ .../input/structures/inputTextarea.js | 57 ++++++++ src/pages/componentList.js | 6 +- src/routes.js | 6 +- 20 files changed, 1880 insertions(+), 5 deletions(-) create mode 100644 src/components/input/event/bdsChange.js create mode 100644 src/components/input/event/bdsFocus.js create mode 100644 src/components/input/event/bdsInput.js create mode 100644 src/components/input/event/bdsKeyDownBackspace.js create mode 100644 src/components/input/event/bdsOnBlur.js create mode 100644 src/components/input/event/bdsPatterValidation.js create mode 100644 src/components/input/event/bdsSubmit.js create mode 100644 src/components/input/input.js create mode 100644 src/components/input/method/clear.js create mode 100644 src/components/input/method/getInputElement.js create mode 100644 src/components/input/method/isValid.js create mode 100644 src/components/input/method/removeFocus.js create mode 100644 src/components/input/method/setFocus.js create mode 100644 src/components/input/structures/counterInput.js create mode 100644 src/components/input/structures/dangerInput.js create mode 100644 src/components/input/structures/defaultInput.js create mode 100644 src/components/input/structures/disabledInput.js create mode 100644 src/components/input/structures/inputTextarea.js diff --git a/src/components/input/event/bdsChange.js b/src/components/input/event/bdsChange.js new file mode 100644 index 0000000..8a17f7b --- /dev/null +++ b/src/components/input/event/bdsChange.js @@ -0,0 +1,132 @@ +import React, { useRef, useEffect, useState } from "react"; +import {motion} from 'framer-motion'; + +export default function BdsChange() { + + // Put here the event function + + const elementRf = useRef(null); + const [result, setResult] = useState(''); + + const eventReturn = (event) => { + setResult(event.detail.value) + } + + useEffect(() => { + const elementRef = elementRf.current; + elementRef.addEventListener('bdsChange', (event) => { + eventReturn(event); + }); + return () => { + elementRef.removeEventListener('bdsChange', (event) => { + eventReturn(event); + }); + }; + }, [elementRf]); + + return ( + + + + + {/* Put here the event name */} + BdsChange + +
+ + + + + + The component using the event + + + {/* */} + + {result ? ( + + + + {`This text appeared as a result of the bdsChange "${result}"`} + + + + ) : ''} + + + + + + The component code using the event + + + + + + 
+                        {
+                          ``
+                        }
+
+ + + + + + + + The function + + + + + 
+                        {`const elementRf = useRef(null);
+const [result, setResult] = useState('');
+const eventReturn = (event) => {
+  setResult(event.detail.value)
+}
+
+useEffect(() => {
+  const elementRef = elementRf.current;
+  elementRef.addEventListener('bdsChange', (event) => {
+    eventReturn(event);
+  });
+  return () => {
+    elementRef.removeEventListener('bdsChange', (event) => {
+      eventReturn(event);
+    });
+  };
+}, [elementRf]);`}
+                        
+
+ + + + + + + + + + ); +} diff --git a/src/components/input/event/bdsFocus.js b/src/components/input/event/bdsFocus.js new file mode 100644 index 0000000..d9050d2 --- /dev/null +++ b/src/components/input/event/bdsFocus.js @@ -0,0 +1,132 @@ +import React, { useRef, useEffect, useState } from "react"; +import {motion} from 'framer-motion'; + +export default function BdsFocus() { + + // Put here the event function + + const elementRf = useRef(null); + const [result, setResult] = useState(''); + + const eventReturn = (event) => { + setResult("Input Focus") + } + + useEffect(() => { + const elementRef = elementRf.current; + elementRef.addEventListener('bdsFocus', (event) => { + eventReturn(event); + }); + return () => { + elementRef.removeEventListener('bdsFocus', (event) => { + eventReturn(event); + }); + }; + }, [elementRf]); + + return ( + + + + + {/* Put here the event name */} + BdsFocus + +
+ + + + + + The component using the event + + + {/* */} + + {result ? ( + + + + {`This text appeared as a result of the bdsFocus "${result}"`} + + + + ) : ''} + + + + + + The component code using the event + + + + + + 
+                        {
+                          ``
+                        }
+
+ + + + + + + + The function + + + + + 
+                        {`const elementRf = useRef(null);
+const [result, setResult] = useState('');
+const eventReturn = (event) => {
+  setResult("Input Focus")
+}
+
+useEffect(() => {
+  const elementRef = elementRf.current;
+  elementRef.addEventListener('bdsFocus', (event) => {
+    eventReturn(event);
+  });
+  return () => {
+    elementRef.removeEventListener('bdsFocus', (event) => {
+      eventReturn(event);
+    });
+  };
+}, [elementRf]);`}
+                        
+
+ + + + + + + + + + ); +} diff --git a/src/components/input/event/bdsInput.js b/src/components/input/event/bdsInput.js new file mode 100644 index 0000000..f6be9fa --- /dev/null +++ b/src/components/input/event/bdsInput.js @@ -0,0 +1,132 @@ +import React, { useRef, useEffect, useState } from "react"; +import {motion} from 'framer-motion'; + +export default function BdsInput() { + + // Put here the event function + + const elementRf = useRef(null); + const [result, setResult] = useState(''); + + const eventReturn = (event) => { + setResult(event.target.value) + } + + useEffect(() => { + const elementRef = elementRf.current; + elementRef.addEventListener('bdsInput', (event) => { + eventReturn(event); + }); + return () => { + elementRef.removeEventListener('bdsInput', (event) => { + eventReturn(event); + }); + }; + }, [elementRf]); + + return ( + + + + + {/* Put here the event name */} + BdsInput + +
+ + + + + + The component using the event + + + {/* */} + + {result ? ( + + + + {`This text appeared as a result of the bdsInput "${result}"`} + + + + ) : ''} + + + + + + The component code using the event + + + + + + 
+                        {
+                          ``
+                        }
+
+ + + + + + + + The function + + + + + 
+                        {`const elementRf = useRef(null);
+const [result, setResult] = useState('');
+const eventReturn = (event) => {
+  setResult(event.target.value)
+}
+
+useEffect(() => {
+  const elementRef = elementRf.current;
+  elementRef.addEventListener('bdsInput', (event) => {
+    eventReturn(event);
+  });
+  return () => {
+    elementRef.removeEventListener('bdsInput', (event) => {
+      eventReturn(event);
+    });
+  };
+}, [elementRf]);`}
+                        
+
+ + + + + + + + + + ); +} diff --git a/src/components/input/event/bdsKeyDownBackspace.js b/src/components/input/event/bdsKeyDownBackspace.js new file mode 100644 index 0000000..b48ffa6 --- /dev/null +++ b/src/components/input/event/bdsKeyDownBackspace.js @@ -0,0 +1,132 @@ +import React, { useRef, useEffect, useState } from "react"; +import {motion} from 'framer-motion'; + +export default function BdsKeyDownBackspace() { + + // Put here the event function + + const elementRf = useRef(null); + const [result, setResult] = useState(''); + + const eventReturn = (event) => { + setResult("Input Key Down Backspace") + } + + useEffect(() => { + const elementRef = elementRf.current; + elementRef.addEventListener('bdsKeyDownBackspace', (event) => { + eventReturn(event); + }); + return () => { + elementRef.removeEventListener('bdsKeyDownBackspace', (event) => { + eventReturn(event); + }); + }; + }, [elementRf]); + + return ( + + + + + {/* Put here the event name */} + BdsKeyDownBackspace + +
+ + + + + + The component using the event + + + {/* */} + + {result ? ( + + + + {`This text appeared as a result of the bdsKeyDownBackspace "${result}"`} + + + + ) : ''} + + + + + + The component code using the event + + + + + + 
+                        {
+                          ``
+                        }
+
+ + + + + + + + The function + + + + + 
+                        {`const elementRf = useRef(null);
+const [result, setResult] = useState('');
+const eventReturn = (event) => {
+  setResult("Input Key Down Backspace")
+}
+
+useEffect(() => {
+  const elementRef = elementRf.current;
+    elementRef.addEventListener('bdsKeyDownBackspace', (event) => {
+     eventReturn(event);
+    });
+    return () => {
+      elementRef.removeEventListener('bdsKeyDownBackspace', (event) => {
+       eventReturn(event);
+      });
+    };
+}, [elementRf]);`}
+                        
+
+ + + + + + + + + + ); +} diff --git a/src/components/input/event/bdsOnBlur.js b/src/components/input/event/bdsOnBlur.js new file mode 100644 index 0000000..25e18d7 --- /dev/null +++ b/src/components/input/event/bdsOnBlur.js @@ -0,0 +1,132 @@ +import React, { useRef, useEffect, useState } from "react"; +import {motion} from 'framer-motion'; + +export default function BdsOnBlur() { + + // Put here the event function + + const elementRf = useRef(null); + const [result, setResult] = useState(''); + + const eventReturn = (event) => { + setResult("Input onBlur") + } + + useEffect(() => { + const elementRef = elementRf.current; + elementRef.addEventListener('bdsOnBlur', (event) => { + eventReturn(event); + }); + return () => { + elementRef.removeEventListener('bdsOnBlur', (event) => { + eventReturn(event); + }); + }; + }, [elementRf]); + + return ( + + + + + {/* Put here the event name */} + BdsOnBlur + +
+ + + + + + The component using the event + + + {/* */} + + {result ? ( + + + + {`This text appeared as a result of the bdsOnBlur "${result}"`} + + + + ) : ''} + + + + + + The component code using the event + + + + + + 
+                        {
+                          ``
+                        }
+
+ + + + + + + + The function + + + + + 
+                        {`const elementRf = useRef(null);
+const [result, setResult] = useState('');
+const eventReturn = (event) => {
+  setResult("Input onBlur")
+}
+
+useEffect(() => {
+  const elementRef = elementRf.current;
+    elementRef.addEventListener('bdsOnBlur', (event) => {
+     eventReturn(event);
+    });
+    return () => {
+      elementRef.removeEventListener('bdsOnBlur', (event) => {
+       eventReturn(event);
+      });
+    };
+}, [elementRf]);`}
+                        
+
+ + + + + + + + + + ); +} diff --git a/src/components/input/event/bdsPatterValidation.js b/src/components/input/event/bdsPatterValidation.js new file mode 100644 index 0000000..66e38cf --- /dev/null +++ b/src/components/input/event/bdsPatterValidation.js @@ -0,0 +1,132 @@ +import React, { useRef, useEffect, useState } from "react"; +import {motion} from 'framer-motion'; + +export default function BdsPatterValidation() { + + // Put here the event function + + const elementRf = useRef(null); + const [result, setResult] = useState(''); + + const eventReturn = (event) => { + setResult(event.detail) + } + + useEffect(() => { + const elementRef = elementRf.current; + elementRef.addEventListener('bdsPatterValidation', (event) => { + eventReturn(event); + }); + return () => { + elementRef.removeEventListener('bdsPatterValidation', (event) => { + eventReturn(event); + }); + }; + }, [elementRf]); + + return ( + + + + + {/* Put here the event name */} + BdsPatterValidation + +
+ + + + + + The component using the event + + + {/* */} + + {result ? ( + + + + {`This text appeared as a result of the bdsPatterValidation "${result}"`} + + + + ) : ''} + + + + + + The component code using the event + + + + + + 
+                        {
+                          ``
+                        }
+
+ + + + + + + + The function + + + + + 
+                        {`const elementRf = useRef(null);
+const [result, setResult] = useState('');
+const eventReturn = (event) => {
+  setResult(event.detail)
+}
+
+useEffect(() => {
+  const elementRef = elementRf.current;
+    elementRef.addEventListener('bdsPatterValidation', (event) => {
+     eventReturn(event);
+    });
+    return () => {
+      elementRef.removeEventListener('bdsPatterValidation', (event) => {
+       eventReturn(event);
+      });
+    };
+}, [elementRf]);`}
+                        
+
+ + + + + + + + + + ); +} diff --git a/src/components/input/event/bdsSubmit.js b/src/components/input/event/bdsSubmit.js new file mode 100644 index 0000000..f71fd86 --- /dev/null +++ b/src/components/input/event/bdsSubmit.js @@ -0,0 +1,132 @@ +import React, { useRef, useEffect, useState } from "react"; +import {motion} from 'framer-motion'; + +export default function BdsSubmit() { + + // Put here the event function + + const elementRf = useRef(null); + const [result, setResult] = useState(''); + + const eventReturn = (event) => { + setResult(event.detail.value) + } + + useEffect(() => { + const elementRef = elementRf.current; + elementRef.addEventListener('bdsSubmit', (event) => { + eventReturn(event); + }); + return () => { + elementRef.removeEventListener('bdsSubmit', (event) => { + eventReturn(event); + }); + }; + }, [elementRf]); + + return ( + + + + + {/* Put here the event name */} + BdsSubmit + +
+ + + + + + The component using the event + + + {/* */} + + {result ? ( + + + + {`This text appeared as a result of the bdsSubmit "${result}"`} + + + + ) : ''} + + + + + + The component code using the event + + + + + + 
+                        {
+                          ``
+                        }
+
+ + + + + + + + The function + + + + + 
+                        {`const elementRf = useRef(null);
+const [result, setResult] = useState('');
+const eventReturn = (event) => {
+  setResult(event.detail.value)
+}
+
+useEffect(() => {
+  const elementRef = elementRf.current;
+  elementRef.addEventListener('bdsSubmit', (event) => {
+    eventReturn(event);
+  });
+  return () => {
+    elementRef.removeEventListener('bdsSubmit', (event) => {
+      eventReturn(event);
+    });
+  };
+}, [elementRf]);`}
+                        
+
+ + + + + + + + + + ); +} diff --git a/src/components/input/input.js b/src/components/input/input.js new file mode 100644 index 0000000..5e2fe8e --- /dev/null +++ b/src/components/input/input.js @@ -0,0 +1,84 @@ +import React from "react"; +import { Link } from "react-router-dom"; +import DefaultInput from "./structures/defaultInput"; +import DangerInput from "./structures/dangerInput"; +import DisabledInput from "./structures/disabledInput"; +import CounterInput from "./structures/counterInput"; +import InputTextarea from "./structures/inputTextarea"; + +import ClearMethod from "./method/clear"; +import IsValidMethod from "./method/isValid"; +import RemoveFocusMethod from "./method/removeFocus"; +import SetFocusMethod from "./method/setFocus"; +import GetInputElementMethod from "./method/getInputElement"; + +import BdsChange from "./event/bdsChange"; +import BdsFocus from "./event/bdsFocus"; +import BdsInput from "./event/bdsInput"; +import BdsKeyDownBackspace from "./event/bdsKeyDownBackspace"; +import BdsOnBlur from "./event/bdsOnBlur"; +import BdsPatterValidation from "./event/bdsPatterValidation"; +import BdsSubmit from "./event/bdsSubmit"; + +export default function TemplateComponent() { + return ( + <> + + + + + + + + + {/* Component name */} + Input + + + + Status: + + Funcionando + + + + + + + + + +
+ + + + {/* Import here the structures component */} + + + + + + + + {/* Import here the Method component */} + + + + + + + + {/* Import here the Event component */} + + + + + + + + + + + + ); +} diff --git a/src/components/input/method/clear.js b/src/components/input/method/clear.js new file mode 100644 index 0000000..c5ee432 --- /dev/null +++ b/src/components/input/method/clear.js @@ -0,0 +1,119 @@ +import React from "react"; + +export default function ClearMethod() { + + const inputClear = async (id) => { + const input = document.getElementById(id); + await input.clear(); + }; + return ( + + + + + Clear() Method + +
+ + + + + The onClick function calls the method that clear the + input component. + + + + + + + Press the button to "Clear" the component + + + + inputClear("inputClear")} + variant="primary" + size="short" + > + Clear + + + + + + + The call + + + + + 
+                        {
+                          ' inputClear("inputClear")}>Clear'
+                        }
+
+ + + + + + + + The function + + + + + 
+                        {`const inputClear = async (id) => {
+  const input = document.getElementById(id);
+  await input.clear();
+};`}
+
+ + + + + + + + The element affected + + + + + 
+                        {``}
+
+ + + + + + + + + + ); +} diff --git a/src/components/input/method/getInputElement.js b/src/components/input/method/getInputElement.js new file mode 100644 index 0000000..757139e --- /dev/null +++ b/src/components/input/method/getInputElement.js @@ -0,0 +1,119 @@ +import React from "react"; + +export default function GetInputElementMethod() { + + const inputGetInputElement = async (id) => { + const input = document.getElementById(id); + await input.getInputElement(); + }; + return ( + + + + + GetInputElement() Method + +
+ + + + + The onClick function calls the method that getInputElement the + input component. + + + + + + + Press the button to "GetInputElement" the component + + + + inputGetInputElement("inputGetInputElement")} + variant="primary" + size="short" + > + GetInputElement + + + + + + + The call + + + + + 
+                        {
+                          ' inputGetInputElement("inputGetInputElement")}>GetInputElement'
+                        }
+
+ + + + + + + + The function + + + + + 
+                        {`const inputGetInputElement = async (id) => {
+  const input = document.getElementById(id);
+  await input.getInputElement();
+};`}
+
+ + + + + + + + The element affected + + + + + 
+                        {``}
+
+ + + + + + + + + + ); +} diff --git a/src/components/input/method/isValid.js b/src/components/input/method/isValid.js new file mode 100644 index 0000000..8a88cf0 --- /dev/null +++ b/src/components/input/method/isValid.js @@ -0,0 +1,119 @@ +import React from "react"; + +export default function IsValidMethod() { + + const inputIsValid = async (id) => { + const input = document.getElementById(id); + await input.isValid(); + }; + return ( + + + + + IsValid() Method + +
+ + + + + The onClick function calls the method that isValid the + input component. + + + + + + + Press the button to "IsValid" the component + + + + inputIsValid("inputIsValid")} + variant="primary" + size="short" + > + IsValid + + + + + + + The call + + + + + 
+                        {
+                          ' inputIsValid("inputIsValid")}>IsValid'
+                        }
+
+ + + + + + + + The function + + + + + 
+                        {`const inputIsValid = async (id) => {
+  const input = document.getElementById(id);
+  await input.isValid();
+};`}
+
+ + + + + + + + The element affected + + + + + 
+                        {``}
+
+ + + + + + + + + + ); +} diff --git a/src/components/input/method/removeFocus.js b/src/components/input/method/removeFocus.js new file mode 100644 index 0000000..f3800c0 --- /dev/null +++ b/src/components/input/method/removeFocus.js @@ -0,0 +1,119 @@ +import React from "react"; + +export default function RemoveFocusMethod() { + + const inputRemoveFocus = async (id) => { + const input = document.getElementById(id); + await input.removeFocus(); + }; + return ( + + + + + RemoveFocus() Method + +
+ + + + + The onClick function calls the method that removeFocus the + input component. + + + + + + + Press the button to "RemoveFocus" the component + + + + inputRemoveFocus("inputRemoveFocus")} + variant="primary" + size="short" + > + RemoveFocus + + + + + + + The call + + + + + 
+                        {
+                          ' inputRemoveFocus("inputRemoveFocus")}>RemoveFocus'
+                        }
+
+ + + + + + + + The function + + + + + 
+                        {`const inputRemoveFocus = async (id) => {
+  const input = document.getElementById(id);
+  await input.removeFocus();
+};`}
+
+ + + + + + + + The element affected + + + + + 
+                        {``}
+
+ + + + + + + + + + ); +} diff --git a/src/components/input/method/setFocus.js b/src/components/input/method/setFocus.js new file mode 100644 index 0000000..8d15704 --- /dev/null +++ b/src/components/input/method/setFocus.js @@ -0,0 +1,119 @@ +import React from "react"; + +export default function SetFocusMethod() { + + const inputSetFocus = async (id) => { + const input = document.getElementById(id); + await input.setFocus(); + }; + return ( + + + + + SetFocus() Method + +
+ + + + + The onClick function calls the method that setFocus the + input component. + + + + + + + Press the button to "SetFocus" the component + + + + inputSetFocus("inputSetFocus")} + variant="primary" + size="short" + > + SetFocus + + + + + + + The call + + + + + 
+                        {
+                          ' inputSetFocus("inputSetFocus")}>SetFocus'
+                        }
+
+ + + + + + + + The function + + + + + 
+                        {`const inputSetFocus = async (id) => {
+  const input = document.getElementById(id);
+  await input.setFocus();
+};`}
+
+ + + + + + + + The element affected + + + + + 
+                        {``}
+
+ + + + + + + + + + ); +} diff --git a/src/components/input/structures/counterInput.js b/src/components/input/structures/counterInput.js new file mode 100644 index 0000000..4ab6de3 --- /dev/null +++ b/src/components/input/structures/counterInput.js @@ -0,0 +1,55 @@ +import React from "react"; + +export default function CounterInput() { + return ( + + + + {/* Put here the component name */} + Counter Input + +
+ + + + The structure HTML + + + + + 
+                  {`

+  
+  
+  
+  
+

+`}
+
+ + + + + + + + The component + + + {/* Put here the component example */} + + + + + + + + + + ); +} diff --git a/src/components/input/structures/dangerInput.js b/src/components/input/structures/dangerInput.js new file mode 100644 index 0000000..8861928 --- /dev/null +++ b/src/components/input/structures/dangerInput.js @@ -0,0 +1,55 @@ +import React from "react"; + +export default function DangerInput() { + return ( + + + + {/* Put here the component name */} + Danger Input + +
+ + + + The structure HTML + + + + + 
+                  {`

+  
+  
+  
+  
+

+`}
+
+ + + + + + + + The component + + + {/* Put here the component example */} + + + + + + + + + + ); +} diff --git a/src/components/input/structures/defaultInput.js b/src/components/input/structures/defaultInput.js new file mode 100644 index 0000000..19a45cf --- /dev/null +++ b/src/components/input/structures/defaultInput.js @@ -0,0 +1,46 @@ +import React from "react"; + +export default function DefaultInput() { + return ( + + + + {/* Put here the component name */} + Default Input + +
+ + + + The structure HTML + + + + + 
+                  {``}
+
+ + + + + + + + The component + + + {/* Put here the component example */} + + + + + + + ); +} diff --git a/src/components/input/structures/disabledInput.js b/src/components/input/structures/disabledInput.js new file mode 100644 index 0000000..0a0cc61 --- /dev/null +++ b/src/components/input/structures/disabledInput.js @@ -0,0 +1,57 @@ +import React from "react"; + +export default function DisabledInput() { + return ( + + + + {/* Put here the component name */} + Disabled Input + +
+ + + + The structure HTML + + + + + 
+                  {`

+  
+  
+  
+  
+  
+

+                  `}
+
+ + + + + + + + The component + + + {/* Put here the component example */} + + + + + + + + + + + ); +} diff --git a/src/components/input/structures/inputTextarea.js b/src/components/input/structures/inputTextarea.js new file mode 100644 index 0000000..1c54dfa --- /dev/null +++ b/src/components/input/structures/inputTextarea.js @@ -0,0 +1,57 @@ +import React from "react"; + +export default function InputTextarea() { + return ( + + + + {/* Put here the component name */} + Input Textarea + +
+ + + + The structure HTML + + + + + 
+                  {`

+  
+  
+  
+  
+  
+

+`}
+
+ + + + + + + + The component + + + {/* Put here the component example */} + + + + + + + + + + + ); +} diff --git a/src/pages/componentList.js b/src/pages/componentList.js index d7b81d9..c5bedd4 100644 --- a/src/pages/componentList.js +++ b/src/pages/componentList.js @@ -140,7 +140,7 @@ function ComponentList() { - + @@ -153,8 +153,8 @@ function ComponentList() { - - + + diff --git a/src/routes.js b/src/routes.js index d628b3d..242c68d 100644 --- a/src/routes.js +++ b/src/routes.js @@ -4,9 +4,10 @@ import { Route, Routes } from "react-router-dom"; import ComponentList from "./pages/componentList"; import Accordion from "./components/accordion/Accordion"; import Alert from "./components/alert/alert"; -import Banner from "./components/banner/banner"; import Autocomplete from "./components/autocomplete/autocomplete"; import Avatar from "./components/avatar/avatar"; +import Banner from "./components/Banner/banner"; +import Input from "./components/input/input"; function ComponentRoutes() { return ( @@ -14,9 +15,10 @@ function ComponentRoutes() { } /> } /> } /> - } /> } /> } /> + } /> + } /> ); }; From 3ff62e05d33d96d118d5319123cbfb585f5bad95 Mon Sep 17 00:00:00 2001 From: Lucas Murta Date: Wed, 4 Jan 2023 11:22:50 -0300 Subject: [PATCH 2/3] fix(input): pr ajustments --- src/components/input/event/bdsPatterValidation.js | 3 ++- src/components/input/method/getInputElement.js | 6 ++++-- src/components/input/method/isValid.js | 6 ++++-- src/pages/componentList.js | 8 ++++---- 4 files changed, 14 insertions(+), 9 deletions(-) diff --git a/src/components/input/event/bdsPatterValidation.js b/src/components/input/event/bdsPatterValidation.js index 66e38cf..e0a3722 100644 --- a/src/components/input/event/bdsPatterValidation.js +++ b/src/components/input/event/bdsPatterValidation.js @@ -9,6 +9,7 @@ export default function BdsPatterValidation() { const [result, setResult] = useState(''); const eventReturn = (event) => { + console.log('event', event); setResult(event.detail) } @@ -59,7 +60,7 @@ export default function BdsPatterValidation() { {/* */} - + {result ? ( { const input = document.getElementById(id); - await input.getInputElement(); + const inputElement = await input.getInputElement() + input.value = inputElement; }; return ( {`const inputGetInputElement = async (id) => { const input = document.getElementById(id); - await input.getInputElement(); + const inputElement = await input.getInputElement() + input.value = inputElement; };`} diff --git a/src/components/input/method/isValid.js b/src/components/input/method/isValid.js index 8a88cf0..8f05c9a 100644 --- a/src/components/input/method/isValid.js +++ b/src/components/input/method/isValid.js @@ -4,7 +4,8 @@ export default function IsValidMethod() { const inputIsValid = async (id) => { const input = document.getElementById(id); - await input.isValid(); + const validResult = await input.isValid() + input.value = validResult; }; return ( {`const inputIsValid = async (id) => { const input = document.getElementById(id); - await input.isValid(); + const validResult = await input.isValid() + input.value = validResult; };`} diff --git a/src/pages/componentList.js b/src/pages/componentList.js index c5bedd4..4f82a0b 100644 --- a/src/pages/componentList.js +++ b/src/pages/componentList.js @@ -138,9 +138,9 @@ function ComponentList() { Components List - + - + @@ -153,8 +153,8 @@ function ComponentList() { - - + + From 43bb6d685c9f3887d77609a9b5effe11f14ece36 Mon Sep 17 00:00:00 2001 From: Lucas Murta Date: Thu, 5 Jan 2023 12:37:55 -0300 Subject: [PATCH 3/3] fix(input): pr ajustments --- .../input/method/getInputElement.js | 18 +++++++++++++++-- src/components/input/method/isValid.js | 20 ++++++++++++++++--- 2 files changed, 33 insertions(+), 5 deletions(-) diff --git a/src/components/input/method/getInputElement.js b/src/components/input/method/getInputElement.js index f3c28fc..d0b4849 100644 --- a/src/components/input/method/getInputElement.js +++ b/src/components/input/method/getInputElement.js @@ -1,11 +1,13 @@ -import React from "react"; +import React, { useState } from "react"; +import {motion} from 'framer-motion'; export default function GetInputElementMethod() { + const [result, setResult] = useState(''); const inputGetInputElement = async (id) => { const input = document.getElementById(id); const inputElement = await input.getInputElement() - input.value = inputElement; + setResult(inputElement) }; return ( + {result ? ( + + + + {`this is the value of the referenced input element "${result}"`} + + + + ) : ''} The call diff --git a/src/components/input/method/isValid.js b/src/components/input/method/isValid.js index 8f05c9a..5baeef0 100644 --- a/src/components/input/method/isValid.js +++ b/src/components/input/method/isValid.js @@ -1,11 +1,13 @@ -import React from "react"; +import React, { useState } from "react"; +import {motion} from 'framer-motion'; export default function IsValidMethod() { + const [result, setResult] = useState(''); const inputIsValid = async (id) => { const input = document.getElementById(id); const validResult = await input.isValid() - input.value = validResult; + setResult(validResult) }; return ( + {result ? ( + + + + {`This is the value when the input is valid "${result}"`} + + + + ) : ''} The call @@ -90,7 +104,7 @@ export default function IsValidMethod() { {`const inputIsValid = async (id) => { const input = document.getElementById(id); const validResult = await input.isValid() - input.value = validResult; + setResult(validResult) };`}