d0a2726f07
This adds a slugModifier optional prop for most data entries the modifier will be used with the slug to form input element IDs, names and for attributes of label. This ensures that clicking on a label for a complex attribute will focus/highlight the correct input field.
57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
import React, { Fragment } from 'react';
|
|
|
|
import { CopyProps } from '../data-containers/category-view-props';
|
|
|
|
import { DataEntryInput, TextDataEntryInputProps } from './data-entry-input';
|
|
import { DataTitleCopyable } from './data-title';
|
|
|
|
interface BaseDataEntryProps {
|
|
slug: string;
|
|
slugModifier?: string | number; // string used with slug with array items (ensures the form labels link to the input for the correct item)
|
|
title: string;
|
|
tooltip?: string;
|
|
disabled?: boolean;
|
|
copy?: CopyProps; // CopyProps clashes with propTypes
|
|
mode?: 'view' | 'edit' | 'multi-edit';
|
|
isUrl?: boolean;
|
|
required?: boolean;
|
|
onChange?: (key: string, value: any) => void;
|
|
}
|
|
|
|
interface DataEntryProps extends BaseDataEntryProps, TextDataEntryInputProps {
|
|
value?: string;
|
|
}
|
|
|
|
const DataEntry: React.FC<DataEntryProps> = (props) => {
|
|
return (
|
|
<Fragment>
|
|
<DataTitleCopyable
|
|
slug={props.slug}
|
|
slugModifier={props.slugModifier}
|
|
title={props.title}
|
|
tooltip={props.tooltip}
|
|
disabled={props.disabled || props.value == undefined || props.value == ''}
|
|
copy={props.copy}
|
|
/>
|
|
<DataEntryInput
|
|
slug={props.slug}
|
|
name={props.slug + props.slugModifier ?? ''}
|
|
value={props.value}
|
|
onChange={props.onChange}
|
|
disabled={props.mode === 'view' || props.disabled}
|
|
|
|
maxLength={props.maxLength}
|
|
placeholder={props.placeholder}
|
|
isUrl={props.isUrl}
|
|
required={props.required}
|
|
valueTransform={props.valueTransform}
|
|
/>
|
|
</Fragment>
|
|
);
|
|
};
|
|
|
|
export default DataEntry;
|
|
export {
|
|
BaseDataEntryProps
|
|
};
|