@nutui/nutui-react 3.0.1 → 3.0.2

package/dist/cjs/hooks/use-client-rect.js

@@ -38,6 +38,7 @@ var getRect = function getRect(elementRef) {
         };
     }
     if (element && element.getBoundingClientRect) {
+        console.log(element, element.getBoundingClientRect());
         return element.getBoundingClientRect();
     }
     return {

package/dist/cjs/packages/datepicker/style/style.css

@@ -383,6 +383,76 @@
   right: 0;
 }
 
+.nut-pickerview {
+  --nutui-picker-item-height: 36px;
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: calc(var(--nutui-picker-item-height, 36px) * 7);
+  overflow: hidden;
+}
+.nut-pickerview-mask, .nut-pickerview-indicator {
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 3;
+  pointer-events: none;
+}
+.nut-pickerview-mask {
+  top: 0;
+  bottom: 0;
+  background-image: var(--picker-mask-background, linear-gradient(180deg, var(--nutui-white-12), var(--nutui-white-7)), linear-gradient(0deg, var(--nutui-white-12), var(--nutui-white-7)));
+  background-position: top, bottom;
+  background-size: 100% calc((var(--nutui-picker-item-height, 36px) * 7 - var(--nutui-picker-item-height, 36px)) / 2);
+  background-repeat: no-repeat;
+  transform: translateZ(0);
+}
+.nut-pickerview-indicator {
+  top: calc((var(--nutui-picker-item-height, 36px) * 7 - var(--nutui-picker-item-height, 36px)) / 2);
+  height: var(--nutui-picker-item-height, 36px);
+  border: var(--nutui-picker-item-active-line-border, 1px solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  border-left: 0;
+  border-right: 0;
+  box-sizing: border-box;
+}
+.nut-pickerview-list {
+  position: relative;
+  flex: 1;
+  height: calc(var(--nutui-picker-item-height, 36px) * 7);
+  overflow: hidden;
+  touch-action: none;
+}
+.nut-pickerview-roller {
+  position: absolute;
+  top: calc((var(--nutui-picker-item-height, 36px) * 7 - var(--nutui-picker-item-height, 36px)) / 2);
+  width: 100%;
+  height: var(--nutui-picker-item-height, 36px);
+  z-index: 1;
+  transform-style: preserve-3d;
+}
+.nut-pickerview-roller-item {
+  position: absolute;
+  top: 0;
+  backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+}
+.nut-pickerview-roller-item-hidden {
+  visibility: hidden;
+  opacity: 0;
+}
+.nut-pickerview-roller-item, .nut-pickerview-roller-item-tiled {
+  width: 100%;
+  height: var(--nutui-picker-item-height, 36px);
+  line-height: var(--nutui-picker-item-height, 36px);
+  color: var(--nutui-picker-item-text-color, var(--nutui-color-title, #1a1a1a));
+  font-size: var(--nutui-picker-item-text-font-size, var(--nutui-font-size-base, 14px));
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .nut-picker {
   background-color: var(--nutui-color-background-overlay, #ffffff);
   width: 100%;

package/dist/cjs/packages/datepickerview/style/index.js

@@ -1 +1,2 @@
+import '../../pickerview/style';
 import './datepickerview.scss';

package/dist/cjs/packages/datepickerview/style/style.css

@@ -2,6 +2,76 @@
 /* #endif */
 /* #ifndef harmony */
 /* #endif */
+.nut-pickerview {
+  --nutui-picker-item-height: 36px;
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: calc(var(--nutui-picker-item-height, 36px) * 7);
+  overflow: hidden;
+}
+.nut-pickerview-mask, .nut-pickerview-indicator {
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 3;
+  pointer-events: none;
+}
+.nut-pickerview-mask {
+  top: 0;
+  bottom: 0;
+  background-image: var(--picker-mask-background, linear-gradient(180deg, var(--nutui-white-12), var(--nutui-white-7)), linear-gradient(0deg, var(--nutui-white-12), var(--nutui-white-7)));
+  background-position: top, bottom;
+  background-size: 100% calc((var(--nutui-picker-item-height, 36px) * 7 - var(--nutui-picker-item-height, 36px)) / 2);
+  background-repeat: no-repeat;
+  transform: translateZ(0);
+}
+.nut-pickerview-indicator {
+  top: calc((var(--nutui-picker-item-height, 36px) * 7 - var(--nutui-picker-item-height, 36px)) / 2);
+  height: var(--nutui-picker-item-height, 36px);
+  border: var(--nutui-picker-item-active-line-border, 1px solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  border-left: 0;
+  border-right: 0;
+  box-sizing: border-box;
+}
+.nut-pickerview-list {
+  position: relative;
+  flex: 1;
+  height: calc(var(--nutui-picker-item-height, 36px) * 7);
+  overflow: hidden;
+  touch-action: none;
+}
+.nut-pickerview-roller {
+  position: absolute;
+  top: calc((var(--nutui-picker-item-height, 36px) * 7 - var(--nutui-picker-item-height, 36px)) / 2);
+  width: 100%;
+  height: var(--nutui-picker-item-height, 36px);
+  z-index: 1;
+  transform-style: preserve-3d;
+}
+.nut-pickerview-roller-item {
+  position: absolute;
+  top: 0;
+  backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+}
+.nut-pickerview-roller-item-hidden {
+  visibility: hidden;
+  opacity: 0;
+}
+.nut-pickerview-roller-item, .nut-pickerview-roller-item-tiled {
+  width: 100%;
+  height: var(--nutui-picker-item-height, 36px);
+  line-height: var(--nutui-picker-item-height, 36px);
+  color: var(--nutui-picker-item-text-color, var(--nutui-color-title, #1a1a1a));
+  font-size: var(--nutui-picker-item-text-font-size, var(--nutui-font-size-base, 14px));
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .nut-datepickerview {
   display: flex;
   width: 100%;

package/dist/cjs/packages/fixednav/fixednav.js

@@ -18,6 +18,7 @@ var _iconsreact = require("@nutui/icons-react");
 var _index = /*#__PURE__*/ _interop_require_default._(require("../overlay/index"));
 var _configprovider = require("../configprovider");
 var _overlay = require("../overlay/overlay");
+var _index1 = /*#__PURE__*/ _interop_require_default._(require("../badge/index"));
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _overlay.defaultOverlayProps), {
     activeText: '',
     inactiveText: '',
@@ -54,6 +55,20 @@ var FixedNav = function FixedNav(props) {
     var classes = (0, _classnames.default)(classPrefix, {
         active: visible
     }, type, className);
+    var renderListItem = function renderListItem(item, index) {
+        return /*#__PURE__*/ _react.default.createElement("div", {
+            className: "".concat(classPrefix, "-list-item"),
+            onClick: function onClick(event) {
+                return onSelect(item, event);
+            },
+            key: item.id || index
+        }, /*#__PURE__*/ _react.default.isValidElement(item.icon) ? item.icon : /*#__PURE__*/ _react.default.createElement("img", {
+            src: item.icon,
+            alt: ""
+        }), /*#__PURE__*/ _react.default.createElement("div", {
+            className: "".concat(classPrefix, "-list-text")
+        }, item.text));
+    };
     return /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread._)({
         className: classes,
         style: (0, _object_spread._)({}, position, style)
@@ -68,20 +83,11 @@ var FixedNav = function FixedNav(props) {
     }, children || /*#__PURE__*/ _react.default.createElement("div", {
         className: "".concat(classPrefix, "-list")
     }, list.map(function(item, index) {
-        return /*#__PURE__*/ _react.default.createElement("div", {
-            className: "".concat(classPrefix, "-list-item"),
-            onClick: function onClick(event) {
-                return onSelect(item, event);
-            },
-            key: item.id || index
-        }, /*#__PURE__*/ _react.default.isValidElement(item.icon) ? item.icon : /*#__PURE__*/ _react.default.createElement("img", {
-            src: item.icon,
-            alt: ""
-        }), /*#__PURE__*/ _react.default.createElement("div", {
-            className: "".concat(classPrefix, "-list-text")
-        }, item.text), item.num && /*#__PURE__*/ _react.default.createElement("div", {
-            className: "b"
-        }, item.num));
+        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, item.num ? /*#__PURE__*/ _react.default.createElement(_index1.default, {
+            value: item.num,
+            top: 8,
+            right: 6
+        }, renderListItem(item, index)) : /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, renderListItem(item, index)));
     }))), /*#__PURE__*/ _react.default.createElement("div", {
         className: "".concat(classPrefix, "-btn"),
         onClick: function onClick() {

package/dist/cjs/packages/fixednav/style/fixednav.scss

@@ -95,21 +95,6 @@
       .nut-fixednav-list-text {
         font-size: 10px;
       }
-
-      .b {
-        position: absolute;
-        right: 0;
-        top: 1px;
-        height: 14px;
-        line-height: 14px;
-        font-size: 10px;
-        padding: 0 3px;
-        color: white;
-        background: $color-primary;
-        border-radius: 7px;
-        text-align: center;
-        min-width: 12px;
-      }
     }
   }
 

package/dist/cjs/packages/fixednav/style/style.css

@@ -136,20 +136,6 @@
 .nut-fixednav-list-item .nut-fixednav-list-text {
   font-size: 10px;
 }
-.nut-fixednav-list-item .b {
-  position: absolute;
-  right: 0;
-  top: 1px;
-  height: 14px;
-  line-height: 14px;
-  font-size: 10px;
-  padding: 0 3px;
-  color: white;
-  background: var(--nutui-color-primary, #ff0f23);
-  border-radius: 7px;
-  text-align: center;
-  min-width: 12px;
-}
 .nut-fixednav.left {
   right: auto;
   left: 0;

package/dist/cjs/packages/form/__tests__/merge.spec.d.ts

@@ -0,0 +1 @@
+export {};