From 8c31bc2f77782e06a3c77d74a9fd77417fad18af Mon Sep 17 00:00:00 2001 From: Kimmo Puputti Date: Thu, 17 Aug 2017 14:05:42 +0300 Subject: [PATCH 1/7] Add max length to the listing title --- .../EditListingDescriptionForm/EditListingDescriptionForm.js | 1 + .../__snapshots__/EditListingDescriptionForm.test.js.snap | 1 + 2 files changed, 2 insertions(+) diff --git a/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.js b/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.js index 9c97c6ab..74591a5c 100644 --- a/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.js +++ b/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.js @@ -70,6 +70,7 @@ const EditListingDescriptionFormComponent = props => { id={`${form}.title`} label={titleMessage} placeholder={titlePlaceholderMessage} + maxLength={TITLE_MAX_LENGTH} validate={[required(titleRequiredMessage), maxLength60Message]} autoFocus /> diff --git a/src/containers/EditListingDescriptionForm/__snapshots__/EditListingDescriptionForm.test.js.snap b/src/containers/EditListingDescriptionForm/__snapshots__/EditListingDescriptionForm.test.js.snap index f38787de..dc87c171 100644 --- a/src/containers/EditListingDescriptionForm/__snapshots__/EditListingDescriptionForm.test.js.snap +++ b/src/containers/EditListingDescriptionForm/__snapshots__/EditListingDescriptionForm.test.js.snap @@ -12,6 +12,7 @@ exports[`EditListingDescriptionForm matches snapshot 1`] = ` autoFocus={true} className="" id="fakeTestForm.title" + maxLength={60} name="title" onBlur={[Function]} onChange={[Function]} From 72fc193fbcffe98f775a07fe7199b4d6f54da517 Mon Sep 17 00:00:00 2001 From: Kimmo Puputti Date: Thu, 17 Aug 2017 14:26:04 +0300 Subject: [PATCH 2/7] Preserve line breaks in listing description --- src/containers/ListingPage/ListingPage.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/containers/ListingPage/ListingPage.css b/src/containers/ListingPage/ListingPage.css index 5de33b96..23eff5a4 100644 --- a/src/containers/ListingPage/ListingPage.css +++ b/src/containers/ListingPage/ListingPage.css @@ -246,6 +246,10 @@ .description { margin-top: 0; margin-bottom: 0; + + /* Preserve newlines, but collapse other whitespace */ + white-space: pre-line; + @media (--viewportMedium) { margin-top: 0; margin-bottom: 0; From 08139e3a5ad539d6da1d2e90d4b42f84eb6175de Mon Sep 17 00:00:00 2001 From: Kimmo Puputti Date: Thu, 17 Aug 2017 14:59:38 +0300 Subject: [PATCH 3/7] Trim listing description before saving to API --- .../EditListingPage/EditListingPage.duck.js | 20 ++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/src/containers/EditListingPage/EditListingPage.duck.js b/src/containers/EditListingPage/EditListingPage.duck.js index 5f1c41af..faf4e502 100644 --- a/src/containers/EditListingPage/EditListingPage.duck.js +++ b/src/containers/EditListingPage/EditListingPage.duck.js @@ -240,12 +240,21 @@ export function requestShowListing(actionPayload) { }; } +const cleanUpListingData = data => { + // Since we display the line breaks in the listing description, we + // should trim the extra whitespace from the start and the end of + // the description. + return data.description ? { ...data, description: data.description.trim() } : data; +}; + export function requestCreateListing(data) { return (dispatch, getState, sdk) => { - dispatch(createListing(data)); + const cleanedData = cleanUpListingData(data); + + dispatch(createListing(cleanedData)); return sdk.listings - .create(data) + .create(cleanedData) .then(response => { const id = response.data.data.id.uuid; // Modify store to understand that we have created listing and can redirect away @@ -282,11 +291,12 @@ export function requestImageUpload(actionPayload) { // display the state. export function requestUpdateListing(tab, data) { return (dispatch, getState, sdk) => { - dispatch(updateListing(data)); - const { id } = data; + const cleanedData = cleanUpListingData(data); + dispatch(updateListing(cleanedData)); + const { id } = cleanedData; let updateResponse; return sdk.listings - .update(data) + .update(cleanedData) .then(response => { updateResponse = response; const payload = { id, include: ['author', 'images'] }; From f2c2c658262943db6c4805a2cc5765941b7cbef9 Mon Sep 17 00:00:00 2001 From: Kimmo Puputti Date: Thu, 17 Aug 2017 14:19:45 +0300 Subject: [PATCH 4/7] Add ExpandingTextarea component --- .../ExpandingTextarea.example.js | 16 ++++++++++++++++ .../ExpandingTextarea/ExpandingTextarea.js | 10 ++++++++++ src/components/TextInputField/TextInputField.js | 4 ++-- src/components/index.js | 4 +++- src/examples.js | 4 +++- 5 files changed, 34 insertions(+), 4 deletions(-) create mode 100644 src/components/ExpandingTextarea/ExpandingTextarea.example.js create mode 100644 src/components/ExpandingTextarea/ExpandingTextarea.js diff --git a/src/components/ExpandingTextarea/ExpandingTextarea.example.js b/src/components/ExpandingTextarea/ExpandingTextarea.example.js new file mode 100644 index 00000000..4c2fb648 --- /dev/null +++ b/src/components/ExpandingTextarea/ExpandingTextarea.example.js @@ -0,0 +1,16 @@ +import ExpandingTextarea from './ExpandingTextarea'; + +const loremIpsum = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus egestas hendrerit tempor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer suscipit vitae risus et feugiat. Sed dapibus molestie auctor. Fusce faucibus nulla ac eros lacinia consequat. Quisque sodales blandit dolor vel consequat. In purus dui, mollis quis malesuada ut, convallis dapibus arcu. Nam pulvinar, ipsum et accumsan accumsan, urna lectus eleifend nisl, eu finibus mauris dolor quis lectus. Mauris sit amet sem sollicitudin, hendrerit turpis ut, sollicitudin quam. Morbi risus augue, iaculis non malesuada vitae, dignissim ac mauris. Nam urna justo, mollis vel mi vel, consectetur pellentesque lorem.\n\nProin egestas nunc lectus, nec luctus arcu placerat quis. Quisque ac arcu eu urna fringilla consequat a nec elit. Morbi sit amet tempus velit. Pellentesque ac magna tempus nunc consectetur iaculis in eget mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque imperdiet eros in diam rhoncus, vitae blandit turpis egestas. Duis venenatis finibus orci, eget molestie elit. Donec sollicitudin rhoncus neque in viverra. Phasellus mauris velit, aliquet sed dapibus sed, ultricies ut augue. Donec dapibus scelerisque erat ac rhoncus. Duis facilisis risus sit amet erat consectetur gravida.'; + +export const Empty = { + component: ExpandingTextarea, + group: 'custom inputs', +}; + +export const WithInitialText = { + component: ExpandingTextarea, + props: { + defaultValue: loremIpsum, + }, + group: 'custom inputs', +}; diff --git a/src/components/ExpandingTextarea/ExpandingTextarea.js b/src/components/ExpandingTextarea/ExpandingTextarea.js new file mode 100644 index 00000000..c858d6e1 --- /dev/null +++ b/src/components/ExpandingTextarea/ExpandingTextarea.js @@ -0,0 +1,10 @@ +/* eslint-disable react/prefer-stateless-function, no-console */ +import React, { Component } from 'react'; + +class ExpandingTextarea extends Component { + render() { + return