49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
import * as React from 'react';
|
|
import { useForm } from '../../../../../../src/admin/components/forms/Form/context';
|
|
import useField from '../../../../../../src/admin/components/forms/useField';
|
|
|
|
import './index.scss';
|
|
|
|
const baseClass = 'custom-blocks-field-management';
|
|
|
|
export const AddCustomBlocks: React.FC = () => {
|
|
const { addFieldRow, replaceFieldRow } = useForm();
|
|
const { value } = useField({ path: 'customBlocks' });
|
|
|
|
const nextIndex = typeof value === 'number' ? value + 1 : 0;
|
|
|
|
return (
|
|
<div className={baseClass}>
|
|
<div className={`${baseClass}__blocks-grid`}>
|
|
<button
|
|
className={`${baseClass}__block-button`}
|
|
type="button"
|
|
onClick={() => addFieldRow({ path: 'customBlocks', data: { block1Title: 'Block 1: Prefilled Title', blockType: 'block-1' }, rowIndex: nextIndex })}
|
|
>
|
|
Add Block 1
|
|
</button>
|
|
|
|
<button
|
|
className={`${baseClass}__block-button`}
|
|
type="button"
|
|
onClick={() => addFieldRow({ path: 'customBlocks', data: { block2Title: 'Block 2: Prefilled Title', blockType: 'block-2' }, rowIndex: nextIndex })}
|
|
>
|
|
Add Block 2
|
|
</button>
|
|
</div>
|
|
|
|
<div>
|
|
<button
|
|
className={`${baseClass}__block-button ${baseClass}__replace-block-button`}
|
|
type="button"
|
|
onClick={() => replaceFieldRow({ path: 'customBlocks', data: { block1Title: 'REPLACED BLOCK', blockType: 'block-1' }, rowIndex: nextIndex - 1 })}
|
|
>
|
|
Replace Block
|
|
{' '}
|
|
{nextIndex - 1}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|