Skip to content

Commit

Permalink
fix styling of content picker component inside iframed editors
Browse files Browse the repository at this point in the history
  • Loading branch information
@fabiankaegy
fabiankaegy committed Sep 19, 2023
1 parent 8736c74 commit 865ca9c
Show file tree
Hide file tree
Showing 3 changed files with 203 additions and 161 deletions.
108 changes: 57 additions & 51 deletions components/content-picker/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,15 @@ import { __ } from '@wordpress/i18n';
import { v4 as uuidv4 } from 'uuid';
import { ContentSearch } from '../content-search';
import SortableList from './SortableList';
import { StyledComponentContext } from '../styled-components-context';

const NAMESPACE = 'tenup-content-picker';

/**
* Unfortunately, we had to use !important because on PickedItem we couldn't @emotion/styled css
* as it was breaking sortability from react-sortable-hoc
*/
const StyleWrapper = styled('div')`
const StyleWrapper = styled.div`
& .block-editor-link-control__search-item {
cursor: default;
Expand All @@ -27,7 +28,7 @@ const StyleWrapper = styled('div')`
* Without this, the flex parents will limit the width of the picker. Fixes view when the results
* all have short titles.
*/
const ContentPickerWrapper = styled('div')`
const ContentPickerWrapper = styled.div`
width: 100%;
`;

Expand Down Expand Up @@ -120,55 +121,60 @@ const ContentPicker = ({
}, [content, currentPostId, excludeCurrentPost, uniqueContentItems]);

return (
<ContentPickerWrapper className={NAMESPACE}>
{!content.length || (content.length && content.length < maxContentItems) ? (
<ContentSearch
placeholder={placeholder}
label={label}
excludeItems={excludeItems}
onSelectItem={handleSelect}
contentTypes={contentTypes}
mode={mode}
queryFilter={queryFilter}
perPage={perPage}
fetchInitialResults={fetchInitialResults}
/>
) : (
label && (
<div
style={{
marginBottom: '8px',
}}
>
{label}
</div>
)
)}

{Boolean(content?.length) && (
<StyleWrapper>
<span
style={{
marginTop: '15px',
marginBottom: '2px',
display: 'block',
}}
>
{content.length > 1 ? multiPickedLabel : singlePickedLabel}
</span>

<ul className="block-editor-link-control__search-items">
<SortableList
posts={content}
handleItemDelete={onDeleteItem}
isOrderable={isOrderable}
mode={mode}
setPosts={onPickChange}
/>
</ul>
</StyleWrapper>
)}
</ContentPickerWrapper>
<StyledComponentContext cacheKey="tenup-component-content-picker">
<ContentPickerWrapper className={NAMESPACE}>
{!content.length || (content.length && content.length < maxContentItems) ? (
<ContentSearch
placeholder={placeholder}
label={label}
excludeItems={excludeItems}
onSelectItem={handleSelect}
contentTypes={contentTypes}
mode={mode}
queryFilter={queryFilter}
perPage={perPage}
fetchInitialResults={fetchInitialResults}
/>
) : (
label && (
<div
style={{
marginBottom: '8px',
}}
>
{label}
</div>
)
)}

{Boolean(content?.length) && (
<StyleWrapper>
<span
style={{
marginTop: '15px',
marginBottom: '2px',
display: 'block',
}}
>
{content.length > 1 ? multiPickedLabel : singlePickedLabel}
</span>

<ul
className="block-editor-link-control__search-items"
style={{ padding: 0 }}
>
<SortableList
posts={content}
handleItemDelete={onDeleteItem}
isOrderable={isOrderable}
mode={mode}
setPosts={onPickChange}
/>
</ul>
</StyleWrapper>
)}
</ContentPickerWrapper>
</StyledComponentContext>
);
};

Expand Down
212 changes: 102 additions & 110 deletions components/content-search/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,42 @@ import apiFetch from '@wordpress/api-fetch';
import { useState, useRef, useEffect, useCallback } from '@wordpress/element';
import PropTypes from 'prop-types';
import { __ } from '@wordpress/i18n';
// eslint-disable-next-line no-unused-vars
import { jsx, css } from '@emotion/react';
import styled from '@emotion/styled';
import SearchItem, { defaultRenderItemType } from './SearchItem';
/** @jsx jsx */
import { StyledComponentContext } from '../styled-components-context';

const NAMESPACE = 'tenup-content-search';

// Equalize height of list icons to match loader in order to reduce jumping.
const listMinHeight = '46px';

const List = styled.ul`
max-height: 350px;
overflow-y: auto;
list-style: none !important;
margin: 0;
padding: 0;
`;

const StyledSpinner = styled(Spinner)`
/* Custom styles to reduce jumping while loading the results */
min-height: ${listMinHeight};
display: flex;
align-items: center;
justify-content: center;
`;

const LoadingContainer = styled.div`
display: flex;
justify-content: center;
margin-top: 1em;
button {
/* Reduce the jumping of the width when text changes to "Loading" */
min-width: 90px;
}
`;

const ContentSearch = ({
onSelectItem,
placeholder,
Expand Down Expand Up @@ -314,116 +340,82 @@ const ContentSearch = ({
const hasSearchResults = searchResults && !!searchResults.length;
const hasInitialResults = fetchInitialResults && isFocused;

const listCSS = css`
/* stylelint-disable */
max-height: 350px;
overflow-y: auto;
list-style: none !important;
margin: 0;
padding: 0;
`;

const loadingCSS = css`
/* Custom styles to reduce jumping while loading the results */
min-height: ${listMinHeight};
display: flex;
align-items: center;
justify-content: center;
`;

const loadMoreCSS = css`
display: flex;
justify-content: center;
margin-top: 1em;
button {
/* Reduce the jumping of the width when text changes to "Loading" */
min-width: 90px;
}
`;

return (
<NavigableMenu onNavigate={handleOnNavigate} orientation="vertical">
<TextControl
label={label}
value={searchString}
onChange={(newSearchString) => {
handleSearchStringChange(newSearchString, 1);
}}
placeholder={placeholder}
autoComplete="off"
onFocus={() => {
setIsFocused(true);
}}
onBlur={() => {
setIsFocused(false);
}}
/>

{hasSearchString || hasInitialResults ? (
<>
<ul className={`${NAMESPACE}-list`} css={listCSS}>
{isLoading && currentPage === 1 && (
<div css={loadingCSS}>
<Spinner />
</div>
<StyledComponentContext cacheKey="tenup-component-content-search">
<NavigableMenu onNavigate={handleOnNavigate} orientation="vertical">
<TextControl
label={label}
value={searchString}
onChange={(newSearchString) => {
handleSearchStringChange(newSearchString, 1);
}}
placeholder={placeholder}
autoComplete="off"
onFocus={() => {
setIsFocused(true);
}}
onBlur={() => {
setIsFocused(false);
}}
/>

{hasSearchString || hasInitialResults ? (
<>
<List className={`${NAMESPACE}-list`}>
{isLoading && currentPage === 1 && <StyledSpinner />}

{!isLoading && !hasSearchResults && (
<li
className={`${NAMESPACE}-list-item components-button`}
style={{
color: 'inherit',
cursor: 'default',
paddingLeft: '3px',
}}
>
{__('Nothing found.', '10up-block-components')}
</li>
)}
{(!isLoading || currentPage > 1) &&
searchResults.map((item, index) => {
if (!item.title.length) {
return null;
}

return (
<li
key={item.id}
className={`${NAMESPACE}-list-item`}
style={{
marginBottom: '0',
}}
>
<SearchItem
onClick={() => handleItemSelection(item)}
searchTerm={searchString}
suggestion={item}
contentTypes={contentTypes}
isSelected={selectedItem === index + 1}
renderType={renderItemType}
/>
</li>
);
})}
</List>

{!isLoading && hasSearchResults && showLoadMore && (
<LoadingContainer>
<Button onClick={handleLoadMore} variant="secondary">
{__('Load more', '10up-block-components')}
</Button>
</LoadingContainer>
)}

{!isLoading && !hasSearchResults && (
<li
className={`${NAMESPACE}-list-item components-button`}
style={{ color: 'inherit', cursor: 'default', paddingLeft: '3px' }}
>
{__('Nothing found.', '10up-block-components')}
</li>
)}
{(!isLoading || currentPage > 1) &&
searchResults.map((item, index) => {
if (!item.title.length) {
return null;
}

return (
<li
key={item.id}
className={`${NAMESPACE}-list-item`}
style={{
marginBottom: '0',
}}
>
<SearchItem
onClick={() => handleItemSelection(item)}
searchTerm={searchString}
suggestion={item}
contentTypes={contentTypes}
isSelected={selectedItem === index + 1}
renderType={renderItemType}
/>
</li>
);
})}
</ul>

{!isLoading && hasSearchResults && showLoadMore && (
<div css={loadMoreCSS}>
<Button
onClick={handleLoadMore}
type="button"
className="components-button is-secondary"
>
{__('Load more', '10up-block-components')}
</Button>
</div>
)}

{isLoading && currentPage > 1 && (
<div css={loadMoreCSS}>
<Spinner />
</div>
)}
</>
) : null}
</NavigableMenu>
{isLoading && currentPage > 1 && <StyledSpinner />}
</>
) : null}
</NavigableMenu>
</StyledComponentContext>
);
};

Expand Down
Loading

0 comments on commit 865ca9c

Please sign in to comment.