@adaptabletools/adaptable 23.0.0-canary.3 → 23.0.0-canary.5

package/src/View/AdaptableComputedCSSVarsContext.js

@@ -1,29 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { CSSNumericVariableWatch } from '../components/Select/CSSNumericVariableWatch';
-import debounce from '../Utilities/utils/debounce';
-import { useMemo } from 'react';
-const computedCSSVarNames = [
-    '--ab-cmp-select-menu__max-width',
-    '--ab-cmp-select-menu__min-width',
-    '--ab-cmp-select-menu__max-height',
-];
-const defaultValues = Object.fromEntries(computedCSSVarNames.map((varName) => [varName, 0]));
-export const AdaptableComputedCSSVarsContext = React.createContext(defaultValues);
-export const WithAdaptableComputedCSSVars = ({ children }) => {
-    const [computedCSSVars, doSetComputedCSSVars] = React.useState(defaultValues);
-    const setComputedCSSVars = useMemo(() => {
-        return debounce(doSetComputedCSSVars, 300, { leading: false, trailing: true });
-    }, [doSetComputedCSSVars]);
-    return (_jsxs(AdaptableComputedCSSVarsContext.Provider, { value: computedCSSVars, children: [children, computedCSSVarNames.map((varName) => (_jsx(CSSNumericVariableWatch, { varName: varName, onChange: (value) => {
-                    setComputedCSSVars((prev) => ({ ...prev, [varName]: value }));
-                } }, varName)))] }));
-};
-export const useAdaptableComputedCSSVars = () => {
-    const context = React.useContext(AdaptableComputedCSSVarsContext);
-    return context;
-};
-export const useAdaptableComputedCSSVar = (varName) => {
-    const context = React.useContext(AdaptableComputedCSSVarsContext);
-    return context?.[varName];
-};

package/src/View/Layout/Wizard/sections/ParameterizedAggFuncPicker.d.ts

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import { AdaptableColumn } from '../../../../AdaptableState/Common/AdaptableColumn';
-import { AggregationColumnValue, TableAggregationColumns } from '../../../../AdaptableState/Common/AggregationColumns';
-export declare const ParameterizedAggFuncPicker: React.FunctionComponent<{
-    column: AdaptableColumn;
-    aggValue?: AggregationColumnValue;
-    aggregationColumnsMap: Record<string, string>;
-    numberColumns: AdaptableColumn[];
-    aggregationEntries: TableAggregationColumns;
-    onChangeEntries: (entries: TableAggregationColumns) => void;
-    availableAggregationFunctions?: string[];
-}>;

package/src/View/Layout/Wizard/sections/ParameterizedAggFuncPicker.js

@@ -1,43 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import DropdownButton from '../../../../components/DropdownButton';
-import { getParameterizedAggregationDefinitionByAgGridName } from '../../../../Aggregation/ParameterizedAggregationRegistry';
-import { formatParameterizedArgSelectionLabel, getAdaptableAggFuncNamesForColumn, getParameterizedArgColumnLabel, resolveAggFuncValueFromWizardSelection, upsertColumnAggregationEntry, } from '../../../../Aggregation/parameterizedAggregationWizardHelpers';
-import { useAdaptable } from '../../../AdaptableContext';
-import { Box, Flex } from '../../../../components/Flex';
-export const ParameterizedAggFuncPicker = (props) => {
-    const adaptable = useAdaptable();
-    const adaptableAggFunctions = getAdaptableAggFuncNamesForColumn(props.column);
-    const availableAggregationFunctions = props.availableAggregationFunctions ?? props.column.availableAggregationFunctions ?? [];
-    const aggOptions = [
-        ...new Set([...availableAggregationFunctions, ...adaptableAggFunctions]),
-    ].map((fnName) => ({
-        label: fnName,
-        onClick: () => {
-            const aggFuncValue = resolveAggFuncValueFromWizardSelection(fnName);
-            props.onChangeEntries(upsertColumnAggregationEntry(props.aggregationEntries, props.column.columnId, aggFuncValue));
-        },
-    }));
-    const currentAggFnName = props.aggregationColumnsMap[props.column.columnId];
-    const parameterizedDefinition = currentAggFnName
-        ? getParameterizedAggregationDefinitionByAgGridName(currentAggFnName)
-        : undefined;
-    const numericColumnsOptions = props.numberColumns
-        .filter((col) => col.columnId !== props.column.columnId)
-        .map((col) => {
-        return {
-            label: col.friendlyName,
-            onClick: () => {
-                const definition = parameterizedDefinition;
-                if (!definition?.createDefinition) {
-                    return;
-                }
-                props.onChangeEntries(upsertColumnAggregationEntry(props.aggregationEntries, props.column.columnId, definition.createDefinition(col.columnId)));
-            },
-        };
-    });
-    const argSelectionLabel = formatParameterizedArgSelectionLabel(adaptable.api, props.column.columnId, props.aggValue);
-    if (!props.aggValue) {
-        return null;
-    }
-    return (_jsxs(_Fragment, { children: [_jsx(DropdownButton, { columns: ['label'], items: aggOptions, className: "twa:ml-2", children: currentAggFnName }), parameterizedDefinition && (_jsxs(Flex, { className: "twa:bg-primary twa:ml-3", alignItems: "center", children: [_jsx(Box, { children: getParameterizedArgColumnLabel(currentAggFnName) }), ' ', _jsx(DropdownButton, { columns: ['label'], items: numericColumnsOptions, className: "twa:ml-2", children: argSelectionLabel })] }))] }));
-};

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnBadgeSettings.d.ts

@@ -1,5 +0,0 @@
-import * as React from 'react';
-import { StyledColumn } from '../../../../../types';
-export declare const StyledColumnBadgeSettings: React.FunctionComponent<React.PropsWithChildren<{
-    data: StyledColumn;
-}>>;

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnBadgeSettings.js

@@ -1,28 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Tag } from '../../../../../components/Tag';
-import { useAdaptable } from '../../../../AdaptableContext';
-import { Box, Flex } from '../../../../../components/Flex';
-export const StyledColumnBadgeSettings = ({ data }) => {
-    const adaptable = useAdaptable();
-    const badgeStyle = data.BadgeStyle;
-    if (!badgeStyle || !badgeStyle.Badges || badgeStyle.Badges.length === 0) {
-        return _jsx("div", { children: "No Badges Defined" });
-    }
-    const density = badgeStyle.Density ?? 'Normal';
-    const spacing = typeof badgeStyle.Spacing === 'number' ? badgeStyle.Spacing : null;
-    const overflowMode = badgeStyle.OverflowMode ?? 'Truncate';
-    return (_jsxs(Flex, { flexDirection: "column", children: [_jsxs(Flex, { className: "twa:my-1 twa:flex-wrap twa:gap-2", children: [_jsxs(Tag, { children: ["Density: ", density] }), spacing != null && _jsxs(Tag, { children: ["Spacing: ", spacing, "px"] }), _jsxs(Tag, { children: ["Overflow: ", overflowMode] })] }), badgeStyle.Badges.map((badge, index) => {
-                let ruleString = 'No Rule';
-                if (badge.Predicate) {
-                    ruleString = adaptable.api.predicateApi.predicateToString(badge.Predicate);
-                }
-                if (badge.Expression) {
-                    ruleString = badge.Expression.BooleanExpression;
-                }
-                const iconOnly = badge.Icon && badge.IconOnly;
-                const hasIconPosition = badge.Icon && badge.IconPosition;
-                const iconPosition = hasIconPosition ? 'Icon Position: ' + badge.IconPosition : '';
-                const shape = badge.Shape;
-                return (_jsxs(Box, { className: "twa:my-2", children: [_jsx(Tag, { children: ruleString }), shape && _jsx(Tag, { className: "twa:ml-2", children: `Shape: ${shape}` }), iconOnly && _jsx(Tag, { className: "twa:ml-2", children: 'Icon Only' }), hasIconPosition && _jsx(Tag, { className: "twa:ml-2", children: iconPosition }), typeof badge.IconGap === 'number' && (_jsx(Tag, { className: "twa:ml-2", children: `Icon Gap: ${badge.IconGap}px` }))] }, index));
-            })] }));
-};

package/src/View/Theme/VariantSelector.d.ts

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import { AdaptableTheme } from '../../types';
-export interface VariantSelectorProps {
-    theme: AdaptableTheme;
-    onChange: (variant: AdaptableTheme['Variant'] | null) => void;
-    disabled?: boolean;
-}
-export declare const VariantSelector: React.FunctionComponent<VariantSelectorProps>;

package/src/View/Theme/VariantSelector.js

@@ -1,20 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import DropdownButton from '../../components/DropdownButton';
-import SimpleButton from '../../components/SimpleButton';
-import { useAdaptable } from '../AdaptableContext';
-import { OS_THEME } from '../../Utilities/Constants/GeneralConstants';
-export const VariantSelector = (props) => {
-    const adaptable = useAdaptable();
-    const systemTemes = adaptable.api.themeApi
-        .getSystemThemes()
-        .filter((theme) => theme.Name !== OS_THEME);
-    const options = systemTemes.map((theme) => ({
-        label: theme.Description,
-        value: theme.Name,
-        onClick: () => props.onChange(theme.Name),
-    }));
-    const label = props.theme.Variant
-        ? options.find((theme) => theme.value === props.theme.Variant)?.label
-        : 'Select a theme';
-    return (_jsxs(_Fragment, { children: [_jsx(DropdownButton, { className: "twa:mr-2", columns: ['label'], items: options, disabled: props.disabled, children: label }), _jsx(SimpleButton, { onClick: () => props.onChange(null), disabled: !props.theme.Variant || props.disabled, hidden: props.disabled, icon: "delete" })] }));
-};

package/src/components/Select/CSSNumericVariableWatch.d.ts

@@ -1,11 +0,0 @@
-import * as React from 'react';
-type CSSVariableWatcherProps = {
-    varName: string;
-    onChange: (value: number) => void;
-    allowInts?: boolean;
-};
-export declare const useCSSVariableWatch: (params: CSSVariableWatcherProps & {
-    ref: React.MutableRefObject<HTMLElement | null>;
-}) => void;
-export declare const CSSNumericVariableWatch: (props: CSSVariableWatcherProps) => React.JSX.Element;
-export {};

package/src/components/Select/CSSNumericVariableWatch.js

@@ -1,45 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import { useRef } from 'react';
-import { useResizeObserver } from '../ResizeObserver';
-const WRAPPER_STYLE = {
-    position: 'absolute',
-    pointerEvents: 'none',
-    width: 0,
-    height: 0,
-    lineHeight: 0,
-    fontSize: 0,
-    overflow: 'hidden',
-};
-export const useCSSVariableWatch = (params) => {
-    const lastValueRef = useRef(0);
-    const onResize = React.useCallback(({ height }) => {
-        if (height != null && height !== lastValueRef.current) {
-            lastValueRef.current = height;
-            params.onChange(height);
-        }
-    }, [params.onChange]);
-    useResizeObserver(params.ref, onResize, { earlyAttach: true });
-    React.useLayoutEffect(() => {
-        const value = params.ref.current.getBoundingClientRect().height;
-        if (value != null) {
-            lastValueRef.current = value;
-            return params.onChange(value);
-        }
-        else {
-            console.warn(`Specified variable ${params.varName} not found or does not have a numeric value.`);
-        }
-    }, []);
-};
-export const CSSNumericVariableWatch = (props) => {
-    const domRef = useRef(null);
-    useCSSVariableWatch({
-        ...props,
-        ref: domRef,
-    });
-    const height = props.varName.startsWith('var(') ? props.varName : `var(${props.varName})`;
-    const { allowInts = false } = props;
-    return (_jsx("div", { "data-name": "css-variable-watcher", "data-var": props.varName, style: WRAPPER_STYLE, children: _jsx("div", { ref: domRef, style: {
-                height: allowInts ? `calc(1px * ${height})` : height, // we do multiplication in order to support integer (without px) values as well
-            } }) }));
-};