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..e0a3722 --- /dev/null +++ b/src/components/input/event/bdsPatterValidation.js @@ -0,0 +1,133 @@ +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) => { + console.log('event', 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..d0b4849 --- /dev/null +++ b/src/components/input/method/getInputElement.js @@ -0,0 +1,135 @@ +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() + setResult(inputElement) + }; + 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 + + + + + {result ? ( + + + + {`this is the value of the referenced input element "${result}"`} + + + + ) : ''} + + + The call + + + + + 
+                        {
+                          ' inputGetInputElement("inputGetInputElement")}>GetInputElement'
+                        }
+
+ + + + + + + + The function + + + + + 
+                        {`const inputGetInputElement = async (id) => {
+  const input = document.getElementById(id);
+  const inputElement = await input.getInputElement()
+  input.value = inputElement;
+};`}
+
+ + + + + + + + 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..5baeef0 --- /dev/null +++ b/src/components/input/method/isValid.js @@ -0,0 +1,135 @@ +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() + setResult(validResult) + }; + 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 + + + + + {result ? ( + + + + {`This is the value when the input is valid "${result}"`} + + + + ) : ''} + + + The call + + + + + 
+                        {
+                          ' inputIsValid("inputIsValid")}>IsValid'
+                        }
+
+ + + + + + + + The function + + + + + 
+                        {`const inputIsValid = async (id) => {
+  const input = document.getElementById(id);
+  const validResult = await input.isValid()
+  setResult(validResult)
+};`}
+
+ + + + + + + + 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..4f82a0b 100644 --- a/src/pages/componentList.js +++ b/src/pages/componentList.js @@ -138,7 +138,7 @@ function ComponentList() { Components List - + @@ -153,7 +153,7 @@ 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() { } /> } /> } /> - } /> } /> } /> + } /> + } /> ); };