From fa268d8d5d25e3945a86d9e3c3c59747b8f2bd24 Mon Sep 17 00:00:00 2001 From: soupette Date: Wed, 10 Feb 2021 20:11:53 +0100 Subject: [PATCH] Fix tabs Signed-off-by: soupette --- .../admin/src/components/Roles/Tabs/index.js | 3 +- .../CollapsePropertyMatrix/ActionRow/index.js | 1 + .../RecursiveMatrix/Curve.js | 35 ++++++ .../RecursiveMatrix/Wrapper.js | 8 ++ .../RecursiveMatrix/index.js | 117 ++++++++++++++++++ .../RecursiveMatrix/row.js | 47 +++++++ .../RecursiveMatrix/timeline.js | 15 +++ .../Roles/CreatePage/temp/fakeData.js | 4 +- 8 files changed, 227 insertions(+), 3 deletions(-) create mode 100644 packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/RecursiveMatrix/Curve.js create mode 100644 packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/RecursiveMatrix/Wrapper.js create mode 100644 packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/RecursiveMatrix/index.js create mode 100644 packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/RecursiveMatrix/row.js create mode 100644 packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/RecursiveMatrix/timeline.js diff --git a/packages/strapi-admin/admin/src/components/Roles/Tabs/index.js b/packages/strapi-admin/admin/src/components/Roles/Tabs/index.js index 2d3bd045c9..fb465d1d5e 100644 --- a/packages/strapi-admin/admin/src/components/Roles/Tabs/index.js +++ b/packages/strapi-admin/admin/src/components/Roles/Tabs/index.js @@ -10,6 +10,7 @@ import Tab from './Tab'; const Tabs = ({ children, isLoading, tabsLabel }) => { const { formatMessage } = useIntl(); const [selectedTabIndex, setSelectedTabIndex] = useState(0); + const selectedChild = React.Children.toArray(children)[selectedTabIndex]; const handleSelectedTab = index => { if (index !== selectedTabIndex) { @@ -38,7 +39,7 @@ const Tabs = ({ children, isLoading, tabsLabel }) => { ))} - {children[selectedTabIndex]} + {selectedChild} )} diff --git a/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/index.js b/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/index.js index 1bf347f2d0..2cc73ae7fe 100644 --- a/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/index.js +++ b/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/index.js @@ -21,6 +21,7 @@ const ActionRow = ({ name, value, required, propertyActions }) => { return value; }, [value]); + const isCollapsable = recursiveValues.length > 0; const handleClick = useCallback(() => { diff --git a/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/RecursiveMatrix/Curve.js b/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/RecursiveMatrix/Curve.js new file mode 100644 index 0000000000..8e4ff56865 --- /dev/null +++ b/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/RecursiveMatrix/Curve.js @@ -0,0 +1,35 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const Curve = props => ( + + + + + +); + +Curve.defaultProps = { + fill: '#f3f4f4', +}; +Curve.propTypes = { + fill: PropTypes.string, +}; + +export default Curve; diff --git a/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/RecursiveMatrix/Wrapper.js b/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/RecursiveMatrix/Wrapper.js new file mode 100644 index 0000000000..01d29fa59b --- /dev/null +++ b/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/RecursiveMatrix/Wrapper.js @@ -0,0 +1,8 @@ +/* eslint-disable indent */ +import styled from 'styled-components'; + +const Wrapper = styled.div` + padding-left: 15px; +`; + +export default Wrapper; diff --git a/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/RecursiveMatrix/index.js b/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/RecursiveMatrix/index.js new file mode 100644 index 0000000000..361e8e8556 --- /dev/null +++ b/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/RecursiveMatrix/index.js @@ -0,0 +1,117 @@ +import React, { memo, useCallback, useMemo, useState } from 'react'; +import PropTypes from 'prop-types'; +import { Flex, Text } from '@buffetjs/core'; +import styled from 'styled-components'; +import CheckboxWithCondition from '../../../CheckboxWithCondition'; +import Chevron from '../../../Chevron'; +import CollapseLabel from '../../../CollapseLabel'; +import HiddenAction from '../../../HiddenAction'; +import RequiredSign from '../../../RequiredSign'; +import Curve from './Curve'; +import { RowStyle, RowWrapper } from './row'; +import { LeftBorderTimeline, TopTimeline } from './timeline'; +import Wrapper from './Wrapper'; + +const SubLevelWrapper = styled.div` + padding-bottom: 8px; +`; + +const SubActionRow = ({ recursiveLevel, values, propertyActions }) => { + console.log({ propertyActions }); + const [rowToOpen, setRowToOpen] = useState(null); + const handleClickToggleSubLevel = useCallback(name => { + setRowToOpen(prev => { + if (prev === name) { + return null; + } + + return name; + }); + }, []); + + const displayedRecursiveValue = useMemo(() => { + if (!rowToOpen) { + return null; + } + + return values.find(({ value }) => value === rowToOpen); + }, [rowToOpen, values]); + + return ( + + + {values.map((value, index) => { + const isVisible = index + 1 < values.length; + const isArrayType = Array.isArray(value.value); + const isSmall = isArrayType || index + 1 === values.length; + const isActive = rowToOpen === value.value; + + return ( + + + + + + { + if (isArrayType) { + handleClickToggleSubLevel(value.value); + } + }} + title={value.key} + > + + {value.key} + + {value.required && *} + + + + + {propertyActions.map(action => { + if (!action.isActionRelatedToCurrentProperty) { + return ; + } + + return ; + })} + + + + {displayedRecursiveValue && isActive && ( + + + + )} + + ); + })} + + ); +}; + +SubActionRow.defaultProps = { + recursiveLevel: 0, +}; + +SubActionRow.propTypes = { + propertyActions: PropTypes.array.isRequired, + recursiveLevel: PropTypes.number, + values: PropTypes.array.isRequired, +}; + +export default memo(SubActionRow); diff --git a/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/RecursiveMatrix/row.js b/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/RecursiveMatrix/row.js new file mode 100644 index 0000000000..5359e80e29 --- /dev/null +++ b/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/RecursiveMatrix/row.js @@ -0,0 +1,47 @@ +import styled from 'styled-components'; +import { Flex, Text } from '@buffetjs/core'; +import PropTypes from 'prop-types'; +import Chevron from '../../../Chevron'; + +const activeStyle = theme => ` + color: ${theme.main.colors.mediumBlue}; + ${Text} { + color: ${theme.main.colors.mediumBlue}; + } + ${Chevron} { + display: block; + color: ${theme.main.colors.mediumBlue}; + } +`; + +const RowStyle = styled.div` + padding-left: ${({ theme }) => theme.main.sizes.paddings.xs}; + width: ${({ level }) => 128 - level * 18}px; + ${Chevron} { + width: 13px; + } + ${({ isCollapsable, theme }) => + isCollapsable && + ` + ${Chevron} { + display: block; + color: ${theme.main.colors.grey}; + } + &:hover { + ${activeStyle(theme)} + } + `} + ${({ isActive, theme }) => isActive && activeStyle(theme)}} +`; + +RowStyle.propTypes = { + isActive: PropTypes.bool.isRequired, + isCollapsable: PropTypes.bool.isRequired, + level: PropTypes.number.isRequired, +}; + +const RowWrapper = styled(Flex)` + height: ${({ isSmall }) => (isSmall ? '28px' : '36px')}; +`; + +export { RowStyle, RowWrapper }; diff --git a/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/RecursiveMatrix/timeline.js b/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/RecursiveMatrix/timeline.js new file mode 100644 index 0000000000..42aa5a1f39 --- /dev/null +++ b/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/RecursiveMatrix/timeline.js @@ -0,0 +1,15 @@ +import styled from 'styled-components'; + +const LeftBorderTimeline = styled.div` + border-left: ${({ isVisible }) => (isVisible ? '3px solid #a5d5ff' : '3px solid transparent')}; +`; + +const TopTimeline = styled.div` + padding-top: 8px; + width: 3px; + background-color: #a5d5ff; + border-top-left-radius: 2px; + border-top-right-radius: 2px; +`; + +export { LeftBorderTimeline, TopTimeline }; diff --git a/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/temp/fakeData.js b/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/temp/fakeData.js index 0ca5182d6a..3e4ce172c8 100644 --- a/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/temp/fakeData.js +++ b/packages/strapi-admin/ee/admin/containers/Roles/CreatePage/temp/fakeData.js @@ -372,11 +372,11 @@ const data = { { key: 'French', value: 'fr', - required: true, }, { key: 'English', - value: 'en', + required: true, + value: [{ key: 'EN', value: 'en' }], }, ], },