@imposium-hub/components 2.13.6 → 2.13.8-0

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)}

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

@@ -0,0 +1,78 @@
+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?: any;
+
+    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

@@ -0,0 +1,63 @@
+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/number-field/NumberField.tsx

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

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

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

package/src/components/slider-field/SliderField.tsx

@@ -17,6 +17,17 @@ interface ISliderFieldProps {
     labelPosition?: string;
     labelWidth?: string | number;
     enabledToggle?: boolean;
+
+    override?: any;
+    showCopyPropIds?: boolean;
+    propKey?: string;
+    setOverride?(e): void;
+    removeOverride?(): void;
+    inventory?: any;
+    onClose?(e: boolean): void;
+    activeOverride?: string;
+
+    previewMultiplier?: number;
 }
 
 interface ISliderFieldState {
@@ -92,7 +103,16 @@ class SliderField extends React.PureComponent<ISliderFieldProps, ISliderFieldSta
             info,
             labelPosition,
             labelWidth,
-            enabledToggle
+            enabledToggle,
+            propKey,
+            showCopyPropIds,
+            inventory,
+            setOverride,
+            onClose,
+            activeOverride,
+            removeOverride,
+            override,
+            previewMultiplier
         } = this.props;
         const { tempValue } = this.state;
         const valueSet = value !== null && value !== undefined;
@@ -109,7 +129,17 @@ class SliderField extends React.PureComponent<ISliderFieldProps, ISliderFieldSta
                 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='number'
+                previewMultiplier={previewMultiplier}>
                 {enabledToggle && (
                     <div
                         className='checkbox'

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

@@ -0,0 +1,80 @@
+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;
+    label?: any;
+
+    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,
+        label
+    } = props;
+
+    return (
+        <FieldWrapper
+            label={label}
+            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

@@ -0,0 +1,98 @@
+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;

package/src/constants/copy.ts

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