added support for done button, updated modal title

This commit is contained in:
noumantahir 2021-12-18 19:29:04 +05:00
parent f9c780d912
commit 4923a3ca1a
4 changed files with 99 additions and 74 deletions

View File

@ -335,7 +335,8 @@
"scheduled_for":"Scheduled For",
"scheduled_immediate":"Immediate",
"scheduled_later":"Later",
"settings_title":"Post Settings"
"settings_title":"Post Options",
"done":"DONE"
},
"snippets":{
"label_no_snippets":"No Snippets Found",

View File

@ -12,11 +12,12 @@ import { Beneficiary } from '../../../redux/reducers/editorReducer';
import { lookupAccounts } from '../../../providers/hive/dhive';
interface BeneficiarySelectionContent {
draftId:string,
handleOnSaveBeneficiaries:()=>void
draftId:string;
handleOnSaveBeneficiaries:()=>void;
setDisableDone:(value:boolean)=>void;
}
const BeneficiarySelectionContent = ({handleOnSaveBeneficiaries, draftId }) => {
const BeneficiarySelectionContent = ({handleOnSaveBeneficiaries, draftId, setDisableDone }) => {
const intl = useIntl();
const beneficiariesMap = useAppSelector(state => state.editor.beneficiariesMap)
@ -36,6 +37,10 @@ const BeneficiarySelectionContent = ({handleOnSaveBeneficiaries, draftId }) => {
readTempBeneficiaries();
}, [draftId]);
useEffect(() => {
setDisableDone(newEditable)
}, [newEditable])
const readTempBeneficiaries = async () => {
if(beneficiariesMap){

View File

@ -2,13 +2,14 @@ import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'rea
import { useIntl } from 'react-intl';
import { View } from 'react-native';
import { DateTimePicker, Modal, SettingsItem } from '../../../components';
import { DateTimePicker, MainButton, Modal, SettingsItem } from '../../../components';
import styles from './editorSettingsModalStyles';
import ThumbSelectionContent from './thumbSelectionContent';
import {View as AnimatedView} from 'react-native-animatable';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import BeneficiarySelectionContent from './beneficiarySelectionContent';
import { Beneficiary } from '../../../redux/reducers/editorReducer';
import EStyleSheet from 'react-native-extended-stylesheet';
const REWARD_TYPES = [
{
@ -63,6 +64,7 @@ const EditorSettingsModal = forwardRef(({
const [scheduleLater, setScheduleLater] = useState(false)
const [shouldReblog, setShouldReblog] = useState(false);
const [scheduledFor, setScheduledFor] = useState('');
const [disableDone, setDisableDone] = useState(false);
useEffect(() => {
if(handleThumbSelection){
@ -108,83 +110,98 @@ const EditorSettingsModal = forwardRef(({
const _handleDatePickerChange = (date:string) => {
setScheduledFor(date);
}
const _onDonePress = () => {
setShowModal(false);
}
const _renderContent = (
<KeyboardAwareScrollView contentContainerStyle={{flex:1}} >
<View style={styles.container}>
{!isEdit && (
<>
<SettingsItem
title={intl.formatMessage({id:'editor.scheduled_for'}) }
type="dropdown"
actionType="reward"
options={[
intl.formatMessage({id:"editor.scheduled_immediate"}),
intl.formatMessage({id:"editor.scheduled_later"}),
]}
selectedOptionIndex={scheduleLater ? 1 : 0}
handleOnChange={(index)=>{
setScheduleLater(index === 1)
}}
/>
{scheduleLater && (
<AnimatedView animation="flipInX" duration={700}>
<DateTimePicker
type="datetime"
onChanged={_handleDatePickerChange}
disabled={true}
/>
</AnimatedView>
)}
<SettingsItem
title={intl.formatMessage({
id: 'editor.setting_reward',
})}
type="dropdown"
actionType="reward"
options={
REWARD_TYPES.map((type)=>intl.formatMessage({ id: type.intlId}))
}
selectedOptionIndex={rewardTypeIndex}
handleOnChange={_handleRewardChange}
/>
{isCommunityPost && (
<View style={{flex:1}}>
<KeyboardAwareScrollView contentContainerStyle={{flex:1}} >
<View style={styles.container}>
{!isEdit && (
<>
<SettingsItem
title={intl.formatMessage({id:'editor.scheduled_for'}) }
type="dropdown"
actionType="reward"
options={[
intl.formatMessage({id:"editor.scheduled_immediate"}),
intl.formatMessage({id:"editor.scheduled_later"}),
]}
selectedOptionIndex={scheduleLater ? 1 : 0}
handleOnChange={(index)=>{
setScheduleLater(index === 1)
}}
/>
{scheduleLater && (
<AnimatedView animation="flipInX" duration={700}>
<DateTimePicker
type="datetime"
onChanged={_handleDatePickerChange}
disabled={true}
/>
</AnimatedView>
)}
<SettingsItem
title={intl.formatMessage({
id: 'editor.setting_reblog',
id: 'editor.setting_reward',
})}
type="toggle"
actionType="reblog"
isOn={shouldReblog}
handleOnChange={setShouldReblog}
type="dropdown"
actionType="reward"
options={
REWARD_TYPES.map((type)=>intl.formatMessage({ id: type.intlId}))
}
selectedOptionIndex={rewardTypeIndex}
handleOnChange={_handleRewardChange}
/>
)}
</>
)}
{isCommunityPost && (
<SettingsItem
title={intl.formatMessage({
id: 'editor.setting_reblog',
})}
type="toggle"
actionType="reblog"
isOn={shouldReblog}
handleOnChange={setShouldReblog}
/>
)}
</>
)}
<ThumbSelectionContent
body={body}
thumbIndex={thumbIndex}
onThumbSelection={setThumbIndex}
/>
{!isEdit && (
<BeneficiarySelectionContent
handleOnSaveBeneficiaries={handleBeneficiariesChange}
draftId={draftId}
setDisableDone={setDisableDone}
/>
)}
</View>
</KeyboardAwareScrollView>
<ThumbSelectionContent
body={body}
thumbIndex={thumbIndex}
onThumbSelection={setThumbIndex}
<MainButton
style={{...styles.saveButton, backgroundColor:EStyleSheet.value(disableDone?'$primaryDarkGray':'$primaryBlue') }}
isDisable={disableDone}
onPress={_onDonePress}
text={intl.formatMessage({id:"editor.done"})}
/>
{!isEdit && (
<BeneficiarySelectionContent
handleOnSaveBeneficiaries={handleBeneficiariesChange}
draftId={draftId}
/>
)}
</View>
</KeyboardAwareScrollView>
</View>
)

View File

@ -65,13 +65,15 @@ export default EStyleSheet.create({
color:'$pureWhite'
} as TextStyle,
saveButton:{
backgroundColor:'$primaryBlue',
width:150,
paddingVertical:16,
borderRadius:32,
marginVertical:16,
marginRight:32,
justifyContent:'center',
alignItems:'center'
alignItems:'center',
alignSelf:'flex-end'
} as ViewStyle,
closeButton:{
marginRight:16,