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

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

@@ -1,9 +1,6 @@
 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;
@@ -25,15 +22,6 @@ 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> {
@@ -62,114 +50,55 @@ 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 {
-            options,
-            width,
-            tooltip,
-            info,
-            labelPosition,
-            labelWidth,
-            disabled,
-            propKey,
-            showCopyPropIds,
-            inventory,
-            override,
-            setOverride,
-            onClose,
-            onChange,
-            activeOverride,
-            removeOverride
-        } = this.props;
-
+        const { value, label, options, width, tooltip, info, labelPosition, labelWidth, disabled } =
+            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={this.props.label}
+                label={label}
                 tooltip={tooltip}
                 info={info}
                 labelPosition={labelPosition}
                 width={width}
-                labelWidth={labelWidth}
-                propKey={propKey}
-                showCopyPropIds={showCopyPropIds}
-                inventory={inventory}
-                setOverride={setOverride}
-                onClose={onClose}
-                activeOverride={activeOverride}
-                removeOverride={removeOverride}
-                override={override}
-                type='text'
-                buttonGroup={true}>
-                {inputField()}
+                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>
             </FieldWrapper>
         );
     };

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

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

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

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

package/src/components/controlled-list/ControlledList.tsx

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

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

@@ -3,9 +3,6 @@ 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;
@@ -18,20 +15,6 @@ 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 {
@@ -60,44 +43,17 @@ class FieldWrapper extends React.PureComponent<IFieldWrapperProps, IFieldWrapper
     }
 
     private getLabelClass() {
-        const { propKey, label, labelPosition } = this.props;
-
-        if (!label && propKey) {
-            return 'label-left';
-        } else if (!label) {
+        if (!this.props.label) {
             return 'no-label';
         } else {
-            const labelPos = labelPosition ? labelPosition : 'left';
+            const labelPos = this.props.labelPosition ? this.props.labelPosition : 'left';
             return `label-${labelPos}`;
         }
     }
 
     private renderLabel() {
         const { showInfo } = this.state;
-        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 { info, label, labelWidth } = this.props;
 
         const iconInfo = showInfo ? ICON_TIMES_CIRCLE : ICON_INFO_CIRCLE;
         const style = {};
@@ -132,39 +88,9 @@ class FieldWrapper extends React.PureComponent<IFieldWrapperProps, IFieldWrapper
     }
 
     public render() {
-        const {
-            label,
-            width,
-            header,
-            propKey,
-            override,
-            inventory,
-            type,
-            customClass,
-            buttonGroup,
-            previewMultiplier
-        } = this.props;
+        const { label, width, customClass, header } = 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) {
@@ -178,13 +104,13 @@ class FieldWrapper extends React.PureComponent<IFieldWrapperProps, IFieldWrapper
             <>
                 {header && this.renderButtons()}
                 <div
-                    className={`form-field ${className} ${this.getLabelClass()}`}
+                    className={`form-field ${customClass} ${this.getLabelClass()}`}
                     style={style}>
                     {labelJSX}
                     <div
                         className={`form-field-content ${this.getLabelClass()}`}
                         {...fieldProps}>
-                        {children()}
+                        {this.props.children}
                         {!header && this.renderButtons()}
                     </div>
                     {renderTooltip(this.tooltipId, this.props.tooltip)}

package/src/components/number-field/NumberField.tsx

@@ -18,17 +18,6 @@ interface INumberFieldProps {
     max?: number;
     onBlur?(e): void;
     focusOnMount?: boolean;
-
-    override?: any;
-    showCopyPropIds?: boolean;
-    propKey?: string;
-    setOverride?(e): void;
-    removeOverride?(): void;
-    inventory?: any;
-    onClose?(e: boolean): void;
-    activeOverride?: string;
-
-    previewMultiplier?: number;
 }
 
 interface INumberFieldState {
@@ -133,24 +122,17 @@ class NumberField extends React.PureComponent<INumberFieldProps, INumberFieldSta
         let error: string = null;
 
         const {
+            label,
             placeholder,
             width,
             readOnly,
+            buttons,
             tooltip,
             info,
             labelPosition,
             labelWidth,
             min,
-            max,
-            showCopyPropIds,
-            propKey,
-            override,
-            inventory,
-            setOverride,
-            removeOverride,
-            onClose,
-            activeOverride,
-            previewMultiplier
+            max
         } = this.props;
         let value: any = this.state.value;
         if (value === null) {
@@ -172,23 +154,15 @@ class NumberField extends React.PureComponent<INumberFieldProps, INumberFieldSta
         return (
             <FieldWrapper
                 customClass={`number-field ${this.state.error ? 'invalid' : ''}`}
-                label={this.props.label}
+                // draggableValue = {true}
+                // onDrag = {(v)=>this.handleLabelDrag(v)}
+                label={label}
                 tooltip={tooltip}
-                buttons={this.props.buttons}
+                buttons={buttons}
                 info={error}
                 labelPosition={labelPosition}
                 labelWidth={labelWidth}
-                width={width}
-                propKey={propKey}
-                showCopyPropIds={showCopyPropIds}
-                inventory={inventory}
-                setOverride={setOverride}
-                onClose={onClose}
-                activeOverride={activeOverride}
-                removeOverride={removeOverride}
-                override={override}
-                type='number'
-                previewMultiplier={previewMultiplier}>
+                width={width}>
                 <input
                     ref={this.inputRef}
                     type='number'

package/src/components/publish-wizard/PublishWizard.tsx

@@ -554,6 +554,15 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
                           </span>
                       ),
                       link: `${creativeManagerBaseUrl}/library/${story.creativeLibraryId}/creative/${story.creativeId}/versions/`
+                  },
+                  {
+                      label: (
+                          <span>
+                              {ICON_IMAGE}&nbsp;{copy.publish.btnCRM}
+                          </span>
+                      ),
+                      onClick: (e) => this.onSelectOption(8),
+                      style: { width: 'calc(100% - 4px)' }
                   }
               ];
 
@@ -625,6 +634,7 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
                                         disabled={!selectedComposition}
                                         label={option.label}
                                         onClick={option.onClick}
+                                        style={option.style}
                                     />
                                 );
                             }