Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(input): add and test input component #1

Merged
merged 3 commits into from
Jan 6, 2023
Merged

feat(input): add and test input component #1

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6ac9729
feat(input): add and test input component
lucasMurtaVI Dec 30, 2022
3ff62e0
fix(input): pr ajustments
lucasMurtaVI Jan 4, 2023
43bb6d6
fix(input): pr ajustments
lucasMurtaVI Jan 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
132 changes: 132 additions & 0 deletions src/components/input/event/bdsChange.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<bds-grid
xxs="12"
direction="column"
gap="4"
margin="y-8"
align-items="center"
>
<bds-grid direction="column" xxs="12" align-items="center">
<bds-grid xxs="12" direction="column">
<bds-typo class="title-2" variant="fs-24" bold="bold">
{/* Put here the event name */}
BdsChange
</bds-typo>
<hr />
</bds-grid>
<bds-grid
xxs="12"
justify-content="center"
>
<bds-grid
xxs="12"
direction="column"
gap="4"
justify-content="space-around"
margin="t-3"
>
<bds-grid direction="column" gap="1">
<bds-typo bold="bold">
The component using the event
</bds-typo>
<bds-grid padding="3" direction="column">
{/* <bds-banner id="banner" variant="system" button-close="true">
Instabilidade na plataforma? Não se preocupe, já estamos resolvendo!
</bds-banner> */}
<bds-input ref={elementRf} placeholder="nome completo"></bds-input>
{result ? (
<motion.div
animate={{ x: 100 }}
transition={{ ease: "easeOut", duration: 2 }}>
<bds-paper>
<bds-grid padding="2" justify-content="center">
<bds-typo>{`This text appeared as a result of the bdsChange "${result}"`}</bds-typo>
</bds-grid>
</bds-paper>
</motion.div>
) : ''}
</bds-grid>
</bds-grid>

<bds-grid direction="column" gap="1">
<bds-typo bold="bold">
The component code using the event
</bds-typo>
<bds-paper>
<bds-grid padding="x-3">
<bds-typo variant="fs-14" bold="regular">
<code>
<pre>
{
`<bds-input ref={elementRf} placeholder="nome completo"></bds-input>`
}
</pre>
</code>
</bds-typo>
</bds-grid>
</bds-paper>
</bds-grid>

<bds-grid direction="column" gap="1">
<bds-typo bold="bold">The function</bds-typo>
<bds-paper>
<bds-grid padding="x-3">
<bds-typo variant="fs-14" bold="regular">
<code>
<pre>
{`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]);`}

</pre>
</code>
</bds-typo>
</bds-grid>
</bds-paper>
</bds-grid>
</bds-grid>
</bds-grid>
</bds-grid>
</bds-grid>
);
}
132 changes: 132 additions & 0 deletions src/components/input/event/bdsFocus.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<bds-grid
xxs="12"
direction="column"
gap="4"
margin="y-8"
align-items="center"
>
<bds-grid direction="column" xxs="12" align-items="center">
<bds-grid xxs="12" direction="column">
<bds-typo class="title-2" variant="fs-24" bold="bold">
{/* Put here the event name */}
BdsFocus
</bds-typo>
<hr />
</bds-grid>
<bds-grid
xxs="12"
justify-content="center"
>
<bds-grid
xxs="12"
direction="column"
gap="4"
justify-content="space-around"
margin="t-3"
>
<bds-grid direction="column" gap="1">
<bds-typo bold="bold">
The component using the event
</bds-typo>
<bds-grid padding="3" direction="column">
{/* <bds-banner id="banner" variant="system" button-close="true">
Instabilidade na plataforma? Não se preocupe, já estamos resolvendo!
</bds-banner> */}
<bds-input ref={elementRf} placeholder="nome completo"></bds-input>
{result ? (
<motion.div
animate={{ x: 100 }}
transition={{ ease: "easeOut", duration: 2 }}>
<bds-paper>
<bds-grid padding="2" justify-content="center">
<bds-typo>{`This text appeared as a result of the bdsFocus "${result}"`}</bds-typo>
</bds-grid>
</bds-paper>
</motion.div>
) : ''}
</bds-grid>
</bds-grid>

<bds-grid direction="column" gap="1">
<bds-typo bold="bold">
The component code using the event
</bds-typo>
<bds-paper>
<bds-grid padding="x-3">
<bds-typo variant="fs-14" bold="regular">
<code>
<pre>
{
`<bds-input ref={elementRf} placeholder="nome completo"></bds-input>`
}
</pre>
</code>
</bds-typo>
</bds-grid>
</bds-paper>
</bds-grid>

<bds-grid direction="column" gap="1">
<bds-typo bold="bold">The function</bds-typo>
<bds-paper>
<bds-grid padding="x-3">
<bds-typo variant="fs-14" bold="regular">
<code>
<pre>
{`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]);`}

</pre>
</code>
</bds-typo>
</bds-grid>
</bds-paper>
</bds-grid>
</bds-grid>
</bds-grid>
</bds-grid>
</bds-grid>
);
}
132 changes: 132 additions & 0 deletions src/components/input/event/bdsInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<bds-grid
xxs="12"
direction="column"
gap="4"
margin="y-8"
align-items="center"
>
<bds-grid direction="column" xxs="12" align-items="center">
<bds-grid xxs="12" direction="column">
<bds-typo class="title-2" variant="fs-24" bold="bold">
{/* Put here the event name */}
BdsInput
</bds-typo>
<hr />
</bds-grid>
<bds-grid
xxs="12"
justify-content="center"
>
<bds-grid
xxs="12"
direction="column"
gap="4"
justify-content="space-around"
margin="t-3"
>
<bds-grid direction="column" gap="1">
<bds-typo bold="bold">
The component using the event
</bds-typo>
<bds-grid padding="3" direction="column">
{/* <bds-banner id="banner" variant="system" button-close="true">
Instabilidade na plataforma? Não se preocupe, já estamos resolvendo!
</bds-banner> */}
<bds-input ref={elementRf} placeholder="nome completo"></bds-input>
{result ? (
<motion.div
animate={{ x: 100 }}
transition={{ ease: "easeOut", duration: 2 }}>
<bds-paper>
<bds-grid padding="2" justify-content="center">
<bds-typo>{`This text appeared as a result of the bdsInput "${result}"`}</bds-typo>
</bds-grid>
</bds-paper>
</motion.div>
) : ''}
</bds-grid>
</bds-grid>

<bds-grid direction="column" gap="1">
<bds-typo bold="bold">
The component code using the event
</bds-typo>
<bds-paper>
<bds-grid padding="x-3">
<bds-typo variant="fs-14" bold="regular">
<code>
<pre>
{
`<bds-input ref={elementRf} placeholder="nome completo"></bds-input>`
}
</pre>
</code>
</bds-typo>
</bds-grid>
</bds-paper>
</bds-grid>

<bds-grid direction="column" gap="1">
<bds-typo bold="bold">The function</bds-typo>
<bds-paper>
<bds-grid padding="x-3">
<bds-typo variant="fs-14" bold="regular">
<code>
<pre>
{`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]);`}

</pre>
</code>
</bds-typo>
</bds-grid>
</bds-paper>
</bds-grid>
</bds-grid>
</bds-grid>
</bds-grid>
</bds-grid>
);
}
Loading