framework7-react 6.3.16 → 7.0.0-beta.12

package/components/area-chart.js

@@ -0,0 +1,354 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { forwardRef, useRef, useImperativeHandle, useState, useEffect } from 'react';
+import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
+import { f7 } from '../shared/f7.js';
+
+const AreaChart = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    lineChart = false,
+    datasets = [],
+    axis = false,
+    axisLabels = [],
+    tooltip = false,
+    legend = false,
+    toggleDatasets = false,
+    width = 640,
+    height = 320,
+    maxAxisLabels = 8,
+    formatAxisLabel: formatAxisLabelProp,
+    formatLegendLabel: formatLegendLabelProp,
+    formatTooltip: formatTooltipProp,
+    formatTooltipAxisLabel,
+    formatTooltipTotal,
+    formatTooltipDataset,
+    children
+  } = props;
+  const [currentIndex, setCurrentIndex] = useState(null);
+  const previousIndex = useRef(null);
+  const [hiddenDatasets, setHiddenDatasets] = useState([]);
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  const svgElRef = useRef(null);
+  const f7Tooltip = useRef(null);
+  const linesOffsets = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+
+  const getVisibleLegends = () => {
+    if (!maxAxisLabels || axisLabels.length <= maxAxisLabels) return axisLabels;
+    const skipStep = Math.ceil(axisLabels.length / maxAxisLabels);
+    const filtered = axisLabels.filter((label, index) => index % skipStep === 0);
+    return filtered;
+  };
+
+  const getSummValues = () => {
+    const summValues = [];
+    datasets.filter((dataset, index) => !hiddenDatasets.includes(index)).forEach(({
+      values
+    }) => {
+      values.forEach((value, valueIndex) => {
+        if (!summValues[valueIndex]) summValues[valueIndex] = 0;
+        summValues[valueIndex] += value;
+      });
+    });
+    return summValues;
+  };
+
+  const getChartData = () => {
+    const data = [];
+
+    if (!datasets.length) {
+      return data;
+    }
+
+    const lastValues = datasets[0].values.map(() => 0);
+    let maxValue = 0;
+
+    if (lineChart) {
+      datasets.forEach(({
+        values
+      }) => {
+        const datasetMaxValue = Math.max(...values);
+        if (datasetMaxValue > maxValue) maxValue = datasetMaxValue;
+      });
+    } else {
+      maxValue = Math.max(...getSummValues());
+    }
+
+    datasets.filter((dataset, index) => !hiddenDatasets.includes(index)).forEach(({
+      label,
+      values,
+      color
+    }) => {
+      const points = values.map((originalValue, valueIndex) => {
+        lastValues[valueIndex] += originalValue;
+        const value = lineChart ? originalValue : lastValues[valueIndex];
+        const x = valueIndex / (values.length - 1) * width;
+        const y = height - value / maxValue * height;
+
+        if (lineChart) {
+          return `${valueIndex === 0 ? 'M' : 'L'}${x},${y}`;
+        }
+
+        return `${x} ${y}`;
+      });
+
+      if (!lineChart) {
+        points.push(`${width} ${height} 0 ${height}`);
+      }
+
+      data.push({
+        label,
+        points: points.join(' '),
+        color
+      });
+    });
+    return data.reverse();
+  };
+
+  const getVerticalLines = () => {
+    const lines = [];
+
+    if (!datasets.length) {
+      return lines;
+    }
+
+    const values = datasets[0].values;
+    values.forEach((value, valueIndex) => {
+      const x = valueIndex / (values.length - 1) * width;
+      lines.push(x);
+    });
+    return lines;
+  };
+
+  const toggleDataset = index => {
+    if (!toggleDatasets) return;
+
+    if (hiddenDatasets.includes(index)) {
+      hiddenDatasets.splice(hiddenDatasets.indexOf(index), 1);
+    } else {
+      hiddenDatasets.push(index);
+    }
+
+    setHiddenDatasets([...hiddenDatasets]);
+  };
+
+  const formatAxisLabel = label => {
+    if (formatAxisLabelProp) return formatAxisLabelProp(label);
+    return label;
+  };
+
+  const formatLegendLabel = label => {
+    if (formatLegendLabelProp) return formatLegendLabelProp(label);
+    return label;
+  };
+
+  const calcLinesOffsets = () => {
+    const lines = svgElRef.current.querySelectorAll('line');
+    linesOffsets.current = [];
+
+    for (let i = 0; i < lines.length; i += 1) {
+      linesOffsets.current.push(lines[i].getBoundingClientRect().left);
+    }
+  };
+
+  const formatTooltip = () => {
+    if (currentIndex === null) return '';
+    let total = 0;
+    const currentValues = datasets.filter((dataset, index) => !hiddenDatasets.includes(index)).map(dataset => ({
+      color: dataset.color,
+      label: dataset.label,
+      value: dataset.values[currentIndex]
+    }));
+    currentValues.forEach(dataset => {
+      total += dataset.value;
+    });
+
+    if (formatTooltipProp) {
+      return formatTooltipProp({
+        index: currentIndex,
+        total,
+        datasets: currentValues
+      });
+    }
+
+    let labelText = formatTooltipAxisLabel ? formatTooltipAxisLabel(axisLabels[currentIndex]) : formatAxisLabel(axisLabels[currentIndex]);
+    if (!labelText) labelText = '';
+    const totalText = formatTooltipTotal ? formatTooltipTotal(total) : total; // prettier-ignore
+
+    const datasetsText = currentValues.length > 0 ? `
+      <ul class="area-chart-tooltip-list">
+        ${currentValues.map(({
+      label,
+      color,
+      value
+    }) => {
+      const valueText = formatTooltipDataset ? formatTooltipDataset(label, value, color) : `${label}: ${value}`;
+      return `
+              <li><span style="background-color: ${color};"></span>${valueText}</li>
+            `;
+    }).join('')}
+      </ul>` : ''; // prettier-ignore
+
+    return `
+      <div class="area-chart-tooltip-label">${labelText}</div>
+      <div class="area-chart-tooltip-total">${totalText}</div>
+      ${datasetsText}
+    `;
+  };
+
+  const setTooltip = () => {
+    if (!tooltip) return;
+    const hasVisibleDataSets = datasets.filter((dataset, index) => !hiddenDatasets.includes(index)).length > 0;
+
+    if (!hasVisibleDataSets) {
+      if (f7Tooltip.current && f7Tooltip.current.hide) f7Tooltip.current.hide();
+      return;
+    }
+
+    if (currentIndex !== null && !f7Tooltip.current) {
+      f7Tooltip.current = f7.tooltip.create({
+        trigger: 'manual',
+        containerEl: elRef.current,
+        targetEl: svgElRef.current.querySelector(`line[data-index="${currentIndex}"]`),
+        text: formatTooltip(),
+        cssClass: 'area-chart-tooltip'
+      });
+
+      if (f7Tooltip.current && f7Tooltip.current.show) {
+        f7Tooltip.current.show();
+      }
+
+      return;
+    }
+
+    if (!f7Tooltip.current || !f7Tooltip.current.hide || !f7Tooltip.current.show) {
+      return;
+    }
+
+    if (currentIndex !== null) {
+      f7Tooltip.current.setText(formatTooltip());
+      f7Tooltip.current.setTargetEl(svgElRef.current.querySelector(`line[data-index="${currentIndex}"]`));
+      f7Tooltip.current.show();
+    } else {
+      f7Tooltip.current.hide();
+    }
+  };
+
+  const onMouseEnter = () => {
+    calcLinesOffsets();
+  };
+
+  const onMouseMove = e => {
+    if (!linesOffsets.current) {
+      calcLinesOffsets();
+    }
+
+    let currentLeft = e.pageX;
+    if (typeof currentLeft === 'undefined') currentLeft = 0;
+    const distances = linesOffsets.current.map(left => Math.abs(currentLeft - left));
+    const minDistance = Math.min(...distances);
+    const closestIndex = distances.indexOf(minDistance);
+    setCurrentIndex(closestIndex);
+  };
+
+  const onMouseLeave = () => {
+    setCurrentIndex(null);
+  };
+
+  const attachEvents = () => {
+    if (!svgElRef.current) return;
+    svgElRef.current.addEventListener('mouseenter', onMouseEnter);
+    svgElRef.current.addEventListener('mousemove', onMouseMove);
+    svgElRef.current.addEventListener('mouseleave', onMouseLeave);
+  };
+
+  const detachEvents = () => {
+    if (!svgElRef.current) return;
+    svgElRef.current.removeEventListener('mouseenter', onMouseEnter);
+    svgElRef.current.removeEventListener('mousemove', onMouseMove);
+    svgElRef.current.removeEventListener('mouseleave', onMouseLeave);
+  };
+
+  useEffect(() => {
+    if (previousIndex.current === currentIndex) return;
+    previousIndex.current = currentIndex;
+    emit(props, 'select', currentIndex);
+    setTooltip();
+  }, [currentIndex]);
+  useEffect(() => {
+    attachEvents();
+    return detachEvents;
+  });
+  useEffect(() => {
+    return () => {
+      if (f7Tooltip.current && f7Tooltip.current.destroy) {
+        f7Tooltip.current.destroy();
+      }
+
+      f7Tooltip.current = null;
+    };
+  }, []);
+  const classes = classNames('area-chart', className);
+  const chartData = getChartData();
+  const verticalLines = getVerticalLines();
+  const visibleLegends = getVisibleLegends();
+  const LegendItemTag = toggleDatasets ? 'button' : 'span';
+  const ChartTag = lineChart ? 'path' : 'polygon';
+  return /*#__PURE__*/React.createElement("div", _extends({
+    id: id,
+    style: style,
+    className: classes,
+    ref: elRef
+  }, extraAttrs), /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height,
+    viewBox: `0 0 ${width} ${height}`,
+    preserveAspectRatio: "none",
+    ref: svgElRef
+  }, chartData.map((data, index) => /*#__PURE__*/React.createElement(ChartTag, {
+    key: `${ChartTag}-${index}`,
+    fill: lineChart ? undefined : data.color,
+    stroke: lineChart ? data.color : undefined,
+    fillRule: "evenodd",
+    points: lineChart ? undefined : data.points,
+    d: lineChart ? data.points : undefined
+  })), verticalLines.map((line, index) => /*#__PURE__*/React.createElement("line", {
+    key: `line-${index}`,
+    "data-index": index,
+    fill: "#000",
+    x1: line,
+    y1: 0,
+    x2: line,
+    y2: height,
+    className: classNames({
+      'area-chart-current-line': currentIndex === index
+    })
+  }))), axis && /*#__PURE__*/React.createElement("div", {
+    className: "area-chart-axis"
+  }, axisLabels.map((label, index) => /*#__PURE__*/React.createElement("span", {
+    key: index
+  }, visibleLegends.includes(label) && /*#__PURE__*/React.createElement("span", null, formatAxisLabel(label))))), legend && /*#__PURE__*/React.createElement("div", {
+    className: "area-chart-legend"
+  }, datasets.map((dataset, index) => /*#__PURE__*/React.createElement(LegendItemTag, {
+    key: index,
+    className: classNames('area-chart-legend-item', {
+      'area-chart-legend-item-hidden': hiddenDatasets.includes(index),
+      'area-chart-legend-button': toggleDatasets
+    }),
+    type: toggleDatasets ? 'button' : undefined,
+    onClick: () => toggleDataset(index)
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      backgroundColor: dataset.color
+    }
+  }), formatLegendLabel(dataset.label)))), children);
+});
+AreaChart.displayName = 'f7-area-chart';
+export default AreaChart;

package/{esm/components → components}/badge.js

@@ -1,29 +1,29 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { classNames, getExtraAttrs } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import { useTooltip } from '../shared/use-tooltip';
+import { classNames, getExtraAttrs } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+import { useTooltip } from '../shared/use-tooltip.js';
 
 /* dts-instance
 f7Tooltip: Tooltip.Tooltip
 */
 
 
-var Badge = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      children = props.children;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
+const Badge = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
   useTooltip(elRef, props);
-  var classes = classNames(className, 'badge', colorClasses(props));
+  const classes = classNames(className, 'badge', colorClasses(props));
   return /*#__PURE__*/React.createElement("span", _extends({
     id: id,
     style: style,

package/{esm/components → components}/block-footer.js

@@ -1,22 +1,22 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { classNames, getExtraAttrs } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
+import { classNames, getExtraAttrs } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
 
-var BlockFooter = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      children = props.children;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
-  var classes = classNames(className, 'block-footer', colorClasses(props));
+const BlockFooter = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+  const classes = classNames(className, 'block-footer', colorClasses(props));
   return /*#__PURE__*/React.createElement("div", _extends({
     id: id,
     style: style,

package/{esm/components → components}/block-header.js

@@ -1,22 +1,22 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { classNames, getExtraAttrs } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
+import { classNames, getExtraAttrs } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
 
-var BlockHeader = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      children = props.children;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
-  var classes = classNames(className, 'block-header', colorClasses(props));
+const BlockHeader = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+  const classes = classNames(className, 'block-header', colorClasses(props));
   return /*#__PURE__*/React.createElement("div", _extends({
     id: id,
     style: style,

package/{esm/components → components}/block-title.js

@@ -1,24 +1,24 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { classNames, getExtraAttrs } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
+import { classNames, getExtraAttrs } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
 
-var BlockTitle = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      children = props.children,
-      large = props.large,
-      medium = props.medium;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
-  var classes = classNames(className, 'block-title', {
+const BlockTitle = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children,
+    large,
+    medium
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+  const classes = classNames(className, 'block-title', {
     'block-title-large': large,
     'block-title-medium': medium
   }, colorClasses(props));

package/components/block.js

@@ -0,0 +1,63 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+import { classNames, getExtraAttrs } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+import { useTab } from '../shared/use-tab.js';
+
+const Block = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    inset,
+    xsmallInset,
+    smallInset,
+    mediumInset,
+    largeInset,
+    xlargeInset,
+    strong,
+    accordionList,
+    accordionOpposite,
+    tabs,
+    tab,
+    tabActive,
+    noHairlines,
+    noHairlinesIos,
+    noHairlinesMd,
+    noHairlinesAurora,
+    id,
+    style,
+    children
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+  useTab(elRef, props);
+  const classes = classNames(className, 'block', {
+    inset,
+    'xsmall-inset': xsmallInset,
+    'small-inset': smallInset,
+    'medium-inset': mediumInset,
+    'large-inset': largeInset,
+    'xlarge-inset': xlargeInset,
+    'block-strong': strong,
+    'accordion-list': accordionList,
+    'accordion-opposite': accordionOpposite,
+    tabs,
+    tab,
+    'tab-active': tabActive,
+    'no-hairlines': noHairlines,
+    'no-hairlines-md': noHairlinesMd,
+    'no-hairlines-ios': noHairlinesIos,
+    'no-hairlines-aurora': noHairlinesAurora
+  }, colorClasses(props));
+  return /*#__PURE__*/React.createElement("div", _extends({
+    id: id,
+    style: style,
+    className: classes,
+    ref: elRef
+  }, extraAttrs), children);
+});
+Block.displayName = 'f7-block';
+export default Block;

package/components/breadcrumbs-collapsed.d.ts

@@ -0,0 +1,16 @@
+
+import * as React from 'react';
+
+
+interface BreadcrumbsCollapsedProps {
+  slot?: string;
+  id?: string | number;
+  className?: string;
+  style?: React.CSSProperties;
+  onClick ?: (event?: any) => void;
+  ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+}
+declare const BreadcrumbsCollapsed: React.FunctionComponent<BreadcrumbsCollapsedProps>;
+
+export default BreadcrumbsCollapsed;
+  

package/components/breadcrumbs-collapsed.js

@@ -0,0 +1,32 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
+
+const BreadcrumbsCollapsed = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+
+  const onClick = e => {
+    emit(props, 'click', e);
+  };
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classNames('breadcrumbs-collapsed', className),
+    ref: elRef,
+    id: id,
+    style: style,
+    onClick: onClick
+  }, extraAttrs), /*#__PURE__*/React.createElement("span", null), children);
+});
+BreadcrumbsCollapsed.displayName = 'f7-breadcrumbs-collapsed';
+export default BreadcrumbsCollapsed;

package/components/breadcrumbs-item.d.ts

@@ -0,0 +1,17 @@
+
+import * as React from 'react';
+
+
+interface BreadcrumbsItemProps {
+  slot?: string;
+  id?: string | number;
+  className?: string;
+  style?: React.CSSProperties;
+  onClick ?: (event?: any) => void;
+  active?: boolean;
+  ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+}
+declare const BreadcrumbsItem: React.FunctionComponent<BreadcrumbsItemProps>;
+
+export default BreadcrumbsItem;
+