pebble-web 2.22.1 → 2.24.0-alpha.0
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/dist/components/shared/MountTransition.d.ts +4 -4
- package/dist/pebble-web.dev.js +37 -35
- package/dist/pebble-web.dev.js.map +1 -1
- package/dist/pebble-web.es.dev.js +21 -16
- package/dist/pebble-web.es.dev.js.map +1 -1
- package/dist/pebble-web.es.js +20 -15
- package/dist/pebble-web.es.js.map +1 -1
- package/dist/pebble-web.js +36 -34
- package/dist/pebble-web.js.map +1 -1
- package/dist/pebble-web.module.dev.js +31 -29
- package/dist/pebble-web.module.dev.js.map +1 -1
- package/dist/pebble-web.module.js +30 -28
- package/dist/pebble-web.module.js.map +1 -1
- package/dist/pebble-web.umd.dev.js +3330 -1832
- package/dist/pebble-web.umd.dev.js.map +1 -1
- package/dist/pebble-web.umd.js +3341 -1843
- package/dist/pebble-web.umd.js.map +1 -1
- package/dist/utils/animation.d.ts +6 -18
- package/package.json +4 -4
- package/src/components/DropDown.tsx +6 -6
- package/src/components/Modal.tsx +10 -11
- package/src/components/Popper.tsx +6 -5
- package/src/components/Sidebar.tsx +1 -1
- package/src/components/Toast.tsx +4 -5
- package/src/components/TypeAhead.tsx +2 -2
- package/src/components/__tests__/__snapshots__/popper.test.tsx.snap +1 -1
- package/src/components/shared/MountTransition.tsx +25 -14
- package/src/utils/animation.ts +13 -4
|
@@ -9,7 +9,7 @@ import addDays from 'date-fns/addDays';
|
|
|
9
9
|
import startOfDay from 'date-fns/startOfDay';
|
|
10
10
|
import endOfDay from 'date-fns/endOfDay';
|
|
11
11
|
import isSameDay from 'date-fns/isSameDay';
|
|
12
|
-
import { Transition, animated } from 'react-spring
|
|
12
|
+
import { Transition, animated } from 'react-spring';
|
|
13
13
|
import { Manager, Reference, Popper } from 'react-popper';
|
|
14
14
|
import { Rifm } from 'rifm';
|
|
15
15
|
import format from 'date-fns/format';
|
|
@@ -1012,7 +1012,7 @@ const animationConfig = {
|
|
|
1012
1012
|
transform: "scale(0.95)",
|
|
1013
1013
|
pointerEvents: "none"
|
|
1014
1014
|
},
|
|
1015
|
-
config: (
|
|
1015
|
+
config: (_show, _index, state) => state === "leave" ? {
|
|
1016
1016
|
duration: 80
|
|
1017
1017
|
} : {
|
|
1018
1018
|
duration: 200
|
|
@@ -1022,7 +1022,12 @@ const animationConfig = {
|
|
|
1022
1022
|
const MountTransition = props => {
|
|
1023
1023
|
return /*#__PURE__*/createElement(Transition, Object.assign({
|
|
1024
1024
|
items: props.visible
|
|
1025
|
-
}, animationConfig, props), (
|
|
1025
|
+
}, animationConfig, props), (styles, show, {
|
|
1026
|
+
phase
|
|
1027
|
+
}, index) => {
|
|
1028
|
+
if (!show) return null;
|
|
1029
|
+
return props.children(styles, phase, index);
|
|
1030
|
+
});
|
|
1026
1031
|
};
|
|
1027
1032
|
|
|
1028
1033
|
class DropDown extends PureComponent {
|
|
@@ -1097,11 +1102,11 @@ class DropDown extends PureComponent {
|
|
|
1097
1102
|
const popperWrapperStyle = { ...style,
|
|
1098
1103
|
...transitionStyles,
|
|
1099
1104
|
backgroundColor: colors.white.base,
|
|
1100
|
-
transform: `${style.transform || ""} ${
|
|
1105
|
+
transform: transitionStyles.transform.to(t => `${style.transform || ""} ${t || ""}`),
|
|
1101
1106
|
transformOrigin: `${arrowProps.style.left || 0}px ${arrowProps.style.top || 0}px`,
|
|
1102
1107
|
padding
|
|
1103
1108
|
};
|
|
1104
|
-
return /*#__PURE__*/createElement(
|
|
1109
|
+
return /*#__PURE__*/createElement(animated.div, {
|
|
1105
1110
|
className: cx(dropDownStyle, dropDownClassName),
|
|
1106
1111
|
ref: ref,
|
|
1107
1112
|
style: popperWrapperStyle,
|
|
@@ -1783,7 +1788,7 @@ class Toast extends PureComponent {
|
|
|
1783
1788
|
...customStyles[position].transitions.leave
|
|
1784
1789
|
},
|
|
1785
1790
|
config: animationConfig.config
|
|
1786
|
-
}, show => show &&
|
|
1791
|
+
}, (styles, show) => show && /*#__PURE__*/createElement(animated.div, {
|
|
1787
1792
|
className: cx(toastWrapper, this.props.className),
|
|
1788
1793
|
style: {
|
|
1789
1794
|
backgroundColor: bColor,
|
|
@@ -1792,7 +1797,7 @@ class Toast extends PureComponent {
|
|
|
1792
1797
|
}
|
|
1793
1798
|
}, /*#__PURE__*/createElement("i", {
|
|
1794
1799
|
className: iconClass
|
|
1795
|
-
}), this.state.text))
|
|
1800
|
+
}), this.state.text));
|
|
1796
1801
|
}
|
|
1797
1802
|
}
|
|
1798
1803
|
|
|
@@ -1873,15 +1878,16 @@ class Modal extends PureComponent {
|
|
|
1873
1878
|
/*#__PURE__*/
|
|
1874
1879
|
createElement(MountTransition, {
|
|
1875
1880
|
visible: visible
|
|
1876
|
-
}, transitionStyles => /*#__PURE__*/createElement(
|
|
1881
|
+
}, transitionStyles => /*#__PURE__*/createElement(animated.div, {
|
|
1877
1882
|
style: {
|
|
1878
1883
|
opacity: transitionStyles.opacity
|
|
1879
1884
|
},
|
|
1880
1885
|
className: cx(modalContainer, backDropClassName)
|
|
1881
|
-
}, /*#__PURE__*/createElement(
|
|
1882
|
-
|
|
1886
|
+
}, /*#__PURE__*/createElement(animated.div, {
|
|
1887
|
+
style: {
|
|
1883
1888
|
transform: transitionStyles.transform
|
|
1884
|
-
},
|
|
1889
|
+
},
|
|
1890
|
+
className: modalClassName
|
|
1885
1891
|
}, children))), node);
|
|
1886
1892
|
}
|
|
1887
1893
|
}
|
|
@@ -2694,10 +2700,10 @@ class PebblePopper extends PureComponent {
|
|
|
2694
2700
|
const wrapperStyle = { ...style,
|
|
2695
2701
|
...transitionStyles,
|
|
2696
2702
|
backgroundColor: popperBackgroundColor,
|
|
2697
|
-
transform: `${style.transform || ""} ${
|
|
2703
|
+
transform: transitionStyles.transform.to(t => `${style.transform || ""} ${t || ""}`),
|
|
2698
2704
|
transformOrigin: `${arrowProps.style.left || 0}px ${arrowProps.style.top || 0}px`
|
|
2699
2705
|
};
|
|
2700
|
-
return /*#__PURE__*/createElement(
|
|
2706
|
+
return /*#__PURE__*/createElement(animated.div, {
|
|
2701
2707
|
className: cx(popperStyle, popperClassName),
|
|
2702
2708
|
ref: ref,
|
|
2703
2709
|
style: wrapperStyle,
|
|
@@ -3372,7 +3378,7 @@ class SideBar extends PureComponent {
|
|
|
3372
3378
|
} = this.props;
|
|
3373
3379
|
const _sidebarStyle = cx(sidebarStyle, /*#__PURE__*/css({
|
|
3374
3380
|
width
|
|
3375
|
-
}, ";label:Sidebar-SideBar;" + ( "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
3381
|
+
}, ";label:Sidebar-SideBar;" + ( "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNpZGViYXIuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJDK0MiLCJmaWxlIjoiU2lkZWJhci5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgKiBhcyBSZWFjdCBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IGNsb3NlU3R5bGUsIHNpZGViYXJTdHlsZSwgc2lkZWJhcldyYXBwZXJTdHlsZSB9IGZyb20gXCIuL3N0eWxlcy9TaWRlYmFyLnN0eWxlc1wiO1xuaW1wb3J0IHsgYW5pbWF0ZWQgfSBmcm9tIFwicmVhY3Qtc3ByaW5nXCI7XG5pbXBvcnQgSW5rIGZyb20gXCJyZWFjdC1pbmtcIjtcbmltcG9ydCB7IGNzcywgY3ggfSBmcm9tIFwiZW1vdGlvblwiO1xuaW1wb3J0IHsgZGlzYWJsZVNjcm9sbFkgfSBmcm9tIFwiLi4vdGhlbWUvc3R5bGVzXCI7XG5pbXBvcnQgTW91bnRUcmFuc2l0aW9uIGZyb20gXCIuL3NoYXJlZC9Nb3VudFRyYW5zaXRpb25cIjtcbmNvbnN0IHRyYW5zaXRpb25Qcm9wcyA9IHtcbiAgICBmcm9tOiB7IG9wYWNpdHk6IDAsIHRyYW5zZm9ybTogXCJ0cmFuc2xhdGVYKDEwMCUpXCIgfSxcbiAgICBlbnRlcjogeyBvcGFjaXR5OiAxLCB0cmFuc2Zvcm06IFwidHJhbnNsYXRlWCgwKVwiIH0sXG4gICAgbGVhdmU6IHsgb3BhY2l0eTogMCwgdHJhbnNmb3JtOiBcInRyYW5zbGF0ZVgoMTAwJSlcIiwgcG9pbnRlckV2ZW50czogXCJub25lXCIgfVxufTtcbmNsYXNzIFNpZGVCYXIgZXh0ZW5kcyBSZWFjdC5QdXJlQ29tcG9uZW50IHtcbiAgICBjb25zdHJ1Y3RvcigpIHtcbiAgICAgICAgc3VwZXIoLi4uYXJndW1lbnRzKTtcbiAgICAgICAgdGhpcy5vbk91dHNpZGVDbGljayA9ICgpID0+IHtcbiAgICAgICAgICAgIGNvbnN0IHsgb25PdXRzaWRlQ2xpY2ssIGNsb3NlT25PdXRzaWRlQ2xpY2ssIG9uQ2xvc2UgfSA9IHRoaXMucHJvcHM7XG4gICAgICAgICAgICBpZiAoY2xvc2VPbk91dHNpZGVDbGljaykge1xuICAgICAgICAgICAgICAgIG9uQ2xvc2UoKTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgIGlmIChvbk91dHNpZGVDbGljaylcbiAgICAgICAgICAgICAgICBvbk91dHNpZGVDbGljaygpO1xuICAgICAgICB9O1xuICAgIH1cbiAgICBjb21wb25lbnREaWRNb3VudCgpIHtcbiAgICAgICAgaWYgKHRoaXMucHJvcHMuaXNPcGVuKVxuICAgICAgICAgICAgZG9jdW1lbnQuYm9keS5jbGFzc0xpc3QuYWRkKGRpc2FibGVTY3JvbGxZKTtcbiAgICB9XG4gICAgY29tcG9uZW50RGlkVXBkYXRlKCkge1xuICAgICAgICBpZiAodGhpcy5wcm9wcy5pc09wZW4pIHtcbiAgICAgICAgICAgIGRvY3VtZW50LmJvZHkuY2xhc3NMaXN0LmFkZChkaXNhYmxlU2Nyb2xsWSk7XG4gICAgICAgIH1cbiAgICAgICAgZWxzZSB7XG4gICAgICAgICAgICBkb2N1bWVudC5ib2R5LmNsYXNzTGlzdC5yZW1vdmUoZGlzYWJsZVNjcm9sbFkpO1xuICAgICAgICB9XG4gICAgfVxuICAgIGNvbXBvbmVudFdpbGxVbm1vdW50KCkge1xuICAgICAgICBpZiAodGhpcy5wcm9wcy5pc09wZW4pIHtcbiAgICAgICAgICAgIGRvY3VtZW50LmJvZHkuY2xhc3NMaXN0LnJlbW92ZShkaXNhYmxlU2Nyb2xsWSk7XG4gICAgICAgIH1cbiAgICB9XG4gICAgcmVuZGVyKCkge1xuICAgICAgICBjb25zdCB7IHdpZHRoLCBpc09wZW4sIGNoaWxkcmVuLCBvbkNsb3NlLCBvbk91dHNpZGVDbGljaywgY2xvc2VPbk91dHNpZGVDbGljayB9ID0gdGhpcy5wcm9wcztcbiAgICAgICAgY29uc3QgX3NpZGViYXJTdHlsZSA9IGN4KHNpZGViYXJTdHlsZSwgY3NzKHsgd2lkdGggfSkpO1xuICAgICAgICByZXR1cm4gKDxNb3VudFRyYW5zaXRpb24gdmlzaWJsZT17aXNPcGVufSB7Li4udHJhbnNpdGlvblByb3BzfT5cbiAgICAgICAge3N0eWxlcyA9PiAoPD5cbiAgICAgICAgICAgIDxhbmltYXRlZC5kaXYgc3R5bGU9e3sgb3BhY2l0eTogc3R5bGVzLm9wYWNpdHkgfX0gY2xhc3NOYW1lPXtzaWRlYmFyV3JhcHBlclN0eWxlfSBvbkNsaWNrPXtvbk91dHNpZGVDbGljayB8fCBjbG9zZU9uT3V0c2lkZUNsaWNrXG4gICAgICAgICAgICA/IHRoaXMub25PdXRzaWRlQ2xpY2tcbiAgICAgICAgICAgIDogdW5kZWZpbmVkfSBkYXRhLXRlc3RpZD1cInNoYWRvd0FyZWFcIi8+XG5cbiAgICAgICAgICAgIDxhbmltYXRlZC5kaXYgY2xhc3NOYW1lPXtfc2lkZWJhclN0eWxlfSBzdHlsZT17c3R5bGVzfT5cbiAgICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9e2Nsb3NlU3R5bGV9IG9uQ2xpY2s9e29uQ2xvc2V9PlxuICAgICAgICAgICAgICAgIDxpIGNsYXNzTmFtZT1cInBpIHBpLWNsb3NlXCIvPlxuICAgICAgICAgICAgICAgIDxJbmsgLz5cbiAgICAgICAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgICAgICAgPGRpdiBzdHlsZT17eyBvdmVyZmxvd1k6IFwiYXV0b1wiLCBoZWlnaHQ6IFwiMTAwJVwiIH19PlxuICAgICAgICAgICAgICAgIHtjaGlsZHJlbn1cbiAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8L2FuaW1hdGVkLmRpdj5cbiAgICAgICAgICA8Lz4pfVxuICAgICAgPC9Nb3VudFRyYW5zaXRpb24+KTtcbiAgICB9XG59XG5TaWRlQmFyLmRlZmF1bHRQcm9wcyA9IHtcbiAgICBjbG9zZU9uT3V0c2lkZUNsaWNrOiB0cnVlXG59O1xuZXhwb3J0IGRlZmF1bHQgU2lkZUJhcjtcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPVNpZGViYXIuanN4Lm1hcCJdfQ== */")));
|
|
3376
3382
|
return /*#__PURE__*/createElement(MountTransition, Object.assign({
|
|
3377
3383
|
visible: isOpen
|
|
3378
3384
|
}, transitionProps), styles => /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(animated.div, {
|
|
@@ -4226,8 +4232,7 @@ class TypeAhead extends PureComponent {
|
|
|
4226
4232
|
onFocus: this.onFocus,
|
|
4227
4233
|
value
|
|
4228
4234
|
}, this.props), /*#__PURE__*/createElement(MountTransition, {
|
|
4229
|
-
visible: showSuggestions
|
|
4230
|
-
native: true
|
|
4235
|
+
visible: showSuggestions
|
|
4231
4236
|
}, transitionStyles => /*#__PURE__*/createElement(animated.div, {
|
|
4232
4237
|
style: transitionStyles,
|
|
4233
4238
|
className: cx(optionsWrapper$1, dropdownClassName)
|