Describe the solution you'd like
I would like to be able to pass in free text in a prop called "instructions" that will be displayed underneath the component to provide information to the end user on how to fill in the value for the rendered component

Add a new prop called viewAttributes that will allow users to pass in view related attributes, similarly to how the attributes prop works for the edit component

Describe the solution you'd like
Add support for input that references a datalist

Describe the bug
When used within a component with pagination (e.g. react-table), paginating to a different page updates the value but not the tempValue. This means the new value displays in view mode, but in edit mode it displays the value in the same position on the previous page.

To Reproduce
Steps to reproduce the behavior:
Create a react-table with an EasyEdit element on every row
Ensure that you have more rows in your data than the pagination row size
Paginate to page 2
Verify the expected value is displayed
Enter edit mode
Verify the incorrect value is displayed

Expected behavior
When entering edit mode, I expect that the value displayed in view mode is what I'm editing

Desktop (please complete the following information):

• OS: Windows
• Browser: Chrome
• Version: Latest

Outside Click

Is there any way to save the details without clicking the save button or Pressing ENTER.

It is go to name a prop like autoSave , so that user can save the details instantly.

Describe the bug
When passing in a displayComponent, if the value of the component is null then there is no placeholder available for that component.

To Reproduce

<EasyEdit
    type="text"
    onSave={App.onTest}
    name="custom-one"
    editComponent={<CustomInput />}
    instructions="Custom input capitalises text"
/>

Expected behavior
It should show the default library placeholder "Click to edit"

Hi,
is there any way to get the attribute's name when saving?
I have many EasyEdit components in a single page and when trying to save the value I need the attribute's name as well.
Thanks.

The devDependency rollup was updated from 1.14.2 to 1.14.3.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

rollup is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Users should be able to inline edit password fields as this is not currently supported by the library. When in view mode, the password field should not show the password value, instead it should show the bullet characters ••••••••.

Is your feature request related to a problem? Please describe.
The first option of a select statement is pre-selected when the component is in edit mode

Describe the solution you'd like
Add the ability to pass down a user defined placeholder otherwise use a default component

Is your feature request related to a problem? Please describe.
There should be a way for the user to specify if a field should be editable or not.

Describe the solution you'd like
A new prop should be introduced called 'allowEdit' that will determine if the field should be editable or not

Describe the solution you'd like
There should be a way for a user to pass in a custom validation function and the error message to be shown to the end user if the function returns false.

Describe the bug
It seems that the an EasyEdit component of type email can be rendered but when you try to inline edit it, it throws an error.

To Reproduce
Steps to reproduce the behavior:

1. Use the code below

<EasyEdit
  type="email"
  onSave={App.onTest}
/>

2. Try to edit the component

Expected behavior
Users should be allowed to edit a component of type email

Screenshots

Additional context
Add any other context about the problem here.

☝️ Important announcement: Greenkeeper will be saying goodbye 👋 and passing the torch to Snyk on June 3rd, 2020! Find out how to migrate to Snyk and more at greenkeeper.io

There have been updates to the babel7 monorepo:

• • The devDependency @babel/cli was updated from 7.8.3 to 7.8.4.

• The devDependency @babel/core was updated from 7.8.6 to 7.8.7.
• The devDependency @babel/plugin-proposal-class-properties was updated from 7.8.0 to 7.8.3.
• The devDependency @babel/preset-env was updated from 7.8.6 to 7.8.7.
• The devDependency @babel/preset-react was updated from 7.8.0 to 7.8.3.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the babel7 group definition.

babel7 is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

You don't always want to show the buttons to save and cancel. There is already an existing behavior to cancel and save via keys.

I would suggest a prop hideButtons with an default value of false.

I am already working on a PR.

I am trying to use this component:

<EasyEdit
type="textarea"
onSave={(e)=>{this.handleBuildingSave(e,'info');}}
onValidate={() => true}
value={selectedBuilding.info}
saveButtonLabel={getLocalizedStrings(userLang).SAVE}
cancelButtonLabel={getLocalizedStrings(userLang).CANCEL}
saveButtonStyle={'button'}
cancelButtonStyle={'button'}
attributes={{name: 'buildingInfo',
rows:'5',
cols:'35',
id: 'name-buildingInfo',style:inlineEditStyle}}
/>

The selectedBuilding.info are a coming from redux store. When my redux store update this value the value in the EasyEdit component is not updated. If I show the redux store value in a div it shows the correct value.

☝️ Important announcement: Greenkeeper will be saying goodbye 👋 and passing the torch to Snyk on June 3rd, 2020! Find out how to migrate to Snyk and more at greenkeeper.io

The devDependency rollup was updated from 1.32.0 to 1.32.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

rollup is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Easy edit really made things simple for inline editing text in React components. It would be great if saveButtonLabel & cancelButtonLabels could support FontAwesome icons. I tried it this way:
saveButtonLabel={<FontAwesomeIcon icon={faCheck}/>} cancelButtonLabel={<FontAwesomeIcon icon={faTimes}/>}
While it works, I notice following warnings in browser console logs:
Warning: Failed prop type: Invalid prop 'saveButtonLabel' of type 'object' supplied to 'o', expected 'string'. Warning: Failed prop type: Invalid prop 'cancelButtonLabel' of type 'object' supplied to 'o', expected 'string'.

Would appreciate inputs on how to avoid these warnings.

Thanks,
Harsha

The devDependency rollup was updated from 1.27.5 to 1.27.6.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

rollup is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Describe the bug
When a value is passed in as a prop to an component, it's not displayed when the user edits the component and ends up over-writting the initial value to null if the user presses on "Save" button

To Reproduce
Steps to reproduce the behavior:

1. Use this component definition
   <EasyEdit type="text" value="Test Input Field" onSave={()=>{}} name="name-one" />'
2. Click on the component to activate the edit mode
3. See error, the value passed in is not visible to the user

Expected behavior
The value provided to the component should be visible in the edit mode

Screenshots

Needs typescript support.

I shall do it when I get time.

☝️ Important announcement: Greenkeeper will be saying goodbye 👋 and passing the torch to Snyk on June 3rd, 2020! Find out how to migrate to Snyk and more at greenkeeper.io

The devDependency rollup-plugin-babel was updated from 4.3.3 to 4.4.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

rollup-plugin-babel is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

In EasyParagraph.jsx <textarea> should be resize: vertical; only. User shouldn't be able to resize the textarea to make it wider than the container element that contains it.

<textarea> should also fill the available horizontal space. Probably the easy-edit-component-wrapper class would need a width: 100% attribute on it.

☝️ Important announcement: Greenkeeper will be saying goodbye 👋 and passing the torch to Snyk on June 3rd, 2020! Find out how to migrate to Snyk and more at greenkeeper.io

There have been updates to the react monorepo:

• • The devDependency react was updated from 16.13.0 to 16.13.1.

• The devDependency react-dom was updated from 16.13.0 to 16.13.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the react group definition.

react is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Describe the bug
If you pass in a predefined value to an EasyEdit component of type select or radio then, if the value exists as an option, instead of using the label of the option, it just shows the value.

To Reproduce
Steps to reproduce the behavior:

• Use the component below

<EasyEdit
        type={Types.RADIO}
        value="one"
        onSave={save}
        options={[
            { label: "First option", value: "one" },
            { label: "Second option", value: "two" }
        ])}
      />

• Observe when the component is not in edit mode, the value displayed to the user is "one" rather than "First option"

Expected behavior
It should show "First option" to the end user

I am using a type date field.
If the value is null i want the field to default to todays date.
I tried setting the defaultValue attribute to attributes, but then I get a nasty warning in the console:

Warning: v contains an input of type date with both value and defaultValue props. Input elements must be either controlled or uncontrolled (specify either the value prop, or the defaultValue

Here is my settings:

<EasyEdit
 	type="date"
 	onSave={(e) => {
 	  this.handleChairSave(e, 'lastServiceDate');
 	}}
 	onValidate={() => true}
 	value={selectedChair.lastServiceDate?selectedChair.lastServiceDate:''}
 	saveButtonLabel={getLocalizedStrings(userLang).SAVE}
 	cancelButtonLabel={getLocalizedStrings(userLang).CANCEL}
 	placeholder={getLocalizedStrings(userLang).CLICK_EDIT}
 	saveButtonStyle={'button'}
 	cancelButtonStyle={'button'}
 	attributes={{
 	  name: 'lastServiceDate',
 	  defaultValue:'2019-04-01',
 	  id: 'lastServiceDate', style: inlineEditStyle
 	}}
/>

Describe the bug
Attributes exist as a prop but are not being utilised.

To Reproduce
Steps to reproduce the behavior:

1. Initialise a react-easy-edit component for which the editing state is false
2. This results in renderPlaceholder() being called
3. Any HTML elements created by this method do not utilise the attributes prop

Expected behavior
attributes props should be utilised for all input/div elements that react-easy-edit creates.

Screenshots
Attributes Prop:

HTML element:

Notice that the name attribute has not been applied.

Desktop (please complete the following information):

• OS: Windows 10
• Browser [e.g. chrome, safari]: Chrome
• Version [e.g. 22]: 76.0.3809.132

Additional context
N/A

Describe the bug

To Reproduce
Steps to reproduce the behavior:

1. Add the code below

<EasyEdit
  type={Types.TEXT}
  onSave={App.onTest}
  onValidate={value => {return value !== null && value.length > 0}}
/>

2. Hover over the component and click on it to put it in edit mode
3. Without adding any value, click on "Save", you should see a validation message
4. Add a value in and then click save
5. Now hover over the component and click on it to put it in edid mode
6. Observe that the validation message is still visible

Expected behavior
Validation message should be hidden if the input is valid

Is your feature request related to a problem? Please describe.
When the prop allowEdit is set to false - which means that the component is not editable, it will act as a label - there is no clear indication to the user that they cannot edit the component.

Describe the solution you'd like
It would be good if the cursor changed to not-allowed (🚫) so that the user would know that they cannot edit the component

☝️ Important announcement: Greenkeeper will be saying goodbye 👋 and passing the torch to Snyk on June 3rd, 2020! Find out how to migrate to Snyk and more at greenkeeper.io

The devDependency react-scripts was updated from 3.4.0 to 3.4.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

react-scripts is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

npm install --save --save-exact [email protected]

yarn add --exact [email protected]

Your Greenkeeper Bot 🌴

Describe the bug
When passing in the attributes prop, if you pass in an attribute of class: 'some-class' then it will overwrite any other classes that react-easy-edit has decided to add to your component, leaving you only with the value provided in your attribute prop object.

To Reproduce
Steps to reproduce the behavior:

1. Pass { class: 'some-class' } in to your attributes prop
2. Notice that this is now the only class included on your rendered EasyEdit component

Expected behavior
Any class names that are passed in as an attribute should be appended to the expected classes, rather than replacing them. How should multiple class names be passed in? As a space separated string, or as an array? My opinion is that some logic should be added that can append an array of class names to the other class names added by react-easy-edit.

Desktop (please complete the following information):

• OS: All
• Browser: All
• Version: 1.3.1

Additional context
Should setCssClasses be renamed & generalised to set classes? Not all additional classes will necessarily be for added for styling reasons. We could alternatively have two methods (general classes & css classes), but I feel that this can be rolled into a single method.

☝️ Important announcement: Greenkeeper will be saying goodbye 👋 and passing the torch to Snyk on June 3rd, 2020! Find out how to migrate to Snyk and more at greenkeeper.io

The devDependency rollup-plugin-postcss was updated from 2.2.0 to 2.3.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

rollup-plugin-postcss is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Describe the bug
Assume that you have a checkbox list with 2 options, "Option A" and "Option B". If you select both of them and click "Save" then the value shown to the user comes up as "Option AOption B".

Expected behavior
The display value should be "Option A, Option B".

Screenshots

Desktop (please complete the following information):

• OS: Windows 10 Enterprise Edition
• Browser: Chrome v72.0.3626.119

Describe the solution you'd like
Users should be able to pass in the html range type, the view component should just display the number selected and the input component should render a range picker.

☝️ Important announcement: Greenkeeper will be saying goodbye 👋 and passing the torch to Snyk on June 3rd, 2020! Find out how to migrate to Snyk and more at greenkeeper.io

There have been updates to the babel7 monorepo:

• • The devDependency @babel/cli was updated from 7.8.3 to 7.8.4.

• The devDependency @babel/core was updated from 7.8.7 to 7.9.0.
• The devDependency @babel/plugin-proposal-class-properties was updated from 7.8.0 to 7.8.3.
• The devDependency @babel/preset-env was updated from 7.8.7 to 7.9.0.
• The devDependency @babel/preset-react was updated from 7.8.3 to 7.9.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the babel7 group definition.

babel7 is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Describe the solution you'd like
Generalize the way HTML attributes can be passed in as a prop.

Currently the way html attributes are passed in is as specif props like min, max, name etc which is not scalable. It would be great if I could pass in a list of attributes that i would like to pass in my input element.

For example:
props = {name:'name', disabled: true}

Describe the solution you'd like
The component should return to its non-editing state when users press the Esc button

Allow users to disable auto submitting the EasyEdit component when they press the enter key
Allow users to disable auto cancelling the EasyEdit component when they press the escape

In order to achieve this, two new props will be introduced called disableAutoSubmit and disableAutoCancel which will act as flags to disable this feature. Default value for both these will be false

☝️ Important announcement: Greenkeeper will be saying goodbye 👋 and passing the torch to Snyk on June 3rd, 2020! Find out how to migrate to Snyk and more at greenkeeper.io

The devDependency rollup-plugin-postcss was updated from 2.4.1 to 2.5.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

rollup-plugin-postcss is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Allow users save value by hitting "Enter" key. Right now I have to click it on the green button to submit my values.

On paragraph type components it should probably allow Shift + Enter to insert new lines.

This will allow users to:

1. Reset style for an EasyEdit component
2. Customise the look and feel of a specific EasyEdit component

Describe the solution you'd like
Allow users to pass in a custom component to be inline edited

After editing a value, if you click on cancel, the item's value remains italic.

Using the provided sandbox you can see it in action:
https://codesandbox.io/s/react-easy-edit-sandbox-2y97j

Digging into the code it seems that after both _onSave and _onCancel function you have to add the following:

 o(d(s), "_onSave", function() {
        var e = s.props,
            t = e.onSave,
            a = e.onValidate,
            n = s.state.tempValue;
        a(n) ? s.setState({
            editing: !1,
            value: n,
            isValid: !0,
            ** hover: !1 **
        }, function() {
            return t(s.state.value)
        }) : s.setState({
            isValid: !1
        })
    }), o(d(s), "_onCancel", function() {
            var e = s.props.onCancel,
                t = s.state.value;
            s.setState({
                editing: !1,
                tempValue: t,
                ** hover: !1 **
            }, function() {
                return e()
            })
        }