refactor: animate-v2.0 (#940)

jdf2e · Apr 26, 2023 · e95f288 · e95f288
1 parent 1e7126a
commit e95f288
Show file tree

Hide file tree

Showing 20 changed files with 151 additions and 154 deletions.
diff --git a/migrate-from-v1.md b/migrate-from-v1.md
@@ -59,7 +59,6 @@
 #### Divider
 - 删除 `dashed`, 通过 style 属性实现
 - 删除 `hairline`, 默认为true
-- `styles` 重命名为 `style`
 #### Grid
 #### Layout
 #### Sticky
@@ -177,6 +176,8 @@
 
 ### 展示组件
 #### Animate
+- `className` 属性通过继承实现
+- `style` 属性通过继承实现
 #### AnimatingNumbers
 #### Audio
 - url 重命名为 src

diff --git a/src/packages/animate/animate.taro.tsx b/src/packages/animate/animate.taro.tsx
@@ -1,22 +1,24 @@
 import React, { useState, FunctionComponent } from 'react'
 import { AnimateType, AnimateAction } from './type'
 import classNames from 'classnames'
-import bem from '@/utils/bem'
 
-export interface AnimateProps {
+import { BasicComponent, ComponentDefaults } from '@/utils/typings'
+
+export interface AnimateProps extends BasicComponent {
   type: AnimateType
   action: AnimateAction
   loop: boolean
-  className: string
-  style: React.CSSProperties
   onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
 }
 const defaultProps = {
+  ...ComponentDefaults,
   type: 'shake',
   action: 'initial',
   loop: false,
   onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {},
 } as AnimateProps
+
+const classPrefix = `nut-animate`
 export const Animate: FunctionComponent<
   Partial<AnimateProps> & React.HTMLAttributes<HTMLDivElement>
 > = (props) => {
@@ -27,10 +29,9 @@ export const Animate: FunctionComponent<
 
   const [clicked, setClicked] = useState(false)
 
-  const b = bem('animate')
   const classes = classNames({
     'nut-ani-container': true,
-    [`${b('')}-${type}`]: action === 'initial' || clicked ? type : false,
+    [`${classPrefix}-${type}`]: action === 'initial' || clicked ? type : false,
     loop: loop,
   })
   const cls = classNames(classes, className)

diff --git a/src/packages/animate/animate.tsx b/src/packages/animate/animate.tsx
@@ -1,22 +1,24 @@
 import React, { useState, FunctionComponent } from 'react'
 import classNames from 'classnames'
 import { AnimateType, AnimateAction } from './type'
-import bem from '@/utils/bem'
 
-export interface AnimateProps {
+import { BasicComponent, ComponentDefaults } from '@/utils/typings'
+
+export interface AnimateProps extends BasicComponent {
   type: AnimateType
   action: AnimateAction
   loop: boolean
-  className: string
-  style: React.CSSProperties
   onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
 }
 const defaultProps = {
+  ...ComponentDefaults,
   type: 'shake',
   action: 'initial',
   loop: false,
   onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {},
 } as AnimateProps
+
+const classPrefix = `nut-animate`
 export const Animate: FunctionComponent<
   Partial<AnimateProps> & React.HTMLAttributes<HTMLDivElement>
 > = (props) => {
@@ -27,10 +29,9 @@ export const Animate: FunctionComponent<
 
   const [clicked, setClicked] = useState(false)
 
-  const b = bem('animate')
   const classes = classNames({
     'nut-ani-container': true,
-    [`${b('')}-${type}`]: action === 'initial' || clicked ? type : false,
+    [`${classPrefix}-${type}`]: action === 'initial' || clicked ? type : false,
     loop,
   })
   const cls = classNames(classes, className)

diff --git a/src/packages/animate/doc.en-US.md b/src/packages/animate/doc.en-US.md
@@ -1,16 +1,17 @@
 # Animate 
 
-### Intro
+## Intro
 
 Add animation effects to child elements
 
-### Install
+## Install
 
 ```ts
 // react
 import { Animate } from '@nutui/nutui-react';
 ```
 
+## Demo
 ### Clicking to trigger
 
 :::demo
@@ -124,23 +125,19 @@ export default AnimateDemo
 :::
 
 
-## API
+## Animate
 
 ### Props
 
-| Attribute         | Description                             | Type   | Default           |
+| Property         | Description                             | Type   | Default           |
 |--------------|----------------------------------|--------|------------------|
-| type         | For animation type, see the description of type value below               | string | `shake`                |
-| action         | Triggering method,'initial'-- initialization execution; ' Click'-- Click to execute              | string | `initial`             |
-| loop         | Whether to execute circularly. True： loop execution; False： execute once              | boolean | `false`               |
+| type         | For animation type, see the description of type value below               | `AnimateType` | `'shake'`                |
+| action         | Triggering method,'initial'-- initialization execution; ' Click'-- Click to execute              | `'initial'  \|  'click'` | `'initial'`             |
+| loop         | Whether to execute circularly. True： loop execution; False： execute once              | `boolean` | `false`               |
+| onClick  | Triggered when an element is clicked	 | `event: Event` |  `-`  |
 
-### Events
 
-| Event | Description           | Arguments     |
-|--------|----------------|--------------|
-| onClick  | Triggered when an element is clicked	 | `event: Event` |
-
-### Type value description
+### AnimateType value description
 
 |    Order  |    Type name     |      Description     |
 |:-------|:------- | :----------|

diff --git a/src/packages/animate/doc.md b/src/packages/animate/doc.md
@@ -1,16 +1,17 @@
 # Animate 动画/动效
 
-### 介绍
+## 介绍
 
 给子元素添加动画效果
 
-### 安装
+## 安装
 
 ```ts
 // react
 import { Animate } from '@nutui/nutui-react';
 ```
 
+## 代码演示
 ### 点击触发
 
 :::demo
@@ -124,23 +125,20 @@ export default AnimateDemo
 :::
 
 
-## API
+## Animate
+
 
 ### Props
 
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
-| type | 动画类型，见下方type值说明 | string | `shake` |
-| action | 触发方式，'initial'--初始化执行;  'click'--点击执行 | string | `initial` |
-| loop         | 是否循环执行。true-循环执行;false-执行一次 | boolean | `false`               |
-
-### Events
+| type | 动画类型，见下方type值说明 | `AnimateType` | `'shake'` |
+| action | 触发方式，'initial'--初始化执行;  'click'--点击执行 | `'initial'  \|  'click'` | `'initial'` |
+| loop         | 是否循环执行。true-循环执行;false-执行一次 | `boolean` | `false`               |
+| onClick  | 点击元素时触发 | `event: Event` |  `-`  |
 
-| 方法名 | 说明           | 回调参数     |
-|--------|----------------|--------------|
-| onClick  | 点击元素时触发 | `event: Event` |
 
-### type值说明
+### AnimateType值说明
 
 |    序号  |    参数名称     |      参数说明     |
 |:-------|:------- | :----------|

diff --git a/src/packages/animate/doc.taro.md b/src/packages/animate/doc.taro.md
@@ -1,15 +1,16 @@
 # Animate 动画/动效
 
-### 介绍
+## 介绍
 
 给子元素添加动画效果
 
-### 安装
+## 安装
 
 ```ts
 import { Animate } from '@nutui/nutui-react-taro';
 ```
 
+## 代码演示
 ### 点击触发
 
 :::demo
@@ -129,17 +130,13 @@ export default AnimateDemo
 
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
-| type         | 动画类型，见下方type值说明               | string | `shake`                |
-| action         | 触发方式，'initial'--初始化执行;  'click'--点击执行              | string | `initial`             |
-| loop         | 是否循环执行。true-循环执行;false-执行一次              | boolean | `false`               |
+| type         | 动画类型，见下方type值说明               | `AnimateType` | `'shake'`                |
+| action         | 触发方式，'initial'--初始化执行;  'click'--点击执行              | `'initial'  \|  'click'` | `'initial'`             |
+| loop         | 是否循环执行。true-循环执行;false-执行一次              | `boolean` | `false`               |
+| onClick  | 点击元素时触发 | `event: Event` | `-` |
 
-### Events
 
-| 方法名 | 说明           | 回调参数     |
-|--------|----------------|--------------|
-| onClick  | 点击元素时触发 | `event: Event` |
-
-### type值说明
+### AnimateType值说明
 
 |    序号  |    参数名称     |      参数说明     |
 |:-------|:------- | :----------|

diff --git a/src/packages/divider/divider.taro.tsx b/src/packages/divider/divider.taro.tsx
@@ -1,15 +1,16 @@
 import React, { FunctionComponent } from 'react'
 import classNames from 'classnames'
 
+import { BasicComponent, ComponentDefaults } from '@/utils/typings'
+
 export type ContentPositionType = 'left' | 'center' | 'right'
 export type DirectionType = 'horizontal' | 'vertical'
-export interface DividerProps {
+export interface DividerProps extends BasicComponent {
   contentPosition: ContentPositionType
-  style?: React.CSSProperties
-  className?: string
   direction?: DirectionType
 }
 const defaultProps = {
+  ...ComponentDefaults,
   contentPosition: 'center',
   direction: 'horizontal',
 } as DividerProps

diff --git a/src/packages/divider/divider.tsx b/src/packages/divider/divider.tsx
@@ -1,15 +1,16 @@
 import React, { FunctionComponent } from 'react'
 import classNames from 'classnames'
 
+import { BasicComponent, ComponentDefaults } from '@/utils/typings'
+
 export type ContentPositionType = 'left' | 'center' | 'right'
 export type DirectionType = 'horizontal' | 'vertical'
-export interface DividerProps {
+export interface DividerProps extends BasicComponent {
   contentPosition: ContentPositionType
-  style?: React.CSSProperties
-  className?: string
   direction?: DirectionType
 }
 const defaultProps = {
+  ...ComponentDefaults,
   contentPosition: 'center',
   direction: 'horizontal',
 } as DividerProps

diff --git a/src/packages/divider/doc.en-US.md b/src/packages/divider/doc.en-US.md
@@ -147,15 +147,14 @@ export default App;
 :::
 
 
-## API
+## Divider
 
 ### Props
 
 | Property            | Description                       | Type    | Default |
 | --------------- | ----------------------------- | ------- | ------ |
-| contentPosition | Content position, can be set to left or right or center  | string  | `center` |
-| style          | Modify custom styles                | CSSProperties     | -      |
-| direction           | The direction of divider, can be set to horizontal or vertical            | string     | `horizontal`      |
+| contentPosition | Content position, can be set to left or right or center  | `'left'  \|  'center'  \|  'right'`  | `center` |
+| direction           | The direction of divider, can be set to horizontal or vertical            | `'horizontal'  \|  'vertical'`     | `horizontal`      |
 
 
 ## Theming

diff --git a/src/packages/divider/doc.md b/src/packages/divider/doc.md
@@ -146,15 +146,14 @@ export default App;
 :::
 
 
-## API
+## Divider
 
 ### Props
 
 | 参数              | 说明                          | 类型    | 默认值 |
 |-----------------| ----------------------------- | ------- | ------ |
-| contentPosition | 内容位置，可选值为 left right center | string  | `center` |
-| style          | 修改自定义样式                | CSSProperties     | -      |
-| direction   | 水平还是垂直类型,可选值为 horizontal vertical               | string     | `horizontal`      |
+| contentPosition | 内容位置，可选值为 left right center | `'left'  \|  'center'  \|  'right'`  | `center` |
+| direction   | 水平还是垂直类型,可选值为 horizontal vertical               | `'horizontal'  \|  'vertical'`     | `horizontal`      |
 
 
 ## 主题定制

diff --git a/src/packages/divider/doc.taro.md b/src/packages/divider/doc.taro.md
@@ -145,15 +145,14 @@ export default App;
 :::
 
 
-## API
+## Divider
 
 ### Props
 
 | 参数              | 说明                          | 类型    | 默认值 |
 |-----------------| ----------------------------- | ------- | ------ |
-| contentPosition | 内容位置，可选值为 left right center | string  | `center` |
-| style          | 修改自定义样式                | CSSProperties     | -      |
-| direction   | 水平还是垂直类型,可选值为 horizontal vertical               | string     | `horizontal`      |
+| contentPosition | 内容位置，可选值为 left right center | `'left'  \|  'center'  \|  'right'`  | `center` |
+| direction   | 水平还是垂直类型,可选值为 horizontal vertical               | `'horizontal'  \|  'vertical'`     | `horizontal`      |
 
 
 ## 主题定制

diff --git a/src/packages/inputnumber/doc.en-US.md b/src/packages/inputnumber/doc.en-US.md
@@ -238,29 +238,29 @@ export default App;
 ```
 :::
 
-## API
+## InputNumber
 
 ### Props
 
 | Property           | Description                       | Type           | Default     |
 |----------------|----------------------------|----------------|------------|
-| allowEmpty        | Whether to allow the content to be empty                     | boolean |   false          |
-| defaultValue        | Defaults                     | string \| number |  0         |
-| value        | current value, controlled value                   | string \| number | -          |
-| min            | Minimum limit                 | string \| number | `1`        |
-| max            | Maximum limit                 | string \| number | `9999` |
-| step           | step                       | string \| number | `1`        |
-| digits | Set reserved decimal places           | string \| number | `0`        |
-| disabled       | Disable all features               | boolean        | `false`      |
-| readonly       | Read only status disables input box operation behavior | boolean        | `false`      |
+| allowEmpty        | Whether to allow the content to be empty                     | `boolean` |   `false`          |
+| defaultValue        | Defaults                     | `string \| number` |  `0`        |
+| value        | current value, controlled value                   | `string \| number` | `-`          |
+| min            | Minimum limit                 | `string \| number` | `1`        |
+| max            | Maximum limit                 | `string \| number` | `9999` |
+| step           | step                       | `string \| number` | `1`        |
+| digits | Set reserved decimal places           | `string \| number` | `0`        |
+| disabled       | Disable all features               | `boolean`        | `false`      |
+| readonly       | Read only status disables input box operation behavior | `boolean`        | `false`      |
 | async       | Support for asynchronous modification | boolean        | `false`      |
-| formatter        | Specifies the format of the value displayed in the input box | function(value: number \| string): string        | -     |
-| onPlus        | Triggered when the Add button is clicked     | `(e: MouseEvent) => void`                   | - |
-| onMinus     | Triggered when the decrease button is clicked     | `(e: MouseEvent) => void`                   | - |
-| onOverlimit  | Triggered when an unavailable button is clicked | `(e: MouseEvent) => void`                   | - |
-| onChange      | Triggered when the value changes           | `(param: string \| number, e: MouseEvent \| ChangeEvent<HTMLInputElement>) => void` | - |
-| onBlur        | Triggered when the input box blur   | `(e: ChangeEvent<HTMLInputElement>) => void`                   | - |
-| onFocus      | Triggered when the input box focus   | `(e: FocusEvent<HTMLInputElement>) => void`                   | - |
+| formatter        | Specifies the format of the value displayed in the input box | `function(value: number \| string): string`        | `-`     |
+| onPlus        | Triggered when the Add button is clicked     | `(e: MouseEvent) => void`                   | `-` |
+| onMinus     | Triggered when the decrease button is clicked     | `(e: MouseEvent) => void`                   | `-` |
+| onOverlimit  | Triggered when an unavailable button is clicked | `(e: MouseEvent) => void`                   | `-` |
+| onChange      | Triggered when the value changes           | `(param: string \| number, e: MouseEvent \| ChangeEvent<HTMLInputElement>) => void` | `-` |
+| onBlur        | Triggered when the input box blur   | `(e: ChangeEvent<HTMLInputElement>) => void`                   | `-` |
+| onFocus      | Triggered when the input box focus   | `(e: FocusEvent<HTMLInputElement>) => void`                   | `-` |
 
 
 ## Theming