Skip to content

Commit

Permalink
feat: add component styling options to form components
Browse files Browse the repository at this point in the history
  • Loading branch information
@jeroenreijs
jeroenreijs committed Jul 9, 2020
1 parent 704003c commit b63bf9e
Show file tree
Hide file tree
Showing 13 changed files with 1,871 additions and 65 deletions.
208 changes: 192 additions & 16 deletions src/components/autoComplete.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
propertyLabelOverride,
closeOnSelect,
renderCheckboxes,
hideLabel,
} = options;
const { Autocomplete } = window.MaterialUI.Lab;
const {
Expand Down Expand Up @@ -55,7 +56,7 @@
const textFieldProps = {
disabled,
variant,
label: labelText,
label: !hideLabel && labelText,
fullWidth,
size,
type,
Expand All @@ -64,6 +65,7 @@
placeholder: placeholderText,
margin,
helperText: helper,
classes: { root: classes.formControl },
};

useEffect(() => {
Expand All @@ -83,8 +85,8 @@
},
endAdornment: (
<>
{currentValue && <Close className={classes.icon} />}
{!freeSolo && <ExpandMore className={classes.icon} />}
{currentValue && <Close />}
{!freeSolo && <ExpandMore />}
</>
),
};
Expand Down Expand Up @@ -205,6 +207,7 @@
const renderOption = (option, { selected }) => (
<>
<Checkbox
classes={{ root: classes.checkbox }}
icon={<CheckBoxOutlineBlank fontSize="small" />}
checkedIcon={<CheckBox fontSize="small" />}
style={{ marginRight: 8 }}
Expand All @@ -221,6 +224,11 @@
options={data.results}
value={getDefaultValue(data.results)}
getOptionLabel={renderLabel}
PopoverProps={{
classes: {
root: classes.popover,
},
}}
onInputChange={(_, inputValue) => {
if (!freeSolo) {
return;
Expand Down Expand Up @@ -265,19 +273,187 @@
</GetAll>
);
})(),
styles: () => () => ({
root: {
display: ({ options: { fullWidth } }) =>
fullWidth ? 'block' : 'inline-block',
'& > *': {
pointerEvents: 'none',
styles: B => t => {
const style = new B.Styling(t);
const { color: colorFunc } = B;
const getOpacColor = (col, val) => colorFunc.alpha(col, val);
return {
root: {
display: ({ options: { fullWidth } }) =>
fullWidth ? 'block' : 'inline-block',
'& > *': {
pointerEvents: 'none',
},
},
checkbox: {
color: ({ options: { checkboxColor } }) => [
style.getColor(checkboxColor),
'!important',
],
'&.MuiCheckbox-root.Mui-checked:hover, &.MuiIconButton-root:hover': {
backgroundColor: ({ options: { checkboxColor } }) => [
getOpacColor(style.getColor(checkboxColor), 0.04),
'!important',
],
},
},
},
icon: {
'&.MuiSvgIcon-root': {
color: 'rgba(0, 0, 0, 0.54)',
fontSize: '1.25rem',
formControl: {
'& > label': {
color: ({ options: { labelColor } }) => [
style.getColor(labelColor),
'!important',
],
zIndex: ({ options: { variant } }) =>
variant === 'standard' ? 1 : null,
'&.Mui-focused': {
color: ({ options: { borderFocusColor } }) => [
style.getColor(borderFocusColor),
'!important',
],
},
'&.Mui-error': {
color: ({ options: { errorColor } }) => [
style.getColor(errorColor),
'!important',
],
},
'&.Mui-disabled': {
pointerEvents: 'none',
opacity: '0.7',
},
},
'& > p': {
color: ({ options: { helperColor } }) => [
style.getColor(helperColor),
'!important',
],
'&.Mui-error': {
color: ({ options: { errorColor } }) => [
style.getColor(errorColor),
'!important',
],
},
},
'& .MuiInputBase-root': {
color: ({ options: { textColor } }) => [
style.getColor(textColor),
'!important',
],
backgroundColor: ({ options: { backgroundColor } }) => [
style.getColor(backgroundColor),
'!important',
],
'&:hover': {
'& .MuiOutlinedInput-notchedOutline, & .MuiFilledInput-underline, & .MuiInput-underline': {
borderColor: ({ options: { borderHoverColor } }) => [
style.getColor(borderHoverColor),
'!important',
],
},
},
'&.Mui-focused, &.Mui-focused:hover': {
'& .MuiOutlinedInput-notchedOutline, & .MuiFilledInput-underline, & .MuiInput-underline': {
borderColor: ({ options: { borderFocusColor } }) => [
style.getColor(borderFocusColor),
'!important',
],
},
},
'& fieldset': {
top: ({ options: { hideLabel } }) => (hideLabel ? 0 : null),
},
'& legend': {
display: ({ options: { hideLabel } }) =>
hideLabel ? ['none', '!important'] : null,
},
'& input': {
'&::placeholder': {
color: ({ options: { placeholderColor } }) => [
style.getColor(placeholderColor),
'!important',
],
},
},
'&.Mui-disabled': {
pointerEvents: 'none',
opacity: '0.7',
},
'& .MuiChip-root': {
color: ({ options: { textColorChip } }) => [
style.getColor(textColorChip),
'!important',
],
backgroundColor: ({ options: { backgroundColorChip } }) => [
style.getColor(backgroundColorChip),
'!important',
],
},
},
'& .MuiIconButton-root': {
color: ({ options: { textColor } }) => [
style.getColor(textColor),
'!important',
],
},
'& .MuiOutlinedInput-notchedOutline, & .MuiFilledInput-underline, & .MuiInput-underline': {
borderColor: ({ options: { borderColor } }) => [
style.getColor(borderColor),
'!important',
],
},
'& .MuiInput-underline, & .MuiFilledInput-underline': {
'&::before, &::after': {
borderColor: ({ options: { borderColor } }) => [
style.getColor(borderColor),
'!important',
],
},
'&:hover': {
'&::before, &::after': {
borderColor: ({ options: { borderHoverColor } }) => [
style.getColor(borderHoverColor),
'!important',
],
},
},
'&.Mui-focused::before, &.Mui-focused::after, &.Mui-focused:hover::before, &.Mui-focused:hover::after': {
borderColor: ({ options: { borderFocusColor } }) => [
style.getColor(borderFocusColor),
'!important',
],
},
},
'& .MuiInputBase-root.Mui-error, & .MuiInputBase-root.Mui-error:hover, & .MuiInputBase-root.Mui-error.Mui-focused, & .MuiInputBase-root.Mui-error.Mui-focused:hover': {
'& .MuiOutlinedInput-notchedOutline, & .MuiFilledInput-underline, & .MuiInput-underline': {
borderColor: ({ options: { errorColor } }) => [
style.getColor(errorColor),
'!important',
],
},
'&.MuiInput-underline, &.MuiFilledInput-underline': {
'&::before, &::after': {
borderColor: ({ options: { errorColor } }) => [
style.getColor(errorColor),
'!important',
],
},
'&:hover': {
'&::before, &::after': {
borderColor: ({ options: { errorColor } }) => [
style.getColor(errorColor),
'!important',
],
},
},
'&.Mui-focused::before, &.Mui-focused::after, &.Mui-focused:hover::before, &.Mui-focused:hover::after': {
borderColor: ({ options: { errorColor } }) => [
style.getColor(errorColor),
'!important',
],
},
},
},
},
},
}),
};
},
}))();
95 changes: 85 additions & 10 deletions src/components/checkbox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
margin,
filter,
fullWidth,
hideLabel,
} = options;

const { useText, getActionInput, getProperty, GetAll } = B;
Expand Down Expand Up @@ -117,28 +118,102 @@

const Control = (
<FormControl
classes={{ root: classes.formControl }}
margin={margin}
component="fieldset"
required={required}
error={error}
fullWidth={fullWidth}
>
{!!labelText && <FormLabel component="legend">{labelText}</FormLabel>}
{labelText && !hideLabel && (
<FormLabel component="legend">{labelText}</FormLabel>
)}
<FormGroup row={row}>{Checkboxes}</FormGroup>
{!!componentHelperText && (
{componentHelperText && (
<FormHelperText>{componentHelperText}</FormHelperText>
)}
</FormControl>
);
return isDev ? <div className={classes.root}>{Control}</div> : Control;
})(),
styles: () => () => ({
root: {
display: ({ options: { fullWidth } }) =>
fullWidth ? 'block' : 'inline-block',
'& > *': {
pointerEvents: 'none',
styles: B => t => {
const style = new B.Styling(t);
const { color: colorFunc } = B;
const getOpacColor = (col, val) => colorFunc.alpha(col, val);
return {
root: {
display: ({ options: { fullWidth } }) =>
fullWidth ? 'block' : 'inline-block',
'& > *': {
pointerEvents: 'none',
},
},
formControl: {
'& > legend': {
color: ({ options: { labelColor } }) => [
style.getColor(labelColor),
'!important',
],
'&.Mui-error': {
color: ({ options: { errorColor } }) => [
style.getColor(errorColor),
'!important',
],
},
'&.Mui-disabled': {
pointerEvents: 'none',
opacity: '0.7',
},
},
'& > p': {
color: ({ options: { helperColor } }) => [
style.getColor(helperColor),
'!important',
],
'&.Mui-error': {
color: ({ options: { errorColor } }) => [
style.getColor(errorColor),
'!important',
],
},
},
'& .MuiFormControlLabel-root': {
'& .MuiCheckbox-root': {
color: ({ options: { checkboxColor } }) => [
style.getColor(checkboxColor),
'!important',
],
'&:hover': {
backgroundColor: ({ options: { checkboxColor } }) => [
getOpacColor(style.getColor(checkboxColor), 0.04),
'!important',
],
},
'&.Mui-checked': {
color: ({ options: { checkboxColorChecked } }) => [
style.getColor(checkboxColorChecked),
'!important',
],
'&:hover': {
backgroundColor: ({ options: { checkboxColorChecked } }) => [
getOpacColor(style.getColor(checkboxColorChecked), 0.04),
'!important',
],
},
},
},
'& .MuiTypography-root': {
color: ({ options: { textColor } }) => [
style.getColor(textColor),
'!important',
],
},
'&.Mui-disabled': {
pointerEvents: 'none',
opacity: '0.7',
},
},
},
},
}),
};
},
}))();
Loading

0 comments on commit b63bf9e

Please sign in to comment.