be-components 7.0.6 → 7.0.9

package/src/FlashMarket/components/FlashOptionCard.tsx

@@ -0,0 +1,174 @@
+import React from 'react';
+import { useEffect, useState } from "react"
+import type { PollOptionProps, PollProps, PollSummaryProps } from "../../types"
+import { Button, Text, TextInput, View } from "../../Components/Themed"
+import { PollOptionApi } from '../../Poll/api';
+import { useColors } from '../../constants/useColors';
+import { Checkbox, Icons } from '../../Components';
+import Slider from '../../Components/Slider';
+import { MarketComponentHelpers } from '../../MarketComponents/api';
+
+type FlashOptionCardProps = {
+    poll:PollProps,
+    poll_option: PollOptionProps,
+    probability_locked?:boolean,
+    summary:PollSummaryProps,
+    onUpdateOption:(poll_option:PollOptionProps) => void,
+    onLockProbability:(locked:boolean) => void,
+    onChangeProbability: (probability:number) => void,
+    onSelectWinningOption: (checked:boolean, option:PollOptionProps) => void
+}
+
+const FlashOptionCard = ({ poll, poll_option, probability_locked, summary, onUpdateOption, onLockProbability, onChangeProbability, onSelectWinningOption }:FlashOptionCardProps) => {
+    const Colors = useColors();
+    const [ size, setSize ] = useState({ width: 0 });
+    const [ state, setState ] = useState<{
+        action_loading:boolean,
+        draft_option:PollOptionProps
+    }>({
+        action_loading: false,
+        draft_option: poll_option
+    });
+    const { action_loading, draft_option } = state;
+    const delete_allowed = poll.status == 'pending' ? true : false
+    const probability = (poll_option.initial_odds ?? 0) * 100
+    const probability_label = `${probability.toFixed(2)}%`
+    const odds_label = MarketComponentHelpers.getOddsLabel(MarketComponentHelpers.calcAmericanOddsFromProbability(probability / 100))
+    const label_left = probability < 15 ? probability + 40 : 0
+    const summary_width = summary.pct * size.width
+    useEffect(() => {
+        setState({ ...state, draft_option: poll_option });
+    },[JSON.stringify(poll_option)]);
+
+    const updateOption = async(po:PollOptionProps) => {
+        if(action_loading){ return }
+        setState({ ...state, action_loading: true });
+        const new_option = await PollOptionApi.updatePollOption(po);
+        if(!new_option){ alert('Unabel to update'); setState({ ...state, action_loading: false }); return }
+        setState({
+            ...state,
+            action_loading: false
+        });
+        onUpdateOption(new_option)
+    }
+
+    const handleManualTimeChange = async(val:number) => {
+        //updat manual time!!
+        onChangeProbability(val / 100);
+    }
+
+    const is_changed = JSON.stringify(poll_option) != JSON.stringify(draft_option) ? true : false
+    const is_winning_option = poll_option.result_ind == 'win' ? true : false
+    return (
+        <View style={{ padding:2 }}>
+            <View type='row'>
+                {['paused','active'].includes(poll.status) ?
+                <Checkbox
+                    style={{ marginRight:10 }}
+                    color={is_winning_option ? Colors.text.success : Colors.text.h1}
+                    checked={is_winning_option}
+                    onSelect={(checked) => onSelectWinningOption(checked, poll_option)}
+                />
+                :<></>}
+                <View transparent style={{flex:1}}>
+                     <TextInput
+                        value={draft_option.option_name}
+                        editable={poll.status == 'pending' ? true : false}
+                        onSubmitEditing={() => {
+                            if(!is_changed){ return }
+                            updateOption(draft_option)
+                        }}
+                        style={{ borderColor:draft_option.option_name ? Colors.text.success: Colors.text.warning }}
+                        placeholder={`Option ${draft_option.priority}`}
+                        onChangeText={(text) => setState({ ...state, draft_option: { ...draft_option, option_name: text } })}
+                    />
+                {summary.pct > 0 ?
+                <View type='blur' style={{ position:'absolute', top:0, left:0, bottom:0, width: summary_width, backgroundColor:'rgba(125, 205, 133, 0.3)' }} />
+                :<></>}
+                </View>
+               
+                {is_changed ?
+                <Button
+                    title='SAVE'
+                    style={{ padding:10, marginLeft:5, opacity: action_loading ? 0.5: 1 }}
+                    disabled={action_loading}
+                    type='success'
+                    loading={action_loading}
+                    onPress={() => updateOption(draft_option)}
+                />
+                : delete_allowed ?
+                <Button
+                    title='X'
+                    transparent
+                    loading={action_loading}
+                    title_color={Colors.text.error}
+                    style={{ padding:10, marginLeft:5 }}
+                    onPress={() => updateOption({ ...draft_option, status: 'inactive' })}
+                />
+                :<></>}
+            </View>
+            {poll.status == 'pending' ?
+            <View style={{ padding:10, flexDirection:'row', alignItems:'center' }}>
+                <Button
+                    transparent
+                    style={{ padding:0, height:35, width:35, borderRadius:100, justifyContent:'center', alignItems:'center' }}
+                    onPress={() => onLockProbability(!poll_option.probability_locked)}
+                >
+                    {poll_option.probability_locked ?
+                    <Icons.LockClosedIcon size={20} color={Colors.text.h1} />
+                    :
+                    <Icons.LockOpenIcon size={24} color={Colors.text.success} />
+                    }
+                </Button>
+                <Button
+                    title='-'
+                    title_color={Colors.text.error}
+                    float
+                    disabled={poll_option.probability_locked  || probability <= 0.2 ? true : false}
+                    style={{ padding:0, height:35, width:35, borderRadius:100, justifyContent:'center', alignItems:'center' }}
+                    onPress={() => onChangeProbability((probability / 100) - 0.005)}
+                />
+                <View style={{ flex:1, marginLeft:5, marginRight:5 }} onLayout={(ev) => {
+                    const { width } = ev.nativeEvent.layout;
+                    setSize({ width })
+                }}>
+                    <Slider
+                        width={size.width}
+                        value={probability}
+                        minimum_value={0}
+                        disabled={poll_option.probability_locked || probability_locked}
+                        minimum_track_tint={Colors.text.success}
+                        maximum_track_tint={Colors.text.h1}
+                        thumb_tint_color={Colors.text.success}
+                        maximum_value={100}
+                        onSlidingStart={() => console.log('started')}
+                        //onSlidingStart={() => handleStartSliding()}
+                        onSlidingComplete={(val) => handleManualTimeChange(val)}
+                    />
+                    <Text theme='description' style={{ position:'absolute', left:label_left, bottom:-5 }}>{probability_label} ({odds_label})</Text>
+                </View>
+
+                <Button
+                    title='+'
+                    title_color={Colors.text.success}
+                    float
+                    disabled={poll_option.probability_locked  || probability >= 99 ? true : false}
+                    style={{ padding:0, height:35, width:35, borderRadius:100, justifyContent:'center', alignItems:'center' }}
+                    onPress={() => onChangeProbability((probability / 100) + 0.005)}
+                />
+            </View>
+            :
+            <View style={{ flex:1, flexDirection:'row', alignItems:'center', marginTop:3}} onLayout={(ev) => {
+                    const { width } = ev.nativeEvent.layout;
+                    setSize({ width: width -100 })
+                }}>
+                    <Text theme='description' textAlign='left'>{(summary.pct * 100).toFixed(2)}%</Text>
+                    <View transparent style={{ flex:1 }} />
+                    <Text theme='description' textAlign='right'>{summary.count} Responses</Text>
+            </View>
+            }
+        </View>
+    )
+}
+
+export default FlashOptionCard