Mirrors/responsively-app
2
0
Fork 0
mirror of https://github.com/responsively-org/responsively-app synced 2024-09-21 06:41:55 +00:00
Code Issues Projects Releases Packages Wiki Activity

Page Navigator minor tweaks

Browse source
This commit is contained in:
Manoj Vivek 2021-05-23 18:20:59 +05:30
parent 336fcbb5d2
commit 1ee6485434
1 changed files with 24 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
desktop-app/app/components/PageNavigator/index.js
View file

@ -13,6 +13,7 @@ import {makeStyles, useTheme} from '@material-ui/core/styles';
const {document} = new JSDOM('').window; const {document} = new JSDOM('').window;
const queryCheck = s => document.createDocumentFragment().querySelector(s); const queryCheck = s => document.createDocumentFragment().querySelector(s);
const INPUT_SOURCES = {TEXT_BOX: 'TEXT_BOX', OPTION_CLICK: 'OPTION_CLICK'};
const isSelectorValid = selector => { const isSelectorValid = selector => {
try { try {
@ -74,6 +75,7 @@ const useStyles = makeStyles(theme => ({
}, },
}, },
btn: { btn: {
margin: 1,
cursor: 'pointer', cursor: 'pointer',
color: theme.palette.mode({light: '#636363', dark: '#fffc'}), color: theme.palette.mode({light: '#636363', dark: '#fffc'}),
'&:hover': { '&:hover': {
@ -90,6 +92,7 @@ const useStyles = makeStyles(theme => ({
}, },
}, },
btnActive: { btnActive: {
borderRadius: 2,
'& div': { '& div': {
backgroundColor: theme.palette.primary.light, backgroundColor: theme.palette.primary.light,
color: '#fff', color: '#fff',
@ -99,6 +102,7 @@ const useStyles = makeStyles(theme => ({
const PageNavigator = props => { const PageNavigator = props => {
const [selector, setSelector] = useState(props.selector || ''); const [selector, setSelector] = useState(props.selector || '');
const [inputSource, setInputSource] = useState(null);
const inputRef = React.createRef(); const inputRef = React.createRef();
const styles = useStyles(); const styles = useStyles();
@ -112,8 +116,22 @@ const PageNavigator = props => {
return () => document.removeEventListener('keydown', _handleKeyDown); return () => document.removeEventListener('keydown', _handleKeyDown);
}, [props.active, inputRef.current]); }, [props.active, inputRef.current]);
useEffect(() => {
if (inputSource === INPUT_SOURCES.OPTION_CLICK) {
_navigateNext();
}
}, [selector, inputSource]);
const _handleChange = e => { const _handleChange = e => {
setSelector(e.target.value); setSelector(e.target.value);
if (inputSource !== INPUT_SOURCES.TEXT_BOX) {
setInputSource(INPUT_SOURCES.TEXT_BOX);
}
};
const handleOptionClick = val => {
setSelector(val);
setInputSource(INPUT_SOURCES.OPTION_CLICK);
}; };
const _navigateNext = debounce(() => { const _navigateNext = debounce(() => {
@ -172,25 +190,27 @@ const PageNavigator = props => {
className={cx(styles.btn, { className={cx(styles.btn, {
[styles.btnActive]: selector === 'section', [styles.btnActive]: selector === 'section',
})} })}
onClick={() => setSelector('section')} onClick={() => handleOptionClick('section')}
> >
<div>section</div> <div>section</div>
</span> </span>
<span <span
className={cx(styles.btn, {[styles.btnActive]: selector === 'h1'})} className={cx(styles.btn, {[styles.btnActive]: selector === 'h1'})}
onClick={() => setSelector('h1')} onClick={() => {
handleOptionClick('h1');
}}
> >
<div>h1</div> <div>h1</div>
</span> </span>
<span <span
className={cx(styles.btn, {[styles.btnActive]: selector === 'h2'})} className={cx(styles.btn, {[styles.btnActive]: selector === 'h2'})}
onClick={() => setSelector('h2')} onClick={() => handleOptionClick('h2')}
> >
<div>h2</div> <div>h2</div>
</span> </span>
<span <span
className={cx(styles.btn, {[styles.btnActive]: selector === 'h3'})} className={cx(styles.btn, {[styles.btnActive]: selector === 'h3'})}
onClick={() => setSelector('h3')} onClick={() => handleOptionClick('h3')}
> >
<div>h3</div> <div>h3</div>
</span> </span>