fix: fix code

CHANGELOG.md

@@ -1,4 +1,4 @@
-## 1.7.6 (2022-11-28)
+## 1.7.7 (2022-12-14)
 
 ### Bug Fixes
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taoyage/react-mobile-ui",
-  "version": "1.7.6",
+  "version": "1.7.7",
   "description": "A react mobile components lib",
   "main": "lib/index.js",
   "module": "es/index.js",

packages/input/styles/index.scss

@@ -3,6 +3,7 @@ $class-prefix-input: 'ygm-input';
 .#{$class-prefix-input} {
   --color: var(--ygm-color-text);
   --placeholder-color: var(--ygm-color-light);
+
   --text-align: left;
   --background-color: transparent;
   --font-size: var(--ygm-font-size-m);

packages/nav-bar/index.tsx

@@ -5,36 +5,42 @@ import { LeftOutline } from 'antd-mobile-icons';
 import './styles/index.scss';
 
 export interface NavBarProps {
+  /** 点击返回区域后的回调 */
   onBack?: () => void;
+  /** 右侧内容 */
   right?: React.ReactNode;
+  /** 中间内容 */
   children?: React.ReactNode;
+  /** 是否显示返回区域的箭头 */
   leftArrow?: boolean;
+  /** 返回区域文字 */
   leftText?: string;
-  border?: boolean;
+  /** 样式 */
   style?: React.CSSProperties & Partial<Record<'--nav-bar-height' | '--border-bottom', string>>;
 }
 
-const NavBar: React.FC<NavBarProps> = React.memo((props) => {
+const classPrefix = 'ygm-nav-bar';
+
+const NavBar: React.FC<NavBarProps> = (props) => {
   return (
-    <div className="ygm-nav-bar" style={props.style}>
-      <div className="ygm-nav-bar-left" onClick={props.onBack}>
+    <div className={classPrefix} style={props.style}>
+      <div className={`${classPrefix}-left`} onClick={props.onBack}>
         {props.leftArrow && (
-          <div className="ygm-nav-bar-left-icon">
+          <div className={`${classPrefix}-left-icon`}>
             <LeftOutline />
           </div>
         )}
-        <div className="ygm-nav-bar-left-text">{props.leftText}</div>
+        <div className={`${classPrefix}-left-text`}>{props.leftText}</div>
       </div>
-      <div className="ygm-nav-bar-title">{props.children}</div>
-      <div className="ygm-nav-bar-right">{props.right}</div>
+      <div className={`${classPrefix}-title`}>{props.children}</div>
+      <div className={`${classPrefix}-right`}>{props.right}</div>
     </div>
   );
-});
+};
 
 NavBar.defaultProps = {
   leftText: '',
   leftArrow: true,
-  border: false,
 };
 
 NavBar.displayName = 'NavBar';

packages/search-bar/index.tsx

@@ -14,18 +14,30 @@ type TStyle = Partial<
 export type SearchBarRef = InputRef;
 
 export interface SearchBarProps {
+  /** 输入内容 */
   value?: string;
+  /** 提示文本 */
   placeholder?: string;
+  /** 搜索框前缀图标 */
   icon?: React.ReactNode;
+  /** 输入的最大字符数 */
   maxLength?: number;
+  /** 是否显示清除图标，可点击清除文本框 */
   clearable?: boolean;
+  /** 禁止输入 */
   disabled?: boolean;
   style?: React.CSSProperties & TStyle;
+  /** 取消按钮文案 */
   cancelText?: string;
+  /** 是否显示取消按钮 */
   showCancel?: boolean;
+  /** 点击取消按钮时触发事件 */
   onCancel?: () => void;
+  /** 输入框回车键触发事件 */
   onSearch?: (val: string) => void;
+  /** 输入框内容变化时触发事件 */
   onChange?: (val: string) => void;
+  /** 点击清除图标时触发事件 */
   onClear?: () => void;
 }
 
@@ -71,6 +83,7 @@ const SearchBar = React.forwardRef<SearchBarRef, SearchBarProps>((props, ref) =>
           onChange={onChange}
           onClear={props.onClear}
           onEnterPress={onEnterPress}
+          // 当用户使用拼音输入法开始输入汉字时，这个事件就会被触发。
           onCompositionStart={() => {
             composingRef.current = true;
           }}
@@ -81,7 +94,7 @@ const SearchBar = React.forwardRef<SearchBarRef, SearchBarProps>((props, ref) =>
       </div>
       {props.showCancel && (
         <div className={`${classPrefix}-content-cancel`} role="button" onClick={props.onCancel}>
-          取消
+          {props.cancelText}
         </div>
       )}
     </div>

packages/sidebar/sidebar-item.tsx

@@ -3,13 +3,12 @@ import React from 'react';
 export interface SidebarItemProps {
   key: string;
   title: React.ReactNode;
-  className?: string;
   children: React.ReactNode;
 }
 
-const SidebarItem: React.FC<SidebarItemProps> = React.memo((props) => {
-  return props.children as React.ReactElement;
-});
+const SidebarItem: React.FC<SidebarItemProps> = (props) => {
+  return props.children ? (props.children as React.ReactElement) : null;
+};
 
 SidebarItem.displayName = 'SidebarItem';
 

packages/sidebar/sidebar.tsx

@@ -2,13 +2,17 @@ import React from 'react';
 import cx from 'classnames';
 
 import SidebarItem from '@/sidebar/sidebar-item';
+import { traverseReactNode } from '@/utils/traverse-react-node';
 
 import './styles/index.scss';
 
 export interface SidebarProps {
+  /** 当前激活side item面板的key */
   activeKey: string;
+  /** 点击side item切换后回调 */
   onChange?: (key: string) => void;
   children?: React.ReactNode;
+  /** 基本样式 */
   style?: React.CSSProperties &
     Partial<
       Record<'--width' | '--height' | '--background-color' | '--content-padding' | '--sidebar-item-padding', string>
@@ -22,20 +26,17 @@ const Sidebar: React.FC<SidebarProps> = React.memo((props) => {
 
   const items: React.ReactElement<React.ComponentProps<typeof SidebarItem>>[] = [];
 
-  React.Children.forEach(props.children, (child) => {
+  traverseReactNode(props.children, (child) => {
     if (!React.isValidElement(child)) return;
     if (!child.key) return;
     items.push(child);
   });
 
-  const onSetActive = React.useCallback(
-    (e: React.MouseEvent<HTMLDivElement>) => {
-      const key = (e.target as HTMLElement).dataset['key'];
-      setActiveKey(key as string);
-      props.onChange?.(key as string);
-    },
-    [props.onChange]
-  );
+  const onSetActive = () => (e: React.MouseEvent<HTMLDivElement>) => {
+    const key = (e.target as HTMLElement).dataset['key'];
+    setActiveKey(key as string);
+    props.onChange?.(key as string);
+  };
 
   return (
     <div className={classPrefix}>