framework7-react 7.0.9 → 8.0.0-beta.1
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.
- package/components/accordion-content.js +2 -2
- package/components/accordion-item.js +2 -11
- package/components/accordion-toggle.js +2 -2
- package/components/accordion.js +2 -2
- package/components/actions-button.d.ts +1 -1
- package/components/actions-button.js +4 -8
- package/components/actions-group.js +2 -2
- package/components/actions-label.js +4 -6
- package/components/actions.js +4 -14
- package/components/app.js +4 -8
- package/components/area-chart.js +6 -45
- package/components/badge.js +2 -2
- package/components/block-footer.js +2 -2
- package/components/block-header.js +2 -2
- package/components/block-title.js +2 -2
- package/components/block.d.ts +17 -4
- package/components/block.js +37 -11
- package/components/breadcrumbs-collapsed.js +2 -4
- package/components/breadcrumbs-item.js +2 -4
- package/components/breadcrumbs-separator.js +2 -2
- package/components/breadcrumbs.js +2 -2
- package/components/button.d.ts +3 -7
- package/components/button.js +8 -24
- package/components/card-content.js +2 -2
- package/components/card-footer.js +2 -2
- package/components/card-header.js +2 -2
- package/components/card.d.ts +5 -2
- package/components/card.js +14 -23
- package/components/checkbox.js +2 -4
- package/components/chip.d.ts +0 -1
- package/components/chip.js +2 -9
- package/components/fab-backdrop.js +2 -2
- package/components/fab-button.js +2 -6
- package/components/fab-buttons.js +2 -2
- package/components/fab.js +2 -10
- package/components/gauge.js +2 -2
- package/components/icon.d.ts +0 -1
- package/components/icon.js +3 -17
- package/components/input.js +1 -57
- package/components/link.d.ts +0 -1
- package/components/link.js +5 -12
- package/components/list-button.js +2 -4
- package/components/list-group.js +2 -2
- package/components/list-index.d.ts +0 -1
- package/components/list-index.js +3 -13
- package/components/list-input.d.ts +0 -1
- package/components/list-input.js +1 -55
- package/components/list-item-content.js +6 -20
- package/components/list-item.d.ts +0 -1
- package/components/list-item.js +5 -35
- package/components/list.d.ts +21 -9
- package/components/list.js +43 -37
- package/components/login-screen-title.js +2 -2
- package/components/login-screen.js +3 -15
- package/components/message.js +2 -10
- package/components/messagebar-attachment.js +2 -5
- package/components/messagebar-attachments.js +2 -2
- package/components/messagebar-sheet-image.js +4 -5
- package/components/messagebar-sheet-item.js +2 -2
- package/components/messagebar-sheet.js +2 -2
- package/components/messagebar.js +1 -19
- package/components/messages-title.js +2 -2
- package/components/messages.js +2 -15
- package/components/nav-left.js +2 -6
- package/components/nav-right.js +2 -2
- package/components/nav-title-large.js +2 -2
- package/components/nav-title.js +2 -4
- package/components/navbar.d.ts +1 -2
- package/components/navbar.js +5 -31
- package/components/page-content.js +2 -16
- package/components/page.d.ts +0 -1
- package/components/page.js +4 -62
- package/components/panel.d.ts +1 -0
- package/components/panel.js +6 -26
- package/components/photo-browser.js +1 -17
- package/components/pie-chart.js +6 -18
- package/components/popover.d.ts +1 -0
- package/components/popover.js +4 -14
- package/components/popup.js +3 -19
- package/components/preloader.js +5 -14
- package/components/progressbar.js +2 -4
- package/components/radio.js +2 -4
- package/components/range.js +2 -9
- package/components/routable-modals.js +2 -7
- package/components/searchbar.d.ts +1 -2
- package/components/searchbar.js +5 -30
- package/components/segmented.d.ts +0 -3
- package/components/segmented.js +4 -10
- package/components/sheet.js +2 -22
- package/components/stepper.d.ts +0 -5
- package/components/stepper.js +3 -33
- package/components/subnavbar.js +2 -2
- package/components/swipeout-actions.js +2 -4
- package/components/swipeout-button.js +2 -4
- package/components/swiper-slide.d.ts +1 -0
- package/components/swiper-slide.js +1 -0
- package/components/swiper.d.ts +1 -0
- package/components/swiper.js +1 -0
- package/components/tab.js +4 -15
- package/components/tabs.js +1 -4
- package/components/text-editor.js +1 -18
- package/components/toggle.js +1 -13
- package/components/toolbar.d.ts +2 -6
- package/components/toolbar.js +9 -20
- package/components/treeview-item.d.ts +0 -1
- package/components/treeview-item.js +2 -11
- package/components/treeview.js +2 -2
- package/components/view.d.ts +0 -6
- package/components/view.js +3 -30
- package/components/views.js +2 -2
- package/framework7-react.d.ts +2 -12
- package/framework7-react.js +3 -12
- package/package.json +1 -1
- package/shared/components-router.js +0 -32
- package/shared/f7.js +5 -19
- package/shared/get-router-initial-component.js +0 -4
- package/shared/mixins.js +2 -8
- package/shared/plugin.js +2 -8
- package/shared/router-open-in.js +4 -15
- package/shared/tabbar-context.js +1 -1
- package/shared/use-icon.js +1 -6
- package/shared/use-isomorphic-layout-effect.js +0 -2
- package/shared/use-route-props.js +0 -1
- package/shared/use-smart-select.js +0 -3
- package/shared/use-store.js +4 -8
- package/shared/use-tab.js +0 -4
- package/shared/use-theme.js +0 -2
- package/shared/use-tooltip.js +0 -5
- package/shared/utils.js +0 -18
- package/shared/watch-prop.js +0 -1
- package/components/appbar.d.ts +0 -28
- package/components/appbar.js +0 -45
- package/components/col.d.ts +0 -36
- package/components/col.js +0 -75
- package/components/list-item-cell.d.ts +0 -23
- package/components/list-item-cell.js +0 -28
- package/components/list-item-row.d.ts +0 -23
- package/components/list-item-row.js +0 -28
- package/components/menu-dropdown-item.d.ts +0 -68
- package/components/menu-dropdown-item.js +0 -59
- package/components/menu-dropdown.d.ts +0 -28
- package/components/menu-dropdown.js +0 -42
- package/components/menu-item.d.ts +0 -81
- package/components/menu-item.js +0 -101
- package/components/menu.d.ts +0 -23
- package/components/menu.js +0 -30
- package/components/row.d.ts +0 -31
- package/components/row.js +0 -64
package/components/list-index.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign
|
|
2
|
-
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
3
2
|
import React, { forwardRef, useRef, useImperativeHandle } from 'react';
|
|
4
3
|
import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
|
|
5
4
|
import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
|
|
@@ -7,6 +6,7 @@ import { colorClasses } from '../shared/mixins.js';
|
|
|
7
6
|
import { f7ready, f7 } from '../shared/f7.js';
|
|
8
7
|
import { watchProp } from '../shared/watch-prop.js';
|
|
9
8
|
|
|
9
|
+
|
|
10
10
|
const ListIndex = /*#__PURE__*/forwardRef((props, ref) => {
|
|
11
11
|
const f7ListIndex = useRef(null);
|
|
12
12
|
const {
|
|
@@ -20,22 +20,18 @@ const ListIndex = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
20
20
|
scrollList = true,
|
|
21
21
|
label = false,
|
|
22
22
|
iosItemHeight = 14,
|
|
23
|
-
mdItemHeight = 14
|
|
24
|
-
auroraItemHeight = 14
|
|
23
|
+
mdItemHeight = 14
|
|
25
24
|
} = props;
|
|
26
25
|
const extraAttrs = getExtraAttrs(props);
|
|
27
26
|
const elRef = useRef(null);
|
|
28
|
-
|
|
29
27
|
const update = () => {
|
|
30
28
|
if (!f7ListIndex.current) return;
|
|
31
29
|
f7ListIndex.current.update();
|
|
32
30
|
};
|
|
33
|
-
|
|
34
31
|
const scrollListToIndex = indexContent => {
|
|
35
32
|
if (!f7ListIndex.current) return;
|
|
36
33
|
f7ListIndex.current.scrollListToIndex(indexContent);
|
|
37
34
|
};
|
|
38
|
-
|
|
39
35
|
useImperativeHandle(ref, () => ({
|
|
40
36
|
el: elRef.current,
|
|
41
37
|
f7ListIndex: () => f7ListIndex.current,
|
|
@@ -47,7 +43,6 @@ const ListIndex = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
47
43
|
f7ListIndex.current.params.indexes = newValue;
|
|
48
44
|
update();
|
|
49
45
|
});
|
|
50
|
-
|
|
51
46
|
const onMount = () => {
|
|
52
47
|
if (!init) return;
|
|
53
48
|
f7ready(() => {
|
|
@@ -57,27 +52,22 @@ const ListIndex = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
57
52
|
indexes,
|
|
58
53
|
iosItemHeight,
|
|
59
54
|
mdItemHeight,
|
|
60
|
-
auroraItemHeight,
|
|
61
55
|
scrollList,
|
|
62
56
|
label,
|
|
63
57
|
on: {
|
|
64
58
|
select(index, itemContent, itemIndex) {
|
|
65
59
|
emit(props, 'listIndexSelect', itemContent, itemIndex);
|
|
66
60
|
}
|
|
67
|
-
|
|
68
61
|
}
|
|
69
62
|
});
|
|
70
63
|
});
|
|
71
64
|
};
|
|
72
|
-
|
|
73
65
|
const onDestroy = () => {
|
|
74
66
|
if (f7ListIndex.current && f7ListIndex.current.destroy) {
|
|
75
67
|
f7ListIndex.current.destroy();
|
|
76
68
|
}
|
|
77
|
-
|
|
78
69
|
f7ListIndex.current = null;
|
|
79
70
|
};
|
|
80
|
-
|
|
81
71
|
useIsomorphicLayoutEffect(() => {
|
|
82
72
|
onMount();
|
|
83
73
|
return onDestroy;
|
package/components/list-input.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign
|
|
2
|
-
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
3
2
|
import React, { forwardRef, useRef, useImperativeHandle, useState, useContext } from 'react';
|
|
4
3
|
import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
|
|
5
4
|
import { classNames, getExtraAttrs, emit, getSlots, extend } from '../shared/utils.js';
|
|
@@ -65,7 +64,6 @@ const ListInput = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
65
64
|
outline,
|
|
66
65
|
// Label
|
|
67
66
|
label,
|
|
68
|
-
inlineLabel,
|
|
69
67
|
floatingLabel,
|
|
70
68
|
// Datepicker
|
|
71
69
|
calendarParams,
|
|
@@ -87,108 +85,83 @@ const ListInput = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
87
85
|
const inputElRef = useRef(null);
|
|
88
86
|
const itemContentElRef = useRef(null);
|
|
89
87
|
const updateInputOnDidUpdate = useRef(false);
|
|
90
|
-
|
|
91
88
|
const getDomValue = () => {
|
|
92
89
|
if (!inputElRef.current) return undefined;
|
|
93
90
|
return inputElRef.current.value;
|
|
94
91
|
};
|
|
95
|
-
|
|
96
92
|
const isInputHasValue = () => {
|
|
97
93
|
if (type === 'datepicker' && Array.isArray(value) && value.length === 0) {
|
|
98
94
|
return false;
|
|
99
95
|
}
|
|
100
|
-
|
|
101
96
|
const domValue = getDomValue();
|
|
102
97
|
return typeof value === 'undefined' ? domValue || domValue === 0 : value || value === 0;
|
|
103
98
|
};
|
|
104
|
-
|
|
105
99
|
const validateInput = () => {
|
|
106
100
|
if (!f7 || !inputElRef.current) return;
|
|
107
101
|
const validity = inputElRef.current.validity;
|
|
108
102
|
if (!validity) return;
|
|
109
|
-
|
|
110
103
|
if (!validity.valid) {
|
|
111
104
|
if (onValidate) onValidate(false);
|
|
112
|
-
|
|
113
105
|
if (inputInvalid !== true) {
|
|
114
106
|
setInputInvalid(true);
|
|
115
107
|
}
|
|
116
108
|
} else {
|
|
117
109
|
if (onValidate) onValidate(true);
|
|
118
|
-
|
|
119
110
|
if (inputInvalid !== false) {
|
|
120
111
|
setInputInvalid(false);
|
|
121
112
|
}
|
|
122
113
|
}
|
|
123
114
|
};
|
|
124
|
-
|
|
125
115
|
const onTextareaResize = event => {
|
|
126
116
|
emit(props, 'textareaResize', event);
|
|
127
117
|
};
|
|
128
|
-
|
|
129
118
|
const onInputNotEmpty = event => {
|
|
130
119
|
emit(props, 'inputNotEmpty', event);
|
|
131
120
|
};
|
|
132
|
-
|
|
133
121
|
const onInputEmpty = event => {
|
|
134
122
|
emit(props, 'inputEmpty', event);
|
|
135
123
|
};
|
|
136
|
-
|
|
137
124
|
const onInputClear = event => {
|
|
138
125
|
emit(props, 'inputClear', event);
|
|
139
126
|
};
|
|
140
|
-
|
|
141
127
|
const onInput = function () {
|
|
142
128
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
143
129
|
args[_key] = arguments[_key];
|
|
144
130
|
}
|
|
145
|
-
|
|
146
131
|
emit(props, 'input', ...args);
|
|
147
|
-
|
|
148
132
|
if (!(validateOnBlur || validateOnBlur === '') && (validate || validate === '') && inputElRef.current) {
|
|
149
133
|
validateInput(inputElRef.current);
|
|
150
134
|
}
|
|
151
135
|
};
|
|
152
|
-
|
|
153
136
|
const onFocus = function () {
|
|
154
137
|
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
|
155
138
|
args[_key2] = arguments[_key2];
|
|
156
139
|
}
|
|
157
|
-
|
|
158
140
|
emit(props, 'focus', ...args);
|
|
159
141
|
setInputFocused(true);
|
|
160
142
|
};
|
|
161
|
-
|
|
162
143
|
const onBlur = function () {
|
|
163
144
|
for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
|
|
164
145
|
args[_key3] = arguments[_key3];
|
|
165
146
|
}
|
|
166
|
-
|
|
167
147
|
emit(props, 'blur', ...args);
|
|
168
|
-
|
|
169
148
|
if ((validate || validate === '' || validateOnBlur || validateOnBlur === '') && inputElRef.current) {
|
|
170
149
|
validateInput(inputElRef.current);
|
|
171
150
|
}
|
|
172
|
-
|
|
173
151
|
setInputFocused(false);
|
|
174
152
|
};
|
|
175
|
-
|
|
176
153
|
const onChange = function () {
|
|
177
154
|
for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
|
|
178
155
|
args[_key4] = arguments[_key4];
|
|
179
156
|
}
|
|
180
|
-
|
|
181
157
|
emit(props, 'change', ...args);
|
|
182
|
-
|
|
183
158
|
if (type === 'texteditor') {
|
|
184
159
|
emit(props, 'textEditorChange', args[0]);
|
|
185
160
|
}
|
|
186
161
|
};
|
|
187
|
-
|
|
188
162
|
useImperativeHandle(ref, () => ({
|
|
189
163
|
el: elRef.current
|
|
190
164
|
}));
|
|
191
|
-
|
|
192
165
|
const onMount = () => {
|
|
193
166
|
if (!elRef.current && !itemContentElRef.current) return;
|
|
194
167
|
f7ready(() => {
|
|
@@ -197,7 +170,6 @@ const ListInput = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
197
170
|
inputElRef.current.addEventListener('textarea:resize', onTextareaResize, false);
|
|
198
171
|
inputElRef.current.addEventListener('input:empty', onInputEmpty, false);
|
|
199
172
|
inputElRef.current.addEventListener('input:clear', onInputClear, false);
|
|
200
|
-
|
|
201
173
|
if (type === 'datepicker') {
|
|
202
174
|
f7Calendar.current = f7.calendar.create({
|
|
203
175
|
inputEl: inputElRef.current,
|
|
@@ -206,12 +178,10 @@ const ListInput = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
206
178
|
change(calendar, calendarValue) {
|
|
207
179
|
emit(props, 'calendarChange', calendarValue);
|
|
208
180
|
}
|
|
209
|
-
|
|
210
181
|
},
|
|
211
182
|
...(calendarParams || {})
|
|
212
183
|
});
|
|
213
184
|
}
|
|
214
|
-
|
|
215
185
|
if (type === 'colorpicker') {
|
|
216
186
|
f7ColorPicker.current = f7.colorPicker.create({
|
|
217
187
|
inputEl: inputElRef.current,
|
|
@@ -220,24 +190,20 @@ const ListInput = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
220
190
|
change(colorPicker, colorPickerValue) {
|
|
221
191
|
emit(props, 'colorpicker:change colorPickerChange', colorPickerValue);
|
|
222
192
|
}
|
|
223
|
-
|
|
224
193
|
},
|
|
225
194
|
...(colorPickerParams || {})
|
|
226
195
|
});
|
|
227
196
|
}
|
|
228
|
-
|
|
229
197
|
if (!(validateOnBlur || validateOnBlur === '') && (validate || validate === '') && (typeof value !== 'undefined' && value !== null && value !== '' || typeof defaultValue !== 'undefined' && defaultValue !== null && defaultValue !== '')) {
|
|
230
198
|
setTimeout(() => {
|
|
231
199
|
validateInput();
|
|
232
200
|
}, 0);
|
|
233
201
|
}
|
|
234
|
-
|
|
235
202
|
if (type === 'textarea' && resizable) {
|
|
236
203
|
f7.input.resizeTextarea(inputElRef.current);
|
|
237
204
|
}
|
|
238
205
|
});
|
|
239
206
|
};
|
|
240
|
-
|
|
241
207
|
const onDestroy = () => {
|
|
242
208
|
if (inputElRef.current) {
|
|
243
209
|
inputElRef.current.removeEventListener('input:notempty', onInputNotEmpty, false);
|
|
@@ -245,33 +211,27 @@ const ListInput = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
245
211
|
inputElRef.current.removeEventListener('input:empty', onInputEmpty, false);
|
|
246
212
|
inputElRef.current.removeEventListener('input:clear', onInputClear, false);
|
|
247
213
|
}
|
|
248
|
-
|
|
249
214
|
if (f7Calendar.current && f7Calendar.current.destroy) {
|
|
250
215
|
f7Calendar.current.destroy();
|
|
251
216
|
f7Calendar.current = null;
|
|
252
217
|
}
|
|
253
|
-
|
|
254
218
|
if (f7ColorPicker.current && f7ColorPicker.current.destroy) {
|
|
255
219
|
f7ColorPicker.current.destroy();
|
|
256
220
|
f7ColorPicker.current = null;
|
|
257
221
|
}
|
|
258
222
|
};
|
|
259
|
-
|
|
260
223
|
useIsomorphicLayoutEffect(() => {
|
|
261
224
|
onMount();
|
|
262
225
|
return onDestroy;
|
|
263
226
|
}, []);
|
|
264
227
|
useIsomorphicLayoutEffect(() => {
|
|
265
228
|
if (!f7) return;
|
|
266
|
-
|
|
267
229
|
if (updateInputOnDidUpdate.current) {
|
|
268
230
|
if (!inputElRef.current) return;
|
|
269
231
|
updateInputOnDidUpdate.current = false;
|
|
270
|
-
|
|
271
232
|
if (validate && !validateOnBlur) {
|
|
272
233
|
validateInput();
|
|
273
234
|
}
|
|
274
|
-
|
|
275
235
|
if (type === 'textarea' && resizable) {
|
|
276
236
|
f7.input.resizeTextarea(inputElRef.current);
|
|
277
237
|
}
|
|
@@ -288,11 +248,9 @@ const ListInput = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
288
248
|
watchProp(value, newValue => {
|
|
289
249
|
if (!f7) return;
|
|
290
250
|
updateInputOnDidUpdate.current = true;
|
|
291
|
-
|
|
292
251
|
if (f7Calendar.current) {
|
|
293
252
|
f7Calendar.current.setValue(newValue);
|
|
294
253
|
}
|
|
295
|
-
|
|
296
254
|
if (f7ColorPicker.current) {
|
|
297
255
|
f7ColorPicker.current.setValue(newValue);
|
|
298
256
|
}
|
|
@@ -302,16 +260,13 @@ const ListInput = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
302
260
|
const inputHasValue = isInputHasValue();
|
|
303
261
|
const isSortableComputed = sortable === true || sortable === false ? sortable : listIsSortable;
|
|
304
262
|
let inputEl;
|
|
305
|
-
|
|
306
263
|
const createInput = (InputTag, children) => {
|
|
307
264
|
const needsValue = type !== 'file' && type !== 'datepicker' && type !== 'colorpicker';
|
|
308
265
|
const needsType = InputTag === 'input';
|
|
309
266
|
let inputType = type;
|
|
310
|
-
|
|
311
267
|
if (inputType === 'datepicker' || inputType === 'colorpicker') {
|
|
312
268
|
inputType = 'text';
|
|
313
269
|
}
|
|
314
|
-
|
|
315
270
|
const inputClassName = classNames({
|
|
316
271
|
resizable: inputType === 'textarea' && resizable,
|
|
317
272
|
'no-store-data': noFormStoreData || noStoreData || ignoreStoreData,
|
|
@@ -320,18 +275,14 @@ const ListInput = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
320
275
|
'input-focused': inputFocused
|
|
321
276
|
});
|
|
322
277
|
let inputValue;
|
|
323
|
-
|
|
324
278
|
if (needsValue) {
|
|
325
279
|
if (typeof value !== 'undefined') inputValue = value;else inputValue = domValue;
|
|
326
280
|
}
|
|
327
|
-
|
|
328
281
|
const valueProps = {};
|
|
329
|
-
|
|
330
282
|
if (type !== 'datepicker' && type !== 'colorpicker') {
|
|
331
283
|
if ('value' in props) valueProps.value = inputValue;
|
|
332
284
|
if ('defaultValue' in props) valueProps.defaultValue = defaultValue;
|
|
333
285
|
}
|
|
334
|
-
|
|
335
286
|
return /*#__PURE__*/React.createElement(InputTag, _extends({
|
|
336
287
|
ref: inputElRef,
|
|
337
288
|
style: inputStyle,
|
|
@@ -370,7 +321,6 @@ const ListInput = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
370
321
|
onChange: onChange
|
|
371
322
|
}, valueProps), children);
|
|
372
323
|
};
|
|
373
|
-
|
|
374
324
|
if (renderInput) {
|
|
375
325
|
if (type === 'select' || type === 'textarea' || type === 'file') {
|
|
376
326
|
if (type === 'select') {
|
|
@@ -394,14 +344,12 @@ const ListInput = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
394
344
|
inputEl = createInput('input');
|
|
395
345
|
}
|
|
396
346
|
}
|
|
397
|
-
|
|
398
347
|
const hasErrorMessage = !!errorMessage || slots['error-message'] && slots['error-message'].length;
|
|
399
348
|
const ItemContent = /*#__PURE__*/React.createElement("div", {
|
|
400
349
|
ref: itemContentElRef,
|
|
401
350
|
className: classNames('item-content item-input', !wrap && className, !wrap && {
|
|
402
351
|
disabled
|
|
403
352
|
}, !wrap && colorClasses(props), {
|
|
404
|
-
'inline-label': inlineLabel,
|
|
405
353
|
'item-input-outline': outline,
|
|
406
354
|
'item-input-focused': inputFocused,
|
|
407
355
|
'item-input-with-info': !!info || slots.info && slots.info.length,
|
|
@@ -430,11 +378,9 @@ const ListInput = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
430
378
|
}), (info || slots.info) && /*#__PURE__*/React.createElement("div", {
|
|
431
379
|
className: "item-input-info"
|
|
432
380
|
}, info, slots.info)), slots.inner, slots['inner-end']), slots.content, slots['content-end']);
|
|
433
|
-
|
|
434
381
|
if (!wrap) {
|
|
435
382
|
return ItemContent;
|
|
436
383
|
}
|
|
437
|
-
|
|
438
384
|
return /*#__PURE__*/React.createElement("li", _extends({
|
|
439
385
|
ref: elRef,
|
|
440
386
|
id: id,
|
|
@@ -2,7 +2,6 @@ import React, { useRef, useEffect } from 'react';
|
|
|
2
2
|
import { classNames } from '../shared/utils.js';
|
|
3
3
|
import { colorClasses } from '../shared/mixins.js';
|
|
4
4
|
import Badge from './badge.js';
|
|
5
|
-
|
|
6
5
|
const ListItemContent = props => {
|
|
7
6
|
const {
|
|
8
7
|
indeterminate,
|
|
@@ -53,8 +52,9 @@ const ListItemContent = props => {
|
|
|
53
52
|
let inputEl;
|
|
54
53
|
let inputIconEl;
|
|
55
54
|
let headerEl;
|
|
56
|
-
let footerEl;
|
|
55
|
+
let footerEl;
|
|
57
56
|
|
|
57
|
+
// Input
|
|
58
58
|
if (radio || checkbox) {
|
|
59
59
|
inputEl = /*#__PURE__*/React.createElement("input", {
|
|
60
60
|
ref: inputElRef,
|
|
@@ -71,70 +71,58 @@ const ListItemContent = props => {
|
|
|
71
71
|
inputIconEl = /*#__PURE__*/React.createElement("i", {
|
|
72
72
|
className: `icon icon-${radio ? 'radio' : 'checkbox'}`
|
|
73
73
|
});
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
|
|
74
|
+
}
|
|
75
|
+
// Media
|
|
77
76
|
if (media || slots.media) {
|
|
78
77
|
let mediaImgEl;
|
|
79
|
-
|
|
80
78
|
if (media) {
|
|
81
79
|
mediaImgEl = /*#__PURE__*/React.createElement("img", {
|
|
82
80
|
src: media
|
|
83
81
|
});
|
|
84
82
|
}
|
|
85
|
-
|
|
86
83
|
mediaEl = /*#__PURE__*/React.createElement("div", {
|
|
87
84
|
className: "item-media"
|
|
88
85
|
}, mediaImgEl, slots.media);
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
|
|
86
|
+
}
|
|
87
|
+
// Inner Elements
|
|
92
88
|
if (header || slots.header) {
|
|
93
89
|
headerEl = /*#__PURE__*/React.createElement("div", {
|
|
94
90
|
className: "item-header"
|
|
95
91
|
}, header, slots.header);
|
|
96
92
|
}
|
|
97
|
-
|
|
98
93
|
if (footer || slots.footer) {
|
|
99
94
|
footerEl = /*#__PURE__*/React.createElement("div", {
|
|
100
95
|
className: "item-footer"
|
|
101
96
|
}, footer, slots.footer);
|
|
102
97
|
}
|
|
103
|
-
|
|
104
98
|
if (title || slots.title || !isMediaComputed && headerEl || !isMediaComputed && footerEl) {
|
|
105
99
|
titleEl = /*#__PURE__*/React.createElement("div", {
|
|
106
100
|
className: "item-title"
|
|
107
101
|
}, !isMediaComputed && headerEl, title, slots.title, !isMediaComputed && footerEl);
|
|
108
102
|
}
|
|
109
|
-
|
|
110
103
|
if (subtitle || slots.subtitle) {
|
|
111
104
|
subtitleEl = /*#__PURE__*/React.createElement("div", {
|
|
112
105
|
className: "item-subtitle"
|
|
113
106
|
}, subtitle, slots.subtitle);
|
|
114
107
|
}
|
|
115
|
-
|
|
116
108
|
if (text || slots.text) {
|
|
117
109
|
textEl = /*#__PURE__*/React.createElement("div", {
|
|
118
110
|
className: "item-text"
|
|
119
111
|
}, text, slots.text);
|
|
120
112
|
}
|
|
121
|
-
|
|
122
113
|
if (after || badge || slots.after) {
|
|
123
114
|
if (after) {
|
|
124
115
|
afterEl = /*#__PURE__*/React.createElement("span", null, after);
|
|
125
116
|
}
|
|
126
|
-
|
|
127
117
|
if (badge) {
|
|
128
118
|
badgeEl = /*#__PURE__*/React.createElement(Badge, {
|
|
129
119
|
color: badgeColor
|
|
130
120
|
}, badge);
|
|
131
121
|
}
|
|
132
|
-
|
|
133
122
|
afterWrapEl = /*#__PURE__*/React.createElement("div", {
|
|
134
123
|
className: "item-after"
|
|
135
124
|
}, slots['after-start'], afterEl, badgeEl, slots.after, slots['after-end']);
|
|
136
125
|
}
|
|
137
|
-
|
|
138
126
|
if (isMediaComputed) {
|
|
139
127
|
titleRowEl = /*#__PURE__*/React.createElement("div", {
|
|
140
128
|
className: "item-title-row"
|
|
@@ -147,7 +135,6 @@ const ListItemContent = props => {
|
|
|
147
135
|
className: "item-inner"
|
|
148
136
|
}, slots['inner-start'], slots['before-title'], titleEl, slots['after-title'], afterWrapEl, swipeout || accordionItem ? null : slots.default, slots.inner, slots['inner-end']);
|
|
149
137
|
}
|
|
150
|
-
|
|
151
138
|
const ItemContentTag = checkbox || radio ? 'label' : 'div';
|
|
152
139
|
const classes = classNames('item-content', {
|
|
153
140
|
'item-checkbox': checkbox,
|
|
@@ -162,6 +149,5 @@ const ListItemContent = props => {
|
|
|
162
149
|
className: "sortable-handler"
|
|
163
150
|
}), slots['content-start'], inputEl, inputIconEl, mediaEl, innerEl, slots.content, slots['content-end']);
|
|
164
151
|
};
|
|
165
|
-
|
|
166
152
|
ListItemContent.displayName = 'f7-list-item-content';
|
|
167
153
|
export default ListItemContent;
|
package/components/list-item.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign
|
|
2
|
-
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
3
2
|
import React, { forwardRef, useRef, useImperativeHandle, useContext } from 'react';
|
|
4
3
|
import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
|
|
5
4
|
import { classNames, getExtraAttrs, getSlots, emit, isStringProp } from '../shared/utils.js';
|
|
@@ -13,6 +12,7 @@ import ListItemContent from './list-item-content.js';
|
|
|
13
12
|
import { ListContext } from '../shared/list-context.js';
|
|
14
13
|
|
|
15
14
|
|
|
15
|
+
|
|
16
16
|
/*
|
|
17
17
|
const ListItemContent = ({
|
|
18
18
|
props,
|
|
@@ -51,7 +51,6 @@ const ListItemContent = ({
|
|
|
51
51
|
|
|
52
52
|
};
|
|
53
53
|
*/
|
|
54
|
-
|
|
55
54
|
const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
|
|
56
55
|
const {
|
|
57
56
|
className,
|
|
@@ -66,7 +65,6 @@ const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
66
65
|
selected,
|
|
67
66
|
mediaItem,
|
|
68
67
|
mediaList,
|
|
69
|
-
divider,
|
|
70
68
|
groupTitle,
|
|
71
69
|
swipeout,
|
|
72
70
|
swipeoutOpened,
|
|
@@ -95,92 +93,74 @@ const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
95
93
|
const elRef = useRef(null);
|
|
96
94
|
const linkElRef = useRef(null);
|
|
97
95
|
const f7SmartSelect = useRef(null);
|
|
98
|
-
|
|
99
96
|
const onClick = event => {
|
|
100
97
|
if (event.target.tagName.toLowerCase() !== 'input') {
|
|
101
98
|
emit(props, 'click', event);
|
|
102
99
|
}
|
|
103
100
|
};
|
|
104
|
-
|
|
105
101
|
const onSwipeoutOverswipeEnter = el => {
|
|
106
102
|
if (elRef.current !== el) return;
|
|
107
103
|
emit(props, 'swipeoutOverswipeEnter');
|
|
108
104
|
};
|
|
109
|
-
|
|
110
105
|
const onSwipeoutOverswipeExit = el => {
|
|
111
106
|
if (elRef.current !== el) return;
|
|
112
107
|
emit(props, 'swipeoutOverswipeExit');
|
|
113
108
|
};
|
|
114
|
-
|
|
115
109
|
const onSwipeoutDeleted = el => {
|
|
116
110
|
if (elRef.current !== el) return;
|
|
117
111
|
emit(props, 'swipeoutDeleted');
|
|
118
112
|
};
|
|
119
|
-
|
|
120
113
|
const onSwipeoutDelete = el => {
|
|
121
114
|
if (elRef.current !== el) return;
|
|
122
115
|
emit(props, 'swipeoutDelete');
|
|
123
116
|
};
|
|
124
|
-
|
|
125
117
|
const onSwipeoutClose = el => {
|
|
126
118
|
if (elRef.current !== el) return;
|
|
127
119
|
emit(props, 'swipeoutClose');
|
|
128
120
|
};
|
|
129
|
-
|
|
130
121
|
const onSwipeoutClosed = el => {
|
|
131
122
|
if (elRef.current !== el) return;
|
|
132
123
|
emit(props, 'swipeoutClosed');
|
|
133
124
|
};
|
|
134
|
-
|
|
135
125
|
const onSwipeoutOpen = el => {
|
|
136
126
|
if (elRef.current !== el) return;
|
|
137
127
|
emit(props, 'swipeoutOpen');
|
|
138
128
|
};
|
|
139
|
-
|
|
140
129
|
const onSwipeoutOpened = el => {
|
|
141
130
|
if (elRef.current !== el) return;
|
|
142
131
|
emit(props, 'swipeoutOpened');
|
|
143
132
|
};
|
|
144
|
-
|
|
145
133
|
const onSwipeout = (el, progress) => {
|
|
146
134
|
if (elRef.current !== el) return;
|
|
147
135
|
emit(props, 'swipeout', progress);
|
|
148
136
|
};
|
|
149
|
-
|
|
150
137
|
const onAccBeforeClose = (el, prevent) => {
|
|
151
138
|
if (elRef.current !== el) return;
|
|
152
139
|
emit(props, 'accordionBeforeClose', prevent);
|
|
153
140
|
};
|
|
154
|
-
|
|
155
141
|
const onAccClose = el => {
|
|
156
142
|
if (elRef.current !== el) return;
|
|
157
143
|
emit(props, 'accordionClose');
|
|
158
144
|
};
|
|
159
|
-
|
|
160
145
|
const onAccClosed = el => {
|
|
161
146
|
if (elRef.current !== el) return;
|
|
162
147
|
emit(props, 'accordionClosed');
|
|
163
148
|
};
|
|
164
|
-
|
|
165
149
|
const onAccBeforeOpen = (el, prevent) => {
|
|
166
150
|
if (elRef.current !== el) return;
|
|
167
151
|
emit(props, 'accordionBeforeOpen', prevent);
|
|
168
152
|
};
|
|
169
|
-
|
|
170
153
|
const onAccOpen = el => {
|
|
171
154
|
if (elRef.current !== el) return;
|
|
172
155
|
emit(props, 'accordionOpen');
|
|
173
156
|
};
|
|
174
|
-
|
|
175
157
|
const onAccOpened = el => {
|
|
176
158
|
if (elRef.current !== el) return;
|
|
177
159
|
emit(props, 'accordionOpened');
|
|
178
160
|
};
|
|
179
|
-
|
|
180
161
|
const onChange = event => {
|
|
181
162
|
emit(props, 'change', event);
|
|
182
163
|
};
|
|
183
|
-
|
|
184
164
|
useImperativeHandle(ref, () => ({
|
|
185
165
|
el: elRef.current,
|
|
186
166
|
f7SmartSelect: () => f7SmartSelect.current
|
|
@@ -189,14 +169,12 @@ const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
189
169
|
useRouteProps(linkElRef, props);
|
|
190
170
|
watchProp(swipeoutOpened, newValue => {
|
|
191
171
|
if (!swipeout || !elRef.current || !f7) return;
|
|
192
|
-
|
|
193
172
|
if (newValue) {
|
|
194
173
|
f7.swipeout.open(elRef.current);
|
|
195
174
|
} else {
|
|
196
175
|
f7.swipeout.close(elRef.current);
|
|
197
176
|
}
|
|
198
177
|
});
|
|
199
|
-
|
|
200
178
|
const attachEvents = () => {
|
|
201
179
|
f7ready(() => {
|
|
202
180
|
if (swipeout) {
|
|
@@ -210,7 +188,6 @@ const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
210
188
|
f7.on('swipeoutOverswipeExit', onSwipeoutOverswipeExit);
|
|
211
189
|
f7.on('swipeout', onSwipeout);
|
|
212
190
|
}
|
|
213
|
-
|
|
214
191
|
if (accordionItem) {
|
|
215
192
|
f7.on('accordionBeforeOpen', onAccBeforeOpen);
|
|
216
193
|
f7.on('accordionOpen', onAccOpen);
|
|
@@ -221,7 +198,6 @@ const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
221
198
|
}
|
|
222
199
|
});
|
|
223
200
|
};
|
|
224
|
-
|
|
225
201
|
const detachEvents = () => {
|
|
226
202
|
if (!f7) return;
|
|
227
203
|
f7.off('swipeoutOpen', onSwipeoutOpen);
|
|
@@ -240,7 +216,6 @@ const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
240
216
|
f7.off('accordionClose', onAccClose);
|
|
241
217
|
f7.off('accordionClosed', onAccClosed);
|
|
242
218
|
};
|
|
243
|
-
|
|
244
219
|
useSmartSelect(smartSelect, smartSelectParams, f7SmartSelect, () => elRef.current.querySelector('a.smart-select'));
|
|
245
220
|
useIsomorphicLayoutEffect(() => {
|
|
246
221
|
f7ready(() => {
|
|
@@ -259,7 +234,6 @@ const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
259
234
|
const isMediaComputed = mediaItem || mediaList || listIsMedia;
|
|
260
235
|
const isSortableComputed = sortable === true || sortable === false ? sortable : listIsSortable;
|
|
261
236
|
const isSortableOppositeComputed = isSortableComputed && (sortableOpposite || listIsSortableOpposite);
|
|
262
|
-
|
|
263
237
|
if (!listIsSimple) {
|
|
264
238
|
// Item Content
|
|
265
239
|
itemContentEl = /*#__PURE__*/React.createElement(ListItemContent, _extends({}, props, {
|
|
@@ -269,8 +243,9 @@ const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
269
243
|
isMediaComputed: isMediaComputed,
|
|
270
244
|
isSortableComputed: isSortableComputed,
|
|
271
245
|
isSortableOppositeComputed: isSortableOppositeComputed
|
|
272
|
-
}));
|
|
246
|
+
}));
|
|
273
247
|
|
|
248
|
+
// Link
|
|
274
249
|
if (link || href || accordionItem || smartSelect) {
|
|
275
250
|
const linkAttrs = {
|
|
276
251
|
href: link === true ? '' : link || href,
|
|
@@ -294,9 +269,7 @@ const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
294
269
|
}), itemContentEl);
|
|
295
270
|
}
|
|
296
271
|
}
|
|
297
|
-
|
|
298
272
|
const liClasses = classNames(className, {
|
|
299
|
-
'item-divider': divider,
|
|
300
273
|
'list-group-title': groupTitle,
|
|
301
274
|
'media-item': isMediaComputed,
|
|
302
275
|
swipeout,
|
|
@@ -307,8 +280,7 @@ const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
307
280
|
'chevron-center': chevronCenter,
|
|
308
281
|
'disallow-sorting': sortable === false
|
|
309
282
|
}, colorClasses(props));
|
|
310
|
-
|
|
311
|
-
if (divider || groupTitle) {
|
|
283
|
+
if (groupTitle) {
|
|
312
284
|
return /*#__PURE__*/React.createElement("li", {
|
|
313
285
|
ref: elRef,
|
|
314
286
|
id: id,
|
|
@@ -318,7 +290,6 @@ const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
318
290
|
onClick: onClick
|
|
319
291
|
}, /*#__PURE__*/React.createElement("span", null, title, children));
|
|
320
292
|
}
|
|
321
|
-
|
|
322
293
|
if (listIsSimple) {
|
|
323
294
|
return /*#__PURE__*/React.createElement("li", {
|
|
324
295
|
ref: elRef,
|
|
@@ -329,7 +300,6 @@ const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
329
300
|
onClick: onClick
|
|
330
301
|
}, title, children);
|
|
331
302
|
}
|
|
332
|
-
|
|
333
303
|
const linkItemEl = link || href || smartSelect || accordionItem ? linkEl : itemContentEl;
|
|
334
304
|
return /*#__PURE__*/React.createElement("li", _extends({
|
|
335
305
|
ref: elRef,
|