Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions src/packages/switch/demo.taro.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,15 @@ import Demo4 from './demos/taro/demo4'
import Demo5 from './demos/taro/demo5'
import Demo6 from './demos/taro/demo6'
import Demo7 from './demos/taro/demo7'
import Demo8 from './demos/taro/demo8'

const SwitchDemo = () => {
const [translated] = useTranslate({
'zh-CN': {
basic: '非受控',
disabled: '禁用状态',
asyncControl: '受控',
loadingControl: 'loading 态受控',
customColor: '自定义颜色',
supportText: '支持文字',
supportIcon: '支持Icon',
Expand All @@ -26,6 +28,7 @@ const SwitchDemo = () => {
basic: '非受控',
disabled: '禁用狀態',
asyncControl: '受控',
loadingControl: 'loading 態受控',
customColor: '自定義顏色',
supportText: '支持文字',
supportIcon: '支持Icon',
Expand All @@ -35,6 +38,7 @@ const SwitchDemo = () => {
basic: 'Uncontrolled',
disabled: 'Disabled',
asyncControl: 'controlled',
loadingControl: 'Controlled with loading',
customColor: 'Custom Color',
supportText: 'Support Text',
supportIcon: 'Support Icon',
Expand All @@ -49,6 +53,8 @@ const SwitchDemo = () => {
<Demo1 />
<View className="h2">{translated.asyncControl}</View>
<Demo2 />
<View className="h2">{translated.loadingControl}</View>
<Demo8 />
<View className="h2">{translated.disabled}</View>
<Demo3 />
<View className="h2">{translated.supportText}</View>
Expand Down
6 changes: 6 additions & 0 deletions src/packages/switch/demo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,15 @@ import Demo4 from './demos/h5/demo4'
import Demo5 from './demos/h5/demo5'
import Demo6 from './demos/h5/demo6'
import Demo7 from './demos/h5/demo7'
import Demo8 from './demos/h5/demo8'

const SwitchDemo = () => {
const [translated] = useTranslate({
'zh-CN': {
basic: '非受控',
disabled: '禁用状态',
asyncControl: '受控',
loadingControl: 'loading 态受控',
customColor: '自定义颜色',
supportText: '支持文字',
supportIcon: '支持Icon',
Expand All @@ -23,6 +25,7 @@ const SwitchDemo = () => {
basic: '非受控',
disabled: '禁用狀態',
asyncControl: '受控',
loadingControl: 'loading 態受控',
customColor: '自定義顏色',
supportText: '支持文字',
supportIcon: '支持Icon',
Expand All @@ -32,6 +35,7 @@ const SwitchDemo = () => {
basic: 'Uncontrolled',
disabled: 'Disabled',
asyncControl: 'controlled',
loadingControl: 'Controlled with loading',
customColor: 'Custom Color',
supportText: 'Support Text',
supportIcon: 'Support Icon',
Expand All @@ -45,6 +49,8 @@ const SwitchDemo = () => {
<Demo1 />
<h2>{translated.asyncControl}</h2>
<Demo2 />
<h2>{translated.loadingControl}</h2>
<Demo8 />
<h2>{translated.disabled}</h2>
<Demo3 />
<h2>{translated.supportText}</h2>
Expand Down
35 changes: 35 additions & 0 deletions src/packages/switch/demos/h5/demo8.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React, { useState } from 'react'
import { Cell, Switch, Toast } from '@nutui/nutui-react'

const Demo8 = () => {
const [checkedAsync, setCheckedAsync] = useState(true)
const [externalLoading, setExternalLoading] = useState(false)

const mockRequest = (): Promise<void> => {
return new Promise((resolve) => {
setTimeout(() => {
resolve()
}, 2000)
})
}

const onChangeAsync = async (value: boolean) => {
Toast.show(`2秒后异步触发 ${value}`)
await mockRequest()
setCheckedAsync(value)
// setExternalLoading(false)
}
return (
<Cell>
<Switch
loading={externalLoading}
onLoadingChange={async (loading: boolean) => {
setExternalLoading(loading)
}}
checked={checkedAsync}
onChange={(value) => onChangeAsync(value)}
/>
</Cell>
)
}
export default Demo8
46 changes: 46 additions & 0 deletions src/packages/switch/demos/taro/demo8.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import React, { useState } from 'react'
import { Cell, Switch, Toast } from '@nutui/nutui-react-taro'

const Demo8 = () => {
const [checkedAsync, setCheckedAsync] = useState(true)
const [value, setValue] = useState(false)
const [showToast, setShowToast] = useState(false)
const [externalLoading, setExternalLoading] = useState(false)
const mockRequest = (): Promise<void> => {
return new Promise((resolve) => {
setTimeout(() => {
resolve()
}, 2000)
})
}

const onChangeAsync = async (value: boolean) => {
setValue(value)
setShowToast(true)
await mockRequest()
setCheckedAsync(value)
// setExternalLoading(false)
}
return (
<>
<Cell>
<Switch
loading={externalLoading}
onLoadingChange={async (loading: boolean) => {
setExternalLoading(loading)
}}
checked={checkedAsync}
onChange={(value) => onChangeAsync(value)}
/>
</Cell>
<Toast
content={`2秒后异步触发 ${value}`}
visible={showToast}
onClose={() => {
setShowToast(false)
}}
/>
</>
)
}
export default Demo8
14 changes: 12 additions & 2 deletions src/packages/switch/doc.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,14 @@ import { Switch } from '@nutui/nutui-react'

:::

### loading 态受控

:::demo

<CodeBlock src='h5/demo8.tsx'></CodeBlock>

:::
Comment on lines +29 to +35
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

英文文档中保留了中文标题,需要翻译

英文文档中的标题 "loading 态受控" 未翻译成英文,应该使用 "Controlled with loading" 以保持一致性。

-### loading 态受控
+### Controlled with loading
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
### loading 态受控
:::demo
<CodeBlock src='h5/demo8.tsx'></CodeBlock>
:::
### Controlled with loading
:::demo
<CodeBlock src='h5/demo8.tsx'></CodeBlock>
:::


### disabled status

:::demo
Expand Down Expand Up @@ -77,8 +85,10 @@ import { Switch } from '@nutui/nutui-react'
| disabled | Disabled | `boolean` | `false` |
| activeText | Text description when opening | `ReactNode` | `-` |
| inactiveText | Text description when closed | `ReactNode` | `-` |
| loadingIcon | Controlled loading state icon | `ReactNode` | `<Loading1 />` |
| onChange | Trigger when switching switches | `onChange:(value: boolean, event: Event)` | `-` |
| loadingIcon | Control the loading state icon, disable the loading state when a null | `ReactNode` | `<Loading1 />` |
| loading | loading state, controlled | `boolean` | `-` |
| onLoadingChange | Triggered when switching loading | `onLoadingChange:(value: boolean)` | `-` |
| onChange | Trigger when switching switches | `onChange:(value: boolean)` | `-` |

## Theming

Expand Down
14 changes: 12 additions & 2 deletions src/packages/switch/doc.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,14 @@ import { Switch } from '@nutui/nutui-react'

:::

### loading 态受控

:::demo

<CodeBlock src='h5/demo8.tsx'></CodeBlock>

:::

### 禁用状态

:::demo
Expand Down Expand Up @@ -77,8 +85,10 @@ import { Switch } from '@nutui/nutui-react'
| disabled | 禁用状态 | `boolean` | `false` |
| activeText | 打开时文字描述 | `ReactNode` | `-` |
| inactiveText | 关闭时文字描述 | `ReactNode` | `-` |
| loadingIcon | 受控 loading 态图标 | `ReactNode` | `<Loading1 />` |
| onChange | 切换开关时触发 | `onChange:(value: boolean, event: Event)` | `-` |
| loadingIcon | 控制加载状态的图标,传入空值时禁用 loading 态 | `ReactNode` | `<Loading1 />` |
| loading | loading 态,受控 | `boolean` | `-` |
| onLoadingChange | 切换 loading 态时触发 | `onLoadingChange:(value: boolean)` | `-` |
| onChange | 切换开关时触发 | `onChange:(value: boolean)` | `-` |

## 主题定制

Expand Down
14 changes: 12 additions & 2 deletions src/packages/switch/doc.taro.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,14 @@ import { Switch } from '@nutui/nutui-react-taro'

:::

### loading 态受控

:::demo

<CodeBlock src='taro/demo8.tsx'></CodeBlock>

:::

### 禁用状态

:::demo
Expand Down Expand Up @@ -77,8 +85,10 @@ import { Switch } from '@nutui/nutui-react-taro'
| disabled | 禁用状态 | `boolean` | `false` |
| activeText | 打开时文字描述 | `ReactNode` | `-` |
| inactiveText | 关闭时文字描述 | `ReactNode` | `-` |
| loadingIcon | 受控 loading 态图标 | `ReactNode` | `<Loading1 />` |
| onChange | 切换开关时触发 | `onChange:(value: boolean, event: Event)` | `-` |
| loadingIcon | 控制加载状态的图标,传入空值时禁用 loading 态 | `ReactNode` | `<Loading1 />` |
| loading | loading 态,受控 | `boolean` | `-` |
| onLoadingChange | 切换 loading 态时触发 | `onLoadingChange:(value: boolean)` | `-` |
| onChange | 切换开关时触发 | `onChange:(value: boolean)` | `-` |

## 主题定制

Expand Down
14 changes: 12 additions & 2 deletions src/packages/switch/doc.zh-TW.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,14 @@ import { Switch } from '@nutui/nutui-react'

:::

### loading 態受控

:::demo

<CodeBlock src='h5/demo8.tsx'></CodeBlock>

:::

### 禁用狀態

:::demo
Expand Down Expand Up @@ -77,8 +85,10 @@ import { Switch } from '@nutui/nutui-react'
| disabled | 禁用狀態 | `boolean` | `false` |
| activeText | 打開時文字描述 | `ReactNode` | `-` |
| inactiveText | 關閉時文字描述 | `ReactNode` | `-` |
| loadingIcon | 受控 loading 態圖標 | `ReactNode` | `<Loading1 />` |
| onChange | 切換開關時觸發 | `onChange:(value: boolean, event: Event)` | `-` |
| loadingIcon | 控制加載狀態的圖標,當傳入空值時禁用 loading 狀態 | `ReactNode` | `<Loading1 />` |
| loading | loading 態,受控 | `boolean` | `-` |
| onLoadingChange | 切換 loading 態時觸發 | `onLoadingChange:(value: boolean)` | `-` |
| onChange | 切換開關時觸發 | `onChange:(value: boolean)` | `-` |

## 主題定製

Expand Down
29 changes: 21 additions & 8 deletions src/packages/switch/switch.taro.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React, { FunctionComponent, useEffect, useState } from 'react'

import { View } from '@tarojs/components'
import classNames from 'classnames'
import { Loading1 } from '@nutui/icons-react-taro'
Expand All @@ -14,6 +13,8 @@ const defaultProps = {
activeText: '',
inactiveText: '',
loadingIcon: <Loading1 />,
loading: undefined,
onLoadingChange: (loading: boolean) => {},
} as TaroSwitchProps
export const Switch: FunctionComponent<Partial<TaroSwitchProps>> = (props) => {
const {
Expand All @@ -26,6 +27,8 @@ export const Switch: FunctionComponent<Partial<TaroSwitchProps>> = (props) => {
className,
style,
onChange,
loading: propLoading,
onLoadingChange,
...rest
} = {
...defaultProps,
Expand All @@ -38,12 +41,21 @@ export const Switch: FunctionComponent<Partial<TaroSwitchProps>> = (props) => {
defaultValue: defaultChecked,
})

const [internalLoading, setInternalLoading] = useState(false)
const loading = propLoading !== undefined ? propLoading : internalLoading

const setLoading = (val: boolean) => {
if (propLoading !== undefined) {
onLoadingChange(val)
} else {
setInternalLoading(val)
}
}

useEffect(() => {
changing && setChanging(false)
loading && setLoading(false)
}, [value])

const [changing, setChanging] = useState(false)

const classes = () => {
return classNames([
classPrefix,
Expand All @@ -57,13 +69,14 @@ export const Switch: FunctionComponent<Partial<TaroSwitchProps>> = (props) => {
}

const onClick = async () => {
if (disabled || changing) return
if (disabled || loading) return
if (onChange) {
setChanging(true)
loadingIcon && setLoading(true)
onChange(!value)
try {
await onChange(!value)
} catch (e) {
setChanging(false)
setLoading(false)
}
}
setValue(!value)
Expand All @@ -84,7 +97,7 @@ export const Switch: FunctionComponent<Partial<TaroSwitchProps>> = (props) => {
},
])}
>
{changing && loadingIcon ? (
{loading && loadingIcon ? (
<>{loadingIcon}</>
) : (
<>
Expand Down
Loading
Loading