lbry-desktop/ui/component/settingShareUrl/view.jsx
2021-12-04 22:20:39 -05:00

70 lines
1.9 KiB
JavaScript

// @flow
import { SHARE_DOMAIN_URL, URL } from 'config';
import React from 'react';
import { FormField } from 'component/common/form';
const DEBOUNCE_TEXT_INPUT_MS = 500;
type Props = {
customShareUrlEnabled: boolean,
customShareUrl: string,
setCustomShareUrlEnabled: (boolean) => void,
setCustomShareUrl: (string) => void,
};
function SettingShareUrl(props: Props) {
const { customShareUrlEnabled, customShareUrl, setCustomShareUrlEnabled, setCustomShareUrl } = props;
const [url, setUrl] = React.useState(customShareUrl);
React.useEffect(() => {
const timer = setTimeout(() => {
if (url !== customShareUrl) {
setCustomShareUrl(url);
}
}, DEBOUNCE_TEXT_INPUT_MS);
return () => clearTimeout(timer);
}, [url, customShareUrl, customShareUrlEnabled, setCustomShareUrl]);
return (
<React.Fragment>
<fieldset-section>
<FormField
type="radio"
name="use_default_share_url"
label={__('Default share url (%name%)', { name: SHARE_DOMAIN_URL || URL })}
checked={!customShareUrlEnabled}
onChange={(e) => {
if (e.target.checked) {
setCustomShareUrlEnabled(false);
}
}}
/>
<FormField
type="radio"
name="use_custom_share_url"
label={__('Custom share url')}
checked={customShareUrlEnabled}
onChange={(e) => {
if (e.target.checked) {
setCustomShareUrlEnabled(true);
}
}}
/>
{customShareUrlEnabled && (
<div className="section__body">
<FormField
type="text"
placeholder="https://lbryshare.com"
value={url}
onChange={(e) => setUrl(e.target.value)}
/>
</div>
)}
</fieldset-section>
</React.Fragment>
);
}
export default SettingShareUrl;