tabexseriescomponents 0.0.64 → 0.0.66

package/src1-10/TabexComponents/StaticPages/Categoriesdropdown/Categoriesdropdown.jsx

@@ -0,0 +1,216 @@
+import React, { useEffect, useState } from 'react';
+import generalstyles from '../../../styles/general/general.module.css';
+import { BsChevronLeft, BsChevronRight } from 'react-icons/bs';
+import { css } from 'glamor';
+import { Accordion, AccordionItem, AccordionItemHeading, AccordionItemButton, AccordionItemPanel, AccordionItemState } from 'react-accessible-accordion';
+import '../../../styles/staticpages/accordion.module.css';
+import { MdOutlineKeyboardArrowDown, MdOutlineKeyboardArrowUp } from 'react-icons/md';
+const Categoriesdropdown = (props) => {
+    const [sectionproperties, setsectionproperties] = useState('');
+    const lang = props.actions.lang;
+    const langdetect = props.actions.langdetect;
+    const authdetailsContext = props.actions.authdetailsContext;
+    const routingcountext = props.actions.routingcountext;
+    const StaticPagesLinksContext = props.actions.StaticPagesLinksContext;
+    const actions = props.actions;
+    const history = props.actions.history;
+    useEffect(() => {
+        setsectionproperties(props.sectionpropertiesprops);
+    }, [props.sectionpropertiesprops]);
+    const sectionstyles = {
+        collectionbtn: css({
+            color: sectionproperties.collectionsectiontextcolor,
+            fontSize: sectionproperties.collectionsectiontextfontsize + 'px',
+            fontWeight: sectionproperties.collectionsectiontextfontweight,
+            textTransform: sectionproperties.collectionsectiontexttransform,
+            transition: '.3s',
+            ':hover': {
+                color: sectionproperties.collectionsectiontextcoloronhover,
+            },
+        }),
+    };
+    // const Dropdowncontainer = () => {
+    //     return (
+    //         <div className="col-lg-12 p-0">
+    //             <div className={generalstyles.sub_scrollbar + ' row m-0 w-100 '} style={{ height: sectionproperties.image_height - 9 + 'vh', overflowY: 'scroll' }}>
+    //                 <div className="col-lg-12 p-0">
+    //                     {authdetailsContext.instinfo.instcollections.map((item, index) => (
+    //                         <div className="row m-0 w-100">
+    //                             <div
+    //                                 className="col-lg-12 cursor-pointer"
+    //                                 onClick={() => {
+    //                                     routingcountext(StaticPagesLinksContext.GeneralProductsComponent);
+    //                                 }}
+    //                             >
+    //                                 <div className={sectionstyles.collectionbtn + ' row m-0 w-100 '}>
+    //                                     <div className={' col-lg-10 col-md-10 col-sm-10 p-0 d-flex justify-content-start align-items-center '}>
+    //                                         <p className={' dropdownitem text-overflow m-0 p-0 '}>{langdetect == 'en' ? item.title_en : item.title_ar}</p>
+    //                                     </div>
+    //                                     <div className={'col-lg-2 col-md-2 col-sm-2 d-flex justify-content-end align-items-center p-0 '}>
+    //                                         <i className={' p-0  h-100 allcentered '}>
+    //                                             {langdetect == 'en' ? (
+    //                                                 <BsChevronRight size={sectionproperties.collectionsectioniconfontsize} />
+    //                                             ) : (
+    //                                                 <BsChevronLeft size={sectionproperties.collectionsectioniconfontsize} />
+    //                                             )}
+    //                                         </i>
+    //                                     </div>
+    //                                 </div>
+    //                             </div>
+    //                             {index != authdetailsContext?.instinfo?.instcollections?.length - 1 && (
+    //                                 <div className="col-lg-12">
+    //                                     <hr />
+    //                                 </div>
+    //                             )}
+    //                         </div>
+    //                     ))}
+    //                 </div>
+    //             </div>
+    //         </div>
+    //     );
+    // };
+    return (
+        <div className={' row m-0 w-100 '} style={{ background: sectionproperties.collectionssectionbgcolor, boxShadow: '0 0 10px ' + sectionproperties.collectionssectionshadowcolor }}>
+            <div className="col-lg-12 p-3 mb-3 d-flex d-md-none" style={{ backgroundColor: sectionproperties.collectionssectiontitlebgcolor }}>
+                <p
+                    className="m-0 p-0 text-center"
+                    style={{
+                        color: sectionproperties.collectionssectiontitlecolor,
+                        fontSize: sectionproperties.collectionssectiontitlefontsize + 'px',
+                        fontWeight: sectionproperties.collectionssectiontitlefonteweight,
+                        textTransform: sectionproperties.collectionssectiontitletexttransfrom,
+                    }}
+                >
+                    {langdetect == 'en' ? sectionproperties.collectionssectiontitleen : sectionproperties.collectionssectiontitlear}
+                </p>
+            </div>
+            <div className="row m-0 w-100 d-flex d-md-none">
+                <div className="col-lg-12 p-0">
+                    <div className={generalstyles.sub_scrollbar + ' row m-0 w-100 '} style={{ height: sectionproperties.image_height - 9 + 'vh', overflowY: 'scroll' }}>
+                        <div className="col-lg-12 p-0">
+                            {authdetailsContext?.instinfo?.instcollections.map((item, index) => (
+                                <div className="row m-0 w-100">
+                                    <div
+                                        className="col-lg-12 cursor-pointer"
+                                        onClick={() => {
+                                            routingcountext(StaticPagesLinksContext.GeneralProductsComponent);
+                                        }}
+                                    >
+                                        <div className={sectionstyles.collectionbtn + ' row m-0 w-100 '}>
+                                            <div className={' col-lg-10 col-md-10 col-sm-10 p-0 d-flex justify-content-start align-items-center '}>
+                                                <p className={' dropdownitem text-overflow m-0 p-0 '}>{langdetect == 'en' ? item.title_en : item.title_ar}</p>
+                                            </div>
+                                            <div className={'col-lg-2 col-md-2 col-sm-2 d-flex justify-content-end align-items-center p-0 '}>
+                                                <i className={' p-0  h-100 allcentered '}>
+                                                    {langdetect == 'en' ? (
+                                                        <BsChevronRight size={sectionproperties.collectionsectioniconfontsize} />
+                                                    ) : (
+                                                        <BsChevronLeft size={sectionproperties.collectionsectioniconfontsize} />
+                                                    )}
+                                                </i>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    {index != authdetailsContext?.instinfo?.instcollections?.length - 1 && (
+                                        <div className="col-lg-12">
+                                            <hr />
+                                        </div>
+                                    )}
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div className="row m-0 w-100 d-none d-md-flex">
+                <Accordion allowMultipleExpanded={true} allowZeroExpanded={true} className="w-100" preExpanded={[1]}>
+                    <AccordionItem uuid={1}>
+                        <AccordionItemHeading>
+                            <AccordionItemButton>
+                                <div className="col-lg-12 p-3 d-flex allcentered" style={{ backgroundColor: sectionproperties.collectionssectiontitlebgcolor }}>
+                                    <p
+                                        className="m-0 p-0 text-center"
+                                        style={{
+                                            color: sectionproperties.collectionssectiontitlecolor,
+                                            fontSize: sectionproperties.collectionssectiontitlefontsize + 'px',
+                                            fontWeight: sectionproperties.collectionssectiontitlefonteweight,
+                                            textTransform: sectionproperties.collectionssectiontitletexttransfrom,
+                                        }}
+                                    >
+                                        {langdetect == 'en' ? sectionproperties.collectionssectiontitleen : sectionproperties.collectionssectiontitlear}
+                                    </p>
+                                    <AccordionItemState>
+                                        {(state) => {
+                                            if (state.expanded) {
+                                                return (
+                                                    <MdOutlineKeyboardArrowDown
+                                                        style={{
+                                                            color: sectionproperties.collectionssectiontitlecolor,
+                                                        }}
+                                                        size={20}
+                                                        className="ml-2 mr-2"
+                                                    />
+                                                );
+                                            } else {
+                                                return (
+                                                    <MdOutlineKeyboardArrowUp
+                                                        style={{
+                                                            color: sectionproperties.collectionssectiontitlecolor,
+                                                        }}
+                                                        size={20}
+                                                        className="ml-2 mr-2"
+                                                    />
+                                                );
+                                            }
+                                        }}
+                                    </AccordionItemState>
+                                </div>
+                            </AccordionItemButton>
+                        </AccordionItemHeading>
+                        <AccordionItemPanel>
+                            <div className="row m-0 pt-3 w-100 d-none d-md-flex">
+                                <div className="col-lg-12 p-0">
+                                    <div className={generalstyles.sub_scrollbar + ' row m-0 w-100 '} style={{ height: sectionproperties.image_height - 9 + 'vh', overflowY: 'scroll' }}>
+                                        <div className="col-lg-12 p-0">
+                                            {authdetailsContext?.instinfo?.instcollections.map((item, index) => (
+                                                <div className="row m-0 w-100">
+                                                    <div
+                                                        className="col-lg-12 cursor-pointer"
+                                                        onClick={() => {
+                                                            routingcountext(StaticPagesLinksContext.GeneralProductsComponent);
+                                                        }}
+                                                    >
+                                                        <div className={sectionstyles.collectionbtn + ' row m-0 w-100 '}>
+                                                            <div className={' col-lg-10 col-md-10 col-sm-10 p-0 d-flex justify-content-start align-items-center '}>
+                                                                <p className={' dropdownitem text-overflow m-0 p-0 '}>{langdetect == 'en' ? item.title_en : item.title_ar}</p>
+                                                            </div>
+                                                            <div className={'col-lg-2 col-md-2 col-sm-2 d-flex justify-content-end align-items-center p-0 '}>
+                                                                <i className={' p-0  h-100 allcentered '}>
+                                                                    {langdetect == 'en' ? (
+                                                                        <BsChevronRight size={sectionproperties.collectionsectioniconfontsize} />
+                                                                    ) : (
+                                                                        <BsChevronLeft size={sectionproperties.collectionsectioniconfontsize} />
+                                                                    )}
+                                                                </i>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    {index != authdetailsContext?.instinfo?.instcollections?.length - 1 && (
+                                                        <div className="col-lg-12">
+                                                            <hr />
+                                                        </div>
+                                                    )}
+                                                </div>
+                                            ))}
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </AccordionItemPanel>
+                    </AccordionItem>
+                </Accordion>
+            </div>
+        </div>
+    );
+};
+export default Categoriesdropdown;