@imposium-hub/components 2.9.0-6 → 2.9.0-8

package/dist/esm/redux/actions/auth.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"auth.js","sourceRoot":"","sources":["../../../../src/redux/actions/auth.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,cAAc,GAAW,oBAAoB,CAAC;AAE3D,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,IAAe,EAAO,EAAE;IAC1C,IAAI,CAAC;QACD,YAAY,CAAC,OAAO,CAAC,cAAc,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;IAC/D,CAAC;IAAC,OAAO,CAAC,EAAE,CAAC;QACT,OAAO,CAAC,IAAI,CAAC,+BAA+B,CAAC,CAAC;IAClD,CAAC;IAED,OAAO,EAAE,IAAI,EAAE,OAAO,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC;AACzC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAQ,EAAE;IACrC,IAAI,CAAC;QACD,YAAY,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC;IAC5C,CAAC;IAAC,OAAO,CAAC,EAAE,CAAC;QACT,OAAO,CAAC,IAAI,CAAC,+BAA+B,CAAC,CAAC;IAClD,CAAC;IAED,OAAO,EAAE,IAAI,EAAE,OAAO,CAAC,KAAK,EAAE,CAAC;AACnC,CAAC,CAAC;AAEF,MAAM,OAAO,GAAG;IACZ,KAAK,EAAE,YAAY;IACnB,KAAK,EAAE,YAAY;CACtB,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/esm/redux/reducers/auth.d.ts

@@ -0,0 +1,3 @@
+import { IIdentity } from '../../services/Auth0';
+declare const auth: (state: IIdentity, action: any) => any;
+export default auth;

package/dist/esm/redux/reducers/auth.js

@@ -0,0 +1,27 @@
+import actions, { AUTH_CACHE_KEY } from '../actions/auth';
+import AuthService from '../../services/Auth0';
+let initialState = null;
+try {
+    const cachedAuth = JSON.parse(localStorage.getItem(AUTH_CACHE_KEY));
+    if (cachedAuth) {
+        const { idTokenPayload: { exp } } = cachedAuth;
+        if (AuthService.checkExpiry(exp)) {
+            initialState = cachedAuth;
+        }
+    }
+}
+catch (e) {
+    console.warn('Cached credentials were malformed or missing, redirected to login.');
+}
+const auth = (state = initialState, action) => {
+    switch (action.type) {
+        case actions.LOGIN:
+            return { ...action.auth };
+        case actions.CLEAR:
+            return null;
+        default:
+            return state;
+    }
+};
+export default auth;
+//# sourceMappingURL=auth.js.map

package/dist/esm/redux/reducers/auth.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"auth.js","sourceRoot":"","sources":["../../../../src/redux/reducers/auth.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,EAAE,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,WAA0B,MAAM,sBAAsB,CAAC;AAE9D,IAAI,YAAY,GAAc,IAAI,CAAC;AAEnC,IAAI,CAAC;IACD,MAAM,UAAU,GAAc,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC;IAE/E,IAAI,UAAU,EAAE,CAAC;QACb,MAAM,EACF,cAAc,EAAE,EAAE,GAAG,EAAE,EAC1B,GAAG,UAAU,CAAC;QAEf,IAAI,WAAW,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC;YAC/B,YAAY,GAAG,UAAU,CAAC;QAC9B,CAAC;IACL,CAAC;AACL,CAAC;AAAC,OAAO,CAAC,EAAE,CAAC;IACT,OAAO,CAAC,IAAI,CAAC,oEAAoE,CAAC,CAAC;AACvF,CAAC;AAED,MAAM,IAAI,GAAG,CAAC,KAAK,GAAG,YAAY,EAAE,MAAM,EAAE,EAAE;IAC1C,QAAQ,MAAM,CAAC,IAAI,EAAE,CAAC;QAClB,KAAK,OAAO,CAAC,KAAK;YACd,OAAO,EAAE,GAAG,MAAM,CAAC,IAAI,EAAE,CAAC;QAC9B,KAAK,OAAO,CAAC,KAAK;YACd,OAAO,IAAI,CAAC;QAChB;YACI,OAAO,KAAK,CAAC;IACrB,CAAC;AACL,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/esm/services/Auth0.d.ts

@@ -0,0 +1,18 @@
+export interface IIdentity {
+    accessToken: string;
+    expiry: number;
+    expiresIn: number;
+    idToken: string;
+    tokenType: string;
+    idTokenPayload: any;
+}
+export default class AuthService {
+    private static readonly IMPOSIUM_APP_DEFAULTS;
+    private static auth0Client;
+    static bindToClient: (clientID: string, domain: string) => void;
+    static login: () => void;
+    static logout: () => void;
+    static checkExpiry: (expiry: number) => boolean;
+    static parseIdFromHash: (hash: string) => Promise<IIdentity>;
+    static checkSession: () => Promise<IIdentity | Error>;
+}

package/dist/esm/services/Auth0.js

@@ -0,0 +1,68 @@
+import * as auth0 from 'auth0-js';
+export default class AuthService {
+    static IMPOSIUM_APP_DEFAULTS = {
+        scope: 'openid',
+        audience: 'https://api.4cinsights.io/',
+        responseType: 'token id_token',
+        redirectUri: `${window.location.origin}/auth`
+    };
+    // Auth0 JS client
+    static auth0Client;
+    /*
+        Initialize the auth0 web client with client ID for a given app-wrapper
+     */
+    static bindToClient = (clientID, domain) => {
+        AuthService.auth0Client = new auth0.WebAuth({
+            clientID,
+            domain,
+            ...AuthService.IMPOSIUM_APP_DEFAULTS
+        });
+    };
+    /*
+        redirect to auth0 for login
+     */
+    static login = () => {
+        AuthService.auth0Client.authorize();
+    };
+    /*
+        Re-direct to auth0 to cancel session & instruct auth0 to redirect back to login
+     */
+    static logout = () => {
+        AuthService.auth0Client.logout({ returnTo: `${window.location.origin}/auth` });
+    };
+    /*
+        Validate auth0 expiry timestamp
+     */
+    static checkExpiry = (expiry) => expiry > Date.now().valueOf() / 1000;
+    /*
+        Parse out identity from hash
+     */
+    static parseIdFromHash = (hash) => {
+        return new Promise((resolve, reject) => {
+            AuthService.auth0Client.parseHash({ options: hash }, (e, id) => {
+                if (!e) {
+                    resolve(id);
+                }
+                else {
+                    reject(e);
+                }
+            });
+        });
+    };
+    /*
+        Defer to auth0 web servers to check if users session is valid
+     */
+    static checkSession = () => {
+        return new Promise((resolve, reject) => {
+            AuthService.auth0Client.checkSession({}, (e, id) => {
+                if (!e) {
+                    resolve(id);
+                }
+                else {
+                    reject(e);
+                }
+            });
+        });
+    };
+}
+//# sourceMappingURL=Auth0.js.map

package/dist/esm/services/Auth0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Auth0.js","sourceRoot":"","sources":["../../../src/services/Auth0.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,UAAU,CAAC;AAWlC,MAAM,CAAC,OAAO,OAAO,WAAW;IACpB,MAAM,CAAU,qBAAqB,GAAQ;QACjD,KAAK,EAAE,QAAQ;QACf,QAAQ,EAAE,4BAA4B;QACtC,YAAY,EAAE,gBAAgB;QAC9B,WAAW,EAAE,GAAG,MAAM,CAAC,QAAQ,CAAC,MAAM,OAAO;KAChD,CAAC;IAEF,kBAAkB;IACV,MAAM,CAAC,WAAW,CAAgB;IAE1C;;OAEG;IACI,MAAM,CAAC,YAAY,GAAG,CAAC,QAAgB,EAAE,MAAc,EAAQ,EAAE;QACpE,WAAW,CAAC,WAAW,GAAG,IAAI,KAAK,CAAC,OAAO,CAAC;YACxC,QAAQ;YACR,MAAM;YACN,GAAG,WAAW,CAAC,qBAAqB;SACvC,CAAC,CAAC;IACP,CAAC,CAAC;IAEF;;OAEG;IACI,MAAM,CAAC,KAAK,GAAG,GAAS,EAAE;QAC7B,WAAW,CAAC,WAAW,CAAC,SAAS,EAAE,CAAC;IACxC,CAAC,CAAC;IAEF;;OAEG;IACI,MAAM,CAAC,MAAM,GAAG,GAAS,EAAE;QAC9B,WAAW,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC,QAAQ,CAAC,MAAM,OAAO,EAAE,CAAC,CAAC;IACnF,CAAC,CAAC;IAEF;;OAEG;IACI,MAAM,CAAC,WAAW,GAAG,CAAC,MAAc,EAAW,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC;IAE9F;;OAEG;IACI,MAAM,CAAC,eAAe,GAAG,CAAC,IAAY,EAAsB,EAAE;QACjE,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;YACnC,WAAW,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,CAAC,CAAQ,EAAE,EAAa,EAAE,EAAE;gBAC7E,IAAI,CAAC,CAAC,EAAE,CAAC;oBACL,OAAO,CAAC,EAAE,CAAC,CAAC;gBAChB,CAAC;qBAAM,CAAC;oBACJ,MAAM,CAAC,CAAC,CAAC,CAAC;gBACd,CAAC;YACL,CAAC,CAAC,CAAC;QACP,CAAC,CAAC,CAAC;IACP,CAAC,CAAC;IAEF;;OAEG;IACI,MAAM,CAAC,YAAY,GAAG,GAA+B,EAAE;QAC1D,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;YACnC,WAAW,CAAC,WAAW,CAAC,YAAY,CAAC,EAAE,EAAE,CAAC,CAAQ,EAAE,EAAa,EAAE,EAAE;gBACjE,IAAI,CAAC,CAAC,EAAE,CAAC;oBACL,OAAO,CAAC,EAAE,CAAC,CAAC;gBAChB,CAAC;qBAAM,CAAC;oBACJ,MAAM,CAAC,CAAC,CAAC,CAAC;gBACd,CAAC;YACL,CAAC,CAAC,CAAC;QACP,CAAC,CAAC,CAAC;IACP,CAAC,CAAC"}

package/dist/esm/services/Session.d.ts

@@ -0,0 +1,26 @@
+import { IIdentity } from './Auth0';
+export interface IHubSession {
+    sub: string;
+    organization_id: string;
+    story_id: string;
+}
+export default class SessionService {
+    private static readonly LOGIN_STORY_ID_CACHE;
+    private static readonly LOGIN_ORG_ID_CACHE;
+    private static readonly SESSION_COOKIE_NAME;
+    private static readonly FRESH_COOKIE;
+    static getAccessData: (idToken: string, baseUrl?: string, getTotalRenders?: boolean, accountId?: string) => Promise<any[]>;
+    static getSession: () => IHubSession;
+    static removeSession: () => void;
+    static buildFreshSession: (freshIdentity: IIdentity, orgId?: string, storyId?: string) => void;
+    static storeSession: (values: any, auth0Expiry: number) => void;
+    static cacheOrgId: (organizationId: string) => void;
+    static clearCachedOrgId: () => void;
+    static getCachedOrgId: () => string;
+    static cacheStoryId: (storyId: string) => void;
+    static clearCachedStoryId: () => void;
+    static getCachedStoryId: () => string;
+    static updateSession: (values: any, auth0Expiry: number) => void;
+    private static scrapeDomain;
+    private static determineAccessUrl;
+}

package/dist/esm/services/Session.js

@@ -0,0 +1,107 @@
+import * as Cookies from 'js-cookie';
+import axios from 'axios';
+export default class SessionService {
+    static LOGIN_STORY_ID_CACHE = 'imp_hub_last_story_id';
+    static LOGIN_ORG_ID_CACHE = 'imp_hub_last_org_id';
+    static SESSION_COOKIE_NAME = 'auth_state';
+    static FRESH_COOKIE = {
+        sub: '',
+        organization_id: '',
+        story_id: ''
+    };
+    /*
+        Get list of accessible services with themes from Imposium API
+    */
+    static getAccessData = (idToken, baseUrl, getTotalRenders = false, accountId) => {
+        return new Promise((resolve, reject) => {
+            let accessUrl = baseUrl ? `${baseUrl}/access` : SessionService.determineAccessUrl();
+            const headers = { Authorization: `Bearer ${idToken}` };
+            if (getTotalRenders) {
+                accessUrl += '?include_total_renders=true';
+            }
+            if (accountId && accountId !== 'undefined') {
+                headers['X-Imposium-Account-Id'] = accountId;
+            }
+            axios
+                .get(accessUrl, { headers })
+                .then((res) => {
+                resolve(res.data ? res.data : []);
+            })
+                .catch((e) => {
+                reject(e);
+            });
+        });
+    };
+    static getSession = () => Cookies.getJSON(SessionService.SESSION_COOKIE_NAME);
+    static removeSession = () => {
+        const domain = SessionService.scrapeDomain();
+        Cookies.remove(SessionService.SESSION_COOKIE_NAME, { domain });
+        SessionService.clearCachedOrgId();
+        SessionService.clearCachedStoryId();
+    };
+    static buildFreshSession = (freshIdentity, orgId = null, storyId = null) => {
+        const { idTokenPayload: { sub, exp } } = freshIdentity;
+        const freshSession = {
+            sub
+        };
+        if (orgId) {
+            freshSession.organization_id = orgId;
+        }
+        if (storyId) {
+            freshSession.story_id = storyId;
+        }
+        SessionService.storeSession(freshSession, exp);
+    };
+    static storeSession = (values, auth0Expiry) => {
+        const cookieData = { ...SessionService.FRESH_COOKIE, ...values };
+        const domain = SessionService.scrapeDomain();
+        const expiry = new Date(auth0Expiry * 1000);
+        Cookies.set(SessionService.SESSION_COOKIE_NAME, cookieData, { domain, expires: expiry });
+    };
+    static cacheOrgId = (organizationId) => {
+        localStorage.setItem(SessionService.LOGIN_ORG_ID_CACHE, organizationId);
+    };
+    static clearCachedOrgId = () => {
+        localStorage.removeItem(SessionService.LOGIN_ORG_ID_CACHE);
+    };
+    static getCachedOrgId = () => {
+        return localStorage.getItem(SessionService.LOGIN_ORG_ID_CACHE);
+    };
+    static cacheStoryId = (storyId) => {
+        localStorage.setItem(SessionService.LOGIN_STORY_ID_CACHE, storyId);
+    };
+    static clearCachedStoryId = () => {
+        localStorage.removeItem(SessionService.LOGIN_STORY_ID_CACHE);
+    };
+    static getCachedStoryId = () => {
+        return localStorage.getItem(SessionService.LOGIN_STORY_ID_CACHE);
+    };
+    static updateSession = (values, auth0Expiry) => {
+        const prevCookieData = SessionService.getSession();
+        const nextCookieData = { ...prevCookieData, ...values };
+        SessionService.storeSession(nextCookieData, auth0Expiry);
+    };
+    /*
+        Determine which domain to assign cookie to
+     */
+    static scrapeDomain = () => {
+        const domainParts = window.location.host.split('.').reverse();
+        return domainParts.length > 2 ? `.${domainParts[1]}.${domainParts[0].split(':')[0]}` : null;
+    };
+    /*
+        Figure out which access endpoint to hit based on env
+    */
+    static determineAccessUrl = () => {
+        const { location: { hostname, host } } = window;
+        if (hostname === 'localhost') {
+            return 'https://api/access';
+        }
+        else if (host.includes('.staging.')) {
+            return 'https://api.staging.imposium.com/access';
+        }
+        else {
+            return 'https://api.imposium.com/access';
+        }
+    };
+}
+//# sourceMappingURL=Session.js.map

package/dist/esm/services/Session.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Session.js","sourceRoot":"","sources":["../../../src/services/Session.ts"],"names":[],"mappings":"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"}

package/dist/styles.css

@@ -1506,6 +1506,9 @@ body a {
   width: calc(100% - 30px);
   margin: 0px;
 }
+.slider-field input.toggle {
+  width: calc(100% - 30px - 18px);
+}
 .slider-field .val {
   display: inline-block;
   vertical-align: top;
@@ -1520,6 +1523,47 @@ body a {
   box-sizing: border-box;
   background: #272727;
 }
+.slider-field .checkbox {
+  display: inline-block;
+  background: #1d1d1d;
+  border: none;
+  color: #dfdfdf;
+  font-size: 12px;
+  box-sizing: border-box;
+  vertical-align: top;
+  height: 20px;
+  width: 100%;
+  font-family: 'Roboto Condensed', sans-serif;
+  border-radius: 0;
+  appearance: none;
+  line-height: 10px;
+  border: 1px solid #353535;
+  border-radius: 2px;
+  width: 18px;
+  height: 18px;
+  padding: 2px;
+  cursor: pointer;
+}
+.slider-field .checkbox:hover {
+  background: #151515;
+}
+.slider-field .checkbox:focus {
+  background: #151515;
+}
+.slider-field .checkbox:disabled {
+  color: rgba(223, 223, 223, 0.4);
+  background: #1d1d1d;
+  pointer-events: none;
+}
+.slider-field .checkbox:disabled:focus {
+  background: #1d1d1d;
+}
+.slider-field .checkbox:disabled:hover {
+  background: #1d1d1d;
+}
+.slider-field .checkbox .fa-check {
+  margin-left: 1px;
+}
 .color-field .form-field-content.label-top .picker {
   top: 40px;
 }

package/dist/styles.less

@@ -1549,6 +1549,10 @@ body{
 	input{
 		width:calc(100% - @sliderValWidth);
 		margin:0px;
+
+		&.toggle{
+			width:calc(100% - @sliderValWidth - 18px);
+		}
 	}
 
 	.val{
@@ -1565,6 +1569,21 @@ body{
 		box-sizing:border-box;
 		background:lighten(@inputBackground, 4%);
 	}
+
+	.checkbox{
+		.inputMixin;
+		line-height: 10px;
+		border: 1px solid @backgroundLight;
+		border-radius: 2px;
+		width:18px;
+		height:18px;
+		padding:2px;
+		cursor: pointer;
+
+		.fa-check {
+			margin-left: 1px;
+		}
+	}
 }
 
 .color-field{

package/less/components/form-field.less

@@ -215,6 +215,10 @@
 	input{
 		width:calc(100% - @sliderValWidth);
 		margin:0px;
+
+		&.toggle{
+			width:calc(100% - @sliderValWidth - 18px);
+		}
 	}
 
 	.val{
@@ -231,6 +235,21 @@
 		box-sizing:border-box;
 		background:lighten(@inputBackground, 4%);
 	}
+
+	.checkbox{
+		.inputMixin;
+		line-height: 10px;
+		border: 1px solid @backgroundLight;
+		border-radius: 2px;
+		width:18px;
+		height:18px;
+		padding:2px;
+		cursor: pointer;
+
+		.fa-check {
+			margin-left: 1px;
+		}
+	}
 }
 
 .color-field{

package/package.json

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

package/src/components/replace-files-modal/ReplaceFilesModal.tsx

@@ -67,17 +67,25 @@ export const ReplaceFilesModal = () => {
                 const updateFile =
                     curIndex === 0
                         ? props.existedAssets[i]
-                        : props.existedAssets.slice(curIndex)[i];
-                updateFile['assetId'] =
-                    curIndex === 0
-                        ? props.existedAssetIds[i]
-                        : props.existedAssetIds.slice(curIndex)[i];
-                updatedAssets.push(updateFile);
+                        : [
+                              ...props.existedAssets.slice(0, curIndex - 1),
+                              ...props.existedAssets.slice(curIndex)
+                          ][i];
+
+                if (updateFile) {
+                    updateFile['assetId'] =
+                        curIndex === 0
+                            ? props.existedAssetIds[i]
+                            : [
+                                  ...props.existedAssetIds.slice(0, curIndex - 1),
+                                  ...props.existedAssetIds.slice(curIndex)
+                              ][i];
+                    updatedAssets.push(updateFile);
+                    props.onInstantUpload(updatedAssets);
+                    setIndex(0);
+                    onClose();
+                }
             }
-
-            props.onUpload(updatedAssets);
-            setIndex(0);
-            onClose();
         } else {
             if (newIndex === props.existedAssets.length) {
                 setIndex(0);

package/src/components/slider-field/SliderField.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import FieldWrapper from '../field-wrapper/FieldWrapper';
 import { IToolTipConfig } from '../Tooltip';
+import { ICON_CHECK } from '../../constants/icons';
 
 interface ISliderFieldProps {
     label?: any;
@@ -15,6 +16,7 @@ interface ISliderFieldProps {
     info?: string;
     labelPosition?: string;
     labelWidth?: string | number;
+    enabledToggle?: boolean;
 }
 
 interface ISliderFieldState {
@@ -37,6 +39,7 @@ class SliderField extends React.PureComponent<ISliderFieldProps, ISliderFieldSta
     }
 
     private updateValue(val) {
+        console.log('updateValue', val);
         this.props.onChange(val);
     }
 
@@ -69,6 +72,14 @@ class SliderField extends React.PureComponent<ISliderFieldProps, ISliderFieldSta
         }
     }
 
+    private toggle() {
+        if (this.props.value !== undefined && this.props.value !== null) {
+            this.props.onChange(null);
+        } else {
+            this.props.onChange(this.props.defaultValue);
+        }
+    }
+
     public render() {
         const {
             label,
@@ -81,16 +92,15 @@ class SliderField extends React.PureComponent<ISliderFieldProps, ISliderFieldSta
             tooltip,
             info,
             labelPosition,
-            labelWidth
+            labelWidth,
+            enabledToggle
         } = this.props;
         const { tempValue } = this.state;
+        const valueSet = value !== null && value !== undefined;
+        const val = tempValue !== null ? tempValue : !valueSet ? defaultValue : value;
 
-        const val =
-            tempValue !== null
-                ? tempValue
-                : value === null || value === undefined
-                ? defaultValue
-                : value;
+        const showInputs = (enabledToggle && valueSet) || !enabledToggle;
+        const icon = valueSet ? ICON_CHECK : null;
 
         return (
             <FieldWrapper
@@ -101,21 +111,34 @@ class SliderField extends React.PureComponent<ISliderFieldProps, ISliderFieldSta
                 labelPosition={labelPosition}
                 labelWidth={labelWidth}
                 width={width}>
-                <input
-                    onChange={(e) => this.rangeInputChange(e)}
-                    type='range'
-                    min={min}
-                    max={max}
-                    value={val}
-                    step={step}
-                />
-
-                <input
-                    className='val'
-                    onChange={(e) => this.numberInputChange(e)}
-                    type='number'
-                    value={val}
-                />
+                {enabledToggle && (
+                    <div
+                        className='checkbox'
+                        onClick={(e) => this.toggle()}>
+                        {icon}
+                    </div>
+                )}
+
+                {showInputs && (
+                    <input
+                        className={enabledToggle ? 'toggle' : ''}
+                        onChange={(e) => this.rangeInputChange(e)}
+                        type='range'
+                        min={min}
+                        max={max}
+                        value={val}
+                        step={step}
+                    />
+                )}
+
+                {showInputs && (
+                    <input
+                        className='val'
+                        onChange={(e) => this.numberInputChange(e)}
+                        type='number'
+                        value={val}
+                    />
+                )}
             </FieldWrapper>
         );
     }