refs #469 Add language select in compose

src/components/compose/Compose.tsx

@@ -48,6 +48,7 @@ const Compose: React.FC<Props> = props => {
  const [fromAccount, setFromAccount] = useState<[Account, Server]>()
  const [defaultVisibility, setDefaultVisibility] = useState<'public' | 'unlisted' | 'private' | 'direct'>('public')
  const [defaultNSFW, setDefaultNSFW] = useState(false)
+ const [defaultLanguage, setDefaultLanguage] = useState<string | null>(null)
  const [client, setClient] = useState<MegalodonInterface>()
 
  useEffect(() => {
@@ -75,6 +76,7 @@ const Compose: React.FC<Props> = props => {
  const res = await client.verifyAccountCredentials()
  setDefaultVisibility(res.data.source.privacy as 'public' | 'unlisted' | 'private' | 'direct')
  setDefaultNSFW(res.data.source.sensitive)
+ setDefaultLanguage(res.data.source.language)
  }
  f()
  }, [fromAccount])
@@ -118,6 +120,7 @@ const Compose: React.FC<Props> = props => {
  account={fromAccount[0]}
  defaultVisibility={defaultVisibility}
  defaultNSFW={defaultNSFW}
+ defaultLanguage={defaultLanguage}
  />
  )}
  </Content>

src/components/compose/Status.tsx

@@ -14,7 +14,8 @@ import {
  FlexboxGrid,
  Radio,
  InputPicker,
- FormControlProps
+ FormControlProps,
+ SelectPicker
 } from 'rsuite'
 import { useState, useEffect, useRef, forwardRef, ChangeEvent } from 'react'
 import { Icon } from '@rsuite/icons'
@@ -29,6 +30,7 @@ import alert from 'src/components/utils/alert'
 import { Account } from 'src/entities/account'
 import { useTranslation } from 'react-i18next'
 import AutoCompleteTextarea, { ArgProps as AutoCompleteTextareaProps } from './AutoCompleteTextarea'
+import languages from 'src/utils/languages'
 
 type Props = {
  server: Server
@@ -38,6 +40,7 @@ type Props = {
  edit_target?: Entity.Status
  defaultVisibility?: 'public' | 'unlisted' | 'private' | 'direct'
  defaultNSFW?: boolean
+ defaultLanguage?: string | null
  onClose?: () => void
 }
 
@@ -77,6 +80,7 @@ const Status: React.FC<Props> = props => {
  const [loading, setLoading] = useState<boolean>(false)
  const [visibility, setVisibility] = useState<'public' | 'unlisted' | 'private' | 'direct'>('public')
  const [cw, setCW] = useState<boolean>(false)
+ const [language, setLanguage] = useState<string>('en')
 
  const formRef = useRef<any>()
  const statusRef = useRef<HTMLDivElement>()
@@ -120,6 +124,9 @@ const Status: React.FC<Props> = props => {
  .filter(a => a !== props.account.username)
  setFormValue({ spoiler: '', status: `${mentionAccounts.map(m => `@${m}`).join(' ')} ` })
  setVisibility(props.in_reply_to.visibility)
+ if (props.in_reply_to.language) {
+ setLanguage(props.in_reply_to.language)
+ }
  }
  }, [props.in_reply_to, props.account])
 
@@ -148,6 +155,9 @@ const Status: React.FC<Props> = props => {
  }
  setFormValue(value)
  setVisibility(target.visibility)
+ if (target.language) {
+ setLanguage(target.language)
+ }
  }
  f()
  }
@@ -169,6 +179,12 @@ const Status: React.FC<Props> = props => {
  }
  }, [props.defaultNSFW])
 
+ useEffect(() => {
+ if (props.defaultLanguage) {
+ setLanguage(props.defaultLanguage)
+ }
+ }, [props.defaultLanguage])
+
  const handleSubmit = async () => {
  if (loading) {
  return
@@ -197,6 +213,11 @@ const Status: React.FC<Props> = props => {
  sensitive: formValue.nsfw
  })
  }
+ if (language) {
+ options = Object.assign({}, options, {
+ language: language
+ })
+ }
  if (formValue.spoiler.length > 0) {
  options = Object.assign({}, options, {
  spoiler_text: formValue.spoiler
@@ -351,6 +372,25 @@ const Status: React.FC<Props> = props => {
  )
  }
 
+ const LanguageDropdown = ({ onClose, left, top, className }, ref: any) => {
+ const handleSelect = (key: string) => {
+ setLanguage(key)
+ onClose()
+ }
+
+ return (
+ <Popover ref={ref} className={className} style={{ left, top }} full>
+ <Dropdown.Menu onSelect={handleSelect} style={{ maxHeight: '300px', overflowX: 'scroll' }}>
+ {languages.map((l, index) => (
+ <Dropdown.Item key={index} eventKey={l.value}>
+ {l.label}
+ </Dropdown.Item>
+ ))}
+ </Dropdown.Menu>
+ </Popover>
+ )
+ }
+
  const targetId = () => {
  if (props.in_reply_to) {
  return `emoji-picker-reply-${props.in_reply_to.id}`
@@ -414,6 +454,11 @@ const Status: React.FC<Props> = props => {
  <Button appearance="subtle" onClick={() => setCW(previous => !previous)}>
  <span style={{ fontSize: '0.8em' }}>CW</span>
  </Button>
+ <Whisper placement="bottomEnd" delay={100} trigger="click" speaker={LanguageDropdown} preventOverflow>
+ <Button appearance="subtle">
+ <span style={{ fontSize: '0.8em' }}>{language.toUpperCase()}</span>
+ </Button>
+ </Whisper>
  </ButtonToolbar>
  </Form.Group>
  {formValue.attachments?.length > 0 && (

src/utils/languages.json

@@ -0,0 +1,184 @@
+[
+ {"label":"Afar","value":"aa"},
+ {"label":"Abkhaz","value":"ab"},
+ {"label":"Avestan","value":"ae"},
+ {"label":"Afrikaans","value":"af"},
+ {"label":"Akan","value":"ak"},
+ {"label":"Amharic","value":"am"},
+ {"label":"Aragonese","value":"an"},
+ {"label":"Arabic","value":"ar"},
+ {"label":"Assamese","value":"as"},
+ {"label":"Avaric","value":"av"},
+ {"label":"Aymara","value":"ay"},
+ {"label":"Azerbaijani","value":"az"},
+ {"label":"Bashkir","value":"ba"},
+ {"label":"Belarusian","value":"be"},
+ {"label":"Bulgarian","value":"bg"},
+ {"label":"Bihari","value":"bh"},
+ {"label":"Bislama","value":"bi"},
+ {"label":"Bambara","value":"bm"},
+ {"label":"Bengali","value":"bn"},
+ {"label":"Tibetan","value":"bo"},
+ {"label":"Breton","value":"br"},
+ {"label":"Bosnian","value":"bs"},
+ {"label":"Catalan","value":"ca"},
+ {"label":"Chechen","value":"ce"},
+ {"label":"Chamorro","value":"ch"},
+ {"label":"Corsican","value":"co"},
+ {"label":"Cree","value":"cr"},
+ {"label":"Czech","value":"cs"},
+ {"label":"Old Church Slavonic","value":"cu"},
+ {"label":"Chuvash","value":"cv"},
+ {"label":"Welsh","value":"cy"},
+ {"label":"Danish","value":"da"},
+ {"label":"German","value":"de"},
+ {"label":"Divehi","value":"dv"},
+ {"label":"Dzongkha","value":"dz"},
+ {"label":"Ewe","value":"ee"},
+ {"label":"Greek","value":"el"},
+ {"label":"English","value":"en"},
+ {"label":"Esperanto","value":"eo"},
+ {"label":"Spanish","value":"es"},
+ {"label":"Estonian","value":"et"},
+ {"label":"Basque","value":"eu"},
+ {"label":"Persian","value":"fa"},
+ {"label":"Fula","value":"ff"},
+ {"label":"Finnish","value":"fi"},
+ {"label":"Fijian","value":"fj"},
+ {"label":"Faroese","value":"fo"},
+ {"label":"French","value":"fr"},
+ {"label":"Western Frisian","value":"fy"},
+ {"label":"Irish","value":"ga"},
+ {"label":"Scottish Gaelic","value":"gd"},
+ {"label":"Galician","value":"gl"},
+ {"label":"Gujarati","value":"gu"},
+ {"label":"Manx","value":"gv"},
+ {"label":"Hausa","value":"ha"},
+ {"label":"Hebrew","value":"he"},
+ {"label":"Hindi","value":"hi"},
+ {"label":"Hiri Motu","value":"ho"},
+ {"label":"Croatian","value":"hr"},
+ {"label":"Haitian","value":"ht"},
+ {"label":"Hungarian","value":"hu"},
+ {"label":"Armenian","value":"hy"},
+ {"label":"Herero","value":"hz"},
+ {"label":"Interlingua","value":"ia"},
+ {"label":"Indonesian","value":"id"},
+ {"label":"Interlingue","value":"ie"},
+ {"label":"Igbo","value":"ig"},
+ {"label":"Nuosu","value":"ii"},
+ {"label":"Inupiaq","value":"ik"},
+ {"label":"Ido","value":"io"},
+ {"label":"Icelandic","value":"is"},
+ {"label":"Italian","value":"it"},
+ {"label":"Inuktitut","value":"iu"},
+ {"label":"Japanese","value":"ja"},
+ {"label":"Javanese","value":"jv"},
+ {"label":"Georgian","value":"ka"},
+ {"label":"Kongo","value":"kg"},
+ {"label":"Kikuyu","value":"ki"},
+ {"label":"Kwanyama","value":"kj"},
+ {"label":"Kazakh","value":"kk"},
+ {"label":"Kalaallisut","value":"kl"},
+ {"label":"Khmer","value":"km"},
+ {"label":"Kannada","value":"kn"},
+ {"label":"Korean","value":"ko"},
+ {"label":"Kanuri","value":"kr"},
+ {"label":"Kashmiri","value":"ks"},
+ {"label":"Kurmanji (Kurdish)","value":"ku"},
+ {"label":"Komi","value":"kv"},
+ {"label":"Cornish","value":"kw"},
+ {"label":"Kyrgyz","value":"ky"},
+ {"label":"Latin","value":"la"},
+ {"label":"Luxembourgish","value":"lb"},
+ {"label":"Ganda","value":"lg"},
+ {"label":"Limburgish","value":"li"},
+ {"label":"Lingala","value":"ln"},
+ {"label":"Lao","value":"lo"},
+ {"label":"Lithuanian","value":"lt"},
+ {"label":"Luba-Katanga","value":"lu"},
+ {"label":"Latvian","value":"lv"},
+ {"label":"Malagasy","value":"mg"},
+ {"label":"Marshallese","value":"mh"},
+ {"label":"Māori","value":"mi"},
+ {"label":"Macedonian","value":"mk"},
+ {"label":"Malayalam","value":"ml"},
+ {"label":"Mongolian","value":"mn"},
+ {"label":"Marathi","value":"mr"},
+ {"label":"Malay","value":"ms"},
+ {"label":"Maltese","value":"mt"},
+ {"label":"Burmese","value":"my"},
+ {"label":"Nauru","value":"na"},
+ {"label":"Norwegian Bokmål","value":"nb"},
+ {"label":"Northern Ndebele","value":"nd"},
+ {"label":"Nepali","value":"ne"},
+ {"label":"Ndonga","value":"ng"},
+ {"label":"Dutch","value":"nl"},
+ {"label":"Norwegian Nynorsk","value":"nn"},
+ {"label":"Norwegian","value":"no"},
+ {"label":"Southern Ndebele","value":"nr"},
+ {"label":"Navajo","value":"nv"},
+ {"label":"Chichewa","value":"ny"},
+ {"label":"Occitan","value":"oc"},
+ {"label":"Ojibwe","value":"oj"},
+ {"label":"Oromo","value":"om"},
+ {"label":"Oriya","value":"or"},
+ {"label":"Ossetian","value":"os"},
+ {"label":"Panjabi","value":"pa"},
+ {"label":"Pāli","value":"pi"},
+ {"label":"Polish","value":"pl"},
+ {"label":"Pashto","value":"ps"},
+ {"label":"Portuguese","value":"pt"},
+ {"label":"Quechua","value":"qu"},
+ {"label":"Romansh","value":"rm"},
+ {"label":"Kirundi","value":"rn"},
+ {"label":"Romanian","value":"ro"},
+ {"label":"Russian","value":"ru"},
+ {"label":"Kinyarwanda","value":"rw"},
+ {"label":"Sanskrit","value":"sa"},
+ {"label":"Sardinian","value":"sc"},
+ {"label":"Sindhi","value":"sd"},
+ {"label":"Northern Sami","value":"se"},
+ {"label":"Sango","value":"sg"},
+ {"label":"Sinhala","value":"si"},
+ {"label":"Slovak","value":"sk"},
+ {"label":"Slovenian","value":"sl"},
+ {"label":"Shona","value":"sn"},
+ {"label":"Somali","value":"so"},
+ {"label":"Albanian","value":"sq"},
+ {"label":"Serbian","value":"sr"},
+ {"label":"Swati","value":"ss"},
+ {"label":"Southern Sotho","value":"st"},
+ {"label":"Sundanese","value":"su"},
+ {"label":"Swedish","value":"sv"},
+ {"label":"Swahili","value":"sw"},
+ {"label":"Tamil","value":"ta"},
+ {"label":"Telugu","value":"te"},
+ {"label":"Tajik","value":"tg"},
+ {"label":"Thai","value":"th"},
+ {"label":"Tigrinya","value":"ti"},
+ {"label":"Turkmen","value":"tk"},
+ {"label":"Tagalog","value":"tl"},
+ {"label":"Tswana","value":"tn"},
+ {"label":"Tonga","value":"to"},
+ {"label":"Turkish","value":"tr"},
+ {"label":"Tsonga","value":"ts"},
+ {"label":"Tatar","value":"tt"},
+ {"label":"Twi","value":"tw"},
+ {"label":"Tahitian","value":"ty"},
+ {"label":"Uyghur","value":"ug"},
+ {"label":"Ukrainian","value":"uk"},
+ {"label":"Urdu","value":"ur"},
+ {"label":"Uzbek","value":"uz"},
+ {"label":"Venda","value":"ve"},
+ {"label":"Vietnamese","value":"vi"},
+ {"label":"Volapük","value":"vo"},
+ {"label":"Walloon","value":"wa"},
+ {"label":"Wolof","value":"wo"},
+ {"label":"Xhosa","value":"xh"},
+ {"label":"Yiddish","value":"yi"},
+ {"label":"Yoruba","value":"yo"},
+ {"label":"Zhuang","value":"za"},
+ {"label":"Chinese","value":"zh"},
+ {"label":"Zulu","value":"zu"}
+]

src/utils/languages.ts

@@ -0,0 +1,8 @@
+import languages from './languages.json'
+
+type Language = {
+ label: string
+ value: string
+}
+
+export default languages as Array<Language>