Skip to content

Commit

Permalink
Fixed material ui types and fixed text field select variation
Browse files Browse the repository at this point in the history
  • Loading branch information
@cliedeman
cliedeman committed Dec 1, 2018
1 parent 34ba215 commit a555416
Show file tree
Hide file tree
Showing 12 changed files with 127 additions and 55 deletions.
13 changes: 10 additions & 3 deletions src/TextField.tsx
View file
Expand Up @@ -12,6 +12,7 @@ export interface TextFieldProps
export const fieldToTextField = ({
field,
form,
variant,
disabled = false,
...props
}: TextFieldProps): MuiTextFieldProps => {
Expand All @@ -24,14 +25,20 @@ export const fieldToTextField = ({
return {
...props,
...field,
// Hack to work around type issue
// See: https://github.com/Microsoft/TypeScript/issues/28791
variant: variant as any,
error: showError,
helperText: showError ? fieldError : props.helperText,
disabled: isSubmitting || disabled,
};
};

export const TextField: React.ComponentType<TextFieldProps> = (
props: TextFieldProps
) => <MuiTextField {...fieldToTextField(props)} />;
export const TextField: React.ComponentType<TextFieldProps> = ({
children,
...props
}: TextFieldProps) => (
<MuiTextField {...fieldToTextField(props)} children={children} />
);

TextField.displayName = 'FormikMaterialUITextField';
5 changes: 3 additions & 2 deletions src/__tests__/__snapshots__/Checkbox.test.tsx.snap
View file
Expand Up @@ -2,10 +2,11 @@

exports[`Checkbox Renders Correctly 1`] = `
<form
onReset={[Function]}
onSubmit={[Function]}
>
<span
className="MuiButtonBase-root-17 MuiIconButton-root-11 MuiSwitchBase-root-7 MuiCheckbox-root-1 MuiCheckbox-colorSecondary-6"
className="MuiButtonBase-root-17 MuiIconButton-root-11 MuiPrivateSwitchBase-root-7 MuiCheckbox-root-1 MuiCheckbox-colorSecondary-6"
label="Checkbox"
onBlur={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -35,7 +36,7 @@ exports[`Checkbox Renders Correctly 1`] = `
</svg>
<input
checked=""
className="MuiSwitchBase-input-10"
className="MuiPrivateSwitchBase-input-10"
data-indeterminate={false}
disabled={false}
name="test"
Expand Down
37 changes: 19 additions & 18 deletions src/__tests__/__snapshots__/RadioGroup.test.tsx.snap
View file
Expand Up @@ -2,6 +2,7 @@

exports[`Radio Group Renders Correctly 1`] = `
<form
onReset={[Function]}
onSubmit={[Function]}
>
<div
Expand All @@ -14,7 +15,7 @@ exports[`Radio Group Renders Correctly 1`] = `
className="MuiFormControlLabel-root-3"
>
<span
className="MuiButtonBase-root-22 MuiIconButton-root-16 MuiSwitchBase-root-12 MuiRadio-root-7 MuiRadio-colorSecondary-11"
className="MuiButtonBase-root-24 MuiIconButton-root-18 MuiPrivateSwitchBase-root-14 MuiRadio-root-9 MuiRadio-colorSecondary-13"
onBlur={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
Expand All @@ -28,11 +29,11 @@ exports[`Radio Group Renders Correctly 1`] = `
tabIndex={null}
>
<span
className="MuiIconButton-label-21"
className="MuiIconButton-label-23"
>
<svg
aria-hidden="true"
className="MuiSvgIcon-root-25"
className="MuiSvgIcon-root-27"
focusable="false"
role="presentation"
viewBox="0 0 24 24"
Expand All @@ -43,19 +44,19 @@ exports[`Radio Group Renders Correctly 1`] = `
</svg>
<input
checked={false}
className="MuiSwitchBase-input-15"
className="MuiPrivateSwitchBase-input-17"
name="radio-group"
onChange={[Function]}
type="radio"
value="painting"
/>
</span>
<span
className="MuiTouchRipple-root-34"
className="MuiTouchRipple-root-71"
/>
</span>
<span
className="MuiTypography-root-41 MuiTypography-body1-50 MuiFormControlLabel-label-6"
className="MuiTypography-root-36 MuiTypography-body1-45 MuiFormControlLabel-label-8"
>
Painting
</span>
Expand All @@ -64,7 +65,7 @@ exports[`Radio Group Renders Correctly 1`] = `
className="MuiFormControlLabel-root-3"
>
<span
className="MuiButtonBase-root-22 MuiIconButton-root-16 MuiSwitchBase-root-12 MuiRadio-root-7 MuiRadio-colorSecondary-11"
className="MuiButtonBase-root-24 MuiIconButton-root-18 MuiPrivateSwitchBase-root-14 MuiRadio-root-9 MuiRadio-colorSecondary-13"
onBlur={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
Expand All @@ -78,11 +79,11 @@ exports[`Radio Group Renders Correctly 1`] = `
tabIndex={null}
>
<span
className="MuiIconButton-label-21"
className="MuiIconButton-label-23"
>
<svg
aria-hidden="true"
className="MuiSvgIcon-root-25"
className="MuiSvgIcon-root-27"
focusable="false"
role="presentation"
viewBox="0 0 24 24"
Expand All @@ -93,28 +94,28 @@ exports[`Radio Group Renders Correctly 1`] = `
</svg>
<input
checked={false}
className="MuiSwitchBase-input-15"
className="MuiPrivateSwitchBase-input-17"
name="radio-group"
onChange={[Function]}
type="radio"
value="drawing"
/>
</span>
<span
className="MuiTouchRipple-root-34"
className="MuiTouchRipple-root-71"
/>
</span>
<span
className="MuiTypography-root-41 MuiTypography-body1-50 MuiFormControlLabel-label-6"
className="MuiTypography-root-36 MuiTypography-body1-45 MuiFormControlLabel-label-8"
>
Drawing
</span>
</label>
<label
className="MuiFormControlLabel-root-3 MuiFormControlLabel-disabled-5"
className="MuiFormControlLabel-root-3 MuiFormControlLabel-disabled-7"
>
<span
className="MuiButtonBase-root-22 MuiButtonBase-disabled-23 MuiIconButton-root-16 MuiIconButton-disabled-20 MuiSwitchBase-root-12 MuiRadio-root-7 MuiRadio-colorSecondary-11 MuiSwitchBase-disabled-14 MuiRadio-disabled-9"
className="MuiButtonBase-root-24 MuiButtonBase-disabled-25 MuiIconButton-root-18 MuiIconButton-disabled-22 MuiPrivateSwitchBase-root-14 MuiRadio-root-9 MuiRadio-colorSecondary-13 MuiPrivateSwitchBase-disabled-16 MuiRadio-disabled-11"
onBlur={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
Expand All @@ -128,11 +129,11 @@ exports[`Radio Group Renders Correctly 1`] = `
tabIndex="-1"
>
<span
className="MuiIconButton-label-21"
className="MuiIconButton-label-23"
>
<svg
aria-hidden="true"
className="MuiSvgIcon-root-25"
className="MuiSvgIcon-root-27"
focusable="false"
role="presentation"
viewBox="0 0 24 24"
Expand All @@ -143,7 +144,7 @@ exports[`Radio Group Renders Correctly 1`] = `
</svg>
<input
checked={false}
className="MuiSwitchBase-input-15"
className="MuiPrivateSwitchBase-input-17"
disabled={true}
name="radio-group"
onChange={[Function]}
Expand All @@ -153,7 +154,7 @@ exports[`Radio Group Renders Correctly 1`] = `
</span>
</span>
<span
className="MuiTypography-root-41 MuiTypography-body1-50 MuiFormControlLabel-label-6 MuiFormControlLabel-disabled-5"
className="MuiTypography-root-36 MuiTypography-body1-45 MuiFormControlLabel-label-8 MuiFormControlLabel-disabled-7"
>
None
</span>
Expand Down
2 changes: 1 addition & 1 deletion src/__tests__/__snapshots__/Select.test.tsx.snap
View file
Expand Up @@ -2,6 +2,7 @@

exports[`Select Renders Correctly 1`] = `
<form
onReset={[Function]}
onSubmit={[Function]}
>
<div
Expand All @@ -14,7 +15,6 @@ exports[`Select Renders Correctly 1`] = `
>
<div
aria-haspopup="true"
aria-owns={null}
aria-pressed="false"
className="MuiSelect-select-2 MuiSelect-selectMenu-5 MuiInputBase-input-31 MuiInput-input-16"
onBlur={[Function]}
Expand Down
6 changes: 3 additions & 3 deletions src/__tests__/__snapshots__/Switch.test.tsx.snap
View file
Expand Up @@ -2,13 +2,14 @@

exports[`Switch Renders Correctly 1`] = `
<form
onReset={[Function]}
onSubmit={[Function]}
>
<span
className="MuiSwitch-root-1"
>
<span
className="MuiButtonBase-root-20 MuiIconButton-root-14 MuiSwitchBase-root-10 MuiSwitch-switchBase-4 MuiSwitch-colorSecondary-7"
className="MuiButtonBase-root-20 MuiIconButton-root-14 MuiPrivateSwitchBase-root-10 MuiSwitch-switchBase-4 MuiSwitch-colorSecondary-7"
label="Text"
onBlur={[Function]}
onFocus={[Function]}
Expand All @@ -29,8 +30,7 @@ exports[`Switch Renders Correctly 1`] = `
className="MuiSwitch-icon-2"
/>
<input
checked={false}
className="MuiSwitchBase-input-13"
className="MuiPrivateSwitchBase-input-13"
disabled={false}
name="test"
onChange={[Function]}
Expand Down
7 changes: 4 additions & 3 deletions src/__tests__/__snapshots__/TextField.test.tsx.snap
View file
Expand Up @@ -2,24 +2,25 @@

exports[`TextField Renders Correctly 1`] = `
<form
onReset={[Function]}
onSubmit={[Function]}
>
<div
className="MuiFormControl-root-1"
>
<label
className="MuiFormLabel-root-12 MuiInputLabel-root-5 MuiInputLabel-formControl-6 MuiInputLabel-animated-9"
className="MuiFormLabel-root-16 MuiInputLabel-root-5 MuiInputLabel-formControl-10 MuiInputLabel-animated-13"
data-shrink={false}
>
Text
</label>
<div
className="MuiInputBase-root-32 MuiInput-root-19 MuiInput-underline-23 MuiInputBase-formControl-33 MuiInput-formControl-20"
className="MuiInputBase-root-36 MuiInput-root-23 MuiInput-underline-27 MuiInputBase-formControl-37 MuiInput-formControl-24"
onClick={[Function]}
>
<input
aria-invalid={false}
className="MuiInputBase-input-42 MuiInput-input-27"
className="MuiInputBase-input-46 MuiInput-input-31"
disabled={false}
name="test"
onBlur={[Function]}
Expand Down
2 changes: 1 addition & 1 deletion stories/KitchenSink.story.tsx
View file
Expand Up @@ -125,7 +125,7 @@ export default () => (
{isSubmitting && <LinearProgress />}
<br />
<Button
variant="raised"
variant="contained"
color="primary"
disabled={isSubmitting}
onClick={submitForm}
Expand Down
2 changes: 1 addition & 1 deletion stories/RadioGroup.story.tsx
View file
Expand Up @@ -52,7 +52,7 @@ export default () => (
<br />
<Button
disabled={!isValid}
variant="raised"
variant="contained"
color="primary"
onClick={submitForm}
>
Expand Down
2 changes: 1 addition & 1 deletion stories/Select.story.tsx
View file
Expand Up @@ -79,7 +79,7 @@ export default withStyles(styles)(({ classes }: WithStyles<typeof styles>) => (
</Field>
</FormControl>
<br />
<Button variant="raised" color="primary" onClick={submitForm}>
<Button variant="contained" color="primary" onClick={submitForm}>
Submit
</Button>
<br />
Expand Down
2 changes: 1 addition & 1 deletion stories/Selector.story.tsx
View file
Expand Up @@ -70,7 +70,7 @@ export default () => (
)}
/>
<br />
<Button variant="raised" color="primary" onClick={submitForm}>
<Button variant="contained" color="primary" onClick={submitForm}>
Submit
</Button>
<br />
Expand Down
2 changes: 1 addition & 1 deletion stories/SimpleFileUpload.story.tsx
View file
Expand Up @@ -48,7 +48,7 @@ export default withStyles(styles)(() => (
<Form>
<Field component={SimpleFileUpload} name="file" />
<br />
<Button variant="raised" color="primary" onClick={submitForm}>
<Button variant="contained" color="primary" onClick={submitForm}>
Submit
</Button>
<br />
Expand Down

0 comments on commit a555416

Please sign in to comment.