framework7-react 7.1.5 → 8.0.0-beta.2
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 +9 -20
- package/components/list-item.d.ts +1 -1
- package/components/list-item.js +6 -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/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 -14
- package/framework7-react.js +3 -14
- 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/swiper-slide.d.ts +0 -4
- package/components/swiper-slide.js +0 -3
- package/components/swiper.d.ts +0 -4
- package/components/swiper.js +0 -3
package/components/fab-button.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
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 { classNames, getExtraAttrs, emit } from '../shared/utils.js';
|
|
5
4
|
import { colorClasses } from '../shared/mixins.js';
|
|
6
5
|
import { useTooltip } from '../shared/use-tooltip.js';
|
|
7
6
|
|
|
7
|
+
|
|
8
8
|
const FabButton = /*#__PURE__*/forwardRef((props, ref) => {
|
|
9
9
|
const {
|
|
10
10
|
className,
|
|
@@ -17,11 +17,9 @@ const FabButton = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
17
17
|
} = props;
|
|
18
18
|
const extraAttrs = getExtraAttrs(props);
|
|
19
19
|
const elRef = useRef(null);
|
|
20
|
-
|
|
21
20
|
const onClick = e => {
|
|
22
21
|
emit(props, 'click', e);
|
|
23
22
|
};
|
|
24
|
-
|
|
25
23
|
useImperativeHandle(ref, () => ({
|
|
26
24
|
el: elRef.current
|
|
27
25
|
}));
|
|
@@ -31,13 +29,11 @@ const FabButton = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
31
29
|
'fab-label-button': label
|
|
32
30
|
}, colorClasses(props));
|
|
33
31
|
let labelEl;
|
|
34
|
-
|
|
35
32
|
if (label) {
|
|
36
33
|
labelEl = /*#__PURE__*/React.createElement("span", {
|
|
37
34
|
className: "fab-label"
|
|
38
35
|
}, label);
|
|
39
36
|
}
|
|
40
|
-
|
|
41
37
|
return /*#__PURE__*/React.createElement("a", _extends({
|
|
42
38
|
id: id,
|
|
43
39
|
style: style,
|
|
@@ -1,9 +1,9 @@
|
|
|
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 { classNames, getExtraAttrs } from '../shared/utils.js';
|
|
5
4
|
import { colorClasses } from '../shared/mixins.js';
|
|
6
5
|
|
|
6
|
+
|
|
7
7
|
const FabButtons = /*#__PURE__*/forwardRef((props, ref) => {
|
|
8
8
|
const {
|
|
9
9
|
className,
|
package/components/fab.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
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 { classNames, getExtraAttrs, getSlots, emit } from '../shared/utils.js';
|
|
5
4
|
import { colorClasses } from '../shared/mixins.js';
|
|
6
5
|
import { useTooltip } from '../shared/use-tooltip.js';
|
|
7
6
|
|
|
7
|
+
|
|
8
8
|
const Fab = /*#__PURE__*/forwardRef((props, ref) => {
|
|
9
9
|
const {
|
|
10
10
|
className,
|
|
@@ -18,11 +18,9 @@ const Fab = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
18
18
|
} = props;
|
|
19
19
|
const extraAttrs = getExtraAttrs(props);
|
|
20
20
|
const elRef = useRef(null);
|
|
21
|
-
|
|
22
21
|
const onClick = e => {
|
|
23
22
|
emit(props, 'click', e);
|
|
24
23
|
};
|
|
25
|
-
|
|
26
24
|
useImperativeHandle(ref, () => ({
|
|
27
25
|
el: elRef.current
|
|
28
26
|
}));
|
|
@@ -39,7 +37,6 @@ const Fab = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
39
37
|
root: rootSlots,
|
|
40
38
|
text: textSlots
|
|
41
39
|
} = getSlots(props);
|
|
42
|
-
|
|
43
40
|
if (defaultSlots) {
|
|
44
41
|
for (let i = 0; i < defaultSlots.length; i += 1) {
|
|
45
42
|
const child = defaultSlots[i];
|
|
@@ -49,17 +46,13 @@ const Fab = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
49
46
|
if (isRoot) rootChildren.push(child);else linkChildren.push(child);
|
|
50
47
|
}
|
|
51
48
|
}
|
|
52
|
-
|
|
53
49
|
let textEl;
|
|
54
|
-
|
|
55
50
|
if (text || textSlots && textSlots.length) {
|
|
56
51
|
textEl = /*#__PURE__*/React.createElement("div", {
|
|
57
52
|
className: "fab-text"
|
|
58
53
|
}, text, textSlots);
|
|
59
54
|
}
|
|
60
|
-
|
|
61
55
|
let linkEl;
|
|
62
|
-
|
|
63
56
|
if (linkChildren.length || linkSlots && linkSlots.length || textEl) {
|
|
64
57
|
linkEl = /*#__PURE__*/React.createElement("a", {
|
|
65
58
|
target: target,
|
|
@@ -67,7 +60,6 @@ const Fab = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
67
60
|
onClick: onClick
|
|
68
61
|
}, linkChildren, textEl, linkSlots);
|
|
69
62
|
}
|
|
70
|
-
|
|
71
63
|
const classes = classNames(className, 'fab', `fab-${position}`, {
|
|
72
64
|
'fab-morph': morphTo,
|
|
73
65
|
'fab-extended': typeof textEl !== 'undefined'
|
package/components/gauge.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
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
|
/* eslint no-nested-ternary: off */
|
|
4
3
|
import React, { forwardRef, useRef, useImperativeHandle } from 'react';
|
|
5
4
|
import { classNames, getExtraAttrs } from '../shared/utils.js';
|
|
6
5
|
|
|
6
|
+
|
|
7
7
|
const Gauge = /*#__PURE__*/forwardRef((props, ref) => {
|
|
8
8
|
const {
|
|
9
9
|
className,
|
package/components/icon.d.ts
CHANGED
package/components/icon.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
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 { classNames, getExtraAttrs, extend } from '../shared/utils.js';
|
|
5
4
|
import { colorClasses } from '../shared/mixins.js';
|
|
6
5
|
import { useTooltip } from '../shared/use-tooltip.js';
|
|
7
6
|
import { useTheme } from '../shared/use-theme.js';
|
|
8
7
|
|
|
8
|
+
|
|
9
9
|
const Icon = /*#__PURE__*/forwardRef((props, ref) => {
|
|
10
10
|
const theme = useTheme();
|
|
11
11
|
const {
|
|
@@ -18,7 +18,6 @@ const Icon = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
18
18
|
icon,
|
|
19
19
|
md,
|
|
20
20
|
ios,
|
|
21
|
-
aurora,
|
|
22
21
|
size
|
|
23
22
|
} = props;
|
|
24
23
|
const extraAttrs = getExtraAttrs(props);
|
|
@@ -27,24 +26,20 @@ const Icon = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
27
26
|
el: elRef.current
|
|
28
27
|
}));
|
|
29
28
|
useTooltip(elRef, props);
|
|
30
|
-
|
|
31
29
|
const getClasses = () => {
|
|
32
30
|
let classes = {
|
|
33
31
|
icon: true
|
|
34
32
|
};
|
|
35
33
|
let themeIcon;
|
|
36
|
-
if (theme && theme.ios) themeIcon = ios;else if (theme && theme.md) themeIcon = md;
|
|
37
|
-
|
|
34
|
+
if (theme && theme.ios) themeIcon = ios;else if (theme && theme.md) themeIcon = md;
|
|
38
35
|
if (themeIcon) {
|
|
39
36
|
const parts = themeIcon.split(':');
|
|
40
37
|
const prop = parts[0];
|
|
41
38
|
const value = parts[1];
|
|
42
|
-
|
|
43
39
|
if (prop === 'material' || prop === 'f7') {
|
|
44
40
|
classes['material-icons'] = prop === 'material';
|
|
45
41
|
classes['f7-icons'] = prop === 'f7';
|
|
46
42
|
}
|
|
47
|
-
|
|
48
43
|
if (prop === 'icon') {
|
|
49
44
|
classes[value] = true;
|
|
50
45
|
}
|
|
@@ -56,30 +51,21 @@ const Icon = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
56
51
|
};
|
|
57
52
|
if (icon) classes[icon] = true;
|
|
58
53
|
}
|
|
59
|
-
|
|
60
54
|
return classNames(className, classes, colorClasses(props));
|
|
61
55
|
};
|
|
62
|
-
|
|
63
56
|
const getIconText = () => {
|
|
64
57
|
let text = material || f7;
|
|
65
|
-
|
|
66
58
|
if (md && theme && theme.md && (md.indexOf('material:') >= 0 || md.indexOf('f7:') >= 0)) {
|
|
67
59
|
text = md.split(':')[1];
|
|
68
60
|
} else if (ios && theme && theme.ios && (ios.indexOf('material:') >= 0 || ios.indexOf('f7:') >= 0)) {
|
|
69
61
|
text = ios.split(':')[1];
|
|
70
|
-
} else if (aurora && theme && theme.aurora && (aurora.indexOf('material:') >= 0 || aurora.indexOf('f7:') >= 0)) {
|
|
71
|
-
text = aurora.split(':')[1];
|
|
72
62
|
}
|
|
73
|
-
|
|
74
63
|
return text;
|
|
75
64
|
};
|
|
76
|
-
|
|
77
65
|
let sizeComputed = size;
|
|
78
|
-
|
|
79
66
|
if (typeof size === 'number' || parseFloat(size) === size * 1) {
|
|
80
67
|
sizeComputed = `${size}px`;
|
|
81
68
|
}
|
|
82
|
-
|
|
83
69
|
return /*#__PURE__*/React.createElement("i", _extends({
|
|
84
70
|
id: id,
|
|
85
71
|
style: extend({
|
package/components/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 } from 'react';
|
|
4
3
|
import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
|
|
5
4
|
import { classNames, getExtraAttrs, getSlots, emit, extend } from '../shared/utils.js';
|
|
@@ -77,123 +76,95 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
77
76
|
const elRef = useRef(null);
|
|
78
77
|
const inputElRef = useRef(null);
|
|
79
78
|
const updateInputOnDidUpdate = useRef(false);
|
|
80
|
-
|
|
81
79
|
const getDomValue = () => {
|
|
82
80
|
if (!inputElRef.current) return undefined;
|
|
83
81
|
return inputElRef.current.value;
|
|
84
82
|
};
|
|
85
|
-
|
|
86
83
|
const isInputHasValue = () => {
|
|
87
84
|
if (type === 'datepicker' && Array.isArray(value) && value.length === 0) {
|
|
88
85
|
return false;
|
|
89
86
|
}
|
|
90
|
-
|
|
91
87
|
const domValue = getDomValue();
|
|
92
88
|
return typeof value === 'undefined' ? domValue || domValue === 0 : value || value === 0;
|
|
93
89
|
};
|
|
94
|
-
|
|
95
90
|
const validateInput = () => {
|
|
96
91
|
if (!f7 || !inputElRef.current) return;
|
|
97
92
|
const validity = inputElRef.current.validity;
|
|
98
93
|
if (!validity) return;
|
|
99
|
-
|
|
100
94
|
if (!validity.valid) {
|
|
101
95
|
if (onValidate) onValidate(false);
|
|
102
|
-
|
|
103
96
|
if (inputInvalid !== true) {
|
|
104
97
|
setInputInvalid(true);
|
|
105
98
|
}
|
|
106
99
|
} else {
|
|
107
100
|
if (onValidate) onValidate(true);
|
|
108
|
-
|
|
109
101
|
if (inputInvalid !== false) {
|
|
110
102
|
setInputInvalid(false);
|
|
111
103
|
}
|
|
112
104
|
}
|
|
113
105
|
};
|
|
114
|
-
|
|
115
106
|
const onTextareaResize = event => {
|
|
116
107
|
emit(props, 'textareaResize', event);
|
|
117
108
|
};
|
|
118
|
-
|
|
119
109
|
const onInputNotEmpty = event => {
|
|
120
110
|
emit(props, 'inputNotEmpty', event);
|
|
121
111
|
};
|
|
122
|
-
|
|
123
112
|
const onInputEmpty = event => {
|
|
124
113
|
emit(props, 'inputEmpty', event);
|
|
125
114
|
};
|
|
126
|
-
|
|
127
115
|
const onInputClear = event => {
|
|
128
116
|
emit(props, 'inputClear', event);
|
|
129
117
|
};
|
|
130
|
-
|
|
131
118
|
const onInput = function () {
|
|
132
119
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
133
120
|
args[_key] = arguments[_key];
|
|
134
121
|
}
|
|
135
|
-
|
|
136
122
|
emit(props, 'input', ...args);
|
|
137
|
-
|
|
138
123
|
if (!(validateOnBlur || validateOnBlur === '') && (validate || validate === '') && inputElRef.current) {
|
|
139
124
|
validateInput();
|
|
140
125
|
}
|
|
141
126
|
};
|
|
142
|
-
|
|
143
127
|
const onFocus = function () {
|
|
144
128
|
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
|
145
129
|
args[_key2] = arguments[_key2];
|
|
146
130
|
}
|
|
147
|
-
|
|
148
131
|
emit(props, 'focus', ...args);
|
|
149
132
|
setInputFocused(true);
|
|
150
133
|
};
|
|
151
|
-
|
|
152
134
|
const onBlur = function () {
|
|
153
135
|
for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
|
|
154
136
|
args[_key3] = arguments[_key3];
|
|
155
137
|
}
|
|
156
|
-
|
|
157
138
|
emit(props, 'blur', ...args);
|
|
158
|
-
|
|
159
139
|
if ((validate || validate === '' || validateOnBlur || validateOnBlur === '') && inputElRef.current) {
|
|
160
140
|
validateInput();
|
|
161
141
|
}
|
|
162
|
-
|
|
163
142
|
setInputFocused(false);
|
|
164
143
|
};
|
|
165
|
-
|
|
166
144
|
const onChange = function () {
|
|
167
145
|
for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
|
|
168
146
|
args[_key4] = arguments[_key4];
|
|
169
147
|
}
|
|
170
|
-
|
|
171
148
|
emit(props, 'change', ...args);
|
|
172
|
-
|
|
173
149
|
if (type === 'texteditor') {
|
|
174
150
|
emit(props, 'textEditorChange', args[1]);
|
|
175
151
|
}
|
|
176
152
|
};
|
|
177
|
-
|
|
178
153
|
useImperativeHandle(ref, () => ({
|
|
179
154
|
el: elRef.current
|
|
180
155
|
}));
|
|
181
|
-
|
|
182
156
|
const onMount = () => {
|
|
183
157
|
f7ready(() => {
|
|
184
158
|
if (type === 'range' || type === 'toggle') return;
|
|
185
159
|
if (!inputElRef.current) return;
|
|
186
160
|
inputElRef.current.addEventListener('input:notempty', onInputNotEmpty, false);
|
|
187
|
-
|
|
188
161
|
if (type === 'textarea' && resizable) {
|
|
189
162
|
inputElRef.current.addEventListener('textarea:resize', onTextareaResize, false);
|
|
190
163
|
}
|
|
191
|
-
|
|
192
164
|
if (clearButton) {
|
|
193
165
|
inputElRef.current.addEventListener('input:empty', onInputEmpty, false);
|
|
194
166
|
inputElRef.current.addEventListener('input:clear', onInputClear, false);
|
|
195
167
|
}
|
|
196
|
-
|
|
197
168
|
if (type === 'datepicker') {
|
|
198
169
|
f7Calendar.current = f7.calendar.create({
|
|
199
170
|
inputEl: inputElRef.current,
|
|
@@ -202,12 +173,10 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
202
173
|
change(calendar, calendarValue) {
|
|
203
174
|
emit(props, 'calendarChange', calendarValue);
|
|
204
175
|
}
|
|
205
|
-
|
|
206
176
|
},
|
|
207
177
|
...(calendarParams || {})
|
|
208
178
|
});
|
|
209
179
|
}
|
|
210
|
-
|
|
211
180
|
if (type === 'colorpicker') {
|
|
212
181
|
f7ColorPicker.current = f7.colorPicker.create({
|
|
213
182
|
inputEl: inputElRef.current,
|
|
@@ -216,67 +185,54 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
216
185
|
change(colorPicker, colorPickerValue) {
|
|
217
186
|
emit(props, 'colorPickerChange', colorPickerValue);
|
|
218
187
|
}
|
|
219
|
-
|
|
220
188
|
},
|
|
221
189
|
...(colorPickerParams || {})
|
|
222
190
|
});
|
|
223
191
|
}
|
|
224
|
-
|
|
225
192
|
f7.input.checkEmptyState(inputElRef.current);
|
|
226
|
-
|
|
227
193
|
if (!(validateOnBlur || validateOnBlur === '') && (validate || validate === '') && (typeof value !== 'undefined' && value !== null && value !== '' || typeof defaultValue !== 'undefined' && defaultValue !== null && defaultValue !== '')) {
|
|
228
194
|
setTimeout(() => {
|
|
229
195
|
validateInput();
|
|
230
196
|
}, 0);
|
|
231
197
|
}
|
|
232
|
-
|
|
233
198
|
if (resizable) {
|
|
234
199
|
f7.input.resizeTextarea(inputElRef.current);
|
|
235
200
|
}
|
|
236
201
|
});
|
|
237
202
|
};
|
|
238
|
-
|
|
239
203
|
const onDestroy = () => {
|
|
240
204
|
if (type === 'range' || type === 'toggle') return;
|
|
241
205
|
if (!inputElRef.current) return;
|
|
242
206
|
inputElRef.current.removeEventListener('input:notempty', onInputNotEmpty, false);
|
|
243
|
-
|
|
244
207
|
if (type === 'textarea' && resizable) {
|
|
245
208
|
inputElRef.current.removeEventListener('textarea:resize', onTextareaResize, false);
|
|
246
209
|
}
|
|
247
|
-
|
|
248
210
|
if (clearButton) {
|
|
249
211
|
inputElRef.current.removeEventListener('input:empty', onInputEmpty, false);
|
|
250
212
|
inputElRef.current.removeEventListener('input:clear', onInputClear, false);
|
|
251
213
|
}
|
|
252
|
-
|
|
253
214
|
if (f7Calendar.current && f7Calendar.current.destroy) {
|
|
254
215
|
f7Calendar.current.destroy();
|
|
255
216
|
f7Calendar.current = null;
|
|
256
217
|
}
|
|
257
|
-
|
|
258
218
|
if (f7ColorPicker.current && f7ColorPicker.current.destroy) {
|
|
259
219
|
f7ColorPicker.current.destroy();
|
|
260
220
|
f7ColorPicker.current = null;
|
|
261
221
|
}
|
|
262
222
|
};
|
|
263
|
-
|
|
264
223
|
useIsomorphicLayoutEffect(() => {
|
|
265
224
|
onMount();
|
|
266
225
|
return onDestroy;
|
|
267
226
|
}, []);
|
|
268
227
|
useIsomorphicLayoutEffect(() => {
|
|
269
228
|
if (!f7) return;
|
|
270
|
-
|
|
271
229
|
if (updateInputOnDidUpdate.current) {
|
|
272
230
|
if (!inputElRef.current) return;
|
|
273
231
|
updateInputOnDidUpdate.current = false;
|
|
274
232
|
f7.input.checkEmptyState(inputElRef.current);
|
|
275
|
-
|
|
276
233
|
if (validate && !validateOnBlur) {
|
|
277
234
|
validateInput();
|
|
278
235
|
}
|
|
279
|
-
|
|
280
236
|
if (resizable) {
|
|
281
237
|
f7.input.resizeTextarea(inputElRef.current);
|
|
282
238
|
}
|
|
@@ -294,11 +250,9 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
294
250
|
if (type === 'range' || type === 'toggle') return;
|
|
295
251
|
if (!f7) return;
|
|
296
252
|
updateInputOnDidUpdate.current = true;
|
|
297
|
-
|
|
298
253
|
if (f7Calendar.current) {
|
|
299
254
|
f7Calendar.current.setValue(newValue);
|
|
300
255
|
}
|
|
301
|
-
|
|
302
256
|
if (f7ColorPicker.current) {
|
|
303
257
|
f7ColorPicker.current.setValue(newValue);
|
|
304
258
|
}
|
|
@@ -307,16 +261,13 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
307
261
|
const inputHasValue = isInputHasValue();
|
|
308
262
|
const slots = getSlots(props);
|
|
309
263
|
let inputEl;
|
|
310
|
-
|
|
311
264
|
const createInput = (InputTag, children) => {
|
|
312
265
|
const needsValue = type !== 'file' && type !== 'datepicker' && type !== 'colorpicker';
|
|
313
266
|
const needsType = InputTag === 'input';
|
|
314
267
|
let inputType = type;
|
|
315
|
-
|
|
316
268
|
if (inputType === 'datepicker' || inputType === 'colorpicker') {
|
|
317
269
|
inputType = 'text';
|
|
318
270
|
}
|
|
319
|
-
|
|
320
271
|
const inputClassName = classNames(!wrap && className, {
|
|
321
272
|
resizable: inputType === 'textarea' && resizable,
|
|
322
273
|
'no-store-data': noFormStoreData || noStoreData || ignoreStoreData,
|
|
@@ -325,18 +276,14 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
325
276
|
'input-focused': inputFocused
|
|
326
277
|
});
|
|
327
278
|
let inputValue;
|
|
328
|
-
|
|
329
279
|
if (needsValue) {
|
|
330
280
|
if (typeof value !== 'undefined') inputValue = value;else inputValue = domValue;
|
|
331
281
|
}
|
|
332
|
-
|
|
333
282
|
const valueProps = {};
|
|
334
|
-
|
|
335
283
|
if (type !== 'datepicker' && type !== 'colorpicker') {
|
|
336
284
|
if ('value' in props) valueProps.value = inputValue;
|
|
337
285
|
if ('defaultValue' in props) valueProps.defaultValue = defaultValue;
|
|
338
286
|
}
|
|
339
|
-
|
|
340
287
|
return /*#__PURE__*/React.createElement(InputTag, _extends({
|
|
341
288
|
ref: inputElRef,
|
|
342
289
|
style: inputStyle,
|
|
@@ -376,7 +323,6 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
376
323
|
onChange: onChange
|
|
377
324
|
}, valueProps), children);
|
|
378
325
|
};
|
|
379
|
-
|
|
380
326
|
if (type === 'select' || type === 'textarea' || type === 'file') {
|
|
381
327
|
if (type === 'select') {
|
|
382
328
|
inputEl = createInput('select', slots.default);
|
|
@@ -422,7 +368,6 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
422
368
|
} else {
|
|
423
369
|
inputEl = createInput('input');
|
|
424
370
|
}
|
|
425
|
-
|
|
426
371
|
if (wrap) {
|
|
427
372
|
const wrapClasses = classNames(className, 'input', {
|
|
428
373
|
'input-outline': outline,
|
|
@@ -442,7 +387,6 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
442
387
|
className: "input-info"
|
|
443
388
|
}, info, slots.info));
|
|
444
389
|
}
|
|
445
|
-
|
|
446
390
|
return inputEl;
|
|
447
391
|
});
|
|
448
392
|
Input.displayName = 'f7-input';
|
package/components/link.d.ts
CHANGED
package/components/link.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 { classNames, getExtraAttrs, isStringProp, emit } from '../shared/utils.js';
|
|
5
4
|
import { colorClasses, routerAttrs, routerClasses, actionsAttrs, actionsClasses } from '../shared/mixins.js';
|
|
@@ -11,6 +10,7 @@ import Badge from './badge.js';
|
|
|
11
10
|
import { useSmartSelect } from '../shared/use-smart-select.js';
|
|
12
11
|
|
|
13
12
|
|
|
13
|
+
|
|
14
14
|
const Link = /*#__PURE__*/forwardRef((props, ref) => {
|
|
15
15
|
const f7SmartSelect = useRef(null);
|
|
16
16
|
const {
|
|
@@ -33,14 +33,12 @@ const Link = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
33
33
|
smartSelectParams
|
|
34
34
|
} = props;
|
|
35
35
|
const tabbarContext = useContext(TabbarContext);
|
|
36
|
-
const
|
|
36
|
+
const isTabbarIcons = tabbarLabel || tabbarContext.tabbarHasIcons;
|
|
37
37
|
const extraAttrs = getExtraAttrs(props);
|
|
38
38
|
const elRef = useRef(null);
|
|
39
|
-
|
|
40
39
|
const onClick = e => {
|
|
41
40
|
emit(props, 'click', e);
|
|
42
41
|
};
|
|
43
|
-
|
|
44
42
|
useImperativeHandle(ref, () => ({
|
|
45
43
|
el: elRef.current,
|
|
46
44
|
f7SmartSelect: () => f7SmartSelect.current
|
|
@@ -52,27 +50,23 @@ const Link = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
52
50
|
});
|
|
53
51
|
let textEl;
|
|
54
52
|
let badgeEl;
|
|
55
|
-
|
|
56
53
|
if (text) {
|
|
57
54
|
if (badge) badgeEl = /*#__PURE__*/React.createElement(Badge, {
|
|
58
55
|
color: badgeColor
|
|
59
56
|
}, badge);
|
|
60
57
|
textEl = /*#__PURE__*/React.createElement("span", {
|
|
61
|
-
className:
|
|
58
|
+
className: isTabbarIcons ? 'tabbar-label' : ''
|
|
62
59
|
}, text, badgeEl);
|
|
63
60
|
}
|
|
64
|
-
|
|
65
61
|
const iconEl = useIcon(props);
|
|
66
62
|
let iconOnlyComputed;
|
|
67
|
-
|
|
68
63
|
if (iconOnly || !text && children && children.length === 0 || !text && !children) {
|
|
69
64
|
iconOnlyComputed = true;
|
|
70
65
|
} else {
|
|
71
66
|
iconOnlyComputed = false;
|
|
72
67
|
}
|
|
73
|
-
|
|
74
68
|
const classes = classNames(className, {
|
|
75
|
-
link: !(noLinkClass ||
|
|
69
|
+
link: !(noLinkClass || isTabbarIcons),
|
|
76
70
|
'icon-only': iconOnlyComputed,
|
|
77
71
|
'tab-link': tabLink || tabLink === '',
|
|
78
72
|
'tab-link-active': tabLinkActive,
|
|
@@ -81,7 +75,6 @@ const Link = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
81
75
|
let hrefComputed = href;
|
|
82
76
|
if (href === true) hrefComputed = '#';
|
|
83
77
|
if (href === false) hrefComputed = undefined; // no href attribute
|
|
84
|
-
|
|
85
78
|
const attrs = {
|
|
86
79
|
href: hrefComputed,
|
|
87
80
|
target,
|
|
@@ -1,11 +1,11 @@
|
|
|
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 { classNames, getExtraAttrs, isStringProp, emit } from '../shared/utils.js';
|
|
5
4
|
import { colorClasses, actionsAttrs, actionsClasses, routerAttrs, routerClasses } from '../shared/mixins.js';
|
|
6
5
|
import { useTooltip } from '../shared/use-tooltip.js';
|
|
7
6
|
import { useRouteProps } from '../shared/use-route-props.js';
|
|
8
7
|
|
|
8
|
+
|
|
9
9
|
const ListButton = /*#__PURE__*/forwardRef((props, ref) => {
|
|
10
10
|
const {
|
|
11
11
|
className,
|
|
@@ -23,11 +23,9 @@ const ListButton = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
23
23
|
const extraAttrs = getExtraAttrs(props);
|
|
24
24
|
const elRef = useRef(null);
|
|
25
25
|
const linkElRef = useRef(null);
|
|
26
|
-
|
|
27
26
|
const onClick = e => {
|
|
28
27
|
emit(props, 'click', e);
|
|
29
28
|
};
|
|
30
|
-
|
|
31
29
|
useImperativeHandle(ref, () => ({
|
|
32
30
|
el: elRef.current
|
|
33
31
|
}));
|
package/components/list-group.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
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 { classNames, getExtraAttrs } from '../shared/utils.js';
|
|
5
4
|
import { colorClasses } from '../shared/mixins.js';
|
|
6
5
|
import { ListContext } from '../shared/list-context.js';
|
|
7
6
|
|
|
7
|
+
|
|
8
8
|
const ListGroup = /*#__PURE__*/forwardRef((props, ref) => {
|
|
9
9
|
const {
|
|
10
10
|
className,
|