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.
Files changed (148) hide show
  1. package/components/accordion-content.js +2 -2
  2. package/components/accordion-item.js +2 -11
  3. package/components/accordion-toggle.js +2 -2
  4. package/components/accordion.js +2 -2
  5. package/components/actions-button.d.ts +1 -1
  6. package/components/actions-button.js +4 -8
  7. package/components/actions-group.js +2 -2
  8. package/components/actions-label.js +4 -6
  9. package/components/actions.js +4 -14
  10. package/components/app.js +4 -8
  11. package/components/area-chart.js +6 -45
  12. package/components/badge.js +2 -2
  13. package/components/block-footer.js +2 -2
  14. package/components/block-header.js +2 -2
  15. package/components/block-title.js +2 -2
  16. package/components/block.d.ts +17 -4
  17. package/components/block.js +37 -11
  18. package/components/breadcrumbs-collapsed.js +2 -4
  19. package/components/breadcrumbs-item.js +2 -4
  20. package/components/breadcrumbs-separator.js +2 -2
  21. package/components/breadcrumbs.js +2 -2
  22. package/components/button.d.ts +3 -7
  23. package/components/button.js +8 -24
  24. package/components/card-content.js +2 -2
  25. package/components/card-footer.js +2 -2
  26. package/components/card-header.js +2 -2
  27. package/components/card.d.ts +5 -2
  28. package/components/card.js +14 -23
  29. package/components/checkbox.js +2 -4
  30. package/components/chip.d.ts +0 -1
  31. package/components/chip.js +2 -9
  32. package/components/fab-backdrop.js +2 -2
  33. package/components/fab-button.js +2 -6
  34. package/components/fab-buttons.js +2 -2
  35. package/components/fab.js +2 -10
  36. package/components/gauge.js +2 -2
  37. package/components/icon.d.ts +0 -1
  38. package/components/icon.js +3 -17
  39. package/components/input.js +1 -57
  40. package/components/link.d.ts +0 -1
  41. package/components/link.js +5 -12
  42. package/components/list-button.js +2 -4
  43. package/components/list-group.js +2 -2
  44. package/components/list-index.d.ts +0 -1
  45. package/components/list-index.js +3 -13
  46. package/components/list-input.d.ts +0 -1
  47. package/components/list-input.js +1 -55
  48. package/components/list-item-content.js +6 -20
  49. package/components/list-item.d.ts +0 -1
  50. package/components/list-item.js +5 -35
  51. package/components/list.d.ts +21 -9
  52. package/components/list.js +43 -37
  53. package/components/login-screen-title.js +2 -2
  54. package/components/login-screen.js +3 -15
  55. package/components/message.js +2 -10
  56. package/components/messagebar-attachment.js +2 -5
  57. package/components/messagebar-attachments.js +2 -2
  58. package/components/messagebar-sheet-image.js +4 -5
  59. package/components/messagebar-sheet-item.js +2 -2
  60. package/components/messagebar-sheet.js +2 -2
  61. package/components/messagebar.js +1 -19
  62. package/components/messages-title.js +2 -2
  63. package/components/messages.js +2 -15
  64. package/components/nav-left.js +2 -6
  65. package/components/nav-right.js +2 -2
  66. package/components/nav-title-large.js +2 -2
  67. package/components/nav-title.js +2 -4
  68. package/components/navbar.d.ts +1 -2
  69. package/components/navbar.js +5 -31
  70. package/components/page-content.js +2 -16
  71. package/components/page.d.ts +0 -1
  72. package/components/page.js +4 -62
  73. package/components/panel.d.ts +1 -0
  74. package/components/panel.js +6 -26
  75. package/components/photo-browser.js +1 -17
  76. package/components/pie-chart.js +6 -18
  77. package/components/popover.d.ts +1 -0
  78. package/components/popover.js +4 -14
  79. package/components/popup.js +3 -19
  80. package/components/preloader.js +5 -14
  81. package/components/progressbar.js +2 -4
  82. package/components/radio.js +2 -4
  83. package/components/range.js +2 -9
  84. package/components/routable-modals.js +2 -7
  85. package/components/searchbar.d.ts +1 -2
  86. package/components/searchbar.js +5 -30
  87. package/components/segmented.d.ts +0 -3
  88. package/components/segmented.js +4 -10
  89. package/components/sheet.js +2 -22
  90. package/components/stepper.d.ts +0 -5
  91. package/components/stepper.js +3 -33
  92. package/components/subnavbar.js +2 -2
  93. package/components/swipeout-actions.js +2 -4
  94. package/components/swipeout-button.js +2 -4
  95. package/components/swiper-slide.d.ts +1 -0
  96. package/components/swiper-slide.js +1 -0
  97. package/components/swiper.d.ts +1 -0
  98. package/components/swiper.js +1 -0
  99. package/components/tab.js +4 -15
  100. package/components/tabs.js +1 -4
  101. package/components/text-editor.js +1 -18
  102. package/components/toggle.js +1 -13
  103. package/components/toolbar.d.ts +2 -6
  104. package/components/toolbar.js +9 -20
  105. package/components/treeview-item.d.ts +0 -1
  106. package/components/treeview-item.js +2 -11
  107. package/components/treeview.js +2 -2
  108. package/components/view.d.ts +0 -6
  109. package/components/view.js +3 -30
  110. package/components/views.js +2 -2
  111. package/framework7-react.d.ts +2 -12
  112. package/framework7-react.js +3 -12
  113. package/package.json +1 -1
  114. package/shared/components-router.js +0 -32
  115. package/shared/f7.js +5 -19
  116. package/shared/get-router-initial-component.js +0 -4
  117. package/shared/mixins.js +2 -8
  118. package/shared/plugin.js +2 -8
  119. package/shared/router-open-in.js +4 -15
  120. package/shared/tabbar-context.js +1 -1
  121. package/shared/use-icon.js +1 -6
  122. package/shared/use-isomorphic-layout-effect.js +0 -2
  123. package/shared/use-route-props.js +0 -1
  124. package/shared/use-smart-select.js +0 -3
  125. package/shared/use-store.js +4 -8
  126. package/shared/use-tab.js +0 -4
  127. package/shared/use-theme.js +0 -2
  128. package/shared/use-tooltip.js +0 -5
  129. package/shared/utils.js +0 -18
  130. package/shared/watch-prop.js +0 -1
  131. package/components/appbar.d.ts +0 -28
  132. package/components/appbar.js +0 -45
  133. package/components/col.d.ts +0 -36
  134. package/components/col.js +0 -75
  135. package/components/list-item-cell.d.ts +0 -23
  136. package/components/list-item-cell.js +0 -28
  137. package/components/list-item-row.d.ts +0 -23
  138. package/components/list-item-row.js +0 -28
  139. package/components/menu-dropdown-item.d.ts +0 -68
  140. package/components/menu-dropdown-item.js +0 -59
  141. package/components/menu-dropdown.d.ts +0 -28
  142. package/components/menu-dropdown.js +0 -42
  143. package/components/menu-item.d.ts +0 -81
  144. package/components/menu-item.js +0 -101
  145. package/components/menu.d.ts +0 -23
  146. package/components/menu.js +0 -30
  147. package/components/row.d.ts +0 -31
  148. package/components/row.js +0 -64
@@ -1,5 +1,4 @@
1
- function _extends() { _extends = Object.assign || 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); }
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;
@@ -54,7 +54,6 @@ export interface ListInputProps {
54
54
  info ?: string;
55
55
  outline ?: boolean;
56
56
  label ?: string | number;
57
- inlineLabel ?: boolean;
58
57
  floatingLabel ?: boolean;
59
58
  calendarParams ?: Calendar.Parameters;
60
59
  colorPickerParams ?: ColorPicker.Parameters;
@@ -1,5 +1,4 @@
1
- function _extends() { _extends = Object.assign || 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); }
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; // Input
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
- } // Media
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
- } // Inner Elements
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;
@@ -27,7 +27,6 @@ export interface ListItemProps {
27
27
  badgeColor ?: string;
28
28
  mediaItem ?: boolean;
29
29
  mediaList ?: boolean;
30
- divider ?: boolean;
31
30
  groupTitle ?: boolean;
32
31
  swipeout ?: boolean;
33
32
  swipeoutOpened ?: boolean;
@@ -1,5 +1,4 @@
1
- function _extends() { _extends = Object.assign || 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); }
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
- })); // Link
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,