@imposium-hub/components 2.15.0-0 → 2.15.0-1

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

@@ -2,6 +2,14 @@ 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 (val < min || val > max) {
+        return false;
+    } else {
+        return true;
+    }
+};
+
 interface INumberFieldProps {
     buttons?: any;
     label?: any;
@@ -60,30 +68,25 @@ class NumberField extends React.PureComponent<INumberFieldProps, INumberFieldSta
 
     public componentDidUpdate(prevProps): void {
         if (prevProps.value !== this.props.value) {
-            this.setState({
-                error: false,
-                value: this.props.value
-            });
+            this.setState(
+                {
+                    value: this.props.value
+                },
+                () => {
+                    this.validateValue(this.props.value);
+                }
+            );
         }
     }
 
-    private validate(e) {
+    private validateValue(val) {
         const { max, min } = this.props;
-        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);
-        }
+        const error = validateNumInput(val, min, max);
+        this.setState({ error: !error });
     }
 
     private onChange(e) {
+        this.validateValue(e.target.value);
         let val = e.target.value;
         if (val === '' || val === null) {
             val = this.props.min;
@@ -201,7 +204,7 @@ class NumberField extends React.PureComponent<INumberFieldProps, INumberFieldSta
                     onKeyDown={(e) => this.onKeyDownHandler(e)}
                     onFocus={() => this.onSelectFocus()}
                     onBlur={(e) => this.onSelectBlur(e)}
-                    onChange={(e) => this.validate(e)}
+                    onChange={(e) => this.onChange(e)}
                 />
             </FieldWrapper>
         );

package/src/components/portal/Portal.tsx

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

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

@@ -844,7 +844,7 @@ export const BigButton: React.FC<IBigButtonProps> = (p) => (
     </div>
 );
 
-export const TabContent: React.FC = ({ children }) => (
+export const TabContent: React.FC<React.PropsWithChildren> = ({ children }) => (
     <div className='tab-content'>
         <div className='settings-tab'>
             <div className='integration-details'>{children}</div>

package/src/components/story-previewer/StoryPreviewer.tsx

@@ -20,7 +20,7 @@ import ImagePlayer from '../players/ImagePlayer';
 import { saveAs } from 'file-saver';
 import MediaVariableField from '../media-variable-field/MediaVariableField';
 import { IExperience } from '../../interfaces/experience';
-import ReactResizeDetector from 'react-resize-detector';
+import { useResizeDetector } from 'react-resize-detector';
 import { ERROR, previewer as copy } from '../../constants/copy';
 import { formattedTime } from '../../Util';
 import Timer from '../../services/Timer';
@@ -30,6 +30,25 @@ import { ICON_DOWNLOAD, ICON_CLIPBOARD } from '../../constants/icons';
 import AudioPlayer from '../players/AudioPlayer';
 import ColorField from '../color-field/ColorField';
 
+const ResizeDetectorWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+    const { width, height, ref } = useResizeDetector<HTMLDivElement>({
+        handleWidth: true,
+        handleHeight: true
+    });
+    return (
+        <div
+            ref={ref}
+            style={{ width: '100%', height: '100%' }}>
+            {React.Children.map(children, (child) => {
+                if (React.isValidElement(child)) {
+                    return React.cloneElement(child, { width, height } as any);
+                }
+                return child;
+            })}
+        </div>
+    );
+};
+
 interface IStoryPreviewerProps {
     api: IImposiumAPI;
     storyId: string;
@@ -786,13 +805,7 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
                 );
             }
 
-            return (
-                <ReactResizeDetector
-                    handleWidth
-                    handleHeight>
-                    {player}
-                </ReactResizeDetector>
-            );
+            return <ResizeDetectorWrapper>{player}</ResizeDetectorWrapper>;
         }
 
         return null;

package/src/components/tabs/Tabs.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { withResizeDetector } from 'react-resize-detector';
+import { useResizeDetector } from 'react-resize-detector';
 import ButtonMenu from '../button-menu/ButtonMenu';
 import ButtonMenuItem from '../button-menu/ButtonMenuItem';
 import Button from '../button/Button';
@@ -14,15 +14,15 @@ export interface ITab {
     menuButtons?: JSX.Element;
 }
 
-interface ITabsProps {
+export interface ITabsProps {
     activeTab?: string;
     keepMounted?: boolean;
     options: ITab[];
     onChange(i): void;
-    onClose(i): void;
+    onClose?(i): void;
     tabPadding?: number;
-    width: number;
-    height: number;
+    width?: number;
+    height?: number;
 }
 
 interface ITabsState {
@@ -85,7 +85,7 @@ class Tabs extends React.PureComponent<ITabsProps, ITabsState> {
     }
 
     private renderContent() {
-        const { options, activeTab, keepMounted, width, height } = this.props;
+        const { options, activeTab, keepMounted, width = 0, height = 0 } = this.props;
 
         if (keepMounted) {
             const contentArray = [];
@@ -132,7 +132,9 @@ class Tabs extends React.PureComponent<ITabsProps, ITabsState> {
                     onClick={(e) => {
                         e.preventDefault();
                         e.stopPropagation();
-                        this.props.onClose(key);
+                        if (this.props.onClose) {
+                            this.props.onClose(key);
+                        }
                     }}>
                     {ICON_TIMES}
                 </Button>
@@ -218,4 +220,19 @@ class Tabs extends React.PureComponent<ITabsProps, ITabsState> {
     }
 }
 
-export default withResizeDetector(Tabs);
+const TabsWithResize: React.FC<Omit<ITabsProps, 'width' | 'height'>> = (props) => {
+    const { width = 0, height = 0, ref } = useResizeDetector<HTMLDivElement>();
+    return (
+        <div
+            ref={ref}
+            style={{ width: '100%', height: '100%' }}>
+            <Tabs
+                {...props}
+                width={width}
+                height={height}
+            />
+        </div>
+    );
+};
+
+export default TabsWithResize;

package/src/index.ts

@@ -16,7 +16,7 @@ import FieldWrapper from './components/field-wrapper/FieldWrapper';
 import CheckboxField from './components/checkbox-field/CheckboxField';
 import ListField from './components/list-field/ListField';
 import ButtonGroupField from './components/button-group-field/ButtonGroupField';
-import NumberField from './components/number-field/NumberField';
+import NumberField, { validateNumInput } from './components/number-field/NumberField';
 import SelectField from './components/select-field/SelectField';
 import TextField from './components/text-field/TextField';
 import TextAreaField from './components/text-area-field/TextAreaField';
@@ -337,6 +337,7 @@ export {
     IconToggle,
     DEFAULT_FONTS,
     FontField,
+    validateNumInput,
     IChangeReportNode,
     IChangeReportSection,
     IPublishLogEntry,

package/src/utils/routing.ts

@@ -1,11 +1,15 @@
-import { browserHistory } from 'react-router';
+import { ICompatibleHistory } from '../components/app-wrapper/AppWrapper';
 
-export const pushRoute = (route): void => {
-    browserHistory.push(route);
-};
+let historySingleton: ICompatibleHistory | null = null;
 
-export const replaceRoute = (route): void => {
-    browserHistory.replace(route);
+export const configureHistory = (history: ICompatibleHistory): void => {
+    historySingleton = history;
+};
+export const pushRoute = (route: string): void => {
+    historySingleton?.push(route);
+};
+export const replaceRoute = (route: string): void => {
+    historySingleton?.replace(route);
 };
 
 export const getDemoURL = (): string => {