Skip to content

Commit

Permalink
Add FilledInput
Browse files Browse the repository at this point in the history
  • Loading branch information
@eps1lon
eps1lon committed Mar 30, 2020
1 parent 7d55e23 commit 92fb51e
Show file tree
Hide file tree
Showing 5 changed files with 143 additions and 31 deletions.
6 changes: 2 additions & 4 deletions docs/pages/api-docs/filled-input.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,15 +27,13 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
| <span class="prop-name">autoComplete</span> | <span class="prop-type">string</span> | | This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it's more like an autofill. You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill). |
| <span class="prop-name">autoFocus</span> | <span class="prop-type">bool</span> | | If `true`, the `input` element will be focused during the first mount. |
| <span class="prop-name">classes</span> | <span class="prop-type">object</span> | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
| <span class="prop-name">className</span> | <span class="prop-type">string</span> | | The CSS class name of the wrapper element. |
| <span class="prop-name">color</span> | <span class="prop-type">'primary'<br>&#124;&nbsp;'secondary'</span> | | The color of the component. It supports those theme colors that make sense for this component. |
| <span class="prop-name">defaultValue</span> | <span class="prop-type">any</span> | | The default `input` element value. Use when the component is not controlled. |
| <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | | If `true`, the `input` element will be disabled. |
| <span class="prop-name">disableUnderline</span> | <span class="prop-type">bool</span> | | If `true`, the input will not have an underline. |
| <span class="prop-name">endAdornment</span> | <span class="prop-type">node</span> | | End `InputAdornment` for this component. |
| <span class="prop-name">error</span> | <span class="prop-type">bool</span> | | If `true`, the input will indicate an error. This is normally obtained via context from FormControl. |
| <span class="prop-name">fullWidth</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the input will take up the full width of its container. |
| <span class="prop-name">id</span> | <span class="prop-type">string</span> | | The id of the `input` element. |
| <span class="prop-name">inputComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'input'</span> | The component used for the native input. Either a string to use a DOM element or a component. |
| <span class="prop-name">inputProps</span> | <span class="prop-type">object</span> | | [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. |
| <span class="prop-name">inputRef</span> | <span class="prop-type">ref</span> | | Pass a ref to the `input` element. |
Expand All @@ -46,8 +44,8 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
| <span class="prop-name">placeholder</span> | <span class="prop-type">string</span> | | The short hint displayed in the input before the user enters a value. |
| <span class="prop-name">readOnly</span> | <span class="prop-type">bool</span> | | It prevents the user from changing the value of the field (not from interacting with the field). |
| <span class="prop-name">required</span> | <span class="prop-type">bool</span> | | If `true`, the `input` element will be required. |
| <span class="prop-name">rows</span> | <span class="prop-type">string<br>&#124;&nbsp;number</span> | | Number of rows to display when multiline option is set to true. |
| <span class="prop-name">rowsMax</span> | <span class="prop-type">string<br>&#124;&nbsp;number</span> | | Maximum number of rows to display when multiline option is set to true. |
| <span class="prop-name">rows</span> | <span class="prop-type">number<br>&#124;&nbsp;string</span> | | Number of rows to display when multiline option is set to true. |
| <span class="prop-name">rowsMax</span> | <span class="prop-type">number<br>&#124;&nbsp;string</span> | | Maximum number of rows to display when multiline option is set to true. |
| <span class="prop-name">startAdornment</span> | <span class="prop-type">node</span> | | Start `InputAdornment` for this component. |
| <span class="prop-name">type</span> | <span class="prop-type">string</span> | <span class="prop-default">'text'</span> | Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types). |
| <span class="prop-name">value</span> | <span class="prop-type">any</span> | | The value of the `input` element, required for a controlled component. |
Expand Down
8 changes: 4 additions & 4 deletions packages/material-ui/src/FilledInput/FilledInput.d.ts
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import * as React from 'react';
import { StandardProps } from '..';
import { InputBaseProps, InputBaseClassKey } from '../InputBase';

export interface FilledInputProps extends StandardProps<InputBaseProps, FilledInputClassKey> {
/**
* If `true`, the input will not have an underline.
*/
disableUnderline?: boolean;
}

Expand All @@ -19,6 +21,4 @@ export type FilledInputClassKey = InputBaseClassKey | 'colorSecondary' | 'underl
* - [FilledInput API](https://material-ui.com/api/filled-input/)
* - inherits [InputBase API](https://material-ui.com/api/input-base/)
*/
declare const FilledInput: React.ComponentType<FilledInputProps>;

export default FilledInput;
export default function FilledInput(props: FilledInputProps): JSX.Element;
18 changes: 7 additions & 11 deletions packages/material-ui/src/FilledInput/FilledInput.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,6 +179,10 @@ const FilledInput = React.forwardRef(function FilledInput(props, ref) {
});

FilledInput.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* This prop helps users to fill forms faster, especially on mobile devices.
* The name can be confusing, as it's more like an autofill.
Expand All @@ -193,11 +197,7 @@ FilledInput.propTypes = {
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object.isRequired,
/**
* The CSS class name of the wrapper element.
*/
className: PropTypes.string,
classes: PropTypes.object,
/**
* The color of the component. It supports those theme colors that make sense for this component.
*/
Expand Down Expand Up @@ -227,10 +227,6 @@ FilledInput.propTypes = {
* If `true`, the input will take up the full width of its container.
*/
fullWidth: PropTypes.bool,
/**
* The id of the `input` element.
*/
id: PropTypes.string,
/**
* The component used for the native input.
* Either a string to use a DOM element or a component.
Expand Down Expand Up @@ -280,11 +276,11 @@ FilledInput.propTypes = {
/**
* Number of rows to display when multiline option is set to true.
*/
rows: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
/**
* Maximum number of rows to display when multiline option is set to true.
*/
rowsMax: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
rowsMax: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
/**
* Start `InputAdornment` for this component.
*/
Expand Down
99 changes: 88 additions & 11 deletions packages/material-ui/src/InputBase/InputBase.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,25 +5,97 @@ export interface InputBaseProps
extends StandardProps<
React.HTMLAttributes<HTMLDivElement>,
InputBaseClassKey,
'onChange' | 'onKeyUp' | 'onKeyDown' | 'onBlur' | 'onFocus' | 'defaultValue'
/*
* `onChange`, `onKeyUp`, `onKeyDown`, `onBlur`, `onFocus` are applied to the inner `InputComponent`,
* which by default is an input or textarea. Since these handlers differ from the
* ones inherited by `React.HTMLAttributes<HTMLDivElement>` we need to omit them.
*/
'children' | 'onChange' | 'onKeyUp' | 'onKeyDown' | 'onBlur' | 'onFocus' | 'defaultValue'
> {
/**
* This prop helps users to fill forms faster, especially on mobile devices.
* The name can be confusing, as it's more like an autofill.
* You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
*/
autoComplete?: string;
/**
* If `true`, the `input` element will be focused during the first mount.
*/
autoFocus?: boolean;
/**
* The color of the component. It supports those theme colors that make sense for this component.
*/
color?: 'primary' | 'secondary';
/**
* The default `input` element value. Use when the component is not controlled.
*/
defaultValue?: unknown;
/**
* If `true`, the `input` element will be disabled.
*/
disabled?: boolean;
/**
* End `InputAdornment` for this component.
*/
endAdornment?: React.ReactNode;
/**
* If `true`, the input will indicate an error. This is normally obtained via context from
* FormControl.
*/
error?: boolean;
/**
* If `true`, the input will take up the full width of its container.
*/
fullWidth?: boolean;
id?: string;
/**
* The component used for the native input.
* Either a string to use a DOM element or a component.
*/
inputComponent?: React.ElementType<InputBaseComponentProps>;
/**
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
*/
inputProps?: InputBaseComponentProps;
/**
* Pass a ref to the `input` element.
*/
inputRef?: React.Ref<any>;
/**
* If `dense`, will adjust vertical spacing. This is normally obtained via context from
* FormControl.
*/
margin?: 'dense' | 'none';
/**
* If `true`, a textarea element will be rendered.
*/
multiline?: boolean;
/**
* Name attribute of the `input` element.
*/
name?: string;
onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
/**
* Callback fired when the value is changed.
*
* @param {object} event The event source of the callback.
* You can pull out the new value by accessing `event.target.value` (string).
*/
onChange?: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement | HTMLInputElement>;
onKeyUp?: React.KeyboardEventHandler<HTMLTextAreaElement | HTMLInputElement>;
/**
* The short hint displayed in the input before the user enters a value.
*/
placeholder?: string;
/**
* It prevents the user from changing the value of the field
* (not from interacting with the field).
*/
readOnly?: boolean;
/**
* If `true`, the `input` element will be required.
*/
required?: boolean;
renderPrefix?: (state: {
disabled?: boolean;
Expand All @@ -34,22 +106,27 @@ export interface InputBaseProps
required?: boolean;
startAdornment?: React.ReactNode;
}) => React.ReactNode;
/**
* Number of rows to display when multiline option is set to true.
*/
rows?: string | number;
/**
* Maximum number of rows to display when multiline option is set to true.
*/
rowsMax?: string | number;
rowsMin?: string | number;
/**
* Start `InputAdornment` for this component.
*/
startAdornment?: React.ReactNode;
/**
* Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
*/
type?: string;
value?: unknown;
/**
* `onChange`, `onKeyUp`, `onKeyDown`, `onBlur`, `onFocus` are applied to the inner `InputComponent`,
* which by default is an input or textarea. Since these handlers differ from the
* ones inherited by `React.HTMLAttributes<HTMLDivElement>` we need to omit them.
* The value of the `input` element, required for a controlled component.
*/
onChange?: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement | HTMLInputElement>;
onKeyUp?: React.KeyboardEventHandler<HTMLTextAreaElement | HTMLInputElement>;
onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
value?: unknown;
}

export interface InputBaseComponentProps
Expand Down
43 changes: 42 additions & 1 deletion scripts/generateProptypes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,39 @@ enum GenerateResult {
Failed,
}

/**
* A map of components and their props that should be documented
* but are not used directly in their implementation.
*
* TODO: In the future we want to remove them from the API docs in favor
* of dynamically loading them. At that point this list should be removed.
* TODO: typecheck values
*/
const useExternalDocumentation: Record<string, string[]> = {
FilledInput: [
'autoComplete',
'autoFocus',
'color',
'defaultValue',
'disabled',
'endAdornment',
'error',
'inputProps',
'inputRef',
'margin',
'name',
'onChange',
'placeholder',
'readOnly',
'required',
'rows',
'rowsMax',
// TODO: why no rowsMin?
'startAdornment',
'value',
],
};

const tsconfig = ttp.loadConfig(path.resolve(__dirname, '../tsconfig.json'));

const prettierConfig = prettier.resolveConfig.sync(process.cwd(), {
Expand Down Expand Up @@ -71,7 +104,7 @@ async function generateProptypes(

return generated;
},
shouldInclude: ({ prop }) => {
shouldInclude: ({ component, prop }) => {
if (prop.name === 'children') {
return true;
}
Expand All @@ -90,6 +123,14 @@ async function generateProptypes(
});
}

const { name: componentName } = component;
if (
useExternalDocumentation[componentName] &&
useExternalDocumentation[componentName].includes(prop.name)
) {
shouldDocument = true;
}

return shouldDocument;
},
});
Expand Down

0 comments on commit 92fb51e

Please sign in to comment.