@imposium-hub/components 2.16.0 → 3.0.0-1

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/context-menu/AnimateComponent.tsx

@@ -5,7 +5,6 @@ interface IAnimateComponentProps {
     isVisible: boolean;
     timeout: number;
     className: string;
-    children?: React.ReactNode;
 }
 
 const AnimateComponent: React.FC<IAnimateComponentProps> = ({

package/src/components/context-menu/ContextMenu.tsx

@@ -14,23 +14,20 @@ interface IContextMenuProps {
     preventHideOnScroll?: boolean;
     preventHideOnResize?: boolean;
     animation?: string;
-    children: React.ReactNode;
 }
 
-const ContextMenu: React.FC<IContextMenuProps> = (props: IContextMenuProps) => {
-    const {
-        id,
-        children,
-        appendTo,
-        hideOnLeave,
-        onMouseLeave,
-        onHide,
-        onShow,
-        preventHideOnScroll,
-        preventHideOnResize,
-        animation
-    } = props;
-
+const ContextMenu: React.FC<IContextMenuProps> = ({
+    id,
+    children,
+    appendTo,
+    hideOnLeave,
+    onMouseLeave,
+    onHide,
+    onShow,
+    preventHideOnScroll,
+    preventHideOnResize,
+    animation
+}) => {
     const contextMenuEl = useRef(null);
     const [isVisible, setVisible] = useState(false);
     const [top, setTop] = useState('');
@@ -175,6 +172,7 @@ const ContextMenu: React.FC<IContextMenuProps> = (props: IContextMenuProps) => {
 };
 
 export default ContextMenu;
+
 ContextMenu.defaultProps = {
     appendTo: null,
     hideOnLeave: false,

package/src/components/context-menu/ContextMenuItem.tsx

@@ -5,7 +5,6 @@ interface IContextMenuItemProps {
     onClick?(e: React.MouseEvent): void;
     disabled?: boolean;
     preventClose?: boolean;
-    children?: React.ReactNode;
 }
 
 const ContextMenuItem: React.FC<IContextMenuItemProps> = ({

package/src/components/context-menu/ContextMenuTrigger.tsx

@@ -5,7 +5,6 @@ interface IContextMenuTriggerProps {
     id: string;
     disableWhileShiftPressed?: boolean;
     disable?: boolean;
-    children?: React.ReactNode;
 }
 
 const ContextMenuTrigger: React.FC<IContextMenuTriggerProps> = ({

package/src/components/context-menu/SubMenu.tsx

@@ -3,7 +3,6 @@ import ContextMenuItem from './ContextMenuItem';
 
 interface ISubmenuProps {
     title: string;
-    children?: React.ReactNode;
 }
 
 const Submenu: React.FC<ISubmenuProps> = ({ children, title }) => {

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,67 +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}`}>
-                                <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>
-                        );
-                }
+                return (
+                    <div
+                        className='item'
+                        key={`item-${i}`}>
+                        {item}
+                        {this.renderRemoveButton(i)}
+                    </div>
+                );
             });
         }
 

package/src/components/data-table/DataTable.tsx

@@ -79,8 +79,6 @@ interface IDataTableProps {
     // controlled sorting props, use internal sorting if not set
     sortBy?: any[];
     onSort?: (sortBy: any[]) => void;
-    maxItemsPerPage?: number;
-    minItemsPerPage?: number;
 
     // controlled selection props
     highlightBy?: any;
@@ -94,9 +92,6 @@ interface IDataTableProps {
     expandTags?: boolean;
 
     keyboardNav?: boolean;
-
-    useSimplePagination?: boolean;
-    hasMore?: boolean;
 }
 
 const processColumnData = (freshColumns): any[] => {
@@ -542,11 +537,7 @@ const DataTable: React.FC<IDataTableProps> = (props: IDataTableProps) => {
                             ? () => props.onPage(props.currentPage - 1, pageSize)
                             : previousPage,
                         itemsPerPage: props.itemsPerPage,
-                        onItemsPerPage: (i) => props.onItemsPerPage(i),
-                        maxItemsPerPage: props.maxItemsPerPage,
-                        minItemsPerPage: props.minItemsPerPage,
-                        useSimplePagination: props.useSimplePagination,
-                        hasMore: props.hasMore
+                        onItemsPerPage: (i) => props.onItemsPerPage(i)
                     }}
                 />
             )}

package/src/components/data-table/Paginator.tsx

@@ -25,10 +25,6 @@ interface IPaginatorProps {
     setPageSize: (size: number) => void;
     itemsPerPage: number;
     onItemsPerPage: (size: number) => void;
-    maxItemsPerPage?: number;
-    minItemsPerPage?: number;
-    useSimplePagination?: boolean;
-    hasMore?: boolean;
 }
 
 const Paginator: React.FC<IPaginatorProps> = ({
@@ -42,11 +38,7 @@ const Paginator: React.FC<IPaginatorProps> = ({
     previousPage,
     nextPage,
     itemsPerPage,
-    onItemsPerPage,
-    maxItemsPerPage,
-    minItemsPerPage,
-    useSimplePagination,
-    hasMore
+    onItemsPerPage
 }) => {
     const [getPageIndex, setPageIndex] = React.useState<number>(pageIndex);
     const [getItemsPerPage, setItemsPerPage] = React.useState<number>(itemsPerPage);
@@ -106,60 +98,43 @@ const Paginator: React.FC<IPaginatorProps> = ({
     return (
         <section className='ip-table-pagination'>
             <span>
-                {!useSimplePagination && (
-                    <Button
-                        style='subtle'
-                        size='small'
-                        tooltip='Go to first page'
-                        disabled={!canPreviousPage}
-                        onClick={() => gotoPage(1, pageSize)}>
-                        {ICON_ANGLE_DOUBLE_LEFT}
-                    </Button>
-                )}
+                <Button
+                    style='subtle'
+                    size='small'
+                    tooltip='Go to first page'
+                    disabled={!canPreviousPage}
+                    onClick={() => gotoPage(1, pageSize)}>
+                    {ICON_ANGLE_DOUBLE_LEFT}
+                </Button>
                 <Button
                     style='subtle'
                     size='small'
                     tooltip='Go to previous page'
-                    disabled={(!canPreviousPage || !useSimplePagination) && getPageIndex === 1}
-                    onClick={() => {
-                        if (!useSimplePagination) {
-                            previousPage();
-                        } else {
-                            gotoPage(getPageIndex - 1, pageSize);
-                        }
-                    }}>
+                    disabled={!canPreviousPage}
+                    onClick={() => previousPage()}>
                     {ICON_ANGLE_LEFT}
                 </Button>
                 <Button
                     style='subtle'
                     size='small'
                     tooltip='Go to next page'
-                    disabled={useSimplePagination ? !hasMore : !canNextPage}
-                    onClick={() => {
-                        if (!useSimplePagination && !hasMore) {
-                            nextPage();
-                        } else {
-                            gotoPage(getPageIndex + 1, pageSize);
-                        }
-                    }}>
+                    disabled={!canNextPage}
+                    onClick={() => nextPage()}>
                     {ICON_ANGLE_RIGHT}
                 </Button>
-                {!useSimplePagination && (
-                    <Button
-                        style='subtle'
-                        size='small'
-                        tooltip='Go to last page'
-                        disabled={!canNextPage}
-                        onClick={() => gotoPage(getPageCount, pageSize)}>
-                        {ICON_ANGLE_DOUBLE_RIGHT}
-                    </Button>
-                )}
+                <Button
+                    style='subtle'
+                    size='small'
+                    tooltip='Go to last page'
+                    disabled={!canNextPage}
+                    onClick={() => gotoPage(getPageCount, pageSize)}>
+                    {ICON_ANGLE_DOUBLE_RIGHT}
+                </Button>
                 &nbsp;&nbsp;
                 <span>
                     {copy.table.page}&nbsp;&nbsp;
                     <strong>
-                        {getPageIndex} {useSimplePagination ? '' : 'of'}{' '}
-                        {!useSimplePagination ? getPageCount : ''}
+                        {getPageIndex} of {getPageCount}
                     </strong>
                     &nbsp;&nbsp;
                 </span>
@@ -221,17 +196,13 @@ const Paginator: React.FC<IPaginatorProps> = ({
                         }}
                         onBlur={() => onItemsPerPageBlur()}
                         onKeyDown={(e) => onItemsPerPageKeyDown(e)}
-                        max={maxItemsPerPage}
-                        min={minItemsPerPage}
                     />
                 </span>
             </span>
 
-            {!useSimplePagination && (
-                <span className='total-assets'>
-                    {copy.table.total}&nbsp;&nbsp;<strong>{totalItems || 0}</strong>
-                </span>
-            )}
+            <span className='total-assets'>
+                {copy.table.total}&nbsp;&nbsp;<strong>{totalItems || 0}</strong>
+            </span>
         </section>
     );
 };

package/src/components/dropdown/Dropdown.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 
 export interface IDropdownMenuProps {
-    customClass?: string;
     toggleRef?: any;
     show: boolean;
     children: React.ReactNode;
@@ -124,7 +123,7 @@ export default class ImposiumDropdown extends React.PureComponent<
 
     public render() {
         const { build, offset } = this.state;
-        const { show, position, children, customClass } = this.props;
+        const { show, position, children } = this.props;
         const dropdownStyle: any = {
             transform: build ? 'scaleY(1)' : 'scaleY(0)',
             opacity: build ? '1' : '0'
@@ -171,7 +170,7 @@ export default class ImposiumDropdown extends React.PureComponent<
 
         return (
             <div
-                className={`imposium-dropdown ${customClass}`}
+                className='imposium-dropdown'
                 style={dropdownStyle}
                 ref={this.dropdownRef}>
                 {children}

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;
@@ -17,21 +14,6 @@ interface IFieldWrapperProps {
     width?: string | number;
     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 +42,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 +87,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 } = 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) {
@@ -175,22 +100,19 @@ class FieldWrapper extends React.PureComponent<IFieldWrapperProps, IFieldWrapper
         }
 
         return (
-            <>
-                {header && this.renderButtons()}
+            <div
+                className={`form-field ${customClass} ${this.getLabelClass()}`}
+                style={style}>
+                {labelJSX}
                 <div
-                    className={`form-field ${className} ${this.getLabelClass()}`}
-                    style={style}>
-                    {labelJSX}
-                    <div
-                        className={`form-field-content ${this.getLabelClass()}`}
-                        {...fieldProps}>
-                        {children()}
-                        {!header && this.renderButtons()}
-                    </div>
-                    {renderTooltip(this.tooltipId, this.props.tooltip)}
-                    {this.renderInfo()}
+                    className={`form-field-content ${this.getLabelClass()}`}
+                    {...fieldProps}>
+                    {this.props.children}
+                    {this.renderButtons()}
                 </div>
-            </>
+                {renderTooltip(this.tooltipId, this.props.tooltip)}
+                {this.renderInfo()}
+            </div>
         );
     }
 

package/src/components/header/Header.tsx

@@ -211,7 +211,6 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                                 api.cacheActiveStory(activeServiceId, orgId, storyId);
                             } else {
                                 pushRoute(`/${orgId}`);
-                                api.cacheActiveStory(activeServiceId, orgId);
                             }
                         })
                         .catch((e) => {
@@ -544,9 +543,11 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                     </span>
 
                     <span className='inner-right'>
-                        {CrMLink}
                         {storyToggle}
-                        <div className='additional-buttons'>{additionalButtons}</div>
+                        <div className='additional-buttons'>
+                            {additionalButtons}
+                            {CrMLink}
+                        </div>
                         {accountDropdownToggle}
                         <a
                             href='https://support.flashtalking.com/hc/en-us/sections/25515903148819-Imposium'