imio.smartweb.core 1.2.38__py3-none-any.whl → 1.2.39__py3-none-any.whl

imio/smartweb/core/webcomponents/src/components/Filters/DateFilter.jsx

@@ -1,12 +1,12 @@
 
 
-import React, { useState,useContext } from "react";
+import React, { useState, useContext } from "react";
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import moment from "moment";
 import { Dropdown, DropdownButton } from 'react-bootstrap';
 import { Translate, Translator } from "react-translated";
-import { nl,fr,enGB,de } from 'date-fns/locale';
+import { nl, fr, enGB, de } from 'date-fns/locale';
 import './DateFilter.scss';
 
 const languageList = {
@@ -28,9 +28,9 @@ function DateFilter({ language, setDates }) {
         const filteredDates = dates.filter(date => date !== null);
         const formattedDates = filteredDates.map(date => moment(date).format('YYYY-MM-DD'));
         setDates({ "event_dates.query": formattedDates });
-        if(e.every(item => item === null)){
+        if (e.every(item => item === null)) {
             setFilter(periodTitle.all);
-        }else {
+        } else {
             setFilter(periodTitle.custom);
         }
     };
@@ -43,7 +43,7 @@ function DateFilter({ language, setDates }) {
         thisWeekEnd: <Translate text='Ce week-end' />,
         thisWeek: <Translate text='Cette semaine' />,
         thisMonth: <Translate text='Ce mois-ci' />,
-        custom: <Translate text='Personnalisé (Du ... au ...)'/>
+        custom: <Translate text='Personnalisé (Du ... au ...)' />
     }
 
     const handleSelect = (eventKey) => {
@@ -97,27 +97,27 @@ function DateFilter({ language, setDates }) {
                     <Dropdown.Item eventKey="thisWeek">{periodTitle.thisWeek}</Dropdown.Item>
                     <Dropdown.Item eventKey="thisMonth">{periodTitle.thisMonth}</Dropdown.Item>
                     <div className="perdiod-filter-range">
-                       {languageToLocale && <Translator>
-                        {({ translate,language }) => (
-                            <DatePicker
-                                dateFormat="dd/MM/yyyy"
-                                placeholderText={translate({
-                                    text: 'Personnalisé (Du ... au ...)'
-                                })}
-                                selectsRange={true}
-                                startDate={startDate}
-                                endDate={endDate}
-                                minDate={new Date().setDate(new Date().getDate() + 1)}
-                                onChange={(update) => {
-                                    setDateRange(update);
-                                    if (update[0] !== null && update[1] !== null || update[0] == null && update[1] == null) {
-                                        handleApply(update)
-                                    }
-                                }}
-                                isClearable={true}
-                                locale={languageToLocale}
-                            />
-                        )}
+                        {languageToLocale && <Translator>
+                            {({ translate, language }) => (
+                                <DatePicker
+                                    dateFormat="dd/MM/yyyy"
+                                    placeholderText={translate({
+                                        text: 'Personnalisé (Du ... au ...)'
+                                    })}
+                                    selectsRange={true}
+                                    startDate={startDate}
+                                    endDate={endDate}
+                                    minDate={new Date().setDate(new Date().getDate() + 1)}
+                                    onChange={(update) => {
+                                        setDateRange(update);
+                                        if (update[0] !== null && update[1] !== null || update[0] == null && update[1] == null) {
+                                            handleApply(update)
+                                        }
+                                    }}
+                                    isClearable={true}
+                                    locale={languageToLocale}
+                                />
+                            )}
                         </Translator>}
                     </div>
                 </DropdownButton>
@@ -126,4 +126,4 @@ function DateFilter({ language, setDates }) {
     );
 }
 
-export default DateFilter;
+export default DateFilter;

imio/smartweb/core/webcomponents/src/components/Filters/DateFilter.scss

@@ -1,6 +1,6 @@
 .period-filter {
     .period-filter-toggler {
-        & > button {
+        &>button {
             background: transparent;
             color: hsl(0, 0%, 20%);
             box-sizing: border-box;
@@ -8,7 +8,7 @@
             font-size: 12px;
             text-transform: uppercase;
             letter-spacing: 1.2px;
-    
+
             -webkit-box-pack: justify;
             -webkit-justify-content: space-between;
             justify-content: space-between;
@@ -24,17 +24,19 @@
             border-width: 1px;
             box-sizing: border-box;
             height: 50px;
+
             &:hover {
                 background-color: transparent;
                 border-color: hsl(0, 0%, 70%);
                 color: hsl(0, 0%, 20%);
             }
+
             &:focus,
             &:active {
-                border-color: #2684FF!important;
-                background: transparent!important;
-                color: hsl(0, 0%, 20%)!important;
-                box-shadow: 0 0 0 1px #2684FF!important;
+                border-color: #2684FF !important;
+                background: transparent !important;
+                color: hsl(0, 0%, 20%) !important;
+                box-shadow: 0 0 0 1px #2684FF !important;
             }
         }
     }
@@ -43,11 +45,12 @@
 
 .perdiod-filter-range {
     padding: 5px 16px;
+
     input {
         border: solid 1px hsl(0, 0%, 42%) !important;
         border-radius: 5px;
         padding: 5px 9px;
         color: hsl(0, 0%, 20%);
-        border: solid 1px hsl(0, 0%, 70%)!important;
+        border: solid 1px hsl(0, 0%, 70%) !important;
     }
 }

imio/smartweb/core/webcomponents/src/components/News/Filters/Filter.jsx

@@ -1,13 +1,12 @@
 import React, { useEffect, useCallback, useRef, useState } from "react";
 import Select from "react-select";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import useAxios from "../../../hooks/useAxios";
 import { Translator } from "react-translated";
+import queryString from 'query-string';
 
 function Filters(props) {
-    let history = useHistory();
-    const queryString = require("query-string");
-
+    let navigate = useNavigate();
     const [inputValues, setInputValues] = useState(props.activeFilter);
     const [topicsFilter, setTopicsFilter] = useState(null);
     const [taxonomyFilter, setTaxonomyFilter] = useState(null);
@@ -29,9 +28,9 @@ function Filters(props) {
             }));
             const optionsTaxonomy = response.category
                 ? response.category.map((d) => ({
-                      value: d.token,
-                      label: d.title,
-                  }))
+                    value: d.token,
+                    label: d.title,
+                }))
                 : "";
             setTopicsFilter(optionsTopics);
             setTaxonomyFilter(optionsTaxonomy);
@@ -69,7 +68,7 @@ function Filters(props) {
             firstUpdate.current = false;
             return;
         }
-        history.push({
+        navigate({
             pathname: "./",
             search: queryString.stringify(inputValues),
         });
@@ -124,7 +123,7 @@ function Filters(props) {
                                 onChange={onChangeHandler}
                                 placeholder={translate({
                                     text: 'Recherche'
-                                  })}
+                                })}
                             />
                         )}
                     </Translator>
@@ -144,7 +143,7 @@ function Filters(props) {
                             options={topicsFilter && topicsFilter}
                             placeholder={translate({
                                 text: 'Thématiques'
-                              })}
+                            })}
                             value={actTopi && actTopi[0]}
                         />
                     )}
@@ -163,7 +162,7 @@ function Filters(props) {
                             options={taxonomyFilter && taxonomyFilter}
                             placeholder={translate({
                                 text: 'Catégories'
-                              })}
+                            })}
                             value={actTaxo && actTaxo[0]}
                         />
                     )}
@@ -173,4 +172,4 @@ function Filters(props) {
     );
 }
 
-export default Filters;
+export default Filters;

imio/smartweb/core/webcomponents/src/components/News/News.jsx

@@ -1,5 +1,9 @@
 import React, { useEffect, useState, createContext, useContex } from "react";
-import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import {
+    BrowserRouter,
+    Routes,
+    Route,
+} from "react-router-dom";
 import Filters from "./Filters/Filter";
 import NewsContent from "./NewsContent/NewsContent";
 import NewsList from "./NewsList/NewsList";
@@ -8,12 +12,13 @@ import "./News.scss";
 import useFilterQuery from "../../hooks/useFilterQuery";
 import { Provider, Translate } from "react-translated";
 import translation from '../../utils/translation';
+import queryString from 'query-string';
 
 export const LanguageContext = createContext("fr");
 export default function News(props) {
     return (
         <LanguageContext.Provider value={props.currentLanguage}>
-            <Router basename={props.viewPath}>
+            <BrowserRouter basename={props.viewPath}>
                 <Provider language={props.currentLanguage} translation={translation}>
                     <NewsView
                         queryFilterUrl={props.queryFilterUrl}
@@ -22,12 +27,11 @@ export default function News(props) {
                         batchSize={props.batchSize}
                     />
                 </Provider>
-            </Router>
+            </BrowserRouter>
         </LanguageContext.Provider>
     );
 }
 const NewsView = (props) => {
-    const queryString = require("query-string");
     const { u, ...parsed } = Object.assign(
         { b_start: 0, fullobjects: 1 },
         queryString.parse(useFilterQuery().toString())
@@ -104,58 +108,62 @@ const NewsView = (props) => {
         <div>
             <div className="r-wrapper r-actu-wrapper">
                 <div className="r-result r-annuaire-result">
-                    <Switch>
-                        <Route exact path="/">
-                            <div className="r-result-filter actu-result-filter">
-                                <Filters
-                                    url={props.queryFilterUrl}
-                                    activeFilter={filters}
-                                    onChange={filtersChange}
-                                />
-                                {props.proposeUrl &&
-                                    (
-                                        <div className="r-add-news">
-                                            <a target="_blank" href={props.proposeUrl}><Translate text='Proposer une actualité' /></a>
+                    <Routes>
+                        <Route exact path="/" element={
+                            <>
+                                <div className="r-result-filter actu-result-filter">
+                                    <Filters
+                                        url={props.queryFilterUrl}
+                                        activeFilter={filters}
+                                        onChange={filtersChange}
+                                    />
+                                    {props.proposeUrl &&
+                                        (
+                                            <div className="r-add-news">
+                                                <a target="_blank" href={props.proposeUrl}><Translate text='Proposer une actualité' /></a>
+                                            </div>
+                                        )
+                                    }
+                                    {itemsNumber > 0 ? (
+                                        <p className="r-results-numbers">
+                                            <span>{itemsNumber}</span>{" "}
+                                            {itemsNumber > 1
+                                                ? <Translate text='Actualités trouvées' />
+                                                : <Translate text='Actualité trouvée' />}
+                                        </p>
+                                    ) : (
+                                        <p className="r-results-numbers"><Translate text='Aucun résultat' /></p>
+                                    )}
+                                </div>
+                                <div>{listRender}</div>
+                                <div className="r-load-more">
+                                    {itemsNumber - props.batchSize > batchStart ? (
+                                        <div>
+                                            <span className="no-more-result">
+                                                {isLoading ? divLoader : ""}
+                                            </span>
+                                            <button onClick={loadMore} className="btn-grad">
+                                                {isLoading ? <Translate text='Chargement...' /> : <Translate text='Plus de résultats' />}
+                                            </button>
                                         </div>
-                                    )
-                                }
-                                {itemsNumber > 0 ? (
-                                    <p className="r-results-numbers">
-                                        <span>{itemsNumber}</span>{" "}
-                                        {itemsNumber > 1
-                                            ? <Translate text='Actualités trouvées' />
-                                            : <Translate text='Actualité trouvée' />}
-                                    </p>
-                                ) : (
-                                    <p className="r-results-numbers"><Translate text='Aucun résultat' /></p>
-                                )}
-                            </div>
-                            <div>{listRender}</div>
-                            <div className="r-load-more">
-                                {itemsNumber - props.batchSize > batchStart ? (
-                                    <div>
+                                    ) : (
                                         <span className="no-more-result">
                                             {isLoading ? divLoader : ""}
                                         </span>
-                                        <button onClick={loadMore} className="btn-grad">
-                                            {isLoading ? <Translate text='Chargement...' /> : <Translate text='Plus de résultats' />}
-                                        </button>
-                                    </div>
-                                ) : (
-                                    <span className="no-more-result">
-                                        {isLoading ? divLoader : ""}
-                                    </span>
-                                )}
-                            </div>
+                                    )}
+                                </div>
+                            </>
+                        }>
                         </Route>
-                        <Route path={"/:name"}>
+                        <Route path={"/:name"} element={
                             <NewsContent
                                 onChange={clickID}
                                 onReturn={filtersChange}
                                 queryUrl={props.queryUrl}
                             />
+                        }>
                         </Route>
-                    </Switch>
+                    </Routes>
                 </div>
             </div>
         </div>

imio/smartweb/core/webcomponents/src/components/News/NewsContent/NewsContent.jsx

@@ -1,4 +1,4 @@
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import React, { useEffect, useState } from "react";
 import useAxios from "../../../hooks/useAxios";
 import useFilterQuery from "../../../hooks/useFilterQuery";
@@ -8,72 +8,73 @@ import ReactMarkdown from 'react-markdown'
 import Spotlight from "spotlight.js";
 import "../../../../node_modules/flexbin/flexbin.css";
 import { Translate } from "react-translated";
+import queryString from 'query-string';
+
 const ContactContent = ({ queryUrl, onChange }) => {
-    let history = useHistory();
-    const queryString = require("query-string");
-    const parsed = queryString.parse(useFilterQuery().toString());
-    const parsed2 = { ...parsed, UID: parsed["u"], fullobjects: 1 };
-    const [params, setParams] = useState(parsed2);
-    const [item, setitem] = useState({});
-    const [files, setFiles] = useState();
-    const [gallery, setGallery] = useState();
-    const { response, error, isLoading } = useAxios(
-        {
-            method: "get",
-            url: "",
-            baseURL: queryUrl,
-            headers: {
-                Accept: "application/json",
-            },
-            params: params,
-        },
-        []
-    );
-    useEffect(() => {
-        if (response !== null) {
-            setitem(response.items[0]);
-        }
-        window.scrollTo(0, 0);
-    }, [response]);
+	let navigate = useNavigate();
+	const parsed = queryString.parse(useFilterQuery().toString());
+	const parsed2 = { ...parsed, UID: parsed["u"], fullobjects: 1 };
+	const [params, setParams] = useState(parsed2);
+	const [item, setitem] = useState({});
+	const [files, setFiles] = useState();
+	const [gallery, setGallery] = useState();
+	const { response, error, isLoading } = useAxios(
+		{
+			method: "get",
+			url: "",
+			baseURL: queryUrl,
+			headers: {
+				Accept: "application/json",
+			},
+			params: params,
+		},
+		[]
+	);
+	useEffect(() => {
+		if (response !== null) {
+			setitem(response.items[0]);
+		}
+		window.scrollTo(0, 0);
+	}, [response]);
 
 	/// use to set file and gallery items
 	useEffect(() => {
-        if (item.items && item.items.length > 0) {
-            setFiles(item.items.filter(files => files['@type'] === 'File'));
-            setGallery(item.items.filter(files => files['@type'] === 'Image'));
-        }
-    }, [item]);
+		if (item.items && item.items.length > 0) {
+			setFiles(item.items.filter(files => files['@type'] === 'File'));
+			setGallery(item.items.filter(files => files['@type'] === 'Image'));
+		}
+	}, [item]);
 
-    function handleClick() {
-        history.push("./");
-        onChange(null);
-    }
+	function handleClick() {
+		navigate("..");
+		onChange(null);
+	}
 	moment.locale('fr')
-    const created = moment(item.created).startOf('minute').fromNow();
-    const lastModified = moment(item.modified).startOf('minute').fromNow();
-    return (
-        <div className="new-content r-content">
-            <button type="button" onClick={handleClick}>
+	const created = moment(item.created).startOf('minute').fromNow();
+	const lastModified = moment(item.modified).startOf('minute').fromNow();
+	return (
+		<div className="new-content r-content">
+			<button type="button" onClick={handleClick}>
 				<Translate text="Retour" />
-            </button>
-            <article>
-                <header>
-                    <h2 className="r-content-title">{item.title}</h2>
-                    <div className="r-content-description">
-					    <ReactMarkdown>{item.description}</ReactMarkdown>
-				    </div>
-                </header>
-                <figure>
-                    <div
-                        className="r-content-img"
-                        style={{
-                            backgroundImage: item.image_affiche_scale
-                                ? "url(" + item.image_affiche_scale + ")"
-                                : "",
-                        }}
-                    />
-                </figure>
-                <div className="r-content-news-info">
+			</button>
+			<article>
+				<header>
+					<h2 className="r-content-title">{item.title}</h2>
+					<div className="r-content-description">
+						<ReactMarkdown>{item.description}</ReactMarkdown>
+					</div>
+				</header>
+				<figure>
+					<div
+						className="r-content-img"
+						style={{
+							backgroundImage: item.image_affiche_scale
+								? "url(" + item.image_affiche_scale + ")"
+								: "",
+						}}
+					/>
+				</figure>
+				<div className="r-content-news-info">
 					<div className="r-content-news-info-container">
 						{/* date */}
 						<div className="r-content-news-info-schedul">
@@ -88,26 +89,26 @@ const ContactContent = ({ queryUrl, onChange }) => {
 							</div>
 							<div className="dpinlb">
 								<div className="r-content-news-info--date">
-                                <div className="r-content-date">
-								{
-									created === lastModified ?
-									(
-									<div className="r-content-date-publish">
-										<span>Publié {created}</span>
-									</div>
-									):
-									(
-									<div>
-										<div className="r-content-date-publish">
-											<span>Publié {created}</span>
-										</div>
-										<div className="r-card-date-last">
-											<span>Actualisé {lastModified} </span>
-										</div>
+									<div className="r-content-date">
+										{
+											created === lastModified ?
+												(
+													<div className="r-content-date-publish">
+														<span>Publié {created}</span>
+													</div>
+												) :
+												(
+													<div>
+														<div className="r-content-date-publish">
+															<span>Publié {created}</span>
+														</div>
+														<div className="r-card-date-last">
+															<span>Actualisé {lastModified} </span>
+														</div>
+													</div>
+												)
+										}
 									</div>
-									)
-								}
-                            </div>
 								</div>
 							</div>
 						</div>
@@ -217,32 +218,32 @@ const ContactContent = ({ queryUrl, onChange }) => {
 						)}
 					</div>
 				</div>
-                <div
-                    className="r-content-text"
-                    dangerouslySetInnerHTML={{
-                        __html: item.text && item.text.data,
-                    }}
-                ></div>
+				<div
+					className="r-content-text"
+					dangerouslySetInnerHTML={{
+						__html: item.text && item.text.data,
+					}}
+				></div>
 				{/* add files to download */}
 				{
 					files &&
-						<div className="r-content-files">
-							{files.map((file, i) => (
-								<div className="r-content-file">
-									<a key={i} href={file.targetUrl} className="r-content-file-link" rel="nofollow">
-										<span className="r-content-file-title">{file.title}</span>
-										<span className="r-content-file-icon"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg> </span>
-									</a>
-								</div>
-							))}
-						</div>
+					<div className="r-content-files">
+						{files.map((file, i) => (
+							<div className="r-content-file">
+								<a key={i} href={file.targetUrl} className="r-content-file-link" rel="nofollow">
+									<span className="r-content-file-title">{file.title}</span>
+									<span className="r-content-file-icon"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg> </span>
+								</a>
+							</div>
+						))}
+					</div>
 				}
 				{/* add gallery */}
 				{
 					gallery &&
 					<div className="r-content-gallery">
 						<div class="spotlight-group flexbin r-content-gallery">
-							{gallery.map((image,i) => (
+							{gallery.map((image, i) => (
 								<a key={i} class="spotlight" href={image.image_full_scale} >
 									<img src={image.image_preview_scale} alt="" />
 								</a>
@@ -250,8 +251,8 @@ const ContactContent = ({ queryUrl, onChange }) => {
 						</div>
 					</div>
 				}
-            </article>
-        </div>
-    );
+			</article>
+		</div>
+	);
 };
-export default ContactContent;
+export default ContactContent;

imio/smartweb/core/webcomponents/src/components/News/NewsList/NewsList.jsx

@@ -19,14 +19,14 @@ const NewsList = ({ itemsArray, onChange, parentCallback }) => {
                             className="r-news-list-item-link"
                             style={{ textDecoration: "none" }}
                             to={{
-                                pathname: "/"+removeAccents(item.title).replace(/[^a-zA-Z ]/g, "").replace(/\s/g, "-").toLowerCase(),
+                                pathname: "/" + removeAccents(item.title).replace(/[^a-zA-Z ]/g, "").replace(/\s/g, "-").toLowerCase(),
                                 search: `?u=${item.UID}`,
                                 state: {
                                     idItem: item.UID,
                                 },
                             }}
                         >
-                        <NewsCard item={item} key={item.created} />
+                            <NewsCard item={item} key={item.created} />
                         </Link>
                     </li>
                 ))}
@@ -34,4 +34,4 @@ const NewsList = ({ itemsArray, onChange, parentCallback }) => {
         </React.Fragment>
     );
 };
-export default NewsList;
+export default NewsList;