@bytebrand/fe-ui-core 4.1.135 → 4.1.137

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/source/components/Alternative/DealerInfo.tsx +62 -37
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bytebrand/fe-ui-core",
3
- "version": "4.1.135",
3
+ "version": "4.1.137",
4
4
  "description": "UI components for the auto.de project",
5
5
  "main": "index.ts",
6
6
  "module": "dist/common.js",
package/source/components/Alternative/DealerInfo.tsx CHANGED
@@ -25,10 +25,31 @@ const DealerInfo = ({ infoSections, t, dealerPrice, link, linkName, currentSales
25
25
  onCurrentSalesPriceChange(Math.max(currentSalesPrice, newPrice));
26
26
  };
27
27
 
28
+ const handlePriceUpdating = () => {
29
+ if (isPriceUpdating) {
30
+ handleSubmit();
31
+ } else {
32
+ setPriceUpdating(true);
33
+ setTimeout(
34
+ () => {
35
+ inputRef.current.focus();
36
+ },
37
+ 200
38
+ );
39
+ }
40
+ };
41
+
28
42
  const onPriceChange = (e: any) => {
29
43
  const newPrice = +e.target.value;
30
44
  setNewPrice(Math.max(0, newPrice));
31
45
  };
46
+
47
+ const onEnterSubmit = (e: any) => {
48
+ if (e.key === 'Enter') {
49
+ handleSubmit();
50
+ }
51
+ };
52
+
32
53
  const ourMargin = newPrice - dealerPrice;
33
54
 
34
55
  return (
@@ -99,44 +120,48 @@ const DealerInfo = ({ infoSections, t, dealerPrice, link, linkName, currentSales
99
120
  <span>
100
121
  {t('vehicleProps:alternative.ourPrice')}
101
122
  </span>
102
- {isPriceUpdating
103
- ? <div className={styles.ourPriceBlock}>
104
- <input
105
- className={styles.ourPriceInput}
106
- type='number'
107
- value={newPrice}
108
- onChange={e => onPriceChange(e)}
109
- ref={inputRef}
110
- onBlur={handleSubmit}
123
+ <div className={styles.editFieldWrapper}>
124
+ {isPriceUpdating
125
+ ? <div className={styles.ourPriceBlock}>
126
+ <input
127
+ className={styles.ourPriceInput}
128
+ type='number'
129
+ value={newPrice}
130
+ onChange={e => onPriceChange(e)}
131
+ ref={inputRef}
132
+ onBlur={handleSubmit}
133
+ onKeyPress={onEnterSubmit}
134
+ />
135
+ </div>
136
+ : <span onClick={
137
+ () => {
138
+ setPriceUpdating(true);
139
+ setTimeout(
140
+ () => {
141
+ inputRef.current.focus();
142
+ },
143
+ 200
144
+ );
145
+ }}
146
+ >
147
+ <VehicleFormattedPrice
148
+ className={classnames(styles.price, styles.ourPrice)}
149
+ numbersAfterDot={0}
150
+ price={newPrice}
151
+ unit='€'
152
+ isNew={true}
153
+ numberContainerClassName={styles.numberContainer}
154
+ unitWrapperClassName={styles.unitWrapper}
155
+ unitClassName={styles.unit}
156
+ monthlyClassName={styles.monthly}
111
157
  />
112
- <span className={styles.editIconBlock} onClick={handleSubmit}>
113
- <IconSVG className={styles.editIcon} customDimensions name='editIcon'></IconSVG>
114
- </span>
115
- </div>
116
- : <span onClick={
117
- () => {
118
- setPriceUpdating(true);
119
- setTimeout(
120
- () => {
121
- inputRef.current.focus();
122
- },
123
- 200
124
- );
125
- }}
126
- >
127
- <VehicleFormattedPrice
128
- className={classnames(styles.price, styles.ourPrice)}
129
- numbersAfterDot={0}
130
- price={newPrice}
131
- unit='€'
132
- isNew={true}
133
- numberContainerClassName={styles.numberContainer}
134
- unitWrapperClassName={styles.unitWrapper}
135
- unitClassName={styles.unit}
136
- monthlyClassName={styles.monthly}
137
- />
138
- </span>}
139
- </span>
158
+ </span>
159
+ }
160
+ <span className={styles.editIconBlock} onClick={handlePriceUpdating}>
161
+ <IconSVG className={styles.editIcon} customDimensions name='editPriceIcon'></IconSVG>
162
+ </span>
163
+ </div>
164
+ </span>
140
165
  </div>
141
166
  </div>
142
167
  );