feat(taro): demo update

package.json

@@ -97,6 +97,7 @@
     "@babel/runtime": "^7.23.9",
     "@nutui/icons-react": "^1.0.5",
     "@nutui/icons-react-taro": "^1.0.5",
+    "@nutui/jdesign-icons-react-taro": "1.0.6-beta.2",
     "@nutui/touch-emulator": "^1.0.0",
     "@react-spring/web": "~9.6.1",
     "@use-gesture/react": "10.2.20",
@@ -118,7 +119,6 @@
     "@commitlint/cli": "^19.0.3",
     "@commitlint/config-conventional": "^19.0.3",
     "@loadable/component": "^5.16.3",
-    "prettier-markdown-table": "^1.0.2",
     "@mdx-js/mdx": "^3.0.1",
     "@mdx-js/react": "^3.0.1",
     "@mdx-js/rollup": "^3.0.1",
@@ -184,6 +184,7 @@
     "postcss-rtlcss": "^5.1.0",
     "postcss-scss": "^4.0.9",
     "prettier": "^3.2.5",
+    "prettier-markdown-table": "^1.0.2",
     "react": "^18.2.0",
     "react-color": "^2.19.3",
     "react-dom": "^18.2.0",

packages/nutui-taro-demo/babel.config.js

@@ -1,5 +1,7 @@
 // babel-preset-taro 更多选项和默认值：
 // https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md
+const replaceIcons = require('@dongdesign/replace-icons')
+
 module.exports = {
   presets: [
     [
@@ -12,5 +14,11 @@ module.exports = {
   ],
   plugins: [
     ['@babel/plugin-transform-typescript', { allowDeclareFields: true }],
+    [
+      replaceIcons({
+        sourceLibrary: ['@nutui/icons-react-taro', '@nutui/icons-react'],
+        targetLibrary: '@nutui/jdesign-icons-react-taro',
+      }),
+    ],
   ],
 }

packages/nutui-taro-demo/package.json

@@ -45,6 +45,7 @@
   "author": "",
   "dependencies": {
     "@babel/runtime": "^7.23.9",
+    "@dongdesign/replace-icons": "1.0.9-beta.0",
     "@nutui/touch-emulator": "^1.0.0",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.10",
     "@tarojs/components": "3.6.22",
@@ -68,7 +69,6 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-refresh": "^0.14.0"
-
   },
   "devDependencies": {
     "@babel/core": "^7.23.9",

src/packages/cell/cell.scss

@@ -55,4 +55,14 @@
       content: ' ';
     }
   }
+  &-disabled {
+    display: flex;
+    align-items: center;
+    color: #b5b5b5;
+    font-size: 14px;
+    font-family: PingFang SC;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: 0px;
+  }
 }

src/packages/cell/cell.taro.tsx

@@ -1,8 +1,8 @@
-import React, { FunctionComponent, ReactNode, useContext } from 'react'
 import classNames from 'classnames'
-import { BasicComponent, ComponentDefaults } from '@/utils/typings'
+import React, { FunctionComponent, ReactNode, useContext } from 'react'
 import { CellGroup } from '@/packages/cellgroup/cellgroup.taro'
 import CellGroupContext from '@/packages/cellgroup/context'
+import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 
 export interface CellProps extends BasicComponent {
   title: ReactNode
@@ -11,6 +11,7 @@ export interface CellProps extends BasicComponent {
   radius: string | number
   align: 'flex-start' | 'center' | 'flex-end'
   clickable: boolean
+  disabled: boolean
   onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
 }
 
@@ -22,6 +23,7 @@ const defaultProps = {
   radius: '6px',
   align: 'flex-start',
   clickable: false,
+  disabled: false,
   onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {},
 } as CellProps
 
@@ -42,6 +44,7 @@ export const Cell: FunctionComponent<
     className,
     style,
     clickable,
+    disabled,
     ...rest
   } = {
     ...defaultProps,
@@ -66,7 +69,10 @@ export const Cell: FunctionComponent<
         }
   return (
     <div
-      className={`${classNames(classPrefix, className, clickable ? `${classPrefix}-clickable` : '')}`}
+      className={classNames(classPrefix, className, {
+        [`${classPrefix}-clickable`]: clickable,
+        [`${classPrefix}-disabled`]: disabled,
+      })}
       onClick={(event) => handleClick(event)}
       style={baseStyle}
       {...rest}

src/packages/cell/demos/taro/demo1.tsx

@@ -1,5 +1,6 @@
-import React from 'react'
+import { ArrowRight } from '@nutui/icons-react-taro'
 import { Cell } from '@nutui/nutui-react-taro'
+import React from 'react'
 
 const Demo1 = () => {
   const testClick = (
@@ -17,7 +18,16 @@ const Demo1 = () => {
         onClick={(
           event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>
         ) => testClick(event)}
+        extra={
+          <ArrowRight
+            size={14}
+            style={{
+              alignItems: 'center',
+            }}
+          />
+        }
       />
+      <Cell title="禁用状态" disabled extra={<ArrowRight size={14} />} />
       <Cell title="圆角设置0" radius={0} />
     </>
   )

src/packages/cell/demos/taro/demo3.tsx

@@ -1,23 +1,40 @@
-import React from 'react'
+import { ArrowRight, User } from '@nutui/icons-react-taro'
 import { Cell } from '@nutui/nutui-react-taro'
-import { User } from '@nutui/icons-react-taro'
+import React from 'react'
 
 const Demo3 = () => {
   return (
-    <Cell
-      title={
-        <div style={{ display: 'inline-flex', alignItems: 'center' }}>
-          <User />
-          <span style={{ marginLeft: '5px' }}>我是标题</span>
-        </div>
-      }
-      description={
-        <span>
-          我是描述<b style={{ color: 'red' }}>1</b>
-        </span>
-      }
-      extra="描述文字"
-    />
+    <Cell.Group>
+      <Cell
+        title={
+          <div style={{ display: 'inline-flex', alignItems: 'center' }}>
+            <User />
+            <span style={{ marginLeft: '5px' }}>我是标题</span>
+          </div>
+        }
+        description={
+          <span>
+            我是描述<b style={{ color: 'red' }}>1</b>
+          </span>
+        }
+        extra={<ArrowRight size={14} />}
+      />
+
+      <Cell
+        title={
+          <div style={{ display: 'inline-flex', alignItems: 'center' }}>
+            <User />
+            <span style={{ marginLeft: '5px' }}>我是标题</span>
+          </div>
+        }
+        description={
+          <span>
+            我是描述<b style={{ color: 'red' }}>1</b>
+          </span>
+        }
+        extra={<ArrowRight size={14} />}
+      />
+    </Cell.Group>
   )
 }
 export default Demo3

src/packages/cell/demos/taro/demo4.tsx

@@ -1,10 +1,38 @@
-import React from 'react'
-import { Cell, Switch } from '@nutui/nutui-react-taro'
+import { BadgePercent } from '@nutui/icons-react'
+import { Cell, Image, Radio, Switch } from '@nutui/nutui-react-taro'
+import React, { useState } from 'react'
 
 const App = () => {
+  const [radioChecked, setRadioChecked] = useState(false)
+  const handleRadioClick = () => {
+    setRadioChecked((v) => !v)
+  }
   return (
     <Cell.Group>
-      <Cell title="Switch" extra={<Switch defaultChecked />} />
+      <Cell align="center" title="Switch" extra={<Switch defaultChecked />} />
+      <Cell
+        align="center"
+        title="BadgePercent"
+        extra={<BadgePercent color="red" />}
+      />
+      <Cell
+        align="center"
+        title="Image"
+        extra={
+          <Image
+            width={20}
+            height={20}
+            src="https://img12.360buyimg.com/imagetools/jfs/t1/201375/12/18248/5407/61b0715dE35f02aa9/55eff706b7755414.png"
+          />
+        }
+      />
+      <Cell
+        align="center"
+        title="Radio"
+        onClick={handleRadioClick}
+        extra={<Radio checked={radioChecked} />}
+      />
+      <Cell align="center" title="Radio" extra={<Radio checked />} />
     </Cell.Group>
   )
 }

src/packages/menu/demos/taro/demo6.tsx

@@ -1,6 +1,7 @@
-import React, { useState } from 'react'
+import { Filter } from '@nutui/icons-react'
+import { ArrowDown, Star } from '@nutui/icons-react-taro'
 import { Menu } from '@nutui/nutui-react-taro'
-import { ArrowDown, Star, Filter } from '@nutui/icons-react-taro'
+import React, { useState } from 'react'
 
 const Demo6 = () => {
   const [options] = useState([