Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[RFR] remove deprecated LongTextInput #3586

Merged
merged 2 commits into from
Aug 26, 2019
Merged

[RFR] remove deprecated LongTextInput #3586

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e2604e2
remove LongTextInput
Kunnu01 Aug 23, 2019
8951e7b
revert changes of TextInput
Kunnu01 Aug 23, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ The `<Resource>` 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;

Expand All @@ -107,7 +107,7 @@ export const PostEdit = (props) => (
<TextInput disabled source="id" />
<TextInput source="title" />
<TextInput source="teaser" options={{ multiLine: true }} />
<LongTextInput source="body" />
<TextInput multiline source="body" />
<DateInput label="Publication date" source="published_at" />
<TextInput source="average_note" />
<TextInput disabled label="Nb views" source="views" />
Expand All @@ -120,7 +120,7 @@ export const PostCreate = (props) => (
<SimpleForm>
<TextInput source="title" />
<TextInput source="teaser" options={{ multiLine: true }} />
<LongTextInput source="body" />
<TextInput multiline source="body" />
<TextInput label="Publication date" source="published_at" />
<TextInput source="average_note" />
</SimpleForm>
Expand Down
9 changes: 9 additions & 0 deletions UPGRADE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
- <LongTextInput source="body" />
+ import { TextInput } from 'react-admin';
+ <TextInput multiline source="body" />
```

* `BulkActions` (use the [`bulkActionButtons` prop](https://marmelab.com/react-admin/List.html#bulk-action-buttons) instead)

```diff
Expand Down
6 changes: 3 additions & 3 deletions docs/CreateEdit.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => (
Expand All @@ -63,7 +63,7 @@ export const PostEdit = (props) => (
<SimpleForm>
<TextInput disabled label="Id" source="id" />
<TextInput source="title" validate={required()} />
<LongTextInput source="teaser" validate={required()} />
<TextInput multiline source="teaser" validate={required()} />
<RichTextInput source="body" validate={required()} />
<DateInput label="Publication date" source="published_at" />
<ReferenceManyField label="Comments" reference="comments" target="post_id">
Expand Down Expand Up @@ -407,7 +407,7 @@ export const PostEdit = (props) => (
<FormTab label="summary">
<TextInput disabled label="Id" source="id" />
<TextInput source="title" validate={required()} />
<LongTextInput source="teaser" validate={required()} />
<TextInput multiline source="teaser" validate={required()} />
</FormTab>
<FormTab label="body">
<RichTextInput source="body" validate={required()} addLabel={false} />
Expand Down
36 changes: 9 additions & 27 deletions docs/Inputs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => (
<Edit title={<PostTitle />} {...props}>
Expand All @@ -20,7 +20,7 @@ export const PostEdit = (props) => (
<SelectInput optionText="name" />
</ReferenceInput>
<TextInput source="title" />
<LongTextInput source="body" />
<TextInput multiline source="body" />
</SimpleForm>
</Edit>
);
Expand Down Expand Up @@ -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.

## `<LongTextInput>`

`<LongTextInput>` is the best choice for multiline text values. It renders as an auto expandable textarea.

```jsx
import { LongTextInput } from 'react-admin';

<LongTextInput source="teaser" />
```

![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';

<LongTextInput source="title" resettable />
```

![resettable LongTextInput](./img/resettable-long-text-input.png)


## `<NumberInput>`

`<NumberInput>` translates to a HTML `<input type="number">`. 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>`](#textinput) in that case.
Expand Down Expand Up @@ -1110,7 +1087,6 @@ import {
ChipField,
Create,
DateInput,
LongTextInput,
ReferenceArrayInput,
SelectArrayInput,
TextInput,
Expand All @@ -1120,7 +1096,7 @@ export const PostCreate = props => (
<Create {...props}>
<SimpleForm>
<TextInput source="title" />
<LongTextInput source="body" />
<TextInput multiline source="body" />
<DateInput source="published_at" />

<ReferenceArrayInput reference="tags" source="tags">
Expand Down Expand Up @@ -1153,6 +1129,12 @@ You can choose a specific input type using the `type` attribute, for instance `t
<TextInput label="Email Address" source="email" type="email" />
```

You can make the `TextInput` expandable using the `multiline` prop for multiline text values. It renders as an auto expandable textarea.

```jsx
<TextInput multiline source="body" />
```

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
Expand Down
1 change: 0 additions & 1 deletion docs/Reference.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,6 @@ title: "Reference"
* [`<Loading>`](./Theming.md#Loading)
* [`<List>`](./List.md#the-list-component)
* `<ListButton>`
* [`<LongTextInput>`](./Inputs.md#longtextinput)
* [`<Menu>`](./Theming.md#using-a-custom-menu)
* `<Notification>`
* [`<NullableBooleanInput>`](./Inputs.md#booleaninput-and-nullablebooleaninput)
Expand Down
4 changes: 2 additions & 2 deletions docs/Tutorial.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -472,7 +472,7 @@ export const PostEdit = props => (
- <TextInput source="id" />
<TextInput source="title" />
- <TextInput source="body" />
+ <LongTextInput source="body" />
+ <TextInput multiline source="body" />
</SimpleForm>
</Edit>
);
Expand All @@ -493,7 +493,7 @@ export const PostCreate = props => (
<SelectInput optionText="name" />
</ReferenceInput>
<TextInput source="title" />
<LongTextInput source="body" />
<TextInput multiline source="body" />
</SimpleForm>
</Create>
);
Expand Down
5 changes: 0 additions & 5 deletions docs/_layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -555,11 +555,6 @@
<code>&lt;ImageInput&gt;</code>
</a>
</li>
<li class="chapter">
<a href="#longtextinput">
<code>&lt;LongTextInput&gt;</code>
</a>
</li>
<li class="chapter">
<a href="#numberinput">
<code>&lt;NumberInput&gt;</code>
Expand Down
6 changes: 3 additions & 3 deletions docs/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ The `<Resource>` 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;

Expand All @@ -107,7 +107,7 @@ export const PostEdit = (props) => (
<TextInput disabled source="id" />
<TextInput source="title" />
<TextInput source="teaser" options={{ multiLine: true }} />
<LongTextInput source="body" />
<TextInput multiline source="body" />
<DateInput label="Publication date" source="published_at" />
<TextInput source="average_note" />
<TextInput disabled label="Nb views" source="views" />
Expand All @@ -120,7 +120,7 @@ export const PostCreate = (props) => (
<SimpleForm>
<TextInput source="title" />
<TextInput source="teaser" options={{ multiLine: true }} />
<LongTextInput source="body" />
<TextInput multiline source="body" />
<TextInput label="Publication date" source="published_at" />
<TextInput source="average_note" />
</SimpleForm>
Expand Down
5 changes: 2 additions & 3 deletions examples/tutorial/src/posts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import {
ReferenceField,
TextField,
EditButton,
LongTextInput,
ReferenceInput,
SelectInput,
SimpleForm,
Expand Down Expand Up @@ -60,7 +59,7 @@ export const PostEdit = props => (
<SelectInput optionText="name" />
</ReferenceInput>
<TextInput source="title" />
<LongTextInput source="body" />
<TextInput multiline source="body" />
</SimpleForm>
</Edit>
);
Expand All @@ -72,7 +71,7 @@ export const PostCreate = props => (
<SelectInput optionText="name" />
</ReferenceInput>
<TextInput source="title" />
<LongTextInput source="body" />
<TextInput multiline source="body" />
</SimpleForm>
</Create>
);
Expand Down
3 changes: 1 addition & 2 deletions packages/ra-input-rich-text/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import {
DateInput,
Edit,
EditButton,
LongTextInput,
TextInput,
} from 'react-admin';
import RichTextInput from 'ra-input-rich-text';
Expand All @@ -31,7 +30,7 @@ export const PostEdit = (props) => (
<Edit title={<PostTitle />} {...props}>
<TextInput disabled label="Id" source="id" />
<TextInput source="title" validation={{ required: true }} />
<LongTextInput source="teaser" validation={{ required: true }} />
<TextInput multiline source="teaser" validation={{ required: true }} />
<RichTextInput source="body" validation={{ required: true }} />
<DateInput label="Publication date" source="published_at" />
</Edit>
Expand Down
86 changes: 0 additions & 86 deletions packages/ra-ui-materialui/src/input/LongTextInput.spec.tsx
View file
Open in desktop

This file was deleted.

19 changes: 0 additions & 19 deletions packages/ra-ui-materialui/src/input/LongTextInput.tsx
View file
Open in desktop

This file was deleted.

4 changes: 4 additions & 0 deletions packages/ra-ui-materialui/src/input/TextInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ export const TextInput: FunctionComponent<
onFocus,
onChange,
validate,
multiline,
...rest
}) => {
const {
Expand Down Expand Up @@ -72,6 +73,8 @@ export const TextInput: FunctionComponent<
helperText={helperText}
/>
}
multiline={multiline}
Kunnu01 marked this conversation as resolved.
Show resolved Hide resolved
fullWidth={multiline}
{...options}
{...sanitizeRestProps(rest)}
/>
Expand All @@ -84,6 +87,7 @@ TextInput.propTypes = {
options: PropTypes.object,
resource: PropTypes.string,
source: PropTypes.string,
multiline: PropTypes.bool,
};

TextInput.defaultProps = {
Expand Down
Loading