add-cms
This commit is contained in:
@@ -0,0 +1,55 @@
|
||||
class RelationCache {
|
||||
constructor() {
|
||||
this.cache = new Map();
|
||||
this.pendingRequests = new Map();
|
||||
}
|
||||
|
||||
async getOptions(collection, searchFields, term, file, queryFn) {
|
||||
const cacheKey = `${collection}-${searchFields.join(',')}-${term || ''}-${file || ''}`;
|
||||
|
||||
if (this.cache.has(cacheKey)) {
|
||||
return this.cache.get(cacheKey);
|
||||
}
|
||||
|
||||
if (this.pendingRequests.has(cacheKey)) {
|
||||
return this.pendingRequests.get(cacheKey);
|
||||
}
|
||||
|
||||
const request = queryFn();
|
||||
this.pendingRequests.set(cacheKey, request);
|
||||
|
||||
try {
|
||||
const result = await request;
|
||||
this.cache.set(cacheKey, result);
|
||||
this.ensureCacheSize();
|
||||
return result;
|
||||
} finally {
|
||||
this.pendingRequests.delete(cacheKey);
|
||||
}
|
||||
}
|
||||
|
||||
invalidateCollection(collection) {
|
||||
for (const [key] of this.cache.entries()) {
|
||||
if (key.startsWith(`${collection}-`)) {
|
||||
this.cache.delete(key);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ensureCacheSize() {
|
||||
const maxSize = 100;
|
||||
if (this.cache.size > maxSize) {
|
||||
const firstKey = this.cache.keys().next().value;
|
||||
this.cache.delete(firstKey);
|
||||
}
|
||||
}
|
||||
|
||||
clear() {
|
||||
this.cache.clear();
|
||||
this.pendingRequests.clear();
|
||||
}
|
||||
}
|
||||
|
||||
const relationCache = new RelationCache();
|
||||
|
||||
export default relationCache;
|
||||
@@ -0,0 +1,505 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { components } from 'react-select';
|
||||
import AsyncSelect from 'react-select/async';
|
||||
import debounce from 'lodash/debounce';
|
||||
import find from 'lodash/find';
|
||||
import get from 'lodash/get';
|
||||
import isEmpty from 'lodash/isEmpty';
|
||||
import last from 'lodash/last';
|
||||
import uniqBy from 'lodash/uniqBy';
|
||||
import { fromJS, List, Map } from 'immutable';
|
||||
import { reactSelectStyles } from 'decap-cms-ui-default';
|
||||
import { stringTemplate, validations } from 'decap-cms-lib-widgets';
|
||||
import { FixedSizeList } from 'react-window';
|
||||
import {
|
||||
DndContext,
|
||||
MouseSensor,
|
||||
TouchSensor,
|
||||
closestCenter,
|
||||
useSensor,
|
||||
useSensors,
|
||||
} from '@dnd-kit/core';
|
||||
import { SortableContext, horizontalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
|
||||
import { restrictToParentElement } from '@dnd-kit/modifiers';
|
||||
import { CSS } from '@dnd-kit/utilities';
|
||||
import { v4 as uuid } from 'uuid';
|
||||
|
||||
import relationCache from './RelationCache';
|
||||
|
||||
function arrayMove(array, from, to) {
|
||||
const slicedArray = array.slice();
|
||||
slicedArray.splice(to < 0 ? array.length + to : to, 0, slicedArray.splice(from, 1)[0]);
|
||||
return slicedArray;
|
||||
}
|
||||
|
||||
function MultiValue(props) {
|
||||
const { setNodeRef, transform, transition } = useSortable({
|
||||
id: props.data.data.id,
|
||||
});
|
||||
|
||||
function onMouseDown(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
const style = {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
};
|
||||
|
||||
const innerProps = { ...props.innerProps, onMouseDown };
|
||||
return (
|
||||
<div ref={setNodeRef} style={style}>
|
||||
<components.MultiValue {...props} innerProps={innerProps} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MultiValueLabel(props) {
|
||||
const { attributes, listeners } = useSortable({
|
||||
id: props.data.data.id,
|
||||
});
|
||||
|
||||
return (
|
||||
<div {...attributes} {...listeners}>
|
||||
<components.MultiValueLabel {...props} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SortableSelect(props) {
|
||||
const { distance, value, onSortEnd, isMulti } = props;
|
||||
|
||||
if (!isMulti) {
|
||||
return <AsyncSelect {...props} />;
|
||||
}
|
||||
|
||||
const keys = Array.isArray(value) ? value.map(({ data }) => data.id) : [];
|
||||
|
||||
const activationConstraint = { distance };
|
||||
const sensors = useSensors(
|
||||
useSensor(MouseSensor, { activationConstraint }),
|
||||
useSensor(TouchSensor, { activationConstraint }),
|
||||
);
|
||||
|
||||
function handleSortEnd({ active, over }) {
|
||||
onSortEnd({
|
||||
oldIndex: keys.indexOf(active.id),
|
||||
newIndex: keys.indexOf(over.id),
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<DndContext
|
||||
modifiers={[restrictToParentElement]}
|
||||
collisionDetection={closestCenter}
|
||||
sensors={sensors}
|
||||
onDragEnd={handleSortEnd}
|
||||
>
|
||||
<SortableContext items={keys} strategy={horizontalListSortingStrategy}>
|
||||
<AsyncSelect {...props} />
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
);
|
||||
}
|
||||
|
||||
function Option({ index, style, data }) {
|
||||
return <div style={style}>{data.options[index]}</div>;
|
||||
}
|
||||
|
||||
function MenuList(props) {
|
||||
if (props.isLoading || props.options.length <= 0 || !Array.isArray(props.children)) {
|
||||
return props.children;
|
||||
}
|
||||
const rows = props.children;
|
||||
const itemSize = 30;
|
||||
return (
|
||||
<FixedSizeList
|
||||
style={{ width: '100%' }}
|
||||
width={300}
|
||||
height={Math.min(300, rows.length * itemSize + itemSize / 3)}
|
||||
itemCount={rows.length}
|
||||
itemSize={itemSize}
|
||||
itemData={{ options: rows }}
|
||||
>
|
||||
{Option}
|
||||
</FixedSizeList>
|
||||
);
|
||||
}
|
||||
|
||||
function optionToString(option) {
|
||||
return option && option.value ? option.value : '';
|
||||
}
|
||||
|
||||
function convertToOption(raw) {
|
||||
if (typeof raw === 'string') {
|
||||
return { label: raw, value: raw };
|
||||
}
|
||||
|
||||
return Map.isMap(raw) ? raw.toJS() : raw;
|
||||
}
|
||||
|
||||
function getSelectedOptions(value) {
|
||||
const selectedOptions = List.isList(value) ? value.toJS() : value;
|
||||
|
||||
if (!selectedOptions || !Array.isArray(selectedOptions)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return selectedOptions;
|
||||
}
|
||||
|
||||
function uniqOptions(initial, current) {
|
||||
return uniqBy(initial.concat(current), o => o.value);
|
||||
}
|
||||
|
||||
function getFieldArray(field) {
|
||||
if (!field) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return List.isList(field) ? field.toJS() : [field];
|
||||
}
|
||||
|
||||
function getSelectedValue({ value, options, isMultiple }) {
|
||||
if (isMultiple) {
|
||||
const selectedOptions = getSelectedOptions(value);
|
||||
if (selectedOptions === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const selected = selectedOptions
|
||||
.map(i => options.find(o => o.value === (i.value || i)))
|
||||
.filter(Boolean)
|
||||
.map(convertToSortableOption);
|
||||
return selected;
|
||||
} else {
|
||||
return find(options, ['value', value]) || null;
|
||||
}
|
||||
}
|
||||
|
||||
function convertToSortableOption(raw) {
|
||||
const option = convertToOption(raw);
|
||||
return {
|
||||
...option,
|
||||
data: {
|
||||
...option.data,
|
||||
id: uuid(),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default class RelationControl extends React.Component {
|
||||
mounted = false;
|
||||
|
||||
state = {
|
||||
initialOptions: [],
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
onChange: PropTypes.func.isRequired,
|
||||
forID: PropTypes.string.isRequired,
|
||||
value: PropTypes.node,
|
||||
field: ImmutablePropTypes.map,
|
||||
query: PropTypes.func.isRequired,
|
||||
queryHits: PropTypes.array,
|
||||
classNameWrapper: PropTypes.string.isRequired,
|
||||
setActiveStyle: PropTypes.func.isRequired,
|
||||
setInactiveStyle: PropTypes.func.isRequired,
|
||||
locale: PropTypes.string,
|
||||
};
|
||||
|
||||
isValid = () => {
|
||||
const { field, value, t } = this.props;
|
||||
const min = field.get('min');
|
||||
const max = field.get('max');
|
||||
|
||||
if (!this.isMultiple()) {
|
||||
return { error: false };
|
||||
}
|
||||
|
||||
const error = validations.validateMinMax(
|
||||
t,
|
||||
field.get('label', field.get('name')),
|
||||
value,
|
||||
min,
|
||||
max,
|
||||
);
|
||||
|
||||
return error ? { error } : { error: false };
|
||||
};
|
||||
|
||||
shouldComponentUpdate(nextProps) {
|
||||
return (
|
||||
this.props.value !== nextProps.value ||
|
||||
this.props.hasActiveStyle !== nextProps.hasActiveStyle ||
|
||||
this.props.queryHits !== nextProps.queryHits
|
||||
);
|
||||
}
|
||||
|
||||
async componentDidMount() {
|
||||
// Manually validate PropTypes - React 19 breaking change
|
||||
PropTypes.checkPropTypes(RelationControl.propTypes, this.props, 'prop', 'RelationControl');
|
||||
|
||||
this.mounted = true;
|
||||
const { value } = this.props;
|
||||
if (value && this.hasInitialValues(value)) {
|
||||
await this.loadInitialOptions();
|
||||
}
|
||||
}
|
||||
|
||||
hasInitialValues(value) {
|
||||
if (this.isMultiple()) {
|
||||
const selectedOptions = getSelectedOptions(value);
|
||||
return selectedOptions && selectedOptions.length > 0;
|
||||
}
|
||||
return value && value !== '';
|
||||
}
|
||||
|
||||
async loadInitialOptions() {
|
||||
const { field, query, forID, value } = this.props;
|
||||
const collection = field.get('collection');
|
||||
const searchFieldsArray = getFieldArray(field.get('search_fields'));
|
||||
const file = field.get('file');
|
||||
|
||||
try {
|
||||
const result = await relationCache.getOptions(
|
||||
collection,
|
||||
searchFieldsArray,
|
||||
'', // empty term for initial load
|
||||
file,
|
||||
() => query(forID, collection, searchFieldsArray, '', file),
|
||||
);
|
||||
|
||||
const hits = result.payload.hits || [];
|
||||
const options = this.parseHitOptions(hits);
|
||||
|
||||
if (this.mounted) {
|
||||
this.setState({ initialOptions: options });
|
||||
|
||||
// Call onChange with metadata for initial values
|
||||
if (value && this.hasInitialValues(value)) {
|
||||
this.triggerInitialOnChange(value, options);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load initial options:', error);
|
||||
}
|
||||
}
|
||||
|
||||
triggerInitialOnChange(value, options) {
|
||||
const { onChange, field } = this.props;
|
||||
|
||||
if (this.isMultiple()) {
|
||||
const selectedOptions = getSelectedOptions(value);
|
||||
if (selectedOptions && selectedOptions.length > 0) {
|
||||
const matchedOptions = selectedOptions
|
||||
.map(val => options.find(opt => opt.value === (val.value || val)))
|
||||
.filter(Boolean);
|
||||
|
||||
if (matchedOptions.length > 0) {
|
||||
const metadata = {
|
||||
[field.get('name')]: {
|
||||
[field.get('collection')]: matchedOptions.reduce(
|
||||
(acc, option) => ({
|
||||
...acc,
|
||||
[option.value]: option.data,
|
||||
}),
|
||||
{},
|
||||
),
|
||||
},
|
||||
};
|
||||
onChange(value, metadata);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
const matchedOption = options.find(opt => opt.value === value);
|
||||
if (matchedOption) {
|
||||
const metadata = {
|
||||
[field.get('name')]: {
|
||||
[field.get('collection')]: {
|
||||
[matchedOption.value]: matchedOption.data,
|
||||
},
|
||||
},
|
||||
};
|
||||
onChange(value, metadata);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.mounted = false;
|
||||
}
|
||||
|
||||
onSortEnd =
|
||||
options =>
|
||||
({ oldIndex, newIndex }) => {
|
||||
const { onChange, field } = this.props;
|
||||
const value = options.map(optionToString);
|
||||
const newValue = arrayMove(value, oldIndex, newIndex);
|
||||
const metadata =
|
||||
(!isEmpty(options) && {
|
||||
[field.get('name')]: {
|
||||
[field.get('collection')]: {
|
||||
[last(newValue)]: last(options).data,
|
||||
},
|
||||
},
|
||||
}) ||
|
||||
{};
|
||||
onChange(fromJS(newValue), metadata);
|
||||
};
|
||||
|
||||
handleChange = selectedOption => {
|
||||
const { onChange, field } = this.props;
|
||||
|
||||
if (this.isMultiple()) {
|
||||
const options = selectedOption;
|
||||
this.setState({ initialOptions: options.filter(Boolean) });
|
||||
const value = options.map(optionToString);
|
||||
const metadata =
|
||||
(!isEmpty(options) && {
|
||||
[field.get('name')]: {
|
||||
[field.get('collection')]: {
|
||||
[last(value)]: last(options).data,
|
||||
},
|
||||
},
|
||||
}) ||
|
||||
{};
|
||||
onChange(fromJS(value), metadata);
|
||||
} else {
|
||||
this.setState({ initialOptions: [selectedOption].filter(Boolean) });
|
||||
const value = optionToString(selectedOption);
|
||||
const metadata = selectedOption && {
|
||||
[field.get('name')]: {
|
||||
[field.get('collection')]: { [value]: selectedOption.data },
|
||||
},
|
||||
};
|
||||
onChange(value, metadata);
|
||||
}
|
||||
};
|
||||
|
||||
parseNestedFields = (hit, field) => {
|
||||
const { locale } = this.props;
|
||||
const hitData =
|
||||
locale != null && hit.i18n != null && hit.i18n[locale] != null
|
||||
? hit.i18n[locale].data
|
||||
: hit.data;
|
||||
const templateVars = stringTemplate.extractTemplateVars(field);
|
||||
// return non template fields as is
|
||||
if (templateVars.length <= 0) {
|
||||
return get(hitData, field);
|
||||
}
|
||||
const data = stringTemplate.addFileTemplateFields(hit.path, fromJS(hitData));
|
||||
const value = stringTemplate.compileStringTemplate(field, null, hit.slug, data);
|
||||
return value;
|
||||
};
|
||||
|
||||
isMultiple() {
|
||||
return this.props.field.get('multiple', false);
|
||||
}
|
||||
|
||||
parseHitOptions = hits => {
|
||||
const { field } = this.props;
|
||||
const valueField = field.get('value_field');
|
||||
const displayField = field.get('display_fields') || List([field.get('value_field')]);
|
||||
const filters = getFieldArray(field.get('filters'));
|
||||
|
||||
const options = hits.reduce((acc, hit) => {
|
||||
if (
|
||||
filters.every(filter => {
|
||||
// check if the value for the (nested) filter field is in the filter values
|
||||
const fieldKeys = filter.field.split('.');
|
||||
let value = hit.data;
|
||||
for (let i = 0; i < fieldKeys.length; i++) {
|
||||
if (Object.prototype.hasOwnProperty.call(value, fieldKeys[i])) {
|
||||
value = value[fieldKeys[i]];
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return filter.values.includes(value);
|
||||
})
|
||||
) {
|
||||
const valuesPaths = stringTemplate.expandPath({ data: hit.data, path: valueField });
|
||||
for (let i = 0; i < valuesPaths.length; i++) {
|
||||
const label = displayField
|
||||
.toJS()
|
||||
.map(key => {
|
||||
const displayPaths = stringTemplate.expandPath({ data: hit.data, path: key });
|
||||
return this.parseNestedFields(hit, displayPaths[i] || displayPaths[0]);
|
||||
})
|
||||
.join(' ');
|
||||
const value = this.parseNestedFields(hit, valuesPaths[i]);
|
||||
acc.push({ data: hit.data, value, label });
|
||||
}
|
||||
}
|
||||
|
||||
return acc;
|
||||
}, []);
|
||||
|
||||
return options;
|
||||
};
|
||||
|
||||
loadOptions = debounce((term, callback) => {
|
||||
const { field, query, forID } = this.props;
|
||||
const collection = field.get('collection');
|
||||
const searchFieldsArray = getFieldArray(field.get('search_fields'));
|
||||
const file = field.get('file');
|
||||
|
||||
relationCache
|
||||
.getOptions(collection, searchFieldsArray, term, file, () =>
|
||||
query(forID, collection, searchFieldsArray, term, file),
|
||||
)
|
||||
.then(result => {
|
||||
const hits = result.payload.hits || [];
|
||||
const options = this.parseHitOptions(hits);
|
||||
const optionsLength = field.get('options_length') || 20;
|
||||
const uniq = uniqOptions(this.state.initialOptions, options).slice(0, optionsLength);
|
||||
callback(uniq);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Failed to load options:', error);
|
||||
callback([]);
|
||||
});
|
||||
}, 500);
|
||||
|
||||
render() {
|
||||
const { value, field, forID, classNameWrapper, setActiveStyle, setInactiveStyle, queryHits } =
|
||||
this.props;
|
||||
const isMultiple = this.isMultiple();
|
||||
const isClearable = !field.get('required', true) || isMultiple;
|
||||
|
||||
const queryOptions = this.parseHitOptions(queryHits);
|
||||
const options = uniqOptions(this.state.initialOptions, queryOptions);
|
||||
const selectedValue = getSelectedValue({
|
||||
options,
|
||||
value,
|
||||
isMultiple,
|
||||
});
|
||||
|
||||
return (
|
||||
<SortableSelect
|
||||
useDragHandle
|
||||
onSortEnd={this.onSortEnd(selectedValue)}
|
||||
distance={4}
|
||||
// react-select props:
|
||||
components={{ MenuList, MultiValue, MultiValueLabel }}
|
||||
value={selectedValue}
|
||||
inputId={forID}
|
||||
cacheOptions
|
||||
defaultOptions
|
||||
loadOptions={this.loadOptions}
|
||||
onChange={this.handleChange}
|
||||
className={classNameWrapper}
|
||||
onFocus={setActiveStyle}
|
||||
onBlur={setInactiveStyle}
|
||||
styles={reactSelectStyles}
|
||||
isMulti={isMultiple}
|
||||
isClearable={isClearable}
|
||||
placeholder=""
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { WidgetPreviewContainer } from 'decap-cms-ui-default';
|
||||
|
||||
function RelationPreview({ value }) {
|
||||
return <WidgetPreviewContainer>{value}</WidgetPreviewContainer>;
|
||||
}
|
||||
|
||||
RelationPreview.propTypes = {
|
||||
value: PropTypes.node,
|
||||
};
|
||||
|
||||
export default RelationPreview;
|
||||
@@ -0,0 +1,739 @@
|
||||
import React from 'react';
|
||||
import { fromJS } from 'immutable';
|
||||
import { render, fireEvent, waitFor, act } from '@testing-library/react';
|
||||
|
||||
import { DecapCmsWidgetRelation } from '../';
|
||||
|
||||
jest.mock('react-window', () => {
|
||||
function FixedSizeList(props) {
|
||||
return props.itemData.options;
|
||||
}
|
||||
|
||||
return {
|
||||
FixedSizeList,
|
||||
};
|
||||
});
|
||||
|
||||
jest.mock('../RelationCache', () => {
|
||||
return {
|
||||
__esModule: true,
|
||||
default: {
|
||||
getOptions: jest.fn((collection, searchFields, term, file, queryFn) => {
|
||||
return queryFn();
|
||||
}),
|
||||
clear: jest.fn(),
|
||||
invalidateCollection: jest.fn(),
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
const RelationControl = DecapCmsWidgetRelation.controlComponent;
|
||||
|
||||
const fieldConfig = {
|
||||
name: 'post',
|
||||
collection: 'posts',
|
||||
display_fields: ['title', 'slug'],
|
||||
search_fields: ['title', 'body'],
|
||||
value_field: 'title',
|
||||
};
|
||||
|
||||
const customizedOptionsLengthConfig = {
|
||||
name: 'post',
|
||||
collection: 'posts',
|
||||
display_fields: ['title', 'slug'],
|
||||
search_fields: ['title', 'body'],
|
||||
value_field: 'title',
|
||||
options_length: 10,
|
||||
};
|
||||
|
||||
const deeplyNestedFieldConfig = {
|
||||
name: 'post',
|
||||
collection: 'posts',
|
||||
display_fields: ['title', 'slug', 'deeply.nested.post.field'],
|
||||
search_fields: ['deeply.nested.post.field'],
|
||||
value_field: 'title',
|
||||
};
|
||||
|
||||
const nestedFieldConfig = {
|
||||
name: 'post',
|
||||
collection: 'posts',
|
||||
display_fields: ['title', 'slug', 'nested.field_1'],
|
||||
search_fields: ['nested.field_1', 'nested.field_2'],
|
||||
value_field: 'title',
|
||||
};
|
||||
|
||||
const filterBooleanFieldConfig = {
|
||||
name: 'post',
|
||||
collection: 'posts',
|
||||
display_fields: ['title', 'slug'],
|
||||
search_fields: ['title', 'body'],
|
||||
value_field: 'title',
|
||||
filters: [
|
||||
{
|
||||
field: 'draft',
|
||||
values: [false],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const filterStringFieldConfig = {
|
||||
name: 'post',
|
||||
collection: 'posts',
|
||||
display_fields: ['title', 'slug'],
|
||||
search_fields: ['title', 'body'],
|
||||
value_field: 'title',
|
||||
filters: [
|
||||
{
|
||||
field: 'title',
|
||||
values: ['Post # 1', 'Post # 2', 'Post # 7', 'Post # 9', 'Post # 15'],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const filterIntegerFieldConfig = {
|
||||
name: 'post',
|
||||
collection: 'posts',
|
||||
display_fields: ['title', 'slug'],
|
||||
search_fields: ['title', 'body'],
|
||||
value_field: 'title',
|
||||
filters: [
|
||||
{
|
||||
field: 'num',
|
||||
values: [1, 5, 9],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const multipleFiltersFieldConfig = {
|
||||
name: 'post',
|
||||
collection: 'posts',
|
||||
display_fields: ['title', 'slug'],
|
||||
search_fields: ['title', 'body'],
|
||||
value_field: 'title',
|
||||
filters: [
|
||||
{
|
||||
field: 'title',
|
||||
values: ['Post # 1', 'Post # 2', 'Post # 7', 'Post # 9', 'Post # 15'],
|
||||
},
|
||||
{
|
||||
field: 'draft',
|
||||
values: [true],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const emptyFilterFieldConfig = {
|
||||
name: 'post',
|
||||
collection: 'posts',
|
||||
display_fields: ['title', 'slug'],
|
||||
search_fields: ['title', 'body'],
|
||||
value_field: 'title',
|
||||
filters: [
|
||||
{
|
||||
field: 'draft',
|
||||
values: [],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const nestedFilterFieldConfig = {
|
||||
name: 'post',
|
||||
collection: 'posts',
|
||||
display_fields: ['title', 'slug'],
|
||||
search_fields: ['title', 'body'],
|
||||
value_field: 'title',
|
||||
filters: [
|
||||
{
|
||||
field: 'deeply.nested.post.field',
|
||||
values: ['Deeply nested field'],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
function generateHits(length) {
|
||||
const hits = Array.from({ length }, (val, idx) => {
|
||||
const title = `Post # ${idx + 1}`;
|
||||
const slug = `post-number-${idx + 1}`;
|
||||
const draft = idx % 2 === 0;
|
||||
const num = idx + 1;
|
||||
const path = `posts/${slug}.md`;
|
||||
return { collection: 'posts', data: { title, slug, draft, num }, slug, path };
|
||||
});
|
||||
|
||||
return [
|
||||
...hits,
|
||||
{
|
||||
collection: 'posts',
|
||||
data: {
|
||||
title: 'Deeply nested post',
|
||||
slug: 'post-deeply-nested',
|
||||
deeply: {
|
||||
nested: {
|
||||
post: {
|
||||
field: 'Deeply nested field',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
collection: 'posts',
|
||||
data: {
|
||||
title: 'Nested post',
|
||||
slug: 'post-nested',
|
||||
nested: {
|
||||
field_1: 'Nested field 1',
|
||||
field_2: 'Nested field 2',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
collection: 'posts',
|
||||
data: { title: 'YAML post', slug: 'post-yaml', body: 'Body yaml' },
|
||||
},
|
||||
{
|
||||
collection: 'posts',
|
||||
data: { title: 'JSON post', slug: 'post-json', body: 'Body json' },
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
const simpleFileCollectionHits = [{ data: { categories: ['category 1', 'category 2'] } }];
|
||||
|
||||
const nestedFileCollectionHits = [
|
||||
{
|
||||
data: {
|
||||
nested: {
|
||||
categories: [
|
||||
{
|
||||
name: 'category 1',
|
||||
id: 'cat1',
|
||||
},
|
||||
{
|
||||
name: 'category 2',
|
||||
id: 'cat2',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const numberFieldsHits = [
|
||||
{
|
||||
collection: 'posts',
|
||||
data: {
|
||||
title: 'post # 1',
|
||||
slug: 'post-1',
|
||||
index: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
collection: 'posts',
|
||||
data: {
|
||||
title: 'post # 2',
|
||||
slug: 'post-2',
|
||||
index: 2,
|
||||
},
|
||||
},
|
||||
];
|
||||
class RelationController extends React.Component {
|
||||
state = {
|
||||
value: this.props.value,
|
||||
queryHits: [],
|
||||
};
|
||||
|
||||
mounted = false;
|
||||
|
||||
componentDidMount() {
|
||||
this.mounted = true;
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.mounted = false;
|
||||
}
|
||||
|
||||
handleOnChange = jest.fn(value => {
|
||||
act(() => {
|
||||
this.setState({ ...this.state, value });
|
||||
});
|
||||
});
|
||||
|
||||
setQueryHits = jest.fn(queryHits => {
|
||||
if (this.mounted) {
|
||||
act(() => {
|
||||
this.setState({ ...this.state, queryHits });
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
query = jest.fn((...args) => {
|
||||
const queryHits = generateHits(25);
|
||||
|
||||
const [, collection, , term, file, optionsLength] = args;
|
||||
let hits = queryHits;
|
||||
if (collection === 'numbers_collection') {
|
||||
hits = numberFieldsHits;
|
||||
} else if (file === 'nested_file') {
|
||||
hits = nestedFileCollectionHits;
|
||||
} else if (file === 'simple_file') {
|
||||
hits = simpleFileCollectionHits;
|
||||
} else if (term === 'JSON post') {
|
||||
hits = [queryHits[queryHits.length - 1]];
|
||||
} else if (term === 'YAML' || term === 'YAML post') {
|
||||
hits = [queryHits[queryHits.length - 2]];
|
||||
} else if (term === 'Nested') {
|
||||
hits = [queryHits[queryHits.length - 3]];
|
||||
} else if (term === 'Deeply nested') {
|
||||
hits = [queryHits[queryHits.length - 4]];
|
||||
}
|
||||
|
||||
hits = hits.slice(0, optionsLength);
|
||||
|
||||
this.setQueryHits(hits);
|
||||
|
||||
return Promise.resolve({ payload: { hits } });
|
||||
});
|
||||
|
||||
render() {
|
||||
return this.props.children({
|
||||
value: this.state.value,
|
||||
handleOnChange: this.handleOnChange,
|
||||
query: this.query,
|
||||
queryHits: this.state.queryHits,
|
||||
setQueryHits: this.setQueryHits,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function setup({ field, value }) {
|
||||
let renderArgs;
|
||||
const setActiveSpy = jest.fn();
|
||||
const setInactiveSpy = jest.fn();
|
||||
|
||||
const helpers = render(
|
||||
<RelationController value={value}>
|
||||
{({ handleOnChange, value, query, queryHits, setQueryHits }) => {
|
||||
renderArgs = { value, onChangeSpy: handleOnChange, setQueryHitsSpy: setQueryHits };
|
||||
return (
|
||||
<RelationControl
|
||||
field={field}
|
||||
value={value}
|
||||
query={query}
|
||||
queryHits={queryHits}
|
||||
onChange={handleOnChange}
|
||||
forID="relation-field"
|
||||
classNameWrapper=""
|
||||
setActiveStyle={setActiveSpy}
|
||||
setInactiveStyle={setInactiveSpy}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
</RelationController>,
|
||||
);
|
||||
|
||||
const input = helpers.container.querySelector('input');
|
||||
|
||||
return {
|
||||
...helpers,
|
||||
...renderArgs,
|
||||
setActiveSpy,
|
||||
setInactiveSpy,
|
||||
input,
|
||||
};
|
||||
}
|
||||
|
||||
describe('Relation widget', () => {
|
||||
it('should list the first 20 option hits on initial load', async () => {
|
||||
const field = fromJS(fieldConfig);
|
||||
const { getAllByText, input } = setup({ field });
|
||||
fireEvent.keyDown(input, { key: 'ArrowDown' });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(getAllByText(/^Post # (\d{1,2}) post-number-\1$/)).toHaveLength(20);
|
||||
});
|
||||
});
|
||||
|
||||
it('should list the first 10 option hits on initial load', async () => {
|
||||
const field = fromJS(customizedOptionsLengthConfig);
|
||||
const { getAllByText, input } = setup({ field });
|
||||
fireEvent.keyDown(input, { key: 'ArrowDown' });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(getAllByText(/^Post # (\d{1,2}) post-number-\1$/)).toHaveLength(10);
|
||||
});
|
||||
});
|
||||
|
||||
it('should update option list based on search term', async () => {
|
||||
const field = fromJS(fieldConfig);
|
||||
const { getAllByText, input } = setup({ field });
|
||||
fireEvent.change(input, { target: { value: 'YAML' } });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(getAllByText('YAML post post-yaml')).toHaveLength(1);
|
||||
});
|
||||
});
|
||||
|
||||
it('should call onChange with correct selectedItem value and metadata', async () => {
|
||||
const field = fromJS(fieldConfig);
|
||||
const { getByText, input, onChangeSpy } = setup({ field });
|
||||
const value = 'Post # 1';
|
||||
const label = 'Post # 1 post-number-1';
|
||||
const metadata = {
|
||||
post: {
|
||||
posts: { 'Post # 1': { title: 'Post # 1', draft: true, num: 1, slug: 'post-number-1' } },
|
||||
},
|
||||
};
|
||||
|
||||
fireEvent.keyDown(input, { key: 'ArrowDown' });
|
||||
|
||||
await waitFor(() => {
|
||||
fireEvent.click(getByText(label));
|
||||
expect(onChangeSpy).toHaveBeenCalledTimes(1);
|
||||
expect(onChangeSpy).toHaveBeenCalledWith(value, metadata);
|
||||
});
|
||||
});
|
||||
|
||||
it('should update metadata for initial preview 1', async () => {
|
||||
const field = fromJS(fieldConfig);
|
||||
const value = 'Post # 1';
|
||||
const { getByText, onChangeSpy } = setup({ field, value });
|
||||
const label = 'Post # 1 post-number-1';
|
||||
const metadata = {
|
||||
post: {
|
||||
posts: { 'Post # 1': { title: 'Post # 1', draft: true, num: 1, slug: 'post-number-1' } },
|
||||
},
|
||||
};
|
||||
|
||||
// The component will automatically trigger a query for initial load
|
||||
// Wait for it to process and call onChange
|
||||
await waitFor(
|
||||
() => {
|
||||
expect(getByText(label)).toBeInTheDocument();
|
||||
},
|
||||
{ timeout: 3000 },
|
||||
);
|
||||
|
||||
await waitFor(
|
||||
() => {
|
||||
expect(onChangeSpy).toHaveBeenCalledTimes(1);
|
||||
expect(onChangeSpy).toHaveBeenCalledWith(value, metadata);
|
||||
},
|
||||
{ timeout: 3000 },
|
||||
);
|
||||
});
|
||||
|
||||
it('should update option list based on nested search term', async () => {
|
||||
const field = fromJS(nestedFieldConfig);
|
||||
const { getAllByText, input } = setup({ field });
|
||||
fireEvent.change(input, { target: { value: 'Nested' } });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(getAllByText('Nested post post-nested Nested field 1')).toHaveLength(1);
|
||||
});
|
||||
});
|
||||
|
||||
it('should update option list based on deeply nested search term', async () => {
|
||||
const field = fromJS(deeplyNestedFieldConfig);
|
||||
const { getAllByText, input } = setup({ field });
|
||||
fireEvent.change(input, { target: { value: 'Deeply nested' } });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(
|
||||
getAllByText('Deeply nested post post-deeply-nested Deeply nested field'),
|
||||
).toHaveLength(1);
|
||||
});
|
||||
});
|
||||
|
||||
it('should handle string templates', async () => {
|
||||
const stringTemplateConfig = {
|
||||
name: 'post',
|
||||
collection: 'posts',
|
||||
display_fields: ['{{slug}}', '{{filename}}', '{{extension}}'],
|
||||
search_fields: ['slug'],
|
||||
value_field: '{{slug}}',
|
||||
};
|
||||
|
||||
const field = fromJS(stringTemplateConfig);
|
||||
const { getByText, input, onChangeSpy } = setup({ field });
|
||||
const value = 'post-number-1';
|
||||
const label = 'post-number-1 post-number-1 md';
|
||||
const metadata = {
|
||||
post: {
|
||||
posts: {
|
||||
'post-number-1': { title: 'Post # 1', draft: true, num: 1, slug: 'post-number-1' },
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
fireEvent.keyDown(input, { key: 'ArrowDown' });
|
||||
await waitFor(() => {
|
||||
fireEvent.click(getByText(label));
|
||||
expect(onChangeSpy).toHaveBeenCalledTimes(1);
|
||||
expect(onChangeSpy).toHaveBeenCalledWith(value, metadata);
|
||||
});
|
||||
});
|
||||
|
||||
it('should default display_fields to value_field', async () => {
|
||||
const field = fromJS(fieldConfig).delete('display_fields');
|
||||
const { getAllByText, input } = setup({ field });
|
||||
fireEvent.keyDown(input, { key: 'ArrowDown' });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(getAllByText(/^Post # (\d{1,2})$/)).toHaveLength(20);
|
||||
});
|
||||
});
|
||||
it('should keep number type of referenced field', async () => {
|
||||
const fieldConfig = {
|
||||
name: 'numbers',
|
||||
collection: 'numbers_collection',
|
||||
value_field: 'index',
|
||||
search_fields: ['index'],
|
||||
display_fields: ['title'],
|
||||
};
|
||||
|
||||
const field = fromJS(fieldConfig);
|
||||
const { getByText, getAllByText, input, onChangeSpy } = setup({ field });
|
||||
fireEvent.keyDown(input, { key: 'ArrowDown' });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(getAllByText(/^post # \d$/)).toHaveLength(2);
|
||||
});
|
||||
|
||||
fireEvent.keyDown(input, { key: 'ArrowDown' });
|
||||
fireEvent.click(getByText('post # 1'));
|
||||
fireEvent.keyDown(input, { key: 'ArrowDown' });
|
||||
fireEvent.click(getByText('post # 2'));
|
||||
|
||||
expect(onChangeSpy).toHaveBeenCalledTimes(2);
|
||||
expect(onChangeSpy).toHaveBeenCalledWith(1, {
|
||||
numbers: { numbers_collection: { 1: { index: 1, slug: 'post-1', title: 'post # 1' } } },
|
||||
});
|
||||
expect(onChangeSpy).toHaveBeenCalledWith(2, {
|
||||
numbers: { numbers_collection: { 2: { index: 2, slug: 'post-2', title: 'post # 2' } } },
|
||||
});
|
||||
});
|
||||
|
||||
describe('with multiple', () => {
|
||||
it('should call onChange with correct selectedItem value and metadata', async () => {
|
||||
const field = fromJS({ ...fieldConfig, multiple: true });
|
||||
const { getByText, input, onChangeSpy } = setup({ field });
|
||||
const metadata1 = {
|
||||
post: {
|
||||
posts: { 'Post # 1': { title: 'Post # 1', draft: true, num: 1, slug: 'post-number-1' } },
|
||||
},
|
||||
};
|
||||
const metadata2 = {
|
||||
post: {
|
||||
posts: { 'Post # 2': { title: 'Post # 2', draft: false, num: 2, slug: 'post-number-2' } },
|
||||
},
|
||||
};
|
||||
|
||||
fireEvent.keyDown(input, { key: 'ArrowDown' });
|
||||
await waitFor(() => {
|
||||
fireEvent.click(getByText('Post # 1 post-number-1'));
|
||||
});
|
||||
|
||||
fireEvent.keyDown(input, { key: 'ArrowDown' });
|
||||
await waitFor(() => {
|
||||
fireEvent.click(getByText('Post # 2 post-number-2'));
|
||||
});
|
||||
|
||||
expect(onChangeSpy).toHaveBeenCalledTimes(2);
|
||||
expect(onChangeSpy).toHaveBeenCalledWith(fromJS(['Post # 1']), metadata1);
|
||||
expect(onChangeSpy).toHaveBeenCalledWith(fromJS(['Post # 1', 'Post # 2']), metadata2);
|
||||
});
|
||||
|
||||
it('should update metadata for initial preview 2', async () => {
|
||||
const field = fromJS({ ...fieldConfig, multiple: true });
|
||||
const value = fromJS(['YAML post', 'JSON post']);
|
||||
const { getByText, onChangeSpy } = setup({ field, value });
|
||||
const metadata = {
|
||||
post: {
|
||||
posts: {
|
||||
'YAML post': { title: 'YAML post', slug: 'post-yaml', body: 'Body yaml' },
|
||||
'JSON post': { title: 'JSON post', slug: 'post-json', body: 'Body json' },
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// Wait for both labels to appear
|
||||
await waitFor(
|
||||
() => {
|
||||
expect(getByText('YAML post post-yaml')).toBeInTheDocument();
|
||||
expect(getByText('JSON post post-json')).toBeInTheDocument();
|
||||
},
|
||||
{ timeout: 3000 },
|
||||
);
|
||||
|
||||
// Wait for onChange to be called
|
||||
await waitFor(
|
||||
() => {
|
||||
expect(onChangeSpy).toHaveBeenCalledTimes(1);
|
||||
expect(onChangeSpy).toHaveBeenCalledWith(value, metadata);
|
||||
},
|
||||
{ timeout: 3000 },
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('with file collection', () => {
|
||||
const fileFieldConfig = {
|
||||
name: 'categories',
|
||||
collection: 'file',
|
||||
file: 'simple_file',
|
||||
value_field: 'categories.*',
|
||||
display_fields: ['categories.*'],
|
||||
};
|
||||
|
||||
it('should handle simple list', async () => {
|
||||
const field = fromJS(fileFieldConfig);
|
||||
const { getAllByText, input, getByText } = setup({ field });
|
||||
fireEvent.keyDown(input, { key: 'ArrowDown' });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(getAllByText(/category/)).toHaveLength(2);
|
||||
expect(getByText('category 1')).toBeInTheDocument();
|
||||
expect(getByText('category 2')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should handle nested list', async () => {
|
||||
const field = fromJS({
|
||||
...fileFieldConfig,
|
||||
file: 'nested_file',
|
||||
value_field: 'nested.categories.*.id',
|
||||
display_fields: ['nested.categories.*.name'],
|
||||
});
|
||||
const { getAllByText, input, getByText } = setup({ field });
|
||||
fireEvent.keyDown(input, { key: 'ArrowDown' });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(getAllByText(/category/)).toHaveLength(2);
|
||||
expect(getByText('category 1')).toBeInTheDocument();
|
||||
expect(getByText('category 2')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('with filter', () => {
|
||||
it('should list the 10 option hits on initial load using a filter on boolean value', async () => {
|
||||
const field = fromJS(filterBooleanFieldConfig);
|
||||
const { getAllByText, input } = setup({ field });
|
||||
const expectedOptions = [];
|
||||
for (let i = 2; i <= 25; i += 2) {
|
||||
expectedOptions.push(`Post # ${i} post-number-${i}`);
|
||||
}
|
||||
fireEvent.keyDown(input, { key: 'ArrowDown' });
|
||||
|
||||
await waitFor(() => {
|
||||
const displayedOptions = getAllByText(/^Post # (\d{1,2}) post-number-\1$/);
|
||||
expect(displayedOptions).toHaveLength(expectedOptions.length);
|
||||
for (let i = 0; i < expectedOptions.length; i++) {
|
||||
const expectedOption = expectedOptions[i];
|
||||
const optionFound = displayedOptions.some(
|
||||
option => option.textContent === expectedOption,
|
||||
);
|
||||
expect(optionFound).toBe(true);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
it('should list the 5 option hits on initial load using a filter on string value', async () => {
|
||||
const field = fromJS(filterStringFieldConfig);
|
||||
const { getAllByText, input } = setup({ field });
|
||||
const expectedOptions = [
|
||||
'Post # 1 post-number-1',
|
||||
'Post # 2 post-number-2',
|
||||
'Post # 7 post-number-7',
|
||||
'Post # 9 post-number-9',
|
||||
'Post # 15 post-number-15',
|
||||
];
|
||||
fireEvent.keyDown(input, { key: 'ArrowDown' });
|
||||
|
||||
await waitFor(() => {
|
||||
const displayedOptions = getAllByText(/^Post # (\d{1,2}) post-number-\1$/);
|
||||
expect(displayedOptions).toHaveLength(expectedOptions.length);
|
||||
for (let i = 0; i < expectedOptions.length; i++) {
|
||||
const expectedOption = expectedOptions[i];
|
||||
const optionFound = displayedOptions.some(
|
||||
option => option.textContent === expectedOption,
|
||||
);
|
||||
expect(optionFound).toBe(true);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
it('should list 3 option hits on initial load using a filter on integer value', async () => {
|
||||
const field = fromJS(filterIntegerFieldConfig);
|
||||
const { getAllByText, input } = setup({ field });
|
||||
const expectedOptions = [
|
||||
'Post # 1 post-number-1',
|
||||
'Post # 5 post-number-5',
|
||||
'Post # 9 post-number-9',
|
||||
];
|
||||
fireEvent.keyDown(input, { key: 'ArrowDown' });
|
||||
|
||||
await waitFor(() => {
|
||||
const displayedOptions = getAllByText(/^Post # (\d{1,2}) post-number-\1$/);
|
||||
expect(displayedOptions).toHaveLength(expectedOptions.length);
|
||||
for (let i = 0; i < expectedOptions.length; i++) {
|
||||
const expectedOption = expectedOptions[i];
|
||||
const optionFound = displayedOptions.some(
|
||||
option => option.textContent === expectedOption,
|
||||
);
|
||||
expect(optionFound).toBe(true);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
it('should list 4 option hits on initial load using multiple filters', async () => {
|
||||
const field = fromJS(multipleFiltersFieldConfig);
|
||||
const { getAllByText, input } = setup({ field });
|
||||
const expectedOptions = [
|
||||
'Post # 1 post-number-1',
|
||||
'Post # 7 post-number-7',
|
||||
'Post # 9 post-number-9',
|
||||
'Post # 15 post-number-15',
|
||||
];
|
||||
fireEvent.keyDown(input, { key: 'ArrowDown' });
|
||||
|
||||
await waitFor(() => {
|
||||
const displayedOptions = getAllByText(/^Post # (\d{1,2}) post-number-\1$/);
|
||||
expect(displayedOptions).toHaveLength(expectedOptions.length);
|
||||
for (let i = 0; i < expectedOptions.length; i++) {
|
||||
const expectedOption = expectedOptions[i];
|
||||
const optionFound = displayedOptions.some(
|
||||
option => option.textContent === expectedOption,
|
||||
);
|
||||
expect(optionFound).toBe(true);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
it('should list 0 option hits on initial load on empty filter values array', async () => {
|
||||
const field = fromJS(emptyFilterFieldConfig);
|
||||
const { getAllByText, input } = setup({ field });
|
||||
fireEvent.keyDown(input, { key: 'ArrowDown' });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(() => getAllByText(/^Post # (\d{1,2}) post-number-\1$/)).toThrow(Error);
|
||||
});
|
||||
});
|
||||
|
||||
it('should list 1 option hit on initial load on nested filter field', async () => {
|
||||
const field = fromJS(nestedFilterFieldConfig);
|
||||
const { getAllByText, input } = setup({ field });
|
||||
fireEvent.keyDown(input, { key: 'ArrowDown' });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(() => getAllByText(/^Post # (\d{1,2}) post-number-\1$/)).toThrow(Error);
|
||||
expect(getAllByText('Deeply nested post post-deeply-nested')).toHaveLength(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
16
source/admin/packages/decap-cms-widget-relation/src/index.js
Normal file
16
source/admin/packages/decap-cms-widget-relation/src/index.js
Normal file
@@ -0,0 +1,16 @@
|
||||
import controlComponent from './RelationControl';
|
||||
import previewComponent from './RelationPreview';
|
||||
import schema from './schema';
|
||||
|
||||
function Widget(opts = {}) {
|
||||
return {
|
||||
name: 'relation',
|
||||
controlComponent,
|
||||
previewComponent,
|
||||
schema,
|
||||
...opts,
|
||||
};
|
||||
}
|
||||
|
||||
export const DecapCmsWidgetRelation = { Widget, controlComponent, previewComponent };
|
||||
export default DecapCmsWidgetRelation;
|
||||
@@ -0,0 +1,32 @@
|
||||
export default {
|
||||
properties: {
|
||||
collection: { type: 'string' },
|
||||
value_field: { type: 'string' },
|
||||
search_fields: { type: 'array', minItems: 1, items: { type: 'string' } },
|
||||
file: { type: 'string' },
|
||||
multiple: { type: 'boolean' },
|
||||
min: { type: 'integer' },
|
||||
max: { type: 'integer' },
|
||||
display_fields: { type: 'array', minItems: 1, items: { type: 'string' } },
|
||||
options_length: { type: 'integer' },
|
||||
filters: {
|
||||
type: 'array',
|
||||
items: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
field: { type: 'string' },
|
||||
values: { type: 'array', minItems: 1, items: { type: ['string', 'boolean', 'integer'] } },
|
||||
},
|
||||
required: ['field', 'values'],
|
||||
},
|
||||
},
|
||||
},
|
||||
oneOf: [
|
||||
{
|
||||
required: ['collection', 'value_field', 'search_fields'],
|
||||
},
|
||||
{
|
||||
required: ['collection', 'valueField', 'searchFields'],
|
||||
},
|
||||
],
|
||||
};
|
||||
Reference in New Issue
Block a user