tonyair/silverstripe-cms
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-cms synced 2024-10-22 08:05:56 +02:00
Code Issues Projects Releases Wiki Activity

Fix anchor select field component

Browse Source 
This should have been done when we upgraded react-select. My bad.
This commit is contained in:
Guy Sartorelli 2023-01-10 12:34:13 +13:00
parent cba1acb88e
commit b9115f3f6d
No known key found for this signature in database
GPG Key ID: F313E3B9504D496A
4 changed files with 57 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/dist/js/bundle.js vendored
View File

File diff suppressed because one or more lines are too long

21
client/src/components/AnchorSelectorField/AnchorSelectorField.js
View File

@ -8,7 +8,7 @@ import SilverStripeComponent from 'lib/SilverStripeComponent';
import * as anchorSelectorActions from 'state/anchorSelector/AnchorSelectorActions';
import anchorSelectorStates from 'state/anchorSelector/AnchorSelectorStates';
import fieldHolder from 'components/FieldHolder/FieldHolder';
import { Creatable } from 'react-select';
import CreatableSelect from 'react-select/creatable';
import getFormState from 'lib/getFormState';
import classnames from 'classnames';
import PropTypes from 'prop-types';
@ -95,6 +95,7 @@ class AnchorSelectorField extends SilverStripeComponent {
* @param {String} value
*/
handleChange(value) {
console.log(value);
if (typeof this.props.onChange === 'function') {
this.props.onChange(value ? value.value : '');
}
@ -117,25 +118,23 @@ class AnchorSelectorField extends SilverStripeComponent {
}
render() {
const inputProps = {
id: this.props.id,
};
const className = classnames('anchorselectorfield', this.props.extraClass);
const options = this.getDropdownOptions();
const value = this.props.value || '';
const rawValue = this.props.value || '';
const placeholder = i18n._t('CMS.ANCHOR_SELECT_OR_TYPE', 'Select or enter anchor');
return (
<Creatable
searchable
<CreatableSelect
isSearchable
isClearable
options={options}
className={className}
name={this.props.name}
inputProps={inputProps}
onChange={this.handleChange}
onBlurResetsInput
value={value}
value={{value: rawValue}}
noOptionsMessage={() => i18n._t('CMS.ANCHOR_NO_OPTIONS', 'No options')}
placeholder={placeholder}
labelKey="value"
getOptionLabel={({ value }) => value}
classNamePrefix="anchorselectorfield"
/>
);
}

29
tests/behat/features/insert-anchor-link.feature
View File

@ -19,12 +19,10 @@ So that I can link to a external website or a page on my site
And I press the "Insert link" HTML field button
And I click "Anchor on a page" in the ".tox-collection__group" element
Then I should see an "form#Form_editorAnchorLink" element
And I should see "About Us" in the "#Form_editorAnchorLink_PageID_Holder .Select-multi-value-wrapper" element
When I click "About Us" in the "#Form_editorAnchorLink_PageID_Holder .Select-multi-value-wrapper" element
And I click "Details" in the "#Form_editorAnchorLink_PageID_Holder .Select-menu-outer" element
And I click "Select or enter anchor" in the "#Form_editorAnchorLink_Anchor_Holder .Select-multi-value-wrapper" element
And I click "youranchor" in the "#Form_editorAnchorLink_Anchor_Holder .Select-menu-outer" element
Then I should see "youranchor" in the "#Form_editorAnchorLink_Anchor_Holder .Select-value" element
And I should see "About Us" in the ".treedropdownfield__value-container" element
When I select "Details" in the "#Form_editorAnchorLink_PageID_Holder" tree dropdown
And I select "youranchor" in the "#Form_editorAnchorLink_Anchor_Holder" anchor dropdown
Then I should see "youranchor" in the ".anchorselectorfield__value-container" element
When I fill in "my desc" for "Link description"
And I press the "Insert link" button
Then the "Content" HTML field should contain "<a title="my desc" href="[sitetree_link,id=3]#youranchor">awesome</a>"
@ -36,11 +34,9 @@ So that I can link to a external website or a page on my site
And I press the "Insert link" HTML field button
And I click "Anchor on a page" in the ".tox-collection__group" element
Then I should see an "form#Form_editorAnchorLink" element
And I should see "About Us" in the "#Form_editorAnchorLink_PageID_Holder .Select-multi-value-wrapper" element
When I click "Select or enter anchor" in the "#Form_editorAnchorLink_Anchor_Holder .Select-multi-value-wrapper" element
Then I should see "dataobject-anchor" in the "#Form_editorAnchorLink_Anchor_Holder .Select-menu-outer" element
When I click "dataobject-anchor" in the "#Form_editorAnchorLink_Anchor_Holder .Select-menu-outer" element
Then I should see "dataobject-anchor" in the "#Form_editorAnchorLink_Anchor_Holder .Select-value" element
And I should see "About Us" in the ".treedropdownfield__value-container" element
When I select "dataobject-anchor" in the "#Form_editorAnchorLink_Anchor_Holder" anchor dropdown
Then I should see "dataobject-anchor" in the ".anchorselectorfield__value-container" element
When I fill in "my desc" for "Link description"
And I press the "Insert link" button
Then the "Content" HTML field should contain "<a title="my desc" href="[sitetree_link,id=2]#dataobject-anchor">awesome</a>"
@ -53,12 +49,11 @@ So that I can link to a external website or a page on my site
And I press the "Insert link" HTML field button
And I click "Anchor on a page" in the ".tox-collection__group" element
Then I should see an "form#Form_editorAnchorLink" element
And I should see "About Us" in the "#Form_editorAnchorLink_PageID_Holder .Select-multi-value-wrapper" element
When I click "Select or enter anchor" in the "#Form_editorAnchorLink_Anchor_Holder .Select-multi-value-wrapper" element
Then I should see "unsaved-anchor" in the "#Form_editorAnchorLink_Anchor_Holder .Select-menu-outer" element
And I should see "dataobject-anchor" in the "#Form_editorAnchorLink_Anchor_Holder .Select-menu-outer" element
When I click "unsaved-anchor" in the "#Form_editorAnchorLink_Anchor_Holder .Select-menu-outer" element
Then I should see "unsaved-anchor" in the "#Form_editorAnchorLink_Anchor_Holder .Select-value" element
And I should see "About Us" in the ".treedropdownfield__value-container" element
When I click on the ".anchorselectorfield__dropdown-indicator" element
Then I should see "dataobject-anchor" in the ".anchorselectorfield__menu-list" element
When I select "unsaved-anchor" in the "#Form_editorAnchorLink_Anchor_Holder" anchor dropdown
Then I should see "unsaved-anchor" in the ".anchorselectorfield__value-container" element
When I fill in "my desc" for "Link description"
And I press the "Insert link" button
Then the "Content" HTML field should contain "<a title="my desc" href="[sitetree_link,id=2]#unsaved-anchor">awesome</a>"

32
tests/behat/src/FixtureContext.php
View File

@ -8,6 +8,7 @@ use Behat\Mink\Element\NodeElement;
use PHPUnit\Framework\Assert;
use SilverStripe\BehatExtension\Context\BasicContext;
use SilverStripe\BehatExtension\Context\FixtureContext as BehatFixtureContext;
use SilverStripe\BehatExtension\Utility\StepHelper;
use SilverStripe\CMS\Model\RedirectorPage;
use SilverStripe\CMS\Model\SiteTree;
use SilverStripe\Core\ClassInfo;
@ -20,6 +21,8 @@ use SilverStripe\Versioned\Versioned;
*/
class FixtureContext extends BehatFixtureContext
{
use StepHelper;
/**
* @var BasicContext
*/
@ -139,4 +142,33 @@ JS;
$actual = $this->getMainContext()->getSession()->evaluateScript($js);
Assert::assertEquals($expected, $actual);
}
/**
* Select a value in the anchor selector field
*
* @When /^I select "([^"]*)" in the "([^"]*)" anchor dropdown$/
*/
public function iSelectValueInAnchorDropdown($text, $selector)
{
$page = $this->getMainContext()->getSession()->getPage();
/** @var NodeElement $parentElement */
$parentElement = null;
$this->retryThrowable(function () use (&$parentElement, &$page, $selector) {
$parentElement = $page->find('css', $selector);
Assert::assertNotNull($parentElement, sprintf('"%s" element not found', $selector));
$page = $this->getMainContext()->getSession()->getPage();
});
$this->retryThrowable(function () use ($parentElement, $selector) {
$dropdown = $parentElement->find('css', '.anchorselectorfield__dropdown-indicator');
Assert::assertNotNull($dropdown, sprintf('Unable to find the dropdown in "%s"', $selector));
$dropdown->click();
});
$this->retryThrowable(function () use ($text, $parentElement, $selector) {
$element = $parentElement->find('xpath', sprintf('//*[count(*)=0 and .="%s"]', $text));
Assert::assertNotNull($element, sprintf('"%s" not found in "%s"', $text, $selector));
$element->click();
});
}
}