@imposium-hub/components 2.16.0-0 → 3.0.0-0

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'

package/src/components/header/ProjectDropdown.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import ImposiumDropdown from '../dropdown/Dropdown';
 import StoryTableNameFilter from '../assets/StoryTableNameFilter';
+import { StoryTableTotalRendersCell } from '../assets/StoryTableTotalRendersCell';
 import React from 'react';
 import AssetsTableDateCell from '../assets/AssetsTableDateCell';
 import DataTable from '../data-table/DataTable';
@@ -25,6 +26,7 @@ export const ProjectDropdown = (props: IProjectDropdownProps) => {
     const [storyFilter, setStoryFilter] = useState({
         name: ''
     });
+    const [totalRendersLoading, setTotalRendersLoading] = useState(false);
     const [order] = useState('date_modified');
     const [orderDirection] = useState('desc');
 
@@ -34,8 +36,10 @@ export const ProjectDropdown = (props: IProjectDropdownProps) => {
 
     useEffect(() => {
         if (show) {
-            api.getAccessData(false).then((data) => {
+            setTotalRendersLoading(true);
+            api.getAccessData(true).then((data) => {
                 setAccessData(data);
+                setTotalRendersLoading(false);
             });
         }
     }, [show]);
@@ -62,6 +66,21 @@ export const ProjectDropdown = (props: IProjectDropdownProps) => {
                 ),
                 disableSortBy: false
             },
+            {
+                accessor: 'total_renders',
+                Header: 'Total Renders',
+                width: 60,
+                minWidth: 60,
+                maxWidth: 60,
+                disableSortBy: false,
+                Cell: (cell: any) => (
+                    <StoryTableTotalRendersCell
+                        loading={totalRendersLoading}
+                        cell={cell}
+                        date_created={false}
+                    />
+                )
+            },
             {
                 accessor: 'last_modified_by',
                 Header: 'Last Modified By',

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

@@ -2,20 +2,12 @@ import * as React from 'react';
 import FieldWrapper from '../field-wrapper/FieldWrapper';
 import { IToolTipConfig } from '../Tooltip';
 
-export const validateNumInput = (val: number, min?: number, max?: number) => {
-    if ((min !== undefined && val < min) || (max !== undefined && val > max)) {
-        return false;
-    } else {
-        return true;
-    }
-};
-
 interface INumberFieldProps {
     buttons?: any;
     label?: any;
     placeholder?: string;
     readOnly?: boolean;
-    value: number | null;
+    value: number;
     tooltip?: IToolTipConfig | string;
     width?: string | number;
     onChange?(e): void;
@@ -26,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 {
@@ -60,47 +41,46 @@ class NumberField extends React.PureComponent<INumberFieldProps, INumberFieldSta
         if (this.props.focusOnMount && this.inputRef.current) {
             this.inputRef.current.focus();
         }
-        this.setState(
-            {
-                value: this.props.value
-            },
-            () => {
-                this.validateValue(this.props.value);
-            }
-        );
+        this.setState({
+            error: false,
+            value: this.props.value
+        });
     }
 
     public componentDidUpdate(prevProps): void {
         if (prevProps.value !== this.props.value) {
-            this.setState(
-                {
-                    value: this.props.value
-                },
-                () => {
-                    this.validateValue(this.props.value);
-                }
-            );
+            this.setState({
+                error: false,
+                value: this.props.value
+            });
         }
     }
 
-    private validateValue(val) {
+    private validate(e) {
         const { max, min } = this.props;
-        const error = validateNumInput(val, min, max);
-        this.setState({ error: !error });
+        const val = e.target.value;
+        this.setState({ value: val });
+        if (min || max) {
+            if (val < min || val > max) {
+                this.setState({ error: true });
+            } else {
+                this.setState({ error: false });
+                this.onChange(e);
+            }
+        } else {
+            this.onChange(e);
+        }
     }
 
     private onChange(e) {
         let val = e.target.value;
-
-        this.validateValue(val);
-
         if (val === '' || val === null) {
             val = this.props.min;
         } else {
             val = parseFloat(val);
         }
 
-        this.setState({ value: val }, () => this.props.onChange(val));
+        this.props.onChange(val);
     }
 
     private onKeyDownHandler(e) {
@@ -142,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) {
@@ -181,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'
@@ -210,7 +175,7 @@ class NumberField extends React.PureComponent<INumberFieldProps, INumberFieldSta
                     onKeyDown={(e) => this.onKeyDownHandler(e)}
                     onFocus={() => this.onSelectFocus()}
                     onBlur={(e) => this.onSelectBlur(e)}
-                    onChange={(e) => this.onChange(e)}
+                    onChange={(e) => this.validate(e)}
                 />
             </FieldWrapper>
         );

package/src/components/portal/Portal.tsx

@@ -8,7 +8,6 @@ import { createPortal } from 'react-dom';
 
 interface IPortalProps {
     id: string;
-    children?: React.ReactNode;
 }
 
 const Portal: React.FC<IPortalProps> = ({ children, id }): ReactPortal => {