tabshift/payload
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adjusts component props, popup button composition and more

Browse Source
This commit is contained in:
Jarrod Flesch
2020-06-26 15:19:54 -04:00
parent a4d0608f56
commit aa5da49514
17 changed files with 147 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/client/components/elements/Popup/PopupButton/index.js Normal file
View File

@@ -0,0 +1,56 @@
import React from 'react';
import PropTypes from 'prop-types';
import './index.scss';
const baseClass = 'popup-button';
const PopupButton = (props) => {
const {
buttonType,
button,
setActive,
active,
} = props;
const classes = [
baseClass,
`${baseClass}--${buttonType}`,
].filter(Boolean).join(' ');
if (buttonType === 'custom') {
return (
<div
role="button"
tabIndex="0"
onClick={() => setActive(!active)}
className={classes}
>
{button}
</div>
);
}
return (
<button
type="button"
onClick={() => setActive(!active)}
className={classes}
>
{button}
</button>
);
};
PopupButton.defaultProps = {
buttonType: null,
};
PopupButton.propTypes = {
buttonType: PropTypes.oneOf(['custom', 'default']),
button: PropTypes.node.isRequired,
setActive: PropTypes.func.isRequired,
active: PropTypes.bool.isRequired,
};
export default PopupButton;

5
src/client/components/elements/Popup/PopupButton/index.scss Normal file
View File

@@ -0,0 +1,5 @@
@import '../../../../scss/styles.scss';
.popup-button {
display: inline-flex;
}

36
src/client/components/elements/Popup/index.js
View File

@@ -2,37 +2,14 @@ import React, { useEffect, useRef, useState } from 'react';
import PropTypes from 'prop-types';
import { useWindowInfo } from '@trbl/react-window-info';
import { useScrollInfo } from '@trbl/react-scroll-info';
import useThrottledEffect from '../../../hooks/useThrottledEffect';
import PopupButton from './PopupButton';
import './index.scss';
const baseClass = 'popup';
const ClickableButton = ({
buttonType, button, setActive, active,
}) => {
if (buttonType === 'custom') {
return (
<div
role="button"
tabIndex="0"
onClick={() => setActive(!active)}
>
{button}
</div>
);
}
return (
<button
type="button"
onClick={() => setActive(!active)}
>
{button}
</button>
);
};
const Popup = (props) => {
const {
render, align, size, color, pointerAlignment, button, buttonType, children, showOnHover,
@@ -90,7 +67,10 @@ const Popup = (props) => {
return (
<div className={classes}>
<div ref={buttonRef}>
<div
ref={buttonRef}
className={`${baseClass}__wrapper`}
>
{showOnHover
? (
<div
@@ -98,7 +78,7 @@ const Popup = (props) => {
onMouseEnter={() => setActive(true)}
onMouseLeave={() => setActive(false)}
>
<ClickableButton
<PopupButton
buttonType={buttonType}
button={button}
setActive={setActive}
@@ -107,7 +87,7 @@ const Popup = (props) => {
</div>
)
: (
<ClickableButton
<PopupButton
buttonType={buttonType}
button={button}
setActive={setActive}

4
src/client/components/forms/DraggableSection/ActionHandle/index.js
View File

@@ -36,7 +36,7 @@ const ActionHandle = (props) => {
icon="x"
iconPosition="left"
iconStyle="with-border"
onClick={() => removeRow()}
onClick={removeRow}
/>
)}
>
@@ -58,7 +58,7 @@ const ActionHandle = (props) => {
icon="plus"
iconPosition="left"
iconStyle="with-border"
onClick={() => addRow()}
onClick={addRow}
/>
)}
>

3
src/client/components/forms/DraggableSection/ActionHandle/index.scss
View File

@@ -3,11 +3,12 @@
.action-handle {
padding: base(.5);
padding-left: base(.75);
margin-bottom: base(.5);
margin-bottom: base(.75);
&__controls-container {
position: relative;
height: 100%;
z-index: $z-nav;
}
&__controls {

2
src/client/components/forms/DraggableSection/PositionHandle/index.scss
View File

@@ -2,7 +2,7 @@
.position-handle {
padding-right: base(1);
margin-bottom: base(.5);
margin-bottom: base(.75);
&__controls-container {
position: relative;

4
src/client/components/forms/DraggableSection/index.js
View File

@@ -51,8 +51,9 @@ const DraggableSection = (props) => {
<div
ref={providedDrag.innerRef}
className={classes}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
onMouseOver={() => setIsHovered(true)}
onFocus={() => setIsHovered(true)}
{...providedDrag.draggableProps}
>
@@ -105,7 +106,6 @@ const DraggableSection = (props) => {
<ActionHandle
removeRow={removeRow}
addRow={addRow}
rowIndex={rowIndex}
singularLabel={singularLabel}
verticalAlignment={actionHandleVerticalAlignment}
/>

14
src/client/components/forms/DraggableSection/index.scss
View File

@@ -56,8 +56,7 @@
width: 100%;
}
&.is-hovered,
&:focus-within {
&.is-hovered {
> .position-handle {
.position-handle__controls-container {
box-shadow: #{$style-stroke-width-m} 0px 0px 0px $color-dark-gray;
@@ -81,17 +80,14 @@
}
.toggle-collapse {
@include color-svg(white);
.btn__icon {
background-color: $color-gray;
&:hover {
background-color: $color-dark-gray;
}
}
&:focus {
@include color-svg(white);
}
}
}
@@ -107,6 +103,10 @@
.collection-edit {
@include absolutely-position-handles();
@include mid-break {
@include realtively-position-handles();
}
}
.field-type.repeater .field-type.repeater {

14
src/client/components/forms/field-types/Flexible/BlockSelector/BlockSearch/index.js
View File

@@ -1,4 +1,5 @@
import React from 'react';
import PropTypes from 'prop-types';
import SearchIcon from '../../../../../graphics/Search';
@@ -6,16 +7,27 @@ import './index.scss';
const baseClass = 'block-search';
const BlockSearch = () => {
const BlockSearch = (props) => {
const { setSearchTerm } = props;
const handleChange = (e) => {
setSearchTerm(e.target.value);
};
return (
<div className={baseClass}>
<input
className={`${baseClass}__input`}
placeholder="Search for a block"
onChange={handleChange}
/>
<SearchIcon />
</div>
);
};
BlockSearch.propTypes = {
setSearchTerm: PropTypes.func.isRequired,
};
export default BlockSearch;

2
src/client/components/forms/field-types/Flexible/BlockSelector/BlockSearch/index.scss
View File

@@ -5,6 +5,8 @@ $icon-margin: base(.25);
.block-search {
position: relative;
display: flex;
align-items: center;
&__input {
@include formInput;

15
src/client/components/forms/field-types/Flexible/BlockSelector/BlockSelection/index.js
View File

@@ -8,18 +8,28 @@ import './index.scss';
const baseClass = 'block-selection';
const BlockSelection = (props) => {
const { addRow, addRowIndex, block } = props;
const {
addRow, addRowIndex, block, close,
} = props;
const { labels, slug, blockImage } = block;
console.log(blockImage);
const handleBlockSelection = () => {
close();
addRow(addRowIndex, slug);
};
return (
<div
className={baseClass}
role="button"
tabIndex={0}
onClick={() => addRow(addRowIndex, slug)}
onClick={handleBlockSelection}
>
<div className={`${baseClass}__image`}>
{/* <img src={blockImage} /> */}
<FallbackBlockImage />
</div>
<div className={`${baseClass}__label`}>{labels.singular}</div>
@@ -42,6 +52,7 @@ BlockSelection.propTypes = {
slug: PropTypes.string,
blockImage: PropTypes.string,
}).isRequired,
close: PropTypes.func.isRequired,
};
export default BlockSelection;

27
src/client/components/forms/field-types/Flexible/BlockSelector/index.js
View File

@@ -1,4 +1,4 @@
import React from 'react';
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import BlockSearch from './BlockSearch';
@@ -7,16 +7,35 @@ import BlocksContainer from './BlocksContainer';
const baseClass = 'block-selector';
const BlockSelector = (props) => {
const { blocks, ...remainingProps } = props;
const [searchTerm, setSearchTerm] = useState('');
const [filteredBlocks, setFilteredBlocks] = useState(blocks);
useEffect(() => {
const matchingBlocks = blocks.reduce((matchedBlocks, block) => {
if (block.slug.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1) matchedBlocks.push(block);
return matchedBlocks;
}, []);
setFilteredBlocks(matchingBlocks);
}, [searchTerm, blocks]);
return (
<div className={baseClass}>
<BlockSearch />
<BlocksContainer {...props} />
<BlockSearch setSearchTerm={setSearchTerm} />
<BlocksContainer
blocks={filteredBlocks}
{...remainingProps}
/>
</div>
);
};
BlockSelector.defaultProps = {};
BlockSelector.propTypes = {};
BlockSelector.propTypes = {
blocks: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
};
export default BlockSelector;

16
src/client/components/forms/field-types/Flexible/index.js
View File

@@ -212,13 +212,15 @@ const Flexible = (props) => {
{`Add ${singularLabel}`}
</Button>
)}
>
<BlockSelector
blocks={blocks}
addRow={addRow}
addRowIndex={addRowIndex}
/>
</Popup>
render={({ close }) => (
<BlockSelector
blocks={blocks}
addRow={addRow}
addRowIndex={addRowIndex}
close={close}
/>
)}
/>
</div>
</div>
</DragDropContext>

1
src/client/components/forms/field-types/Flexible/index.scss
View File

@@ -3,6 +3,7 @@
.field-type.flexible {
&__add-button-wrap {
.btn {
color: $color-gray;
margin: 0;