Skip to content

Commit b044d07

Browse files
giorgosartgiorgosart
authored
react-easy-edit 2.0 (#202)
version 2.0
1 parent af1ac5d commit b044d07

15 files changed

+1543
-1441
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ function App() {
5050
onCancel={cancel}
5151
saveButtonLabel="Save Me"
5252
cancelButtonLabel="Cancel Me"
53-
attributes={{ name: "awesome-input", id: 1}}
53+
inputAttributes={{ name: "awesome-input", id: 1}}
5454
instructions="Star this repo!"
5555
/>
5656
);

‎package.json‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-easy-edit",
3-
"version": "1.17.2",
3+
"version": "2.0.0",
44
"description": "A react library for inline editing components",
55
"keywords": [
66
"content editable",
@@ -56,17 +56,18 @@
5656
"@babel/preset-env": "^7.22.20",
5757
"@babel/preset-react": "^7.22.15",
5858
"@rollup/plugin-babel": "^5.3.1",
59-
"@testing-library/jest-dom": "^5.17.0",
60-
"@testing-library/react": "^14.0.0",
59+
"@testing-library/dom": "^10.4.0",
60+
"@testing-library/jest-dom": "^6.5.0",
61+
"@testing-library/react": "^16.0.1",
6162
"@zarconontol/enzyme-adapter-react-18": "^0.7.3",
6263
"enzyme": "3.11.0",
6364
"postcss-flexbugs-fixes": "^5.0.2",
6465
"postcss-preset-env": "^8.0.1",
6566
"prop-types": "^15.8.1",
66-
"react": "^18.2.0",
67-
"react-dom": "^18.2.0",
67+
"react": "^18.3.1",
68+
"react-dom": "^18.3.1",
6869
"react-scripts": "^5.0.1",
69-
"rollup": "2.53.3",
70+
"rollup": "^2.79.2",
7071
"rollup-plugin-postcss": "^4.0.2",
7172
"rollup-plugin-terser": "^7.0.2"
7273
}

‎src/demo/App.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ class App extends Component {
7979
onSave={() => {
8080
console.log("saved!")
8181
}}
82-
editMode={this.state.editMode}
82+
isEditing={this.state.editMode}
8383
hideCancelButton
8484
hideSaveButton
8585
/>
@@ -88,7 +88,7 @@ class App extends Component {
8888
onSave={() => {
8989
console.log("saved!")
9090
}}
91-
editMode={this.state.editMode}
91+
isEditing={this.state.editMode}
9292
instructions={"Toggle me!"}
9393
hideCancelButton
9494
hideSaveButton
@@ -108,7 +108,7 @@ class App extends Component {
108108
type={Types.FILE}
109109
onSave={App.onTest}
110110
options={App.generateOptions()}
111-
attributes={{accept: "image/png"}}
111+
inputAttributes={{accept: "image/png"}}
112112
instructions="Upload a *.png file"
113113
onValidate={value => {return value != null}}
114114
buttonsPosition='after'
@@ -121,7 +121,7 @@ class App extends Component {
121121
type="text"
122122
value="Test Input Field"
123123
onSave={App.onTest}
124-
allowEdit={false}
124+
editable={false}
125125
viewAttributes={{style:{'color':'red'}, 'data-test':'test', className: 'test2'}}
126126
/>
127127
<EasyEdit
@@ -131,7 +131,7 @@ class App extends Component {
131131
onFocus={() => console.log("focus")}
132132
/>
133133
<EasyEdit
134-
attributes={{id:'test'}}
134+
inputAttributes={{id:'test'}}
135135
type="text"
136136
value="Delete Me!"
137137
onSave={App.onTest}
@@ -141,7 +141,7 @@ class App extends Component {
141141
type="text"
142142
onSave={App.onTest}
143143
onValidate={() => true}
144-
attributes={attributes}
144+
inputAttributes={attributes}
145145
/>
146146
<EasyEdit
147147
type="text"
@@ -154,7 +154,7 @@ class App extends Component {
154154
<EasyEdit
155155
type={Types.FILE}
156156
onSave={App.onTest}
157-
attributes={{accept: "image/png"}}
157+
inputAttributes={{accept: "image/png"}}
158158
instructions="Upload a *.png file"
159159
onValidate={value => {return value != null}}
160160
buttonsPosition='after'
@@ -228,7 +228,7 @@ class App extends Component {
228228
<EasyEdit
229229
type={Types.TEXTAREA}
230230
value="Test Textarea"
231-
attributes={{className: 'test'}}
231+
inputAttributes={{className: 'test'}}
232232
onSave={App.onTest}
233233
instructions="Custom instructions"
234234
/>
@@ -255,7 +255,7 @@ class App extends Component {
255255
options={App.generateOptions()}
256256
onSave={App.onTest}
257257
value={App.generateValues()}
258-
attributes={{className: 'test', checked:'checked'}}
258+
inputAttributes={{className: 'test', checked:'checked'}}
259259
/>
260260
<h3>Hide Buttons</h3>
261261
<EasyEdit

‎src/lib/EasyColor.test.js‎

Lines changed: 41 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,51 @@
1-
import React from 'react';
2-
import {configure, shallow} from 'enzyme';
3-
import Adapter from '@zarconontol/enzyme-adapter-react-18';
1+
import React from "react";
2+
import { render, fireEvent, screen } from "@testing-library/react";
3+
import '@testing-library/jest-dom';
44
import EasyColor from "./EasyColor";
55

6-
configure({adapter: new Adapter()});
6+
describe("EasyColor component", () => {
7+
it("should render the component with default value", () => {
8+
render(<EasyColor value="#ff0000" cssClassPrefix="test-" />);
9+
const inputElement = screen.getByDisplayValue("#ff0000");
10+
expect(inputElement).toBeInTheDocument();
11+
expect(inputElement).toHaveAttribute("type", "color");
12+
});
13+
14+
it("should apply cssClassPrefix to wrapper div", () => {
15+
const { container } = render(<EasyColor cssClassPrefix="test-" />);
16+
expect(container.firstChild).toHaveClass("test-easy-edit-component-wrapper");
17+
});
718

8-
describe('EasyColor', () => {
9-
let wrapper;
10-
const onChange = jest.fn();
19+
it("should call onChange when color value changes", () => {
20+
const handleChange = jest.fn();
21+
render(<EasyColor value="#ff0000" onChange={handleChange} />);
22+
const inputElement = screen.getByDisplayValue("#ff0000");
1123

12-
beforeEach(() => {
13-
wrapper = shallow(
14-
<EasyColor
15-
onChange={onChange}
16-
value="#ff00ff"
17-
attributes={{name: 'test'}}
18-
/>
19-
);
24+
fireEvent.change(inputElement, { target: { value: "#00ff00" } });
25+
expect(handleChange).toHaveBeenCalledTimes(1);
2026
});
2127

22-
it('should set the name provided as a prop', () => {
23-
expect(wrapper.find('input[name="test"]')).toHaveLength(1);
28+
it("should call onFocus when input is focused", () => {
29+
const handleFocus = jest.fn();
30+
render(<EasyColor value="#ff0000" onFocus={handleFocus} />);
31+
const inputElement = screen.getByDisplayValue("#ff0000");
32+
33+
fireEvent.focus(inputElement);
34+
expect(handleFocus).toHaveBeenCalledTimes(1);
35+
});
36+
37+
it("should call onBlur when input loses focus", () => {
38+
const handleBlur = jest.fn();
39+
render(<EasyColor value="#ff0000" onBlur={handleBlur} />);
40+
const inputElement = screen.getByDisplayValue("#ff0000");
41+
42+
fireEvent.blur(inputElement);
43+
expect(handleBlur).toHaveBeenCalledTimes(1);
2444
});
2545

26-
it('should call onChange if the value of the input is changed', () => {
27-
wrapper.find('input[name="test"]').simulate('change', {target: {value: '#000000'}});
28-
expect(onChange).toBeCalled();
46+
it("should pass additional attributes to input element", () => {
47+
render(<EasyColor value="#ff0000" attributes={{ "data-testid": "color-input" }} />);
48+
const inputElement = screen.getByTestId("color-input");
49+
expect(inputElement).toBeInTheDocument();
2950
});
3051
});

‎src/lib/EasyCustom.jsx‎

Lines changed: 40 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,55 @@
1-
import React, { Component } from 'react';
1+
import React, { useState, useEffect } from 'react';
22
import PropTypes from 'prop-types';
33

4-
export default class EasyCustom extends Component {
5-
constructor(props) {
6-
super(props);
7-
this.state = {
8-
value: props.value
9-
};
10-
this.setValue = this.setValue.bind(this);
11-
this.onBlur = this.onBlur.bind(this);
12-
this.onFocus = this.onFocus.bind(this);
13-
}
14-
15-
setValue(value) {
16-
this.setState({
4+
const EasyCustom = ({ children, cssClassPrefix, onBlur, onFocus, onSetValue, value: initialValue }) => {
5+
const [value, setValue] = useState(initialValue);
6+
7+
useEffect(() => {
8+
setValue(initialValue);
9+
}, [initialValue]);
10+
11+
const handleSetValue = (newValue) => {
12+
setValue(newValue);
13+
onSetValue(newValue);
14+
};
15+
16+
const handleBlur = () => {
17+
onBlur(value);
18+
};
19+
20+
const handleFocus = () => {
21+
onFocus();
22+
};
23+
24+
const child = React.cloneElement(
25+
React.Children.only(children),
26+
{
27+
setParentValue: handleSetValue,
28+
onBlur: handleBlur,
29+
onFocus: handleFocus,
1730
value
18-
}, () => this.props.setValue(value));
19-
}
20-
21-
onBlur() {
22-
this.props.onBlur();
23-
}
24-
25-
onFocus() {
26-
this.props.onFocus();
27-
}
28-
29-
render() {
30-
const { value } = this.state;
31-
const { children, cssClassPrefix } = this.props;
32-
const child = React.cloneElement(
33-
React.Children.only(children),
34-
{
35-
setParentValue: this.setValue,
36-
onBlur : this.onBlur,
37-
onFocus : this.onFocus,
38-
value
39-
}
40-
);
41-
return (
42-
<div className={cssClassPrefix + "easy-edit-component-wrapper"}>
43-
{child}
44-
</div>
45-
);
46-
}
47-
}
31+
}
32+
);
33+
34+
return (
35+
<div className={cssClassPrefix + "easy-edit-component-wrapper"}>
36+
{child}
37+
</div>
38+
);
39+
};
4840

4941
EasyCustom.propTypes = {
5042
children: PropTypes.element,
5143
cssClassPrefix: PropTypes.string,
5244
onBlur: PropTypes.func,
5345
onFocus: PropTypes.func,
54-
setValue: PropTypes.func,
46+
onSetValue: PropTypes.func, // Renamed from setValue to onSetValue in propTypes
5547
value: PropTypes.oneOfType([
5648
PropTypes.string,
5749
PropTypes.number,
5850
PropTypes.array,
5951
PropTypes.object
6052
]),
61-
}
53+
};
54+
55+
export default EasyCustom;

0 commit comments

Comments
 (0)