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

Jump to bottom

Added Left/Right Element and Left/Right Addon Props to input control #155

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Added Left/Right Element and Left/Right Addon Props to input control #155

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ec8d82f
Added Left/Right Element and Left/Right Addon Props to input control,…
ogheneovo12 Aug 16, 2022
abcfd78
specified input type for addon or element input example
ogheneovo12 Aug 16, 2022
3effd8a
added password reveal toggle logic to example file
ogheneovo12 Aug 16, 2022
0508671
added resolution for csstype in attempt to fix csstype failed build b…
ogheneovo12 Aug 16, 2022
9d58ce6
added svg definition file in attempt to fix deploy error
ogheneovo12 Aug 16, 2022
2a25e5a
another attempt to fix deploy error
ogheneovo12 Aug 16, 2022
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
7 changes: 7 additions & 0 deletions example/.parcelrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"extends": "@parcel/config-default",
"transformers": {
"*.svg": ["@parcel/transformer-svg-react"],
"jsx:*": ["..."]
}
}
4 changes: 4 additions & 0 deletions example/custom.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
declare module "*.svg" {
const content: any;
export default content;
}
70 changes: 70 additions & 0 deletions example/eyeclose.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 11 additions & 0 deletions example/eyeopen.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion example/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,6 @@

<body>
<div id="root"></div>
<script src="./index.tsx"></script>
<script type="module" src="./index.tsx"></script>
</body>
</html>
44 changes: 44 additions & 0 deletions example/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,11 @@ import {
TextareaControl,
} from '../src';

import MailIcon from './mail.svg';
import LockIcon from './lock.svg';
import EyeOpen from './eyeopen.svg';
import EyeClose from './eyeclose.svg';

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

const onSubmit = values => {
Expand All @@ -52,10 +57,16 @@ const initialValues = {
bar: '',
customField: '',
customElements: '',
email: '',
password: '',
website: '',
};
const validationSchema = Yup.object({
firstName: Yup.string().required(),
lastName: Yup.string().required(),
email: Yup.string().required(),
password: Yup.string().required(),
website: Yup.string().required(),
age: Yup.number()
.required()
.min(18),
Expand All @@ -71,7 +82,14 @@ const validationSchema = Yup.object({
customElements: Yup.string().required(),
});

const iconProps = {
width: '30px',
height: '30px',
};

const App = () => {
const [revealPassword, setRevealPassword] = React.useState(false);
const toggleReveal = () => setRevealPassword(prev => !prev);
return (
<ChakraProvider>
<Heading as="h1" size="xl" textAlign="center">
Expand Down Expand Up @@ -108,6 +126,32 @@ const App = () => {
label="Age"
helperText="Helper text"
/>
<InputControl
inputProps={{ type: 'email', paddingLeft:"38px" }}
name="email"
label="Email"
leftChildren={<MailIcon {...iconProps} />}
/>
<InputControl
inputProps={{ type: revealPassword ? 'text' : 'password', paddingLeft:"38px" }}
name="password"
label="password"
leftChildren={<LockIcon {...iconProps} />}
rightChildren={
revealPassword ? (
<EyeClose onClick={toggleReveal} {...iconProps} />
) : (
<EyeOpen onClick={toggleReveal} {...iconProps} />
)
}
/>
<InputControl
name="website"
placeholder="mysite"
leftChildren={'https://'}
rightChildren={'.com'}
useAddon={{ left: true, right: true }}
/>
<CheckboxSingleControl name="employed">
Employed
</CheckboxSingleControl>
Expand Down
41 changes: 41 additions & 0 deletions example/lock.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
45 changes: 45 additions & 0 deletions example/mail.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 8 additions & 2 deletions example/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,21 @@
"dependencies": {
"react-app-polyfill": "^1.0.0"
},

"alias": {
"react": "../node_modules/react",
"react-dom": "../node_modules/react-dom/profiling",
"scheduler/tracing": "../node_modules/scheduler/tracing-profiling"
"scheduler/tracing": "../node_modules/scheduler/tracing-profiling",
"process":{
"global":"process"
}
},
"devDependencies": {
"@parcel/transformer-svg-react": "^2.7.0",
"@types/react": "^16.9.11",
"@types/react-dom": "^16.8.4",
"parcel": "^2.0.0-beta.2",
"parcel": "^2.7.0",
"process": "^0.11.10",
"typescript": "^3.4.5"
}
}
12 changes: 9 additions & 3 deletions example/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,13 @@
"strictNullChecks": true,
"preserveConstEnums": true,
"sourceMap": true,
"lib": ["es2015", "es2016", "dom"],
"types": ["node"]
"lib": [
"es2015",
"es2016",
"dom"
],
"types": [
"node"
],
}
}
}
Loading