@nutui/nutui-react-taro 3.0.0-beta.9 → 3.0.0

package/dist/cjs/packages/nutui.react.scss.d.ts

@@ -4,11 +4,11 @@ import "./cellgroup/cellgroup.scss";
 import "./configprovider/configprovider.scss";
 import "./image/image.scss";
 import "./overlay/overlay.scss";
-import "./col/col.scss";
 import "./divider/divider.scss";
 import "./grid/grid.scss";
 import "./griditem/griditem.scss";
 import "./layout/layout.scss";
+import "./col/col.scss";
 import "./row/row.scss";
 import "./space/space.scss";
 import "./sticky/sticky.scss";
@@ -20,6 +20,8 @@ import "./hoverbutton/hoverbutton.scss";
 import "./hoverbuttonitem/hoverbuttonitem.scss";
 import "./navbar/navbar.scss";
 import "./sidenavbar/sidenavbar.scss";
+import "./sidebar/sidebar.scss";
+import "./sidebaritem/sidebaritem.scss";
 import "./sidenavbaritem/sidenavbaritem.scss";
 import "./subsidenavbar/subsidenavbar.scss";
 import "./tabbar/tabbar.scss";
@@ -42,6 +44,7 @@ import "./menu/menu.scss";
 import "./menuitem/menuitem.scss";
 import "./numberkeyboard/numberkeyboard.scss";
 import "./picker/picker.scss";
+import "./pickerview/pickerview.scss";
 import "./radio/radio.scss";
 import "./radiogroup/radiogroup.scss";
 import "./range/range.scss";

package/dist/cjs/packages/nutui.react.scss.js

@@ -14,11 +14,11 @@ require("./cellgroup/cellgroup.scss");
 require("./configprovider/configprovider.scss");
 require("./image/image.scss");
 require("./overlay/overlay.scss");
-require("./col/col.scss");
 require("./divider/divider.scss");
 require("./grid/grid.scss");
 require("./griditem/griditem.scss");
 require("./layout/layout.scss");
+require("./col/col.scss");
 require("./row/row.scss");
 require("./space/space.scss");
 require("./sticky/sticky.scss");
@@ -30,6 +30,8 @@ require("./hoverbutton/hoverbutton.scss");
 require("./hoverbuttonitem/hoverbuttonitem.scss");
 require("./navbar/navbar.scss");
 require("./sidenavbar/sidenavbar.scss");
+require("./sidebar/sidebar.scss");
+require("./sidebaritem/sidebaritem.scss");
 require("./sidenavbaritem/sidenavbaritem.scss");
 require("./subsidenavbar/subsidenavbar.scss");
 require("./tabbar/tabbar.scss");
@@ -52,6 +54,7 @@ require("./menu/menu.scss");
 require("./menuitem/menuitem.scss");
 require("./numberkeyboard/numberkeyboard.scss");
 require("./picker/picker.scss");
+require("./pickerview/pickerview.scss");
 require("./radio/radio.scss");
 require("./radiogroup/radiogroup.scss");
 require("./range/range.scss");

package/dist/cjs/packages/overlay/index.d.ts

@@ -1,3 +1,3 @@
 import { Overlay } from "./overlay";
-export type { OverlayProps } from "./overlay";
+export type { OverlayProps } from './types.taro';
 export default Overlay;

package/dist/cjs/packages/overlay/overlay.d.ts

@@ -1,15 +1,4 @@
 import React, { FunctionComponent } from 'react';
-import { ITouchEvent } from '@tarojs/components';
-import { BasicComponent } from "../../utils/typings";
-export interface OverlayProps extends BasicComponent {
-    zIndex: number;
-    duration: number;
-    closeOnOverlayClick: boolean;
-    visible: boolean;
-    lockScroll: boolean;
-    onClick: (event: ITouchEvent) => void;
-    afterShow: () => void;
-    afterClose: () => void;
-}
+import { OverlayProps } from './types.taro';
 export declare const defaultOverlayProps: OverlayProps;
 export declare const Overlay: FunctionComponent<Partial<OverlayProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'>>;

package/dist/cjs/packages/overlay/overlay.js

@@ -27,7 +27,7 @@ var _reacttransitiongroup = require("react-transition-group");
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _components = require("@tarojs/components");
 var _typings = require("../../utils/typings");
-var _uselockscolltaro = require("../../utils/use-lock-scoll-taro");
+var _uselockscolltaro = require("../../hooks/use-lock-scoll-taro");
 var _platformtaro = require("../../utils/platform-taro");
 var defaultOverlayProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     zIndex: 1000,
@@ -35,19 +35,11 @@ var defaultOverlayProps = (0, _object_spread_props._)((0, _object_spread._)({},
     closeOnOverlayClick: true,
     visible: false,
     lockScroll: true,
-    onClick: function onClick(event) {}
+    onClick: function onClick() {},
+    afterShow: function afterShow() {},
+    afterClose: function afterClose() {}
 });
 var Overlay = function Overlay(props) {
-    var renderHarmony = function renderHarmony() {
-        return innerVisible ? /*#__PURE__*/ _react.default.createElement(_components.View, (0, _object_spread_props._)((0, _object_spread._)({
-            ref: nodeRef,
-            className: classes,
-            style: styles
-        }, rest), {
-            catchMove: lockScroll,
-            onClick: handleClick
-        }), children) : null;
-    };
     var _ref = (0, _object_spread._)({}, defaultOverlayProps, props), children = _ref.children, zIndex = _ref.zIndex, duration = _ref.duration, className = _ref.className, closeOnOverlayClick = _ref.closeOnOverlayClick, visible = _ref.visible, lockScroll = _ref.lockScroll, style = _ref.style, afterShow = _ref.afterShow, afterClose = _ref.afterClose, onClick = _ref.onClick, rest = (0, _object_without_properties._)(_ref, [
         "children",
         "zIndex",
@@ -61,46 +53,41 @@ var Overlay = function Overlay(props) {
         "afterClose",
         "onClick"
     ]);
-    var classPrefix = "nut-overlay";
+    var classPrefix = 'nut-overlay';
     var _useState = (0, _sliced_to_array._)((0, _react.useState)(visible), 2), innerVisible = _useState[0], setInnerVisible = _useState[1];
     var nodeRef = (0, _uselockscolltaro.useLockScrollTaro)(!!lockScroll && innerVisible);
     (0, _react.useEffect)(function() {
-        if (visible) {
-            setInnerVisible(true);
-        } else {
-            setInnerVisible(false);
-        }
+        setInnerVisible(visible);
     }, [
         visible
     ]);
     var classes = (0, _classnames.default)(classPrefix, className);
-    var styles = (0, _object_spread._)({}, style);
+    var styles = (0, _object_spread_props._)((0, _object_spread._)({}, style), {
+        zIndex: zIndex
+    });
     var handleClick = function handleClick(e) {
         if (closeOnOverlayClick) {
             onClick && onClick(e);
         }
     };
-    var onHandleOpened = function onHandleOpened(e) {
-        afterShow && afterShow();
-    };
-    var onHandleClosed = function onHandleClosed(e) {
-        afterClose && afterClose();
+    var renderOverlay = function renderOverlay() {
+        return /*#__PURE__*/ _react.default.createElement(_components.View, (0, _object_spread_props._)((0, _object_spread._)({
+            ref: nodeRef,
+            className: classes,
+            style: styles
+        }, rest), {
+            catchMove: lockScroll,
+            onClick: handleClick
+        }), children);
     };
-    return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, !(0, _platformtaro.harmonyAndRn)() ? /*#__PURE__*/ _react.default.createElement(_reacttransitiongroup.CSSTransition, {
+    return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, !(0, _platformtaro.harmony)() ? /*#__PURE__*/ _react.default.createElement(_reacttransitiongroup.CSSTransition, {
         nodeRef: nodeRef,
         classNames: "".concat(classPrefix, "-slide"),
         unmountOnExit: true,
         timeout: duration,
         in: innerVisible,
-        onEntered: onHandleOpened,
-        onExited: onHandleClosed
-    }, /*#__PURE__*/ _react.default.createElement(_components.View, (0, _object_spread_props._)((0, _object_spread._)({
-        ref: nodeRef,
-        className: classes,
-        style: styles
-    }, rest), {
-        catchMove: lockScroll,
-        onClick: handleClick
-    }), children)) : renderHarmony());
+        onEntered: afterShow,
+        onExited: afterClose
+    }, renderOverlay()) : innerVisible && renderOverlay());
 };
 Overlay.displayName = 'NutOverlay';

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

@@ -1,10 +1,5 @@
 .nut-overlay {
-  /* #ifdef rn */
-  position: absolute;
-  /* #endif */
-  /* #ifndef rn */
   position: fixed;
-  /* #endif */
   top: 0;
   left: 0;
   bottom: 0;

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

@@ -3,19 +3,14 @@
 /* #ifndef harmony */
 /* #endif */
 .nut-overlay {
-  /* #ifdef rn */
-  position: absolute;
-  /* #endif */
-  /* #ifndef rn */
   position: fixed;
-  /* #endif */
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--nutui-overlay-bg-color, var(--nutui-black-10));
+  background-color: var(--nutui-overlay-bg-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
   z-index: var(--nutui-overlay-zIndex, 1000);
 }
 

package/dist/cjs/packages/overlay/style/style.harmony.css

@@ -0,0 +1,63 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.7);
+  z-index: 1000;
+}
+
+.nut-overflow-hidden {
+  overflow: hidden !important;
+}
+
+@keyframes nut-fade-in {
+  0% {
+    opacity: 0;
+  }
+  1% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes nut-fade-out {
+  0% {
+    opacity: 1;
+  }
+  1% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+.nut-overlay-slide-enter-active {
+  animation-fill-mode: both;
+  animation-name: nut-fade-in;
+  animation-duration: 0.3s;
+}
+.nut-overlay-slide-appear-active {
+  animation-fill-mode: both;
+  animation-name: nut-fade-in;
+  animation-duration: 0.3s;
+}
+.nut-overlay-slide-exit-active {
+  animation-fill-mode: both;
+  animation-name: nut-fade-out;
+  animation-duration: 0.3s;
+}
+
+[dir=rtl] .nut-overlay,
+.nut-rtl .nut-overlay {
+  left: auto;
+  right: 0;
+}

package/dist/cjs/packages/overlay/types.d.ts

@@ -0,0 +1,11 @@
+import { BasicComponent } from "../../utils/typings";
+export interface OverlayProps extends BasicComponent {
+    zIndex: number;
+    duration: number;
+    closeOnOverlayClick: boolean;
+    visible: boolean;
+    lockScroll: boolean;
+    onClick: (event: React.MouseEvent) => void;
+    afterShow: () => void;
+    afterClose: () => void;
+}

package/dist/cjs/packages/overlay/types.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/dist/cjs/packages/overlay/types.taro.d.ts

@@ -0,0 +1,5 @@
+import { ITouchEvent } from '@tarojs/components';
+import { OverlayProps as OverlayWebProps } from './types';
+export type OverlayProps = Omit<OverlayWebProps, 'onClick'> & {
+    onClick: (event: ITouchEvent) => void;
+};

package/dist/cjs/packages/pagination/pagination.js

@@ -19,7 +19,7 @@ var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _components = require("@tarojs/components");
 var _index = require("../configprovider/index");
-var _usepropsvalue = require("../../utils/use-props-value");
+var _usepropsvalue = require("../../hooks/use-props-value");
 var _typings = require("../../utils/typings");
 var _addcolorforharmony = /*#__PURE__*/ _interop_require_default._(require("../../utils/add-color-for-harmony"));
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {

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

@@ -6,7 +6,7 @@
   display: flex;
   flex-direction: row;
   font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, 14px));
-  color: var(--nutui-pagination-color, var(--nutui-brand-6));
+  color: var(--nutui-pagination-color, var(--nutui-color-primary, #ff0f23));
 }
 
 .nut-pagination-prev,
@@ -20,10 +20,10 @@
   align-items: center;
   justify-content: center;
   font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, 14px));
-  color: var(--nutui-pagination-color, var(--nutui-brand-6));
+  color: var(--nutui-pagination-color, var(--nutui-color-primary, #ff0f23));
   background: #ffffff;
   border-radius: var(--nutui-pagination-item-border-radius, 2px);
-  border: var(--nutui-pagination-item-border-width, 1px) solid var(--nutui-pagination-item-border-color, var(--nutui-black-3));
+  border: var(--nutui-pagination-item-border-width, 1px) solid var(--nutui-pagination-item-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
   cursor: pointer;
 }
 
@@ -45,13 +45,13 @@
 .nut-pagination-item-active {
   color: #ffffff;
   border-width: 0;
-  background-color: var(--nutui-brand-6);
+  background-color: var(--nutui-color-primary, #ff0f23);
 }
 
 .nut-pagination-item-disabled,
 .nut-pagination-next-disabled,
 .nut-pagination-prev-disabled {
-  color: var(--nutui-pagination-disable-color, var(--nutui-gray-4));
+  color: var(--nutui-pagination-disable-color, var(--nutui-color-text-disabled, #c2c4cc));
   background-color: var(--nutui-pagination-disable-background-color, #f7f8fa);
   cursor: not-allowed;
 }
@@ -62,11 +62,11 @@
   line-height: 39px;
   text-align: center;
   font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, 14px));
-  color: var(--nutui-pagination-color, var(--nutui-brand-6));
+  color: var(--nutui-pagination-color, var(--nutui-color-primary, #ff0f23));
 }
 
 .nut-pagination-simple-border {
-  border-right: var(--nutui-pagination-item-border-width, 1px) solid var(--nutui-pagination-item-border-color, var(--nutui-black-3));
+  border-right: var(--nutui-pagination-item-border-width, 1px) solid var(--nutui-pagination-item-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
 }
 
 .nut-pagination-lite {

package/dist/cjs/packages/pagination/style/style.harmony.css

@@ -0,0 +1,139 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-pagination {
+  display: flex;
+  flex-direction: row;
+  font-size: 14px;
+  color: #ff0f23;
+}
+
+.nut-pagination-prev {
+  height: 39px;
+  min-width: 39px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  color: #ff0f23;
+  background: #ffffff;
+  border-radius: 2px;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  cursor: pointer;
+}
+
+.nut-pagination-item {
+  height: 39px;
+  min-width: 39px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  color: #ff0f23;
+  background: #ffffff;
+  border-radius: 2px;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  cursor: pointer;
+}
+
+.nut-pagination-next {
+  height: 39px;
+  min-width: 39px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  color: #ff0f23;
+  background: #ffffff;
+  border-radius: 2px;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  cursor: pointer;
+}
+
+.nut-pagination-prev,
+.nut-pagination-item {
+  border-right-width: 0;
+}
+
+.nut-pagination-prev {
+  padding: 0 12px;
+}
+
+.nut-pagination-next {
+  padding: 0 12px;
+}
+
+.nut-pagination-contain {
+  display: flex;
+  flex-direction: row;
+}
+
+.nut-pagination-item-active {
+  color: #ffffff;
+  border-width: 0;
+  background-color: #ff0f23;
+}
+
+.nut-pagination-item-disabled {
+  color: #c2c4cc;
+  background-color: #f7f8fa;
+  cursor: not-allowed;
+}
+
+.nut-pagination-next-disabled {
+  color: #c2c4cc;
+  background-color: #f7f8fa;
+  cursor: not-allowed;
+}
+
+.nut-pagination-prev-disabled {
+  color: #c2c4cc;
+  background-color: #f7f8fa;
+  cursor: not-allowed;
+}
+
+.nut-pagination-simple {
+  height: 39px;
+  width: 124px;
+  line-height: 39px;
+  text-align: center;
+  font-size: 14px;
+  color: #ff0f23;
+}
+
+.nut-pagination-simple-border {
+  border-right: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+.nut-pagination-lite {
+  height: 20px;
+  padding: 0 6px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  color: #ffffff;
+  background-color: rgba(0, 0, 0, 0.45);
+  border-radius: 4px;
+}
+
+.nut-pagination-lite-active {
+  font-size: 11px;
+  color: #ffffff;
+}
+
+.nut-pagination-lite-default {
+  font-size: 11px;
+  color: #ffffff;
+}
+
+.nut-pagination-lite-spliterator {
+  font-size: 11px;
+  color: #ffffff;
+}

package/dist/cjs/packages/picker/index.d.ts

@@ -1,4 +1,3 @@
 import Picker from "./picker";
-export type { PickerOption } from './types';
-export type { PickerProps } from "./picker";
+export type { PickerProps } from './types.taro';
 export default Picker;

package/dist/cjs/packages/picker/picker.d.ts

@@ -1,27 +1,5 @@
-import React, { RefObject } from 'react';
-import { PopupProps } from "../popup/popup";
-import { PickerOption } from './types';
-import { BasicComponent } from "../../utils/typings";
-export type PickerActions = {
-    open: () => void;
-    close: () => void;
-};
-export interface PickerProps extends Omit<BasicComponent, 'children'> {
-    visible?: boolean | undefined;
-    title?: string;
-    options: (PickerOption | PickerOption[])[];
-    value?: (number | string)[];
-    defaultValue?: (number | string)[];
-    threeDimensional?: boolean;
-    duration: number | string;
-    closeOnOverlayClick: boolean;
-    popupProps: Partial<Omit<PopupProps, 'title' | 'onClose' | 'closeOnOverlayClick'>>;
-    onConfirm?: (selectedOptions: PickerOption[], selectedValue: (string | number)[]) => void;
-    onCancel?: () => void;
-    onClose?: (selectedOptions: PickerOption[], selectedValue: (string | number)[]) => void;
-    afterClose?: (selectedOptions: PickerOption[], selectedValue: (string | number)[], pickerRef: RefObject<HTMLDivElement>) => void;
-    onChange?: (selectedOptions: PickerOption[], selectedValue: (string | number)[], columnIndex: number) => void;
-    children?: any;
-}
-declare const Picker: React.ForwardRefExoticComponent<Partial<PickerProps> & React.RefAttributes<unknown>>;
+import React from 'react';
+import { PickerActions } from './types';
+import { PickerProps } from './types.taro';
+declare const Picker: React.ForwardRefExoticComponent<Partial<PickerProps> & React.RefAttributes<PickerActions>>;
 export default Picker;