diff --git a/README.md b/README.md index 85651d12e72..6d649d39966 100644 --- a/README.md +++ b/README.md @@ -80,7 +80,7 @@ The `` component is a configuration component that allows to define su ```jsx // in posts.js import React from 'react'; -import { List, Datagrid, Edit, Create, SimpleForm, DateField, TextField, EditButton, TextInput, LongTextInput, DateInput } from 'react-admin'; +import { List, Datagrid, Edit, Create, SimpleForm, DateField, TextField, EditButton, TextInput, DateInput } from 'react-admin'; import BookIcon from '@material-ui/core/svg-icons/action/book'; export const PostIcon = BookIcon; @@ -107,7 +107,7 @@ export const PostEdit = (props) => ( - + @@ -120,7 +120,7 @@ export const PostCreate = (props) => ( - + diff --git a/UPGRADE.md b/UPGRADE.md index 665a03236e2..13878f90299 100644 --- a/UPGRADE.md +++ b/UPGRADE.md @@ -173,6 +173,15 @@ Components deprecated in 2.X have been removed in 3.x. This includes: * `ViewTitle` (use `Title` instead) * `RecordTitle` (use `TitleForRecord` instead) * `TitleDeprecated` (use `Title` instead) +* `LongTextInput` (use the `TextInput` instead) + +```diff +- import { LongTextInput } from 'react-admin'; +- ++ import { TextInput } from 'react-admin'; ++ +``` + * `BulkActions` (use the [`bulkActionButtons` prop](https://marmelab.com/react-admin/List.html#bulk-action-buttons) instead) ```diff diff --git a/docs/CreateEdit.md b/docs/CreateEdit.md index 036ccb47236..04e61007c0f 100644 --- a/docs/CreateEdit.md +++ b/docs/CreateEdit.md @@ -44,7 +44,7 @@ export default App; // in src/posts.js import React from 'react'; -import { Create, Edit, SimpleForm, TextInput, DateInput, LongTextInput, ReferenceManyField, Datagrid, TextField, DateField, EditButton } from 'react-admin'; +import { Create, Edit, SimpleForm, TextInput, DateInput, ReferenceManyField, Datagrid, TextField, DateField, EditButton } from 'react-admin'; import RichTextInput from 'ra-input-rich-text'; export const PostCreate = (props) => ( @@ -63,7 +63,7 @@ export const PostEdit = (props) => ( - + @@ -407,7 +407,7 @@ export const PostEdit = (props) => ( - + diff --git a/docs/Inputs.md b/docs/Inputs.md index 4812bd9dea6..07d6bf7df1e 100644 --- a/docs/Inputs.md +++ b/docs/Inputs.md @@ -10,7 +10,7 @@ An `Input` component displays an input, or a dropdown list, a list of radio butt ```jsx // in src/posts.js import React from 'react'; -import { Edit, LongTextInput, ReferenceInput, SelectInput, SimpleForm, TextInput } from 'react-admin'; +import { Edit, ReferenceInput, SelectInput, SimpleForm, TextInput } from 'react-admin'; export const PostEdit = (props) => ( } {...props}> @@ -20,7 +20,7 @@ export const PostEdit = (props) => ( - + ); @@ -562,29 +562,6 @@ If the default Dropzone label doesn't fit with your need, you can pass a `placeh Note that the file upload returns a [File](https://developer.mozilla.org/en/docs/Web/API/File) object. It is your responsibility to handle it depending on your API behavior. You can for instance encode it in base64, or send it as a multi-part form data. Check [this example](./DataProviders.md#decorating-your-rest-client-example-of-file-upload) for base64 encoding data by extending the REST Client. -## `` - -`` is the best choice for multiline text values. It renders as an auto expandable textarea. - -```jsx -import { LongTextInput } from 'react-admin'; - - -``` - -![LongTextInput](./img/long-text-input.png) - -You can make the `LongTextInput` component resettable using the `resettable` prop. This will add a reset button which will be displayed only when the field has a value and is focused. - -```jsx -import { LongTextInput } from 'react-admin'; - - -``` - -![resettable LongTextInput](./img/resettable-long-text-input.png) - - ## `` `` translates to a HTML ``. It is necessary for numeric values because of a [known React bug](https://github.com/facebook/react/issues/1425), which prevents using the more generic [``](#textinput) in that case. @@ -1110,7 +1087,6 @@ import { ChipField, Create, DateInput, - LongTextInput, ReferenceArrayInput, SelectArrayInput, TextInput, @@ -1120,7 +1096,7 @@ export const PostCreate = props => ( - + @@ -1153,6 +1129,12 @@ You can choose a specific input type using the `type` attribute, for instance `t ``` +You can make the `TextInput` expandable using the `multiline` prop for multiline text values. It renders as an auto expandable textarea. + +```jsx + +``` + You can make the `TextInput` component resettable using the `resettable` prop. This will add a reset button which will be displayed only when the field has a value and is focused. ```jsx diff --git a/docs/Reference.md b/docs/Reference.md index 483ddd9523c..99545c5f46d 100644 --- a/docs/Reference.md +++ b/docs/Reference.md @@ -53,7 +53,6 @@ title: "Reference" * [``](./Theming.md#Loading) * [``](./List.md#the-list-component) * `` -* [``](./Inputs.md#longtextinput) * [``](./Theming.md#using-a-custom-menu) * `` * [``](./Inputs.md#booleaninput-and-nullablebooleaninput) diff --git a/docs/Tutorial.md b/docs/Tutorial.md index a5e3727bd7b..d059ff88587 100644 --- a/docs/Tutorial.md +++ b/docs/Tutorial.md @@ -472,7 +472,7 @@ export const PostEdit = props => ( - - -+ ++ ); @@ -493,7 +493,7 @@ export const PostCreate = props => ( - + ); diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 72b5c901b08..d985d1b910b 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -555,11 +555,6 @@ <ImageInput> -
  • - - <LongTextInput> - -
  • <NumberInput> diff --git a/docs/index.md b/docs/index.md index c46435e6630..5321eb8416d 100644 --- a/docs/index.md +++ b/docs/index.md @@ -80,7 +80,7 @@ The `` component is a configuration component that allows to define su ```jsx // in posts.js import React from 'react'; -import { List, Datagrid, Edit, Create, SimpleForm, DateField, TextField, EditButton, TextInput, LongTextInput, DateInput } from 'react-admin'; +import { List, Datagrid, Edit, Create, SimpleForm, DateField, TextField, EditButton, TextInput, DateInput } from 'react-admin'; import BookIcon from '@material-ui/icons/Book'; export const PostIcon = BookIcon; @@ -107,7 +107,7 @@ export const PostEdit = (props) => ( - + @@ -120,7 +120,7 @@ export const PostCreate = (props) => ( - + diff --git a/examples/tutorial/src/posts.js b/examples/tutorial/src/posts.js index c4da4dd2b65..4283f5c99b0 100644 --- a/examples/tutorial/src/posts.js +++ b/examples/tutorial/src/posts.js @@ -12,7 +12,6 @@ import { ReferenceField, TextField, EditButton, - LongTextInput, ReferenceInput, SelectInput, SimpleForm, @@ -60,7 +59,7 @@ export const PostEdit = props => ( - + ); @@ -72,7 +71,7 @@ export const PostCreate = props => ( - + ); diff --git a/packages/ra-input-rich-text/README.md b/packages/ra-input-rich-text/README.md index 249294b57ea..4a265a8f575 100644 --- a/packages/ra-input-rich-text/README.md +++ b/packages/ra-input-rich-text/README.md @@ -18,7 +18,6 @@ import { DateInput, Edit, EditButton, - LongTextInput, TextInput, } from 'react-admin'; import RichTextInput from 'ra-input-rich-text'; @@ -31,7 +30,7 @@ export const PostEdit = (props) => ( } {...props}> - + diff --git a/packages/ra-ui-materialui/src/input/LongTextInput.spec.tsx b/packages/ra-ui-materialui/src/input/LongTextInput.spec.tsx deleted file mode 100644 index 2155b064e98..00000000000 --- a/packages/ra-ui-materialui/src/input/LongTextInput.spec.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import React from 'react'; -import { render, cleanup, fireEvent } from '@testing-library/react'; -import { Form } from 'react-final-form'; -import { required } from 'ra-core'; - -import LongTextInput from './LongTextInput'; - -describe('', () => { - afterEach(cleanup); - const defaultProps = { - source: 'body', - resource: 'posts', - }; - - it('should render the input as a textarea', () => { - const { getByLabelText } = render( -
    } - /> - ); - const input = getByLabelText( - 'resources.posts.fields.body' - ) as HTMLInputElement; - expect(input.tagName).toEqual('TEXTAREA'); - expect(input.value).toEqual('hello'); - }); - - describe('error message', () => { - it('should not be displayed if field is pristine', () => { - const { queryByText } = render( - ( - - )} - /> - ); - const error = queryByText('ra.validation.required'); - expect(error).toBeNull(); - }); - - it('should not be displayed if field has been touched but is valid', () => { - // Validator which always return undefined so the field is valid - const { getByLabelText, queryByText } = render( - ( - - )} - /> - ); - const input = getByLabelText('resources.posts.fields.body *'); - fireEvent.change(input, { target: { value: 'test' } }); - fireEvent.blur(input); - const error = queryByText('ra.validation.required'); - expect(error).toBeNull(); - }); - - it('should be displayed if field has been touched and is invalid', () => { - const { getByLabelText, queryByText } = render( - ( - - )} - /> - ); - const input = getByLabelText('resources.posts.fields.body *'); - fireEvent.blur(input); - const error = queryByText('ra.validation.required'); - expect(error).not.toBeNull(); - }); - }); -}); diff --git a/packages/ra-ui-materialui/src/input/LongTextInput.tsx b/packages/ra-ui-materialui/src/input/LongTextInput.tsx deleted file mode 100644 index 421184c73c9..00000000000 --- a/packages/ra-ui-materialui/src/input/LongTextInput.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import TextInput from './TextInput'; - -/** - * @deprecated use instead - */ -export const LongTextInput = props => { - console.warn( - 'The LongTextInput component is deprecated. You should instead use the TextInput component and set its multiline and fullWidth props to true.' - ); - return ; -}; - -LongTextInput.defaultProps = { - multiline: true, - fullWidth: true, -}; - -export default LongTextInput; diff --git a/packages/ra-ui-materialui/src/input/index.ts b/packages/ra-ui-materialui/src/input/index.ts index 09d172b85ca..0dcdaa4220e 100644 --- a/packages/ra-ui-materialui/src/input/index.ts +++ b/packages/ra-ui-materialui/src/input/index.ts @@ -10,7 +10,6 @@ import ImageInput from './ImageInput'; import InputHelperText from './InputHelperText'; import InputPropTypes from './InputPropTypes'; import Labeled from './Labeled'; -import LongTextInput from './LongTextInput'; import NullableBooleanInput from './NullableBooleanInput'; import NumberInput from './NumberInput'; import RadioButtonGroupInput from './RadioButtonGroupInput'; @@ -35,7 +34,6 @@ export { InputHelperText, InputPropTypes, Labeled, - LongTextInput, NullableBooleanInput, NumberInput, RadioButtonGroupInput, diff --git a/packages/react-admin/README.md b/packages/react-admin/README.md index 75512364db7..cf70929c888 100644 --- a/packages/react-admin/README.md +++ b/packages/react-admin/README.md @@ -76,7 +76,7 @@ The `` component is a configuration component that allows to define su ```jsx // in posts.js import React from 'react'; -import { List, Datagrid, Edit, Create, SimpleForm, DateField, TextField, EditButton, TextInput, LongTextInput, DateInput } from 'react-admin'; +import { List, Datagrid, Edit, Create, SimpleForm, DateField, TextField, EditButton, TextInput, DateInput } from 'react-admin'; export PostIcon from '@material-ui/core/svg-icons/action/book'; export const PostList = (props) => ( @@ -102,7 +102,7 @@ export const PostEdit = (props) => ( - + @@ -115,7 +115,7 @@ export const PostCreate = (props) => ( - +