crimson-quirks/crimson-quirks-ui
1
0
Fork 0
mirror of https://github.com/hazemKrimi/crimson-quirks-ui.git synced 2026-05-01 18:20:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update input component

Browse Source
This commit is contained in:
Hazem Krimi
2021-04-23 18:21:01 +01:00
parent ae78a7afb0
commit 916459e894
2 changed files with 35 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Input/index.tsx
+16 -14
View File
@@ -19,7 +19,7 @@ type InputProps = {
value: string; value: string;
label?: string; label?: string;
name: string; name: string;
type?: 'text' | 'email' | 'password' | 'file' | 'number'; type?: 'text' | 'email' | 'tel' | 'password' | 'file' | 'number';
placeholder?: string; placeholder?: string;
fullWidth?: boolean; fullWidth?: boolean;
onChange: (event: React.ChangeEvent<HTMLInputElement>) => void; onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
@@ -52,19 +52,21 @@ const Input = ({
)} )}
</div> </div>
<div className='input'> <div className='input'>
{type === 'file' && ( <div>
<span className='icon left'> {type === 'file' && (
<Upload /> <span className='icon left'>
</span> <Upload />
)} </span>
<input )}
type={type} <input
value={value} type={type}
onChange={onChange} value={value}
name={name} onChange={onChange}
accept={type === 'file' ? 'image/*' : undefined} name={name}
placeholder={placeholder} accept={type === 'file' ? 'image/*' : undefined}
/> placeholder={placeholder}
/>
</div>
</div> </div>
</Wrapper> </Wrapper>
); );
src/components/Input/styles.ts
+19 -31
View File
@@ -14,7 +14,7 @@ type WrapperProps = {
| 'white'; | 'white';
error?: boolean; error?: boolean;
errorMessage?: string; errorMessage?: string;
type?: 'text' | 'email' | 'password' | 'file' | 'number'; type?: 'text' | 'email' | 'tel' | 'password' | 'file' | 'number';
label?: string; label?: string;
fullWidth?: boolean; fullWidth?: boolean;
}; };
@@ -24,32 +24,20 @@ export const Wrapper = styled.div<WrapperProps>`
width: inherit; width: inherit;
height: inherit; height: inherit;
border-radius: 5px; border-radius: 5px;
padding: 1rem; padding: 2px;
position: relative;
color: ${({ theme }) => theme.colors.black.main}; color: ${({ theme }) => theme.colors.black.main};
background: ${({ theme }) => theme.colors.white.main};
background-clip: padding-box;
border: 2px solid transparent;
&:before { div {
content: ''; background: ${({ theme }) => theme.colors.white.main};
position: absolute; padding: 1rem;
top: 0; border-radius: 5px;
right: 0;
bottom: 0;
left: 0;
width: inherit;
height: inherit;
z-index: -1;
margin: -2px;
border-radius: inherit;
} }
} }
.info { .info {
margin-bottom: 5px; margin-bottom: 5px;
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: 1fr auto;
align-items: center; align-items: center;
p { p {
@@ -85,7 +73,7 @@ export const Wrapper = styled.div<WrapperProps>`
${({ type }) => { ${({ type }) => {
if (type === 'file') if (type === 'file')
return css` return css`
.input { .input div {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@@ -108,7 +96,7 @@ export const Wrapper = styled.div<WrapperProps>`
switch (color) { switch (color) {
case 'client': case 'client':
return css` return css`
.input:before { .input {
background: ${theme.colors.client.light}; background: ${theme.colors.client.light};
} }
@@ -122,7 +110,7 @@ export const Wrapper = styled.div<WrapperProps>`
`; `;
case 'productOwner': case 'productOwner':
return css` return css`
.input:before { .input {
background: ${theme.colors.productOwner.light}; background: ${theme.colors.productOwner.light};
} }
@@ -136,7 +124,7 @@ export const Wrapper = styled.div<WrapperProps>`
`; `;
case 'developer': case 'developer':
return css` return css`
.input:before { .input {
background: ${theme.colors.developer.light}; background: ${theme.colors.developer.light};
} }
@@ -150,7 +138,7 @@ export const Wrapper = styled.div<WrapperProps>`
`; `;
case 'admin': case 'admin':
return css` return css`
.input:before { .input {
background: ${theme.colors.admin.light}; background: ${theme.colors.admin.light};
} }
@@ -164,7 +152,7 @@ export const Wrapper = styled.div<WrapperProps>`
`; `;
case 'success': case 'success':
return css` return css`
.input:before { .input {
background: ${theme.colors.success.main}; background: ${theme.colors.success.main};
} }
@@ -178,7 +166,7 @@ export const Wrapper = styled.div<WrapperProps>`
`; `;
case 'warning': case 'warning':
return css` return css`
.input:before { .input {
background: ${theme.colors.warning.main}; background: ${theme.colors.warning.main};
} }
@@ -192,7 +180,7 @@ export const Wrapper = styled.div<WrapperProps>`
`; `;
case 'error': case 'error':
return css` return css`
.input:before { .input {
background: ${theme.colors.error.main}; background: ${theme.colors.error.main};
} }
@@ -206,7 +194,7 @@ export const Wrapper = styled.div<WrapperProps>`
`; `;
case 'black': case 'black':
return css` return css`
.input:before { .input {
background: ${theme.colors.black.main}; background: ${theme.colors.black.main};
} }
@@ -220,7 +208,7 @@ export const Wrapper = styled.div<WrapperProps>`
`; `;
case 'white': case 'white':
return css` return css`
.input:before { .input {
background: ${theme.colors.white.main}; background: ${theme.colors.white.main};
} }
@@ -234,7 +222,7 @@ export const Wrapper = styled.div<WrapperProps>`
`; `;
default: default:
return css` return css`
.input:before { .input {
background: ${theme.colors.client.light}; background: ${theme.colors.client.light};
} }
@@ -258,7 +246,7 @@ export const Wrapper = styled.div<WrapperProps>`
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
.input:before { .input {
background: ${theme.colors.error.main}; background: ${theme.colors.error.main};
} }