Merge branch 'main' into chore/iconnode

src/packages/animate/animate.tsx

 import React, { useState, FunctionComponent } from 'react'
-import { AnimateType, AnimateAction } from './type'
 import classNames from 'classnames'
+import { AnimateType, AnimateAction } from './type'
 import bem from '@/utils/bem'
 
 export interface AnimateProps {
@@ -31,13 +31,13 @@ export const Animate: FunctionComponent<
   const classes = classNames({
     'nut-ani-container': true,
     [`${b('')}-${type}`]: action === 'initial' || clicked ? type : false,
-    loop: loop,
+    loop,
   })
   const cls = classNames(classes, className)
 
   const handleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     setClicked(true)
-    //如果不是无限循环，清除类名
+    // 如果不是无限循环，清除类名
     if (!loop) {
       setTimeout(() => {
         setClicked(false)

src/packages/datepicker/datepicker.tsx

 import React, { FunctionComponent, useState, useEffect, useRef } from 'react'
-// import { useTranslate } from '../../sites/assets/locale'
 import Picker from '@/packages/picker'
 import { useConfig } from '@/packages/configprovider'
 

src/packages/form/form.scss

+@import '../cellgroup/cellgroup.scss';
+
 .form-layout-right .nut-form-item__label {
   text-align: right;
   font-size: 14px;

src/packages/formitem/formitem.scss

+@import '../cell/cell.scss';
+
 .nut-theme-dark {
   .nut-form-item {
     &__body {
@@ -9,8 +11,10 @@
     }
   }
 }
+
 .nut-form-item {
   display: flex;
+
   &::before {
     position: absolute;
     box-sizing: border-box;
@@ -21,6 +25,7 @@
     left: 16px;
     transform: scaleX(0);
   }
+
   &.error {
     &.line {
       &::before {
@@ -40,6 +45,7 @@
     display: inline-block !important;
     word-wrap: break-word;
     text-align: $form-item-label-text-align;
+
     .required {
       &::before {
         content: '*';
@@ -48,16 +54,20 @@
       }
     }
   }
+
   &__body {
     flex: 1;
     display: flex !important;
     flex-direction: column;
+
     &__slots {
       text-align: $form-item-body-slots-text-align;
+
       .nut-input {
         padding: 0;
         border: 0;
       }
+
       .nut-input-text {
         font-size: $form-item-body-font-size;
         text-align: $form-item-body-input-text-align;
@@ -68,16 +78,20 @@
         text-decoration: none;
         background: transparent;
       }
+
       .nut-range-container {
         min-height: 24px;
       }
+
       .nut-textarea {
         padding: 0 !important;
+
         .nut-textarea__textarea {
           text-align: $form-item-body-input-text-align;
         }
       }
     }
+
     &__tips {
       text-align: $form-item-tip-text-align;
       font-size: $form-item-tip-font-size;

src/packages/formitem/formitem.tsx

@@ -45,7 +45,7 @@ export class FormItem extends React.Component<FieldProps> {
 
   private cancelRegister: any
 
-  private isInitialValue: boolean = false
+  private isInitialValue = false
 
   componentDidMount() {
     // 注册组件实例到FormStore

src/packages/menuitem/menuitem.scss

 @import '../icon/icon.scss';
-@import '../popup/popup.scss';
+@import '../overlay/overlay.scss';
 
 .nut-theme-dark {
   .nut-menu-item__content {
     background: $dark6;
+
     .nut-menu-item__option {
       color: $dark1;
     }
@@ -50,6 +51,7 @@
   z-index: 2052;
   overflow: hidden;
 }
+
 .nut-menu-item__wrap-up {
   bottom: $menu-bar-line-height;
 }
@@ -102,11 +104,13 @@
   opacity: 0;
   transform: translate(0, 30px);
 }
+
 .menu-item-up-enter-done {
   opacity: 1;
   transform: translate(0, 0);
   transition: all 100ms;
 }
+
 .menu-item-up-exit {
   opacity: 1;
   transition: all 100ms;

src/packages/menuitem/menuitem.tsx

 import React, {
   forwardRef,
-  FunctionComponent,
   useEffect,
   useImperativeHandle,
   useState,
 } from 'react'
 import classNames from 'classnames'
 import { CSSTransition } from 'react-transition-group'
-import { useConfig } from '@/packages/configprovider'
 import Icon from '@/packages/icon'
 import { Overlay } from '../overlay/overlay'
 
@@ -50,7 +48,6 @@ const defaultProps = {
   onChange: (value: OptionItem) => undefined,
 } as MenuItemProps
 export const MenuItem = forwardRef((props: Partial<MenuItemProps>, ref) => {
-  const { locale } = useConfig()
   const mergedProps = { ...defaultProps, ...props }
   const {
     style,

src/packages/navbar/navbar.scss

+@import '../icon/icon.scss';
+
 .nut-theme-dark {
   .nut-navbar {
     background: $dark5;
     color: $dark1;
     box-shadow: none;
+
     .title {
       color: $dark1;
     }
+
     &__left {
       color: $dark2;
+
       i {
         color: $dark2 !important;
       }
     }
+
     &__right {
       color: $dark1;
     }
+
     &--border {
       border-bottom: none;
     }
   }
+
   .nut-tabs__titles-item__text {
     background: $dark5;
     color: $dark1;
   }
 }
+
 .nut-navbar {
+  width: $navbar-width;
   position: relative;
   display: flex;
   align-items: center;
@@ -37,26 +47,32 @@
   color: $navbar-color;
   margin-bottom: $navbar-margin-bottom;
   overflow: hidden;
+
   &:active::before {
     opacity: 0.1;
   }
+
   &--border {
     border-bottom: 1px solid #eee;
   }
+
   &--fixed {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
   }
+
   &--placeholder {
     display: inline-block;
     width: 100%;
   }
+
   &--safe-area-inset-top {
     padding-top: constant(safe-area-inset-top);
     padding-top: env(safe-area-inset-top);
   }
+
   &--clickable {
     &::before {
       position: absolute;
@@ -87,6 +103,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+
     .title {
       min-width: $navbar-title-width;
       font-size: $navbar-title-font;
@@ -97,23 +114,28 @@
       -webkit-line-clamp: 1;
       overflow: hidden;
     }
+
     &.icon {
       .icon {
         margin: $navbar-title-icon-margin;
       }
     }
+
     .nut-icon {
       display: inline;
     }
+
     &-desc {
       font-size: $cell-title-desc-font;
     }
+
     .text__title {
       display: inline-block;
     }
 
     .nut-tabs__titles {
       background: $white;
+
       &-item__text {
         color: $title-color;
       }
@@ -140,6 +162,7 @@
     cursor: pointer;
     padding: 0 16px;
   }
+
   &__right {
     font-size: $cell-desc-font;
     color: $gray2;
@@ -151,9 +174,11 @@
     align-items: center;
     padding: 0 16px;
     cursor: pointer;
+
     .rightIcon {
       margin-left: 16px;
     }
+
     .leftIcon {
       margin-left: 16px;
     }

src/packages/numberkeyboard/numberkeyboard.scss

+@import '../popup/popup.scss';
+
 .nut-theme-dark {
   .nut-numberkeyboard {
     background-color: $dark5;

src/packages/popover/popover.scss

 @import '../icon/icon.scss';
+@import '../overlay/overlay.scss';
 
 .nut-popover {
   display: inline-block;

src/packages/searchbar/searchbar.scss

+@import '../icon/icon.scss';
+
 .nut-theme-dark {
   .nut-searchbar {
     background: $dark5;

src/packages/sidenavbar/sidenavbar.scss

+@import '../popup/popup.scss';
+
 .nut-theme-dark {
   .nut-sidenavbar {
     background-color: $dark4;
+
     &__title {
       background: $dark4;
       color: $white;
     }
+
     &__content {
       .nut-subsidenavbar__list {
         .nut-subsidenavbar__title {
@@ -16,6 +20,7 @@
 }
 
 $nutSidenavbarItemHeight: 40px;
+
 .nut-sidenavbar {
   color: #1d1d21;
   font-size: 14px;
@@ -23,6 +28,7 @@ $nutSidenavbarItemHeight: 40px;
   overflow: auto;
   display: block;
   background-color: $gray6;
+
   .arrow-icon {
     position: absolute;
     width: 0;
@@ -31,31 +37,37 @@ $nutSidenavbarItemHeight: 40px;
     top: 18px;
     cursor: pointer;
   }
+
   .arrow-down {
     border-top: 4px solid #909ca4;
     border-left: 4px solid transparent;
     border-right: 4px solid transparent;
   }
+
   .arrow-up {
     border-bottom: 4px solid #909ca4;
     border-left: 4px solid transparent;
     border-right: 4px solid transparent;
   }
+
   &__head {
     height: $nutSidenavbarItemHeight;
     background: #eeeff2;
     padding: 10px;
   }
+
   &__title {
     height: $nutSidenavbarItemHeight;
     padding: 10px 8px 10px 20px;
     background: $gray4;
     color: $gray1;
   }
+
   &__content {
     position: relative;
     display: block;
   }
+
   &__list {
     &.nutShow {
       .nut-sidenavbar__content {
@@ -63,6 +75,7 @@ $nutSidenavbarItemHeight: 40px;
         overflow: inherit;
       }
     }
+
     &.nutHide {
       .nut-sidenavbar__content {
         height: 0;
@@ -73,6 +86,7 @@ $nutSidenavbarItemHeight: 40px;
 
   .border-bt {
     position: relative;
+
     &:after {
       content: '';
       position: absolute;

src/packages/sidenavbaritem/sidenavbaritem.tsx

 import React, { FunctionComponent, MouseEventHandler } from 'react'
-// import { SideNavBarItemProps } from '../sidenavbar/type'
 
 export type SideNavBarItemProps = {
   title: string

src/packages/skeleton/skeleton.scss

+@import '../avatar/avatar.scss';
+
 .nut-skeleton {
   display: inline-block;
   position: relative;
   overflow: hidden;
   vertical-align: middle;
+
   .nut-skeleton-content {
     display: flex;
+
     .avatarClass {
       margin-right: 20px;
       background: rgb(239, 239, 239);
@@ -16,6 +20,7 @@
       height: 100%;
       background: rgb(239, 239, 239);
       margin-top: 10px;
+
       &:last-child {
         width: 70% !important;
       }
@@ -28,6 +33,7 @@
     .skeleton-content-line {
       display: flex;
       flex-direction: column;
+
       .skeleton-title {
         width: 30%;
         height: 15px;
@@ -52,10 +58,12 @@
     background-repeat: no-repeat;
     animation: backpos 2s ease-in-out 0s infinite;
   }
+
   @keyframes backpos {
     0% {
       background-position-x: -500px;
     }
+
     to {
       background-position-x: calc(500px + 100%);
     }

src/packages/subsidenavbar/subsidenavbar.tsx

@@ -6,7 +6,6 @@ import React, {
   MouseEventHandler,
   useContext,
 } from 'react'
-// import { SubNavBarProps } from '../sidenavbar/type'
 import { handleClick } from '../sidenavbar/utils'
 import { OffsetContext } from '../sidenavbar/offsetContext'
 

src/packages/table/table.scss

+@import '../icon/icon.scss';
+
 .nut-theme-dark {
   .nut-table {
     margin-bottom: 3px;
+
     &__main {
       color: $dark1;
       background-color: $dark5;
@@ -25,12 +28,15 @@
         }
       }
     }
+
     .nut-table__nodata {
       background-color: $dark6;
+
       .nut-table__nodata {
         color: $dark1;
       }
     }
+
     &__summary {
       color: $dark1;
       background-color: $dark4;
@@ -42,12 +48,14 @@
     }
   }
 }
+
 .nut-table {
   display: flex;
   width: 100%;
   flex-direction: column;
   font-size: $font-size-2;
   color: $title-color;
+
   &__main {
     display: table;
     width: 100%;
@@ -55,34 +63,41 @@
     overflow-x: hidden;
     color: $title-color;
     background-color: $background-color3;
+
     &--striped {
       .nut-table__main__head {
         &__tr {
           background-color: $table-tr-even-bg-color;
         }
       }
+
       .nut-table__main__body {
         &__tr:nth-child(odd) {
           background-color: $table-tr-odd-bg-color;
         }
       }
+
       .nut-table__main__body {
         &__tr:nth-child(even) {
           background-color: $table-tr-even-bg-color;
         }
       }
     }
+
     &__head,
     &__body {
       &__tr {
         display: table-row;
+
         &__th {
           display: table-cell;
           padding: $table-cols-padding;
         }
+
         &__td {
           display: table-cell;
           padding: $table-cols-padding;
+
           &__nodata {
             display: flex;
             height: 50px;
@@ -90,34 +105,42 @@
             justify-content: center;
           }
         }
+
         &--border {
           border: 1px solid $table-border-color;
         }
+
         &--alignleft,
         &--align {
           text-align: left;
         }
+
         &--aligncenter {
           text-align: center;
         }
+
         &--alignright {
           text-align: right;
         }
       }
     }
+
     &__head {
       display: table-header-group;
     }
+
     &__body {
       display: table-row-group;
     }
   }
+
   &__summary {
     display: flex;
     align-items: center;
     height: 30px;
     padding: $table-cols-padding;
   }
+
   &__nodata {
     color: $title-color;
     background-color: $background-color3;

src/packages/tabs/tabs.scss

 @import '../../styles/mixins/index';
 @import '../tabpane/tabpane.scss';
+@import '../icon/icon.scss';
 
 .nut-theme-dark {
   .nut-tabs {

src/packages/timeselect/timeselect.scss

+@import '../popup/popup.scss';
 @import '../timepannel/timepannel.scss';
 @import '../timedetail/timedetail.scss';
+
 .nut-theme-dark {
   .nut-timeselect {
     background-color: $dark6;
+
     &__title {
       background-color: $dark6;
       color: $dark1;
     }
+
     &__content {
       &-left {
         background-color: $dark5;
         color: $dark1;
+
         .nut-timepannel-active {
           background-color: $dark6;
           color: $dark1;
@@ -18,9 +23,11 @@
       }
     }
   }
+
   .nut-timedetail__item {
     background-color: $dark4;
     color: $dark1;
+
     &-active {
       background-color: $dark-brand-color;
     }
@@ -55,6 +62,7 @@
     overflow: auto;
     background-color: $background-color2;
     color: $title-color;
+
     .nut-timepannel-active {
       background-color: red;
     }

src/packages/toast/toast.taro.tsx

@@ -3,7 +3,6 @@ import React, { FunctionComponent, useEffect, useState } from 'react'
 import classNames from 'classnames'
 import bem from '@/utils/bem'
 import Icon from '@/packages/icon'
-// import { render } from '@/utils/render'
 
 export interface ToastProps {
   id?: string

src/packages/uploader/uploader.scss

 @import '../icon/icon.scss';
+@import '../progress/progress.scss';
 @import '../../styles/mixins/text-ellipsis.scss';
 
 .nut-theme-dark {

src/packages/watermark/watermark.tsx

 import React, { useState, useEffect, FunctionComponent } from 'react'
-import { useConfig } from '@/packages/configprovider'
 import classNames from 'classnames'
+import { useConfig } from '@/packages/configprovider'
 import bem from '@/utils/bem'
 
 export interface WaterMarkProps {
@@ -143,7 +143,7 @@ export const WaterMark: FunctionComponent<
         backgroundImage: `url('${base64Url}')`,
         ...style,
       }}
-    ></div>
+    />
   )
 }
 

src/styles/variables.scss

@@ -2195,6 +2195,7 @@ $table-tr-even-bg-color: var(--nutui-table-tr-even-bg-color, $gray4) !default;
 $table-tr-odd-bg-color: var(--nutui-table-tr-odd-bg-color, $gray6) !default;
 
 // navbar（✅）
+$navbar-width: var(--nutui-navbar-width, 100%) !default;
 $navbar-height: var(--nutui-navbar-height, 44px) !default;
 $navbar-margin-bottom: var(--nutui-navbar-margin-bottom, 20px) !default;
 $navbar-padding: var(--nutui-navbar-padding, 13px 16px) !default;