adam/vscode-front-matter
1
0
Fork 0
mirror of https://github.com/estruyf/vscode-front-matter.git synced 2026-07-06 01:41:48 +02:00
Code Issues Packages Projects Releases Wiki Activity

#391 - New description property

Browse Source
This commit is contained in:
Elio Struyf
2022-09-16 16:47:32 +02:00
parent e455fa764b
commit efc230f81e
22 changed files with 139 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/panelWebView/components/DataBlock/DataBlockField.tsx
+8 -1
View File
@@ -10,6 +10,7 @@ import { FieldTitle } from '../Fields/FieldTitle';
export interface IDataBlockFieldProps {
label: string;
description?: string;
settings: PanelSettings;
field: Field;
parentFields: string[];
@@ -28,7 +29,7 @@ export interface IDataBlockFieldProps {
required?: boolean;
}
export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({ label, filePath, settings, field, parentFields = [], value, fieldsRenderer, onSubmit, parentBlock, required }: React.PropsWithChildren<IDataBlockFieldProps>) => {
export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({ label, description, filePath, settings, field, parentFields = [], value, fieldsRenderer, onSubmit, parentBlock, required }: React.PropsWithChildren<IDataBlockFieldProps>) => {
const [ selectedIndex, setSelectedIndex ] = useState<number | null>(null);
const [ selectedGroup, setSelectedGroup ] = useState<FieldGroup | undefined | null>(null);
const [ selectedBlockData, setSelectedBlockData ] = useState<any | null>(null);
@@ -235,6 +236,12 @@ export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({
icon={<PencilIcon />}
required={required} />
{ description && (
<div className={`metadata_field__description`}>
{description}
</div>
)}
{
(!hideSubBlock) ? (
<div className='block_field__form'>
src/panelWebView/components/Fields/ChoiceField.tsx
+3 -3
View File
@@ -6,7 +6,7 @@ import { BaseFieldProps } from '../../../models';
import { Choice } from '../../../models/Choice';
import { ChoiceButton } from './ChoiceButton';
import { FieldTitle } from './FieldTitle';
import { RequiredMessage } from './RequiredMessage';
import { FieldMessage } from './FieldMessage';
export interface IChoiceFieldProps extends BaseFieldProps<string | string[]> {
choices: string[] | Choice[];
@@ -14,7 +14,7 @@ export interface IChoiceFieldProps extends BaseFieldProps<string | string[]> {
onChange: (value: string | string[]) => void;
}
export const ChoiceField: React.FunctionComponent<IChoiceFieldProps> = ({ label, value, choices, multiSelect, onChange, required }: React.PropsWithChildren<IChoiceFieldProps>) => {
export const ChoiceField: React.FunctionComponent<IChoiceFieldProps> = ({ label, description, value, choices, multiSelect, onChange, required }: React.PropsWithChildren<IChoiceFieldProps>) => {
const [ crntSelected, setCrntSelected ] = React.useState<string | string[] | null>(value);
const dsRef = React.useRef<Downshift<string> | null>(null);
@@ -116,7 +116,7 @@ export const ChoiceField: React.FunctionComponent<IChoiceFieldProps> = ({ label,
)}
</Downshift>
<RequiredMessage name={label.toLowerCase()} show={showRequiredState} />
<FieldMessage name={label.toLowerCase()} description={description} showRequired={showRequiredState} />
{
crntSelected instanceof Array ? crntSelected.map((value: string) => (
src/panelWebView/components/Fields/DataFileField.tsx
+4 -3
View File
@@ -8,10 +8,11 @@ import { CommandToCode } from '../../CommandToCode';
import Downshift from 'downshift';
import { ChoiceButton } from './ChoiceButton';
import { FieldTitle } from './FieldTitle';
import { RequiredMessage } from './RequiredMessage';
import { FieldMessage } from './FieldMessage';
export interface IDataFileFieldProps {
label: string;
description?: string;
dataFileId?: string;
dataFileKey?: string;
dataFileValue?: string;
@@ -21,7 +22,7 @@ export interface IDataFileFieldProps {
onChange: (value: string | string[]) => void;
}
export const DataFileField: React.FunctionComponent<IDataFileFieldProps> = ({ label, dataFileId, dataFileKey, dataFileValue, selected, multiSelect, onChange, required }: React.PropsWithChildren<IDataFileFieldProps>) => {
export const DataFileField: React.FunctionComponent<IDataFileFieldProps> = ({ label, description, dataFileId, dataFileKey, dataFileValue, selected, multiSelect, onChange, required }: React.PropsWithChildren<IDataFileFieldProps>) => {
const [ dataEntries, setDataEntries ] = useState<string[] | null>(null);
const [ crntSelected, setCrntSelected ] = React.useState<string | string[] | null>();
const dsRef = React.useRef<Downshift<string> | null>(null);
@@ -164,7 +165,7 @@ export const DataFileField: React.FunctionComponent<IDataFileFieldProps> = ({ la
)}
</Downshift>
<RequiredMessage name={label.toLowerCase()} show={showRequiredState} />
<FieldMessage name={label.toLowerCase()} description={description} showRequired={showRequiredState} />
{
crntSelected instanceof Array ? crntSelected.map((value: string) => (
src/panelWebView/components/Fields/DateTimeField.tsx
+3 -3
View File
@@ -4,7 +4,7 @@ import DatePicker from 'react-datepicker';
import { forwardRef, useEffect, useMemo } from 'react';
import { DateHelper } from '../../../helpers/DateHelper';
import { BaseFieldProps } from '../../../models';
import { RequiredMessage } from './RequiredMessage';
import { FieldMessage } from './FieldMessage';
import { FieldTitle } from './FieldTitle';
export interface IDateTimeFieldProps extends BaseFieldProps<Date | null> {
@@ -22,7 +22,7 @@ const CustomInput = forwardRef<HTMLInputElement, InputProps>(({ value, onClick }
)
});
export const DateTimeField: React.FunctionComponent<IDateTimeFieldProps> = ({label, value, required, format, onChange}: React.PropsWithChildren<IDateTimeFieldProps>) => {
export const DateTimeField: React.FunctionComponent<IDateTimeFieldProps> = ({label, description, value, required, format, onChange}: React.PropsWithChildren<IDateTimeFieldProps>) => {
const [ dateValue, setDateValue ] = React.useState<Date | null>(null);
const onDateChange = (date: Date) => {
@@ -65,7 +65,7 @@ export const DateTimeField: React.FunctionComponent<IDateTimeFieldProps> = ({lab
</button>
</div>
<RequiredMessage name={label.toLowerCase()} show={showRequiredState} />
<FieldMessage name={label.toLowerCase()} description={description} showRequired={showRequiredState} />
</div>
);
};
src/panelWebView/components/Fields/DraftField.tsx
+3 -1
View File
@@ -11,12 +11,13 @@ export interface IDraftFieldProps extends BaseFieldProps<boolean | string | null
onChanged: (value: string | boolean) => void;
}
export const DraftField: React.FunctionComponent<IDraftFieldProps> = ({ label, type, value, choices, onChanged, required }: React.PropsWithChildren<IDraftFieldProps>) => {
export const DraftField: React.FunctionComponent<IDraftFieldProps> = ({ label, description, type, value, choices, onChanged, required }: React.PropsWithChildren<IDraftFieldProps>) => {
if (type === "boolean") {
return (
<Toggle
label={label}
description={description}
value={!!value}
required={required}
onChanged={(checked) => onChanged(checked)} />
@@ -27,6 +28,7 @@ export const DraftField: React.FunctionComponent<IDraftFieldProps> = ({ label, t
return (
<ChoiceField
label={label}
description={description}
value={value as string}
choices={choices as string[]}
multiSelect={false}
src/panelWebView/components/Fields/FieldMessage.tsx
+33
View File
@@ -0,0 +1,33 @@
import * as React from 'react';
export interface IFieldMessageProps {
name: string;
description?: string;
showRequired?: boolean;
}
export const FieldMessage: React.FunctionComponent<IFieldMessageProps> = ({ name, description, showRequired }: React.PropsWithChildren<IFieldMessageProps>) => {
console.log(description, showRequired);
if (!showRequired && !description) {
return null;
}
if (showRequired) {
return (
<div className={`metadata_field__required__message`}>
The {name} field is required.
</div>
);
}
if (description) {
return (
<div className={`metadata_field__description`}>
{description}
</div>
);
}
return null;
};
src/panelWebView/components/Fields/FileField.tsx
+3 -3
View File
@@ -6,7 +6,7 @@ import { useCallback, useMemo } from 'react';
import { BaseFieldProps, BlockFieldData } from '../../../models';
import { CommandToCode } from '../../CommandToCode';
import { FieldTitle } from './FieldTitle';
import { RequiredMessage } from './RequiredMessage';
import { FieldMessage } from './FieldMessage';
export interface IFileFieldProps extends BaseFieldProps<string | string[] | null> {
fieldName: string;
@@ -34,7 +34,7 @@ const File = ({ value, onRemove }: { value: string, onRemove: (value: string) =>
)
}
export const FileField: React.FunctionComponent<IFileFieldProps> = ({ label, multiple, filePath, fileExtensions, fieldName, value, parents, blockData, onChange, required }: React.PropsWithChildren<IFileFieldProps>) => {
export const FileField: React.FunctionComponent<IFileFieldProps> = ({ label, description, multiple, filePath, fileExtensions, fieldName, value, parents, blockData, onChange, required }: React.PropsWithChildren<IFileFieldProps>) => {
const selectFile = useCallback(() => {
Messenger.send(CommandToCode.selectFile, {
@@ -79,7 +79,7 @@ export const FileField: React.FunctionComponent<IFileFieldProps> = ({ label, mul
)
}
<RequiredMessage name={label.toLowerCase()} show={showRequiredState} />
<FieldMessage name={label.toLowerCase()} description={description} showRequired={showRequiredState} />
{
value && !Array.isArray(value) && (
src/panelWebView/components/Fields/ListField.tsx
+3 -3
View File
@@ -3,13 +3,13 @@ import * as React from 'react';
import { useCallback, useEffect, useMemo, useRef } from 'react';
import { BaseFieldProps } from '../../../models';
import { FieldTitle } from './FieldTitle';
import { RequiredMessage } from './RequiredMessage';
import { FieldMessage } from './FieldMessage';
export interface IListFieldProps extends BaseFieldProps<string[] | null> {
onChange: (value: string | string[]) => void;
}
export const ListField: React.FunctionComponent<IListFieldProps> = ({ label, value, required, onChange }: React.PropsWithChildren<IListFieldProps>) => {
export const ListField: React.FunctionComponent<IListFieldProps> = ({ label, description, value, required, onChange }: React.PropsWithChildren<IListFieldProps>) => {
const [ text, setText ] = React.useState<string | null>("");
const [ list, setList ] = React.useState<string[] | null>(null);
const [ itemToEdit, setItemToEdit ] = React.useState<number | null>(null);
@@ -90,7 +90,7 @@ export const ListField: React.FunctionComponent<IListFieldProps> = ({ label, val
}
}} />
<RequiredMessage name={label} show={showRequiredState} />
<FieldMessage name={label} description={description} showRequired={showRequiredState} />
<div className={`list_field__form__buttons`}>
<button
src/panelWebView/components/Fields/NumberField.tsx
+3 -3
View File
@@ -3,13 +3,13 @@ import * as React from 'react';
import { useEffect, useMemo } from 'react';
import { BaseFieldProps } from '../../../models';
import { FieldTitle } from './FieldTitle';
import { RequiredMessage } from './RequiredMessage';
import { FieldMessage } from './FieldMessage';
export interface INumberFieldProps extends BaseFieldProps<number | null> {
onChange: (nrValue: number | null) => void;
}
export const NumberField: React.FunctionComponent<INumberFieldProps> = ({label, value, required, onChange}: React.PropsWithChildren<INumberFieldProps>) => {
export const NumberField: React.FunctionComponent<INumberFieldProps> = ({label, description, value, required, onChange}: React.PropsWithChildren<INumberFieldProps>) => {
const [ nrValue, setNrValue ] = React.useState<number | null>(value);
const onValueChange = (txtValue: string) => {
@@ -41,7 +41,7 @@ export const NumberField: React.FunctionComponent<INumberFieldProps> = ({label,
<input type={`number`} className={`metadata_field__number`} value={`${nrValue}`} onChange={(e) => onValueChange(e.target.value)} />
<RequiredMessage name={label.toLowerCase()} show={showRequiredState} />
<FieldMessage name={label.toLowerCase()} description={description} showRequired={showRequiredState} />
</div>
);
};
src/panelWebView/components/Fields/PreviewImageField.tsx
+3 -2
View File
@@ -7,7 +7,7 @@ import { BaseFieldProps, BlockFieldData } from '../../../models';
import { CommandToCode } from '../../CommandToCode';
import { FieldTitle } from './FieldTitle';
import { PreviewImage } from './PreviewImage';
import { RequiredMessage } from './RequiredMessage';
import { FieldMessage } from './FieldMessage';
export interface PreviewImageValue {
original: string;
@@ -25,6 +25,7 @@ export interface IPreviewImageFieldProps extends BaseFieldProps<PreviewImageValu
export const PreviewImageField: React.FunctionComponent<IPreviewImageFieldProps> = ({
label,
description,
fieldName,
blockData,
onChange,
@@ -93,7 +94,7 @@ export const PreviewImageField: React.FunctionComponent<IPreviewImageFieldProps>
}
</div>
<RequiredMessage name={label.toLowerCase()} show={showRequiredState} />
<FieldMessage name={label.toLowerCase()} description={description} showRequired={showRequiredState} />
</div>
);
};
src/panelWebView/components/Fields/RequiredMessage.tsx
-19
View File
@@ -1,19 +0,0 @@
import * as React from 'react';
export interface IRequiredMessageProps {
name: string;
show?: boolean;
}
export const RequiredMessage: React.FunctionComponent<IRequiredMessageProps> = ({ name, show }: React.PropsWithChildren<IRequiredMessageProps>) => {
if (!show) {
return null;
}
return (
<div className={`metadata_field__required__message`}>
The {name} field is required.
</div>
);
};
src/panelWebView/components/Fields/SlugField.tsx
+6 -3
View File
@@ -7,7 +7,7 @@ import { BaseFieldProps } from '../../../models';
import { Command } from '../../Command';
import { CommandToCode } from '../../CommandToCode';
import { FieldTitle } from './FieldTitle';
import { RequiredMessage } from './RequiredMessage';
import { FieldMessage } from './FieldMessage';
export interface ISlugFieldProps extends BaseFieldProps<string> {
titleValue: string | null;
@@ -15,7 +15,7 @@ export interface ISlugFieldProps extends BaseFieldProps<string> {
onChange: (txtValue: string) => void;
}
export const SlugField: React.FunctionComponent<ISlugFieldProps> = ({ label, editable, value, titleValue, onChange, required }: React.PropsWithChildren<ISlugFieldProps>) => {
export const SlugField: React.FunctionComponent<ISlugFieldProps> = ({ label, description, editable, value, titleValue, onChange, required }: React.PropsWithChildren<ISlugFieldProps>) => {
const [ text, setText ] = React.useState<string | null>(value);
const [ slug, setSlug ] = React.useState<string | null>(value);
@@ -84,7 +84,10 @@ export const SlugField: React.FunctionComponent<ISlugFieldProps> = ({ label, edi
</button>
</div>
<RequiredMessage name={label.toLowerCase()} show={showRequiredState} />
<FieldMessage
name={label.toLowerCase()}
description={description}
showRequired={showRequiredState} />
</div>
);
}
src/panelWebView/components/Fields/TextField.tsx
+6 -3
View File
@@ -5,7 +5,7 @@ import { useRecoilState } from 'recoil';
import { BaseFieldProps } from '../../../models';
import { RequiredFieldsAtom } from '../../state';
import { FieldTitle } from './FieldTitle';
import { RequiredMessage } from './RequiredMessage';
import { FieldMessage } from './FieldMessage';
export interface ITextFieldProps extends BaseFieldProps<string> {
singleLine: boolean | undefined;
@@ -17,7 +17,7 @@ export interface ITextFieldProps extends BaseFieldProps<string> {
const WysiwygField = React.lazy(() => import('./WysiwygField'));
export const TextField: React.FunctionComponent<ITextFieldProps> = ({singleLine, wysiwyg, limit, label, value, rows, onChange, required}: React.PropsWithChildren<ITextFieldProps>) => {
export const TextField: React.FunctionComponent<ITextFieldProps> = ({singleLine, wysiwyg, limit, label, description, value, rows, onChange, required}: React.PropsWithChildren<ITextFieldProps>) => {
const [ requiredFields, setRequiredFields ] = useRecoilState(RequiredFieldsAtom);
const [ text, setText ] = React.useState<string | null>(value);
@@ -110,7 +110,10 @@ export const TextField: React.FunctionComponent<ITextFieldProps> = ({singleLine,
)
}
<RequiredMessage name={label.toLowerCase()} show={showRequiredState} />
<FieldMessage
description={description}
name={label.toLowerCase()}
showRequired={showRequiredState} />
</div>
);
};
src/panelWebView/components/Fields/Toggle.tsx
+3 -3
View File
@@ -3,13 +3,13 @@ import { useEffect, useMemo } from 'react';
import { BaseFieldProps } from '../../../models';
import { ToggleIcon } from '../Icons/ToggleIcon';
import { FieldTitle } from './FieldTitle';
import { RequiredMessage } from './RequiredMessage';
import { FieldMessage } from './FieldMessage';
export interface IToggleProps extends BaseFieldProps<boolean> {
onChanged: (checked: boolean) => void;
}
export const Toggle: React.FunctionComponent<IToggleProps> = ({label, value, required, onChanged}: React.PropsWithChildren<IToggleProps>) => {
export const Toggle: React.FunctionComponent<IToggleProps> = ({label, description, value, required, onChanged}: React.PropsWithChildren<IToggleProps>) => {
const [ isChecked, setIsChecked ] = React.useState(value);
const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -40,7 +40,7 @@ export const Toggle: React.FunctionComponent<IToggleProps> = ({label, value, req
<span className="field__toggle__slider"></span>
</label>
<RequiredMessage name={label.toLowerCase()} show={showRequiredState} />
<FieldMessage name={label.toLowerCase()} description={description} showRequired={showRequiredState} />
</div>
);
};
src/panelWebView/components/Fields/WrapperField.tsx
+21
View File
@@ -116,6 +116,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
<FieldBoundary key={field.name} fieldName={field.title || field.name}>
<DateTimeField
label={field.title || field.name}
description={field.description}
value={fieldValue}
required={!!field.required}
format={settings?.date?.format}
@@ -128,6 +129,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
<Toggle
key={field.name}
label={field.title || field.name}
description={field.description}
value={fieldValue}
required={!!field.required}
onChanged={(checked) => onSendUpdate(field.name, checked, parentFields)} />
@@ -146,6 +148,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
<FieldBoundary key={field.name} fieldName={field.title || field.name}>
<TextField
label={field.title || field.name}
description={field.description}
singleLine={field.single}
limit={limit}
wysiwyg={field.wysiwyg}
@@ -166,6 +169,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
<NumberField
key={field.name}
label={field.title || field.name}
description={field.description}
onChange={(value) => onSendUpdate(field.name, value, parentFields)}
value={nrValue}
required={!!field.required} />
@@ -176,6 +180,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
<FieldBoundary key={field.name} fieldName={field.title || field.name}>
<PreviewImageField
label={field.title || field.name}
description={field.description}
fieldName={field.name}
filePath={metadata.filePath as string}
parents={parentFields}
@@ -191,6 +196,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
<FieldBoundary key={field.name} fieldName={field.title || field.name}>
<FileField
label={field.title || field.name}
description={field.description}
fieldName={field.name}
multiple={field.multiple}
fileExtensions={field.fileExtensions}
@@ -209,6 +215,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
<FieldBoundary key={field.name} fieldName={field.title || field.name}>
<ChoiceField
label={field.title || field.name}
description={field.description}
value={fieldValue as string}
required={!!field.required}
choices={choices}
@@ -222,6 +229,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
<TagPicker
type={TagType.tags}
label={field.title || field.name}
description={field.description}
fieldName={field.name}
icon={<TagIcon />}
crntSelected={fieldValue as string[] || []}
@@ -243,6 +251,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
<TagPicker
type={TagType.custom}
label={field.title || field.name}
description={field.description}
icon={<ListUnorderedIcon />}
crntSelected={fieldValue as string[] || []}
options={taxonomyData?.options || []}
@@ -263,6 +272,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
<TagPicker
type={TagType.categories}
label={field.title || field.name}
description={field.description}
fieldName={field.name}
icon={<ListUnorderedIcon />}
crntSelected={fieldValue as string[] || []}
@@ -289,6 +299,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
<FieldBoundary key={field.name} fieldName={field.title || field.name}>
<DraftField
label={field.title || field.name}
description={field.description}
type={draftField?.type || "boolean"}
choices={draftField?.choices || []}
value={draftValue as boolean | string | null | undefined}
@@ -311,6 +322,12 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
label={field.title || field.name}
icon={undefined}
required={field.required} />
{ field.description && (
<div className={`metadata_field__description`}>
{field.description}
</div>
)}
{ renderFields(field.fields, subMetadata, [...parentFields, field.name], blockData, onSendUpdate) }
</div>
@@ -339,6 +356,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
<FieldBoundary key={field.name} fieldName={field.title || field.name}>
<DataBlockField
label={field.title || field.name}
description={field.description}
settings={settings}
field={field}
value={blockData}
@@ -355,6 +373,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
<FieldBoundary key={field.name} fieldName={field.title || field.name}>
<DataFileField
label={field.title || field.name}
description={field.description}
dataFileId={field.dataFileId}
dataFileKey={field.dataFileKey}
dataFileValue={field.dataFileValue}
@@ -369,6 +388,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
<FieldBoundary key={field.name} fieldName={field.title || field.name}>
<ListField
label={field.title || field.name}
description={field.description}
value={fieldValue}
required={!!field.required}
onChange={(value => onSendUpdate(field.name, value, parentFields))} />
@@ -379,6 +399,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
<FieldBoundary key={field.name} fieldName={field.title || field.name}>
<SlugField
label={field.title || field.name}
description={field.description}
titleValue={metadata.title as string}
value={fieldValue}
required={!!field.required}
src/panelWebView/components/Fields/index.ts
+1 -1
View File
@@ -11,7 +11,7 @@ export * from './NumberField';
export * from './PreviewImage';
export * from './PreviewImageField';
export * from './RequiredAsterix';
export * from './RequiredMessage';
export * from './FieldMessage';
export * from './SlugField';
export * from './TextField';
export * from './Toggle';
src/panelWebView/components/TagPicker.tsx
+4 -4
View File
@@ -8,7 +8,7 @@ import { AddIcon } from './Icons/AddIcon';
import { BlockFieldData, CustomTaxonomyData } from '../../models';
import { useCallback, useEffect, useMemo } from 'react';
import { Messenger } from '@estruyf/vscode/dist/client';
import { RequiredMessage } from './Fields/RequiredMessage';
import { FieldMessage } from './Fields/FieldMessage';
import { FieldTitle } from './Fields/FieldTitle';
export interface ITagPickerProps {
@@ -23,6 +23,7 @@ export interface ITagPickerProps {
parents?: string[];
blockData?: BlockFieldData;
label?: string;
description?: string;
disableConfigurable?: boolean;
fieldName?: string;
taxonomyId?: string;
@@ -30,8 +31,7 @@ export interface ITagPickerProps {
required?: boolean;
}
const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React.PropsWithChildren<ITagPickerProps>) => {
const { label, icon, type, crntSelected, options, freeform, focussed, unsetFocus, disableConfigurable, fieldName, taxonomyId, parents, blockData, limit, required } = props;
const TagPicker: React.FunctionComponent<ITagPickerProps> = ({ label, description, icon, type, crntSelected, options, freeform, focussed, unsetFocus, disableConfigurable, fieldName, taxonomyId, parents, blockData, limit, required }: React.PropsWithChildren<ITagPickerProps>) => {
const [ selected, setSelected ] = React.useState<string[]>([]);
const [ inputValue, setInputValue ] = React.useState<string>("");
const prevSelected = usePrevious(crntSelected);
@@ -280,7 +280,7 @@ const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React.PropsW
}
</Downshift>
<RequiredMessage name={(label || type).toLowerCase()} show={showRequiredState} />
<FieldMessage name={(label || type).toLowerCase()} description={description} showRequired={showRequiredState} />
<Tags
values={(selected || []).sort((a: string, b: string) => a?.toLowerCase() < b?.toLowerCase() ? -1 : 1 )}
src/panelWebView/styles.css
+25 -3
View File
@@ -61,7 +61,7 @@
border: 1px dashed var(--vscode-button-secondaryBackground);
color: var(--vscode--settings-headerForeground);
padding: .5rem 1rem;
margin-bottom: .5rem;
margin-bottom: 1rem;
.autoform {
background-color: transparent;
@@ -319,6 +319,28 @@
outline: none;
}
/* Description message */
.metadata_field__description {
color: var(--vscode--settings-headerForeground);
opacity: .75;
margin-bottom: .5rem;
}
.metadata_field__description,
.metadata_field__required__message {
padding-top: .5rem;
font-size: .9rem;
margin-left: .5rem;
margin-right: .5rem;
}
.block_field > .metadata_field__description,
.metadata_field__box > .metadata_field__description {
margin-left: 0;
margin-top: -.5rem;
margin-bottom: 1rem;
}
/* Required field */
.metadata_field__required__asterix {
color: var(--vscode-inputValidation-errorBorder);
@@ -326,9 +348,9 @@
}
.metadata_field__required__message {
color: var(--vscode-inputValidation-errorBorder);
padding-top: .5rem;
font-size: .9rem;
margin-left: .5rem;
}
/* Text field */
@@ -377,7 +399,7 @@ vscode-divider {
.metadata_field__box {
background: rgba(255, 255, 255, 0.1);
border: 1px dashed rgba(255, 255, 255, 0.2);
margin-bottom: .5rem;
margin-bottom: 1rem;
padding: .5rem 1rem;
}