be-components 5.1.0 → 5.1.2

package/lib/typescript/src/SocialComponents/FormattedTextInput/components/TagSelector.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { TextTagProps } from '../../../types';
+type TagSelectorProps = {
+    type: 'player';
+    visible: boolean;
+    working_tag: TextTagProps;
+    onCancel: () => void;
+    onSelectTag: (tag: TextTagProps) => void;
+};
+declare const TagSelector: ({ type, visible, working_tag, onSelectTag, onCancel }: TagSelectorProps) => React.JSX.Element;
+export default TagSelector;
+//# sourceMappingURL=TagSelector.d.ts.map

package/lib/typescript/src/SocialComponents/FormattedTextInput/components/TagSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagSelector.d.ts","sourceRoot":"","sources":["../../../../../../src/SocialComponents/FormattedTextInput/components/TagSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,KAAK,EAAqB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAItE,KAAK,gBAAgB,GAAG;IACpB,IAAI,EAAE,QAAQ,CAAC;IACf,OAAO,EAAC,OAAO,CAAC;IAChB,WAAW,EAAC,YAAY,CAAC;IACzB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,EAAC,CAAC,GAAG,EAAC,YAAY,KAAK,IAAI,CAAA;CACzC,CAAA;AAED,QAAA,MAAM,WAAW,0DAA4D,gBAAgB,sBAyF5F,CAAA;AAED,eAAe,WAAW,CAAA"}

package/lib/typescript/src/SocialComponents/FormattedTextInput/index.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { TextTagProps } from '../../types';
+type FormattedTextInputProps = {
+    onChangeText?: (data: {
+        text: string;
+        formatted_text: any;
+    }) => void;
+    submit_title?: string;
+    init_data?: {
+        formatted_text: string;
+        text: string;
+        tags: TextTagProps[];
+    };
+    onSubmit: (data: {
+        text: string;
+        formatted_text: any;
+    }, tags: TextTagProps[]) => void;
+};
+declare const FormattedTextInput: ({ submit_title, init_data, onChangeText, onSubmit }: FormattedTextInputProps) => React.JSX.Element;
+export default FormattedTextInput;
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/SocialComponents/FormattedTextInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/SocialComponents/FormattedTextInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAG5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAIhD,KAAK,uBAAuB,GAAG;IAC3B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAC;QAAE,IAAI,EAAC,MAAM,CAAC;QAAC,cAAc,EAAC,GAAG,CAAA;KAAE,KAAK,IAAI,CAAC;IAClE,YAAY,CAAC,EAAC,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE;QAAE,cAAc,EAAE,MAAM,CAAC;QAAC,IAAI,EAAC,MAAM,CAAC;QAAC,IAAI,EAAC,YAAY,EAAE,CAAA;KAAE,CAAC;IACzE,QAAQ,EAAC,CAAC,IAAI,EAAC;QAAE,IAAI,EAAC,MAAM,CAAC;QAAC,cAAc,EAAC,GAAG,CAAA;KAAE,EAAE,IAAI,EAAC,YAAY,EAAE,KAAK,IAAI,CAAA;CACnF,CAAA;AAED,QAAA,MAAM,kBAAkB,wDAAwD,uBAAuB,sBA+ItG,CAAA;AAED,eAAe,kBAAkB,CAAA"}

package/lib/typescript/src/SocialComponents/InputBar/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type InputBarProps = {
+    actions: string[];
+    onImageUpload: (image: {
+        url: string;
+        [key: string]: any;
+    }) => void;
+};
+declare const InputBar: ({ actions, onImageUpload }: InputBarProps) => React.JSX.Element;
+export default InputBar;
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/SocialComponents/InputBar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/SocialComponents/InputBar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,KAAK,aAAa,GAAG;IACjB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,CAAC,KAAK,EAAE;QAAE,GAAG,EAAC,MAAM,CAAC;QAAC,CAAC,GAAG,EAAC,MAAM,GAAE,GAAG,CAAA;KAAE,KAAK,IAAI,CAAA;CACnE,CAAA;AAED,QAAA,MAAM,QAAQ,+BAAiC,aAAa,sBA4B3D,CAAA;AAED,eAAe,QAAQ,CAAA"}

package/lib/typescript/src/SocialComponents/api/index.d.ts

@@ -1,5 +1,5 @@
-import type { AthleteProps, EventProps, LeagueProps, MatchProps, OrderProps, PlayerFollowerProps, PlayerPodcastEpisodeProps, PlayerPodcastProps, PodcastEpisodesProps, PodcastProps, PostReactionProps, TeamProps, TournamentProps } from "../../types";
-export { SocialComponentApi, SocialOrderHelpers, SocialPodcastHelpers };
+import type { AthleteProps, EventProps, LeagueProps, MatchProps, OrderProps, PlayerFollowerProps, PlayerPodcastEpisodeProps, PlayerPodcastProps, PodcastEpisodesProps, PodcastProps, PostReactionProps, PublicPlayerProps, TextTagProps, TeamProps, TournamentProps } from "../../types";
+export { SocialComponentApi, SocialOrderHelpers, SocialPodcastHelpers, SocialComponentHelpers };
 declare const SocialComponentApi: {
     setEnvironment: () => void;
     getLeagues: () => Promise<LeagueProps[]>;
@@ -7,6 +7,8 @@ declare const SocialComponentApi: {
     getBulkPlayerfollowers: (player_ids: string[]) => Promise<any>;
     savePlayerFollower: (player_follower: PlayerFollowerProps) => Promise<PlayerFollowerProps>;
     getEventsByEventIds: (event_ids: string[]) => Promise<EventProps[]>;
+    searchPlayerByUsername: (username: string) => Promise<PublicPlayerProps | undefined>;
+    searchPlayersByValue: (search_value: string, offset: number) => Promise<PublicPlayerProps[]>;
     getMatchesByMatchIds: (match_ids: string[]) => Promise<MatchProps[]>;
     getAthletesByIds: (athlete_ids: string[]) => Promise<AthleteProps[]>;
     getTournamentsByTournamentIds: (tournament_ids: string[]) => Promise<TournamentProps[]>;
@@ -48,6 +50,11 @@ declare const SocialOrderHelpers: {
     };
     getOddsLabel: (odds: number, decimals?: number) => string;
 };
+declare const SocialComponentHelpers: {
+    extractTagsFromText: (text: string, cursor?: number) => TextTagProps[];
+    replaceText: (originalText: string, startIndex: number, endIndex: number, replacementText: string) => string;
+    compareTags: (valid_tags: TextTagProps[], tags: TextTagProps[]) => TextTagProps[];
+};
 declare const SocialPodcastHelpers: {
     getPodcastImage: (podcast: PodcastProps) => string;
     getEpisodeImage: (podcast_episode?: PodcastEpisodesProps) => string;

package/lib/typescript/src/SocialComponents/api/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/SocialComponents/api/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,mBAAmB,EAAE,yBAAyB,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,YAAY,EAAE,iBAAiB,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAQxP,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,CAAA;AAEvE,QAAA,MAAM,kBAAkB;;sBASA,OAAO,CAAC,WAAW,EAAE,CAAC;0BAQhB,UAAU,KAAE,OAAO,CAAC,UAAU,GAAG,SAAS,CAAC;yCAQ5B,MAAM,EAAE;0CAIP,mBAAmB,KAAE,OAAO,CAAC,mBAAmB,CAAC;qCAItD,MAAM,EAAE,KAAE,OAAO,CAAC,UAAU,EAAE,CAAC;sCAS9B,MAAM,EAAE,KAAE,OAAO,CAAC,UAAU,EAAE,CAAC;oCAShC,MAAM,EAAE,KAAE,OAAO,CAAC,YAAY,EAAE,CAAC;oDASlB,MAAM,EAAE,KAAE,OAAO,CAAC,eAAe,EAAE,CAAC;8BAS1D,MAAM,EAAE;wCASE,iBAAiB,KAAE,OAAO,CAAC,iBAAiB,GAAC,SAAS,CAAC;wCAStD,iBAAiB,KAAE,OAAO,CAAC,iBAAiB,GAAC,SAAS,CAAC;iCAS/D,MAAM,KAAE,OAAO,CAAC,YAAY,GAAG,SAAS,CAAC;gDAQ1B,MAAM,KAAE,OAAO,CAAC,oBAAoB,GAAG,SAAS,CAAC;kDAS/C,MAAM,KAAE,OAAO,CAAC,SAAS,GAAG;QAAE,cAAc,CAAC,EAAC,kBAAkB,CAAC;QAAC,sBAAsB,CAAC,EAAC,yBAAyB,CAAA;KAAE,CAAC;8CAS1H,MAAM,KAAE,OAAO,CAAC,SAAS,GAAG;QAAE,cAAc,EAAC,kBAAkB,CAAC;QAAC,sBAAsB,EAAC,yBAAyB,CAAA;KAAE,CAAC;8CASrH,MAAM,mBAAkB,MAAM,KAAE,OAAO,CAAC,SAAS,GAAG,yBAAyB,CAAC;CAS9H,CAAA;AAGD,QAAA,MAAM,kBAAkB;0BACC,UAAU;8BAYN,UAAU;;;;kCAYN,MAAM,OAAM,MAAM;+BAWrB,UAAU,EAAE;;;;;;;+BAWZ,UAAU,UAAS,UAAU,EAAE,eAAc,eAAe,EAAE,WAAU,UAAU,EAAE,YAAW,YAAY,EAAE,SAAQ,SAAS,EAAE,WAAU,WAAW,EAAE,KAAE;QAAE,KAAK,EAAC,MAAM,CAAC;QAAC,IAAI,EAAC,MAAM,CAAC;QAAC,MAAM,CAAC,EAAC,WAAW,CAAC;QAAC,OAAO,CAAC,EAAC,YAAY,CAAC;QAAC,IAAI,CAAC,EAAC,SAAS,CAAA;KAAE;yBAwBzP,MAAM,aAAY,MAAM;CAM/C,CAAA;AAED,QAAA,MAAM,oBAAoB;+BACI,YAAY,KAAE,MAAM;wCAMX,oBAAoB,KAAE,MAAM;uBAO7C,MAAM;2BAMF,MAAM,OAAM,MAAM,UAAS,MAAM;CAG1D,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/SocialComponents/api/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,mBAAmB,EAAE,yBAAyB,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,YAAY,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAQzR,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,CAAA;AAE/F,QAAA,MAAM,kBAAkB;;sBASA,OAAO,CAAC,WAAW,EAAE,CAAC;0BAQhB,UAAU,KAAE,OAAO,CAAC,UAAU,GAAG,SAAS,CAAC;yCAQ5B,MAAM,EAAE;0CAIP,mBAAmB,KAAE,OAAO,CAAC,mBAAmB,CAAC;qCAItD,MAAM,EAAE,KAAE,OAAO,CAAC,UAAU,EAAE,CAAC;uCAS7B,MAAM,KAAE,OAAO,CAAC,iBAAiB,GAAC,SAAS,CAAC;yCAU1C,MAAM,UAAS,MAAM,KAAE,OAAO,CAAC,iBAAiB,EAAE,CAAC;sCAQtD,MAAM,EAAE,KAAE,OAAO,CAAC,UAAU,EAAE,CAAC;oCAShC,MAAM,EAAE,KAAE,OAAO,CAAC,YAAY,EAAE,CAAC;oDASlB,MAAM,EAAE,KAAE,OAAO,CAAC,eAAe,EAAE,CAAC;8BAS1D,MAAM,EAAE;wCASE,iBAAiB,KAAE,OAAO,CAAC,iBAAiB,GAAC,SAAS,CAAC;wCAStD,iBAAiB,KAAE,OAAO,CAAC,iBAAiB,GAAC,SAAS,CAAC;iCAS/D,MAAM,KAAE,OAAO,CAAC,YAAY,GAAG,SAAS,CAAC;gDAQ1B,MAAM,KAAE,OAAO,CAAC,oBAAoB,GAAG,SAAS,CAAC;kDAS/C,MAAM,KAAE,OAAO,CAAC,SAAS,GAAG;QAAE,cAAc,CAAC,EAAC,kBAAkB,CAAC;QAAC,sBAAsB,CAAC,EAAC,yBAAyB,CAAA;KAAE,CAAC;8CAS1H,MAAM,KAAE,OAAO,CAAC,SAAS,GAAG;QAAE,cAAc,EAAC,kBAAkB,CAAC;QAAC,sBAAsB,EAAC,yBAAyB,CAAA;KAAE,CAAC;8CASrH,MAAM,mBAAkB,MAAM,KAAE,OAAO,CAAC,SAAS,GAAG,yBAAyB,CAAC;CAS9H,CAAA;AAGD,QAAA,MAAM,kBAAkB;0BACC,UAAU;8BAYN,UAAU;;;;kCAYN,MAAM,OAAM,MAAM;+BAWrB,UAAU,EAAE;;;;;;;+BAWZ,UAAU,UAAS,UAAU,EAAE,eAAc,eAAe,EAAE,WAAU,UAAU,EAAE,YAAW,YAAY,EAAE,SAAQ,SAAS,EAAE,WAAU,WAAW,EAAE,KAAE;QAAE,KAAK,EAAC,MAAM,CAAC;QAAC,IAAI,EAAC,MAAM,CAAC;QAAC,MAAM,CAAC,EAAC,WAAW,CAAC;QAAC,OAAO,CAAC,EAAC,YAAY,CAAC;QAAC,IAAI,CAAC,EAAC,SAAS,CAAA;KAAE;yBAwBzP,MAAM,aAAY,MAAM;CAM/C,CAAA;AAED,QAAA,MAAM,sBAAsB;gCACG,MAAM,WAAU,MAAM,KAAE,YAAY,EAAE;gCAkBtC,MAAM,cAAa,MAAM,YAAW,MAAM,mBAAkB,MAAM;8BAKpE,YAAY,EAAE,QAAO,YAAY,EAAE;CAe/D,CAAA;AAED,QAAA,MAAM,oBAAoB;+BACI,YAAY,KAAE,MAAM;wCAMX,oBAAoB,KAAE,MAAM;uBAO7C,MAAM;2BAMF,MAAM,OAAM,MAAM,UAAS,MAAM;CAG1D,CAAA"}

package/lib/typescript/src/SocialComponents/index.d.ts

@@ -6,5 +6,8 @@ import PodcastModule from './PodcastModule';
 import AudioPlayer from "./AudioPlayer";
 import { useContacts } from "./Contacts/useContacts";
 import PostCard from './PostCard';
-export { PlayerCard, PlayerList, PlayerProfile, CompanyProfile, PodcastModule, AudioPlayer, useContacts, PostCard };
+import FormattedTextInput from "./FormattedTextInput";
+import { FormattedText } from "./FormattedTextInput/FormattedText";
+import InputBar from "./InputBar";
+export { PlayerCard, PlayerList, FormattedTextInput, InputBar, FormattedText, PlayerProfile, CompanyProfile, PodcastModule, AudioPlayer, useContacts, PostCard };
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/SocialComponents/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/SocialComponents/index.tsx"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,EACH,UAAU,EACV,UAAU,EACV,aAAa,EACb,cAAc,EACd,aAAa,EACb,WAAW,EACX,WAAW,EACX,QAAQ,EACX,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/SocialComponents/index.tsx"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,OAAO,EACH,UAAU,EACV,UAAU,EACV,kBAAkB,EAClB,QAAQ,EACR,aAAa,EACb,aAAa,EACb,cAAc,EACd,aAAa,EACb,WAAW,EACX,WAAW,EACX,QAAQ,EACX,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "be-components",
-  "version": "5.1.0",
+  "version": "5.1.2",
   "description": "Components for BettorEdge Apps",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/ProfileManager/Components/VouchCard.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { TouchableOpacity, Image, Modal, Alert, FlatList, Platform } from 'react-native';
+import { TouchableOpacity, Image, Modal, Alert, FlatList, Platform, useWindowDimensions } from 'react-native';
 import { Icons } from '../../Components';
 import Colors from '../../constants/colors';
 import { ProfileApi, ProfileHelpers } from '../api';
@@ -36,7 +36,7 @@ const VouchCard = ({ player, view_mode, walkthrough, insets, code_details, onVou
     const [ disclaimer_confirmed, setDisclaimerConfirmed ] = useState(false);
     const [ id_disclaimer_confirmed, setIDDisclaimerConfirmed ] = useState(false);
     const [ info_visible, setInfoVisible ] = useState(false);
-
+    const { height } = useWindowDimensions();
     const { code_request, promo } = code_details;
     useEffect(() => {
         getPlayerFromServer()
@@ -107,6 +107,7 @@ const VouchCard = ({ player, view_mode, walkthrough, insets, code_details, onVou
     const renderSections = (data:{item:string, index:number}) => {
         switch(data.item){
             case 'header':
+                if(height < 830){ return <></> }
                 return (
                     <View style={{ padding:20 }}>
                         <Text size={30} theme='h1'>Help us identify you</Text>

package/src/SocialComponents/FormattedTextInput/FormattedText.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { Text, View } from "../../Components/Themed";
+import type { TextTagProps } from '../../types';
+import TagRenderer from './components/TagRenderer';
+
+type FormattedTextProps = {   
+    text: string,
+    tags:TextTagProps[],
+    onSelectTag: (tag:TextTagProps) => void
+} 
+
+
+
+export const FormattedText = ({ text, tags, onSelectTag }:FormattedTextProps) => {
+    const components = formatText(text, tags, onSelectTag);
+    let unique_lines = [ ...new Set(components.map(c => c.line)) ];
+ 
+    return (
+        <View transparent>
+            {unique_lines.map(l => {
+                let render_components = components.filter(c => c.line == l)
+                return (
+                    <View transparent type='row' style={{ flexWrap:'wrap' }}>
+                        {render_components.map(c => c.component)}
+                    </View>
+                )
+            })}
+        </View>
+    )
+}
+
+export const splitText = (text:string) => {
+    return text.split(' ');
+}
+
+
+
+export const formatText = (text:string, included_tags:TextTagProps[], onSelectTag:(tag:TextTagProps) => void):{ line:number, component:any }[] => {
+    let raw_text = text.replace(/\\n/g, " {ln} ")
+    let parsed_text:string[] = JSON.parse(raw_text as string).split(' ');
+    //First - lets grab the line breaks
+    let line_breaks:number[] = []
+    parsed_text.map((t,i) => {
+        let breaks = t.split('{ln}');
+        if(breaks.length > 1){
+            line_breaks.push(i);
+        }
+    })
+
+    let components:{line:number, component:any}[] = []
+    let lines:{ [key:number]: string } = {}
+    let tags:{ [key:number]: string[] } = {}
+    //Second - Lets generate the lines and grab tags out of the lines
+    let curr_line = 0
+    parsed_text.map((t,i) => {
+        let line_break = line_breaks.find(b => b == i)
+        if(line_break){ curr_line += 1; return }
+        let curr_string = lines[curr_line] ?? ''
+        curr_string += `${t} `
+        lines[curr_line] = curr_string
+        let tag = t.split('@');
+        if(tag.length == 2){
+            let curr_tags = tags[curr_line] ?? []
+            console.log(t)
+            tags[curr_line] = curr_tags.concat(t)
+        }
+    });
+    Object.values(lines).map((l,i) => {
+        let split_line = splitText(l);
+        split_line.map((sl) => {
+            let tag = included_tags.find(t => `${t.indicator}${t.tag}` == sl);
+            if(tag){
+                return components.push({
+                    line: i,
+                    component: <TagRenderer tag={tag} data={tag?.data} onPress={onSelectTag}/>
+                })
+            }
+            return components.push({
+                line: i,
+                component: <Text theme='description'>{sl} </Text>
+            })
+        })
+    })
+    return components
+}

package/src/SocialComponents/FormattedTextInput/components/PlayerTag.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Button, Text } from "../../../Components/Themed"
+import type { PublicPlayerProps, TextTagProps } from "../../../types"
+import { Image } from 'react-native';
+
+type PlayerTagProps = {
+    tag:TextTagProps,
+    player?:PublicPlayerProps,
+    onPress: (tag:TextTagProps, data?:PublicPlayerProps) => void
+}
+
+const PlayerTag = ({ tag, player, onPress }:PlayerTagProps) => {
+
+    if(!player){
+        return (
+            <Button transparent style={{ padding:0 }} onPress={() => onPress(tag, player)}>
+                <Text theme='action'>{tag.tag} </Text>
+            </Button>
+        )
+    }
+    return (
+        <Button float style={{ flexDirection:'row', alignItems:'center', padding:5, borderRadius:100, margin:5, marginLeft:0 }} onPress={() => onPress(tag, player)}>
+            <Image
+                source={{ uri: player.profile_pic }}
+                style={{ height:20, width:20, borderRadius:100 }}
+                resizeMode='cover'
+            />
+            <Text style={{ marginLeft:5 }} theme='description'>{player.username}</Text>
+        </Button>
+    )
+}
+
+export default PlayerTag

package/src/SocialComponents/FormattedTextInput/components/TagRenderer.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Text } from "../../../Components/Themed";
+import type { PublicPlayerProps, TextTagProps } from '../../../types';
+import PlayerTag from './PlayerTag';
+
+type TagRendererProps = {
+    tag:TextTagProps,
+    data?:PublicPlayerProps,
+    onPress: (tag:TextTagProps, data?:PublicPlayerProps) => void
+}
+const TagRenderer = ({ tag, data, onPress }:TagRendererProps) => {
+
+    switch(tag.type){
+        case 'player':
+            return (
+                <PlayerTag tag={tag} player={data} onPress={onPress} />
+            )
+        default:
+            return (
+                <Text theme='description'>{tag.tag}</Text>
+            )
+    }
+
+}
+
+export default TagRenderer

package/src/SocialComponents/FormattedTextInput/components/TagSelector.tsx

@@ -0,0 +1,106 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Text, View } from "../../../Components/Themed";
+import type { PublicPlayerProps, TextTagProps } from '../../../types';
+import { SocialComponentApi } from '../../api';
+import { FlatList, Image } from 'react-native';
+
+type TagSelectorProps = {
+    type: 'player',
+    visible:boolean,
+    working_tag:TextTagProps,
+    onCancel: () => void,
+    onSelectTag:(tag:TextTagProps) => void
+}
+
+const TagSelector = ({ type, visible, working_tag, onSelectTag, onCancel } : TagSelectorProps) => {
+    const [ player_tag, setPlayerTag ] = useState<{
+        loading:boolean,
+        players:PublicPlayerProps[],
+        offset:number
+    }>({
+        loading: false, players:[], offset:0
+    });
+    
+
+    useEffect(() => {
+        if(!visible){ return }
+        startUpSelector(type, working_tag)
+    },[visible, working_tag]);
+
+    const startUpSelector = async(type:'player', working_tag:TextTagProps) => {
+        switch(type){
+            case 'player':
+                return searchPlayers(working_tag, 0);
+            default: return //Not handled
+        }
+    }
+
+    const searchPlayers = async(tag:TextTagProps, page:number) => {
+        setPlayerTag({ ...player_tag, loading: true });
+        const plys = await SocialComponentApi.searchPlayersByValue(tag.tag, page);
+        setPlayerTag({
+            ...player_tag,
+            loading: false,
+            players: plys,
+            offset: page
+        })
+    }
+
+    const handleSelectPlayer = (player:PublicPlayerProps) => {
+        if(!working_tag){ return }
+        onSelectTag({
+            ...working_tag,
+            tag: player.username,
+            data: player,
+            tag_type_id: player.player_id,
+            valid: true
+        })
+    }
+
+    const renderPlayers = (data:{ item:PublicPlayerProps, index:number }) => {
+        return (
+            <Button float style={{ margin:4, padding:0, maxWidth:120 }} onPress={() => handleSelectPlayer(data.item)}>
+                <Image
+                    source={{ uri: data.item.profile_pic }}
+                    style={{ height:80, width:120, borderTopRightRadius:8, borderTopLeftRadius:8 }}
+                    resizeMode='cover'
+                />
+                <View transparent style={{ padding:5 }}>
+                    <Text theme='h2' textAlign='center'>@{data.item.username}</Text>
+                </View>
+            </Button>
+        )
+    }
+    
+    if(!visible){ return <></> }
+
+    return (
+        <View style={{ position:'absolute', bottom:5, left:0, right:0 }}>
+            {type == 'player' ?
+            <View float>
+                <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                    <View transparent style={{ flex:1 }}>
+                        <Text theme='h2'>Tag A Player!</Text>
+                    </View>
+                    <Button
+                        title='X'
+                        float
+                        onPress={() => onCancel()}
+                    />
+                </View>
+                <View style={{ padding:5 }}>
+                    <FlatList
+                        data={player_tag.players}
+                        key={'player_selector_list_format'}
+                        horizontal
+                        keyExtractor={(item) => item.player_id.toString()}
+                        renderItem={renderPlayers}
+                    />
+                </View>
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default TagSelector

package/src/SocialComponents/FormattedTextInput/index.tsx

@@ -0,0 +1,160 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Button, TextInput, View } from "../../Components/Themed"
+import { Platform, type NativeSyntheticEvent, type TextInputSelectionChangeEventData } from 'react-native';
+import type { TextTagProps } from '../../types';
+import { SocialComponentApi, SocialComponentHelpers } from '../api';
+import TagSelector from './components/TagSelector';
+
+type FormattedTextInputProps = {
+    onChangeText?: (data:{ text:string, formatted_text:any }) => void,
+    submit_title?:string,
+    init_data?: { formatted_text: string, text:string, tags:TextTagProps[] },
+    onSubmit:(data:{ text:string, formatted_text:any }, tags:TextTagProps[]) => void
+}
+
+const FormattedTextInput = ({ submit_title, init_data, onChangeText, onSubmit }:FormattedTextInputProps) => {
+    const [ input_state, setInputState ] = useState<{
+        height:number
+    }>({
+        height: 50
+    });
+    const [ data, setData ] = useState<{  
+        text: string,
+        formatted_text:string
+    }>(
+        {
+            text: '',
+            formatted_text: JSON.stringify('')
+        }
+    );
+    const [ location, setLocation ] = useState({
+        start:0,
+        end:0
+    });
+    const [ tag_selector, setTagSelector ] = useState<{
+        visible:boolean,
+        type:'player',
+        working_tag?:TextTagProps
+    }>({ visible: false, type: 'player'  })
+    const [ valid_tags, setValidTags ] = useState<TextTagProps[]>([]);
+
+
+    const { text, formatted_text } = data;
+    const { height } = input_state;
+    const tags = useMemo(() => SocialComponentHelpers.extractTagsFromText(text, location.start), [location.start])
+    const active_tag = tags.find(t => t.active);
+
+    const [ action_loading, setActionLoading ] = useState(false);
+    const [ working_tag, setWorkingTag ] = useState<TextTagProps | undefined>();
+
+    useEffect(() => {
+        SocialComponentApi.setEnvironment();
+        if(init_data){
+            setData({ text: init_data.text, formatted_text: init_data.formatted_text });
+            setValidTags(init_data.tags)
+        }
+    },[init_data])
+
+    useEffect(() => {
+        if(active_tag){ return setWorkingTag(active_tag) }
+        if(working_tag){
+            console.log('Working a tag no!')
+            //validateTag(working_tag)
+            searchPlayer(working_tag);
+            setWorkingTag(undefined)
+            return
+        }
+    },[active_tag]);
+
+    const validateTag = async(tag:TextTagProps) => {
+        let new_tags = valid_tags.filter(t => t.local_id != tag.local_id).concat(tag);
+        setValidTags(new_tags);
+    }
+
+    const searchPlayer = async(tag:TextTagProps) => {
+        setActionLoading(true);
+        const player = await SocialComponentApi.searchPlayerByUsername(tag.tag);
+        if(player){
+            validateTag({ ...tag, local_id: (Math.random()*10000).toFixed(), data: player, tag_type_id:player.player_id });
+            return setActionLoading(false);
+        }
+        setTagSelector({
+            visible:true,
+            working_tag:tag,
+            type:'player'
+        });
+        return setActionLoading(false);
+    }
+
+    const handleSelectionChange = (ev:NativeSyntheticEvent<TextInputSelectionChangeEventData | any>) => {
+        if(ev.nativeEvent.selection.start == location.start){ return }
+        setLocation({
+            start: ev.nativeEvent.selection.start,
+            end: ev.nativeEvent.selection.end
+        });
+    }
+
+    const handleUpdateTag = async(tag:TextTagProps) => {
+        const new_text = SocialComponentHelpers.replaceText(text, tag.start, tag.end, `@${tag.tag}`);
+        setValidTags(valid_tags.concat({ ...tag }));
+        setData({
+            ...data,
+            text: new_text
+        });
+        setTagSelector({ visible: false, type: 'player' })
+    }
+
+    const handleSubmit = () => {
+        if(!text){ return }
+        let new_tags = SocialComponentHelpers.compareTags(valid_tags, tags);
+        onSubmit({ text, formatted_text }, new_tags)
+    }
+
+    const handleChange = (ev:any) => {
+        let text:string = JSON.stringify(ev.text)
+        setData({
+            ...data,
+            text: ev.text,
+            formatted_text:text
+        });
+        if(onChangeText){ onChangeText({ text: ev.text, formatted_text: text }) }
+    }
+
+    return (
+        <View transparent>
+            <View transparent>
+                {tag_selector.visible && tag_selector.working_tag ?
+                <TagSelector
+                    working_tag={tag_selector.working_tag}
+                    type={tag_selector.type}
+                    visible={tag_selector.visible}
+                    onCancel={() => setTagSelector({ visible: false, type: 'player' })}
+                    onSelectTag={(tag) => handleUpdateTag(tag)}
+                />
+                :<></>}
+            </View>
+            <View transparent style={{ flexDirection:'row', alignItems:'flex-end' }}>
+                <TextInput
+                    value={text}
+                    editable={!action_loading}
+                    multiline
+                    style={{ flex:1, height: Platform.OS == 'web' ? height : undefined }}
+                    onContentSizeChange={(e) => {
+                        if(Platform.OS != 'web'){ return }
+                        setInputState({ ...input_state, height: e.nativeEvent.contentSize.height })
+                    }}
+                    onSelectionChange={handleSelectionChange}
+                    onChange={(ev) => handleChange(ev.nativeEvent)}
+                />
+                <Button
+                    title={submit_title ?? 'Submit'}
+                    type='success'
+                    style={{ opacity:text ? 1: 0.5, marginLeft:5 }}
+                    onPress={() => handleSubmit()}
+                />
+            </View>
+        </View>
+    )
+}
+
+export default FormattedTextInput

package/src/SocialComponents/InputBar/index.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { View } from "../../Components/Themed"
+import { FlatList } from 'react-native';
+import { Icons } from '../../Components';
+import { useColors } from '../../constants/useColors';
+import ImageUploader from '../../Components/ImageUploader';
+
+type InputBarProps = {
+    actions: string[],
+    onImageUpload: (image: { url:string, [key:string]:any }) => void
+}
+
+const InputBar = ({ actions, onImageUpload } : InputBarProps) => {
+    const Colors = useColors();
+
+    const renderActions = (data:{ item:string, index:number }) => {
+        switch(data.item){
+            case 'image':
+                return (
+                    <ImageUploader
+                        public_id={(Math.random()*100000).toFixed()}
+                        onFinishUpload={(obj) => onImageUpload({ ...obj, url: obj.secure_url })}
+                    >
+                        <Icons.ImageIcon size={14} color={Colors.text.h1} />
+                    </ImageUploader>
+                )
+            default: return <></>
+        }
+    }
+
+    return (
+        <View transparent style={{ flexDirection:'row', alignItems:'center' }}>
+            <FlatList
+                key={'action_list'}
+                data={actions}
+                keyExtractor={(item) => item}
+                renderItem={renderActions}
+            />
+        </View>
+    )
+}
+
+export default InputBar

package/src/SocialComponents/PostCard/index.tsx

@@ -130,7 +130,7 @@ const PostCard = ({ player_id, post, player, orders, onRequestAuthenticate, onCo
                 onSelectPlayer={onSelectPlayer}
             />
             :<></>}
-            <View transparent style={{  padding:10 }}>
+            <View transparent style={{ padding:10 }}>
                 <Text theme='h2'>{post.title}</Text>
             </View>
             <View transparent style={{ padding:10, paddingTop:0, paddingBottom:0 }}>