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
|
@@ -17,7 +17,7 @@ import addDays from 'date-fns/addDays';
|
|
|
17
17
|
import startOfDay from 'date-fns/startOfDay';
|
|
18
18
|
import endOfDay from 'date-fns/endOfDay';
|
|
19
19
|
import isSameDay from 'date-fns/isSameDay';
|
|
20
|
-
import { Transition, animated } from 'react-spring
|
|
20
|
+
import { Transition, animated } from 'react-spring';
|
|
21
21
|
import { Manager, Reference, Popper } from 'react-popper';
|
|
22
22
|
import { Rifm } from 'rifm';
|
|
23
23
|
import format from 'date-fns/format';
|
|
@@ -1059,8 +1059,8 @@ var animationConfig = {
|
|
|
1059
1059
|
transform: "scale(0.95)",
|
|
1060
1060
|
pointerEvents: "none"
|
|
1061
1061
|
},
|
|
1062
|
-
config: function config(
|
|
1063
|
-
return
|
|
1062
|
+
config: function config(_show, _index, state) {
|
|
1063
|
+
return state === "leave" ? {
|
|
1064
1064
|
duration: 80
|
|
1065
1065
|
} : {
|
|
1066
1066
|
duration: 200
|
|
@@ -1069,12 +1069,13 @@ var animationConfig = {
|
|
|
1069
1069
|
};
|
|
1070
1070
|
|
|
1071
1071
|
var MountTransition = function MountTransition(props) {
|
|
1072
|
-
return /*#__PURE__*/createElement(Transition
|
|
1072
|
+
return /*#__PURE__*/createElement(Transition
|
|
1073
|
+
, Object.assign({
|
|
1073
1074
|
items: props.visible
|
|
1074
|
-
}, animationConfig, props), function (show,
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1075
|
+
}, animationConfig, props), function (styles, show, _ref, index) {
|
|
1076
|
+
var phase = _ref.phase;
|
|
1077
|
+
if (!show) return null;
|
|
1078
|
+
return props.children(styles, phase, index);
|
|
1078
1079
|
});
|
|
1079
1080
|
};
|
|
1080
1081
|
|
|
@@ -1160,11 +1161,13 @@ var DropDown = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
1160
1161
|
arrowProps = _ref2.arrowProps;
|
|
1161
1162
|
var popperWrapperStyle = _objectSpread$6(_objectSpread$6(_objectSpread$6({}, style), transitionStyles), {}, {
|
|
1162
1163
|
backgroundColor: colors.white.base,
|
|
1163
|
-
transform:
|
|
1164
|
+
transform: transitionStyles.transform.to(function (t) {
|
|
1165
|
+
return "".concat(style.transform || "", " ").concat(t || "");
|
|
1166
|
+
}),
|
|
1164
1167
|
transformOrigin: "".concat(arrowProps.style.left || 0, "px ").concat(arrowProps.style.top || 0, "px"),
|
|
1165
1168
|
padding: padding
|
|
1166
1169
|
});
|
|
1167
|
-
return /*#__PURE__*/createElement(
|
|
1170
|
+
return /*#__PURE__*/createElement(animated.div, {
|
|
1168
1171
|
className: cx(dropDownStyle, dropDownClassName),
|
|
1169
1172
|
ref: ref,
|
|
1170
1173
|
style: popperWrapperStyle,
|
|
@@ -1914,17 +1917,15 @@ var Toast = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
1914
1917
|
pointerEvents: "none"
|
|
1915
1918
|
}, customStyles[position].transitions.leave),
|
|
1916
1919
|
config: animationConfig.config
|
|
1917
|
-
}, function (show) {
|
|
1918
|
-
return show &&
|
|
1919
|
-
|
|
1920
|
-
|
|
1921
|
-
|
|
1922
|
-
|
|
1923
|
-
|
|
1924
|
-
|
|
1925
|
-
|
|
1926
|
-
}), _this2.state.text);
|
|
1927
|
-
};
|
|
1920
|
+
}, function (styles, show) {
|
|
1921
|
+
return show && /*#__PURE__*/createElement(animated.div, {
|
|
1922
|
+
className: cx(toastWrapper, _this2.props.className),
|
|
1923
|
+
style: _objectSpread$b(_objectSpread$b({
|
|
1924
|
+
backgroundColor: bColor
|
|
1925
|
+
}, styles), customStyles[position].style)
|
|
1926
|
+
}, /*#__PURE__*/createElement("i", {
|
|
1927
|
+
className: iconClass
|
|
1928
|
+
}), _this2.state.text);
|
|
1928
1929
|
});
|
|
1929
1930
|
}
|
|
1930
1931
|
}], [{
|
|
@@ -2042,15 +2043,16 @@ var Modal = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
2042
2043
|
createElement(MountTransition, {
|
|
2043
2044
|
visible: visible
|
|
2044
2045
|
}, function (transitionStyles) {
|
|
2045
|
-
return /*#__PURE__*/createElement(
|
|
2046
|
+
return /*#__PURE__*/createElement(animated.div, {
|
|
2046
2047
|
style: {
|
|
2047
2048
|
opacity: transitionStyles.opacity
|
|
2048
2049
|
},
|
|
2049
2050
|
className: cx(modalContainer, backDropClassName)
|
|
2050
|
-
}, /*#__PURE__*/createElement(
|
|
2051
|
-
|
|
2051
|
+
}, /*#__PURE__*/createElement(animated.div, {
|
|
2052
|
+
style: {
|
|
2052
2053
|
transform: transitionStyles.transform
|
|
2053
|
-
},
|
|
2054
|
+
},
|
|
2055
|
+
className: modalClassName
|
|
2054
2056
|
}, children));
|
|
2055
2057
|
}), node);
|
|
2056
2058
|
}
|
|
@@ -2931,10 +2933,12 @@ var PebblePopper = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
2931
2933
|
arrowProps = _ref2.arrowProps;
|
|
2932
2934
|
var wrapperStyle = _objectSpread$i(_objectSpread$i(_objectSpread$i({}, style), transitionStyles), {}, {
|
|
2933
2935
|
backgroundColor: popperBackgroundColor,
|
|
2934
|
-
transform:
|
|
2936
|
+
transform: transitionStyles.transform.to(function (t) {
|
|
2937
|
+
return "".concat(style.transform || "", " ").concat(t || "");
|
|
2938
|
+
}),
|
|
2935
2939
|
transformOrigin: "".concat(arrowProps.style.left || 0, "px ").concat(arrowProps.style.top || 0, "px")
|
|
2936
2940
|
});
|
|
2937
|
-
return /*#__PURE__*/createElement(
|
|
2941
|
+
return /*#__PURE__*/createElement(animated.div, {
|
|
2938
2942
|
className: cx(popperStyle, popperClassName),
|
|
2939
2943
|
ref: ref,
|
|
2940
2944
|
style: wrapperStyle,
|
|
@@ -3693,7 +3697,7 @@ var SideBar = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
3693
3697
|
closeOnOutsideClick = _this$props2.closeOnOutsideClick;
|
|
3694
3698
|
var _sidebarStyle = cx(sidebarStyle, /*#__PURE__*/css({
|
|
3695
3699
|
width: width
|
|
3696
|
-
}, ";label:Sidebar-SideBar;" + ( "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
3700
|
+
}, ";label:Sidebar-SideBar;" + ( "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNpZGViYXIuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJDK0MiLCJmaWxlIjoiU2lkZWJhci5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgKiBhcyBSZWFjdCBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IGNsb3NlU3R5bGUsIHNpZGViYXJTdHlsZSwgc2lkZWJhcldyYXBwZXJTdHlsZSB9IGZyb20gXCIuL3N0eWxlcy9TaWRlYmFyLnN0eWxlc1wiO1xuaW1wb3J0IHsgYW5pbWF0ZWQgfSBmcm9tIFwicmVhY3Qtc3ByaW5nXCI7XG5pbXBvcnQgSW5rIGZyb20gXCJyZWFjdC1pbmtcIjtcbmltcG9ydCB7IGNzcywgY3ggfSBmcm9tIFwiZW1vdGlvblwiO1xuaW1wb3J0IHsgZGlzYWJsZVNjcm9sbFkgfSBmcm9tIFwiLi4vdGhlbWUvc3R5bGVzXCI7XG5pbXBvcnQgTW91bnRUcmFuc2l0aW9uIGZyb20gXCIuL3NoYXJlZC9Nb3VudFRyYW5zaXRpb25cIjtcbmNvbnN0IHRyYW5zaXRpb25Qcm9wcyA9IHtcbiAgICBmcm9tOiB7IG9wYWNpdHk6IDAsIHRyYW5zZm9ybTogXCJ0cmFuc2xhdGVYKDEwMCUpXCIgfSxcbiAgICBlbnRlcjogeyBvcGFjaXR5OiAxLCB0cmFuc2Zvcm06IFwidHJhbnNsYXRlWCgwKVwiIH0sXG4gICAgbGVhdmU6IHsgb3BhY2l0eTogMCwgdHJhbnNmb3JtOiBcInRyYW5zbGF0ZVgoMTAwJSlcIiwgcG9pbnRlckV2ZW50czogXCJub25lXCIgfVxufTtcbmNsYXNzIFNpZGVCYXIgZXh0ZW5kcyBSZWFjdC5QdXJlQ29tcG9uZW50IHtcbiAgICBjb25zdHJ1Y3RvcigpIHtcbiAgICAgICAgc3VwZXIoLi4uYXJndW1lbnRzKTtcbiAgICAgICAgdGhpcy5vbk91dHNpZGVDbGljayA9ICgpID0+IHtcbiAgICAgICAgICAgIGNvbnN0IHsgb25PdXRzaWRlQ2xpY2ssIGNsb3NlT25PdXRzaWRlQ2xpY2ssIG9uQ2xvc2UgfSA9IHRoaXMucHJvcHM7XG4gICAgICAgICAgICBpZiAoY2xvc2VPbk91dHNpZGVDbGljaykge1xuICAgICAgICAgICAgICAgIG9uQ2xvc2UoKTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgIGlmIChvbk91dHNpZGVDbGljaylcbiAgICAgICAgICAgICAgICBvbk91dHNpZGVDbGljaygpO1xuICAgICAgICB9O1xuICAgIH1cbiAgICBjb21wb25lbnREaWRNb3VudCgpIHtcbiAgICAgICAgaWYgKHRoaXMucHJvcHMuaXNPcGVuKVxuICAgICAgICAgICAgZG9jdW1lbnQuYm9keS5jbGFzc0xpc3QuYWRkKGRpc2FibGVTY3JvbGxZKTtcbiAgICB9XG4gICAgY29tcG9uZW50RGlkVXBkYXRlKCkge1xuICAgICAgICBpZiAodGhpcy5wcm9wcy5pc09wZW4pIHtcbiAgICAgICAgICAgIGRvY3VtZW50LmJvZHkuY2xhc3NMaXN0LmFkZChkaXNhYmxlU2Nyb2xsWSk7XG4gICAgICAgIH1cbiAgICAgICAgZWxzZSB7XG4gICAgICAgICAgICBkb2N1bWVudC5ib2R5LmNsYXNzTGlzdC5yZW1vdmUoZGlzYWJsZVNjcm9sbFkpO1xuICAgICAgICB9XG4gICAgfVxuICAgIGNvbXBvbmVudFdpbGxVbm1vdW50KCkge1xuICAgICAgICBpZiAodGhpcy5wcm9wcy5pc09wZW4pIHtcbiAgICAgICAgICAgIGRvY3VtZW50LmJvZHkuY2xhc3NMaXN0LnJlbW92ZShkaXNhYmxlU2Nyb2xsWSk7XG4gICAgICAgIH1cbiAgICB9XG4gICAgcmVuZGVyKCkge1xuICAgICAgICBjb25zdCB7IHdpZHRoLCBpc09wZW4sIGNoaWxkcmVuLCBvbkNsb3NlLCBvbk91dHNpZGVDbGljaywgY2xvc2VPbk91dHNpZGVDbGljayB9ID0gdGhpcy5wcm9wcztcbiAgICAgICAgY29uc3QgX3NpZGViYXJTdHlsZSA9IGN4KHNpZGViYXJTdHlsZSwgY3NzKHsgd2lkdGggfSkpO1xuICAgICAgICByZXR1cm4gKDxNb3VudFRyYW5zaXRpb24gdmlzaWJsZT17aXNPcGVufSB7Li4udHJhbnNpdGlvblByb3BzfT5cbiAgICAgICAge3N0eWxlcyA9PiAoPD5cbiAgICAgICAgICAgIDxhbmltYXRlZC5kaXYgc3R5bGU9e3sgb3BhY2l0eTogc3R5bGVzLm9wYWNpdHkgfX0gY2xhc3NOYW1lPXtzaWRlYmFyV3JhcHBlclN0eWxlfSBvbkNsaWNrPXtvbk91dHNpZGVDbGljayB8fCBjbG9zZU9uT3V0c2lkZUNsaWNrXG4gICAgICAgICAgICA/IHRoaXMub25PdXRzaWRlQ2xpY2tcbiAgICAgICAgICAgIDogdW5kZWZpbmVkfSBkYXRhLXRlc3RpZD1cInNoYWRvd0FyZWFcIi8+XG5cbiAgICAgICAgICAgIDxhbmltYXRlZC5kaXYgY2xhc3NOYW1lPXtfc2lkZWJhclN0eWxlfSBzdHlsZT17c3R5bGVzfT5cbiAgICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9e2Nsb3NlU3R5bGV9IG9uQ2xpY2s9e29uQ2xvc2V9PlxuICAgICAgICAgICAgICAgIDxpIGNsYXNzTmFtZT1cInBpIHBpLWNsb3NlXCIvPlxuICAgICAgICAgICAgICAgIDxJbmsgLz5cbiAgICAgICAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgICAgICAgPGRpdiBzdHlsZT17eyBvdmVyZmxvd1k6IFwiYXV0b1wiLCBoZWlnaHQ6IFwiMTAwJVwiIH19PlxuICAgICAgICAgICAgICAgIHtjaGlsZHJlbn1cbiAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8L2FuaW1hdGVkLmRpdj5cbiAgICAgICAgICA8Lz4pfVxuICAgICAgPC9Nb3VudFRyYW5zaXRpb24+KTtcbiAgICB9XG59XG5TaWRlQmFyLmRlZmF1bHRQcm9wcyA9IHtcbiAgICBjbG9zZU9uT3V0c2lkZUNsaWNrOiB0cnVlXG59O1xuZXhwb3J0IGRlZmF1bHQgU2lkZUJhcjtcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPVNpZGViYXIuanN4Lm1hcCJdfQ== */")));
|
|
3697
3701
|
return /*#__PURE__*/createElement(MountTransition, Object.assign({
|
|
3698
3702
|
visible: isOpen
|
|
3699
3703
|
}, transitionProps), function (styles) {
|
|
@@ -4580,8 +4584,7 @@ var TypeAhead = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
4580
4584
|
onFocus: this.onFocus,
|
|
4581
4585
|
value: value
|
|
4582
4586
|
}, this.props), /*#__PURE__*/createElement(MountTransition, {
|
|
4583
|
-
visible: showSuggestions
|
|
4584
|
-
native: true
|
|
4587
|
+
visible: showSuggestions
|
|
4585
4588
|
}, function (transitionStyles) {
|
|
4586
4589
|
return /*#__PURE__*/createElement(animated.div, {
|
|
4587
4590
|
style: transitionStyles,
|