@insync-stageplayer/measurements 0.4.8 → 0.4.13

package/lib/components/MeasurementsTable/ColorCell.js

@@ -1,64 +1,65 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-/**
- * Contains components to render a ColorCell inside the MeasurementsTable.
- */
-import React, { useRef, useState, useCallback, Suspense } from "react";
-import { Popout, IndeterminateLoadingIndicator, } from "@insync-stageplayer/ui-components";
-import styled from "styled-components";
-import { useClickAway, useDebounce } from "react-use";
-/**
- * A lazily loaded component. The ColorPicker uses an external library which is quite big.
- * So we want to use React.lazy so that we can split up the code in webpack.
- */
-const LoadingColorPicker = React.lazy(() => import("./ColorPicker"));
-/**
- * Will display a loading indicator while we're lazily loading ColorPicker.
- * @param props
- * @returns
- */
-const LoadableColorPicker = (props) => {
-    return (React.createElement(Suspense, { fallback: React.createElement(IndeterminateLoadingIndicator, null, "Loading...") },
-        React.createElement(LoadingColorPicker, Object.assign({}, props))));
-};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/**
+ * Contains components to render a ColorCell inside the MeasurementsTable.
+ */
+import React, { useRef, useState, useCallback, Suspense } from "react";
+import { Popout, IndeterminateLoadingIndicator, } from "@insync-stageplayer/ui-components";
+import styled from "styled-components";
+import useClickAway from "react-use/lib/useClickAway";
+import useDebounce from "react-use/lib/useDebounce";
+/**
+ * A lazily loaded component. The ColorPicker uses an external library which is quite big.
+ * So we want to use React.lazy so that we can split up the code in webpack.
+ */
+const LoadingColorPicker = React.lazy(() => import("./ColorPicker"));
+/**
+ * Will display a loading indicator while we're lazily loading ColorPicker.
+ * @param props
+ * @returns
+ */
+const LoadableColorPicker = (props) => {
+    return (React.createElement(Suspense, { fallback: React.createElement(IndeterminateLoadingIndicator, null, "Loading...") },
+        React.createElement(LoadingColorPicker, Object.assign({}, props))));
+};
 const StyledDiv = styled.div `
   height: 1em;
   width: 1em;
   border-radius: 0.2em;
   cursor: pointer;
   background-color: ${(props) => props.color ? props.color : props.theme.colors.action.active};
-`;
-/**
- * Displays a color input inside MeasurementsTable. Will display a color picker when clicked.
- * @param props
- * @returns
- */
-export const ColorCell = (props) => {
-    const { color, onChange, onChangeColorPickerVisibility, showColorPicker } = props, rest = __rest(props, ["color", "onChange", "onChangeColorPickerVisibility", "showColorPicker"]);
-    const pickerRef = useRef(null);
-    const [changedColor, setChangedColor] = useState(undefined);
-    const handleColorChange = useCallback((v) => {
-        setChangedColor(v.hex);
-    }, []);
-    useClickAway(pickerRef, () => {
-        onChangeColorPickerVisibility(false);
-    });
-    // Debounce the onChange callback, otherwise might result in many unneccesary rerenders.
-    useDebounce(() => {
-        if (changedColor && onChange) {
-            onChange && onChange(changedColor);
-        }
-    }, 250, [changedColor]);
-    return (React.createElement(Popout, { content: React.createElement("div", { ref: pickerRef },
-            React.createElement(LoadableColorPicker, { onChange: handleColorChange, disableAlpha: true, color: changedColor || color })), visible: showColorPicker }, ({ ref: popoutRef }) => (React.createElement(StyledDiv, Object.assign({ ref: popoutRef, color: changedColor || color, tabIndex: 0, role: "button", "aria-pressed": "false", onFocus: () => onChangeColorPickerVisibility(true) }, rest)))));
-};
+`;
+/**
+ * Displays a color input inside MeasurementsTable. Will display a color picker when clicked.
+ * @param props
+ * @returns
+ */
+export const ColorCell = (props) => {
+    const { color, onChange, onChangeColorPickerVisibility, showColorPicker } = props, rest = __rest(props, ["color", "onChange", "onChangeColorPickerVisibility", "showColorPicker"]);
+    const pickerRef = useRef(null);
+    const [changedColor, setChangedColor] = useState(undefined);
+    const handleColorChange = useCallback((v) => {
+        setChangedColor(v.hex);
+    }, []);
+    useClickAway(pickerRef, () => {
+        onChangeColorPickerVisibility(false);
+    });
+    // Debounce the onChange callback, otherwise might result in many unneccesary rerenders.
+    useDebounce(() => {
+        if (changedColor && onChange) {
+            onChange && onChange(changedColor);
+        }
+    }, 250, [changedColor]);
+    return (React.createElement(Popout, { content: React.createElement("div", { ref: pickerRef },
+            React.createElement(LoadableColorPicker, { onChange: handleColorChange, disableAlpha: true, color: changedColor || color })), visible: showColorPicker }, ({ ref: popoutRef }) => (React.createElement(StyledDiv, Object.assign({ ref: popoutRef, color: changedColor || color, tabIndex: 0, role: "button", "aria-pressed": "false", onFocus: () => onChangeColorPickerVisibility(true) }, rest)))));
+};
 //# sourceMappingURL=ColorCell.js.map

package/lib/components/MeasurementsTable/ColorCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorCell.js","sourceRoot":"","sources":["../../../src/components/MeasurementsTable/ColorCell.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,EACL,MAAM,EACN,6BAA6B,GAC9B,MAAM,mCAAmC,CAAC;AAC3C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAEtD;;;GAGG;AACH,MAAM,kBAAkB,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC;AAErE;;;;GAIG;AACH,MAAM,mBAAmB,GAAG,CAC1B,KAAsD,EACtD,EAAE;IACF,OAAO,CACL,oBAAC,QAAQ,IACP,QAAQ,EACN,oBAAC,6BAA6B,qBAEE;QAGlC,oBAAC,kBAAkB,oBAAK,KAAK,EAAI,CACxB,CACZ,CAAC;AACJ,CAAC,CAAC;AAqBF,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAoB;;;;;sBAK1B,CAAC,KAAK,EAAE,EAAE,CAC5B,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM;CAC/D,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IACjD,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,6BAA6B,EAC7B,eAAe,KAEb,KAAK,EADJ,IAAI,UACL,KAAK,EANH,yEAML,CAAQ,CAAC;IACV,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GACnC,QAAQ,CAAqB,SAAS,CAAC,CAAC;IAE1C,MAAM,iBAAiB,GAAG,WAAW,CAAC,CAAC,CAAc,EAAE,EAAE;QACvD,eAAe,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;IACzB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,YAAY,CAAC,SAAS,EAAE,GAAG,EAAE;QAC3B,6BAA6B,CAAC,KAAK,CAAC,CAAC;IACvC,CAAC,CAAC,CAAC;IAEH,wFAAwF;IACxF,WAAW,CACT,GAAG,EAAE;QACH,IAAI,YAAY,IAAI,QAAQ,EAAE;YAC5B,QAAQ,IAAI,QAAQ,CAAC,YAAY,CAAC,CAAC;SACpC;IACH,CAAC,EACD,GAAG,EACH,CAAC,YAAY,CAAC,CACf,CAAC;IAEF,OAAO,CACL,oBAAC,MAAM,IACL,OAAO,EACL,6BAAK,GAAG,EAAE,SAAS;YACjB,oBAAC,mBAAmB,IAClB,QAAQ,EAAE,iBAAiB,EAC3B,YAAY,QACZ,KAAK,EAAE,YAAY,IAAI,KAAK,GAC5B,CACE,EAER,OAAO,EAAE,eAAe,IAEvB,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,EAAe,EAAE,CAAC,CACpC,oBAAC,SAAS,kBACR,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,YAAY,IAAI,KAAK,EAC5B,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,kBACA,OAAO,EACpB,OAAO,EAAE,GAAS,EAAE,CAAC,6BAA6B,CAAC,IAAI,CAAC,IACpD,IAAI,EACR,CACH,CACM,CACV,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"ColorCell.js","sourceRoot":"","sources":["../../../src/components/MeasurementsTable/ColorCell.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,EACL,MAAM,EACN,6BAA6B,GAC9B,MAAM,mCAAmC,CAAC;AAC3C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,YAAY,MAAM,4BAA4B,CAAC;AACtD,OAAO,WAAW,MAAM,2BAA2B,CAAC;AAEpD;;;GAGG;AACH,MAAM,kBAAkB,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC;AAErE;;;;GAIG;AACH,MAAM,mBAAmB,GAAG,CAC1B,KAAsD,EACtD,EAAE;IACF,OAAO,CACL,oBAAC,QAAQ,IACP,QAAQ,EACN,oBAAC,6BAA6B,qBAEE;QAGlC,oBAAC,kBAAkB,oBAAK,KAAK,EAAI,CACxB,CACZ,CAAC;AACJ,CAAC,CAAC;AAqBF,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAoB;;;;;sBAK1B,CAAC,KAAK,EAAE,EAAE,CAC5B,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM;CAC/D,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IACjD,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,6BAA6B,EAC7B,eAAe,KAEb,KAAK,EADJ,IAAI,UACL,KAAK,EANH,yEAML,CAAQ,CAAC;IACV,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GACnC,QAAQ,CAAqB,SAAS,CAAC,CAAC;IAE1C,MAAM,iBAAiB,GAAG,WAAW,CAAC,CAAC,CAAc,EAAE,EAAE;QACvD,eAAe,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;IACzB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,YAAY,CAAC,SAAS,EAAE,GAAG,EAAE;QAC3B,6BAA6B,CAAC,KAAK,CAAC,CAAC;IACvC,CAAC,CAAC,CAAC;IAEH,wFAAwF;IACxF,WAAW,CACT,GAAG,EAAE;QACH,IAAI,YAAY,IAAI,QAAQ,EAAE;YAC5B,QAAQ,IAAI,QAAQ,CAAC,YAAY,CAAC,CAAC;SACpC;IACH,CAAC,EACD,GAAG,EACH,CAAC,YAAY,CAAC,CACf,CAAC;IAEF,OAAO,CACL,oBAAC,MAAM,IACL,OAAO,EACL,6BAAK,GAAG,EAAE,SAAS;YACjB,oBAAC,mBAAmB,IAClB,QAAQ,EAAE,iBAAiB,EAC3B,YAAY,QACZ,KAAK,EAAE,YAAY,IAAI,KAAK,GAC5B,CACE,EAER,OAAO,EAAE,eAAe,IAEvB,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,EAAe,EAAE,CAAC,CACpC,oBAAC,SAAS,kBACR,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,YAAY,IAAI,KAAK,EAC5B,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,kBACA,OAAO,EACpB,OAAO,EAAE,GAAS,EAAE,CAAC,6BAA6B,CAAC,IAAI,CAAC,IACpD,IAAI,EACR,CACH,CACM,CACV,CAAC;AACJ,CAAC,CAAC"}

package/lib/components/MeasurementsTable/ColorPicker.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-declare const ColorPicker: (props: any) => JSX.Element;
-export default ColorPicker;
+/// <reference types="react" />
+declare const ColorPicker: (props: any) => JSX.Element;
+export default ColorPicker;
 //# sourceMappingURL=ColorPicker.d.ts.map

package/lib/components/MeasurementsTable/ColorPicker.js

@@ -1,11 +1,11 @@
-/**
- * A wrapper around react-color library.
- */
-import React from "react";
-import { ChromePicker } from "react-color";
-const ColorPicker = (props) => {
-    return (React.createElement("div", { style: { zIndex: 9999 } },
-        React.createElement(ChromePicker, Object.assign({}, props))));
-};
-export default ColorPicker;
+/**
+ * A wrapper around react-color library.
+ */
+import React from "react";
+import { ChromePicker } from "react-color";
+const ColorPicker = (props) => {
+    return (React.createElement("div", { style: { zIndex: 9999 } },
+        React.createElement(ChromePicker, Object.assign({}, props))));
+};
+export default ColorPicker;
 //# sourceMappingURL=ColorPicker.js.map

package/lib/components/MeasurementsTable/ColumnResizer.d.ts

@@ -1,5 +1,5 @@
-import { TableResizerProps } from "react-table";
-export declare const ColumnResizer: import("styled-components").StyledComponent<"div", import("@insync-stageplayer/ui-components").Theme, TableResizerProps & {
-    resizing: boolean;
-}, never>;
+import { TableResizerProps } from "react-table";
+export declare const ColumnResizer: import("styled-components").StyledComponent<"div", import("@insync-stageplayer/ui-components").Theme, TableResizerProps & {
+    resizing: boolean;
+}, never>;
 //# sourceMappingURL=ColumnResizer.d.ts.map

package/lib/components/MeasurementsTable/ColumnResizer.js

@@ -1,7 +1,7 @@
-/**
- * A styled TableResizer handle.
- */
-import { styled } from "@insync-stageplayer/ui-components";
+/**
+ * A styled TableResizer handle.
+ */
+import { styled } from "@insync-stageplayer/ui-components";
 export const ColumnResizer = styled.div `
   cursor: col-resize;
   display: inline-block;
@@ -13,5 +13,5 @@ export const ColumnResizer = styled.div `
   transform: translateX(50%);
   z-index: 1;
   touch-action: none;
-`;
+`;
 //# sourceMappingURL=ColumnResizer.js.map

package/lib/components/MeasurementsTable/ColumnSorting.d.ts

@@ -1,14 +1,14 @@
-/// <reference types="react" />
-import { HeaderGroup } from "react-table";
-import { MeasurementsTypes } from "../../types";
-declare type ColumnSortingProps = {
-    column: HeaderGroup<MeasurementsTypes.Measurement>;
-};
-/**
- * Displays the current column sorting state as an arrow.
- * @param props
- * @returns
- */
-export declare const ColumnSorting: (props: ColumnSortingProps) => JSX.Element | null;
-export {};
+/// <reference types="react" />
+import { HeaderGroup } from "react-table";
+import { MeasurementsTypes } from "../../types";
+declare type ColumnSortingProps = {
+    column: HeaderGroup<MeasurementsTypes.Measurement>;
+};
+/**
+ * Displays the current column sorting state as an arrow.
+ * @param props
+ * @returns
+ */
+export declare const ColumnSorting: (props: ColumnSortingProps) => JSX.Element | null;
+export {};
 //# sourceMappingURL=ColumnSorting.d.ts.map

package/lib/components/MeasurementsTable/ColumnSorting.js

@@ -1,10 +1,10 @@
-import React from "react";
-/**
- * Displays the current column sorting state as an arrow.
- * @param props
- * @returns
- */
-export const ColumnSorting = (props) => {
-    return props.column.isSorted ? (React.createElement("span", null, props.column.isSortedDesc ? ` ↓` : ` ↑`)) : null;
-};
+import React from "react";
+/**
+ * Displays the current column sorting state as an arrow.
+ * @param props
+ * @returns
+ */
+export const ColumnSorting = (props) => {
+    return props.column.isSorted ? (React.createElement("span", null, props.column.isSortedDesc ? ` ↓` : ` ↑`)) : null;
+};
 //# sourceMappingURL=ColumnSorting.js.map

package/lib/components/MeasurementsTable/MeasurementsTable.d.ts

@@ -1,56 +1,56 @@
-/**
- * A component that displays a list of measurements. Provides searching/sorting/selecting capabilities.
- *
- * Also allows a user to change the colors of measurements.
- */
-import React from "react";
-import { MeasurementsTypes } from "../..";
-import "bootstrap/dist/css/bootstrap.css";
-declare type MeasurementsTableProps = Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & {
-    /**
-     * If set to `true` only a single measurement can be selected (will render a radio instead of checkboxes).
-     */
-    single?: boolean;
-    /**
-     * The measurements we want to display in the table.
-     */
-    measurements: MeasurementsTypes.Measurement[];
-    /**
-     * The currently selected measurements (this is a controlled component).
-     */
-    selected?: string[];
-    /**
-     * The widths of the columns in percentages.
-     */
-    widths?: number[];
-    /**
-     * Callback when a measurement is selected.
-     * @param selected The selected measurements.
-     */
-    onChange?: (selected: string[]) => void;
-    /**
-     * A function that can be used to format the frequency displayed in the frequency column.
-     * @param v The raw frequency number.
-     */
-    formatFrequency?: (v: number) => string;
-    /**
-     * Callback when color of meaurement is changed.
-     */
-    onColorChange?: (id: string, color: string) => void;
-};
-/**
- * A component to render a list of measurements in a table. This table provides functionalities like:
- *
- * Please read up here https://react-table.tanstack.com/ for more information as to how this component works internally.
- *
- * - Sorting
- * - Resizable columns
- * - Changing measurement colors
- * - Searching measurements
- * - Selecting measurements
- * @param props
- * @returns
- */
-export declare const MeasurementsTable: (props: MeasurementsTableProps) => JSX.Element;
-export {};
+/**
+ * A component that displays a list of measurements. Provides searching/sorting/selecting capabilities.
+ *
+ * Also allows a user to change the colors of measurements.
+ */
+import React from "react";
+import { MeasurementsTypes } from "../..";
+import "bootstrap/dist/css/bootstrap.css";
+declare type MeasurementsTableProps = Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & {
+    /**
+     * If set to `true` only a single measurement can be selected (will render a radio instead of checkboxes).
+     */
+    single?: boolean;
+    /**
+     * The measurements we want to display in the table.
+     */
+    measurements: MeasurementsTypes.Measurement[];
+    /**
+     * The currently selected measurements (this is a controlled component).
+     */
+    selected?: string[];
+    /**
+     * The widths of the columns in percentages.
+     */
+    widths?: number[];
+    /**
+     * Callback when a measurement is selected.
+     * @param selected The selected measurements.
+     */
+    onChange?: (selected: string[]) => void;
+    /**
+     * A function that can be used to format the frequency displayed in the frequency column.
+     * @param v The raw frequency number.
+     */
+    formatFrequency?: (v: number) => string;
+    /**
+     * Callback when color of meaurement is changed.
+     */
+    onColorChange?: (id: string, color: string) => void;
+};
+/**
+ * A component to render a list of measurements in a table. This table provides functionalities like:
+ *
+ * Please read up here https://react-table.tanstack.com/ for more information as to how this component works internally.
+ *
+ * - Sorting
+ * - Resizable columns
+ * - Changing measurement colors
+ * - Searching measurements
+ * - Selecting measurements
+ * @param props
+ * @returns
+ */
+export declare const MeasurementsTable: (props: MeasurementsTableProps) => JSX.Element;
+export {};
 //# sourceMappingURL=MeasurementsTable.d.ts.map