mirror of
https://github.com/strapi/strapi.git
synced 2025-11-13 08:38:09 +00:00
Clean files
Signed-off-by: soupette <cyril@strapi.io>
This commit is contained in:
parent
72ebabd4ef
commit
3ef2ee513a
@ -11,36 +11,20 @@
|
|||||||
"options": {
|
"options": {
|
||||||
"draftAndPublish": true
|
"draftAndPublish": true
|
||||||
},
|
},
|
||||||
"pluginOptions": {
|
"pluginOptions": {},
|
||||||
"i18n": {
|
|
||||||
"localized": true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"attributes": {
|
"attributes": {
|
||||||
"name": {
|
"name": {
|
||||||
"type": "string",
|
"type": "string",
|
||||||
"pluginOptions": {
|
"pluginOptions": {}
|
||||||
"i18n": {
|
|
||||||
"localized": false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
"temp": {
|
"temp": {
|
||||||
"type": "component",
|
"type": "component",
|
||||||
"repeatable": true,
|
"repeatable": true,
|
||||||
"component": "default.temp",
|
"component": "default.temp",
|
||||||
"pluginOptions": {
|
"pluginOptions": {}
|
||||||
"i18n": {
|
|
||||||
"localized": true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
"dz": {
|
"dz": {
|
||||||
"pluginOptions": {
|
"pluginOptions": {},
|
||||||
"i18n": {
|
|
||||||
"localized": true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"type": "dynamiczone",
|
"type": "dynamiczone",
|
||||||
"components": [
|
"components": [
|
||||||
"basic.simple",
|
"basic.simple",
|
||||||
|
|||||||
@ -40,7 +40,7 @@ const ComponentInitializer = ({ isReadOnly, onClick }) => {
|
|||||||
paddingBottom={9}
|
paddingBottom={9}
|
||||||
>
|
>
|
||||||
<Stack size={2}>
|
<Stack size={2}>
|
||||||
<Row justifyContent="center">
|
<Row justifyContent="center" style={{ cursor: isReadOnly ? 'not-allowed' : 'inherit' }}>
|
||||||
<IconButton disabled={isReadOnly} onClick={onClick}>
|
<IconButton disabled={isReadOnly} onClick={onClick}>
|
||||||
<AddIcon />
|
<AddIcon />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
|
|||||||
@ -4,9 +4,9 @@ import LayoutDndProvider from '../LayoutDndProvider';
|
|||||||
|
|
||||||
import ItemTypes from '../../utils/ItemTypes';
|
import ItemTypes from '../../utils/ItemTypes';
|
||||||
import RepeatableComponentPreview from '../RepeatableComponent/DragPreview';
|
import RepeatableComponentPreview from '../RepeatableComponent/DragPreview';
|
||||||
import RelationItem from '../SelectMany/Relation';
|
// import RelationItem from '../SelectMany/Relation';
|
||||||
import { Li } from '../SelectMany/components';
|
// import { Li } from '../SelectMany/components';
|
||||||
import DraggedField from '../DraggedField';
|
// import DraggedField from '../DraggedField';
|
||||||
|
|
||||||
const layerStyles = {
|
const layerStyles = {
|
||||||
position: 'fixed',
|
position: 'fixed',
|
||||||
@ -47,26 +47,26 @@ const CustomDragLayer = () => {
|
|||||||
|
|
||||||
function renderItem() {
|
function renderItem() {
|
||||||
switch (itemType) {
|
switch (itemType) {
|
||||||
case ItemTypes.FIELD:
|
// case ItemTypes.FIELD:
|
||||||
return <DraggedField name={item.id} selectedItem={item.name} />;
|
// return <DraggedField name={item.id} selectedItem={item.name} />;
|
||||||
case ItemTypes.COMPONENT:
|
case ItemTypes.COMPONENT:
|
||||||
return <RepeatableComponentPreview displayedValue={item.displayedValue} />;
|
return <RepeatableComponentPreview displayedValue={item.displayedValue} />;
|
||||||
case ItemTypes.RELATION:
|
// case ItemTypes.RELATION:
|
||||||
return (
|
// return (
|
||||||
<Li>
|
// <Li>
|
||||||
<RelationItem
|
// <RelationItem
|
||||||
data={item.data}
|
// data={item.data}
|
||||||
displayNavigationLink={false}
|
// displayNavigationLink={false}
|
||||||
mainField={item.mainField}
|
// mainField={item.mainField}
|
||||||
isDisabled={false}
|
// isDisabled={false}
|
||||||
isDragging
|
// isDragging
|
||||||
hasDraftAndPublish={item.hasDraftAndPublish}
|
// hasDraftAndPublish={item.hasDraftAndPublish}
|
||||||
/>
|
// />
|
||||||
</Li>
|
// </Li>
|
||||||
);
|
// );
|
||||||
case ItemTypes.EDIT_FIELD:
|
// case ItemTypes.EDIT_FIELD:
|
||||||
case ItemTypes.EDIT_RELATION:
|
// case ItemTypes.EDIT_RELATION:
|
||||||
return <DraggedField name={item.name} size={12} selectedItem={item.name} />;
|
// return <DraggedField name={item.name} size={12} selectedItem={item.name} />;
|
||||||
default:
|
default:
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -31,6 +31,7 @@ const StyledButton = styled(BaseButton)`
|
|||||||
padding: ${({ theme }) => theme.spaces[3]};
|
padding: ${({ theme }) => theme.spaces[3]};
|
||||||
border: 0;
|
border: 0;
|
||||||
box-shadow: ${({ theme }) => theme.shadows.filterShadow};
|
box-shadow: ${({ theme }) => theme.shadows.filterShadow};
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
height: ${({ theme }) => theme.spaces[6]};
|
height: ${({ theme }) => theme.spaces[6]};
|
||||||
width: ${({ theme }) => theme.spaces[6]};
|
width: ${({ theme }) => theme.spaces[6]};
|
||||||
@ -72,7 +73,7 @@ const BoxFullHeight = styled(Box)`
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const AddComponentButton = ({ isOpen, label, name, onClick }) => {
|
const AddComponentButton = ({ isDisabled, isOpen, label, name, onClick }) => {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage } = useIntl();
|
||||||
const addLabel = formatMessage(
|
const addLabel = formatMessage(
|
||||||
{
|
{
|
||||||
@ -85,8 +86,12 @@ const AddComponentButton = ({ isOpen, label, name, onClick }) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Row justifyContent="center">
|
<Row justifyContent="center">
|
||||||
<Box paddingTop={6} paddingBottom={6}>
|
<Box
|
||||||
<StyledButton type="button" onClick={onClick}>
|
paddingTop={6}
|
||||||
|
paddingBottom={6}
|
||||||
|
style={{ cursor: isDisabled ? 'not-allowed' : 'pointer' }}
|
||||||
|
>
|
||||||
|
<StyledButton type="button" onClick={onClick} disabled={isDisabled}>
|
||||||
<Row>
|
<Row>
|
||||||
<BoxFullHeight aria-hidden paddingRight={2}>
|
<BoxFullHeight aria-hidden paddingRight={2}>
|
||||||
<StyledAddIcon $isopen={isOpen} />
|
<StyledAddIcon $isopen={isOpen} />
|
||||||
@ -107,6 +112,7 @@ AddComponentButton.defaultProps = {
|
|||||||
|
|
||||||
AddComponentButton.propTypes = {
|
AddComponentButton.propTypes = {
|
||||||
label: PropTypes.string,
|
label: PropTypes.string,
|
||||||
|
isDisabled: PropTypes.bool.isRequired,
|
||||||
isOpen: PropTypes.bool.isRequired,
|
isOpen: PropTypes.bool.isRequired,
|
||||||
name: PropTypes.string.isRequired,
|
name: PropTypes.string.isRequired,
|
||||||
onClick: PropTypes.func.isRequired,
|
onClick: PropTypes.func.isRequired,
|
||||||
|
|||||||
@ -161,6 +161,7 @@ exports[`<AddComponentButton /> displays the name of the dz when the label is em
|
|||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="c1"
|
class="c1"
|
||||||
|
style="cursor: pointer;"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
aria-disabled="false"
|
aria-disabled="false"
|
||||||
@ -389,6 +390,7 @@ exports[`<AddComponentButton /> renders and matches the snapshot 1`] = `
|
|||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="c1"
|
class="c1"
|
||||||
|
style="cursor: pointer;"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
aria-disabled="false"
|
aria-disabled="false"
|
||||||
@ -617,6 +619,7 @@ exports[`<AddComponentButton /> renders and matches the snapshot when the isOpen
|
|||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="c1"
|
class="c1"
|
||||||
|
style="cursor: pointer;"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
aria-disabled="false"
|
aria-disabled="false"
|
||||||
|
|||||||
@ -93,7 +93,6 @@ const Component = ({
|
|||||||
<FocusTrap onEscape={() => onToggle(index)}>
|
<FocusTrap onEscape={() => onToggle(index)}>
|
||||||
<FieldComponent
|
<FieldComponent
|
||||||
componentUid={componentUid}
|
componentUid={componentUid}
|
||||||
componentFriendlyName={friendlyName}
|
|
||||||
icon={icon}
|
icon={icon}
|
||||||
name={`${name}.${index}`}
|
name={`${name}.${index}`}
|
||||||
isFromDynamicZone
|
isFromDynamicZone
|
||||||
|
|||||||
@ -206,9 +206,9 @@ const DynamicZone = ({
|
|||||||
})}
|
})}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
{isFieldAllowed && (
|
|
||||||
<>
|
|
||||||
<AddComponentButton
|
<AddComponentButton
|
||||||
|
isDisabled={!isFieldAllowed}
|
||||||
label={metadatas.label}
|
label={metadatas.label}
|
||||||
isOpen={isOpen}
|
isOpen={isOpen}
|
||||||
name={name}
|
name={name}
|
||||||
@ -219,8 +219,6 @@ const DynamicZone = ({
|
|||||||
components={dynamicZoneAvailableComponents}
|
components={dynamicZoneAvailableComponents}
|
||||||
onClickAddComponent={handleAddComponent}
|
onClickAddComponent={handleAddComponent}
|
||||||
/>
|
/>
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
@ -1,44 +0,0 @@
|
|||||||
import styled from 'styled-components';
|
|
||||||
|
|
||||||
const ComponentIcon = styled.div`
|
|
||||||
position: absolute;
|
|
||||||
top: -16px;
|
|
||||||
left: 10px;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
> .component_name {
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
width: auto;
|
|
||||||
height: 31px;
|
|
||||||
padding: 0 11px 0 39px;
|
|
||||||
color: #007eff;
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 600;
|
|
||||||
line-height: 26px;
|
|
||||||
border-radius: 31px;
|
|
||||||
border: 2px solid white;
|
|
||||||
background-color: #e6f0fb;
|
|
||||||
|
|
||||||
.component_icon {
|
|
||||||
z-index: 1;
|
|
||||||
display: flex;
|
|
||||||
position: absolute;
|
|
||||||
top: -1px;
|
|
||||||
left: -1px;
|
|
||||||
width: 29px;
|
|
||||||
height: 29px;
|
|
||||||
border-radius: 31px;
|
|
||||||
border: 1px solid white;
|
|
||||||
background-color: #e6f0fb;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
margin: auto;
|
|
||||||
color: #007eff;
|
|
||||||
font-size: 11px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
export default ComponentIcon;
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
import styled from 'styled-components';
|
|
||||||
|
|
||||||
/* eslint-disable indent */
|
|
||||||
const Wrapper = styled.div`
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
${({ isFromDynamicZone }) => {
|
|
||||||
if (isFromDynamicZone) {
|
|
||||||
return `
|
|
||||||
background-color: #fff;
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
return '';
|
|
||||||
}}
|
|
||||||
`;
|
|
||||||
|
|
||||||
export default Wrapper;
|
|
||||||
@ -10,22 +10,17 @@ import { Box } from '@strapi/parts/Box';
|
|||||||
import { IconButton } from '@strapi/parts/IconButton';
|
import { IconButton } from '@strapi/parts/IconButton';
|
||||||
import { Row } from '@strapi/parts/Row';
|
import { Row } from '@strapi/parts/Row';
|
||||||
import { Stack } from '@strapi/parts/Stack';
|
import { Stack } from '@strapi/parts/Stack';
|
||||||
// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
||||||
import { getTrad } from '../../utils';
|
import { getTrad } from '../../utils';
|
||||||
import ComponentInitializer from '../ComponentInitializer';
|
import ComponentInitializer from '../ComponentInitializer';
|
||||||
import NonRepeatableComponent from '../NonRepeatableComponent';
|
import NonRepeatableComponent from '../NonRepeatableComponent';
|
||||||
import RepeatableComponent from '../RepeatableComponent';
|
import RepeatableComponent from '../RepeatableComponent';
|
||||||
import connect from './utils/connect';
|
import connect from './utils/connect';
|
||||||
import select from './utils/select';
|
import select from './utils/select';
|
||||||
// import ComponentIcon from './ComponentIcon';
|
|
||||||
import Label from './Label';
|
import Label from './Label';
|
||||||
// import Wrapper from './Wrapper';
|
|
||||||
|
|
||||||
const FieldComponent = ({
|
const FieldComponent = ({
|
||||||
addNonRepeatableComponentToField,
|
addNonRepeatableComponentToField,
|
||||||
// componentFriendlyName,
|
|
||||||
componentUid,
|
componentUid,
|
||||||
// icon,
|
|
||||||
// TODO add error state
|
// TODO add error state
|
||||||
// formErrors,
|
// formErrors,
|
||||||
intlLabel,
|
intlLabel,
|
||||||
@ -117,75 +112,12 @@ const FieldComponent = ({
|
|||||||
</Stack>
|
</Stack>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
|
|
||||||
// return (
|
|
||||||
// <Wrapper className="col-12" isFromDynamicZone={isFromDynamicZone}>
|
|
||||||
// {isFromDynamicZone && (
|
|
||||||
// <ComponentIcon title={componentFriendlyName}>
|
|
||||||
// <div className="component_name">
|
|
||||||
// <div className="component_icon">
|
|
||||||
// <FontAwesomeIcon icon={icon} title={componentFriendlyName} />
|
|
||||||
// </div>
|
|
||||||
// <p>{componentFriendlyName}</p>
|
|
||||||
// </div>
|
|
||||||
// </ComponentIcon>
|
|
||||||
// )}
|
|
||||||
// <Label>
|
|
||||||
// <span>
|
|
||||||
// {label}
|
|
||||||
// {isRepeatable && `(${componentValueLength})`}
|
|
||||||
// </span>
|
|
||||||
// {formattedLabelIcon && (
|
|
||||||
// <LabelIconWrapper title={formattedLabelIcon.title}>
|
|
||||||
// {formattedLabelIcon.icon}
|
|
||||||
// </LabelIconWrapper>
|
|
||||||
// )}
|
|
||||||
// </Label>
|
|
||||||
// {showResetComponent && (
|
|
||||||
// <Reset
|
|
||||||
// onClick={e => {
|
|
||||||
// e.preventDefault();
|
|
||||||
// e.stopPropagation();
|
|
||||||
// removeComponentFromField(name, componentUid);
|
|
||||||
// }}
|
|
||||||
// >
|
|
||||||
// <FormattedMessage id={getTrad('components.reset-entry')} />
|
|
||||||
// <div />
|
|
||||||
// </Reset>
|
|
||||||
// )}
|
|
||||||
// {!isRepeatable && !isInitialized && (
|
|
||||||
// <ComponentInitializer componentUid={componentUid} name={name} isReadOnly={isReadOnly} />
|
|
||||||
// )}
|
|
||||||
|
|
||||||
// {!isRepeatable && isInitialized && (
|
|
||||||
// <NonRepeatableComponent
|
|
||||||
// componentUid={componentUid}
|
|
||||||
// isFromDynamicZone={isFromDynamicZone}
|
|
||||||
// name={name}
|
|
||||||
// />
|
|
||||||
// )}
|
|
||||||
// {isRepeatable && (
|
|
||||||
// <RepeatableComponent
|
|
||||||
// componentValue={componentValue}
|
|
||||||
// componentValueLength={componentValueLength}
|
|
||||||
// componentUid={componentUid}
|
|
||||||
// isNested={isNested}
|
|
||||||
// isReadOnly={isReadOnly}
|
|
||||||
// max={max}
|
|
||||||
// min={min}
|
|
||||||
// name={name}
|
|
||||||
// />
|
|
||||||
// )}
|
|
||||||
// </Wrapper>
|
|
||||||
// );
|
|
||||||
};
|
};
|
||||||
|
|
||||||
FieldComponent.defaultProps = {
|
FieldComponent.defaultProps = {
|
||||||
componentValue: null,
|
componentValue: null,
|
||||||
// componentFriendlyName: null,
|
|
||||||
hasChildrenAllowedFields: false,
|
hasChildrenAllowedFields: false,
|
||||||
hasChildrenReadableFields: false,
|
hasChildrenReadableFields: false,
|
||||||
// icon: 'smile',
|
|
||||||
intlLabel: undefined,
|
intlLabel: undefined,
|
||||||
isFromDynamicZone: false,
|
isFromDynamicZone: false,
|
||||||
isReadOnly: false,
|
isReadOnly: false,
|
||||||
@ -198,12 +130,10 @@ FieldComponent.defaultProps = {
|
|||||||
|
|
||||||
FieldComponent.propTypes = {
|
FieldComponent.propTypes = {
|
||||||
addNonRepeatableComponentToField: PropTypes.func.isRequired,
|
addNonRepeatableComponentToField: PropTypes.func.isRequired,
|
||||||
// componentFriendlyName: PropTypes.string,
|
|
||||||
componentUid: PropTypes.string.isRequired,
|
componentUid: PropTypes.string.isRequired,
|
||||||
componentValue: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
componentValue: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||||
hasChildrenAllowedFields: PropTypes.bool,
|
hasChildrenAllowedFields: PropTypes.bool,
|
||||||
hasChildrenReadableFields: PropTypes.bool,
|
hasChildrenReadableFields: PropTypes.bool,
|
||||||
// icon: PropTypes.string,
|
|
||||||
isCreatingEntry: PropTypes.bool.isRequired,
|
isCreatingEntry: PropTypes.bool.isRequired,
|
||||||
isFromDynamicZone: PropTypes.bool,
|
isFromDynamicZone: PropTypes.bool,
|
||||||
isReadOnly: PropTypes.bool,
|
isReadOnly: PropTypes.bool,
|
||||||
|
|||||||
@ -10,12 +10,7 @@ import { useContentTypeLayout } from '../../hooks';
|
|||||||
import FieldComponent from '../FieldComponent';
|
import FieldComponent from '../FieldComponent';
|
||||||
import Inputs from '../Inputs';
|
import Inputs from '../Inputs';
|
||||||
|
|
||||||
const NonRepeatableComponent = ({
|
const NonRepeatableComponent = ({ componentUid, name }) => {
|
||||||
componentUid,
|
|
||||||
// TODO
|
|
||||||
// isFromDynamicZone,
|
|
||||||
name,
|
|
||||||
}) => {
|
|
||||||
const { getComponentLayout } = useContentTypeLayout();
|
const { getComponentLayout } = useContentTypeLayout();
|
||||||
const componentLayoutData = useMemo(() => getComponentLayout(componentUid), [
|
const componentLayoutData = useMemo(() => getComponentLayout(componentUid), [
|
||||||
componentUid,
|
componentUid,
|
||||||
@ -70,58 +65,10 @@ const NonRepeatableComponent = ({
|
|||||||
</Stack>
|
</Stack>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
|
|
||||||
// return (
|
|
||||||
// <NonRepeatableWrapper isFromDynamicZone={isFromDynamicZone}>
|
|
||||||
// {fields.map((fieldRow, key) => {
|
|
||||||
// return (
|
|
||||||
// <div className="row" key={key}>
|
|
||||||
// {fieldRow.map(({ name: fieldName, size, metadatas, fieldSchema, queryInfos }) => {
|
|
||||||
// const isComponent = fieldSchema.type === 'component';
|
|
||||||
// const keys = `${name}.${fieldName}`;
|
|
||||||
|
|
||||||
// if (isComponent) {
|
|
||||||
// const compoUid = fieldSchema.component;
|
|
||||||
|
|
||||||
// return (
|
|
||||||
// <FieldComponent
|
|
||||||
// key={fieldName}
|
|
||||||
// componentUid={compoUid}
|
|
||||||
// isRepeatable={fieldSchema.repeatable}
|
|
||||||
// label={metadatas.label}
|
|
||||||
// max={fieldSchema.max}
|
|
||||||
// min={fieldSchema.min}
|
|
||||||
// name={keys}
|
|
||||||
// />
|
|
||||||
// );
|
|
||||||
// }
|
|
||||||
|
|
||||||
// return (
|
|
||||||
// <div key={fieldName} className={`col-${size}`}>
|
|
||||||
// <Inputs
|
|
||||||
// keys={keys}
|
|
||||||
// fieldSchema={fieldSchema}
|
|
||||||
// metadatas={metadatas}
|
|
||||||
// componentUid={componentUid}
|
|
||||||
// queryInfos={queryInfos}
|
|
||||||
// />
|
|
||||||
// </div>
|
|
||||||
// );
|
|
||||||
// })}
|
|
||||||
// </div>
|
|
||||||
// );
|
|
||||||
// })}
|
|
||||||
// </NonRepeatableWrapper>
|
|
||||||
// );
|
|
||||||
};
|
|
||||||
|
|
||||||
NonRepeatableComponent.defaultProps = {
|
|
||||||
// isFromDynamicZone: false,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
NonRepeatableComponent.propTypes = {
|
NonRepeatableComponent.propTypes = {
|
||||||
componentUid: PropTypes.string.isRequired,
|
componentUid: PropTypes.string.isRequired,
|
||||||
// isFromDynamicZone: PropTypes.bool,
|
|
||||||
name: PropTypes.string.isRequired,
|
name: PropTypes.string.isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -1,73 +0,0 @@
|
|||||||
import styled from 'styled-components';
|
|
||||||
|
|
||||||
const hoverStyle = `
|
|
||||||
border: 1px solid #aed4fb;
|
|
||||||
background-color: #e6f0fb;
|
|
||||||
> button {
|
|
||||||
:before,
|
|
||||||
:after {
|
|
||||||
background-color: #007eff;
|
|
||||||
}
|
|
||||||
background-color: #aed4fb;
|
|
||||||
}
|
|
||||||
|
|
||||||
> p {
|
|
||||||
color: #007eff;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
/* eslint-disable indent */
|
|
||||||
const NonRepeatableWrapper = styled.div`
|
|
||||||
margin: 0 !important;
|
|
||||||
padding: 0 20px !important;
|
|
||||||
|
|
||||||
${({ isEmpty, isFromDynamicZone, isReadOnly }) => {
|
|
||||||
if (isEmpty) {
|
|
||||||
return `
|
|
||||||
position: relative;
|
|
||||||
height: 108px;
|
|
||||||
margin-bottom: 25px !important;
|
|
||||||
background-color: #fafafb;
|
|
||||||
text-align: center;
|
|
||||||
cursor: ${isReadOnly ? 'not-allowed' : 'pointer'};
|
|
||||||
border-radius: 2px;
|
|
||||||
|
|
||||||
> button {
|
|
||||||
position: absolute;
|
|
||||||
top: 30px;
|
|
||||||
left: calc(50% - 18px);
|
|
||||||
height: 36px;
|
|
||||||
width: 36px;
|
|
||||||
line-height: 38px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: #f3f4f4;
|
|
||||||
cursor: ${isReadOnly ? 'not-allowed !important' : 'pointer'};
|
|
||||||
}
|
|
||||||
border: 1px solid transparent;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
${isReadOnly ? '' : hoverStyle};
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isFromDynamicZone) {
|
|
||||||
return `
|
|
||||||
background-color: #fff;
|
|
||||||
padding: 0 10px !important;
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
return `
|
|
||||||
padding-top: 25px !important;
|
|
||||||
background-color: #f7f8f8;
|
|
||||||
margin-bottom: 18px !important;
|
|
||||||
`;
|
|
||||||
}}
|
|
||||||
`;
|
|
||||||
|
|
||||||
NonRepeatableWrapper.defaultProps = {
|
|
||||||
isReadOnly: false,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default NonRepeatableWrapper;
|
|
||||||
@ -1,114 +1,114 @@
|
|||||||
/* eslint-disable jsx-a11y/click-events-have-key-events */
|
// /* eslint-disable jsx-a11y/click-events-have-key-events */
|
||||||
import React, { forwardRef } from 'react';
|
// import React, { forwardRef } from 'react';
|
||||||
import { FormattedMessage } from 'react-intl';
|
// import { FormattedMessage } from 'react-intl';
|
||||||
import PropTypes from 'prop-types';
|
// import PropTypes from 'prop-types';
|
||||||
import { Carret, Grab } from '@buffetjs/icons';
|
// import { Carret, Grab } from '@buffetjs/icons';
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||||
import { getTrad } from '../../utils';
|
// import { getTrad } from '../../utils';
|
||||||
import PreviewCarret from '../PreviewCarret';
|
// import PreviewCarret from '../PreviewCarret';
|
||||||
// import BannerWrapper from './BannerWrapper';
|
// // import BannerWrapper from './BannerWrapper';
|
||||||
|
|
||||||
const BannerWrapper = () => null;
|
// const BannerWrapper = () => null;
|
||||||
|
|
||||||
/* eslint-disable jsx-a11y/no-static-element-interactions */
|
// /* eslint-disable jsx-a11y/no-static-element-interactions */
|
||||||
|
|
||||||
const Banner = forwardRef(
|
// const Banner = forwardRef(
|
||||||
(
|
// (
|
||||||
{
|
// {
|
||||||
displayedValue,
|
// displayedValue,
|
||||||
doesPreviousFieldContainErrorsAndIsOpen,
|
// doesPreviousFieldContainErrorsAndIsOpen,
|
||||||
hasErrors,
|
// hasErrors,
|
||||||
hasMinError,
|
// hasMinError,
|
||||||
isFirst,
|
// isFirst,
|
||||||
isReadOnly,
|
// isReadOnly,
|
||||||
isDragging,
|
// isDragging,
|
||||||
isOpen,
|
// isOpen,
|
||||||
onClickToggle,
|
// onClickToggle,
|
||||||
onClickRemove,
|
// onClickRemove,
|
||||||
style,
|
// style,
|
||||||
},
|
// },
|
||||||
refs
|
// refs
|
||||||
) => {
|
// ) => {
|
||||||
const display = isDragging ? 'none' : '';
|
// const display = isDragging ? 'none' : '';
|
||||||
|
|
||||||
return (
|
// return (
|
||||||
<BannerWrapper
|
// <BannerWrapper
|
||||||
doesPreviousFieldContainErrorsAndIsOpen={doesPreviousFieldContainErrorsAndIsOpen}
|
// doesPreviousFieldContainErrorsAndIsOpen={doesPreviousFieldContainErrorsAndIsOpen}
|
||||||
type="button"
|
// type="button"
|
||||||
hasMinError={hasMinError}
|
// hasMinError={hasMinError}
|
||||||
hasErrors={hasErrors}
|
// hasErrors={hasErrors}
|
||||||
isFirst={isFirst}
|
// isFirst={isFirst}
|
||||||
isOpen={isOpen}
|
// isOpen={isOpen}
|
||||||
isReadOnly={isReadOnly}
|
// isReadOnly={isReadOnly}
|
||||||
onClick={onClickToggle}
|
// onClick={onClickToggle}
|
||||||
ref={refs ? refs.dropRef : null}
|
// ref={refs ? refs.dropRef : null}
|
||||||
style={style}
|
// style={style}
|
||||||
>
|
// >
|
||||||
{isDragging && <PreviewCarret isComponent />}
|
// {isDragging && <PreviewCarret isComponent />}
|
||||||
<>
|
// <>
|
||||||
<div className="img-wrapper" style={{ display }}>
|
// <div className="img-wrapper" style={{ display }}>
|
||||||
<Carret />
|
// <Carret />
|
||||||
</div>
|
// </div>
|
||||||
|
|
||||||
<FormattedMessage id={getTrad('containers.Edit.pluginHeader.title.new')}>
|
// <FormattedMessage id={getTrad('containers.Edit.pluginHeader.title.new')}>
|
||||||
{msg => {
|
// {msg => {
|
||||||
// The displayed value may be "falsey" when the main field is a number or boolean
|
// // The displayed value may be "falsey" when the main field is a number or boolean
|
||||||
return <div style={{ display }}>{displayedValue ?? msg}</div>;
|
// return <div style={{ display }}>{displayedValue ?? msg}</div>;
|
||||||
}}
|
// }}
|
||||||
</FormattedMessage>
|
// </FormattedMessage>
|
||||||
<div className="cta-wrapper" style={{ display }}>
|
// <div className="cta-wrapper" style={{ display }}>
|
||||||
{!isReadOnly && (
|
// {!isReadOnly && (
|
||||||
<>
|
// <>
|
||||||
<div
|
// <div
|
||||||
className="trash-icon"
|
// className="trash-icon"
|
||||||
style={{ marginRight: 10, padding: '0 5px' }}
|
// style={{ marginRight: 10, padding: '0 5px' }}
|
||||||
onClick={e => {
|
// onClick={e => {
|
||||||
e.preventDefault();
|
// e.preventDefault();
|
||||||
e.stopPropagation();
|
// e.stopPropagation();
|
||||||
onClickRemove();
|
// onClickRemove();
|
||||||
}}
|
// }}
|
||||||
>
|
// >
|
||||||
<FontAwesomeIcon icon="trash-alt" />
|
// <FontAwesomeIcon icon="trash-alt" />
|
||||||
</div>
|
// </div>
|
||||||
<div className="grab" ref={refs ? refs.dragRef : null}>
|
// <div className="grab" ref={refs ? refs.dragRef : null}>
|
||||||
<Grab />
|
// <Grab />
|
||||||
</div>
|
// </div>
|
||||||
</>
|
// </>
|
||||||
)}
|
// )}
|
||||||
</div>
|
// </div>
|
||||||
</>
|
// </>
|
||||||
</BannerWrapper>
|
// </BannerWrapper>
|
||||||
);
|
// );
|
||||||
}
|
// }
|
||||||
);
|
// );
|
||||||
|
|
||||||
Banner.defaultProps = {
|
// Banner.defaultProps = {
|
||||||
displayedValue: null,
|
// displayedValue: null,
|
||||||
doesPreviousFieldContainErrorsAndIsOpen: false,
|
// doesPreviousFieldContainErrorsAndIsOpen: false,
|
||||||
hasErrors: false,
|
// hasErrors: false,
|
||||||
hasMinError: false,
|
// hasMinError: false,
|
||||||
isDragging: false,
|
// isDragging: false,
|
||||||
isFirst: false,
|
// isFirst: false,
|
||||||
isOpen: false,
|
// isOpen: false,
|
||||||
onClickRemove: () => {},
|
// onClickRemove: () => {},
|
||||||
onClickToggle: () => {},
|
// onClickToggle: () => {},
|
||||||
style: {},
|
// style: {},
|
||||||
};
|
// };
|
||||||
|
|
||||||
Banner.propTypes = {
|
// Banner.propTypes = {
|
||||||
displayedValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]),
|
// displayedValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]),
|
||||||
doesPreviousFieldContainErrorsAndIsOpen: PropTypes.bool,
|
// doesPreviousFieldContainErrorsAndIsOpen: PropTypes.bool,
|
||||||
hasErrors: PropTypes.bool,
|
// hasErrors: PropTypes.bool,
|
||||||
hasMinError: PropTypes.bool,
|
// hasMinError: PropTypes.bool,
|
||||||
isDragging: PropTypes.bool,
|
// isDragging: PropTypes.bool,
|
||||||
isFirst: PropTypes.bool,
|
// isFirst: PropTypes.bool,
|
||||||
isOpen: PropTypes.bool,
|
// isOpen: PropTypes.bool,
|
||||||
isReadOnly: PropTypes.bool.isRequired,
|
// isReadOnly: PropTypes.bool.isRequired,
|
||||||
onClickToggle: PropTypes.func,
|
// onClickToggle: PropTypes.func,
|
||||||
onClickRemove: PropTypes.func,
|
// onClickRemove: PropTypes.func,
|
||||||
style: PropTypes.object,
|
// style: PropTypes.object,
|
||||||
};
|
// };
|
||||||
|
|
||||||
Banner.displayName = 'Banner';
|
// Banner.displayName = 'Banner';
|
||||||
|
|
||||||
export default Banner;
|
// export default Banner;
|
||||||
|
|||||||
@ -30,6 +30,7 @@ import { connect, select } from './utils';
|
|||||||
|
|
||||||
const DraggedItem = ({
|
const DraggedItem = ({
|
||||||
componentFieldName,
|
componentFieldName,
|
||||||
|
// FIXME: errors
|
||||||
// doesPreviousFieldContainErrorsAndIsOpen,
|
// doesPreviousFieldContainErrorsAndIsOpen,
|
||||||
// hasErrors,
|
// hasErrors,
|
||||||
// hasMinError,
|
// hasMinError,
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user