Skip to content

Commit 75d0909

Browse files
michael-braunmichael-braun
committed
🎨 Use react-hooks for AmountControl example
1 parent 8c6bce0 commit 75d0909

File tree

1 file changed

+112
-126
lines changed

1 file changed

+112
-126
lines changed

‎examples/react-chayns-amountcontrol/Example.jsx

Lines changed: 112 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -1,160 +1,146 @@
11
/* eslint-disable react/jsx-one-expression-per-line */
2-
import React, { Component } from 'react';
2+
import React, { useState } from 'react';
33
import { faShoppingCart } from '@fortawesome/free-solid-svg-icons';
44

55
import { AmountControl } from '../../src/index';
66
import Accordion from '../../src/react-chayns-accordion/component/Accordion';
77

8-
export default class AmountControlExample extends Component {
9-
constructor() {
10-
super();
8+
const AmountControlExample = () => {
9+
const [amount, setAmount] = useState(0);
10+
11+
return (
12+
<div data-equalize="group-1">
13+
<AmountControl
14+
autoInput
15+
disabled={false}
16+
amount={amount}
17+
onChange={setAmount}
18+
equalize="group-1"
19+
buttonText="0,15"
20+
addColor="#20C65A"
21+
removeColor="#E71E28"
22+
iconColor="#20C65A"
23+
focusOnClick={false}
24+
icon={faShoppingCart}
25+
stopPropagation
26+
/>
27+
28+
<br />
29+
30+
<AmountControl
31+
disabled={false}
32+
amount={amount}
33+
onChange={setAmount}
34+
contentWidth={200}
35+
buttonText="mtl. 15,95 €"
36+
icon="ts-tobit"
37+
plusIcon="ts-tobit"
38+
minusIcon="ts-tobit"
39+
removeIcon="ts-tobit"
40+
/>
41+
42+
<br />
43+
44+
<AmountControl
45+
disabled
46+
amount={amount}
47+
onChange={setAmount}
48+
equalize="group-1"
49+
buttonText="test-article"
50+
/>
51+
52+
<br />
53+
54+
<Accordion
55+
right={(
56+
<AmountControl
57+
className="accordion--no-trigger"
58+
icon="ts-bamboo"
59+
amount={amount}
60+
onChange={setAmount}
61+
equalize="group-1"
62+
buttonText="2,20€"
63+
iconColor="blue"
64+
/>
65+
)}
66+
head="Afri Cola"
67+
>
68+
Test
69+
</Accordion>
1170

12-
this.state = {
13-
amount: 0
14-
};
15-
}
71+
<br />
1672

17-
onChange = (value) => {
18-
this.setState({
19-
amount: value
20-
});
21-
};
73+
<AmountControl
74+
amount={amount}
75+
onChange={setAmount}
76+
equalize="group-1"
77+
buttonText="mtl. 15,95 €"
78+
disableInput
79+
/>
2280

23-
render() {
24-
const { amount } = this.state;
81+
<br />
2582

26-
return (
27-
<div data-equalize="group-1">
83+
<div style={{ display: 'flex', justifyContent: 'space-evenly' }}>
2884
<AmountControl
29-
autoInput
30-
disabled={false}
3185
amount={amount}
32-
onChange={this.onChange}
86+
onChange={setAmount}
3387
equalize="group-1"
34-
buttonText="0,15"
35-
addColor="#20C65A"
36-
removeColor="#E71E28"
37-
iconColor="#20C65A"
38-
focusOnClick={false}
39-
icon={faShoppingCart}
40-
stopPropagation
41-
/>
42-
43-
<br/>
44-
45-
<AmountControl
46-
disabled={false}
47-
amount={amount}
48-
onChange={this.onChange}
49-
contentWidth={200}
5088
buttonText="mtl. 15,95 €"
51-
icon="ts-tobit"
52-
plusIcon="ts-tobit"
53-
minusIcon="ts-tobit"
54-
removeIcon="ts-tobit"
89+
disableRemove
5590
/>
5691

57-
<br/>
58-
5992
<AmountControl
60-
disabled
6193
amount={amount}
62-
onChange={this.onChange}
94+
onChange={setAmount}
6395
equalize="group-1"
64-
buttonText="test-article"
96+
buttonText="mtl. 15,95 €"
97+
disableAdd
6598
/>
6699

67-
<br/>
68-
69-
<Accordion
70-
right={(
71-
<AmountControl
72-
className="accordion--no-trigger"
73-
icon="ts-bamboo"
74-
amount={amount}
75-
onChange={this.onChange}
76-
equalize="group-1"
77-
buttonText="2,20€"
78-
iconColor="blue"
79-
/>
80-
)}
81-
head="Afri Cola"
82-
>
83-
Test
84-
</Accordion>
85-
86-
<br/>
87-
88100
<AmountControl
89101
amount={amount}
90-
onChange={this.onChange}
102+
onChange={setAmount}
91103
equalize="group-1"
92104
buttonText="mtl. 15,95 €"
93-
disableInput
94-
/>
95-
96-
<br/>
97-
98-
<div style={{ display: 'flex', justifyContent: 'space-evenly' }}>
99-
<AmountControl
100-
amount={amount}
101-
onChange={this.onChange}
102-
equalize="group-1"
103-
buttonText="mtl. 15,95 €"
104-
disableRemove
105-
/>
106-
107-
<AmountControl
108-
amount={amount}
109-
onChange={this.onChange}
110-
equalize="group-1"
111-
buttonText="mtl. 15,95 €"
112-
disableAdd
113-
/>
114-
115-
<AmountControl
116-
amount={amount}
117-
onChange={this.onChange}
118-
equalize="group-1"
119-
buttonText="mtl. 15,95 €"
120-
disableAdd
121-
disableRemove
122-
/>
123-
</div>
124-
125-
<AmountControl
126-
amount={amount}
127-
onChange={this.onChange}
128-
buttonFormatHandler={({ amount: a }) => `${a} h`}
129-
disableInput
105+
disableAdd
106+
disableRemove
130107
/>
108+
</div>
131109

132-
<br/>
110+
<AmountControl
111+
amount={amount}
112+
onChange={setAmount}
113+
buttonFormatHandler={({ amount: a }) => `${a} h`}
114+
disableInput
115+
/>
133116

134-
<AmountControl
135-
amount={amount}
136-
onChange={this.onChange}
137-
buttonText="(Amount > 0) => Input"
138-
showInput={amount > 0}
139-
/>
117+
<br />
140118

141-
<div style={{ textAlign: 'right' }}>
142-
<AmountControl
143-
autoInput
144-
disabled={false}
145-
amount={amount}
146-
onChange={this.onChange}
147-
buttonText="0,15"
148-
/>
149-
</div>
119+
<AmountControl
120+
amount={amount}
121+
onChange={setAmount}
122+
buttonText="(Amount > 0) => Input"
123+
showInput={amount > 0}
124+
/>
150125

126+
<div style={{ textAlign: 'right' }}>
151127
<AmountControl
128+
autoInput
129+
disabled={false}
152130
amount={amount}
153-
onInput={this.onChange}
154-
buttonText="0,10"
155-
showInput={amount > 0}
131+
onChange={setAmount}
132+
buttonText="0,15"
156133
/>
157134
</div>
158-
);
159-
}
160-
}
135+
136+
<AmountControl
137+
amount={amount}
138+
onInput={setAmount}
139+
buttonText="0,10"
140+
showInput={amount > 0}
141+
/>
142+
</div>
143+
);
144+
};
145+
146+
export default AmountControlExample;

0 commit comments

Comments
 (0)