IT4Change/ohmyform-ui
3
0
Fork 0
mirror of https://github.com/IT4Change/ohmyform-ui.git synced 2025-12-13 09:45:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

update autofocus

Browse Source
This commit is contained in:
Michael Schramm 2021-05-15 17:44:34 +02:00
parent d5dff46816
commit bef465f8d3
13 changed files with 40 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc.js
View File

@ -21,6 +21,7 @@ module.exports = {
'react/prop-types': 'off',
'@typescript-eslint/no-empty-interface': 'off',
'@typescript-eslint/no-var-requires': 'off',
'jsx-a11y/no-autofocus': 'off'
},
settings: {
react: {

5
components/form/layouts/card/field.tsx
View File

@ -11,11 +11,12 @@ import { TextType } from '../../types/text.type'
import { FieldTypeProps } from '../../types/type.props'
interface Props {
focus: boolean
field: FormPublicFieldFragment
design: FormPublicDesignFragment
}
export const Field: React.FC<Props> = ({ field, design, ...props }) => {
export const Field: React.FC<Props> = ({ field, design, focus, ...props }) => {
const router = useRouter()
const FieldInput: React.FC<FieldTypeProps> = fieldTypes[field.type] || TextType
@ -56,7 +57,7 @@ export const Field: React.FC<Props> = ({ field, design, ...props }) => {
<StyledMarkdown design={design} type={'question'} source={field.description} />
)}
<FieldInput design={design} field={field} urlValue={getUrlDefault()} />
<FieldInput design={design} field={field} urlValue={getUrlDefault()} focus={focus} />
</div>
</div>
)

2
components/form/layouts/card/index.tsx
View File

@ -81,7 +81,7 @@ export const CardLayout: React.FC<LayoutProps> = (props) => {
return null
}
return <Field key={field.id} field={field} design={design} />
return <Field key={field.id} field={field} design={design} focus={i === 0} />
})}
<div
style={{

2
components/form/layouts/layout.props.ts
View File

@ -1,4 +1,4 @@
import { FormPublicFragment, } from '../../../graphql/fragment/form.public.fragment'
import { FormPublicFragment } from '../../../graphql/fragment/form.public.fragment'
import { Submission } from '../../use.submission'
export interface LayoutProps {

19
components/form/layouts/slider/page.module.scss
View File

@ -0,0 +1,19 @@
.main {
display: flex;
flex-direction: column;
.content {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
overflow: auto;
padding: 16px;
@media (max-width: 600px) {
display: block;
}
}
}

3
components/form/types/date.type.tsx
View File

@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next'
import { StyledDateInput } from '../../styled/date.input'
import { FieldTypeProps } from './type.props'
export const DateType: React.FC<FieldTypeProps> = ({ field, design, urlValue }) => {
export const DateType: React.FC<FieldTypeProps> = ({ field, design, urlValue, focus }) => {
const [min, setMin] = useState<Dayjs>()
const [max, setMax] = useState<Dayjs>()
const { t } = useTranslation()
@ -42,6 +42,7 @@ export const DateType: React.FC<FieldTypeProps> = ({ field, design, urlValue })
initialValue={initialValue}
>
<StyledDateInput
autoFocus={focus}
size={'large'}
design={design}
disabledDate={(d: Moment) => {

3
components/form/types/dropdown.type.tsx
View File

@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
import { StyledSelect } from '../../styled/select'
import { FieldTypeProps } from './type.props'
export const DropdownType: React.FC<FieldTypeProps> = ({ field, design, urlValue }) => {
export const DropdownType: React.FC<FieldTypeProps> = ({ field, design, urlValue, focus }) => {
const [open, setOpen] = useState(false)
const { t } = useTranslation()
@ -16,6 +16,7 @@ export const DropdownType: React.FC<FieldTypeProps> = ({ field, design, urlValue
initialValue={urlValue || field.value || null}
>
<StyledSelect
autoFocus={focus}
design={design}
open={open}
onBlur={() => setOpen(false)}

4
components/form/types/email.type.tsx
View File

@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
import { StyledInput } from '../../styled/input'
import { FieldTypeProps } from './type.props'
export const EmailType: React.FC<FieldTypeProps> = ({ field, design, urlValue }) => {
export const EmailType: React.FC<FieldTypeProps> = ({ field, design, urlValue, focus }) => {
const { t } = useTranslation()
return (
@ -17,7 +17,7 @@ export const EmailType: React.FC<FieldTypeProps> = ({ field, design, urlValue })
]}
initialValue={urlValue || field.value}
>
<StyledInput design={design} allowClear size={'large'} />
<StyledInput autoFocus={focus} design={design} allowClear size={'large'} />
</Form.Item>
</div>
)

4
components/form/types/link.type.tsx
View File

@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
import { StyledInput } from '../../styled/input'
import { FieldTypeProps } from './type.props'
export const LinkType: React.FC<FieldTypeProps> = ({ field, design, urlValue }) => {
export const LinkType: React.FC<FieldTypeProps> = ({ field, design, urlValue, focus }) => {
const { t } = useTranslation()
return (
@ -17,7 +17,7 @@ export const LinkType: React.FC<FieldTypeProps> = ({ field, design, urlValue })
]}
initialValue={urlValue || field.value}
>
<StyledInput design={design} allowClear size={'large'} />
<StyledInput autoFocus={focus} design={design} allowClear size={'large'} />
</Form.Item>
</div>
)

4
components/form/types/number.type.tsx
View File

@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
import { StyledNumberInput } from '../../styled/number.input'
import { FieldTypeProps } from './type.props'
export const NumberType: React.FC<FieldTypeProps> = ({ field, design, urlValue }) => {
export const NumberType: React.FC<FieldTypeProps> = ({ field, design, urlValue, focus }) => {
const { t } = useTranslation()
let initialValue: number = undefined
@ -27,7 +27,7 @@ export const NumberType: React.FC<FieldTypeProps> = ({ field, design, urlValue }
]}
initialValue={initialValue}
>
<StyledNumberInput design={design} size={'large'} />
<StyledNumberInput autoFocus={focus} design={design} size={'large'} />
</Form.Item>
</div>
)

4
components/form/types/text.type.tsx
View File

@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
import { StyledInput } from '../../styled/input'
import { FieldTypeProps } from './type.props'
export const TextType: React.FC<FieldTypeProps> = ({ field, design, urlValue }) => {
export const TextType: React.FC<FieldTypeProps> = ({ field, design, urlValue, focus }) => {
const { t } = useTranslation()
// TODO focus when becomes visible
@ -15,7 +15,7 @@ export const TextType: React.FC<FieldTypeProps> = ({ field, design, urlValue })
rules={[{ required: field.required, message: t('validation:valueRequired') }]}
initialValue={urlValue || field.value}
>
<StyledInput design={design} allowClear size={'large'} />
<StyledInput autoFocus={focus} design={design} allowClear size={'large'} />
</Form.Item>
</div>
)

4
components/form/types/textarea.type.tsx
View File

@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
import { StyledTextareaInput } from '../../styled/textarea.input'
import { FieldTypeProps } from './type.props'
export const TextareaType: React.FC<FieldTypeProps> = ({ field, design, urlValue }) => {
export const TextareaType: React.FC<FieldTypeProps> = ({ field, design, urlValue, focus }) => {
const { t } = useTranslation()
return (
@ -14,7 +14,7 @@ export const TextareaType: React.FC<FieldTypeProps> = ({ field, design, urlValue
rules={[{ required: field.required, message: t('validation:valueRequired') }]}
initialValue={urlValue || field.value}
>
<StyledTextareaInput design={design} allowClear autoSize />
<StyledTextareaInput autoFocus={focus} design={design} allowClear autoSize />
</Form.Item>
</div>
)

1
components/form/types/type.props.ts
View File

@ -6,5 +6,6 @@ import {
export interface FieldTypeProps {
field: FormPublicFieldFragment
design: FormPublicDesignFragment
focus?: boolean
urlValue?: string
}