@imposium-hub/components 1.54.2 → 1.54.4

package/less/components/advanced-number-field.less

@@ -0,0 +1,78 @@
+.advanced-number-field {
+    .form-field-content {
+        display: flex;
+        .number-input{
+            text-align: center;
+        }
+        .btn-default {
+            position: relative;
+            bottom: 2px;
+            padding: 3px 0px;
+            border: unset;
+        }
+        .minus-font-size, .add-font-size{
+            max-width: 20px;
+        }
+        .font-size-list {
+            position: absolute;
+            z-index: 1;
+            margin: 0;
+            padding: 0;
+            overflow-x: hidden;
+            overflow-y: auto;
+            background: #1d1d1d;
+            box-shadow: 1px 1px 3px rgb(0 0 0 / 20%);
+            transition: 0.3s;
+            -webkit-overflow-scrolling: touch;
+            width: 96px;
+            text-align: center;
+            right: 23px;
+            top: 40px;
+            max-height: 200px;
+            .font-size-item {
+                height: 20px;
+                list-style: none;
+                .font-size-btn{
+                    background-color: transparent;
+                    color: white;
+                    border: none;
+                    padding: 5px;
+                    border-bottom: 1px solid #494949;
+                    width: 100%;
+                    font-size: 12px;
+                    font-family: 'Roboto Condensed', sans-serif;
+                    padding-left: 14px;
+                    &:last-child {
+                        border-bottom: unset;
+                    }
+        
+                    &:hover {
+                        background-color: #494949;
+                    }
+                }
+            }
+
+        }
+        // .font-sizes-menu{
+        //     max-height: 400px;
+        //     display: flex;
+        //     flex-direction: column;
+        //     overflow: auto;
+        //     width: 86px;
+        //     .btn-change-font-size{
+        //         background-color: transparent;
+        //         color: white;
+        //         border: none;
+        //         padding: 5px;
+        //         border-bottom: 1px solid #494949;
+        //         &:last-child {
+        //             border-bottom: unset;
+        //         }
+    
+        //         &:hover {
+        //             background-color: #494949;
+        //         }
+        //     }
+        // }
+    }
+}

package/less/entry.less

@@ -34,4 +34,5 @@
 @import (inline) "components/toast.less";
 @import (inline) "components/tooltip.less";
 @import (inline) "components/variable-default-upload.less";
-@import (inline) "components/anchor-field.less";
+@import (inline) "components/anchor-field.less";
+@import (inline) "components/advanced-number-field.less";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imposium-hub/components",
-    "version": "1.54.2",
+    "version": "1.54.4",
     "description": "React & Typescript component / asset library for Imposium front-ends",
     "main": "./dist/cjs/index.js",
     "module": "./dist/esm/index.js",

package/src/components/advanced-number-field/AdvancedNumberField.tsx

@@ -0,0 +1,215 @@
+import * as React from 'react';
+import { FONT_SIZES } from '../../constants/fontSizes';
+import FieldWrapper from '../field-wrapper/FieldWrapper';
+import { IToolTipConfig } from '../Tooltip';
+
+interface IAdvancedNumberFieldProps {
+    buttons?: any;
+    label?: string;
+    placeholder?: string;
+    readOnly?: boolean;
+    value: number;
+    tooltip?: IToolTipConfig | string;
+    width?: string | number;
+    onChange?(e): void;
+    info?: string;
+    labelPosition?: string;
+    min?: number;
+    max?: number;
+    toggleRef?: any;
+}
+
+interface IAdvancedNumberFieldState {
+    error: boolean;
+    value: number;
+    showDropDown: boolean;
+}
+
+class AdvancedNumberField extends React.PureComponent<
+    IAdvancedNumberFieldProps,
+    IAdvancedNumberFieldState
+> {
+    private inputRef: any;
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            error: false,
+            value: this.props.value,
+            showDropDown: false
+        };
+        this.inputRef = React.createRef();
+    }
+
+    public componentDidMount(): void {
+        this.setState({
+            error: false,
+            value: this.props.value
+        });
+    }
+
+    public componentDidUpdate(prevProps): void {
+        if (prevProps.value !== this.props.value) {
+            this.setState({
+                error: false,
+                value: this.props.value
+            });
+        }
+    }
+
+    private validate(e, btnValue?) {
+        const { max, min } = this.props;
+        const val = e !== null ? e.target.value : btnValue;
+        this.setState({ value: val });
+        if (min || max) {
+            if (val < min || val > max) {
+                this.setState({ error: true });
+            } else {
+                this.setState({ error: false });
+                this.onChange(val);
+            }
+        } else {
+            this.onChange(val);
+        }
+    }
+
+    private onChange(value) {
+        let val = value;
+        if (val === '') {
+            val = null;
+        } else {
+            val = parseFloat(val);
+        }
+
+        this.props.onChange(val);
+    }
+
+    private incrementValue() {
+        const { value } = this.state;
+        this.validate(null, value + 1);
+    }
+
+    private decrementValue() {
+        const { value } = this.state;
+        this.validate(null, value - 1);
+    }
+
+    private onSelectFocus() {
+        // if (this.props.value && this.inputRef.current) {
+        //     this.inputRef.current.setSelectionRange(0, this.props.value.toString().length);
+        // }
+    }
+
+    private onSelectBlur() {
+        // if (this.inputRef.current) {
+        //     this.inputRef.current.setSelectionRange(0, 0);
+        // }
+    }
+
+    private handleLabelDrag(v: number) {
+        const newVal = this.props.value + v;
+        this.props.onChange(newVal);
+    }
+
+    private changeSizes(size) {
+        this.validate(null, size);
+        this.setState({ showDropDown: !this.state.showDropDown });
+    }
+
+    public render() {
+        let error: string = null;
+
+        const {
+            label,
+            placeholder,
+            width,
+            readOnly,
+            buttons,
+            tooltip,
+            info,
+            labelPosition,
+            min,
+            max
+        } = this.props;
+
+        const { showDropDown } = this.state;
+
+        let value: any = this.state.value;
+
+        if (value === null) {
+            value = '';
+        }
+
+        if (this.state.error) {
+            if (min && !max) {
+                error = `Value must be greater than or equal to ${min}.`;
+            } else if (!min && max) {
+                error = `Value must be less than or equal to ${max}.`;
+            } else if (min && max) {
+                error = `Value must be between ${min} and ${max}.`;
+            }
+        } else {
+            error = info;
+        }
+
+        const fontSizeInner: JSX.Element = (
+            <ul className='font-size-list'>
+                {FONT_SIZES.map((s: any) => (
+                    <li
+                        key={s}
+                        className='font-size-item'>
+                        <button
+                            className='font-size-btn'
+                            onClick={() => this.changeSizes(s)}>
+                            {s}
+                        </button>
+                    </li>
+                ))}
+            </ul>
+        );
+
+        return (
+            <FieldWrapper
+                customClass={`advanced-number-field ${this.state.error ? 'invalid' : ''}`}
+                label={label}
+                tooltip={tooltip}
+                buttons={buttons}
+                info={error}
+                labelPosition={labelPosition}
+                width={width}>
+                <input
+                    type='button'
+                    className='minus-font-size'
+                    value='-'
+                    onClick={() => this.decrementValue()}
+                />
+                <input
+                    ref={this.inputRef}
+                    type='number'
+                    pattern='/^-?(0|[1-9]\d*)(\.\d+)?$/'
+                    placeholder={placeholder}
+                    value={value}
+                    readOnly={readOnly}
+                    min={min}
+                    max={max}
+                    onFocus={() => this.onSelectFocus()}
+                    onBlur={() => this.onSelectBlur()}
+                    onChange={(e) => this.validate(e)}
+                    onClick={() => {
+                        this.setState({ showDropDown: !this.state.showDropDown });
+                    }}
+                    className='number-input'
+                />
+                {showDropDown ? fontSizeInner : null}
+                <input
+                    type='button'
+                    className='add-font-size'
+                    value='+'
+                    onClick={() => this.incrementValue()}
+                />
+            </FieldWrapper>
+        );
+    }
+}
+
+export default AdvancedNumberField;

package/src/constants/fontSizes.ts

@@ -0,0 +1 @@
+export const FONT_SIZES = [8, 9, 10, 12, 14, 18, 24, 30, 36, 48, 60, 72, 96];

package/src/constants/icons.tsx

@@ -66,10 +66,12 @@ import {
     faArrowUpLeft,
     faArrowUpRight,
     faArrowDownLeft,
-    faArrowDownRight
+    faArrowDownRight,
+    faMinus
 } from '@fortawesome/pro-light-svg-icons';
 import { faCircleSmall } from '@fortawesome/pro-solid-svg-icons/faCircleSmall';
 import { faClapperboardPlay } from '@fortawesome/pro-solid-svg-icons/faClapperboardPlay';
+
 export const ICON_VIDEO = <FontAwesomeIcon icon={faVideo} />;
 
 export const ICON_IMAGE = <FontAwesomeIcon icon={faImage} />;
@@ -108,6 +110,8 @@ export const ICON_SEARCH = <FontAwesomeIcon icon={faSearch} />;
 
 export const ICON_PLUS = <FontAwesomeIcon icon={faPlus} />;
 
+export const ICON_MINUS = <FontAwesomeIcon icon={faMinus} />;
+
 export const ICON_CLIPBOARD = <FontAwesomeIcon icon={faClipboard} />;
 
 export const ICON_EXCLAIMATION_TRIANGLE = <FontAwesomeIcon icon={faExclamationTriangle} />;

package/src/index.ts

@@ -141,6 +141,7 @@ import {
 } from './Util';
 import PublishStatusIndicator from './components/publish-wizard/publish/PublishStatusIndicator';
 import { getMediaPreviewStyle } from './utils/assets';
+import AdvancedNumberField from './components/advanced-number-field/AdvancedNumberField';
 
 export {
     AppWrapper,
@@ -160,6 +161,7 @@ export {
     HRule,
     ListField,
     Modal,
+    AdvancedNumberField,
     NumberField,
     SelectField,
     ColorField,

package/src/services/API.ts

@@ -107,6 +107,7 @@ export interface IImposiumAPI {
         name?: string
     ): Promise<any | Error>;
     getAccountInfo(orgId: string): Promise<any | Error>;
+    saveQueueAssoc(queueId: string, storyId: string, distributed: boolean);
 }
 
 interface ICancelTokenCache {
@@ -184,6 +185,18 @@ export default class API {
         });
     };
 
+    public saveQueueAssoc = (
+        queueId: string,
+        storyId: string,
+        distributed: boolean
+    ): Promise<any> => {
+        return this.doRequest({
+            method: 'PATCH',
+            params: { distributed },
+            url: `/queue/${queueId}/${storyId}`
+        });
+    };
+
     private cancelPrevious = (reqAlias: string): CancelToken => {
         const source: CancelTokenSource = axios.CancelToken.source();