wonderlandpark/core
2
1
Fork 0
mirror of https://github.com/koreanbots/core.git synced 2025-12-15 14:10:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: added char count at textarea

Browse Source 
close: https://github.com/koreanbots/v2-testing/issues/112
This commit is contained in:
wonderlandpark 2021-05-27 20:20:39 +09:00
parent 173ae4009a
commit 1e17ea5eb8
2 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/Form/TextArea.tsx
View File

@ -10,7 +10,7 @@ import 'emoji-mart/css/emoji-mart.css'
const TextArea: React.FC<TextAreaProps> = ({ name, placeholder, theme='auto', setValue, value }) => {
const TextArea: React.FC<TextAreaProps> = ({ name, placeholder, theme='auto', max, setValue, value }) => {
const ref = useRef()
const [ emojiPickerHidden, setEmojiPickerHidden ] = useState(true)
useOutsideClick(ref, () => {
@ -20,7 +20,7 @@ const TextArea: React.FC<TextAreaProps> = ({ name, placeholder, theme='auto', se
return <div className='border border-grey-light dark:border-transparent h-96 text-black dark:bg-very-black dark:text-white rounded px-4 py-3 inline-block relative w-full'>
<Field as='textarea' name={name} className='dark:border-transparent text-black dark:bg-very-black dark:text-white w-full relative h-full resize-none outline-none' placeholder={placeholder} />
<div ref={ref}>
<div className='absolute bottom-12 -right-3 sm:right-8 z-30'>
<div className='absolute bottom-12 left-10 z-30'>
{
!emojiPickerHidden && <Picker title='선택해주세요' emoji='sunglasses' set='twitter' enableFrequentEmojiSort theme={theme} showSkinTones={false} onSelect={(e) => {
setEmojiPickerHidden(true)
@ -44,9 +44,14 @@ const TextArea: React.FC<TextAreaProps> = ({ name, placeholder, theme='auto', se
}} custom={KoreanbotsEmoji}/>
}
</div>
<div className='absolute bottom-3 right-8'>
<div className='absolute bottom-2 left-4 hidden sm:block'>
<div className='emoji-selector-button outline-none' onClick={() => setEmojiPickerHidden(false)} onKeyPress={() => setEmojiPickerHidden(false)} role='button' tabIndex={0} />
</div>
{
max && <span className={`absolute bottom-2 right-4${max < value.length ? ' text-red-400' : ''}`}>
{max-value.length}
</span>
}
</div>
</div>
}
@ -55,6 +60,7 @@ interface TextAreaProps {
name: string
placeholder?: string
theme?: 'auto' | 'dark' | 'light'
max?: number
value: string
setValue(value: string): void
}

2
pages/addbot.tsx
View File

@ -169,7 +169,7 @@ const AddBot:NextPage<AddBotProps> = ({ logged, user, csrfToken, theme }) => {
<Input name='intro' placeholder='국내 봇을 한 곳에서.' />
</Label>
<Label For='intro' label='봇 설명' labelDesc={<>봇을 자세하게 설명해주세요! (최대 1500자)<br/>마크다운을 지원합니다!</>} error={errors.desc && touched.desc ? errors.desc : null} required>
<TextArea name='desc' placeholder='봇에 대해 최대한 자세히 설명해주세요!' theme={theme === 'dark' ? 'dark' : 'light'} value={values.desc} setValue={(value) => setFieldValue('desc', value)} />
<TextArea max={1500} name='desc' placeholder='봇에 대해 최대한 자세히 설명해주세요!' theme={theme === 'dark' ? 'dark' : 'light'} value={values.desc} setValue={(value) => setFieldValue('desc', value)} />
</Label>
<Label For='preview' label='설명 미리보기' labelDesc='다음 결과는 실제와 다를 수 있습니다.'>
<Segment>