design-react-kit 5.6.0 → 5.7.0

package/src/Transfer/useTransferContext.tsx

@@ -0,0 +1,110 @@
+import React, { createContext, useContext, useMemo, useState } from 'react';
+
+interface TransferContextType {
+  sourceItems: { id: string; content: React.ReactNode }[];
+  targetItems: { id: string; content: React.ReactNode }[];
+  sourceCandidates: string[];
+  targetCandidates: string[];
+  setSourceItems: ({
+    items,
+    setOriginals
+  }: {
+    items: { id: string; content: React.ReactNode }[];
+    setOriginals?: boolean;
+  }) => void;
+  setTargetItems: ({
+    items,
+    setOriginals
+  }: {
+    items: { id: string; content: React.ReactNode }[];
+    setOriginals?: boolean;
+  }) => void;
+  setSourceCandidates: (items: string[]) => void;
+  setTargetCandidates: (items: string[]) => void;
+  isChanged: boolean;
+  reset: () => void;
+}
+
+export const TransferContext = createContext<TransferContextType>({
+  sourceItems: [],
+  targetItems: [],
+  sourceCandidates: [],
+  targetCandidates: [],
+  setSourceItems: () => {},
+  setTargetItems: () => {},
+  setSourceCandidates: () => {},
+  setTargetCandidates: () => {},
+  isChanged: false,
+  reset: () => {}
+});
+
+export const useTransferContext = () => useContext(TransferContext);
+
+export const TransferContextProvider = ({ children }: { children: React.ReactNode }) => {
+  const [sourceItems, setSourceItems] = useState<{ id: string; content: React.ReactNode }[]>([]);
+  const [targetItems, setTargetItems] = useState<{ id: string; content: React.ReactNode }[]>([]);
+  const [sourceCandidates, setSourceCandidates] = useState<string[]>([]);
+  const [targetCandidates, setTargetCandidates] = useState<string[]>([]);
+  const [originalSourceItems, setOriginalSourceItems] = useState<{ id: string; content: React.ReactNode }[]>([]);
+  const [originalTargetItems, setOriginalTargetItems] = useState<{ id: string; content: React.ReactNode }[]>([]);
+
+  const value = useMemo(
+    () => ({
+      sourceCandidates,
+      targetCandidates,
+      sourceItems,
+      targetItems,
+      setSourceItems: ({
+        items,
+        setOriginals
+      }: {
+        items: { id: string; content: React.ReactNode }[];
+        setOriginals?: boolean;
+      }) => {
+        setSourceItems(items);
+        if (setOriginals) {
+          setOriginalSourceItems(items);
+        }
+      },
+      setTargetItems: ({
+        items,
+        setOriginals
+      }: {
+        items: { id: string; content: React.ReactNode }[];
+        setOriginals?: boolean;
+      }) => {
+        setTargetItems(items);
+        if (setOriginals) {
+          setOriginalTargetItems(items);
+        }
+      },
+      setSourceCandidates,
+      setTargetCandidates,
+      reset: () => {
+        setSourceItems(originalSourceItems);
+        setTargetItems(originalTargetItems);
+        setSourceCandidates([]);
+        setTargetCandidates([]);
+      },
+      isChanged:
+        JSON.stringify(sourceItems) !== JSON.stringify(originalSourceItems) ||
+        JSON.stringify(targetItems) !== JSON.stringify(originalTargetItems)
+    }),
+    [sourceItems, targetItems, sourceCandidates, targetCandidates, originalSourceItems, originalTargetItems]
+  );
+
+  return <TransferContext.Provider value={value}>{children}</TransferContext.Provider>;
+};
+
+export const useTransfer = () => {
+  const { sourceItems, targetItems, sourceCandidates, targetCandidates } = useTransferContext();
+
+  return {
+    source: sourceItems.map((item) => {
+      return { ...item, checked: sourceCandidates.includes(item.id) };
+    }),
+    target: targetItems.map((item) => {
+      return { ...item, checked: targetCandidates.includes(item.id) };
+    })
+  };
+};

package/src/Video/Video.tsx

@@ -0,0 +1,205 @@
+import React, { FC, useEffect, useRef } from 'react';
+
+import { VideoPlayer } from 'bootstrap-italia';
+import { Input } from '../Input/Input';
+import { Accordion } from '../Accordion/Accordion';
+import { AccordionItem } from '../Accordion/AccordionItem';
+import { AccordionHeader } from '../Accordion/AccordionHeader';
+import { AccordionBody } from '../Accordion/AccordionBody';
+import { Dimmer } from '../Dimmer/Dimmer';
+import { DimmerButtons } from '../Dimmer/DimmerButtons';
+import { Button } from '../Button/Button';
+import { FormGroup, Label } from 'reactstrap';
+import { Icon } from '../Icon/Icon';
+
+export interface VideoSource {
+  /** Sorgente del video */
+  src: string;
+  /** Tipo della sorgente video */
+  type: string;
+}
+export interface VideoTrackSource {
+  /** Tipologia di traccia audio */
+  kind: string;
+  /** Sorgente della traccia audio */
+  src: string;
+  /** Lingua della traccia audio */
+  srcLang: string;
+  /** Label della traccia audio */
+  label: string;
+  /** Setta la traccia audio come default */
+  isDefault?: boolean;
+}
+
+export interface VideoYouTube {
+  /** Url del video YouTube */
+  url: string;
+  /** Attiva o meno il disclaimer */
+  hasDisclaimer?: boolean;
+  /** Testo del disclaimer */
+  disclaimerText?: string;
+  /** Chiave del disclaimer come preferenza */
+  disclaimerKey?: string;
+}
+export interface VideoProps {
+  /** Id del componente Video */
+  id: string;
+  /** Sorgenti del video */
+  sources?: Array<VideoSource>;
+  /** Testo della trascrizione */
+  transcription?: string;
+  /** Label dell'accordion della trascrizione */
+  transcriptionLabel?: string;
+  /** Array delle tracce */
+  tracks?: Array<VideoTrackSource>;
+  /** Url del poster */
+  poster?: string;
+  /** Attiva o meno i controlli */
+  controls?: boolean;
+  /** Attiva o meno l'autoplay */
+  autoPlay?: boolean;
+  /** Attiva o meno il loop del video */
+  loop?: boolean;
+  /** Modalità visualizzazione fluida */
+  fluid?: boolean;
+  /** Video YouTube */
+  youtube?: VideoYouTube;
+  /** Label del pulsante di accettazione */
+  acceptLabel?: string;
+  /** Label della checkbox per ricordare la scelta di accettazione */
+  rememberLabel?: string;
+}
+
+export const Video: FC<VideoProps> = (props) => {
+  const [showTranscript, setShowTranscript] = React.useState(false);
+  const [showDisclaimer, setShowDisclaimer] = React.useState(false);
+  const [instance, setInstance] = React.useState<VideoPlayer>();
+  const [rememberFlag, setRememberFlag] = React.useState(false);
+  const [disclaimerText, setDisclaimerText] = React.useState(
+    `Accetta i cookie di YouTube per vedere il video. Puoi gestire le preferenze nella cookie policy.`
+  );
+  const ref = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (el && VideoPlayer && !instance) {
+      setInstance(new VideoPlayer(el))
+    }
+    if (props.youtube?.url) {
+      if (props.youtube.hasDisclaimer) {
+        const serviceName = props.youtube.disclaimerKey || 'youtube';
+        const rememberFlag = localStorage.getItem(serviceName);
+        if (props.youtube.disclaimerText) {
+          setDisclaimerText(props.youtube.disclaimerText);
+        }
+        setRememberFlag(rememberFlag == 'true');
+        if (rememberFlag == 'true') {
+          setShowDisclaimer(false);
+          loadYouTubeVideo(props.youtube.url);
+        } else {
+          setShowDisclaimer(true);
+        }
+      }
+    }
+
+    if (props.autoPlay) {
+      setTimeout(() => {
+        instance?.player?.play();
+      }, 1000);
+    }
+
+    return () => {
+      if (instance) {
+        instance.dispose();
+      }
+    };
+  }, [instance]);
+
+  const loadYouTubeVideo = (url: string) => {
+    if (instance) {
+      instance.setYouTubeVideo(url);
+    }
+  }
+
+  const { controls = true, autoPlay = false, loop = false, fluid = true, poster = undefined } = props;
+  const videoProps = { controls, autoPlay, loop, fluid, poster };
+
+  return (
+    <>
+      <div className='row dimmable'>
+        <video {...videoProps} ref={ref} preload='auto' className='video-js' data-bs-video={true}>
+          {props.sources?.map((source) => <source key={source.src} src={source.src} type={source.type} />)}
+          {props.tracks?.map((track) => {
+            const { src, kind, label, srcLang, isDefault } = track;
+            return (
+              <track
+                key={src}
+                kind={kind}
+                src={src}
+                srcLang={srcLang || ''}
+                label={label}
+                default={isDefault || false}
+              />
+            );
+          })}
+        </video>
+        {props.transcription && (
+          <Accordion className='vjs-transcription'>
+            <AccordionItem>
+              <AccordionHeader active={showTranscript} onToggle={() => setShowTranscript((p) => !p)}>
+                {props.transcriptionLabel || 'Trascrizione'}
+              </AccordionHeader>
+              <AccordionBody active={showTranscript}>{props.transcription}</AccordionBody>
+            </AccordionItem>
+          </Accordion>
+        )}
+        <Dimmer
+          show={showDisclaimer}
+          className='acceptoverlay-inner'
+          wrapperClassName='acceptoverlay acceptoverlay-primary '
+        >
+          <div className='acceptoverlay-icon'>
+            <Icon icon='it-video' size='xl' className=''></Icon>
+          </div>
+          <p dangerouslySetInnerHTML={{ __html: disclaimerText }}></p>
+          <DimmerButtons className='bg-primary'>
+            <Button
+              onClick={() => {
+                if (props.youtube?.url) {
+                  if (props.youtube.hasDisclaimer) {
+                    const serviceName = props.youtube.disclaimerKey || 'youtube';
+                    if (rememberFlag) {
+                      // set cookie
+                      localStorage.setItem(serviceName, 'true');
+                    } else {
+                      // reset cookie
+                      localStorage.removeItem(serviceName);
+                    }
+                    loadYouTubeVideo(props.youtube.url);
+                  }
+                  setShowDisclaimer(false);
+                }
+              }}
+              color='primary'
+            >
+              {props.acceptLabel || 'Accetta'}
+            </Button>
+            <div className='d-flex align-items-center ml-2'>
+              <FormGroup check inline>
+                <Input
+                  id={`inline-checkbox_${props.id}`}
+                  type='checkbox'
+                  checked={rememberFlag}
+                  onChange={() => setRememberFlag((p) => !p)}
+                />
+                <Label check for={`inline-checkbox_${props.id}`} defaultChecked={false} className='text-white'>
+                  {props.rememberLabel || 'Ricorda per tutti i video'}
+                </Label>
+              </FormGroup>
+            </div>
+          </DimmerButtons>
+        </Dimmer>
+      </div>
+    </>
+  );
+};

package/src/index.ts

@@ -79,6 +79,8 @@ export { CardTag } from './Card/CardTag';
 export { CardTagsHeader } from './Card/CardTagsHeader';
 export { CardText } from './Card/CardText';
 export { CardTitle } from './Card/CardTitle';
+export { Carousel } from './Carousel/Carousel';
+export { CarouselSlide } from './Carousel/CarouselSlide';
 export { Chip } from './Chips/Chip';
 export { ChipLabel } from './Chips/ChipLabel';
 export { Collapse } from './Collapse/Collapse';
@@ -146,6 +148,8 @@ export { Toggle } from './Toggle/Toggle';
 export { Toolbar } from './Toolbar/Toolbar';
 export { ToolbarDividerItem } from './Toolbar/ToolbarDividerItem';
 export { ToolbarItem } from './Toolbar/ToolbarItem';
+export { Transfer } from './Transfer/Transfer';
+export { Video } from './Video/Video'
 
 // Types
 export type { AccordionProps } from './Accordion/Accordion';
@@ -177,6 +181,7 @@ export type { CardTagProps } from './Card/CardTag';
 export type { CardTagsHeaderProps } from './Card/CardTagsHeader';
 export type { CardTextProps } from './Card/CardText';
 export type { CardTitleProps } from './Card/CardTitle';
+export type { CarouselProps } from './Carousel/Carousel';
 export type { ChipProps } from './Chips/Chip';
 export type { ChipLabelProps } from './Chips/ChipLabel';
 export type { DimmerProps } from './Dimmer/Dimmer';
@@ -254,6 +259,7 @@ export type { TimelineProps } from './Timeline/TimelineWrapper';
 export type { ToggleProps } from './Toggle/Toggle';
 export type { ToolbarProps } from './Toolbar/Toolbar';
 export type { ToolbarItemBadge, ToolbarItemProps } from './Toolbar/ToolbarItem';
+export type { VideoProps, VideoYouTube, VideoSource, VideoTrackSource } from "./Video/Video"
 
 export type {
   BreadcrumbItemProps,