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-28 21:30:50 +01:00
parent f49b38dddd
commit 63a5715b99
2 changed files with 27 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Input/index.tsx
+3
View File
@@ -23,6 +23,7 @@ type InputProps = {
placeholder?: string; placeholder?: string;
fullWidth?: boolean; fullWidth?: boolean;
onChange: (event: React.ChangeEvent<HTMLInputElement>) => void; onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
}; };
const Input = ({ const Input = ({
@@ -33,6 +34,7 @@ const Input = ({
placeholder, placeholder,
value, value,
onChange, onChange,
onBlur,
error, error,
errorMessage, errorMessage,
...props ...props
@@ -62,6 +64,7 @@ const Input = ({
type={type} type={type}
value={value} value={value}
onChange={onChange} onChange={onChange}
onBlur={onBlur}
name={name} name={name}
accept={type === 'file' ? 'image/*' : undefined} accept={type === 'file' ? 'image/*' : undefined}
placeholder={placeholder} placeholder={placeholder}
src/components/Input/styles.ts
+24
View File
@@ -98,6 +98,10 @@ export const Wrapper = styled.div<WrapperProps>`
return css` return css`
.input { .input {
background: ${theme.colors.client.light}; background: ${theme.colors.client.light};
&:focus-within {
background: ${theme.colors.client.main};
}
} }
input[type='file'] { input[type='file'] {
@@ -112,6 +116,10 @@ export const Wrapper = styled.div<WrapperProps>`
return css` return css`
.input { .input {
background: ${theme.colors.productOwner.light}; background: ${theme.colors.productOwner.light};
&:focus-within {
background: ${theme.colors.productOwner.main};
}
} }
input[type='file'] { input[type='file'] {
@@ -126,6 +134,10 @@ export const Wrapper = styled.div<WrapperProps>`
return css` return css`
.input { .input {
background: ${theme.colors.developer.light}; background: ${theme.colors.developer.light};
&:focus-within {
background: ${theme.colors.developer.main};
}
} }
input[type='file'] { input[type='file'] {
@@ -140,6 +152,10 @@ export const Wrapper = styled.div<WrapperProps>`
return css` return css`
.input { .input {
background: ${theme.colors.admin.light}; background: ${theme.colors.admin.light};
&:focus-within {
background: ${theme.colors.admin.main};
}
} }
input[type='file'] { input[type='file'] {
@@ -224,6 +240,10 @@ export const Wrapper = styled.div<WrapperProps>`
return css` return css`
.input { .input {
background: ${theme.colors.client.light}; background: ${theme.colors.client.light};
&:focus-within {
background: ${theme.colors.client.main};
}
} }
input[type='file'] { input[type='file'] {
@@ -248,6 +268,10 @@ export const Wrapper = styled.div<WrapperProps>`
.input { .input {
background: ${theme.colors.error.main}; background: ${theme.colors.error.main};
&:focus-within {
background: ${theme.colors.error.main};
}
} }
input[type='file'] { input[type='file'] {