blsmedia/bot
2
0
Fork 0
Code Activity

♻️ Better phone input props pass

Browse Source
This commit is contained in:
Baptiste Arnaud
2023-02-27 10:44:52 +01:00
parent 2fc78a5b7d
commit 73ef12db72
2 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/js/src/components/InputChatBlock.tsx
View File

@ -146,7 +146,10 @@ const Input = (props: {
</Match>
<Match when={props.block.type === InputBlockType.PHONE}>
<PhoneInput
block={props.block as PhoneNumberInputBlock}
labels={(props.block as PhoneNumberInputBlock).options.labels}
defaultCountryCode={
(props.block as PhoneNumberInputBlock).options.defaultCountryCode
}
defaultValue={getPrefilledValue()}
onSubmit={onSubmit}
hasGuestAvatar={props.hasGuestAvatar}

19
packages/js/src/features/blocks/inputs/phone/components/PhoneInput.tsx
View File

@ -2,24 +2,23 @@ import { ShortTextInput } from '@/components'
import { SendButton } from '@/components/SendButton'
import { InputSubmitContent } from '@/types'
import { isMobile } from '@/utils/isMobileSignal'
import type { PhoneNumberInputBlock } from 'models'
import type { PhoneNumberInputOptions } from 'models'
import { createSignal, For, onMount } from 'solid-js'
import { isEmpty } from 'utils'
import { phoneCountries } from 'utils/phoneCountries'
type PhoneInputProps = {
block: PhoneNumberInputBlock
type PhoneInputProps = Pick<
PhoneNumberInputOptions,
'labels' | 'defaultCountryCode'
> & {
defaultValue?: string
onSubmit: (value: InputSubmitContent) => void
hasGuestAvatar: boolean
}
export const PhoneInput = (props: PhoneInputProps) => {
// eslint-disable-next-line solid/reactivity
const defaultCountryCode = props.block.options.defaultCountryCode
const [selectedCountryCode, setSelectedCountryCode] = createSignal(
isEmpty(defaultCountryCode) ? 'INT' : defaultCountryCode
isEmpty(props.defaultCountryCode) ? 'INT' : props.defaultCountryCode
)
const [inputValue, setInputValue] = createSignal(props.defaultValue ?? '')
let inputRef: HTMLInputElement | undefined
@ -102,9 +101,7 @@ export const PhoneInput = (props: PhoneInputProps) => {
ref={inputRef}
value={inputValue()}
onInput={handleInput}
placeholder={
props.block.options.labels.placeholder ?? 'Your phone number...'
}
placeholder={props.labels.placeholder ?? 'Your phone number...'}
autofocus={!isMobile()}
/>
</div>
@ -115,7 +112,7 @@ export const PhoneInput = (props: PhoneInputProps) => {
class="my-2 ml-2"
on:click={submit}
>
{props.block.options?.labels?.button ?? 'Send'}
{props.labels?.button ?? 'Send'}
</SendButton>
</div>
)