@imposium-hub/components 2.13.7 → 2.14.0

package/src/components/button-group-field/ButtonGroupField.tsx

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import FieldWrapper from '../field-wrapper/FieldWrapper';
 import { IToolTipConfig, renderTooltip, renderTooltipProps } from '../Tooltip';
+import { getOverrideHandler } from '../../constants/variables';
+import Button from '../button/Button';
+import { ICON_TIMES } from '../../constants/icons';
 
 interface IButtonGroupOption {
     value: string | boolean;
@@ -22,6 +25,15 @@ interface IButtonGroupFieldProps {
     labelPosition?: string;
     labelWidth?: string | number;
     disabled?: boolean;
+
+    override?: any;
+    showCopyPropIds?: boolean;
+    propKey?: string;
+    setOverride?(e): void;
+    removeOverride?(): void;
+    inventory?: any;
+    onClose?(e: boolean): void;
+    activeOverride?: string;
 }
 
 class ButtonGroupField extends React.PureComponent<IButtonGroupFieldProps> {
@@ -50,55 +62,114 @@ class ButtonGroupField extends React.PureComponent<IButtonGroupFieldProps> {
         }
     };
 
+    public renderRemoveButton() {
+        const { removeOverride } = this.props;
+        return (
+            <div className='item'>
+                <div className='buttons'>
+                    <Button
+                        style='subtle'
+                        color='danger'
+                        onClick={() => removeOverride()}>
+                        {ICON_TIMES}
+                    </Button>
+                </div>
+            </div>
+        );
+    }
+
     public render = (): JSX.Element => {
-        const { value, label, options, width, tooltip, info, labelPosition, labelWidth, disabled } =
-            this.props;
+        const {
+            options,
+            width,
+            tooltip,
+            info,
+            labelPosition,
+            labelWidth,
+            disabled,
+            propKey,
+            showCopyPropIds,
+            inventory,
+            override,
+            setOverride,
+            onClose,
+            onChange,
+            activeOverride,
+            removeOverride
+        } = this.props;
+
         const optionStyle: any = { width: `${100 / options.length}%` };
 
+        const inputField = () => {
+            const { hasOverride, previewItem } = getOverrideHandler(propKey, override, inventory);
+            const value = hasOverride ? previewItem : this.props.value;
+            return (
+                <div className={`${hasOverride ? 'override_variable text' : ''}`}>
+                    <div className='button-group'>
+                        {options.map((option, i) => {
+                            const optionKey = option.value;
+                            const optionLabel = option.label;
+                            const icon = option.icon ? option.icon : null;
+                            const tooltipId = `${optionKey}-${i}`;
+                            const activeOption = optionKey === value;
+                            const activeClass = activeOption
+                                ? 'active'
+                                : disabled
+                                ? 'disabled'
+                                : '';
+                            const onClick = !activeOption
+                                ? () => {
+                                      onChange(optionKey);
+                                  }
+                                : null;
+
+                            return (
+                                <div
+                                    key={`option-${optionKey}`}
+                                    style={optionStyle}
+                                    className={`button-group-option ${activeClass} ${
+                                        hasOverride ? 'disabled' : ''
+                                    }`}
+                                    {...renderTooltipProps(tooltipId, option.tooltip)}
+                                    onClick={
+                                        typeof option.onDoubleClick === 'function'
+                                            ? () =>
+                                                  this.handleMultipleClicks(
+                                                      onClick,
+                                                      option.onDoubleClick
+                                                  )
+                                            : onClick
+                                    }>
+                                    {!icon ? optionLabel : icon}
+                                    {renderTooltip(tooltipId, option.tooltip)}
+                                </div>
+                            );
+                        })}
+                    </div>
+                </div>
+            );
+        };
+
         return (
             <FieldWrapper
                 customClass='button-group-field'
-                label={label}
+                label={this.props.label}
                 tooltip={tooltip}
                 info={info}
                 labelPosition={labelPosition}
                 width={width}
-                labelWidth={labelWidth}>
-                <div className='button-group'>
-                    {options.map((option, i) => {
-                        const optionKey = option.value;
-                        const optionLabel = option.label;
-                        const icon = option.icon ? option.icon : null;
-                        const tooltipId = `${optionKey}-${i}`;
-                        const activeOption = optionKey === value;
-                        const activeClass = activeOption ? 'active' : disabled ? 'disabled' : '';
-                        const onClick = !activeOption
-                            ? () => {
-                                  this.props.onChange(optionKey);
-                              }
-                            : null;
-
-                        return (
-                            <div
-                                key={`option-${optionKey}`}
-                                style={optionStyle}
-                                className={`button-group-option ${activeClass}`}
-                                {...renderTooltipProps(tooltipId, option.tooltip)}
-                                onClick={
-                                    typeof option.onDoubleClick === 'function'
-                                        ? () =>
-                                              this.handleMultipleClicks(
-                                                  onClick,
-                                                  option.onDoubleClick
-                                              )
-                                        : onClick
-                                }>
-                                {!icon ? optionLabel : icon}
-                                {renderTooltip(tooltipId, option.tooltip)}
-                            </div>
-                        );
-                    })}
-                </div>
+                labelWidth={labelWidth}
+                propKey={propKey}
+                showCopyPropIds={showCopyPropIds}
+                inventory={inventory}
+                setOverride={setOverride}
+                onClose={onClose}
+                activeOverride={activeOverride}
+                removeOverride={removeOverride}
+                override={override}
+                type='text'
+                buttonGroup={true}>
+                {inputField()}
             </FieldWrapper>
         );
     };

package/src/components/checkbox-field/CheckboxField.tsx

@@ -13,6 +13,15 @@ interface ICheckboxFieldProps {
     info?: string;
     labelPosition?: string;
     labelWidth?: string | number;
+
+    override?: any;
+    showCopyPropIds?: boolean;
+    propKey?: string;
+    setOverride?(e): void;
+    removeOverride?(): void;
+    inventory?: any;
+    onClose?(e: boolean): void;
+    activeOverride?: string;
 }
 
 class CheckboxField extends React.PureComponent<ICheckboxFieldProps> {
@@ -28,18 +37,42 @@ class CheckboxField extends React.PureComponent<ICheckboxFieldProps> {
     }
 
     public render() {
-        const { value, label, width, tooltip, info, labelPosition, labelWidth } = this.props;
+        const {
+            value,
+            width,
+            tooltip,
+            info,
+            labelPosition,
+            labelWidth,
+            showCopyPropIds,
+            propKey,
+            override,
+            inventory,
+            setOverride,
+            removeOverride,
+            onClose,
+            activeOverride
+        } = this.props;
         const icon = value === true ? ICON_CHECK : null;
 
         return (
             <FieldWrapper
                 customClass='checkbox-field'
-                label={label}
+                label={this.props.label}
                 tooltip={tooltip}
                 info={info}
                 labelPosition={labelPosition}
                 labelWidth={labelWidth}
-                width={width}>
+                width={width}
+                propKey={propKey}
+                showCopyPropIds={showCopyPropIds}
+                inventory={inventory}
+                setOverride={setOverride}
+                onClose={onClose}
+                activeOverride={activeOverride}
+                removeOverride={removeOverride}
+                override={override}
+                type='boolean'>
                 <div
                     className='checkbox'
                     onClick={(e) => this.toggle(e)}>

package/src/components/color-field/ColorField.tsx

@@ -19,6 +19,15 @@ interface IColorFieldProps {
     pickerPosition?: string;
     labelWidth?: string | number;
     disabled?: boolean;
+
+    override?: any;
+    showCopyPropIds?: boolean;
+    propKey?: string;
+    setOverride?(e): void;
+    removeOverride?(): void;
+    inventory?: any;
+    onClose?(e: boolean): void;
+    activeOverride?: string;
 }
 
 interface IColorFieldState {
@@ -103,7 +112,6 @@ class ColorField extends React.PureComponent<IColorFieldProps, IColorFieldState>
 
     public render() {
         const {
-            label,
             width,
             buttons,
             tooltip,
@@ -114,7 +122,15 @@ class ColorField extends React.PureComponent<IColorFieldProps, IColorFieldState>
             labelPosition,
             pickerPosition,
             labelWidth,
-            disabled
+            disabled,
+            override,
+            showCopyPropIds,
+            propKey,
+            inventory,
+            setOverride,
+            removeOverride,
+            onClose,
+            activeOverride
         } = this.props;
         const { pickerOpen } = this.state;
         const disableAlpha = !enableAlpha;
@@ -141,13 +157,22 @@ class ColorField extends React.PureComponent<IColorFieldProps, IColorFieldState>
         return (
             <FieldWrapper
                 customClass='color-field'
-                label={label}
+                label={this.props.label}
                 tooltip={tooltip}
                 buttons={buttons}
                 info={info}
                 labelPosition={labelPosition}
                 labelWidth={labelWidth}
-                width={width}>
+                width={width}
+                propKey={propKey}
+                showCopyPropIds={showCopyPropIds}
+                inventory={inventory}
+                setOverride={setOverride}
+                onClose={onClose}
+                activeOverride={activeOverride}
+                removeOverride={removeOverride}
+                override={override}
+                type='color'>
                 <div style={transparentBg}>
                     <div
                         className='swatch'

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

@@ -0,0 +1,144 @@
+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);
+        setShow(!show);
+    };
+
+    const removeOverrideHandler = () => {
+        removeOverride();
+        setShow(!show);
+    };
+
+    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) => {
+                    if (enabled) 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/controlled-list/ControlledList.tsx

@@ -1,17 +1,23 @@
 import * as React from 'react';
 import Button from '../button/Button';
-import { ICON_TIMES } from '../../constants/icons';
+import { ICON_BRACKET_CURLY, ICON_CHECK, ICON_TIMES } from '../../constants/icons';
+
+export type ControlListType = 'text' | 'number' | 'color' | 'textarea' | 'boolean' | 'icon';
 
 interface IControlledListProps {
     items?: any[];
     removable?: boolean;
     onRemove?(index): void;
+    type?: ControlListType;
+    content?: any;
+    propKey?: string;
+    previewMultiplier?: number;
 }
 
 class ControlledList extends React.PureComponent<IControlledListProps> {
-    private inputRef: any;
-
-    private submitHandler: any;
+    constructor(props: IControlledListProps) {
+        super(props);
+    }
 
     public renderRemoveButton(index) {
         const { removable } = this.props;
@@ -31,19 +37,67 @@ class ControlledList extends React.PureComponent<IControlledListProps> {
     }
 
     public render() {
-        const { items } = this.props;
+        const { items, type, content, previewMultiplier } = this.props;
         let buttons: JSX.Element[];
-
         if (items) {
             buttons = items.map((item, i) => {
-                return (
-                    <div
-                        className='item'
-                        key={`item-${i}`}>
-                        {item}
-                        {this.renderRemoveButton(i)}
-                    </div>
-                );
+                switch (type) {
+                    case 'text':
+                    case 'number':
+                        const previewValue =
+                            typeof item === 'number' ? `${item * previewMultiplier}` : item;
+                        return (
+                            <div
+                                className='item'
+                                key={`item-${i}`}>
+                                <input
+                                    type='text'
+                                    value={
+                                        previewValue ? `{{ ${previewValue} }}` : 'PREVIEW NOT SET'
+                                    }
+                                    readOnly
+                                />
+                            </div>
+                        );
+                    case 'textarea':
+                        return (
+                            <div
+                                className='item textarea rta'
+                                key={`item-${i}`}>
+                                <textarea
+                                    className='rta__textarea'
+                                    value={item}
+                                    disabled={true}
+                                />
+                            </div>
+                        );
+                    case 'boolean':
+                        const icon = content ? ICON_BRACKET_CURLY : item ? ICON_CHECK : null;
+                        return (
+                            <div
+                                className={`item ${content ? 'icon-toggle' : 'checkbox'}`}
+                                key={`item-${i}`}>
+                                {icon}
+                            </div>
+                        );
+                    case 'color':
+                        return (
+                            <div
+                                className='item color'
+                                key={`item-${i}`}
+                                style={{ backgroundColor: item }}
+                            />
+                        );
+                    default:
+                        return (
+                            <div
+                                className='item'
+                                key={`item-${i}`}>
+                                {item}
+                                {this.renderRemoveButton(i)}
+                            </div>
+                        );
+                }
             });
         }
 

package/src/components/field-wrapper/FieldWrapper.tsx

@@ -3,6 +3,9 @@ import { generateUUID } from '../../Util';
 import { renderTooltipProps, renderTooltip, IToolTipConfig } from '../Tooltip';
 import { ICON_TIMES_CIRCLE, ICON_INFO_CIRCLE } from '../../constants/icons';
 import Button from '../button/Button';
+import { fieldLabel } from '../config-variable-button/ConfigVariableButton';
+import ControlledList from '../controlled-list/ControlledList';
+import { getOverrideHandler } from '../../constants/variables';
 
 interface IFieldWrapperProps {
     buttons?: any;
@@ -15,6 +18,20 @@ interface IFieldWrapperProps {
     labelPosition?: string;
     labelWidth?: string | number;
     header?: boolean;
+
+    type?: any;
+    override?: any;
+    showCopyPropIds?: boolean;
+    propKey?: string;
+    setOverride?(e): void;
+    removeOverride?(): void;
+    inventory?: any;
+    onClose?(e: boolean): void;
+    activeOverride?: string;
+
+    buttonGroup?: boolean;
+
+    previewMultiplier?: number;
 }
 
 interface IFieldWrapperState {
@@ -43,17 +60,44 @@ class FieldWrapper extends React.PureComponent<IFieldWrapperProps, IFieldWrapper
     }
 
     private getLabelClass() {
-        if (!this.props.label) {
+        const { propKey, label, labelPosition } = this.props;
+
+        if (!label && propKey) {
+            return 'label-left';
+        } else if (!label) {
             return 'no-label';
         } else {
-            const labelPos = this.props.labelPosition ? this.props.labelPosition : 'left';
+            const labelPos = labelPosition ? labelPosition : 'left';
             return `label-${labelPos}`;
         }
     }
 
     private renderLabel() {
         const { showInfo } = this.state;
-        const { info, label, labelWidth } = this.props;
+        const {
+            info,
+            labelWidth,
+            propKey,
+            showCopyPropIds,
+            inventory,
+            setOverride,
+            onClose,
+            activeOverride,
+            removeOverride,
+            type
+        } = this.props;
+
+        const label = fieldLabel(
+            this.props.label,
+            propKey,
+            showCopyPropIds,
+            type,
+            inventory,
+            (o) => setOverride(o),
+            (o) => onClose(o),
+            activeOverride,
+            () => removeOverride()
+        );
 
         const iconInfo = showInfo ? ICON_TIMES_CIRCLE : ICON_INFO_CIRCLE;
         const style = {};
@@ -88,9 +132,39 @@ class FieldWrapper extends React.PureComponent<IFieldWrapperProps, IFieldWrapper
     }
 
     public render() {
-        const { label, width, customClass, header } = this.props;
+        const {
+            label,
+            width,
+            header,
+            propKey,
+            override,
+            inventory,
+            type,
+            customClass,
+            buttonGroup,
+            previewMultiplier
+        } = this.props;
         const labelJSX = this.renderLabel();
 
+        const { hasOverride, previewItem } = getOverrideHandler(propKey, override, inventory);
+
+        const className = hasOverride ? `${customClass} override_variable ${type}` : customClass;
+
+        const children = () => {
+            if (hasOverride && !buttonGroup) {
+                return (
+                    <ControlledList
+                        items={[previewItem]}
+                        removable={true}
+                        type={type}
+                        previewMultiplier={previewMultiplier}
+                    />
+                );
+            } else {
+                return this.props.children;
+            }
+        };
+
         const style = {};
         let fieldProps = {};
         if (!label) {
@@ -104,13 +178,13 @@ class FieldWrapper extends React.PureComponent<IFieldWrapperProps, IFieldWrapper
             <>
                 {header && this.renderButtons()}
                 <div
-                    className={`form-field ${customClass} ${this.getLabelClass()}`}
+                    className={`form-field ${className} ${this.getLabelClass()}`}
                     style={style}>
                     {labelJSX}
                     <div
                         className={`form-field-content ${this.getLabelClass()}`}
                         {...fieldProps}>
-                        {this.props.children}
+                        {children()}
                         {!header && this.renderButtons()}
                     </div>
                     {renderTooltip(this.tooltipId, this.props.tooltip)}