@festo-ui/react 4.0.3-pre-20221213.1 → 5.0.0-dev.72

package/lib/components/tab/useTabScroll.js

@@ -0,0 +1,233 @@
+import { useState } from 'react';
+
+// provides details about the left and right edges of the tab element and the tab content element
+// these values are used to determine the visual position of the tab with respect of its parent container
+
+const useTabScroll = (tabLength, componentId, refs) => {
+  const {
+    elRef,
+    scrollContent,
+    scrollArea
+  } = refs;
+  const [style, setStyle] = useState({});
+  const [classes, setClasses] = useState('');
+  function getScrollContentStyleValue(propName) {
+    return scrollContent.current ? window.getComputedStyle(scrollContent.current).getPropertyValue(propName) : '';
+  }
+  function calculateCurrentTranslateX() {
+    const transformValue = getScrollContentStyleValue('transform');
+    if (transformValue === 'none') {
+      return 0;
+    }
+
+    // the transform value is in form of 'matrix(a, b, c, d, tx, ty)'
+    // get all the parenthesized values
+    const match = /\((.+?)\)/.exec(transformValue);
+    if (!match) {
+      return 0;
+    }
+    const matrixParams = match[1];
+    // we need value of tx -> translateX
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [a, b, c, d, tx, ty] = matrixParams.split(',');
+    return parseFloat(tx);
+  }
+  function getScrollPosition() {
+    const currentTranslateX = calculateCurrentTranslateX();
+    const scrollLeft = scrollArea.current?.scrollLeft ?? 0;
+    return scrollLeft - currentTranslateX;
+  }
+  function calculateScrollEdges() {
+    const scrollContentWidth = scrollContent.current?.offsetWidth ?? 0;
+    const scrollAreaWidth = scrollArea.current?.offsetWidth ?? 0;
+    return {
+      left: 0,
+      right: scrollContentWidth - scrollAreaWidth
+    };
+  }
+  function clampScrollValue(scrollX) {
+    const edges = calculateScrollEdges();
+    return Math.min(Math.max(edges.left, scrollX), edges.right);
+  }
+  function getIncrementScrollOperation(scrollX) {
+    const currentScrollX = getScrollPosition();
+    const targetScrollX = scrollX + currentScrollX;
+    const safeScrollX = clampScrollValue(targetScrollX);
+    const scrollDelta = safeScrollX - currentScrollX;
+    return {
+      finalScrollPosition: safeScrollX,
+      scrollDelta
+    };
+  }
+  function getAnimatingScrollPosition() {
+    const currentTranslateX = calculateCurrentTranslateX();
+    const scrollLeft = scrollArea.current?.scrollLeft ?? 0;
+    return scrollLeft - currentTranslateX;
+  }
+  function stopScrollAnimation() {
+    const currentScrollPosition = getAnimatingScrollPosition();
+    setClasses('');
+    setStyle({
+      transform: 'translateX(0px)'
+    });
+    if (scrollArea.current) {
+      scrollArea.current.scrollLeft = currentScrollPosition;
+    }
+  }
+  function animate(animation) {
+    // no animation needed
+    if (animation.scrollDelta === 0) {
+      return;
+    }
+    stopScrollAnimation();
+
+    // this animation uses the flip approach
+    // https://aerotwist.com/blog/flip-your-animations/
+    // https://css-tricks.com/animating-layouts-with-the-flip-technique/
+    if (scrollArea.current) {
+      scrollArea.current.scrollLeft = animation.finalScrollPosition;
+    }
+    setStyle({
+      transform: `translateX(${animation.scrollDelta}px)`
+    });
+    // force repaint
+    if (scrollArea.current) {
+      scrollArea.current.getBoundingClientRect();
+    }
+    requestAnimationFrame(() => {
+      setClasses('fr-tab-scroller--animating');
+      setStyle({
+        transform: 'none'
+      });
+    });
+  }
+  function incrementScroll(scrollXIncrement) {
+    // no scroll needed
+    if (scrollXIncrement === 0) {
+      return;
+    }
+    const scrollOperation = getIncrementScrollOperation(scrollXIncrement);
+    animate(scrollOperation);
+  }
+  function computeDimensions(tab) {
+    const rootWidth = tab.offsetWidth;
+    const rootLeft = tab.offsetLeft;
+    const tabContent = tab.querySelector('.fr-tab-content');
+    const contentWidth = tabContent?.offsetWidth ?? 0;
+    const contentLeft = tabContent?.offsetLeft ?? 0;
+    return {
+      contentLeft: rootLeft + contentLeft,
+      contentRight: rootLeft + contentLeft + contentWidth,
+      rootLeft,
+      rootRight: rootLeft + rootWidth
+    };
+  }
+  function calculateScrollIncrement(index, nextIndex, scrollPosition, barWidth) {
+    const nextTab = elRef.current?.querySelector(`#${componentId}-tab-${nextIndex}`);
+    if (nextTab === null || nextTab === undefined) {
+      return 0;
+    }
+    const nextTabDimensions = computeDimensions(nextTab);
+    const relativeContentLeft = nextTabDimensions.contentLeft - scrollPosition - barWidth;
+    const relativeContentRight = nextTabDimensions.contentRight - scrollPosition;
+    const leftIncrement = relativeContentRight - 48;
+    const rightIncrement = relativeContentLeft + 48;
+    if (nextIndex < index) {
+      return Math.min(leftIncrement, 0);
+    }
+    return Math.max(rightIncrement, 0);
+  }
+  function findAdjacentTabIndexClosestToEdge(index, tabDimensions, scrollPosition, barWidth) {
+    /**
+     * tabs are laid out in the tab scroller like this:
+     *
+     *    scroll position
+     *    +---+
+     *    |   |   bar width
+     *    |   +-----------------------------------+
+     *    |   |                                   |
+     *    |   v                                   v
+     *    |   +-----------------------------------+
+     *    v   |             tab scroller          |
+     *    +------------+--------------+-------------------+
+     *    |    tab     |      tab     |        tab        |
+     *    +------------+--------------+-------------------+
+     *        |                                   |
+     *        +-----------------------------------+
+     *
+     * to determine the next adjacent index, we look at the tab root left and
+     * tab root right, both relative to the scroll position. if the tab root
+     * left is less than 0, then we know it's out of view to the left. if the
+     * tab root right minus the bar width is greater than 0, we know the tab is
+     * out of view to the right. from there, we either increment or decrement
+     * the index.
+     */
+    const relativeRootLeft = tabDimensions.rootLeft - scrollPosition;
+    const relativeRootRight = tabDimensions.rootRight - scrollPosition - barWidth;
+    const relativeRootDelta = relativeRootLeft + relativeRootRight;
+    const leftEdgeIsCloser = relativeRootLeft < 0 || relativeRootDelta < 0;
+    const rightEdgeIsCloser = relativeRootRight > 0 || relativeRootDelta > 0;
+    if (leftEdgeIsCloser) {
+      return index - 1;
+    }
+    if (rightEdgeIsCloser) {
+      return index + 1;
+    }
+    return -1;
+  }
+  function indexIsInRange(index) {
+    return index >= 0 && index < tabLength;
+  }
+  function scrollIntoView(index, tab) {
+    const scrollPosition = getScrollPosition();
+    const barWidth = scrollArea.current?.offsetWidth ?? 0;
+    const tabDimensions = computeDimensions(tab);
+    const nextIndex = findAdjacentTabIndexClosestToEdge(index, tabDimensions, scrollPosition, barWidth);
+    if (!indexIsInRange(nextIndex)) {
+      return;
+    }
+    const scrollIncrement = calculateScrollIncrement(index, nextIndex, scrollPosition, barWidth);
+    incrementScroll(scrollIncrement);
+  }
+  function scrollTo(scrollX) {
+    const currentScrollX = getScrollPosition();
+    const safeScrollX = clampScrollValue(scrollX);
+    const scrollDelta = safeScrollX - currentScrollX;
+    animate({
+      finalScrollPosition: safeScrollX,
+      scrollDelta
+    });
+  }
+  function handleTabScroll(e, index) {
+    const scrollContentWidth = scrollContent.current?.offsetWidth ?? 0;
+    const scrollAreaWidth = scrollArea.current?.offsetWidth ?? 0;
+
+    // check if no scroll is needed
+    if (scrollAreaWidth > scrollContentWidth) {
+      return;
+    }
+
+    // check index
+    if (!indexIsInRange(index)) {
+      return;
+    }
+
+    // always scroll to 0 if scrolling to the first tab
+    if (index === 0) {
+      scrollTo(0);
+      return;
+    }
+
+    // always scroll to the max value if scrolling to the last tab
+    if (index === tabLength - 1 && scrollContent.current) {
+      scrollTo(scrollContent.current.offsetWidth);
+      return;
+    }
+    if (e.currentTarget instanceof HTMLElement) {
+      const currentTab = e.currentTarget;
+      scrollIntoView(index, currentTab);
+    }
+  }
+  return [handleTabScroll, classes, style];
+};
+export default useTabScroll;

package/lib/components/table-header-cell/TableHeaderCell.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-export interface TableHeaderCellProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
-    active?: boolean;
-    ascending: boolean;
-}
-declare const TableHeaderCell: React.ForwardRefExoticComponent<TableHeaderCellProps & React.RefAttributes<HTMLTableHeaderCellElement>>;
-export default TableHeaderCell;
+/// <reference types="react" />
+export interface TableHeaderCellProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+    active?: boolean;
+    ascending: boolean;
+}
+declare const TableHeaderCell: import("react").ForwardRefExoticComponent<TableHeaderCellProps & import("react").RefAttributes<HTMLTableHeaderCellElement>>;
+export default TableHeaderCell;

package/lib/components/table-header-cell/TableHeaderCell.js

@@ -0,0 +1,21 @@
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const TableHeaderCell = /*#__PURE__*/forwardRef((props, ref) => {
+  function handleClick(event) {
+    if (props.onClick) {
+      props.onClick(event);
+    }
+  }
+  return /*#__PURE__*/_jsx("th", {
+    ...props,
+    className: classNames('fwe-table-order', {
+      'fwe-active': props.active
+    }, {
+      'fwe-table-order-descending': !props.ascending
+    }, props.className),
+    onClick: handleClick,
+    ref: ref
+  });
+});
+export default TableHeaderCell;

package/lib/forms/checkbox/Checkbox.d.ts

@@ -1,16 +1,16 @@
-import React from 'react';
-import './Checkbox.scss';
-export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
-    id: string;
-    checked: boolean;
-    onChange: (value: boolean) => void;
-    name?: string;
-    large?: boolean;
-    valid?: boolean;
-    labelPosition?: 'before' | 'after' | 'below';
-    required?: boolean;
-    disabled?: boolean;
-    indeterminate?: boolean;
-}
-declare function Checkbox({ id, checked, onChange, name, large, valid, labelPosition, required, disabled, indeterminate, children, className, ...props }: CheckboxProps): JSX.Element;
-export default Checkbox;
+import React from 'react';
+import './Checkbox.scss';
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+    id: string;
+    checked: boolean;
+    onChange: (value: boolean) => void;
+    name?: string;
+    large?: boolean;
+    valid?: boolean;
+    labelPosition?: 'before' | 'after' | 'below';
+    required?: boolean;
+    disabled?: boolean;
+    indeterminate?: boolean;
+}
+declare function Checkbox({ id, checked, onChange, name, large, valid, labelPosition, required, disabled, indeterminate, children, className, ...props }: CheckboxProps): JSX.Element;
+export default Checkbox;

package/lib/forms/checkbox/Checkbox.js

@@ -0,0 +1,88 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function Checkbox(_ref) {
+  let {
+    id,
+    checked,
+    onChange,
+    name,
+    large = false,
+    valid = true,
+    labelPosition = 'after',
+    required,
+    disabled = false,
+    indeterminate = false,
+    children,
+    className,
+    ...props
+  } = _ref;
+  const [isChecked, setChecked] = useState(checked);
+  const [isIndeterminate, setIndeterminate] = useState(indeterminate);
+  useEffect(() => {
+    setChecked(checked);
+    setIndeterminate(indeterminate);
+  }, [checked, indeterminate]);
+  const handleChange = () => {
+    const newChecked = !isChecked;
+    if (indeterminate) {
+      setIndeterminate(false);
+    }
+    setChecked(newChecked);
+    onChange(newChecked);
+  };
+  const containerClasses = classNames('fwe-checkbox-container', {
+    'fr-checkbox-large': large
+  }, {
+    'fr-checkbox-invalid': !valid || required
+  }, {
+    'fwe-disabled': disabled
+  }, {
+    'fwe-checked': isChecked
+  }, {
+    'fwe-label-below': labelPosition === 'below'
+  }, {
+    'fwe-label-before': labelPosition === 'before'
+  }, {
+    'fr-checkbox-indeterminate': isIndeterminate
+  }, className);
+  return /*#__PURE__*/_jsxs("label", {
+    className: containerClasses,
+    htmlFor: id,
+    children: [/*#__PURE__*/_jsx("input", {
+      name: name,
+      type: "checkbox",
+      id: id,
+      disabled: disabled,
+      onChange: () => handleChange(),
+      ...props
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "fwe-checkbox-indicator-container",
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "fwe-checkbox-indicator-background"
+      }), !isIndeterminate && isChecked && (large ? /*#__PURE__*/_jsx("svg", {
+        width: "24px",
+        height: "24px",
+        children: /*#__PURE__*/_jsx("path", {
+          d: "M17.5 7L10 14.5 7.501 12l-1.5 1.501L10 17.5l9-9z",
+          fill: "#fff"
+        })
+      }) : /*#__PURE__*/_jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "16",
+        height: "16",
+        children: /*#__PURE__*/_jsx("path", {
+          d: "M6 12L3 9l1.25-1.25L6 9.5l5.75-5.75L13 5l-7 7z",
+          fill: "#fff"
+        })
+      })), isIndeterminate && !isChecked && /*#__PURE__*/_jsx("div", {
+        className: "fwe-indeterminate-indicator"
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: "fwe-checkbox-title",
+      children: children
+    })]
+  });
+}
+export default Checkbox;

package/lib/forms/color-indicator/ColorIndicator.d.ts

@@ -1,12 +1,12 @@
-/// <reference types="react" />
-import { ClassNamePropsWithChildren } from '../../helper/types';
-import './ColorIndicator.scss';
-interface ColorIndicatorProps extends ClassNamePropsWithChildren {
-    text: string;
-    label: string;
-    color?: string;
-    showPopOver?: boolean;
-    disabled?: boolean;
-}
-declare function ColorIndicator({ text, label, color, className, showPopOver, children, disabled }: ColorIndicatorProps): JSX.Element;
-export default ColorIndicator;
+/// <reference types="react" />
+import { ClassNamePropsWithChildren } from '../../helper/types';
+import './ColorIndicator.scss';
+interface ColorIndicatorProps extends ClassNamePropsWithChildren {
+    text: string;
+    label: string;
+    color?: string;
+    showPopOver?: boolean;
+    disabled?: boolean;
+}
+declare function ColorIndicator({ text, label, color, className, showPopOver, children, disabled, }: ColorIndicatorProps): JSX.Element;
+export default ColorIndicator;

package/lib/forms/color-indicator/ColorIndicator.js

@@ -0,0 +1,122 @@
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import Popover from '../../components/popovers/popover/Popover';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+function ColorIndicator(_ref) {
+  let {
+    text,
+    label,
+    color,
+    className,
+    showPopOver = false,
+    children,
+    disabled
+  } = _ref;
+  const classes = classNames('fwe-color-indicator', className, disabled);
+  const [isEditorOpen, setEditorOpen] = useState(false);
+  function getBorderColor() {
+    if (!color || color.toUpperCase() === '#FFFFFF' || color.toUpperCase() === '#F2F3F5') {
+      return '#b6bec6'; // = $control-border
+    }
+
+    return color;
+  }
+  const colorBox = /*#__PURE__*/_jsx("div", {
+    className: "fwe-color-box",
+    style: {
+      background: color,
+      borderColor: getBorderColor()
+    },
+    children: !color && /*#__PURE__*/_jsxs("svg", {
+      className: "fwe-no-color-pattern",
+      version: "1.1",
+      xmlns: "http://www.w3.org/2000/svg",
+      xmlnsXlink: "http://www.w3.org/1999/xlink",
+      id: "canvas1",
+      width: "18",
+      height: "18",
+      children: [/*#__PURE__*/_jsx("defs", {
+        children: /*#__PURE__*/_jsxs("pattern", {
+          id: "bwsquare2px",
+          width: "4",
+          height: "4",
+          patternUnits: "userSpaceOnUse",
+          children: [/*#__PURE__*/_jsx("rect", {
+            x: "0",
+            y: "0",
+            width: "2",
+            height: "2",
+            stroke: "none",
+            fill: "#ffffff"
+          }), /*#__PURE__*/_jsx("rect", {
+            x: "2",
+            y: "0",
+            width: "2",
+            height: "2",
+            stroke: "none",
+            fill: "#e5e8eb"
+          }), /*#__PURE__*/_jsx("rect", {
+            x: "0",
+            y: "2",
+            width: "2",
+            height: "2",
+            stroke: "none",
+            fill: "#e5e8eb"
+          }), /*#__PURE__*/_jsx("rect", {
+            x: "2",
+            y: "2",
+            width: "2",
+            height: "2",
+            stroke: "none",
+            fill: "#ffffff"
+          })]
+        })
+      }), /*#__PURE__*/_jsx("rect", {
+        x: "0",
+        y: "0",
+        rx: "0",
+        ry: "0",
+        width: "18",
+        height: "18",
+        fill: "url(#bwsquare2px)",
+        strokeWidth: "0"
+      })]
+    })
+  });
+  const wrapperProperties = showPopOver ? {
+    onClick: () => setEditorOpen(prevOpen => !prevOpen)
+  } : {};
+  const wrapper = wrapperChildren => /*#__PURE__*/_jsxs("div", {
+    className: classes,
+    ...wrapperProperties,
+    children: [/*#__PURE__*/_jsx("div", {
+      style: {
+        opacity: isEditorOpen ? 0 : 1
+      },
+      className: "fwe-color-label",
+      children: label
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "fwe-color-container",
+      children: [wrapperChildren, " ", text && /*#__PURE__*/_jsx("div", {
+        className: "fwe-color-indicator-text",
+        children: text
+      }), ' ']
+    })]
+  });
+  return showPopOver ? /*#__PURE__*/_jsx(Popover, {
+    containerClassName: "fwe-popover-container--color-indicator",
+    position: "top",
+    flip: false,
+    wrapper: wrapper,
+    popoverContent: children,
+    open: isEditorOpen,
+    onStatusChange: setEditorOpen,
+    stopPropagation: true,
+    children: colorBox
+  }) : /*#__PURE__*/_jsx(_Fragment, {
+    children: wrapper(colorBox)
+  });
+}
+export default ColorIndicator;

package/lib/forms/color-picker/ColorHelper.d.ts

@@ -1,9 +1,9 @@
-export default abstract class ColorHelper {
-    static rgbToHsv(rgb: Record<'r' | 'g' | 'b', number>): Record<'h' | 's' | 'v', number> | undefined;
-    static hsvToRgb(_hsv: Record<'h' | 's' | 'v', number>): Record<'r' | 'g' | 'b', number>;
-    private static limitToByte;
-    private static limitToOne;
-    private static numberToHex;
-    static rgbToHex(_rgb: Record<'r' | 'g' | 'b', number>): string;
-    static hexToRgb(hexString: string): Record<'r' | 'g' | 'b', number> | undefined;
-}
+export default abstract class ColorHelper {
+    static rgbToHsv(rgb: Record<'r' | 'g' | 'b', number>): Record<'h' | 's' | 'v', number> | undefined;
+    static hsvToRgb(_hsv: Record<'h' | 's' | 'v', number>): Record<'r' | 'g' | 'b', number>;
+    private static limitToByte;
+    private static limitToOne;
+    private static numberToHex;
+    static rgbToHex(_rgb: Record<'r' | 'g' | 'b', number>): string;
+    static hexToRgb(hexString: string): Record<'r' | 'g' | 'b', number> | undefined;
+}