Commit b92cce8f authored by Stefan Probst's avatar Stefan Probst
Browse files

fix: position delete button

parent 727cad10
Pipeline #177696 passed with stage
in 5 minutes and 14 seconds
......@@ -831,8 +831,8 @@ export type VocabularyDto = {
conceptResults?: PaginatedConcepts
}
// const defaultBaseUrl = 'http://localhost:8080'
const defaultBaseUrl = 'https://sshoc-marketplace-api.acdh-dev.oeaw.ac.at'
const defaultBaseUrl = 'http://localhost:8080'
// const defaultBaseUrl = 'https://sshoc-marketplace-api.acdh-dev.oeaw.ac.at'
export { defaultBaseUrl as baseUrl }
......
......@@ -27,7 +27,15 @@ export function ActorsFormSection(props: ActorsFormSectionProps): JSX.Element {
<FormRecords>
{fields.map((name, index) => {
return (
<FormRecord key={name}>
<FormRecord
key={name}
actions={
<FormFieldRemoveButton
onPress={() => fields.remove(index)}
aria-label={'Remove actor'}
/>
}
>
<ActorRoleSelect
name={`${name}.role.code`}
label={'Actor role'}
......@@ -38,10 +46,6 @@ export function ActorsFormSection(props: ActorsFormSectionProps): JSX.Element {
index={index}
initialValues={props.initialValues}
/>
<FormFieldRemoveButton
onPress={() => fields.remove(index)}
aria-label={'Remove actor'}
/>
</FormRecord>
)
})}
......@@ -93,6 +97,12 @@ interface ActorComboBoxProps {
* Actor.
*/
function ActorComboBox(props: ActorComboBoxProps): JSX.Element {
/**
* Populate the input field with the label of the initially selected item (if any),
* which triggers a search request. The result set should include the initial item.
*
* TODO: should the initial value always be included in the combobox options?
*/
const initialLabel =
props.initialValues?.contributors?.[props.index]?.actor.name ?? ''
......
......@@ -30,17 +30,21 @@ export function MainFormSection(): JSX.Element {
<FormRecords>
{fields.map((name, index) => {
return (
<FormRecord key={name}>
<FormRecord
key={name}
actions={
<FormFieldRemoveButton
onPress={() => fields.remove(index)}
aria-label={'Remove URL'}
/>
}
>
<FormTextField
name={name}
label={'Accessible at'}
variant="form"
style={{ flex: 1 }}
/>
<FormFieldRemoveButton
onPress={() => fields.remove(index)}
aria-label={'Remove URL'}
/>
</FormRecord>
)
})}
......
......@@ -56,7 +56,15 @@ export function PropertiesFormSection(
<FormRecords>
{fields.map((name, index) => {
return (
<FormRecord key={name}>
<FormRecord
key={name}
actions={
<FormFieldRemoveButton
onPress={() => fields.remove(index)}
aria-label={'Remove property'}
/>
}
>
<PropertyTypeSelect
name={`${name}.type.code`}
label={'Property type'}
......@@ -94,10 +102,6 @@ export function PropertiesFormSection(
style={{ flex: 1 }}
/>
</FormFieldCondition>
<FormFieldRemoveButton
onPress={() => fields.remove(index)}
aria-label={'Remove property'}
/>
</FormRecord>
)
})}
......@@ -153,9 +157,14 @@ interface PropertyConceptSelectProps {
* the concept `id` and vocabulary `id`.
*/
function PropertyConceptSelect(props: PropertyConceptSelectProps): JSX.Element {
/**
* Populate the input field with the label of the initially selected item (if any),
* which triggers a search request. The result set should include the initial item.
*
* TODO: should the initial value always be included in the combobox options?
*/
const initialLabel =
props.initialValues?.properties?.[props.index]?.concept?.label ?? ''
console.log(initialLabel)
const [searchTerm, setSearchTerm] = useState(initialLabel)
const debouncedSearchTerm = useDebouncedState(searchTerm, 150).trim()
......
......@@ -29,7 +29,15 @@ export function RelatedItemsFormSection(
<FormRecords>
{fields.map((name, index) => {
return (
<FormRecord key={name}>
<FormRecord
key={name}
actions={
<FormFieldRemoveButton
onPress={() => fields.remove(index)}
aria-label={'Remove related item'}
/>
}
>
<RelationTypeSelect
name={`${name}.relation.code`}
label={'Relation type'}
......@@ -40,10 +48,6 @@ export function RelatedItemsFormSection(
initialValues={props.initialValues}
index={index}
/>
<FormFieldRemoveButton
onPress={() => fields.remove(index)}
aria-label={'Remove related item'}
/>
</FormRecord>
)
})}
......@@ -95,6 +99,12 @@ interface RelatedItemComboBoxProps {
* Related item.
*/
function RelatedItemComboBox(props: RelatedItemComboBoxProps): JSX.Element {
/**
* Populate the input field with the label of the initially selected item (if any),
* which triggers a search request. The result set should include the initial item.
*
* TODO: should the initial value always be included in the combobox options?
*/
const initialLabel =
props.initialValues?.relatedItems?.[props.index]?.label ?? ''
......
import { useButton } from '@react-aria/button'
import type { AriaButtonProps } from '@react-types/button'
import cx from 'clsx'
import type { ReactNode } from 'react'
// import type { ReactNode } from 'react'
import { useRef } from 'react'
import { Icon } from '@/elements/Icon/Icon'
......@@ -9,7 +9,7 @@ import { Svg as CrossIcon } from '@/elements/icons/small/cross.svg'
export interface FormFieldRemoveButtonProps extends AriaButtonProps {
onPress: () => void
children?: ReactNode
// children?: ReactNode
}
/**
......@@ -23,8 +23,8 @@ export function FormFieldRemoveButton(
const styles = {
button: cx(
'py-5' /** Match form field height. */,
'px-5 cursor-default flex-grow-0 flex-shrink-0 transition inline-flex space-x-1.5 items-center font-body font-normal font-ui-base text-primary-750 hover:text-secondary-600 focus:text-gray-800 focus:outline-none',
// 'px-5 py-5' /** Match form field height. */,
'cursor-default flex-grow-0 flex-shrink-0 transition inline-flex space-x-1.5 items-center font-body font-normal font-ui-base text-primary-750 hover:text-secondary-600 focus:text-gray-800 focus:outline-none',
),
icon: 'w-2.5 h-2.5',
}
......@@ -32,7 +32,8 @@ export function FormFieldRemoveButton(
return (
<button {...buttonProps} className={styles.button}>
<Icon icon={CrossIcon} className={styles.icon} />
<span>{props.children}</span>
{/* <span>{props.children}</span> */}
<span>Delete</span>
</button>
)
}
......@@ -4,6 +4,7 @@ import type { ReactNode } from 'react'
export interface FormRecordProps {
className?: string
children?: ReactNode
actions?: ReactNode
}
/**
......@@ -13,6 +14,9 @@ export function FormRecord(props: FormRecordProps): JSX.Element {
return (
<div className={cx('flex items-end space-x-4 relative', props.className)}>
{props.children}
{props.actions !== undefined ? (
<div className="absolute top-0 right-0">{props.actions}</div>
) : null}
</div>
)
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment