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

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/edit-guide-modal/EditGuideModal.tsx

@@ -0,0 +1,110 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+import Modal from '../modal/Modal';
+import Button from '../button/Button';
+import Section from '../section/Section';
+import NumberField from '../number-field/NumberField';
+
+export interface IEditGuideModalProps {
+    guide: number;
+    onClose: () => any;
+    onContinue: (e) => any;
+    isHorizontal: boolean;
+}
+
+export const EditGuideModal = () => {
+    const [props, setProps] = useState<IEditGuideModalProps>(null);
+    const [isOpen, setIsOpen] = useState<boolean>(false);
+    const [guide, setGuide] = useState<number>(null);
+
+    const onOpen = (event) => {
+        setProps({
+            ...event.detail
+        });
+        setIsOpen(true);
+    };
+
+    const onClose = () => setIsOpen(false);
+
+    useEffect(() => {
+        window.addEventListener('openeditguidemodal', onOpen);
+        return () => {
+            window.removeEventListener('openeditguidemodal', onOpen);
+        };
+    }, []);
+
+    useEffect(() => {
+        if (props?.guide) {
+            setGuide(props.guide);
+        }
+    }, [props?.guide]);
+
+    const onKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            onContinue(guide);
+        }
+    };
+
+    useEffect(() => {
+        if (isOpen) {
+            window.addEventListener('keypress', onKeyDown);
+        } else {
+            window.removeEventListener('keypress', onKeyDown);
+        }
+        return () => {
+            window.removeEventListener('keypress', onKeyDown);
+        };
+    }, [isOpen, onKeyDown]);
+
+    const onContinue = useCallback(
+        (e) => {
+            if (e) {
+                props.onContinue(e);
+                onClose();
+            }
+        },
+        [isOpen]
+    );
+
+    const modal = isOpen && (
+        <Modal
+            onRequestClose={onClose}
+            style={{
+                width: '200px',
+                height: '110px',
+                top: '25%',
+                left: '55%'
+            }}
+            isOpen={true}>
+            <Section
+                title={`Edit ${props.isHorizontal ? 'Horizontal Guide' : 'Vertical Guide'}`}
+                style={{ padding: '10px' }}>
+                <NumberField
+                    label={'Guide Position'}
+                    labelPosition='top'
+                    onChange={(e) => setGuide(Number(e))}
+                    focusOnMount={true}
+                    value={guide}
+                />
+                <Button
+                    onClick={onClose}
+                    style='bold'
+                    color='secondary'>
+                    Cancel
+                </Button>
+                <Button
+                    onClick={() => onContinue(guide)}
+                    style='bold'
+                    color='primary'>
+                    Ok
+                </Button>
+            </Section>
+        </Modal>
+    );
+
+    const PortalContextComponent = () =>
+        ReactDOM.createPortal(modal, document.querySelector('#react-root'));
+
+    return <PortalContextComponent />;
+};