Updating the MultiLinkField with get/set functions to set a maximumLinks value, updating entwine to pass that through to React and handling properly

Author: DanielHurdMint

client/dist/js/bundle.js

@@ -40,6 +40,7 @@ const section = 'SilverStripe\\LinkField\\Controllers\\LinkFieldController';
  * types - types of the Link passed from LinkField entwine
  * actions - object of redux actions
  * isMulti - whether this field handles multiple links or not
+ * maximumLinks - the maximum number of links that can be added to this field
  * canCreate - whether this field can create new links or not
  * readonly - whether this field is readonly or not
  * disabled - whether this field is disabled or not
@@ -54,6 +55,7 @@ const LinkField = ({
   types = {},
   actions,
   isMulti = false,
+  maximumLinks = 0,
   canCreate,
   readonly,
   disabled,
@@ -575,6 +577,7 @@ const LinkField = ({
           canCreate={canCreate}
           readonly={readonly}
           disabled={disabled}
+          exceedsMaximumLinks={!maximumLinks ? false : linkIDs.length >= maximumLinks}
           onSelectType={handleSelectType}
           dropdownToggleRef={linkPickerRef}
         /> }
@@ -599,6 +602,7 @@ LinkField.propTypes = {
   types: PropTypes.object.isRequired,
   actions: PropTypes.object.isRequired,
   isMulti: PropTypes.bool,
+  maximumLinks: PropTypes.number,
   canCreate: PropTypes.bool.isRequired,
   readonly: PropTypes.bool.isRequired,
   disabled: PropTypes.bool.isRequired,

client/src/components/LinkField/LinkField.js

@@ -16,6 +16,7 @@ const LinkPicker = ({
   canCreate,
   readonly,
   disabled,
+  exceedsMaximumLinks = false,
   onSelectType,
   dropdownToggleRef,
 }) => {
@@ -51,9 +52,9 @@ const LinkPicker = ({
   const className = classnames('link-picker', 'form-control');
   const typeArray = Object.values(types);
   const allowedTypes = typeArray.filter(type => type.allowed);
-  const message = i18n._t('LinkField.CANNOT_CREATE_LINK', 'Cannot create link');
+  const message = exceedsMaximumLinks ? i18n._t('MultiLinkField.EXCEEDS_MAXIMUM_LINKS', 'You have reached the maximum number of links') : i18n._t('LinkField.CANNOT_CREATE_LINK', 'Cannot create link');
 
-  if (!canCreate || allowedTypes.length === 0 || readonly || disabled) {
+  if (!canCreate || allowedTypes.length === 0 || readonly || disabled || exceedsMaximumLinks) {
     return (
       <div className={className}>
         <div className="link-picker__cannot-create">
@@ -90,6 +91,7 @@ LinkPicker.propTypes = {
   canCreate: PropTypes.bool.isRequired,
   readonly: PropTypes.bool.isRequired,
   disabled: PropTypes.bool.isRequired,
+  exceedsMaximumLinks: PropTypes.bool,
   onSelectType: PropTypes.func.isRequired,
   dropdownToggleRef: PropTypes.object.isRequired,
 };

client/src/components/LinkPicker/LinkPicker.js

@@ -61,6 +61,7 @@ jQuery.entwine('ss', ($) => {
         excludeLinkTextField: inputField.data('exclude-linktext-field'),
         onChange: this.handleChange.bind(this),
         isMulti: this.data('is-multi') ?? false,
+        maximumLinks: this.data('maximum-links') ?? 0,
         types: this.data('types') ?? {},
         canCreate: inputField.data('can-create') ? true : false,
         readonly: inputField.data('readonly') ? true : false,

client/src/entwine/LinkField.js

@@ -59,6 +59,7 @@ en:
     AddLink: 'Add link'
     AddNewLink: 'Add new link'
     EditLink: 'Edit link'
+    EXCEEDS_MAXIMUM_LINKS: 'You have reached the maximum number of links'
   SilverStripe\LinkField\Models\PhoneLink:
     LINKLABEL: 'Phone number'
     PHONE_FIELD: Phone

lang/en.yml

@@ -13,6 +13,27 @@
  */
 class MultiLinkField extends AbstractLinkField
 {
+    private ?int $maximumLinks = null;
+
+    /**
+     * Set the maximum number of links that can be added to this field.
+     *
+     * @param int $maximumLinks
+     */
+    public function setMaximumLinks(int $maximumLinks): static
+    {
+        $this->maximumLinks = $maximumLinks;
+        return $this;
+    }
+
+    /**
+     * Get the maximum number of links that can be added to this field.
+     */
+    public function getMaximumLinks(): ?int
+    {
+        return $this->maximumLinks ?? null;
+    }
+
     public function setValue(mixed $value, $data = null): static
     {
         // If $data is a record, we can pull the value directly from it.
@@ -38,6 +59,7 @@ public function getSchemaDataDefaults(): array
     {
         $data = parent::getSchemaDataDefaults();
         $data['isMulti'] = true;
+        $data['maximumLinks'] = $this->getMaximumLinks();
         return $data;
     }
 
@@ -52,6 +74,7 @@ protected function getDefaultAttributes(): array
     {
         $attributes = parent::getDefaultAttributes();
         $attributes['data-value'] = $this->getValueArray();
+        $attributes['data-maximum-links'] = $this->getMaximumLinks();
         return $attributes;
     }
 

src/Form/MultiLinkField.php

@@ -2,7 +2,7 @@
 <%-- It includes some pre-rendered content to provide a nicer UI while waiting for React to boot --%>
 <%-- Once React is done pre-rendering, it will discard the pre-rendered markup --%>
 <input $AttributesHTML />
-<div data-is-multi="true" data-field-id="$ID" data-schema-component="$SchemaComponent" class="entwine-linkfield" data-types="$TypesProp">
+<div data-is-multi="true" data-maximum-links="$MaximumLinks" data-field-id="$ID" data-schema-component="$SchemaComponent" class="entwine-linkfield" data-types="$TypesProp">
 
   <div class="link-field__container">
     <% include SilverStripe/LinkField/Form/LinkField_Spinner  %>