argous 1.2.218 → 1.2.220

package/lib/components/Carousel/Carousel.js

@@ -0,0 +1,218 @@
+import { makeStyles } from '@material-ui/core';
+import clsx from 'clsx';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { IoIosArrowBack, IoIosArrowForward } from 'react-icons/io';
+
+
+const useStyles = makeStyles(theme => ({
+  container: {
+    height: '100%',
+    width: '100%'
+  },
+  carouselContainer: {
+    width: '100%',
+    height: ({ indicator, indicatorPadding }) => (indicator) ? `calc(100% - ${indicatorPadding * 2}px)` : '100%',
+    minWidth: '100%',
+    display: 'flex',
+    alignItems: 'center'
+  },
+  carousel: {
+    width: '100%',
+    height: '100%',
+    margin: 'auto',
+    display: 'flex',
+    alignItems: 'center',
+    flexDirection: 'row',
+    overflow: 'hidden',
+    scrollBehavior: 'smooth',
+    '&>*:not(:last-child)': {
+      marginRight: ({ itemSpacing }) => (itemSpacing || '')
+    }
+  },
+  button: {
+    display: 'flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+    border: 0,
+    padding: 0,
+    backgroundColor: '#0000',
+    color: (theme.palette.type === 'light') ? 'rgba(0, 0, 0, .4)' : 'rgba(255, 255, 255, .5)',
+    '&:hover': {
+      color: (theme.palette.type === 'light') ? 'rgba(0, 0, 0, .6)' : 'rgba(255, 255, 255, .8)'
+    },
+    '&:disabled': {
+      color: (theme.palette.type === 'light') ? 'rgba(0, 0, 0, .23)' : 'rgba(255, 255, 255, .3)',
+      backgroundColor: 'transparent',
+      cursor: 'default',
+      pointerEvents: 'none'
+    }
+  },
+  leftButton: {
+    left: 0
+  },
+  rightButton: {
+    right: 0
+  },
+  indicator: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: ({ indicatorGap }) => (indicatorGap || ''),
+    padding: ({ indicatorPadding, indicatorSize, iconSize }) => `${indicatorPadding - (indicatorSize / 2)}px ${iconSize}px`,
+    '& span': {
+      width: ({ indicatorSize }) => (indicatorSize || ''),
+      height: ({ indicatorSize }) => (indicatorSize || ''),
+      borderRadius: '50%',
+      backgroundColor: (theme.palette.type === 'light') ? 'rgba(0, 0, 0, .4)' : 'rgba(255, 255, 255, .5)',
+      transition: 'background-color 500ms'
+    }
+  },
+  currentIndicator: {
+    backgroundColor: (theme.palette.type === 'light') ? '#000 !important' : '#fff !important'
+  }
+}));
+
+
+const CAROUSEL_ID = 'carousel';
+
+const initialState = { 
+  position: 0, 
+  indicatorArray: [] 
+};
+
+
+const Carousel = ({ 
+  id, 
+  leftIcon: LEFT_ICON = IoIosArrowBack, 
+  rightIcon: RIGHT_ICON = IoIosArrowForward, 
+  iconSize = 20, 
+  scrollSensitivity = 2, 
+  itemSpacing = '.5rem', 
+  children, 
+  buttons = true, 
+  indicator, 
+  indicatorSize = 6, 
+  indicatorGap = 10, 
+  indicatorPadding = 20, 
+  carouselStyle, 
+  onClick, 
+  buttonClassName, 
+  indicatorClassName, 
+  currentIndicatorClassName 
+}) => {
+
+  const classes = useStyles({ itemSpacing, indicator, indicatorSize, indicatorGap, indicatorPadding, iconSize });
+  const [state, setState] = useState(initialState);
+  const { position, indicatorArray } = state;
+  const carousel = useRef(null);
+  const childWidth = carousel.current?.children?.[0]?.offsetWidth;
+  const disabledButtonsRef = useRef(false);
+  const carouselId = (id) ? id : CAROUSEL_ID;
+  const leftButtonId = `${carouselId}-left-button`;
+  const rightButtonId = `${carouselId}-right-button`;
+
+  const logicSetState = ({ type, field, value }) => setState(states => ({ 
+    ...states, 
+    [type]: (type && field) ? { ...states[type], [field]: value } : value 
+  }));
+
+
+  const control = useCallback(e => {
+    if (disabledButtonsRef.current) return;
+
+    const childWidth = carousel.current?.children?.[0]?.offsetWidth;
+    const maxWidth = (childWidth * (carousel.current?.children?.length - 1));
+    const scrollLeft = carousel.current?.scrollLeft;
+    const leftButtonElement = document.getElementById(leftButtonId);
+    const rightButtonElement = document.getElementById(rightButtonId);
+    const childrenWidth = ((childWidth + itemSpacing) * carousel.current?.children?.length);
+    const childrenSmallerThanParent = (childrenWidth < carousel.current?.offsetWidth);
+
+    if (leftButtonElement) {
+      if ((scrollLeft === 0) || childrenSmallerThanParent) leftButtonElement.disabled = true;
+      else if (scrollLeft > 0) leftButtonElement.disabled = false;
+    }
+    if (rightButtonElement) {
+      if ((scrollLeft === maxWidth) || childrenSmallerThanParent) rightButtonElement.disabled = true;
+      else if (scrollLeft < maxWidth) rightButtonElement.disabled = false;
+    }
+
+    (position === children.length) && logicSetState({ type: 'position', value: (children.length - 1) });
+  }, [itemSpacing, leftButtonId, rightButtonId, position, children.length]);
+  useEffect(() => control(), [control]);
+  control();
+
+  const createIndicatorArray = useCallback(() => {
+    const childrenLength = carousel.current?.children?.length;
+    const newIndicatorArray = Array.from(Array(childrenLength).keys());
+    logicSetState({ type: 'indicatorArray', value: newIndicatorArray });
+  }, []);
+  useEffect(() => (indicator) && createIndicatorArray(), [indicator, children, createIndicatorArray]);
+
+  const handleCarouselClick = (e, direction) => {
+    if (!childWidth || (typeof childWidth !== 'number')) return;
+
+    let newPosition = position;
+    const scrollWidth = (childWidth * scrollSensitivity);
+    const leftButtonElement = document.getElementById(leftButtonId);
+    const rightButtonElement = document.getElementById(rightButtonId);
+
+    leftButtonElement.disabled = true;
+    rightButtonElement.disabled = true;
+    disabledButtonsRef.current = true;
+
+    if (direction === 'right') {
+      (carousel.current.scrollLeft += scrollWidth);
+      (position < (indicatorArray.length - 1)) && logicSetState({ type: 'position', value: (newPosition += 1) });
+    } else {
+      (carousel.current.scrollLeft -= scrollWidth);
+      (position > 0) && logicSetState({ type: 'position', value: (newPosition -= 1) });
+    }
+
+    (onClick && (typeof onClick === 'function')) && onClick(e);
+    setTimeout(() => {
+      leftButtonElement.disabled = false;
+      rightButtonElement.disabled = false;
+      disabledButtonsRef.current = false;
+      control();
+    }, ((childWidth <= 500) ? 500 : (childWidth * ((childWidth > 1000) ? 0.6 : 0.9)) || 500));
+  };
+
+
+  return <div id={carouselId} className={classes.container}>
+    <div className={classes.carouselContainer}>
+      {(buttons && LEFT_ICON) && (
+        <button id={leftButtonId} onClick={(e) => handleCarouselClick(e, 'left')} className={clsx(classes.button, classes.leftButton, buttonClassName)}>
+          <LEFT_ICON size={iconSize} className={classes.leftButton} />
+        </button>
+      )}
+      <div ref={carousel} style={{ ...carouselStyle }} className={classes.carousel}>
+        {children}
+      </div>
+      {(buttons && RIGHT_ICON) && (
+        <button id={rightButtonId} onClick={(e) => handleCarouselClick(e, 'right')} className={clsx(classes.button, classes.rightButton, buttonClassName)}>
+          <RIGHT_ICON size={iconSize} className={classes.rightButton} />
+        </button>
+      )}
+    </div>
+    {(indicator) && (
+      <div className={clsx(classes.indicator, indicatorClassName)}>
+        {indicatorArray.map((_, index) => (
+          <span 
+            key={`indicator-${index}`} 
+            className={
+              clsx({ 
+                [classes.currentIndicator]: (position === index), 
+                [currentIndicatorClassName]: (position === index) 
+              })
+            } 
+          />
+        ))}
+      </div>
+    )}
+  </div>;
+};
+
+
+export default Carousel;

package/lib/components/Carousel/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Carousel';
+export * from './Carousel';

package/lib/components/Carousel/index.js

@@ -0,0 +1 @@
+export { default } from './Carousel';

package/lib/components/TextToHtml/Cursor.js

@@ -0,0 +1,24 @@
+import React, { useEffect, useRef } from 'react';
+
+
+const Cursor = ({ id, speed = 500, className }) => {
+
+  const cursorId = `${id}-cursor-component`;
+  const intervalIdRef = useRef(null);
+
+
+  useEffect(() => {
+    const cursorElement = document.getElementById(cursorId);
+    if (cursorElement) cursorElement.style.opacity = '1';
+    intervalIdRef.current = setInterval(() => {
+      if (cursorElement) cursorElement.style.opacity = (cursorElement.style.opacity === '0') ? '1' : '0';
+    }, speed);
+    return () => clearInterval(intervalIdRef.current);
+  });
+
+
+  return <span id={cursorId} className={`${className}`}>|</span>;
+};
+
+
+export default Cursor;

package/lib/components/TextToHtml/TextStyles.js

@@ -0,0 +1,111 @@
+import { ClickAwayListener, IconButton, makeStyles } from '@material-ui/core';
+import React, { useState } from 'react';
+import { RgbaColorPicker } from 'react-colorful';
+import { RiAlignCenter, RiAlignJustify, RiAlignLeft, RiAlignRight, RiFontColor, RiFontSize } from 'react-icons/ri';
+
+
+const ICON_SIZE = '2.5rem';
+const BOX_SHADOW = 'rgba(0, 0, 0, 0.3) 0px 1px 12px -2px';
+
+const useStyles = makeStyles(theme => ({
+  container: {
+    zIndex: 1,
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    display: 'flex',
+    alignItems: 'flex-start',
+    justifyContent: 'flex-end',
+    gap: ({ defaultSpacing }) => (defaultSpacing) ? defaultSpacing : ''
+  },
+  button: {
+    padding: ({ defaultSpacing }) => (defaultSpacing) ? (defaultSpacing / 2) : '',
+    color: `rgba(${(theme.palette.type === 'light') ? '0, 0, 0' : '255, 255, 255'}, .7)`,
+    backgroundColor: `rgba(${(theme.palette.type === 'light') ? '255, 255, 255' : '0, 0, 0'}, .5)`,
+    '&:hover': {
+      backgroundColor: `rgba(${(theme.palette.type === 'light') ? '255, 255, 255' : '0, 0, 0'}, .7)`
+    }
+  },
+  colorPickerContainer: {
+    zIndex: 2,
+    position: 'absolute',
+    padding: '2rem'
+  },
+  colorPickerBoxShadow: {
+    borderRadius: 8,
+    webKitBoxShadow: BOX_SHADOW,
+    mozBoxShadow: BOX_SHADOW,
+    boxShadow: BOX_SHADOW
+  }
+}));
+
+
+const initialStateOpen = {
+  colorPicker: undefined
+};
+
+const initialState = {
+  open: initialStateOpen
+};
+
+
+const TextStyles = ({ color, setColor, defaultSpacing, toggleClickAway, handleFontSizeChange, textAlign, handleTextAlignChange }) => {
+
+  const classes = useStyles({ defaultSpacing });
+  const [state, setState] = useState(initialState);
+  const { open } = state;
+
+  const logicSetState = (type, field, value) => setState(values => ({ 
+    ...values, 
+    [type]: (type && field) ? { ...values[type], [field]: value } : value 
+  }));
+
+  const handleColorPickerOpen = e => {
+    toggleClickAway();
+    const elRect = e.target.parentElement.getBoundingClientRect();
+    logicSetState('open', 'colorPicker', elRect);
+  };
+
+  const handleColorPickerClose = e => {
+    toggleClickAway();
+    logicSetState('open', 'colorPicker', undefined);
+  };
+
+
+  return <div className={classes.container}>
+    <IconButton onClick={handleTextAlignChange} onTouchStart={handleTextAlignChange} className={classes.button}>
+      {(() => {
+        switch (textAlign) {
+          case 'start':
+            return <RiAlignLeft size={ICON_SIZE} />;
+          case 'end':
+            return <RiAlignRight size={ICON_SIZE} />;
+          case 'center':
+            return <RiAlignCenter size={ICON_SIZE} />;
+          case 'justify':
+            return <RiAlignJustify size={ICON_SIZE} />;
+          default:
+            return null;
+        }
+      })()}
+    </IconButton>
+    <IconButton onClick={handleColorPickerOpen} onTouchStart={handleColorPickerOpen} className={classes.button}>
+      <RiFontColor size={ICON_SIZE} />
+    </IconButton>
+    <IconButton onClick={handleFontSizeChange} onTouchStart={handleFontSizeChange} className={classes.button}>
+      <RiFontSize size={ICON_SIZE} />
+    </IconButton>
+    {(!!open.colorPicker) && (
+      <ClickAwayListener disableReactTree onClickAway={handleColorPickerClose}>
+        <div className={classes.colorPickerContainer}>
+          <div className={classes.colorPickerBoxShadow}>
+            <RgbaColorPicker color={color} onChange={setColor} />
+          </div>
+        </div>
+      </ClickAwayListener>
+    )}
+  </div>;
+};
+
+
+export default TextStyles;

package/lib/components/TextToHtml/TextToHtml.d.ts

@@ -0,0 +1,38 @@
+export interface TextToHtmlInitialValue { 
+  text?: string, 
+  cssText?: string 
+}
+
+export interface TextToHtmlProps {
+  /**
+   * Object containing properties to use as initial value
+   */
+  initialValue?: TextToHtmlInitialValue, 
+  /**
+   * Function called on change
+   * @param htmlString 
+   * @returns 
+   */
+  onChange?: (htmlString: string) => void, 
+  /**
+   * Function called on delete
+   * @param event 
+   * @param deleted 
+   * @param newCharacters 
+   * @returns 
+   */
+  onDelete?: (event: Event, deleted: object, newCharacters: Array<object>) => void, 
+  /**
+   * Number to represent the default spacing in pixels
+   */
+  defaultSpacing?: number, 
+  /**
+   * Function called to set external values
+   */
+  setExternalValues?: (state: object) => void
+}
+
+
+declare function TextToHtml(props: TextToHtmlProps) : JSX.Element
+
+export default TextToHtml;