client: throttle update width

This commit is contained in:
fantasticit 2022-05-26 21:46:17 +08:00
parent 802f7c9228
commit dadd098800
1 changed files with 8 additions and 7 deletions

View File

@ -1,9 +1,10 @@
import { IconArticle } from '@douyinfe/semi-icons'; import { IconArticle } from '@douyinfe/semi-icons';
import { Button, Popover, Radio, RadioGroup, Slider, Typography } from '@douyinfe/semi-ui'; import { Button, Popover, Radio, RadioGroup, Slider, Typography } from '@douyinfe/semi-ui';
import { throttle } from 'helpers/throttle';
import { useDocumentStyle } from 'hooks/use-document-style'; import { useDocumentStyle } from 'hooks/use-document-style';
import { IsOnMobile } from 'hooks/use-on-mobile'; import { IsOnMobile } from 'hooks/use-on-mobile';
import { useToggle } from 'hooks/use-toggle'; import { useToggle } from 'hooks/use-toggle';
import React from 'react'; import React, { useMemo } from 'react';
import styles from './index.module.scss'; import styles from './index.module.scss';
@ -13,6 +14,11 @@ export const DocumentStyle = () => {
const { isMobile } = IsOnMobile.useHook(); const { isMobile } = IsOnMobile.useHook();
const { width, fontSize, setWidth, setFontSize } = useDocumentStyle(); const { width, fontSize, setWidth, setFontSize } = useDocumentStyle();
const [visible, toggleVisible] = useToggle(false); const [visible, toggleVisible] = useToggle(false);
const throttleSetWidth = useMemo(() => {
return throttle((e) => {
setWidth(e.target.value);
}, 200);
}, [setWidth]);
return ( return (
<Popover <Popover
@ -32,12 +38,7 @@ export const DocumentStyle = () => {
<div className={styles.item}> <div className={styles.item}>
<Text></Text> <Text></Text>
<div> <div>
<RadioGroup <RadioGroup type="button" value={width} onChange={throttleSetWidth} style={{ marginTop: '0.5em' }}>
type="button"
value={width}
onChange={(e) => setWidth(e.target.value)}
style={{ marginTop: '0.5em' }}
>
<Radio value={'standardWidth'}></Radio> <Radio value={'standardWidth'}></Radio>
<Radio value={'fullWidth'}></Radio> <Radio value={'fullWidth'}></Radio>
</RadioGroup> </RadioGroup>