-
+
+
setValue(e.target.value)}
+ id={inputId(props)}
name={name}
required={required}
disabled={locked}
+ placeholder={placeholder}
+ aria-describedby={descId(props)}
/>
- {props.error ?
Error: {props.error}
: null}
+
)
}
@@ -48,14 +51,22 @@ interface FormFieldCheckboxProps extends BaseFormFieldProps {
}
export const FormFieldCheckboxComp: FC
= (props) => {
- const { className, name, title, required, locked } = props
+ const { name, required, locked } = props
+
return (
-
-
-
- {props.error ?
Error: {props.error}
: null}
+
+
+
+
)
}
@@ -67,20 +78,21 @@ interface FormFieldSelectProps extends BaseFormFieldProps {
}
export const FormFieldSelectComp: FC
= (props) => {
- const { className, name, title, required, locked, choices } = props
+ const { name, required, locked, choices } = props
const [value, setValue] = useState(props.initial ?? '')
return (
-
-
+
+
- {props.error ?
Error: {props.error}
: null}
+
)
}
@@ -101,27 +113,54 @@ interface FormFieldFileProps extends BaseFormFieldProps {
}
export const FormFieldFileComp: FC
= (props) => {
- const { className, name, title, required, locked, multiple, accept } = props
+ const { name, required, locked, multiple, accept } = props
return (
-
-
-
- {props.error ?
Error: {props.error}
: null}
+
+
+
+
)
}
-const Title: FC<{ title: string[] }> = ({ title }) => {
+const Label: FC
= (props) => {
+ const { title } = props
return (
- <>
+
+ )
+}
+
+const inputId = (props: FormFieldProps) => `form-field-${props.name}`
+const descId = (props: FormFieldProps) => (props.description ? `${inputId(props)}-desc` : undefined)
+
+const ErrorDescription: FC = (props) => {
+ const { description, error } = props
+ const descClassName = useClassName(props, { el: 'description' })
+ const errorClassName = useClassName(props, { el: 'error' })
+ return (
+ <>
+ {description ? (
+
+ {description}
+
+ ) : null}
+ {error ? {error}
: null}
)
}
diff --git a/packages/fastui/src/components/Json.tsx b/packages/fastui/src/components/Json.tsx
index 6042b73..f4eb796 100644
--- a/packages/fastui/src/components/Json.tsx
+++ b/packages/fastui/src/components/Json.tsx
@@ -1,10 +1,13 @@
import { FC } from 'react'
+import { ClassName } from '../hooks/className'
+
export type JsonData = string | number | boolean | null | JsonData[] | { [key: string]: JsonData }
export interface JsonProps {
value: JsonData
type: 'JSON'
+ className?: ClassName
}
export const JsonComp: FC = ({ value }) => {
diff --git a/packages/fastui/src/components/LinkList.tsx b/packages/fastui/src/components/LinkList.tsx
new file mode 100644
index 0000000..91cc12f
--- /dev/null
+++ b/packages/fastui/src/components/LinkList.tsx
@@ -0,0 +1,18 @@
+import { ClassName, useClassName } from '../hooks/className'
+
+import { LinkProps, LinkComp } from './link'
+
+export interface LinkListProps {
+ type: 'LinkList'
+ links: LinkProps[]
+ mode?: 'tabs' | 'vertical'
+ className?: ClassName
+}
+
+export const LinkListComp = (props: LinkListProps) => (
+
+ {props.links.map((link, i) => (
+
+ ))}
+
+)
diff --git a/packages/fastui/src/components/PageTitle.tsx b/packages/fastui/src/components/PageTitle.tsx
new file mode 100644
index 0000000..54915db
--- /dev/null
+++ b/packages/fastui/src/components/PageTitle.tsx
@@ -0,0 +1,16 @@
+import { FC, useEffect } from 'react'
+
+export interface PageTitleProps {
+ type: 'PageTitle'
+ text: string
+}
+
+export const PageTitleComp: FC = (props) => {
+ const { text } = props
+
+ useEffect(() => {
+ document.title = text
+ }, [text])
+
+ return <>
+}
diff --git a/packages/fastui/src/components/ServerLoad.tsx b/packages/fastui/src/components/ServerLoad.tsx
index ecc277c..e4b2e49 100644
--- a/packages/fastui/src/components/ServerLoad.tsx
+++ b/packages/fastui/src/components/ServerLoad.tsx
@@ -6,7 +6,7 @@ import { request } from '../tools'
import { DefaultLoading } from '../DefaultLoading'
import { ConfigContext } from '../hooks/config'
-import { AnyComp, FastProps } from './index'
+import { AnyCompList, FastProps } from './index'
export interface ServerLoadProps {
type: 'ServerLoad'
@@ -14,7 +14,7 @@ export interface ServerLoadProps {
}
export const ServerLoadComp: FC = ({ url }) => {
- const [componentProps, setComponentProps] = useState(null)
+ const [componentProps, setComponentProps] = useState(null)
const { error, setError } = useContext(ErrorContext)
const reloadValue = useContext(ReloadContext)
@@ -32,7 +32,7 @@ export const ServerLoadComp: FC = ({ url }) => {
const promise = request({ url: fetchUrl })
promise
- .then(([, data]) => setComponentProps(data as FastProps))
+ .then(([, data]) => setComponentProps(data as FastProps[]))
.catch((e) => {
setError({ title: 'Request Error', description: e.message })
})
@@ -50,6 +50,6 @@ export const ServerLoadComp: FC = ({ url }) => {
return
}
} else {
- return
+ return
}
}
diff --git a/packages/fastui/src/components/button.tsx b/packages/fastui/src/components/button.tsx
index 4e47f10..31ed136 100644
--- a/packages/fastui/src/components/button.tsx
+++ b/packages/fastui/src/components/button.tsx
@@ -1,23 +1,23 @@
import { FC } from 'react'
-import { ClassName, useClassNameGenerator } from '../hooks/className'
-import { useFireEvent, PageEvent, GoToEvent } from '../hooks/event'
+import { ClassName, useClassName } from '../hooks/className'
+import { useFireEvent, AnyEvent } from '../hooks/events'
export interface ButtonProps {
type: 'Button'
text: string
- onClick?: PageEvent | GoToEvent
+ onClick?: AnyEvent
htmlType?: 'button' | 'submit' | 'reset'
className?: ClassName
}
export const ButtonComp: FC = (props) => {
- const { className, text, onClick, htmlType } = props
+ const { text, onClick, htmlType } = props
const { fireEvent } = useFireEvent()
return (
-