@rio-cloud/rio-uikit 0.16.1-beta-2 → 0.16.1-beta-3

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 (3) hide show
  1. package/lib/components/bottomSheet/BottomSheet.js +42 -49
  2. package/lib/version.json +1 -1
  3. package/package.json +2 -2
package/lib/components/bottomSheet/BottomSheet.js CHANGED
@@ -19,7 +19,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
19
19
 
20
20
  var _classnames = _interopRequireDefault(require("classnames"));
21
21
 
22
- var _reactMotion = require("react-motion");
22
+ var _framerMotion = require("framer-motion");
23
23
 
24
24
  var _isFunction = _interopRequireDefault(require("lodash/fp/isFunction"));
25
25
 
@@ -29,6 +29,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
29
29
 
30
30
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
31
31
 
32
+ var OFFSET_POSITION = -1000;
33
+
32
34
  var BottomSheet = function BottomSheet(props) {
33
35
  var show = props.show,
34
36
  onClose = props.onClose,
@@ -79,55 +81,46 @@ var BottomSheet = function BottomSheet(props) {
79
81
  var sheetClasses = (0, _classnames.default)('bottom-sheet', 'position-fixed left-0', !width && 'width-100pct', !height && !isMaxHeight && 'height-auto', 'bg-white', 'shadow-hard', detatch ? 'margin-15 rounded' : 'rounded-top-left rounded-top-right', className && className);
80
82
  var sheetBodyCasses = (0, _classnames.default)('bottom-sheet-body', 'height-100pct', bodyClassName && bodyClassName);
81
83
  var sheetHeight = isMaxHeight ? window.innerHeight : height;
82
- var motionStyles = {}; // Animate the bottom position
83
-
84
- motionStyles.bottom = (0, _reactMotion.spring)(isShown ? 0 : -1000, {
85
- stiffness: 210,
86
- damping: 25
87
- }); // Animate the max height if a height value is given via prop
88
-
89
- if (height) {
90
- motionStyles.height = (0, _reactMotion.spring)(sheetHeight, {
91
- stiffness: isMaxHeight ? 210 : 180,
92
- damping: isMaxHeight ? 26 : 15
93
- });
94
- }
95
-
96
- return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactMotion.Motion, {
97
- defaultStyle: {
98
- bottom: -1000,
99
- height: height
84
+ return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_framerMotion.motion.div, {
85
+ className: sheetClasses,
86
+ width: width,
87
+ initial: {
88
+ opacity: 0
89
+ },
90
+ animate: {
91
+ opacity: 1,
92
+ y: 0,
93
+ bottom: isShown ? 0 : OFFSET_POSITION,
94
+ height: sheetHeight
100
95
  },
101
- style: motionStyles
102
- }, function (style) {
103
- return /*#__PURE__*/_react.default.createElement("div", {
104
- className: sheetClasses,
105
- width: width,
106
- style: {
107
- bottom: style.bottom,
108
- height: style.height
109
- }
110
- }, /*#__PURE__*/_react.default.createElement("div", null, title && /*#__PURE__*/_react.default.createElement("div", {
111
- className: 'bottom-sheet-title display-flex justify-content-between padding-15 ' + 'border border-top-none border-left-none border-right-none border-color-lighter'
112
- }, /*#__PURE__*/_react.default.createElement("div", {
113
- className: "text-size-18"
114
- }, title)), showCloseButton && /*#__PURE__*/_react.default.createElement("div", {
115
- className: "bottom-sheet-close position-absolute top-10 right-10"
116
- }, /*#__PURE__*/_react.default.createElement("button", {
117
- className: "btn btn-muted btn-sm btn-icon-only",
118
- onClick: handleToggle
119
- }, /*#__PURE__*/_react.default.createElement("span", {
120
- className: "rioglyph rioglyph-remove"
121
- }))), showMaximizeButton && /*#__PURE__*/_react.default.createElement("div", {
122
- className: 'bottom-sheet-maximize height-30 ' + 'position-absolute top-5 left-50pct translate-x-50 cursor-pointer',
123
- onClick: handleMaximize
124
- }, /*#__PURE__*/_react.default.createElement("div", {
125
- className: "height-5 width-40 rounded bg-lighter"
126
- }))), /*#__PURE__*/_react.default.createElement("div", {
127
- className: sheetBodyCasses,
128
- ref: bodyRef
129
- }, children));
130
- }), useBackdrop && isShown && /*#__PURE__*/_react.default.createElement("div", {
96
+ exit: {
97
+ opacity: 0,
98
+ transition: {
99
+ duration: 0.3
100
+ },
101
+ bottom: OFFSET_POSITION,
102
+ height: sheetHeight
103
+ }
104
+ }, /*#__PURE__*/_react.default.createElement("div", null, title && /*#__PURE__*/_react.default.createElement("div", {
105
+ className: 'bottom-sheet-title display-flex justify-content-between padding-15 ' + 'border border-top-none border-left-none border-right-none border-color-lighter'
106
+ }, /*#__PURE__*/_react.default.createElement("div", {
107
+ className: "text-size-18"
108
+ }, title)), showCloseButton && /*#__PURE__*/_react.default.createElement("div", {
109
+ className: "bottom-sheet-close position-absolute top-10 right-10"
110
+ }, /*#__PURE__*/_react.default.createElement("button", {
111
+ className: "btn btn-muted btn-sm btn-icon-only",
112
+ onClick: handleToggle
113
+ }, /*#__PURE__*/_react.default.createElement("span", {
114
+ className: "rioglyph rioglyph-remove"
115
+ }))), showMaximizeButton && /*#__PURE__*/_react.default.createElement("div", {
116
+ className: 'bottom-sheet-maximize height-30 ' + 'position-absolute top-5 left-50pct translate-x-50 cursor-pointer',
117
+ onClick: handleMaximize
118
+ }, /*#__PURE__*/_react.default.createElement("div", {
119
+ className: "height-5 width-40 rounded bg-lighter"
120
+ }))), /*#__PURE__*/_react.default.createElement("div", {
121
+ className: sheetBodyCasses,
122
+ ref: bodyRef
123
+ }, children)), useBackdrop && isShown && /*#__PURE__*/_react.default.createElement("div", {
131
124
  className: "bottom-sheet-backdrop",
132
125
  onClick: handleToggle
133
126
  })), modalRoot);
package/lib/version.json CHANGED
@@ -1,3 +1,3 @@
1
1
  {
2
- "version": "0.16.1-beta-2"
2
+ "version": "0.16.1-beta-3"
3
3
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rio-cloud/rio-uikit",
3
- "version": "0.16.1-beta-2",
3
+ "version": "0.16.1-beta-3",
4
4
  "description": "The RIO UIKIT component library",
5
5
  "repository": "https://collaboration.msi.audi.com/stash/projects/RIOFRONT/repos/uikit-web/browse",
6
6
  "scripts": {
@@ -130,6 +130,7 @@
130
130
  "classlist-polyfill": "1.2.0",
131
131
  "classnames": "2.3.1",
132
132
  "cssuseragent": "2.1.31",
133
+ "framer-motion": "^6.3.3",
133
134
  "lodash": "4.17.21",
134
135
  "moment": "2.29.3",
135
136
  "natural-orderby": "2.0.3",
@@ -140,7 +141,6 @@
140
141
  "react-debounce-input": "3.2.5",
141
142
  "react-dropzone": "14.2.0",
142
143
  "react-input-mask": "3.0.0-alpha.2",
143
- "react-motion": "0.5.2",
144
144
  "react-notifications": "1.7.3",
145
145
  "react-onclickoutside": "6.12.1",
146
146
  "react-popper": "2.3.0",