pebble-web 2.18.0 → 3.0.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 +38 -35
- package/dist/pebble-web.dev.js.map +1 -1
- package/dist/pebble-web.es.dev.js +23 -17
- package/dist/pebble-web.es.dev.js.map +1 -1
- package/dist/pebble-web.es.js +22 -16
- package/dist/pebble-web.es.js.map +1 -1
- package/dist/pebble-web.js +37 -34
- package/dist/pebble-web.js.map +1 -1
- package/dist/pebble-web.module.dev.js +33 -30
- package/dist/pebble-web.module.dev.js.map +1 -1
- package/dist/pebble-web.module.js +32 -29
- package/dist/pebble-web.module.js.map +1 -1
- package/dist/pebble-web.umd.dev.js +3331 -1832
- package/dist/pebble-web.umd.dev.js.map +1 -1
- package/dist/pebble-web.umd.js +3342 -1843
- package/dist/pebble-web.umd.js.map +1 -1
- package/dist/utils/animation.d.ts +7 -2
- 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 +22 -15
- package/src/utils/animation.ts +12 -3
|
@@ -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
|
|
@@ -1020,9 +1020,15 @@ const animationConfig = {
|
|
|
1020
1020
|
};
|
|
1021
1021
|
|
|
1022
1022
|
const MountTransition = props => {
|
|
1023
|
-
return /*#__PURE__*/createElement(Transition
|
|
1023
|
+
return /*#__PURE__*/createElement(Transition
|
|
1024
|
+
, Object.assign({
|
|
1024
1025
|
items: props.visible
|
|
1025
|
-
}, animationConfig, props), (
|
|
1026
|
+
}, animationConfig, props), (styles, show, {
|
|
1027
|
+
phase
|
|
1028
|
+
}, index) => {
|
|
1029
|
+
if (!show) return null;
|
|
1030
|
+
return props.children(styles, phase, index);
|
|
1031
|
+
});
|
|
1026
1032
|
};
|
|
1027
1033
|
|
|
1028
1034
|
class DropDown extends PureComponent {
|
|
@@ -1097,11 +1103,11 @@ class DropDown extends PureComponent {
|
|
|
1097
1103
|
const popperWrapperStyle = { ...style,
|
|
1098
1104
|
...transitionStyles,
|
|
1099
1105
|
backgroundColor: colors.white.base,
|
|
1100
|
-
transform: `${style.transform || ""} ${
|
|
1106
|
+
transform: transitionStyles.transform.to(t => `${style.transform || ""} ${t || ""}`),
|
|
1101
1107
|
transformOrigin: `${arrowProps.style.left || 0}px ${arrowProps.style.top || 0}px`,
|
|
1102
1108
|
padding
|
|
1103
1109
|
};
|
|
1104
|
-
return /*#__PURE__*/createElement(
|
|
1110
|
+
return /*#__PURE__*/createElement(animated.div, {
|
|
1105
1111
|
className: cx(dropDownStyle, dropDownClassName),
|
|
1106
1112
|
ref: ref,
|
|
1107
1113
|
style: popperWrapperStyle,
|
|
@@ -1783,7 +1789,7 @@ class Toast extends PureComponent {
|
|
|
1783
1789
|
...customStyles[position].transitions.leave
|
|
1784
1790
|
},
|
|
1785
1791
|
config: animationConfig.config
|
|
1786
|
-
}, show => show &&
|
|
1792
|
+
}, (styles, show) => show && /*#__PURE__*/createElement(animated.div, {
|
|
1787
1793
|
className: cx(toastWrapper, this.props.className),
|
|
1788
1794
|
style: {
|
|
1789
1795
|
backgroundColor: bColor,
|
|
@@ -1792,7 +1798,7 @@ class Toast extends PureComponent {
|
|
|
1792
1798
|
}
|
|
1793
1799
|
}, /*#__PURE__*/createElement("i", {
|
|
1794
1800
|
className: iconClass
|
|
1795
|
-
}), this.state.text))
|
|
1801
|
+
}), this.state.text));
|
|
1796
1802
|
}
|
|
1797
1803
|
}
|
|
1798
1804
|
|
|
@@ -1873,15 +1879,16 @@ class Modal extends PureComponent {
|
|
|
1873
1879
|
/*#__PURE__*/
|
|
1874
1880
|
createElement(MountTransition, {
|
|
1875
1881
|
visible: visible
|
|
1876
|
-
}, transitionStyles => /*#__PURE__*/createElement(
|
|
1882
|
+
}, transitionStyles => /*#__PURE__*/createElement(animated.div, {
|
|
1877
1883
|
style: {
|
|
1878
1884
|
opacity: transitionStyles.opacity
|
|
1879
1885
|
},
|
|
1880
1886
|
className: cx(modalContainer, backDropClassName)
|
|
1881
|
-
}, /*#__PURE__*/createElement(
|
|
1882
|
-
|
|
1887
|
+
}, /*#__PURE__*/createElement(animated.div, {
|
|
1888
|
+
style: {
|
|
1883
1889
|
transform: transitionStyles.transform
|
|
1884
|
-
},
|
|
1890
|
+
},
|
|
1891
|
+
className: modalClassName
|
|
1885
1892
|
}, children))), node);
|
|
1886
1893
|
}
|
|
1887
1894
|
}
|
|
@@ -2694,10 +2701,10 @@ class PebblePopper extends PureComponent {
|
|
|
2694
2701
|
const wrapperStyle = { ...style,
|
|
2695
2702
|
...transitionStyles,
|
|
2696
2703
|
backgroundColor: popperBackgroundColor,
|
|
2697
|
-
transform: `${style.transform || ""} ${
|
|
2704
|
+
transform: transitionStyles.transform.to(t => `${style.transform || ""} ${t || ""}`),
|
|
2698
2705
|
transformOrigin: `${arrowProps.style.left || 0}px ${arrowProps.style.top || 0}px`
|
|
2699
2706
|
};
|
|
2700
|
-
return /*#__PURE__*/createElement(
|
|
2707
|
+
return /*#__PURE__*/createElement(animated.div, {
|
|
2701
2708
|
className: cx(popperStyle, popperClassName),
|
|
2702
2709
|
ref: ref,
|
|
2703
2710
|
style: wrapperStyle,
|
|
@@ -3372,7 +3379,7 @@ class SideBar extends PureComponent {
|
|
|
3372
3379
|
} = this.props;
|
|
3373
3380
|
const _sidebarStyle = cx(sidebarStyle, /*#__PURE__*/css({
|
|
3374
3381
|
width
|
|
3375
|
-
}, ";label:Sidebar-SideBar;" + ( "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
3382
|
+
}, ";label:Sidebar-SideBar;" + ( "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNpZGViYXIuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJDK0MiLCJmaWxlIjoiU2lkZWJhci5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgKiBhcyBSZWFjdCBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IGNsb3NlU3R5bGUsIHNpZGViYXJTdHlsZSwgc2lkZWJhcldyYXBwZXJTdHlsZSB9IGZyb20gXCIuL3N0eWxlcy9TaWRlYmFyLnN0eWxlc1wiO1xuaW1wb3J0IHsgYW5pbWF0ZWQgfSBmcm9tIFwicmVhY3Qtc3ByaW5nXCI7XG5pbXBvcnQgSW5rIGZyb20gXCJyZWFjdC1pbmtcIjtcbmltcG9ydCB7IGNzcywgY3ggfSBmcm9tIFwiZW1vdGlvblwiO1xuaW1wb3J0IHsgZGlzYWJsZVNjcm9sbFkgfSBmcm9tIFwiLi4vdGhlbWUvc3R5bGVzXCI7XG5pbXBvcnQgTW91bnRUcmFuc2l0aW9uIGZyb20gXCIuL3NoYXJlZC9Nb3VudFRyYW5zaXRpb25cIjtcbmNvbnN0IHRyYW5zaXRpb25Qcm9wcyA9IHtcbiAgICBmcm9tOiB7IG9wYWNpdHk6IDAsIHRyYW5zZm9ybTogXCJ0cmFuc2xhdGVYKDEwMCUpXCIgfSxcbiAgICBlbnRlcjogeyBvcGFjaXR5OiAxLCB0cmFuc2Zvcm06IFwidHJhbnNsYXRlWCgwKVwiIH0sXG4gICAgbGVhdmU6IHsgb3BhY2l0eTogMCwgdHJhbnNmb3JtOiBcInRyYW5zbGF0ZVgoMTAwJSlcIiwgcG9pbnRlckV2ZW50czogXCJub25lXCIgfVxufTtcbmNsYXNzIFNpZGVCYXIgZXh0ZW5kcyBSZWFjdC5QdXJlQ29tcG9uZW50IHtcbiAgICBjb25zdHJ1Y3RvcigpIHtcbiAgICAgICAgc3VwZXIoLi4uYXJndW1lbnRzKTtcbiAgICAgICAgdGhpcy5vbk91dHNpZGVDbGljayA9ICgpID0+IHtcbiAgICAgICAgICAgIGNvbnN0IHsgb25PdXRzaWRlQ2xpY2ssIGNsb3NlT25PdXRzaWRlQ2xpY2ssIG9uQ2xvc2UgfSA9IHRoaXMucHJvcHM7XG4gICAgICAgICAgICBpZiAoY2xvc2VPbk91dHNpZGVDbGljaykge1xuICAgICAgICAgICAgICAgIG9uQ2xvc2UoKTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgIGlmIChvbk91dHNpZGVDbGljaylcbiAgICAgICAgICAgICAgICBvbk91dHNpZGVDbGljaygpO1xuICAgICAgICB9O1xuICAgIH1cbiAgICBjb21wb25lbnREaWRNb3VudCgpIHtcbiAgICAgICAgaWYgKHRoaXMucHJvcHMuaXNPcGVuKVxuICAgICAgICAgICAgZG9jdW1lbnQuYm9keS5jbGFzc0xpc3QuYWRkKGRpc2FibGVTY3JvbGxZKTtcbiAgICB9XG4gICAgY29tcG9uZW50RGlkVXBkYXRlKCkge1xuICAgICAgICBpZiAodGhpcy5wcm9wcy5pc09wZW4pIHtcbiAgICAgICAgICAgIGRvY3VtZW50LmJvZHkuY2xhc3NMaXN0LmFkZChkaXNhYmxlU2Nyb2xsWSk7XG4gICAgICAgIH1cbiAgICAgICAgZWxzZSB7XG4gICAgICAgICAgICBkb2N1bWVudC5ib2R5LmNsYXNzTGlzdC5yZW1vdmUoZGlzYWJsZVNjcm9sbFkpO1xuICAgICAgICB9XG4gICAgfVxuICAgIGNvbXBvbmVudFdpbGxVbm1vdW50KCkge1xuICAgICAgICBpZiAodGhpcy5wcm9wcy5pc09wZW4pIHtcbiAgICAgICAgICAgIGRvY3VtZW50LmJvZHkuY2xhc3NMaXN0LnJlbW92ZShkaXNhYmxlU2Nyb2xsWSk7XG4gICAgICAgIH1cbiAgICB9XG4gICAgcmVuZGVyKCkge1xuICAgICAgICBjb25zdCB7IHdpZHRoLCBpc09wZW4sIGNoaWxkcmVuLCBvbkNsb3NlLCBvbk91dHNpZGVDbGljaywgY2xvc2VPbk91dHNpZGVDbGljayB9ID0gdGhpcy5wcm9wcztcbiAgICAgICAgY29uc3QgX3NpZGViYXJTdHlsZSA9IGN4KHNpZGViYXJTdHlsZSwgY3NzKHsgd2lkdGggfSkpO1xuICAgICAgICByZXR1cm4gKDxNb3VudFRyYW5zaXRpb24gdmlzaWJsZT17aXNPcGVufSB7Li4udHJhbnNpdGlvblByb3BzfT5cbiAgICAgICAge3N0eWxlcyA9PiAoPD5cbiAgICAgICAgICAgIDxhbmltYXRlZC5kaXYgc3R5bGU9e3sgb3BhY2l0eTogc3R5bGVzLm9wYWNpdHkgfX0gY2xhc3NOYW1lPXtzaWRlYmFyV3JhcHBlclN0eWxlfSBvbkNsaWNrPXtvbk91dHNpZGVDbGljayB8fCBjbG9zZU9uT3V0c2lkZUNsaWNrXG4gICAgICAgICAgICA/IHRoaXMub25PdXRzaWRlQ2xpY2tcbiAgICAgICAgICAgIDogdW5kZWZpbmVkfSBkYXRhLXRlc3RpZD1cInNoYWRvd0FyZWFcIi8+XG5cbiAgICAgICAgICAgIDxhbmltYXRlZC5kaXYgY2xhc3NOYW1lPXtfc2lkZWJhclN0eWxlfSBzdHlsZT17c3R5bGVzfT5cbiAgICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9e2Nsb3NlU3R5bGV9IG9uQ2xpY2s9e29uQ2xvc2V9PlxuICAgICAgICAgICAgICAgIDxpIGNsYXNzTmFtZT1cInBpIHBpLWNsb3NlXCIvPlxuICAgICAgICAgICAgICAgIDxJbmsgLz5cbiAgICAgICAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgICAgICAgPGRpdiBzdHlsZT17eyBvdmVyZmxvd1k6IFwiYXV0b1wiLCBoZWlnaHQ6IFwiMTAwJVwiIH19PlxuICAgICAgICAgICAgICAgIHtjaGlsZHJlbn1cbiAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8L2FuaW1hdGVkLmRpdj5cbiAgICAgICAgICA8Lz4pfVxuICAgICAgPC9Nb3VudFRyYW5zaXRpb24+KTtcbiAgICB9XG59XG5TaWRlQmFyLmRlZmF1bHRQcm9wcyA9IHtcbiAgICBjbG9zZU9uT3V0c2lkZUNsaWNrOiB0cnVlXG59O1xuZXhwb3J0IGRlZmF1bHQgU2lkZUJhcjtcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPVNpZGViYXIuanN4Lm1hcCJdfQ== */")));
|
|
3376
3383
|
return /*#__PURE__*/createElement(MountTransition, Object.assign({
|
|
3377
3384
|
visible: isOpen
|
|
3378
3385
|
}, transitionProps), styles => /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(animated.div, {
|
|
@@ -4226,8 +4233,7 @@ class TypeAhead extends PureComponent {
|
|
|
4226
4233
|
onFocus: this.onFocus,
|
|
4227
4234
|
value
|
|
4228
4235
|
}, this.props), /*#__PURE__*/createElement(MountTransition, {
|
|
4229
|
-
visible: showSuggestions
|
|
4230
|
-
native: true
|
|
4236
|
+
visible: showSuggestions
|
|
4231
4237
|
}, transitionStyles => /*#__PURE__*/createElement(animated.div, {
|
|
4232
4238
|
style: transitionStyles,
|
|
4233
4239
|
className: cx(optionsWrapper$1, dropdownClassName)
|