@imposium-hub/components 1.54.3 → 1.54.4

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

@@ -1,5 +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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imposium-hub/components",
-    "version": "1.54.3",
+    "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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { FONT_SIZES } from '../../constants/fontSizes';
 import FieldWrapper from '../field-wrapper/FieldWrapper';
 import { IToolTipConfig } from '../Tooltip';
 
@@ -15,11 +16,13 @@ interface IAdvancedNumberFieldProps {
     labelPosition?: string;
     min?: number;
     max?: number;
+    toggleRef?: any;
 }
 
 interface IAdvancedNumberFieldState {
     error: boolean;
     value: number;
+    showDropDown: boolean;
 }
 
 class AdvancedNumberField extends React.PureComponent<
@@ -32,7 +35,8 @@ class AdvancedNumberField extends React.PureComponent<
         super(props);
         this.state = {
             error: false,
-            value: this.props.value
+            value: this.props.value,
+            showDropDown: false
         };
         this.inputRef = React.createRef();
     }
@@ -107,6 +111,11 @@ class AdvancedNumberField extends React.PureComponent<
         this.props.onChange(newVal);
     }
 
+    private changeSizes(size) {
+        this.validate(null, size);
+        this.setState({ showDropDown: !this.state.showDropDown });
+    }
+
     public render() {
         let error: string = null;
 
@@ -122,7 +131,11 @@ class AdvancedNumberField extends React.PureComponent<
             min,
             max
         } = this.props;
+
+        const { showDropDown } = this.state;
+
         let value: any = this.state.value;
+
         if (value === null) {
             value = '';
         }
@@ -139,11 +152,25 @@ class AdvancedNumberField extends React.PureComponent<
             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' : ''}`}
-                // draggableValue = {true}
-                // onDrag = {(v)=>this.handleLabelDrag(v)}
                 label={label}
                 tooltip={tooltip}
                 buttons={buttons}
@@ -152,8 +179,8 @@ class AdvancedNumberField extends React.PureComponent<
                 width={width}>
                 <input
                     type='button'
+                    className='minus-font-size'
                     value='-'
-                    className='button-minus'
                     onClick={() => this.decrementValue()}
                 />
                 <input
@@ -168,11 +195,16 @@ class AdvancedNumberField extends React.PureComponent<
                     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='+'
-                    className='button-plus'
                     onClick={() => this.incrementValue()}
                 />
             </FieldWrapper>

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} />;