105 lines
2.5 KiB
TypeScript
105 lines
2.5 KiB
TypeScript
import React, { Component } from 'react';
|
|
import { WithTranslation } from 'react-i18next';
|
|
import { connect } from 'react-redux';
|
|
|
|
import { IReduxState, IStore } from '../../../app/types';
|
|
import { hideDialog } from '../../../base/dialog/actions';
|
|
import InputDialog from '../../../base/dialog/components/native/InputDialog';
|
|
import { translate } from '../../../base/i18n/functions';
|
|
import { extractMusicUrl } from '../../functions';
|
|
|
|
interface IProps extends WithTranslation {
|
|
|
|
/**
|
|
* Invoked to update the shared music link.
|
|
*/
|
|
dispatch: IStore['dispatch'];
|
|
|
|
/**
|
|
* Function to be invoked after typing a valid URL.
|
|
*/
|
|
onPostSubmit: Function;
|
|
}
|
|
|
|
interface IState {
|
|
error: boolean;
|
|
}
|
|
|
|
/**
|
|
* Component that renders the music share dialog for native.
|
|
*/
|
|
class SharedMusicDialog extends Component<IProps, IState> {
|
|
|
|
/**
|
|
* Instantiates a new component.
|
|
*
|
|
* @inheritdoc
|
|
*/
|
|
constructor(props: IProps) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
error: false
|
|
};
|
|
|
|
this._onSubmitValue = this._onSubmitValue.bind(this);
|
|
}
|
|
|
|
/**
|
|
* Callback to be invoked when the value of the link input is submitted.
|
|
*
|
|
* @param {string} value - The entered music link.
|
|
* @returns {boolean}
|
|
*/
|
|
_onSubmitValue(value: string) {
|
|
const { onPostSubmit, dispatch } = this.props;
|
|
const extracted = extractMusicUrl(value);
|
|
|
|
if (!extracted) {
|
|
this.setState({ error: true });
|
|
|
|
return false;
|
|
}
|
|
|
|
onPostSubmit(value);
|
|
dispatch(hideDialog());
|
|
|
|
return true;
|
|
}
|
|
|
|
/**
|
|
* Implements React's {@link Component#render()}.
|
|
*
|
|
* @inheritdoc
|
|
*/
|
|
override render() {
|
|
const { t } = this.props;
|
|
const { error } = this.state;
|
|
|
|
return (
|
|
<InputDialog
|
|
messageKey = { error ? 'dialog.sharedMusicDialogError' : undefined }
|
|
onSubmit = { this._onSubmitValue }
|
|
textInputProps = {{
|
|
autoCapitalize: 'none',
|
|
autoCorrect: false,
|
|
placeholder: t('dialog.sharedMusicLinkPlaceholder')
|
|
}}
|
|
titleKey = 'dialog.shareMusicTitle' />
|
|
);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Maps part of the Redux state to the props of this component.
|
|
*
|
|
* @param {Object} _state - The Redux state.
|
|
* @private
|
|
* @returns {Object}
|
|
*/
|
|
function mapStateToProps(_state: IReduxState) {
|
|
return {};
|
|
}
|
|
|
|
export default translate(connect(mapStateToProps)(SharedMusicDialog));
|