@imposium-hub/components 1.50.0 → 1.51.0

package/src/components/anchor-field/AnchorField.tsx

@@ -0,0 +1,236 @@
+import * as React from 'react';
+import { HORIZONTAL_ALIGNMENT, VERTICAL_ALIGNMENT } from '../../constants/compositions';
+import {
+    ICON_CENTER_ANCHOR,
+    ICON_DOWNLEFT_ANCHOR,
+    ICON_DOWNRIGHT_ANCHOR,
+    ICON_DOWN_ANCHOR,
+    ICON_LEFT_ANCHOR,
+    ICON_RIGHT_ANCHOR,
+    ICON_UPLEFT_ANCHOR,
+    ICON_UPRIGHT_ANCHOR,
+    ICON_UP_ANCHOR
+} from '../../constants/icons';
+import FieldWrapper from '../field-wrapper/FieldWrapper';
+import { IToolTipConfig } from '../Tooltip';
+
+interface IAnchorFieldProps {
+    onChange(hAlign: string, vAlign: string): void;
+    config: any;
+    info?: string;
+    labelPosition?: string;
+    tooltip?: IToolTipConfig | string;
+    width?: string | number;
+    label?: string;
+}
+
+interface IconConfig {
+    tl?: any;
+    tc?: any;
+    tr?: any;
+    cl?: any;
+    cc?: any;
+    cr?: any;
+    bl?: any;
+    bc?: any;
+    br?: any;
+}
+class AnchorField extends React.PureComponent<IAnchorFieldProps> {
+    constructor(props) {
+        super(props);
+    }
+
+    public render() {
+        const { label, width, tooltip, info, labelPosition } = this.props;
+
+        const getIcons = (v, h): IconConfig => {
+            if (v === VERTICAL_ALIGNMENT.TOP && h === HORIZONTAL_ALIGNMENT.LEFT) {
+                return {
+                    tl: ICON_CENTER_ANCHOR,
+                    tc: ICON_RIGHT_ANCHOR,
+                    cc: ICON_DOWNRIGHT_ANCHOR,
+                    cl: ICON_DOWN_ANCHOR
+                };
+            } else if (v === VERTICAL_ALIGNMENT.TOP && h === HORIZONTAL_ALIGNMENT.CENTER) {
+                return {
+                    tl: ICON_LEFT_ANCHOR,
+                    tc: ICON_CENTER_ANCHOR,
+                    tr: ICON_RIGHT_ANCHOR,
+                    cl: ICON_DOWNLEFT_ANCHOR,
+                    cc: ICON_DOWN_ANCHOR,
+                    cr: ICON_DOWNRIGHT_ANCHOR
+                };
+            } else if (v === VERTICAL_ALIGNMENT.TOP && h === HORIZONTAL_ALIGNMENT.RIGHT) {
+                return {
+                    tc: ICON_LEFT_ANCHOR,
+                    tr: ICON_CENTER_ANCHOR,
+                    cc: ICON_DOWNLEFT_ANCHOR,
+                    cr: ICON_DOWN_ANCHOR
+                };
+            } else if (v === VERTICAL_ALIGNMENT.CENTER && h === HORIZONTAL_ALIGNMENT.LEFT) {
+                return {
+                    tl: ICON_UP_ANCHOR,
+                    tc: ICON_UPRIGHT_ANCHOR,
+                    cl: ICON_CENTER_ANCHOR,
+                    cc: ICON_RIGHT_ANCHOR,
+                    bl: ICON_DOWN_ANCHOR,
+                    bc: ICON_DOWNRIGHT_ANCHOR
+                };
+            } else if (v === VERTICAL_ALIGNMENT.CENTER && h === HORIZONTAL_ALIGNMENT.CENTER) {
+                return {
+                    tl: ICON_UPLEFT_ANCHOR,
+                    tc: ICON_UP_ANCHOR,
+                    tr: ICON_UPRIGHT_ANCHOR,
+                    cl: ICON_LEFT_ANCHOR,
+                    cc: ICON_CENTER_ANCHOR,
+                    cr: ICON_RIGHT_ANCHOR,
+                    bl: ICON_DOWNLEFT_ANCHOR,
+                    bc: ICON_DOWN_ANCHOR,
+                    br: ICON_DOWNRIGHT_ANCHOR
+                };
+            } else if (v === VERTICAL_ALIGNMENT.CENTER && h === HORIZONTAL_ALIGNMENT.RIGHT) {
+                return {
+                    tc: ICON_UPLEFT_ANCHOR,
+                    tr: ICON_UP_ANCHOR,
+                    cc: ICON_LEFT_ANCHOR,
+                    cr: ICON_CENTER_ANCHOR,
+                    bc: ICON_DOWNLEFT_ANCHOR,
+                    br: ICON_DOWN_ANCHOR
+                };
+            } else if (v === VERTICAL_ALIGNMENT.BOTTOM && h === HORIZONTAL_ALIGNMENT.LEFT) {
+                return {
+                    cl: ICON_UP_ANCHOR,
+                    cc: ICON_UPRIGHT_ANCHOR,
+                    bl: ICON_CENTER_ANCHOR,
+                    bc: ICON_RIGHT_ANCHOR
+                };
+            } else if (v === VERTICAL_ALIGNMENT.BOTTOM && h === HORIZONTAL_ALIGNMENT.CENTER) {
+                return {
+                    cl: ICON_UPLEFT_ANCHOR,
+                    cc: ICON_UP_ANCHOR,
+                    cr: ICON_UPRIGHT_ANCHOR,
+                    bl: ICON_LEFT_ANCHOR,
+                    bc: ICON_CENTER_ANCHOR,
+                    br: ICON_RIGHT_ANCHOR
+                };
+            } else if (v === VERTICAL_ALIGNMENT.BOTTOM && h === HORIZONTAL_ALIGNMENT.RIGHT) {
+                return {
+                    cc: ICON_UPLEFT_ANCHOR,
+                    cr: ICON_UP_ANCHOR,
+                    bc: ICON_LEFT_ANCHOR,
+                    br: ICON_CENTER_ANCHOR
+                };
+            } else {
+                return {};
+            }
+        };
+
+        const { vertical_align, horizontal_align } = this.props.config;
+        const icons = getIcons(vertical_align, horizontal_align);
+
+        return (
+            <>
+                <FieldWrapper
+                    label={label}
+                    width={width}
+                    tooltip={tooltip}
+                    info={info}
+                    labelPosition={labelPosition}>
+                    <table className='anchorTable'>
+                        <tbody>
+                            <tr>
+                                <td
+                                    onClick={() =>
+                                        this.props.onChange(
+                                            VERTICAL_ALIGNMENT.TOP,
+                                            HORIZONTAL_ALIGNMENT.LEFT
+                                        )
+                                    }>
+                                    {icons.tl}
+                                </td>
+                                <td
+                                    onClick={() =>
+                                        this.props.onChange(
+                                            VERTICAL_ALIGNMENT.TOP,
+                                            HORIZONTAL_ALIGNMENT.CENTER
+                                        )
+                                    }>
+                                    {icons.tc}
+                                </td>
+                                <td
+                                    onClick={() =>
+                                        this.props.onChange(
+                                            VERTICAL_ALIGNMENT.TOP,
+                                            HORIZONTAL_ALIGNMENT.RIGHT
+                                        )
+                                    }>
+                                    {icons.tr}
+                                </td>
+                            </tr>
+                            <tr>
+                                <td
+                                    onClick={() =>
+                                        this.props.onChange(
+                                            VERTICAL_ALIGNMENT.CENTER,
+                                            HORIZONTAL_ALIGNMENT.LEFT
+                                        )
+                                    }>
+                                    {icons.cl}
+                                </td>
+                                <td
+                                    onClick={() =>
+                                        this.props.onChange(
+                                            VERTICAL_ALIGNMENT.CENTER,
+                                            HORIZONTAL_ALIGNMENT.CENTER
+                                        )
+                                    }>
+                                    {icons.cc}
+                                </td>
+                                <td
+                                    onClick={() =>
+                                        this.props.onChange(
+                                            VERTICAL_ALIGNMENT.CENTER,
+                                            HORIZONTAL_ALIGNMENT.RIGHT
+                                        )
+                                    }>
+                                    {icons.cr}
+                                </td>
+                            </tr>
+                            <tr>
+                                <td
+                                    onClick={() =>
+                                        this.props.onChange(
+                                            VERTICAL_ALIGNMENT.BOTTOM,
+                                            HORIZONTAL_ALIGNMENT.LEFT
+                                        )
+                                    }>
+                                    {icons.bl}
+                                </td>
+                                <td
+                                    onClick={() =>
+                                        this.props.onChange(
+                                            VERTICAL_ALIGNMENT.BOTTOM,
+                                            HORIZONTAL_ALIGNMENT.CENTER
+                                        )
+                                    }>
+                                    {icons.bc}
+                                </td>
+                                <td
+                                    onClick={() =>
+                                        this.props.onChange(
+                                            VERTICAL_ALIGNMENT.BOTTOM,
+                                            HORIZONTAL_ALIGNMENT.RIGHT
+                                        )
+                                    }>
+                                    {icons.br}
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </FieldWrapper>
+            </>
+        );
+    }
+}
+
+export default AnchorField;

package/src/components/text-field/TextField.tsx

@@ -460,7 +460,6 @@ class TextField extends React.PureComponent<ITextFieldProps, ITextFieldState> {
 
     public render() {
         const { label, width, tooltip, info, labelPosition } = this.props;
-        console.log(this.props);
         return (
             <FieldWrapper
                 customClass='text-field'

package/src/constants/compositions.ts

@@ -172,3 +172,15 @@ const NEW_TEXT_LAYER: ITextLayer = {
     text_wrap: true,
     text_fit: true
 };
+
+export const VERTICAL_ALIGNMENT = {
+    TOP: 'top',
+    CENTER: 'center',
+    BOTTOM: 'bottom'
+};
+
+export const HORIZONTAL_ALIGNMENT = {
+    LEFT: 'left',
+    CENTER: 'center',
+    RIGHT: 'right'
+};

package/src/constants/icons.tsx

@@ -58,6 +58,17 @@ import { faProjectDiagram } from '@fortawesome/free-solid-svg-icons/faProjectDia
 import { faJs } from '@fortawesome/free-brands-svg-icons/faJs';
 import { faDownload } from '@fortawesome/free-solid-svg-icons/faDownload';
 import { faUpload } from '@fortawesome/free-solid-svg-icons/faUpload';
+import {
+    faArrowDown,
+    faArrowLeft,
+    faArrowUp,
+    faArrowRight as faRightArrow,
+    faArrowUpLeft,
+    faArrowUpRight,
+    faArrowDownLeft,
+    faArrowDownRight
+} from '@fortawesome/pro-light-svg-icons';
+import { faCircleSmall } from '@fortawesome/pro-solid-svg-icons';
 
 export const ICON_VIDEO = <FontAwesomeIcon icon={faVideo} />;
 
@@ -174,3 +185,21 @@ export const ICON_JS = <FontAwesomeIcon icon={faJs} />;
 export const ICON_DOWNLOAD = <FontAwesomeIcon icon={faDownload} />;
 
 export const ICON_UPLOAD = <FontAwesomeIcon icon={faUpload} />;
+
+export const ICON_UPLEFT_ANCHOR = <FontAwesomeIcon icon={faArrowUpLeft} />;
+
+export const ICON_UP_ANCHOR = <FontAwesomeIcon icon={faArrowUp} />;
+
+export const ICON_UPRIGHT_ANCHOR = <FontAwesomeIcon icon={faArrowUpRight} />;
+
+export const ICON_LEFT_ANCHOR = <FontAwesomeIcon icon={faArrowLeft} />;
+
+export const ICON_RIGHT_ANCHOR = <FontAwesomeIcon icon={faRightArrow} />;
+
+export const ICON_DOWNLEFT_ANCHOR = <FontAwesomeIcon icon={faArrowDownLeft} />;
+
+export const ICON_DOWN_ANCHOR = <FontAwesomeIcon icon={faArrowDown} />;
+
+export const ICON_DOWNRIGHT_ANCHOR = <FontAwesomeIcon icon={faArrowDownRight} />;
+
+export const ICON_CENTER_ANCHOR = <FontAwesomeIcon icon={faCircleSmall} />;

package/src/index.ts

@@ -66,6 +66,7 @@ import { ShortcutMenu } from './components/shortcut-menu/ShortcutMenu';
 import { ASSET_TYPES } from './constants/assets';
 import Portal from './components/portal/Portal';
 import AssetDetails from './components/asset-details/AssetDetails';
+import AnchorField from './components/anchor-field/AnchorField';
 
 /*
     Redux Handlers / Thunks
@@ -264,5 +265,6 @@ export {
     publishVersion,
     clearStoryPublishStatus,
     getStoryPublishStatus,
-    PublishStatusIndicator
+    PublishStatusIndicator,
+    AnchorField
 };