From 99696149ca455cfdfe6584e764c87578dd744c2b Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Wed, 24 May 2023 16:36:26 +0800 Subject: [PATCH 1/7] refactor: trendarrow --- migrate-from-v1.md | 11 ++ src/config.json | 2 +- .../trendarrow/__test__/trendarrow.spec.tsx | 56 +++++----- src/packages/trendarrow/demo.taro.tsx | 52 ++++----- src/packages/trendarrow/demo.tsx | 52 ++++----- src/packages/trendarrow/doc.en-US.md | 101 ++++++++--------- src/packages/trendarrow/doc.md | 99 +++++++---------- src/packages/trendarrow/doc.taro.md | 99 +++++++---------- src/packages/trendarrow/doc.zh-TW.md | 104 ++++++++---------- src/packages/trendarrow/trendarrow.scss | 7 +- src/packages/trendarrow/trendarrow.taro.tsx | 88 +++++++-------- src/packages/trendarrow/trendarrow.tsx | 88 +++++++-------- src/styles/variables-jmapp.scss | 10 +- src/styles/variables.scss | 10 +- 14 files changed, 352 insertions(+), 427 deletions(-) diff --git a/migrate-from-v1.md b/migrate-from-v1.md index f3fa05f577..f85839673e 100644 --- a/migrate-from-v1.md +++ b/migrate-from-v1.md @@ -272,7 +272,18 @@ #### Swiper #### Table #### Tag + #### TrendArrow + +- `rate` 重命名为 `value` +- `showSign` 重命名为 `symbol` +- `showZero` 重命名为 `zero` +- `syncTextColor` 重命名为 `syncColor` +- `textColor` 重命名为 `color` +- 删除 `iconSize`, 图标自定义传入 +- 删除 `upIconName`, 替换为 `riseIcon`, 类型为 `React.Node` 类型 +- 删除 `downIconName`, 替换为 `downIcon`, 类型为 `React.Node` 类型 + #### Video #### VirtualList #### WaterMark diff --git a/src/config.json b/src/config.json index a2fc3d66bf..97572e446e 100644 --- a/src/config.json +++ b/src/config.json @@ -1119,7 +1119,7 @@ "author": "zhaoqian16" }, { - "version": "1.0.0", + "version": "2.0.0", "name": "TrendArrow", "type": "component", "cName": "趋势箭头", diff --git a/src/packages/trendarrow/__test__/trendarrow.spec.tsx b/src/packages/trendarrow/__test__/trendarrow.spec.tsx index 2a6964305f..c999d48141 100644 --- a/src/packages/trendarrow/__test__/trendarrow.spec.tsx +++ b/src/packages/trendarrow/__test__/trendarrow.spec.tsx @@ -4,43 +4,43 @@ import '@testing-library/jest-dom' import { render } from '@testing-library/react' import TrendArrow from '@/packages/trendarrow' -test('should render rate when used', async () => { - const { container } = render() - expect(container.querySelector('.nut-trendarrow__rate')?.innerHTML).toBe( +test('should render value when used', async () => { + const { container } = render() + expect(container.querySelector('.nut-trendarrow__value')?.innerHTML).toBe( '12.33%' ) }) test('should render digits when used', async () => { - const { container } = render() - expect(container.querySelector('.nut-trendarrow__rate')?.innerHTML).toBe( + const { container } = render() + expect(container.querySelector('.nut-trendarrow__value')?.innerHTML).toBe( '12.3%' ) }) -test('should render showSign when used', async () => { - const { container } = render() - expect(container.querySelector('.nut-trendarrow__rate')?.innerHTML).toBe( +test('should render symbol when used', async () => { + const { container } = render() + expect(container.querySelector('.nut-trendarrow__value')?.innerHTML).toBe( '+12.33%' ) }) -test('should render showZero when used ', async () => { - const { container } = render() - expect(container.querySelector('.nut-trendarrow__rate')?.innerHTML).toBe( +test('should render zero when used ', async () => { + const { container } = render() + expect(container.querySelector('.nut-trendarrow__value')?.innerHTML).toBe( '0.00%' ) }) -test('should not render 0 when showZero is false', async () => { - const { container } = render( - +test('should not render 0 when zero is false', async () => { + const { container } = render() + expect(container.querySelector('.nut-trendarrow__value')?.innerHTML).toBe( + '--' ) - expect(container.querySelector('.nut-trendarrow__rate')?.innerHTML).toBe('--') }) test('should render left icon when arrowLeft', async () => { - const { container } = render() + const { container } = render() expect( container.querySelectorAll('.nut-trendarrow__icon-before')?.length ).toBe(0) @@ -49,23 +49,19 @@ test('should render left icon when arrowLeft', async () => { ).toBe(1) }) -test('should render sync text color when syncTextColor is true', async () => { - const { container } = render() - expect(container.querySelector('.nut-trendarrow__rate')).toHaveAttribute( +test('should render sync text color when syncColor is true', async () => { + const { container } = render() + expect(container.querySelector('.nut-trendarrow__value')).toHaveAttribute( 'style', 'color: rgb(250, 44, 25);' ) }) -test('should render sync text color when textColor is true', async () => { +test('should render sync text color when color is true', async () => { const { container } = render( - + ) - expect(container.querySelector('.nut-trendarrow__rate')).toHaveAttribute( + expect(container.querySelector('.nut-trendarrow__value')).toHaveAttribute( 'style', 'color: rgb(39, 197, 48);' ) @@ -73,9 +69,9 @@ test('should render sync text color when textColor is true', async () => { test('should render sync text color when riseColor is true', async () => { const { container } = render( - + ) - expect(container.querySelector('.nut-trendarrow__rate')).toHaveAttribute( + expect(container.querySelector('.nut-trendarrow__value')).toHaveAttribute( 'style', 'color: rgb(73, 143, 242);' ) @@ -83,9 +79,9 @@ test('should render sync text color when riseColor is true', async () => { test('should render sync text color when dropColor is true', async () => { const { container } = render( - + ) - expect(container.querySelector('.nut-trendarrow__rate')).toHaveAttribute( + expect(container.querySelector('.nut-trendarrow__value')).toHaveAttribute( 'style', 'color: rgb(73, 143, 242);' ) diff --git a/src/packages/trendarrow/demo.taro.tsx b/src/packages/trendarrow/demo.taro.tsx index 8b2469dd4e..3a4992043d 100644 --- a/src/packages/trendarrow/demo.taro.tsx +++ b/src/packages/trendarrow/demo.taro.tsx @@ -4,7 +4,7 @@ import { TrendArrow, Cell } from '@/packages/nutui.react.taro' import '@/packages/trendarrow/demo.scss' import Header from '@/sites/components/header' import Taro from '@tarojs/taro' -import { Failure, HeartFill, Success } from '@nutui/icons-react-taro' +import { Failure, Success } from '@nutui/icons-react-taro' interface T { basic: string @@ -44,7 +44,7 @@ const TrendArrowDemo = () => { title2: 'Specify decimal places', title3: 'Arrow ahead', title4: 'Show sign', - title5: 'Whether to show 0', + title5: 'Show zero or not', title6: 'Custom color', title7: 'Custom icon', }, @@ -55,56 +55,50 @@ const TrendArrowDemo = () => {

{translated.basic}

- - + +
{translated.title1}
- - + +
{translated.title2}
- - + +
{translated.title3}
- - + +
{translated.title4}
- - + +
{translated.title5}
- - + +
{translated.title6}
- - + +
{translated.title7}
- } - /> - } /> - - - + } /> + } />
diff --git a/src/packages/trendarrow/demo.tsx b/src/packages/trendarrow/demo.tsx index 567968ed2d..ff0baad3e9 100644 --- a/src/packages/trendarrow/demo.tsx +++ b/src/packages/trendarrow/demo.tsx @@ -3,7 +3,7 @@ import { useTranslate } from '@/sites/assets/locale' import { TrendArrow } from './trendarrow' import Cell from '../cell' import './demo.scss' -import { Failure, HeartFill, Success } from '@nutui/icons-react' +import { Failure, Success } from '@nutui/icons-react' interface T { basic: string @@ -43,7 +43,7 @@ const TrendArrowDemo = () => { title2: 'Specify decimal places', title3: 'Arrow ahead', title4: 'Show sign', - title5: 'Whether to show 0', + title5: 'Show zero or not', title6: 'Custom color', title7: 'Custom icon', }, @@ -53,56 +53,50 @@ const TrendArrowDemo = () => {

{translated.basic}

- - + +
{translated.title1}
- - + +
{translated.title2}
- - + +
{translated.title3}
- - + +
{translated.title4}
- - + +
{translated.title5}
- - + +
{translated.title6}
- - + +
{translated.title7}
- } - /> - } /> - - - + } /> + } />
diff --git a/src/packages/trendarrow/doc.en-US.md b/src/packages/trendarrow/doc.en-US.md index a502f00ea5..cd1721681f 100644 --- a/src/packages/trendarrow/doc.en-US.md +++ b/src/packages/trendarrow/doc.en-US.md @@ -1,10 +1,10 @@ -# TrendArrow +# TrendArrow -### Intro +## Intro A percentage number with an arrow indicating the trend of the indicator -### Install +## Install ```javascript // React @@ -24,8 +24,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react' const App = () => { return ( - - + + ); }; @@ -45,8 +45,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react' const App = () => { return ( - - + + ); }; @@ -66,8 +66,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react' const App = () => { return ( - - + + ); }; @@ -87,8 +87,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react' const App = () => { return ( - - + + ); }; @@ -108,8 +108,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react' const App = () => { return ( - - + + ); }; @@ -118,7 +118,7 @@ export default App; ::: -### Whether to show 0 +### Show zero or not :::demo @@ -129,8 +129,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react' const App = () => { return ( - - + + ); }; @@ -150,14 +150,14 @@ import { TrendArrow, Cell } from '@nutui/nutui-react' const App = () => { return ( - - + + ); @@ -174,19 +174,13 @@ export default App; ```tsx import React from "react" import { TrendArrow, Cell, Icon } from '@nutui/nutui-react' -import { Success, Failure, HeartFill } from '@nutui/icons-react' +import { Success, Failure } from '@nutui/icons-react' const App = () => { return ( - } - /> - } /> - - - + } /> + } /> ); }; @@ -195,28 +189,23 @@ export default App; ::: - -## API +## TrendArrow ### Props -| Attribute | Description | Type | Default | -|--------------|----------------------------------|--------|------------------| -| rate | Value, the arrow is up when it is greater than 0, and the arrow is down when it is less than 0 | number | - | -| digits | decimal precision | number | `2` | -| showSign | Whether to display plus and minus signs | boolean | `false` | -| showZero |whether to show 0 | boolean | `false` | -| arrowLeft | whether to show an arrow to the left of the number | boolean | `false` | -| syncTextColor | Whether the text color is in sync with the arrow | boolean | `true` | -| textColor | text color | string | `#333333` | -| riseColor | up arrow color | string | `#fa2c19` | -| dropColor | down arrow color | string | `#64b578` | -| upIcon`v2.0.0` | custom up arrow icon | string | `` | -| downIcon`v2.0.0` | custom down arrow icon | string | `` | -| iconSize`v2.0.0弃用` | arrow size | string | `12px` | -| upIconName`v2.0.0弃用` | custom up arrow icon | string | `triangle-up` | -| downIconName`v2.0.0弃用` | custom down arrow icon | string | `triangle-down` | - +| Attribute | Description | Type | Default | +| --- | --- | --- | --- | +| value | Value, arrow up if greater than zero, arrow down if less than zero | `number` | `-` | +| digits | Decimal precision | `number` | `2` | +| symbol | Whether to display plus and minus signs | `boolean` | `false` | +| zero | Show zero or not | `boolean` | `false` | +| arrowLeft | Whether to show an arrow to the left of the number | `boolean` | `false` | +| syncColor | Whether the text color is in sync with the arrow | `boolean` | `true` | +| color | Text color | `string` | `#333333` | +| riseColor | Rise arrow color | `string` | `#fa2c19` | +| dropColor | Down arrow color | `string` | `#64b578` | +| riseIcon | Custom Rise arrow icon | `string` | `` | +| downIcon | Custom down arrow icon | `string` | `` | ## Theming @@ -224,9 +213,7 @@ export default App; The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider). -| Name | Default Value | -| --- | --- | -| --nutui-trendarrow-font-size | `14px` | -| --nutui-trendarrow-before-icon-margin | `4px` | -| --nutui-trendarrow-font-size | `14px` | -| --nutui-trendarrow-before-icon-margin | `4px` | +| Name | Description | Default | +| --- | --- | --- | +| \--nutui-trendarrow-font-size | Trend arrow text size | `14px` | +| \--nutui-trendarrow-icon-margin | Trend arrow Specifies the spacing between text and icon | `4px` | \ No newline at end of file diff --git a/src/packages/trendarrow/doc.md b/src/packages/trendarrow/doc.md index 97f4fd8b52..29dca2a2b2 100644 --- a/src/packages/trendarrow/doc.md +++ b/src/packages/trendarrow/doc.md @@ -1,10 +1,10 @@ # TrendArrow 指标趋势 -### 介绍 +## 介绍 带有箭头指示的百分比数字,用以展示指标趋势 -### 安装 +## 安装 ```javascript // React @@ -24,8 +24,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react' const App = () => { return ( - - + + ); }; @@ -45,8 +45,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react' const App = () => { return ( - - + + ); }; @@ -66,8 +66,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react' const App = () => { return ( - - + + ); }; @@ -87,8 +87,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react' const App = () => { return ( - - + + ); }; @@ -108,8 +108,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react' const App = () => { return ( - - + + ); }; @@ -129,8 +129,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react' const App = () => { return ( - - + + ); }; @@ -150,14 +150,14 @@ import { TrendArrow, Cell } from '@nutui/nutui-react' const App = () => { return ( - - + + ); @@ -174,19 +174,13 @@ export default App; ```tsx import React from "react" import { TrendArrow, Cell, Icon } from '@nutui/nutui-react' -import { Success, Failure, HeartFill } from '@nutui/icons-react' +import { Success, Failure } from '@nutui/icons-react' const App = () => { return ( - } - /> - } /> - - - + } /> + } /> ); }; @@ -195,30 +189,23 @@ export default App; ::: - -## API +## TrendArrow ### Props -| 参数 | 说明 | 类型 | 默认值 | -|--------------|----------------------------------|--------|------------------| -| rate | 数值，大于0时箭头向上，小于0时箭头向下 | number | - | -| digits | 小数位精度 | number | `2` | -| showSign | 是否显示加减号 | boolean | `false` | -| showZero | 是否显示 0 | boolean | `false` | -| arrowLeft | 是否在数字左侧显示箭头 | boolean | `false` | -| syncTextColor | 文字颜色是否与箭头同步 | boolean | `true` | -| textColor | 文字颜色 | string | `#333333` | -| riseColor | 向上箭头颜色 | string | `#fa2c19` | -| dropColor | 向下箭头颜色 | string | `#64b578` | -| upIcon`v2.0.0` | 自定义向上箭头icon | React.ReactNode | `` | -| downIcon`v2.0.0` | 自定义向下箭头icon | React.ReactNode | `` | -| iconSize`v2.0.0弃用` | 箭头大小 | string | `12px` | -| upIconName`v2.0.0弃用` | 自定义向上箭头icon | string | `triangle-up` | -| downIconName`v2.0.0弃用` | 自定义向下箭头icon | string | `triangle-down` | - - - +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| value | 数值，大于0时箭头向上，小于0时箭头向下 | `number` | `-` | +| digits | 小数位精度 | `number` | `2` | +| symbol | 是否显示加减号 | `boolean` | `false` | +| zero | 是否显示 0 | `boolean` | `false` | +| arrowLeft | 是否在数字左侧显示箭头 | `boolean` | `false` | +| syncColor | 文字颜色是否与箭头同步 | `boolean` | `true` | +| color | 文字颜色 | `string` | `#333333` | +| riseColor | 向上箭头颜色 | `string` | `#fa2c19` | +| dropColor | 向下箭头颜色 | `string` | `#64b578` | +| riseIcon | 自定义向上箭头icon | `React.ReactNode` | `` | +| downIcon | 自定义向下箭头icon | `React.ReactNode` | `` | ## 主题定制 @@ -226,9 +213,7 @@ export default App; 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。 -| 名称 | 默认值 | -| --- | --- | -| --nutui-trendarrow-font-size | `14px` | -| --nutui-trendarrow-before-icon-margin | `4px` | -| --nutui-trendarrow-font-size | `14px` | -| --nutui-trendarrow-before-icon-margin | `4px` | +| 名称 | 说明 | 默认值 | +| --- | --- | --- | +| \--nutui-trendarrow-font-size | 指标趋势的文字大小 | `14px` | +| \--nutui-trendarrow-icon-margin | 指标趋势的文字与图标间距 | `4px` | \ No newline at end of file diff --git a/src/packages/trendarrow/doc.taro.md b/src/packages/trendarrow/doc.taro.md index f1dc39789a..204c5e63fa 100644 --- a/src/packages/trendarrow/doc.taro.md +++ b/src/packages/trendarrow/doc.taro.md @@ -1,10 +1,10 @@ # TrendArrow 指标趋势 -### 介绍 +## 介绍 带有箭头指示的百分比数字,用以展示指标趋势 -### 安装 +## 安装 ```javascript import { TrendArrow } from '@nutui/nutui-react-taro' @@ -23,8 +23,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react-taro' const App = () => { return ( - - + + ); }; @@ -44,8 +44,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react-taro' const App = () => { return ( - - + + ); }; @@ -65,8 +65,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react-taro' const App = () => { return ( - - + + ); }; @@ -86,8 +86,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react-taro' const App = () => { return ( - - + + ); }; @@ -107,8 +107,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react-taro' const App = () => { return ( - - + + ); }; @@ -128,8 +128,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react-taro' const App = () => { return ( - - + + ); }; @@ -149,14 +149,14 @@ import { TrendArrow, Cell } from '@nutui/nutui-react-taro' const App = () => { return ( - - + + ); @@ -173,19 +173,13 @@ export default App; ```tsx import React from "react" import { TrendArrow, Cell, Icon } from '@nutui/nutui-react' -import { Success, Failure, HeartFill } from '@nutui/icons-react' +import { Success, Failure } from '@nutui/icons-react' const App = () => { return ( - } - /> - } /> - - - + } /> + } /> ); }; @@ -194,30 +188,23 @@ export default App; ::: - -## API +## TrendArrow ### Props -| 参数 | 说明 | 类型 | 默认值 | -|--------------|----------------------------------|--------|------------------| -| rate | 数值，大于0时箭头向上，小于0时箭头向下 | number | - | -| digits | 小数位精度 | number | `2` | -| showSign | 是否显示加减号 | boolean | `false` | -| showZero | 是否显示 0 | boolean | `false` | -| arrowLeft | 是否在数字左侧显示箭头 | boolean | `false` | -| syncTextColor | 文字颜色是否与箭头同步 | boolean | `true` | -| textColor | 文字颜色 | string | `#333333` | -| riseColor | 向上箭头颜色 | string | `#fa2c19` | -| dropColor | 向下箭头颜色 | string | `#64b578` | -| upIcon`v2.0.0` | 自定义向上箭头icon | React.ReactNode | `` | -| downIcon`v2.0.0` | 自定义向下箭头icon | React.ReactNode | `` | -| iconSize`v2.0.0弃用` | 箭头大小 | string | `12px` | -| upIconName`v2.0.0弃用` | 自定义向上箭头icon | string | `triangle-up` | -| downIconName`v2.0.0弃用` | 自定义向下箭头icon | string | `triangle-down` | - - - +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| value | 数值，大于0时箭头向上，小于0时箭头向下 | `number` | `-` | +| digits | 小数位精度 | `number` | `2` | +| symbol | 是否显示加减号 | `boolean` | `false` | +| zero | 是否显示 0 | `boolean` | `false` | +| arrowLeft | 是否在数字左侧显示箭头 | `boolean` | `false` | +| syncColor | 文字颜色是否与箭头同步 | `boolean` | `true` | +| color | 文字颜色 | `string` | `#333333` | +| riseColor | 向上箭头颜色 | `string` | `#fa2c19` | +| dropColor | 向下箭头颜色 | `string` | `#64b578` | +| riseIcon | 自定义向上箭头icon | `React.ReactNode` | `` | +| downIcon | 自定义向下箭头icon | `React.ReactNode` | `` | ## 主题定制 @@ -225,9 +212,7 @@ export default App; 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。 -| 名称 | 默认值 | -| --- | --- | -| --nutui-trendarrow-font-size | `14px` | -| --nutui-trendarrow-before-icon-margin | `4px` | -| --nutui-trendarrow-font-size | `14px` | -| --nutui-trendarrow-before-icon-margin | `4px` | +| 名称 | 说明 | 默认值 | +| --- | --- | --- | +| \--nutui-trendarrow-font-size | 指标趋势的文字大小 | `14px` | +| \--nutui-trendarrow-icon-margin | 指标趋势的文字与图标间距 | `4px` | \ No newline at end of file diff --git a/src/packages/trendarrow/doc.zh-TW.md b/src/packages/trendarrow/doc.zh-TW.md index 65c65f8bc0..5668cf58cb 100644 --- a/src/packages/trendarrow/doc.zh-TW.md +++ b/src/packages/trendarrow/doc.zh-TW.md @@ -1,10 +1,10 @@ # TrendArrow 指標趨勢 -### 介紹 +## 介紹 帶有箭頭指示的百分比數字,用以展示指標趨勢 -### 安裝 +## 安裝 ```javascript // React @@ -24,8 +24,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react' const App = () => { return ( - - + + ); }; @@ -45,8 +45,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react' const App = () => { return ( - - + + ); }; @@ -66,8 +66,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react' const App = () => { return ( - - + + ); }; @@ -87,8 +87,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react' const App = () => { return ( - - + + ); }; @@ -108,8 +108,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react' const App = () => { return ( - - + + ); }; @@ -129,8 +129,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react' const App = () => { return ( - - + + ); }; @@ -150,14 +150,14 @@ import { TrendArrow, Cell } from '@nutui/nutui-react' const App = () => { return ( - - + + ); @@ -174,19 +174,13 @@ export default App; ```tsx import React from "react" import { TrendArrow, Cell, Icon } from '@nutui/nutui-react' -import { Success, Failure, HeartFill } from '@nutui/icons-react' +import { Success, Failure } from '@nutui/icons-react' const App = () => { return ( - } - /> - } /> - - - + } /> + } /> ); }; @@ -195,41 +189,31 @@ export default App; ::: - -## API +## TrendArrow ### Props -| 參數 | 說明 | 類型 | 默認值 | -|--------------|----------------------------------|--------|------------------| -| rate | 數值，大於0時箭頭向上，小於0時箭頭向下 | number | - | -| digits | 小數位精度 | number | `2` | -| showSign | 是否顯示加減號 | boolean | `false` | -| showZero | 是否顯示 0 | boolean | `false` | -| arrowLeft | 是否在數字左側顯示箭頭 | boolean | `false` | -| syncTextColor | 文字顏色是否與箭頭同步 | boolean | `true` | -| textColor | 文字顏色 | string | `#333333` | -| riseColor | 向上箭頭顏色 | string | `#fa2c19` | -| dropColor | 向下箭頭顏色 | string | `#64b578` | -| upIcon`v2.0.0` | 自定義向上箭頭icon | React.ReactNode | `` | -| downIcon`v2.0.0` | 自定義向下箭頭icon | React.ReactNode | `` | -| iconSize`v2.0.0弃用` | 箭頭大小 | string | `12px` | -| upIconName`v2.0.0弃用` | 自定義向上箭頭icon | string | `triangle-up` | -| downIconName`v2.0.0弃用` | 自定義向下箭頭icon | string | `triangle-down` | - - - - - -## 主題定制 +| 參數 | 說明 | 類型 | 默認值 | +| --- | --- | --- | --- | +| value | 數值，大於0時箭頭向上，小於0時箭頭向下 | `number` | `-` | +| digits | 小數位精度 | `number` | `2` | +| symbol | 是否顯示加減號 | `boolean` | `false` | +| zero | 是否顯示 0 | `boolean` | `false` | +| arrowLeft | 是否在數字左側顯示箭頭 | `boolean` | `false` | +| syncColor | 文字顏色是否與箭頭同步 | `boolean` | `true` | +| color | 文字顏色 | `string` | `#333333` | +| riseColor | 向上箭頭顏色 | `string` | `#fa2c19` | +| dropColor | 向下箭頭顏色 | `string` | `#64b578` | +| riseIcon | 自定義向上箭頭icon | `React.ReactNode` | `` | +| downIcon | 自定義向下箭頭icon | `React.ReactNode` | `` | + +## 主題定製 ### 樣式變量 組件提供了下列 CSS 變量，可用於自定義樣式，使用方法請參考 [ConfigProvider 組件](#/zh-CN/component/configprovider)。 -| 名稱 | 默認值 | -| --- | --- | -| --nutui-trendarrow-font-size | `14px` | -| --nutui-trendarrow-before-icon-margin | `4px` | -| --nutui-trendarrow-font-size | `14px` | -| --nutui-trendarrow-before-icon-margin | `4px` | +| 名稱 | 說明 | 默認值 | +| --- | --- | --- | +| \--nutui-trendarrow-font-size | 指標趨勢的文字大小 | `14px` | +| \--nutui-trendarrow-icon-margin | 指標趨勢的文字與圖標間距 | `4px` | \ No newline at end of file diff --git a/src/packages/trendarrow/trendarrow.scss b/src/packages/trendarrow/trendarrow.scss index 91ee5a25d0..bd00ac3c92 100644 --- a/src/packages/trendarrow/trendarrow.scss +++ b/src/packages/trendarrow/trendarrow.scss @@ -1,11 +1,12 @@ .nut-trendarrow { - display: inline-block; + display: inline-flex; + align-items: center; font-size: $trendarrow-font-size; &__icon-before { - margin-right: $trendarrow-before-icon-margin; + margin-right: $trendarrow-icon-margin; } &__icon-after { - margin-left: $trendarrow-before-icon-margin; + margin-left: $trendarrow-icon-margin; } &__rate { vertical-align: middle; diff --git a/src/packages/trendarrow/trendarrow.taro.tsx b/src/packages/trendarrow/trendarrow.taro.tsx index f78aa663ab..0c2e1bfe2c 100644 --- a/src/packages/trendarrow/trendarrow.taro.tsx +++ b/src/packages/trendarrow/trendarrow.taro.tsx @@ -1,61 +1,58 @@ import React, { FunctionComponent, useRef } from 'react' import { TriangleDown, TriangleUp } from '@nutui/icons-react-taro' -import bem from '@/utils/bem' +import { BasicComponent, ComponentDefaults } from '@/utils/typings' -export interface TrendArrowProps { - rate: number +export interface TrendArrowProps extends BasicComponent { + value: number digits: number - showSign: boolean - showZero: boolean + symbol: boolean + zero: boolean arrowLeft: boolean - syncTextColor: boolean - textColor: string + syncColor: boolean + color: string riseColor: string dropColor: string - iconSize: string - upIcon: React.ReactNode + riseIcon: React.ReactNode downIcon: React.ReactNode - className: string - style: React.CSSProperties } const defaultProps = { - rate: 0, + ...ComponentDefaults, + value: 0, digits: 2, - showSign: false, - showZero: false, + symbol: false, + zero: false, arrowLeft: false, - syncTextColor: true, - textColor: '#333', + syncColor: true, + color: '#333', riseColor: '#fa2c19', dropColor: '#64b578', - upIcon: null, + riseIcon: null, downIcon: null, - className: '', } as TrendArrowProps export const TrendArrow: FunctionComponent< Partial & React.HTMLAttributes > = (props) => { const { - rate, + value, digits, - showSign, - showZero, + symbol, + zero, arrowLeft, - syncTextColor, - textColor, + syncColor, + color, riseColor, dropColor, - - upIcon, + riseIcon, downIcon, className, + style, children, ...rest } = { ...defaultProps, ...props } - const b = bem('trendarrow') + const classPrefix = 'nut-trendarrow' const handleClick = () => {} - const rateTrend = useRef(rate > 0) + const rateTrend = useRef(value > 0) const myFixed = (num: any, digit = 2) => { if (Object.is(parseFloat(num), NaN)) { @@ -69,22 +66,22 @@ export const TrendArrow: FunctionComponent< const calcStyle = (() => { const arrowColor = rateTrend.current ? riseColor : dropColor - const textEquArrowColor = syncTextColor ? arrowColor : textColor + const textEquArrowColor = syncColor ? arrowColor : color const style = { - color: rate === 0 ? textColor : textEquArrowColor, + color: value === 0 ? color : textEquArrowColor, } return style })() const calcRate = (() => { - rateTrend.current = rate > 0 - const absRate = Math.abs(rate) - if (!showZero && rate === 0) { + rateTrend.current = value > 0 + const absRate = Math.abs(value) + if (!zero && value === 0) { return '--' } const resultRate = `${ // eslint-disable-next-line no-nested-ternary - showSign && rate !== 0 ? (rateTrend.current ? '+' : '-') : '' + symbol && value !== 0 ? (rateTrend.current ? '+' : '-') : '' }${myFixed(Number(absRate), digits)}%` return resultRate @@ -100,24 +97,27 @@ export const TrendArrow: FunctionComponent< const renderContent = (arrowLeft: boolean) => { const classNameSuffix = !arrowLeft ? 'icon-after' : 'icon-before' return ( - + {calcRate} ) } return ( -
+
{!arrowLeft && renderContent(!arrowLeft)} - {children || ( + {Number(value) !== 0 && ( <> - {Number(rate) !== 0 && ( - <> - {rateTrend ? ( - - ) : ( - - )} - + {rateTrend.current ? ( + <>{riseIcon || } + ) : ( + <>{downIcon || } )} )} diff --git a/src/packages/trendarrow/trendarrow.tsx b/src/packages/trendarrow/trendarrow.tsx index 8c1be62d0e..bb993b4f15 100644 --- a/src/packages/trendarrow/trendarrow.tsx +++ b/src/packages/trendarrow/trendarrow.tsx @@ -1,61 +1,58 @@ import React, { FunctionComponent, useRef } from 'react' import { TriangleDown, TriangleUp } from '@nutui/icons-react' -import bem from '@/utils/bem' +import { BasicComponent, ComponentDefaults } from '@/utils/typings' -export interface TrendArrowProps { - rate: number +export interface TrendArrowProps extends BasicComponent { + value: number digits: number - showSign: boolean - showZero: boolean + symbol: boolean + zero: boolean arrowLeft: boolean - syncTextColor: boolean - textColor: string + syncColor: boolean + color: string riseColor: string dropColor: string - iconSize: string - upIcon: React.ReactNode + riseIcon: React.ReactNode downIcon: React.ReactNode - className: string - style: React.CSSProperties } const defaultProps = { - rate: 0, + ...ComponentDefaults, + value: 0, digits: 2, - showSign: false, - showZero: false, + symbol: false, + zero: false, arrowLeft: false, - syncTextColor: true, - textColor: '#333', + syncColor: true, + color: '#333', riseColor: '#fa2c19', dropColor: '#64b578', - - upIcon: null, + riseIcon: null, downIcon: null, - className: '', } as TrendArrowProps export const TrendArrow: FunctionComponent< Partial & React.HTMLAttributes > = (props) => { const { - rate, + value, digits, - showSign, - showZero, + symbol, + zero, arrowLeft, - syncTextColor, - textColor, + syncColor, + color, riseColor, dropColor, - upIcon, + riseIcon, downIcon, className, + style, children, ...rest } = { ...defaultProps, ...props } - const b = bem('trendarrow') + const classPrefix = 'nut-trendarrow' const handleClick = () => {} - const rateTrend = useRef(rate > 0) + const rateTrend = useRef(value > 0) const myFixed = (num: any, digit = 2) => { if (Object.is(parseFloat(num), NaN)) { @@ -69,22 +66,22 @@ export const TrendArrow: FunctionComponent< const calcStyle = (() => { const arrowColor = rateTrend.current ? riseColor : dropColor - const textEquArrowColor = syncTextColor ? arrowColor : textColor + const textEquArrowColor = syncColor ? arrowColor : color const style = { - color: rate === 0 ? textColor : textEquArrowColor, + color: value === 0 ? color : textEquArrowColor, } return style })() const calcRate = (() => { - rateTrend.current = rate > 0 - const absRate = Math.abs(rate) - if (!showZero && rate === 0) { + rateTrend.current = value > 0 + const absRate = Math.abs(value) + if (!zero && value === 0) { return '--' } const resultRate = `${ // eslint-disable-next-line no-nested-ternary - showSign && rate !== 0 ? (rateTrend.current ? '+' : '-') : '' + symbol && value !== 0 ? (rateTrend.current ? '+' : '-') : '' }${myFixed(Number(absRate), digits)}%` return resultRate @@ -100,24 +97,27 @@ export const TrendArrow: FunctionComponent< const renderContent = (arrowLeft: boolean) => { const classNameSuffix = !arrowLeft ? 'icon-after' : 'icon-before' return ( - + {calcRate} ) } return ( -
+
{!arrowLeft && renderContent(!arrowLeft)} - {children || ( + {Number(value) !== 0 && ( <> - {Number(rate) !== 0 && ( - <> - {rateTrend ? ( - - ) : ( - - )} - + {rateTrend.current ? ( + <>{riseIcon || } + ) : ( + <>{downIcon || } )} )} diff --git a/src/styles/variables-jmapp.scss b/src/styles/variables-jmapp.scss index 733a76b0e3..74dfce268c 100644 --- a/src/styles/variables-jmapp.scss +++ b/src/styles/variables-jmapp.scss @@ -2464,10 +2464,7 @@ $invoice-padding: var(--nutui-invoice-padding, 10px 10px 20px) !default; // TrendArrow（✅ todo：react版本该组件暂无，将变量先迁过来） $trendarrow-font-size: var(--nutui-trendarrow-font-size, 14px) !default; -$trendarrow-before-icon-margin: var( - --nutui-trendarrow-before-icon-margin, - 4px -) !default; +$trendarrow-icon-margin: var(--nutui-trendarrow-icon-margin, 4px) !default; // animatingnumbers（✅） $countup-height: var(--nutui-countup-height, 32px) !default; @@ -2501,7 +2498,4 @@ $col-default-margin-bottom: var( // TrendArrow $trendarrow-font-size: var(--nutui-trendarrow-font-size, 14px) !default; -$trendarrow-before-icon-margin: var( - --nutui-trendarrow-before-icon-margin, - 4px -) !default; +$trendarrow-icon-margin: var(--nutui-trendarrow-icon-margin, 4px) !default; diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 9d0507df00..2a4364eefd 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -2456,10 +2456,7 @@ $invoice-padding: var(--nutui-invoice-padding, 10px 10px 20px) !default; // TrendArrow（✅ todo：react版本该组件暂无，将变量先迁过来） $trendarrow-font-size: var(--nutui-trendarrow-font-size, 14px) !default; -$trendarrow-before-icon-margin: var( - --nutui-trendarrow-before-icon-margin, - 4px -) !default; +$trendarrow-icon-margin: var(--nutui-trendarrow-icon-margin, 4px) !default; // animatingnumbers（✅） $countup-height: var(--nutui-countup-height, 32px) !default; @@ -2493,7 +2490,4 @@ $col-default-margin-bottom: var( // TrendArrow $trendarrow-font-size: var(--nutui-trendarrow-font-size, 14px) !default; -$trendarrow-before-icon-margin: var( - --nutui-trendarrow-before-icon-margin, - 4px -) !default; +$trendarrow-icon-margin: var(--nutui-trendarrow-icon-margin, 4px) !default; From fb5062032080b139496ea99e4fe5b7b63578664f Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Wed, 24 May 2023 17:55:39 +0800 Subject: [PATCH 2/7] =?UTF-8?q?refactor:=20=E6=96=87=E6=A1=A3=E4=BC=98?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/trendarrow/doc.en-US.md | 2 +- src/packages/trendarrow/doc.md | 2 +- src/packages/trendarrow/doc.taro.md | 2 +- src/packages/trendarrow/doc.zh-TW.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/packages/trendarrow/doc.en-US.md b/src/packages/trendarrow/doc.en-US.md index cd1721681f..e65cedcf3e 100644 --- a/src/packages/trendarrow/doc.en-US.md +++ b/src/packages/trendarrow/doc.en-US.md @@ -193,7 +193,7 @@ export default App; ### Props -| Attribute | Description | Type | Default | +| Property | Description | Type | Default | | --- | --- | --- | --- | | value | Value, arrow up if greater than zero, arrow down if less than zero | `number` | `-` | | digits | Decimal precision | `number` | `2` | diff --git a/src/packages/trendarrow/doc.md b/src/packages/trendarrow/doc.md index 29dca2a2b2..d355cc290d 100644 --- a/src/packages/trendarrow/doc.md +++ b/src/packages/trendarrow/doc.md @@ -193,7 +193,7 @@ export default App; ### Props -| 参数 | 说明 | 类型 | 默认值 | +| 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | value | 数值，大于0时箭头向上，小于0时箭头向下 | `number` | `-` | | digits | 小数位精度 | `number` | `2` | diff --git a/src/packages/trendarrow/doc.taro.md b/src/packages/trendarrow/doc.taro.md index 204c5e63fa..9ae312d2de 100644 --- a/src/packages/trendarrow/doc.taro.md +++ b/src/packages/trendarrow/doc.taro.md @@ -192,7 +192,7 @@ export default App; ### Props -| 参数 | 说明 | 类型 | 默认值 | +| 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | value | 数值，大于0时箭头向上，小于0时箭头向下 | `number` | `-` | | digits | 小数位精度 | `number` | `2` | diff --git a/src/packages/trendarrow/doc.zh-TW.md b/src/packages/trendarrow/doc.zh-TW.md index 5668cf58cb..3e4645a43d 100644 --- a/src/packages/trendarrow/doc.zh-TW.md +++ b/src/packages/trendarrow/doc.zh-TW.md @@ -193,7 +193,7 @@ export default App; ### Props -| 參數 | 說明 | 類型 | 默認值 | +| 屬性 | 說明 | 類型 | 默認值 | | --- | --- | --- | --- | | value | 數值，大於0時箭頭向上，小於0時箭頭向下 | `number` | `-` | | digits | 小數位精度 | `number` | `2` | From ab0028f08aef2dfebd3c37b1bcdca9fce23a2bbb Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Wed, 31 May 2023 10:27:42 +0800 Subject: [PATCH 3/7] =?UTF-8?q?fix:=20pr=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/trendarrow/trendarrow.taro.tsx | 9 ++------- src/packages/trendarrow/trendarrow.tsx | 9 ++------- 2 files changed, 4 insertions(+), 14 deletions(-) diff --git a/src/packages/trendarrow/trendarrow.taro.tsx b/src/packages/trendarrow/trendarrow.taro.tsx index 0c2e1bfe2c..ce3f83781f 100644 --- a/src/packages/trendarrow/trendarrow.taro.tsx +++ b/src/packages/trendarrow/trendarrow.taro.tsx @@ -51,12 +51,11 @@ export const TrendArrow: FunctionComponent< ...rest } = { ...defaultProps, ...props } const classPrefix = 'nut-trendarrow' - const handleClick = () => {} const rateTrend = useRef(value > 0) const myFixed = (num: any, digit = 2) => { if (Object.is(parseFloat(num), NaN)) { - return console.log(`传入的值：${num}不是一个数字`) + return console.warn(`传入的值：${num}不是一个数字`) } num = parseFloat(num) // eslint-disable-next-line no-restricted-properties @@ -106,11 +105,7 @@ export const TrendArrow: FunctionComponent< ) } return ( -
+
{!arrowLeft && renderContent(!arrowLeft)} {Number(value) !== 0 && ( <> diff --git a/src/packages/trendarrow/trendarrow.tsx b/src/packages/trendarrow/trendarrow.tsx index bb993b4f15..ddde0f3280 100644 --- a/src/packages/trendarrow/trendarrow.tsx +++ b/src/packages/trendarrow/trendarrow.tsx @@ -51,12 +51,11 @@ export const TrendArrow: FunctionComponent< ...rest } = { ...defaultProps, ...props } const classPrefix = 'nut-trendarrow' - const handleClick = () => {} const rateTrend = useRef(value > 0) const myFixed = (num: any, digit = 2) => { if (Object.is(parseFloat(num), NaN)) { - return console.log(`传入的值：${num}不是一个数字`) + return console.warn(`传入的值：${num}不是一个数字`) } num = parseFloat(num) // eslint-disable-next-line no-restricted-properties @@ -106,11 +105,7 @@ export const TrendArrow: FunctionComponent< ) } return ( -
+
{!arrowLeft && renderContent(!arrowLeft)} {Number(value) !== 0 && ( <> From fd70c7c0512ab8eda00e8d7537b6dda3eb442267 Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Thu, 15 Jun 2023 16:32:02 +0800 Subject: [PATCH 4/7] =?UTF-8?q?fix:=20=E5=AE=8C=E5=96=84migrate-from-v1?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- migrate-from-v1.md | 76 +++++++++++++++++++++++++++------------------- 1 file changed, 45 insertions(+), 31 deletions(-) diff --git a/migrate-from-v1.md b/migrate-from-v1.md index 9d8ae663bd..00b843657b 100644 --- a/migrate-from-v1.md +++ b/migrate-from-v1.md @@ -70,17 +70,19 @@ plugins: [ - 增加 `ref`，对外暴露组件内 `button` 元素 #### Cell -- `subTitle` 重命名为 `description` -- 删除 `desc` 重命名为 `extra`, 改为 `React.Node` 类型 -- 删除 `icon`、 `isLink`、`url`、`linkSlot`、`replace`, 暴露自定义节点, demo示例展示 -- 删除 `descTextAlign`, 通过css变量实现 -- 删除 `roundRadius` 重命名为 `radius` -- 删除 `center` 改为 `align`，默认值为`flex-start`, 可选 `center`、`flex-end` + +- `subTitle` 重命名为 `description`，类型修改为 `React.Node` +- `desc` 重命名为 `extra`，类型修改为 `React.Node` +- `roundRadius` 重命名为 `radius` +- `center` 重命名为 `align`，默认值修改为`flex-start`，可选值为 `flex-start`、`center`、`flex-end` +- 移除 `icon`、 `isLink`、`url`、`linkSlot`、`replace`、`descTextAlign`，通过用户自定义节点实现，参考文档demo示例 #### CellGroup + +- 新增 `divider`，单元格之间是否有分割线 - `desc` 重命名为 `description` -- `title`、`description` 改为 `React.Node` 类型 -- 删除 `titleSlot` 和 `descSlot` -- 增加 `divider`, 单元格之间是否有分割线 +- `title`、`description` 类型修改为 `React.Node` +- 移除 `titleSlot` 和 `descSlot`，通过 `title`、`description` 实现 +- #### ConfigProvider #### Icon #### Image @@ -119,7 +121,7 @@ plugins: [ - `acceptKey` 重命名为 `floorKey` - `indexList` 重命名为 `list` - `isSticky` 重命名为 `sticky` -- 新增`showKeys`, 是否展示右侧导航 +- 新增`showKeys`，是否展示右侧导航 #### FixedNav - 删除 `fixednavClass`，通过 `className` 实现 - `unActiveText` 重命名为 `inactiveText` @@ -141,14 +143,18 @@ plugins: [ - `titleIcon` 重命名为 `icon` - `optionsIcon` 重命名为 `icon` - 增加 `closeOnClickAway` + #### NavBar -- 删除 `title`, 改为 `children` 实现 -- 删除 `desc`, 改为 `right`, 类型为 `React.Node` 类型 -- 增加 `left`，改为 `React.Node` 类型 -- 删除 `leftText` `leftShow`, 改为`back`, 类型为 `React.Node` + +- `desc` 重命名为 `right`，类型修改为 `React.Node` +- 新增 `left`，左侧内容，渲染在返回区域的右侧 +- 新增 `back`，返回区域内容 +- 移除 `title`，通过 `children` 实现 +- 移除 `leftText` `leftShow`，通过 `back`、`left`实现 - `safeAreaInsetTop` 重命名为 `safeArea` -- 删除 `border` -- 删除 `onClickTitle` `onClickRight` `onClickIcon`, 暴露自定义节点, demo示例展示 +- `border` 废弃 +- 移除 `onClickTitle` `onClickRight` `onClickIcon`，通过在`left`、`title`、`right`自定义事件实现，参考文档demo示例 +- #### Pagination - `modelValue` 重命名为 `value`，受控值 - 增加 `defaultValue` 非受控值 @@ -374,11 +380,15 @@ plugins: [ - `isOpenRefresh` 重命名为 `pullRefresh` - `pullText` 重命名为 `pullingText` - `loadText` 重命名为 `loadingText` -- `containerId` 重命名为 `target`, 并去掉useWindow，改用target +- `containerId` 重命名为 `target`，并去掉useWindow，改用target - pullingText和loadingText类型改成ReactNode + #### Notify -- 删除 `color` 和 `background`, 通过css变量实现 -- 修改 `onClosed` 为 `onClose`，规范命名，关闭时触发。 + +- 移除 `color` ，通过css变量`--nutui-notify-text-color`实现 +- 移除`background`，通过css变量`--nutui-notify-base-background-color`实现 +- `onClosed` 重命名为 `onClose` + #### PullToRefresh #### Swipe @@ -386,8 +396,12 @@ plugins: [ - 移除 `rightWidth` ，通过 `rightAction` 实现 #### Switch -- 删除 `isAsync`, 优化新增 `checked`和 `defaultChecked` , 增加默认值和受控 -- 删除 `activeColor` 和 `inactiveColor`, 通过css变量实现 + +- 新增 `defaultChecked`，用于非受控，`checked` 用于受控 +- 移除 `isAsync`，通过 `checked`实现 +- 移除 `activeColor` ，通过css变量`--nutui-switch-open-background-color`实现 +- 移除 `inactiveColor`，通过css变量`--nutui-switch-close-background-color`实现 + #### Toast - 删除H5版本 `id` @@ -407,7 +421,7 @@ plugins: [ #### AnimatingNumbers - `maxLen` 重命名为 `length` -- `endNumber` 重命名为 `value`, 类型改为 `string|number` +- `endNumber` 重命名为 `value`，类型修改为 `string|number` - `delaySpeed` 重命名为 `delay` - `easeSpeed` 重命名为 `duration` @@ -450,7 +464,7 @@ plugins: [ #### CountDown -- 新增 `remainingTime`, 支持剩余毫秒时间倒计时。 +- 新增 `remainingTime`，支持剩余毫秒时间倒计时。 #### Ellipsis - 新增 `className` 和 `style` 属性的支持 @@ -491,8 +505,8 @@ plugins: [ #### Price - `decimalDigits` 重命名为 `digits` -- 删除 `needSymbol`, 利用 `symbol` 判断是否需要加上 symbol 符号 -- 增加 `line`, 用于划线价展示 +- 移除 `needSymbol`，通过 `symbol` 判断是否需要加上 symbol 符号 +- 新增 `line`，是否展示划线价 #### Progress - `percentage` 重命名为 `percent`，受控 @@ -553,9 +567,9 @@ plugins: [ - `showZero` 重命名为 `zero` - `syncTextColor` 重命名为 `syncColor` - `textColor` 重命名为 `color` -- 删除 `iconSize`, 图标自定义传入 -- 删除 `upIconName`, 替换为 `riseIcon`, 类型为 `React.Node` 类型 -- 删除 `downIconName`, 替换为 `downIcon`, 类型为 `React.Node` 类型 +- `upIconName` 重命名为 `riseIcon`，类型修改为 `React.Node` +- `downIconName` 重重命名为命为 `downIcon`，类型修改为 `React.Node` +- 移除 `iconSize`，通过`riseIcon`、`downIcon`自定义传入icon大小 #### Video - 调整中英文文档规范 @@ -581,9 +595,9 @@ plugins: [ #### Signature -- `type` 类型改为 `png｜jpg` -- `unSupportTpl` 重命名为 `unsupported`, 类型改为 `ReactNode` -- 新增 `confirm`和`clear` ref 的方法，去掉组件里面的 `button`, demo 中自定义按钮点击事件 +- `type` 类型修改为 `png｜jpg` +- `unSupportTpl` 重命名为 `unsupported`，类型修改为 `ReactNode` +- 新增 `confirm`和`clear` ref 的方法，移除组件内部 `button`元素，通过自定义按钮元素，设置元素点击事件结合ref实现，参考文档demo示例 #### TimeSelect - 移除 `height`，通过 `style` 设置高度 From 4219aa570db37392784ee90234e1b0495cf400cb Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Mon, 26 Jun 2023 18:17:33 +0800 Subject: [PATCH 5/7] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9TrendArrow?= =?UTF-8?q?=E7=BB=84=E4=BB=B6props?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../trendarrow/__test__/trendarrow.spec.tsx | 10 +++--- src/packages/trendarrow/demo.taro.tsx | 12 +++---- src/packages/trendarrow/demo.tsx | 12 +++---- src/packages/trendarrow/doc.en-US.md | 18 +++++------ src/packages/trendarrow/doc.md | 26 ++++++---------- src/packages/trendarrow/doc.taro.md | 18 +++++------ src/packages/trendarrow/doc.zh-TW.md | 31 ++++++------------- src/packages/trendarrow/trendarrow.taro.tsx | 30 +++++++++--------- src/packages/trendarrow/trendarrow.tsx | 30 +++++++++--------- 9 files changed, 83 insertions(+), 104 deletions(-) diff --git a/src/packages/trendarrow/__test__/trendarrow.spec.tsx b/src/packages/trendarrow/__test__/trendarrow.spec.tsx index c999d48141..3a8dc1c52f 100644 --- a/src/packages/trendarrow/__test__/trendarrow.spec.tsx +++ b/src/packages/trendarrow/__test__/trendarrow.spec.tsx @@ -39,8 +39,8 @@ test('should not render 0 when zero is false', async () => { ) }) -test('should render left icon when arrowLeft', async () => { - const { container } = render() +test('should render left icon when left', async () => { + const { container } = render() expect( container.querySelectorAll('.nut-trendarrow__icon-before')?.length ).toBe(0) @@ -49,8 +49,8 @@ test('should render left icon when arrowLeft', async () => { ).toBe(1) }) -test('should render sync text color when syncColor is true', async () => { - const { container } = render() +test('should render sync text color when sync is true', async () => { + const { container } = render() expect(container.querySelector('.nut-trendarrow__value')).toHaveAttribute( 'style', 'color: rgb(250, 44, 25);' @@ -59,7 +59,7 @@ test('should render sync text color when syncColor is true', async () => { test('should render sync text color when color is true', async () => { const { container } = render( - + ) expect(container.querySelector('.nut-trendarrow__value')).toHaveAttribute( 'style', diff --git a/src/packages/trendarrow/demo.taro.tsx b/src/packages/trendarrow/demo.taro.tsx index 8dfe151126..c2235dc03a 100644 --- a/src/packages/trendarrow/demo.taro.tsx +++ b/src/packages/trendarrow/demo.taro.tsx @@ -55,8 +55,8 @@ const TrendArrowDemo = () => {

{translated.basic}

- - + +
{translated.title1}
@@ -70,8 +70,8 @@ const TrendArrowDemo = () => {
{translated.title3}
- - + +
{translated.title4}
@@ -88,7 +88,7 @@ const TrendArrowDemo = () => { {
{translated.title7}
} /> - } /> + } />
diff --git a/src/packages/trendarrow/demo.tsx b/src/packages/trendarrow/demo.tsx index a42c8316ef..5f23a8143c 100644 --- a/src/packages/trendarrow/demo.tsx +++ b/src/packages/trendarrow/demo.tsx @@ -53,8 +53,8 @@ const TrendArrowDemo = () => {

{translated.basic}

- - + +
{translated.title1}
@@ -68,8 +68,8 @@ const TrendArrowDemo = () => {
{translated.title3}
- - + +
{translated.title4}
@@ -86,7 +86,7 @@ const TrendArrowDemo = () => { {
{translated.title7}
} /> - } /> + } />
diff --git a/src/packages/trendarrow/doc.en-US.md b/src/packages/trendarrow/doc.en-US.md index 6c12eef8a5..8c5e99cf8e 100644 --- a/src/packages/trendarrow/doc.en-US.md +++ b/src/packages/trendarrow/doc.en-US.md @@ -23,8 +23,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react' const App = () => { return ( - - + + ); }; @@ -86,8 +86,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react' const App = () => { return ( - - + + ); }; @@ -152,7 +152,7 @@ const App = () => { { return ( } /> - } /> + } /> ); }; @@ -198,13 +198,13 @@ export default App; | digits | Decimal precision | `number` | `2` | | symbol | Whether to display plus and minus signs | `boolean` | `false` | | zero | Show zero or not | `boolean` | `false` | -| arrowLeft | Whether to show an arrow to the left of the number | `boolean` | `false` | -| syncColor | Whether the text color is in sync with the arrow | `boolean` | `true` | +| left | Whether to show an arrow to the left of the number | `boolean` | `false` | +| sync | Whether the text color is in sync with the arrow | `boolean` | `true` | | color | Text color | `string` | `#333333` | | riseColor | Rise arrow color | `string` | `#fa2c19` | | dropColor | Down arrow color | `string` | `#64b578` | | riseIcon | Custom Rise arrow icon | `string` | `` | -| downIcon | Custom down arrow icon | `string` | `` | +| dropIcon | Custom down arrow icon | `string` | `` | ## Theming diff --git a/src/packages/trendarrow/doc.md b/src/packages/trendarrow/doc.md index c00ad59ab1..920e62e6d8 100644 --- a/src/packages/trendarrow/doc.md +++ b/src/packages/trendarrow/doc.md @@ -23,8 +23,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react' const App = () => { return ( - - + + ); }; @@ -86,8 +86,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react' const App = () => { return ( - - + + ); }; @@ -152,7 +152,7 @@ const App = () => { { return ( } /> - } /> + } /> ); }; @@ -198,21 +198,13 @@ export default App; | digits | 小数位精度 | `number` | `2` | | symbol | 是否显示加减号 | `boolean` | `false` | | zero | 是否显示 0 | `boolean` | `false` | -| arrowLeft | 是否在数字左侧显示箭头 | `boolean` | `false` | -| syncColor | 文字颜色是否与箭头同步 | `boolean` | `true` | +| left | 是否在数字左侧显示箭头 | `boolean` | `false` | +| sync | 文字颜色是否与箭头同步 | `boolean` | `true` | | color | 文字颜色 | `string` | `#333333` | | riseColor | 向上箭头颜色 | `string` | `#fa2c19` | | dropColor | 向下箭头颜色 | `string` | `#64b578` | | riseIcon | 自定义向上箭头icon | `React.ReactNode` | `` | -| downIcon | 自定义向下箭头icon | `React.ReactNode` | `` | -<<<<<<< HEAD -<<<<<<< HEAD -======= - ->>>>>>> next -======= - ->>>>>>> b66880dab02a9d37fa3191f5f38824a2d0664290 +| dropIcon | 自定义向下箭头icon | `React.ReactNode` | `` | ## 主题定制 diff --git a/src/packages/trendarrow/doc.taro.md b/src/packages/trendarrow/doc.taro.md index 71bc857e97..0933863ef7 100644 --- a/src/packages/trendarrow/doc.taro.md +++ b/src/packages/trendarrow/doc.taro.md @@ -23,8 +23,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react-taro' const App = () => { return ( - - + + ); }; @@ -86,8 +86,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react-taro' const App = () => { return ( - - + + ); }; @@ -152,7 +152,7 @@ const App = () => { { return ( } /> - } /> + } /> ); }; @@ -198,13 +198,13 @@ export default App; | digits | 小数位精度 | `number` | `2` | | symbol | 是否显示加减号 | `boolean` | `false` | | zero | 是否显示 0 | `boolean` | `false` | -| arrowLeft | 是否在数字左侧显示箭头 | `boolean` | `false` | -| syncColor | 文字颜色是否与箭头同步 | `boolean` | `true` | +| left | 是否在数字左侧显示箭头 | `boolean` | `false` | +| sync | 文字颜色是否与箭头同步 | `boolean` | `true` | | color | 文字颜色 | `string` | `#333333` | | riseColor | 向上箭头颜色 | `string` | `#fa2c19` | | dropColor | 向下箭头颜色 | `string` | `#64b578` | | riseIcon | 自定义向上箭头icon | `React.ReactNode` | `` | -| downIcon | 自定义向下箭头icon | `React.ReactNode` | `` | +| dropIcon | 自定义向下箭头icon | `React.ReactNode` | `` | ## 主题定制 diff --git a/src/packages/trendarrow/doc.zh-TW.md b/src/packages/trendarrow/doc.zh-TW.md index fe80a95e65..1eec99e730 100644 --- a/src/packages/trendarrow/doc.zh-TW.md +++ b/src/packages/trendarrow/doc.zh-TW.md @@ -23,8 +23,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react' const App = () => { return ( - - + + ); }; @@ -86,8 +86,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react' const App = () => { return ( - - + + ); }; @@ -152,7 +152,7 @@ const App = () => { { return ( } /> - } /> + } /> ); }; @@ -194,33 +194,20 @@ export default App; | 屬性 | 說明 | 類型 | 默認值 | | --- | --- | --- | --- | -<<<<<<< HEAD -| value | 數值，大於0時箭頭向上，小於0時箭頭向下 | `number` | `-` | -======= | value | 數值，大於0時箭頭嚮上，小於0時箭頭嚮下 | `number` | `-` | ->>>>>>> next | digits | 小數位精度 | `number` | `2` | | symbol | 是否顯示加減號 | `boolean` | `false` | | zero | 是否顯示 0 | `boolean` | `false` | -| arrowLeft | 是否在數字左側顯示箭頭 | `boolean` | `false` | -| syncColor | 文字顏色是否與箭頭同步 | `boolean` | `true` | +| left | 是否在數字左側顯示箭頭 | `boolean` | `false` | +| sync | 文字顏色是否與箭頭同步 | `boolean` | `true` | | color | 文字顏色 | `string` | `#333333` | -<<<<<<< HEAD -| riseColor | 向上箭頭顏色 | `string` | `#fa2c19` | -| dropColor | 向下箭頭顏色 | `string` | `#64b578` | -| riseIcon | 自定義向上箭頭icon | `React.ReactNode` | `` | -| downIcon | 自定義向下箭頭icon | `React.ReactNode` | `` | - -## 主題定製 -======= | riseColor | 嚮上箭頭顏色 | `string` | `#fa2c19` | | dropColor | 嚮下箭頭顏色 | `string` | `#64b578` | | riseIcon | 自定義嚮上箭頭icon | `React.ReactNode` | `` | -| downIcon | 自定義嚮下箭頭icon | `React.ReactNode` | `` | +| dropIcon | 自定義嚮下箭頭icon | `React.ReactNode` | `` | ## 主題定制 ->>>>>>> next ### 樣式變量 diff --git a/src/packages/trendarrow/trendarrow.taro.tsx b/src/packages/trendarrow/trendarrow.taro.tsx index ce3f83781f..0025cfab5c 100644 --- a/src/packages/trendarrow/trendarrow.taro.tsx +++ b/src/packages/trendarrow/trendarrow.taro.tsx @@ -7,13 +7,13 @@ export interface TrendArrowProps extends BasicComponent { digits: number symbol: boolean zero: boolean - arrowLeft: boolean - syncColor: boolean + left: boolean + sync: boolean color: string riseColor: string dropColor: string riseIcon: React.ReactNode - downIcon: React.ReactNode + dropIcon: React.ReactNode } const defaultProps = { ...ComponentDefaults, @@ -21,13 +21,13 @@ const defaultProps = { digits: 2, symbol: false, zero: false, - arrowLeft: false, - syncColor: true, + left: false, + sync: true, color: '#333', riseColor: '#fa2c19', dropColor: '#64b578', riseIcon: null, - downIcon: null, + dropIcon: null, } as TrendArrowProps export const TrendArrow: FunctionComponent< @@ -38,13 +38,13 @@ export const TrendArrow: FunctionComponent< digits, symbol, zero, - arrowLeft, - syncColor, + left, + sync, color, riseColor, dropColor, riseIcon, - downIcon, + dropIcon, className, style, children, @@ -65,7 +65,7 @@ export const TrendArrow: FunctionComponent< const calcStyle = (() => { const arrowColor = rateTrend.current ? riseColor : dropColor - const textEquArrowColor = syncColor ? arrowColor : color + const textEquArrowColor = sync ? arrowColor : color const style = { color: value === 0 ? color : textEquArrowColor, } @@ -93,8 +93,8 @@ export const TrendArrow: FunctionComponent< return iconProps })() - const renderContent = (arrowLeft: boolean) => { - const classNameSuffix = !arrowLeft ? 'icon-after' : 'icon-before' + const renderContent = (left: boolean) => { + const classNameSuffix = !left ? 'icon-after' : 'icon-before' return ( - {!arrowLeft && renderContent(!arrowLeft)} + {!left && renderContent(!left)} {Number(value) !== 0 && ( <> {rateTrend.current ? ( <>{riseIcon || } ) : ( - <>{downIcon || } + <>{dropIcon || } )} )} - {arrowLeft && renderContent(!arrowLeft)} + {left && renderContent(!left)}
) } diff --git a/src/packages/trendarrow/trendarrow.tsx b/src/packages/trendarrow/trendarrow.tsx index ddde0f3280..25639cc274 100644 --- a/src/packages/trendarrow/trendarrow.tsx +++ b/src/packages/trendarrow/trendarrow.tsx @@ -7,13 +7,13 @@ export interface TrendArrowProps extends BasicComponent { digits: number symbol: boolean zero: boolean - arrowLeft: boolean - syncColor: boolean + left: boolean + sync: boolean color: string riseColor: string dropColor: string riseIcon: React.ReactNode - downIcon: React.ReactNode + dropIcon: React.ReactNode } const defaultProps = { ...ComponentDefaults, @@ -21,13 +21,13 @@ const defaultProps = { digits: 2, symbol: false, zero: false, - arrowLeft: false, - syncColor: true, + left: false, + sync: true, color: '#333', riseColor: '#fa2c19', dropColor: '#64b578', riseIcon: null, - downIcon: null, + dropIcon: null, } as TrendArrowProps export const TrendArrow: FunctionComponent< @@ -38,13 +38,13 @@ export const TrendArrow: FunctionComponent< digits, symbol, zero, - arrowLeft, - syncColor, + left, + sync, color, riseColor, dropColor, riseIcon, - downIcon, + dropIcon, className, style, children, @@ -65,7 +65,7 @@ export const TrendArrow: FunctionComponent< const calcStyle = (() => { const arrowColor = rateTrend.current ? riseColor : dropColor - const textEquArrowColor = syncColor ? arrowColor : color + const textEquArrowColor = sync ? arrowColor : color const style = { color: value === 0 ? color : textEquArrowColor, } @@ -93,8 +93,8 @@ export const TrendArrow: FunctionComponent< return iconProps })() - const renderContent = (arrowLeft: boolean) => { - const classNameSuffix = !arrowLeft ? 'icon-after' : 'icon-before' + const renderContent = (left: boolean) => { + const classNameSuffix = !left ? 'icon-after' : 'icon-before' return ( - {!arrowLeft && renderContent(!arrowLeft)} + {!left && renderContent(!left)} {Number(value) !== 0 && ( <> {rateTrend.current ? ( <>{riseIcon || } ) : ( - <>{downIcon || } + <>{dropIcon || } )} )} - {arrowLeft && renderContent(!arrowLeft)} + {left && renderContent(!left)}
) } From 7f199190bb325054d744c28274349d638a00d111 Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Mon, 26 Jun 2023 18:25:57 +0800 Subject: [PATCH 6/7] =?UTF-8?q?fix:=20=E5=90=88=E5=B9=B6next=E5=88=86?= =?UTF-8?q?=E6=94=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- migrate-from-v1.md | 117 ++++++++++++++++++++++----------------------- 1 file changed, 58 insertions(+), 59 deletions(-) diff --git a/migrate-from-v1.md b/migrate-from-v1.md index b9418b4d37..24a1bd1b11 100644 --- a/migrate-from-v1.md +++ b/migrate-from-v1.md @@ -1,6 +1,5 @@ # 从 v1 升级到 v2 -## 介绍 本文档将帮助您从 NutUI React `1.x` 升级到 NutUI React `2.x` 版本。 ## 升级步骤 @@ -9,10 +8,12 @@ npm install @nutui/nutui-react ``` 2. 处理不兼容更新 -NutUI React 1.x 到 NutUI React 2.x 存在一些不兼容更新，需要仔细阅读不兼容更新内容，并依次处理。 + +从 NutUI React 1.x 到 NutUI React 2.x 存在一些不兼容更新，需要仔细阅读不兼容更新内容，并依次处理。 ## 兼容更新 1. 组件样式处理 - - 新增了按需引入 css 文件的支持。可通过 babel-import-plugin 插件实现： + +新增了按需引入 css 文件的支持。可通过 babel-import-plugin 插件实现： ```json // Webpack .babelrc 或 babel.config.js中配置 plugins: [ @@ -28,12 +29,23 @@ plugins: [ ] ] ``` -2. 更完善的类型导出以及对类型增加 JSDoc 注释 +2. 更完善的类型导出以及对类型增加 `JSDoc` 注释 +3. 组件分类的调整 +在组件分类上，我们从交互维度上，和交互设计侧共同对 1.x 分类进行了基于信息结构的评审，并进行了子类梳理，完成重新分类，目标是更贴合交互场景的分布，易于查找组件。主要分布在： + +- 基础组件，将 `Popup` 组件移除，将 `Popup` 细分到操作反馈-引导提示部分； +- 布局组件，保持不变； +- 导航组件：将分页相关组件 `Pagination`、`Indicator` 移动到展示组件（考虑移动端的分页轻操作）；`Menu` 菜单移动到数据录入类-选择器子类（考虑 `Menu` 主要是作为筛选器）；将 `BackTop` 移至导航组件，作为锚点组件的一部分； +- 展示组件：将 `Badge`、`NoticeBar`、`Popover` 移至操作反馈-引导提示类，`Empty`、`Skeleton` 移至操作反馈-加载状态结果反馈中；`WaterMark`、`TrendArrow` 作为特性增强类组件放在特色组件中，待由该类组件的使用场景和范围确认是否变更分类；同时新增 `Audio`，将其同 `Video`、`ImagePreview`、`Swiper` 一同归为展示-多媒体类； +- 操作反馈类，新增 `Skeleton`、`Empty`（加载结果反馈类），`Popover`、`Notify`、`NoticeBar`、`Popup` （引导提示类）6个组件；同时去除 `BackTop`（导航组件-锚点类）、`Switch`（数据录入-选择器）、`Audio``（展示-多媒体）；在此基础上，未来会考虑增加 ResultPage`，整合错误状态、空状态等反馈状态，该组件在考虑中；同时考虑增加加载状态 `Loading` 组件。版本待定。 +- 数据录入类，主要分为两大类-输入及选择器。在输入中增加 `Signature`，该组件在 `Form` 表单中的应用范围日渐广泛，从特色组件中移入到数据录入部分；选择器中增加 `Switch`、`Menu`，及 `Address`。其中 `Signature` 和 `Address` 都是考虑其常用性，从特色中迁移到数据录入部分。 +- 特色组件，保留 `Barrage`、`Card`、`TimeSelect`，新增 `WaterMark`、`TrendArrow`。 + ## 不兼容更新 ## NutUI Icons 调整 -1.x 版本我们在实际开发过程中会发现 Button 只是引用了一个很小的 Loading Icon，但是全量引用了 IconFont 字体 ，会导致开发者的项目文件增大。我们在 NutUI React 2.x 中为解决此问题，重新定义了 Icon 组件，将所有的 Icons 抽离成单独的图标组件库 @nutui/icons-react ，使其可以进行按需加载使用。 因此一些组件之前关于 Icon 的相关 Props 将被移除，需要使用插槽或者传递一个 Component 组件的 Props 进行使用。 受影响的组件如下： +1.x 版本我们在实际开发过程中会发现 `Button` 只是引用了一个很小的 Loading Icon，但是全量引用了 IconFont 字体 ，会导致开发者的项目文件增大。我们在 NutUI React 2.x 中为解决此问题，重新定义了 Icon 组件，将所有的 Icons 抽离成单独的图标组件库 @nutui/icons-react（Taro 适配下为 @nutui/icons-react-taro） ，使其可以进行按需加载使用。 因此一些组件之前关于 Icon 的相关 Props 将被移除，需要使用插槽或者传递一个 Component 组件的 Props 进行使用。 受影响的组件如下： - Avatar - Button - ImagePreview @@ -60,17 +72,41 @@ plugins: [ - TrendArrow 如果你的项目中使用了这些组件，请仔细阅读文档并进行升级。 + ## 组件名称调整 +本次暂无组件名称变更。 ## 组件 API 调整 -在 NutUI React 不断迭代的过程中，我们发现一些组件在设计时有不合理的地方，除了受 Icon 变更的组件以外，我们也对一些组件部分 API 进行了调整。 +在 2.0 版本中，我们重点对组件 API 进行了评审和修订，使属性和方法命名更贴合常用的命名习惯及 React 语言规范，目标希望开发者在使用组件时得心应手。我们的思路大体如下： + +### 属性定义 +本次升级重点关注属性的命名方面，从 1.x 的 610 个属性精简为 410 个，更精简、更规范；同时增强属性的类型范围，提升自定义能力。 + +- 对同一属性进行统一描述，比如： + - 缩写类会改为全拼，如 `desc`、`descSlot`、`description` 统一为 `description` + - 能使用名词或形容词的优先使用该类词性，一个词能说明白的不用两个词。 + - 如 `wrap`、`wrapable` 统一为 `wrap` + - 如将 `isXxx` 统一为 `xxx`，如 `isVisible`、`isDeletable` 等，可直接使用 `visible`、`deletable` 等，形容词化 + - 如`showXxx` 尽量统一为 `xxx`，名词化。【部分属性待优化。】 + - 如 `roundRadius` 改为 `radius` ，`columnNum` 改为 `columns`等 + - `onClickXxx` 统一为 `onXxxClick` + - `modelValue` 统一为 `value`，并增加支持 `defaultValue`，支持受控与非受控模式 + - 对于标识位置、对齐等类的属性，将属性名变更为其上一层的属性定义，如 `center`会改为 `align`、`vertical`，改为 `direction`，像标记距离的，如 `top`、`bottom`、`distance` 等，会改为 `threshold` + - 不规范的定义如 `okBtn`、`okText` 这种，会改为 `confirmXxx` +- 扩充属性的类型。如 `title` 的类型从 `string` 扩充为 `React.ReactNode`，增强自定义内容；其中有涉及合并属性的，统一用最简命名来定义属性；如 `title`、`titleSlot` 合并为 `title`，再扩充属性类型。 +- 对于 `xxClass`、`xxStyle`类的属性，移除，可使用 `className` 、`style` 来实现。 +- 移除与样式有关的属性，除基础组件的样式属性及部分实现起来较为复杂的样式属性外，大多数样式属性被移除，可通过样式变量来实现。 +- 将普遍认同可内置的属性或不怎么使用的属性，直接内置，去掉属性设置。 + +### 组件实现 + + ### 基础组件 #### Button - 删除 `plain`，通过 `fill="outline"` 实现 - 增加 `ref`，对外暴露组件内 `button` 元素 #### Cell - - `subTitle` 重命名为 `description`，类型修改为 `React.Node` - `desc` 重命名为 `extra`，类型修改为 `React.Node` - `roundRadius` 重命名为 `radius` @@ -105,7 +141,7 @@ plugins: [ - `closeOnClickOverlay` 重命名为 `closeOnOverlayClick` - `onOpened` 和 `onClosed` 改为 `afterShow` 和 `afterClose`，继承自`Overlay`，用于完全关闭后触发的回调和完全展示后触发的回调 - `destroyOnClose` 的描述进行了修订，改为：“组件不可见时，卸载内容”，并把其默认值改为了`false` -- `onClickCloseIcon` 和 `onClickOverlay` 两个方法，增加布尔判断，如返回false 或 未定义返回值时，将不再关闭 Popup；默认值为 `true`；在demo中已增加相应示例 +- `onClickCloseIcon` 和 `onClickOverlay` 两个方法，增加布尔判断，如返回false 或 未定义返回值时，将不再关闭 Popup；默认值为 `true`；在demo中已增加相应示例；同时，两者的名字变更为 `onCloseIconClick`、`onOverlayClick` ### 布局组件 #### Divider @@ -124,6 +160,8 @@ plugins: [ - `acceptKey` 重命名为 `floorKey` - `indexList` 重命名为 `list` - `isSticky` 重命名为 `sticky` +- `onClickIndex` 重命名为 `onIndexClick` +- `onClickItem` 重命名为 `onItemClick` - 新增`showKeys`，是否展示右侧导航 #### FixedNav - `unActiveText` 重命名为 `inactiveText` @@ -152,6 +190,7 @@ plugins: [ - `desc` 重命名为 `right`，类型修改为 `React.Node` - 新增 `left`，左侧内容，渲染在返回区域的右侧 - 新增 `back`，返回区域内容 +- `onClickBack` 重命名为 `onBackClick` - 移除 `title`，通过 `children` 实现 - 移除 `leftText` `leftShow`，通过 `back`、`left`实现 - `safeAreaInsetTop` 重命名为 `safeArea` @@ -182,7 +221,8 @@ plugins: [ - 使用方式修改为 `Tabbar.Item` - `icon` 类型改为 `ReactNode`，移除其他 `icon` 关联属性 - 移除 `href`，通过 `onSwitch` 事件控制链接与路由跳转 -- 移除 `num`，支持传入所有 Badge Props +- 移除 `num`，支持传入所有 `Badge` Props +- 移除 `color`，使用父元素的 `activeColor`，保持同样的 `active` 状态 #### Tabs - 删除 `background`，通过 `className` 或 `style` 控制 - 删除 `titleScroll`, 默认支持滚动 @@ -212,7 +252,7 @@ plugins: [ - `onDay` 更名为 `renderDay` - `onTopInfo` 更名为 `renderDayTop` - `onBottomInfo` 更名为 `renderDayBottom` -- `onSelected` 更名为 `onClickDay` +- `onSelected` 更名为 `onDayClick` - `onChoose` 更名为 `onConfirm` - `onYearMonthChange` 更名为 `onPageChange` @@ -307,6 +347,7 @@ plugins: [ - 移除 `activeColor`、`voidColor`、`iconSize`，通过 `checkedIcon`、`uncheckedIcon` 实现 - 增加受控 `value` 与非受控 `defaultValue`，移除 `modelValue` #### SearchBar +- `onClickInput` 重命名为 `onInputClick` - 删除 `clearSize`，样式默认 - 删除 `background`，使用 CSS 变量 `--nutui-searchbar-background` 实现 - 删除 `inputBackground`，使用 CSS 变量 `--nutui-searchbar-input-background` 实现 @@ -352,7 +393,7 @@ plugins: [ - `onBeforeXhrUpload` 重命名为 `beforeXhrUpload` - `onBeforeDelete` 重命名为 `beforeDelete` - `onRemove` 重命名为 `onDelete` -- 增加 `imageFit`，用于图片填充模式 +- 增加 `fit`，用于图片填充模式 - 增加 `value`，用于受控传值 - 移除 `uploadIconSize`，可通过 icon 属性传入自定义 icon 或借助 CSS Variables 修改 icon 大小 @@ -370,7 +411,7 @@ plugins: [ - `name`，列表项的标题key - `description`，列表项的描述key - `danger`，列表项中提醒用户重点关注的操作 - - `disable`，列表项中禁用项 + - `disabled`，列表项中禁用项 #### BackTop - `elId` 重命名为 `target` - 移除 `right`、`bottom`，通过 style 传入，增加支持 `left`、`top` @@ -390,7 +431,7 @@ plugins: [ - 修改 `onClosed` 为 `onClose`，规范命名，关闭时触发。 - 修改 `onClickSelf` 为 `onClick`，语义不变，仍表示点击弹框自身时触发事件。 - 增加 `overlayStyle` 和 `overlayClassName`，用来配置 Overlay 组件样式。 -- 增加 onClickOverlay，支持点击overlay时，触发事件。 +- 增加 `onOverlayClick`，支持点击overlay时，触发事件。 #### Drag #### InfiniteLoading @@ -472,48 +513,6 @@ plugins: [ - `pathColor` 重命名为 `background` #### Collapse -<<<<<<< HEAD -#### CountDown -#### Ellipsis -#### Empty -#### ImagePreview -#### NoticeBar -#### Popover -#### Price -#### Progress -- percentage 重命名为 percent，受控 -- 移除 isShowPercentage，可以自定义传入文案 -- 移除 textWidth，可以自定义传入内容的宽度 -- strokeColor 重命名为 color -- fillColor 重命名为 background -- 移除 size，通过 strokeWidth、css 变量实现尺寸自定义 -- status 重命名为 animated，表示是否展示动画效果 -- 移除 textBackground，通过 css 实现 -- 移除 textColor，通过 css 实现 -- 移除 textInside，仅保留内显功能 -- 移除 textType、icon，通过 children 传入自定义 ReactNode，不再区分类型 -#### Skeleton -#### Steps -#### Swiper -#### Table -#### Tag - -#### TrendArrow - -- `rate` 重命名为 `value` -- `showSign` 重命名为 `symbol` -- `showZero` 重命名为 `zero` -- `syncTextColor` 重命名为 `syncColor` -- `textColor` 重命名为 `color` -- 删除 `iconSize`, 图标自定义传入 -- 删除 `upIconName`, 替换为 `riseIcon`, 类型为 `React.Node` 类型 -- 删除 `downIconName`, 替换为 `downIcon`, 类型为 `React.Node` 类型 - -#### Video -#### VirtualList -#### WaterMark -======= ->>>>>>> next - 新增 `defaultActiveName` 非受控 - `activeName` 改为受控方式 @@ -557,20 +556,20 @@ plugins: [ - `background` 删除，使用 CSS 变量，之前已支持 - `wrapable` 更名为 `wrap` - `standTime` 更名为 `duration` +- `onClickItem` 更名为 `onItemClick` - `complexAm` 废弃 #### Popover - 废除 `theme` 属性，可以通过css变量 `--nutui-brand-color` 控制暗黑模式 - 新增 `showArrow` 属性，用于是否显示小箭头 -- 新增 `closeOnClickAction` 属性，用于是否在点击选项后关闭 -- 新增 `closeOnClickOutside` 属性，用于是否在点击外部元素后关闭菜单 +- 新增 `closeOnActionClick` 属性，用于是否在点击选项后关闭 +- 新增 `closeOnOutsideClick` 属性，用于是否在点击外部元素后关闭菜单 - 新增 `targetId` 属性，用于自定义目标元素 id - 新增 `onOpen` 属性，用于点击菜单时触发 - 新增 `onClose` 属性，用于关闭菜单时触发 - `onChoose` 重命名为 `onSelect` - 继承Popup组件的 `overlayStyle` 、`overlayClassName` 、`overlay` 、`closeOnOverlayClick` 属性。 - #### Price - `decimalDigits` 重命名为 `digits` @@ -685,4 +684,4 @@ plugins: [ - `onPannelChange` 重命名为 `onDateChange` - 移除 `dates`、`times`，合并为 `options`，重新设计了数据结构 - 增加 `optionKey` 用于自定义数据中的关键字 -- 移除 `currentKey`，新增 `defaultValue` 用于设置默认选项，支持时间选择 +- 移除 `currentKey`，新增 `defaultValue` 用于设置默认选项，支持时间选择 \ No newline at end of file From 174f975b39c9537c5a80f8c91df5d993d96646dd Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Tue, 27 Jun 2023 16:31:41 +0800 Subject: [PATCH 7/7] =?UTF-8?q?fix:=20=E5=90=8C=E6=AD=A5=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- migrate-from-v1.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/migrate-from-v1.md b/migrate-from-v1.md index 24a1bd1b11..41788de6ea 100644 --- a/migrate-from-v1.md +++ b/migrate-from-v1.md @@ -633,11 +633,12 @@ plugins: [ - `rate` 重命名为 `value` - `showSign` 重命名为 `symbol` - `showZero` 重命名为 `zero` -- `syncTextColor` 重命名为 `syncColor` +- `arrowLeft` 重命名为 `left` +- `syncTextColor` 重命名为 `sync` - `textColor` 重命名为 `color` - `upIconName` 重命名为 `riseIcon`，类型修改为 `React.Node` -- `downIconName` 重重命名为命为 `downIcon`，类型修改为 `React.Node` -- 移除 `iconSize`，通过`riseIcon`、`downIcon`自定义传入icon大小 +- `downIconName` 重命名为 `dropIcon`，类型修改为 `React.Node` +- 移除 `iconSize`，通过`riseIcon`、`dropIcon`自定义传入icon大小 #### Video - 在 `Taro` 下新增video的适配