Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-19 09:42:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Do not use bond function

Browse source
This commit is contained in:
Vladimir Borisov 2019-09-30 16:19:57 +03:00
parent f5aa635028
commit c9f2b735f3
No known key found for this signature in database
GPG key ID: F9A584BE4FCB6603
2 changed files with 14 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/common/ColorInput/ColorInput.js
View file

@ -4,16 +4,17 @@ const { Modal } = require('stremio-router');
const Button = require('stremio/common/Button');
const ColorPicker = require('stremio/common/ColorPicker');
const useBinaryState = require('stremio/common/useBinaryState');
const Icon = require('stremio-icons/dom/Icon');
const Icon = require('stremio-icons/dom');
const styles = require('./styles');
const ColorInput = ({ className, value, onChange }) => {
const ColorInput = ({ className, id, value, onChange }) => {
const [colorInputVisible, showColorInput, closeColorInput] = useBinaryState(false);
const [selectedColor, setSelectedColor] = React.useState(value);
const confirmColorInput = React.useCallback(() => {
const confirmColorInput = React.useCallback((event) => {
if(typeof onChange === "function") {
onChange(selectedColor);
event.nativeEvent.value = selectedColor;
onChange(event);
}
closeColorInput();
}, [selectedColor, onChange]);
@ -41,7 +42,7 @@ const ColorInput = ({ className, value, onChange }) => {
</Button>
<h1>Choose a color:</h1>
<ColorPicker className={styles['color-input']} value={selectedColor} onChange={setSelectedColor} />
<Button className={styles['button']} onClick={confirmColorInput}>Select</Button>
<Button className={styles['button']} data-id={id} onClick={confirmColorInput}>Select</Button>
</div>
</Modal>
:
@ -53,6 +54,7 @@ const ColorInput = ({ className, value, onChange }) => {
ColorInput.propTypes = {
className: PropTypes.string,
id: PropTypes.string.isRequired,
value: PropTypes.string,
onChange: PropTypes.func
};

12
src/routes/Settings/SectionsList/SectionsList.js
View file

@ -10,14 +10,16 @@ const SectionsList = React.forwardRef(({ className, sections, preferences, onPre
onPreferenceChanged(id, !preferences[id]);
};
const colorChanged = (id, color) => {
const colorChanged = React.useCallback((event) => {
const id = event.currentTarget.dataset.id;
const color = event.nativeEvent.value;
onPreferenceChanged(id, color);
};
}, [onPreferenceChanged]);
const updateDropdown = React.useCallback((event) => {
var data = event.currentTarget.dataset;
onPreferenceChanged(data.name, data.value);
});
}, [onPreferenceChanged]);
const checkUser = React.useCallback((event) => {
if(! preferences.user) {
@ -25,7 +27,7 @@ const SectionsList = React.forwardRef(({ className, sections, preferences, onPre
console.log('No user found');
event.preventDefault();
}
});
}, []);
// Determines whether the link should be opened in new window or in the current one.
const getTargetFor = url => ['//', 'http://', 'https://', 'file://', 'ftp://', 'mailto:', 'magnet:']
@ -151,7 +153,7 @@ const SectionsList = React.forwardRef(({ className, sections, preferences, onPre
return (
<div key={input.id} className={classnames(styles['input-container'], styles['color-container'])}>
{input.header ? <div className={styles['input-header']}>{input.header}</div> : null}
<ColorInput className={styles['color-picker']} value={preferences[input.id]} tabIndex={'-1'} onChange={colorChanged.bind(null, input.id)} />
<ColorInput className={styles['color-picker']} id={input.id} value={preferences[input.id]} onChange={colorChanged} />
</div>
);
}