diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/ConditionsComponent.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/ConditionsComponent.tsx new file mode 100644 index 000000000..7d90133d8 --- /dev/null +++ b/packages/uiweb/src/lib/components/chat/CreateGroup/ConditionsComponent.tsx @@ -0,0 +1,255 @@ +import React, { useContext, useRef, useState } from 'react'; +import { Section, Span } from '../../reusables'; +import { MoreDarkIcon } from '../../../icons/MoreDark'; +import { ThemeContext } from '../theme/ThemeProvider'; +import styled from 'styled-components'; +import { device } from '../../../config'; +import Dropdown, { DropdownValueType } from '../reusables/DropDown'; +import EditSvg from '../../../icons/EditSvg.svg'; +import RemoveSvg from '../../../icons/RemoveSvg.svg'; +import { ConditionArray, ConditionData, IChatTheme } from '../exportedTypes'; +import { useClickAway } from '../../../hooks'; + +export type CriteraValueType = { + invertedIcon?: any; + id: number; + type?: string; + title?: string; + icon?: string; + function: () => void; +}; + +interface CriteriaProps { + conditionData: ConditionArray[]; +} + +interface MoreOptionsContainerProps { + handleMoreOptionsClick: (row: number, col: number) => void; + setSelectedIndex: any; + selectedIndex: Array | null; + row: number; + col: number; + dropDownValues: DropdownValueType[]; +} + +// fix dropdown position mobile view and z index +const MoreOptionsContainer = ({ + handleMoreOptionsClick, + setSelectedIndex, + selectedIndex, + row, + col, + dropDownValues, +}: MoreOptionsContainerProps) => { + const theme = useContext(ThemeContext); + const dropdownRef = useRef(null); + + useClickAway(dropdownRef, () => setSelectedIndex(null)); + + return ( +
handleMoreOptionsClick(row, col)}> + + {selectedIndex?.length && selectedIndex[0] === row && ( + + + + )} +
+ ); +}; +const CriteriaSection = ({ criteria }: { criteria: ConditionData }) => { + const theme = useContext(ThemeContext); + + return ( +
+ + {criteria.category} + + + {criteria.type}{' '} + or more + +
+ ); +}; +// fix dropdown ui +const ConditionsComponent = ({ conditionData }: CriteriaProps) => { + const [selectedIndex, setSelectedIndex] = useState | null>( + null + ); + + const dropdownRef = useRef(null); + + const dropDownValues: DropdownValueType[] = [ + { + id: 0, + value: 'Edit', + title: 'Edit', + icon: EditSvg, + function: () => { + console.log('function to edit'); + }, + }, + { + id: 1, + value: 'Remove', + title: 'Remove', + icon: RemoveSvg, + function: () => { + console.log('function to remove'); + }, + }, + ]; + const theme = useContext(ThemeContext); + + useClickAway(dropdownRef, () => setSelectedIndex(null)); + + + //fix the theming + + const handleMoreOptionsClick = (row: number, col: number) => { + setSelectedIndex([row, col]); + }; +console.log(conditionData) + return ( +
+ {/* we can reuse the code by creating a reusable component for it */} + {conditionData && + conditionData.slice(1).map((criteria, row) => ( +
+ {criteria.length === 1 && + criteria.map((singleCriteria, col) => ( + <> + {singleCriteria.type && ( +
+ + +
+ )} + + ))} + + {criteria.length > 1 && ( +
+
+ {criteria.map((singleCriteria, col) => ( + <> + {singleCriteria.type && ( + <> +
+ +
+ + )} + + ))} +
+
+ {criteria.map((singleCriteria) => ( + <> + {singleCriteria.operator && !singleCriteria.type && ( + + {singleCriteria.operator} + + )} + + ))} + +
+
+ )} + {conditionData && + row < conditionData.length - 2 && + conditionData[0][0]?.operator && ( + // this can be reused + + {conditionData[0][0].operator} + + )} +
+ ))} +
+ ); +}; + +export default ConditionsComponent; + +const DropdownContainer = styled.div` + position: absolute; + left: 48%; + top: 69%; + border-radius: ${(props) => props.theme.borderRadius.modalInnerComponents}; + padding: 14px 8px; + z-index: 999999999999 !important; + display: flex; + flex-direction: column !important; + background: ${(props) => props.theme.backgroundColor.modalBackground}; + border: ${(props) => props.theme.border.modalInnerComponents}; + + @media ${device.mobileL} { + left: 27%; + } + @media (min-width: 426px) and (max-width: 1150px) { + left: 48%; + } + @media (max-width: 480px) { + left: 25%; + } +`; + +const OperatorSpan = styled.span<{ theme: IChatTheme }>` + padding: 4px 8px; + border-radius: ${(props) => props.theme.borderRadius.modalInnerComponents}; + background: ${(props) => props.theme.backgroundColor.modalHoverBackground}; + color: ${(props) => props.theme.textColor?.modalSubHeadingText}; +`; diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupType.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupType.tsx index 63ab1a009..5850954cc 100644 --- a/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupType.tsx +++ b/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupType.tsx @@ -10,26 +10,14 @@ import { Button } from '../reusables'; import { GatingRulesInformation, ModalHeaderProps } from './CreateGroupModal'; import { GroupTypeState } from './CreateGroupModal'; -import { SpamIcon } from '../../../icons/SpamIcon'; import { ThemeContext } from '../theme/ThemeProvider'; import useMediaQuery from '../../../hooks/useMediaQuery'; import { device } from '../../../config'; -import { AddButtons } from './AddButtons'; -import Criteria from './Criteria'; -import MultipleCriterias from './MultipleCriterias'; import useToast from '../reusables/NewToast'; import { OPERATOR_OPTIONS, OPERATOR_OPTIONS_INFO } from '../constants'; - -const GATING_TYPE_OTPIONS: Array = [ - { - heading: 'All', - value: 'All', - }, - { - heading: 'Any', - value: 'Any', - }, -]; +import { ConditionArray } from '../exportedTypes'; +import ConditionsComponent from './ConditionsComponent'; +import { OperatorContainer } from './OperatorContainer'; const GROUP_TYPE_OPTIONS: Array = [ { @@ -65,36 +53,24 @@ const AddConditionSection = ({ subHeading, handleNext, }: AddConditionProps) => { - const theme = useContext(ThemeContext); - const [criteriaOperator, setCriteriaOperator] = useState('any'); + //todo - dummy data to be removed after we get condition data - /** todo - dummy data to be removed after we get condition data - * and check for the chat and entry conditions - */ - interface ConditionData { - operator?: string; - type?: string; - category?: string; - subcategory?: string; - data?: Record; - } - - type ConditionArray = [ConditionData] | ConditionData[]; - const dummyConditonsData: ConditionArray[] = [ [{ operator: 'any' }], - [{ - type: 'PUSH', - category: 'ERC20', - subcategory: 'holder', - data: { - contract: 'eip155:1:0xf418588522d5dd018b425E472991E52EBBeEEEEE', - amount: 1, - decimals: 18, + [ + { + type: 'PUSH', + category: 'ERC20', + subcategory: 'holder', + data: { + contract: 'eip155:1:0xf418588522d5dd018b425E472991E52EBBeEEEEE', + amount: 1, + decimals: 18, + }, }, - }], + ], [ - { operator: 'all' } , + { operator: 'all' }, { type: 'PUSH', category: 'ERC20', @@ -147,35 +123,14 @@ const AddConditionSection = ({ ], ]; - const dummySingleCondtionData = dummyConditonsData[2]; + const theme = useContext(ThemeContext); + const [conditionOperator, setConditionOperator] = useState(dummyConditonsData[0][0]?.operator as string); + + + - const criteriaOptions = [ - { - id: 0, - type: 'Token', - value: '1.0 ETH', - title: 'Token', - function: () => console.log('Token'), - }, - ]; - const multiplecriteriaOptions = [ - { - id: 0, - type: 'Token', - value: '1.0 ETH', - title: 'Token', - function: () => console.log('Token'), - }, - { - id: 1, - type: 'Token', - value: '1.0 ETH', - title: 'Token', - function: () => console.log('NFT'), - }, - ]; return (
@@ -195,33 +150,14 @@ const AddConditionSection = ({
- {/* todo - check later if this etire section can be optimised for define condtion page too */} -
- { - setCriteriaOperator(newEl); - }} +
+ - - { - OPERATOR_OPTIONS_INFO[ - criteriaOperator as keyof typeof OPERATOR_OPTIONS_INFO - ].head - } - - {' '} - { - OPERATOR_OPTIONS_INFO[ - criteriaOperator as keyof typeof OPERATOR_OPTIONS_INFO - ].tail - } - - - -
+ +