@imposium-hub/components 2.11.6-0 → 2.11.7-0

package/src/components/select-field/SelectField.tsx

@@ -23,15 +23,6 @@ interface ISelectFieldProps {
     showCopy?: boolean;
     onNotification?(e): void;
     onError?(e): void;
-
-    override?: any;
-    showCopyPropIds?: boolean;
-    propKey?: string;
-    setOverride?(e): void;
-    removeOverride?(): void;
-    inventory?: any;
-    onClose?(e: boolean): void;
-    activeOverride?: string;
 }
 
 class SelectField extends React.PureComponent<ISelectFieldProps> {
@@ -77,6 +68,7 @@ class SelectField extends React.PureComponent<ISelectFieldProps> {
 
     public render() {
         const {
+            label,
             showCopy,
             options,
             value,
@@ -88,15 +80,7 @@ class SelectField extends React.PureComponent<ISelectFieldProps> {
             info,
             labelPosition,
             labelWidth,
-            disableFirst,
-            propKey,
-            override,
-            inventory,
-            setOverride,
-            removeOverride,
-            onClose,
-            showCopyPropIds,
-            activeOverride
+            disableFirst
         } = this.props;
 
         const selectValue = value === null || value === undefined ? '' : value;
@@ -163,22 +147,13 @@ class SelectField extends React.PureComponent<ISelectFieldProps> {
         return (
             <FieldWrapper
                 customClass='select-field'
-                label={this.props.label}
+                label={label}
                 tooltip={tooltip}
                 buttons={btns}
                 info={info}
                 labelPosition={labelPosition}
                 labelWidth={labelWidth}
-                width={width}
-                propKey={propKey}
-                showCopyPropIds={showCopyPropIds}
-                inventory={inventory}
-                setOverride={setOverride}
-                onClose={onClose}
-                activeOverride={activeOverride}
-                removeOverride={removeOverride}
-                override={override}
-                type='text'>
+                width={width}>
                 <select
                     value={selectValue}
                     onChange={(e) => this.onChange(e)}

package/src/constants/copy.ts

@@ -284,7 +284,3 @@ export const confirm: any = {
     no: 'No',
     cancel: 'Cancel'
 };
-
-export const fontField = {
-    fontNotFound: 'Font not found'
-};

package/src/constants/icons.tsx

@@ -74,13 +74,12 @@ import {
 import { faCircleSmall } from '@fortawesome/pro-solid-svg-icons/faCircleSmall';
 import { faClapperboardPlay } from '@fortawesome/pro-solid-svg-icons/faClapperboardPlay';
 import {
-    faBracketsCurly,
     faCloudArrowUp,
     faFileCirclePlus,
     faFilePen,
     faFilters
 } from '@fortawesome/pro-solid-svg-icons';
-import { faCircleExclamation, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
+import { faCircleExclamation } from '@fortawesome/free-solid-svg-icons';
 
 export const ICON_VIDEO = <FontAwesomeIcon icon={faVideo} />;
 
@@ -233,7 +232,3 @@ export const ICON_FILE_ERROR = <FontAwesomeIcon icon={faCircleExclamation} />;
 export const ICON_FILE_ADD = <FontAwesomeIcon icon={faFileCirclePlus} />;
 
 export const ICON_FILE_REPLACE = <FontAwesomeIcon icon={faFilePen} />;
-
-export const ICON_BRACKET_CURLY = <FontAwesomeIcon icon={faBracketsCurly} />;
-
-export const ICON_WARNING = <FontAwesomeIcon icon={faTriangleExclamation} />;

package/src/constants/variables.ts

@@ -63,19 +63,3 @@ export const RGBAtoHexA = (red, green, blue, alpha) => {
     if (a.length === 1) a = '0' + a;
     return '#' + r + g + b + a;
 };
-
-export const getOverrideHandler = (propKey, override, inventory) => {
-    const propKeys = propKey ? propKey.split('.') : [];
-
-    const getOverride = () => {
-        if (propKeys.length === 0) return undefined;
-        return propKeys.reduce((acc, key) => acc?.[key], override);
-    };
-
-    const hasOverride = getOverride();
-
-    const previewItem =
-        hasOverride && inventory[hasOverride] ? inventory[hasOverride].previewItem.src : null;
-
-    return { hasOverride, previewItem };
-};

package/src/index.ts

@@ -7,7 +7,7 @@ import Button from './components/button/Button';
 import ButtonMenu from './components/button-menu/ButtonMenu';
 import ButtonMenuItem from './components/button-menu/ButtonMenuItem';
 import Card from './components/card/Card';
-import ControlledList, { ControlListType } from './components/controlled-list/ControlledList';
+import ControlledList from './components/controlled-list/ControlledList';
 import DataTable from './components/data-table/DataTable';
 import DataTablePaginator from './components/data-table/DataTablePaginator';
 import Modal from './components/modal/Modal';
@@ -164,10 +164,6 @@ import { pushRoute, replaceRoute } from './utils/routing';
 import { ProjectDropdown } from './components/header/ProjectDropdown';
 import { openConfirmModal } from './utils/modal';
 import { ConfirmModal, IConfirmModalProps } from './components/confirm-modal/ConfirmModal';
-import TextAreaAutocomplete from './components/text-area-autocomplete/TextAreaAutocomplete';
-import IconToggle from './components/icon-toggle/IconToggle';
-import { DEFAULT_FONTS } from './constants/fonts';
-import FontField from './components/font-field/FontField';
 
 export {
     ProjectDropdown,
@@ -328,10 +324,5 @@ export {
     CopyPropIdButton,
     ConfirmModal,
     IConfirmModalProps,
-    openConfirmModal,
-    TextAreaAutocomplete,
-    ControlListType,
-    IconToggle,
-    DEFAULT_FONTS,
-    FontField
+    openConfirmModal
 };

package/src/components/config-variable-button/ConfigVariableButton.tsx

@@ -1,141 +0,0 @@
-import React, { useState, useRef } from 'react';
-import { ICON_BRACKET_CURLY } from '../../constants/icons';
-import Button from '../button/Button';
-import ImposiumDropdown from '../dropdown/Dropdown';
-import moize from 'moize';
-import VariableDropDown from '../variables-dropdown/VariableDropdown';
-import { ControlListType } from '../controlled-list/ControlledList';
-
-interface IConfigVariableButtonProps {
-    type: ControlListType;
-    icon?: any;
-    inventory: any;
-    setOverride?(e): void;
-    onClose?(e): void;
-    removeOverride?(): void;
-    activeOverride?: string;
-}
-
-const ConfigVariableButton: React.FC<IConfigVariableButtonProps> = ({
-    type,
-    inventory,
-    setOverride,
-    onClose,
-    activeOverride,
-    removeOverride,
-    icon
-}) => {
-    const [show, setShow] = useState(false);
-    const variablesButtonRef = useRef();
-
-    const close = () => {
-        setShow(!show);
-        if (onClose) {
-            onClose(!show);
-        }
-    };
-
-    const setOverrideHandler = (o) => {
-        setOverride(o);
-        close();
-    };
-
-    const removeOverrideHandler = () => {
-        removeOverride();
-        close();
-    };
-    return (
-        <>
-            <Button
-                tooltip='Configure Variables'
-                customClass={icon ? 'icon-toggle' : ''}
-                onClick={() => {
-                    close();
-                }}
-                buttonRef={variablesButtonRef}
-                size='small'
-                style='subtle'>
-                {ICON_BRACKET_CURLY}
-            </Button>
-
-            <ImposiumDropdown
-                key='variables-dropdown'
-                position='bottomleft'
-                show={show}
-                toggleRef={variablesButtonRef}
-                customClass='variables'
-                onOutsideClick={() => close()}>
-                <VariableDropDown
-                    returnVariables={show}
-                    type={type}
-                    inventory={inventory}
-                    setOverride={setOverrideHandler}
-                    removeOverride={removeOverrideHandler}
-                    activeOverride={activeOverride}
-                />
-            </ImposiumDropdown>
-        </>
-    );
-};
-
-const mGetConfigVariableButton = (
-    enabled,
-    type,
-    inventory,
-    setOverride,
-    onClose,
-    icon,
-    activeOverride,
-    removeOverride
-) => {
-    if (enabled || activeOverride !== undefined) {
-        return (
-            <ConfigVariableButton
-                type={type}
-                inventory={inventory}
-                setOverride={(o) => setOverride(o)}
-                onClose={(o) => onClose(o)}
-                icon={icon}
-                activeOverride={activeOverride}
-                removeOverride={removeOverride}
-            />
-        );
-    } else {
-        return null;
-    }
-};
-
-export const getConfigVariableButton = moize(mGetConfigVariableButton);
-
-export const fieldLabel = (
-    labelText,
-    propKey,
-    showCopyPropIds,
-    type: string,
-    inventory,
-    setOverride,
-    onClose,
-    activeOverride,
-    removeOverride,
-    icon?
-) => {
-    const label = propKey ? (
-        <span>
-            {labelText}
-            {getConfigVariableButton(
-                showCopyPropIds,
-                type,
-                inventory,
-                (o) => setOverride(o),
-                (o) => onClose(o),
-                icon,
-                activeOverride,
-                removeOverride
-            )}
-        </span>
-    ) : (
-        labelText
-    );
-
-    return label;
-};

package/src/components/font-field/FontField.tsx

@@ -1,78 +0,0 @@
-import FieldWrapper from '../field-wrapper/FieldWrapper';
-import React from 'react';
-import FontPicker from '../font-picker/FontPicker';
-import { fontField } from '../../constants/copy';
-import { DEFAULT_FONTS } from '../../constants/fonts';
-
-interface IFontFieldProps {
-    font: string;
-    availableFonts: any[];
-    apiKey: string;
-    onChange: (font: string) => void;
-    width?: string | number;
-    labelPosition?: string;
-    label?: string;
-
-    override?: any;
-    showCopyPropIds?: boolean;
-    propKey?: string;
-    setOverride?(e): void;
-    removeOverride?(): void;
-    inventory?: any;
-    onClose?(e: boolean): void;
-    activeOverride: string;
-}
-
-const FontField = (props: IFontFieldProps) => {
-    const {
-        font,
-        availableFonts,
-        apiKey,
-        onChange,
-        width,
-        labelPosition,
-        label,
-        override,
-        showCopyPropIds,
-        propKey,
-        setOverride,
-        removeOverride,
-        inventory,
-        onClose,
-        activeOverride
-    } = props;
-
-    const customAvailableFonts = availableFonts.map((asset) => asset.name);
-    const standardFonts = DEFAULT_FONTS.map((f) => f.name);
-    const availableAssets = [...standardFonts, ...customAvailableFonts].sort();
-    const fontCheck = availableAssets.includes(font);
-    const fontValue = fontCheck ? font : fontField.fontNotFound;
-
-    return (
-        <FieldWrapper
-            customClass='font-field'
-            label={label}
-            labelPosition={labelPosition}
-            width={width}
-            propKey={propKey}
-            showCopyPropIds={showCopyPropIds}
-            inventory={inventory}
-            setOverride={setOverride}
-            onClose={onClose}
-            activeOverride={activeOverride}
-            removeOverride={removeOverride}
-            override={override}
-            type='text'>
-            <FontPicker
-                apiKey={apiKey}
-                activeFontFamily={fontValue}
-                families={availableAssets}
-                defaultFonts={DEFAULT_FONTS}
-                customFonts={availableFonts}
-                onChange={onChange}
-            />
-        </FieldWrapper>
-    );
-};
-
-export default FontField;

package/src/components/icon-toggle/IconToggle.tsx

@@ -1,63 +0,0 @@
-import React from 'react';
-import { getConfigVariableButton } from '../config-variable-button/ConfigVariableButton';
-import { getOverrideHandler } from '../../constants/variables';
-
-interface IIconToggleProps {
-    selected: boolean;
-    onChange(selected: boolean): any;
-    icon: any;
-
-    override?: any;
-    showCopyPropIds?: boolean;
-    propKey?: string;
-    setOverride?(e): void;
-    removeOverride?(): void;
-    inventory?: any;
-    onClose?(e: boolean): void;
-    activeOverride?: string;
-}
-
-const IconToggle: React.FC<IIconToggleProps> = ({
-    icon,
-    selected,
-    onChange,
-    override,
-    showCopyPropIds,
-    propKey,
-    setOverride,
-    removeOverride,
-    inventory,
-    onClose,
-    activeOverride
-}) => {
-    const content = selected ? icon : null;
-
-    const { hasOverride } = getOverrideHandler(propKey, override, inventory);
-
-    const inputField = () => {
-        if (hasOverride || showCopyPropIds) {
-            return getConfigVariableButton(
-                showCopyPropIds,
-                'boolean',
-                inventory,
-                (o) => setOverride(o),
-                (o) => onClose(o),
-                icon,
-                activeOverride,
-                () => removeOverride()
-            );
-        } else {
-            return (
-                <div
-                    className='icon-toggle'
-                    onClick={() => onChange(!selected)}>
-                    {content}
-                </div>
-            );
-        }
-    };
-
-    return inputField();
-};
-
-export default IconToggle;

package/src/components/text-area-autocomplete/TextAreaAutocomplete.tsx

@@ -1,78 +0,0 @@
-import React from 'react';
-import ReactTextareaAutocomplete from '@imposium-hub/react-textarea-autocomplete';
-import FieldWrapper from '../field-wrapper/FieldWrapper';
-import Spinner from '../spinner/Spinner';
-
-interface ITextAreaAutocompleteProps {
-    options: any;
-    variables: any;
-    varsData: any;
-    variableItem: any;
-    onChange?(e: any): void;
-
-    override?: any;
-    showCopyPropIds?: boolean;
-    propKey?: string;
-    setOverride?(e): void;
-    removeOverride?(): void;
-    inventory?: any;
-    onClose?(e: boolean): void;
-    activeOverride?: string;
-}
-
-const TextAreaAutocomplete = (props: ITextAreaAutocompleteProps) => {
-    const {
-        options,
-        showCopyPropIds,
-        inventory,
-        override,
-        setOverride,
-        removeOverride,
-        onClose,
-        propKey,
-        varsData,
-        variableItem,
-        onChange,
-        activeOverride
-    } = props;
-
-    return (
-        <FieldWrapper
-            label='Content'
-            labelPosition='top'
-            customClass='text-area-field autocomplete'
-            propKey={propKey}
-            showCopyPropIds={showCopyPropIds}
-            inventory={inventory}
-            setOverride={setOverride}
-            onClose={onClose}
-            activeOverride={activeOverride}
-            removeOverride={removeOverride}
-            override={override}
-            type='textarea'>
-            <ReactTextareaAutocomplete
-                key='text-autocomplete'
-                onChange={(e) => onChange(e.target.value)}
-                value={options['content']}
-                loadingComponent={() => <Spinner />}
-                movePopupAsYouType
-                minChar={0}
-                tabOrEnter={true}
-                trigger={{
-                    '{': {
-                        dataProvider: (d) => {
-                            const filtered = varsData.filter((f) =>
-                                f.name.toLowerCase().startsWith(d)
-                            );
-                            return filtered;
-                        },
-                        component: variableItem,
-                        output: (value) => `{{${value.name}}}`
-                    }
-                }}
-            />
-        </FieldWrapper>
-    );
-};
-
-export default TextAreaAutocomplete;

package/src/components/variables-dropdown/VariableDropdown.tsx

@@ -1,98 +0,0 @@
-import React from 'react';
-import { ICON_TIMES, ICON_WARNING } from '../../constants/icons';
-import { ControlListType } from '../controlled-list/ControlledList';
-import Button from '../button/Button';
-import { renderTooltip, renderTooltipProps } from '../Tooltip';
-import { generateUUID } from '../../Util';
-
-interface IVariableDropDownProps {
-    returnVariables: boolean;
-    type: ControlListType;
-    inventory: any;
-    setOverride?(e): void;
-    removeOverride?(): void;
-    activeOverride?: string;
-}
-
-const VariableDropDown: React.FC<IVariableDropDownProps> = (props: IVariableDropDownProps) => {
-    const { returnVariables, inventory, setOverride, removeOverride, activeOverride } = props;
-
-    const type = props.type === 'textarea' ? 'text' : props.type;
-    const include = type ? [type.toLowerCase()] : [];
-
-    const variableOptions = [];
-
-    if (returnVariables) {
-        for (const key in inventory) {
-            if (inventory.hasOwnProperty(key)) {
-                const variable = inventory[key];
-
-                if (include.indexOf(variable.type.toLowerCase()) !== -1 || include.length === 0) {
-                    variableOptions.push(variable);
-                }
-            }
-        }
-
-        const warningTooltipId = `imposium-button-${generateUUID()}`;
-        const warning = (
-            <div
-                className='warning'
-                {...renderTooltipProps(warningTooltipId, 'No variable preview')}>
-                {ICON_WARNING}
-                {renderTooltip(warningTooltipId, 'No variable preview')}
-            </div>
-        );
-
-        const removeButton = (
-            <div className='buttons'>
-                <Button
-                    onClick={() => removeOverride()}
-                    size='small'
-                    style='subtle'
-                    color='danger'>
-                    {ICON_TIMES}
-                </Button>
-            </div>
-        );
-
-        const variableOption = () => {
-            const options = variableOptions.map((variable) => {
-                const hasPreviewItem =
-                    variable.previewItem.src !== null && variable.previewItem.src !== undefined;
-
-                const className = `variable-name ${
-                    activeOverride === variable.name ? 'active' : ''
-                }`;
-
-                const showRemoveButton = activeOverride === variable.name ? removeButton : null;
-                const showWarning = !hasPreviewItem && warning;
-
-                const onClickHandler = () => {
-                    if (activeOverride === variable.name) return;
-                    setOverride(variable);
-                };
-
-                return (
-                    <div
-                        className='color-options-menu'
-                        key={variable.id.toString()}>
-                        <div
-                            className='color-option-list'
-                            onClick={onClickHandler}>
-                            <div className={className}>
-                                <p>{variable.name}</p>
-                                {showRemoveButton}
-                                {showWarning}
-                            </div>
-                        </div>
-                    </div>
-                );
-            });
-
-            return options;
-        };
-        return <>{variableOption()}</>;
-    }
-};
-
-export default VariableDropDown;