@threekit-tools/treble 0.0.38 → 0.0.42

package/README.md

@@ -261,11 +261,10 @@ The `<Player />` component renders the **Threekit Player**.
 
 ```jsx
 import { ThreekitProvider, Player } from '@threekit-tools/treble';
-import threekitConfig from './threekit.config.js';
 
 const ThreekitApp = () => {
   return (
-    <ThreekitProvider {...threekitConfig}>
+    <ThreekitProvider>
       <Player />
     </ThreekitProvider>
   );
@@ -278,7 +277,6 @@ The Player Component also comes with **widget containers** that can be used to p
 
 ```jsx
 import { ThreekitProvider, Player } from '@threekit-tools/treble';
-import threekitConfig from './threekit.config.js';
 
 //  We can separate out the widget container component
 //  or use the component directly from the Player component
@@ -311,7 +309,6 @@ The `<FlatForm>` component is used to render out the configurator for the initia
 
 ```jsx
 import { ThreekitProvider, FlatForm } from '@threekit-tools/treble';
-import threekitConfig from './threekit.config.js';
 
 const App = () => {
   return (
@@ -357,7 +354,6 @@ By default the Form will not render reserved attributes. This can be controlled/
 
 ```jsx
 import { ThreekitProvider, FlatForm } from '@threekit-tools/treble';
-import threekitConfig from './threekit.config.js';
 
 const App = () => {
   const attributes = {

package/dist/components/Accordion/index.d.ts

@@ -2,7 +2,8 @@ import React from 'react';
 interface AccordionItemProps extends React.FC {
     selected: boolean;
     label: string;
-    handleClick: () => void;
+    handleSelect: () => void;
+    onClick: () => void;
 }
 interface AccordionProps<T> {
     children: React.FunctionComponentElement<T>;

package/dist/components/Accordion/index.js

@@ -27,9 +27,9 @@ var react_1 = __importStar(require("react"));
 var accordion_styles_1 = require("./accordion.styles");
 var CaretDown_1 = __importDefault(require("../../icons/CaretDown"));
 var AccordionItem = function (props) {
-    var selected = props.selected, handleClick = props.handleClick, label = props.label, children = props.children;
+    var selected = props.selected, handleSelect = props.handleSelect, label = props.label, children = props.children;
     return (react_1.default.createElement(accordion_styles_1.Wrapper, { selected: selected },
-        react_1.default.createElement("div", { onClick: handleClick },
+        react_1.default.createElement("div", { onClick: handleSelect },
             react_1.default.createElement("div", null, label),
             react_1.default.createElement("div", null),
             react_1.default.createElement("div", null,
@@ -54,7 +54,11 @@ var Accordion = function (props) {
             return null;
         return react_1.default.cloneElement(child, {
             selected: selected === idx,
-            handleClick: function () { return handleSelect(idx); },
+            handleSelect: function () {
+                if (child.props.onClick)
+                    child.props.onClick();
+                handleSelect(idx);
+            },
         });
     });
 };

package/dist/components/Player/index.js

@@ -36,12 +36,16 @@ var Player = function (props) {
         width: '100%',
     }, props), height = _a.height, width = _a.width, minHeight = _a.minHeight, children = _a.children;
     var hasMoved = (0, react_1.useRef)(false);
-    var portalPlayerTo = (0, usePlayerPortal_1.default)();
+    var _b = (0, usePlayerPortal_1.default)(), portalPlayerTo = _b[0], portalBack = _b[1];
     (0, react_1.useEffect)(function () {
         if (portalPlayerTo && !hasMoved.current) {
             portalPlayerTo(exports.PLAYER_DIV_ID);
             hasMoved.current = true;
         }
+        return function () {
+            if (portalBack)
+                portalBack();
+        };
     });
     return (react_1.default.createElement(player_styles_1.Wrapper, { height: height, width: width, minHeight: minHeight, className: className },
         react_1.default.createElement("div", { id: exports.PLAYER_DIV_ID }),

package/dist/components/ProductName/index.js

@@ -15,7 +15,7 @@ var ProductName = function (props) {
     if (!(title === null || title === void 0 ? void 0 : title.length) && !name)
         return null;
     var cls = (0, utils_1.generateDisplayClassName)('title', customClassName);
-    return (react_1.default.createElement(productName_styles_1.Wrapper, { align: align, className: cls }, name || title));
+    return (react_1.default.createElement(productName_styles_1.Wrapper, { align: align, className: cls }, title || name));
 };
 exports.ProductName = ProductName;
 exports.ProductName.propTypes = {

package/dist/components/Tabs/index.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
 interface TabPaneProps extends React.FC {
-    selected: boolean;
     label: string;
-    handleClick: () => void;
+    onClick: () => void;
 }
 interface TabsProps<T> {
     children: React.FunctionComponentElement<T>;

package/dist/components/Tabs/index.js

@@ -26,26 +26,25 @@ var TabPane = function (props) { return react_1.default.createElement(react_1.de
 var Tabs = function (_a) {
     var children = _a.children;
     var _b = (0, react_1.useState)(0), selected = _b[0], setSelected = _b[1];
-    var handleSelect = function (idx) {
-        return setSelected(idx === selected ? undefined : idx);
-    };
+    var handleSelect = function (idx) { return setSelected(idx); };
     if (!children)
         return null;
     return (react_1.default.createElement(tabs_styles_1.Wrapper, null,
         react_1.default.createElement(tabs_styles_1.TabsWrapper, null, react_1.default.Children.map(children, function (child, idx) {
             if (child.type !== TabPane)
                 return null;
-            return (react_1.default.createElement(tabs_styles_1.Tab, { selected: selected === idx, onClick: function () { return handleSelect(idx); } }, child.props.label));
+            return (react_1.default.createElement(tabs_styles_1.Tab, { selected: selected === idx, onClick: function () {
+                    if (child.props.onClick)
+                        child.props.onClick();
+                    handleSelect(idx);
+                } }, child.props.label));
         })),
         react_1.default.createElement(tabs_styles_1.TabContent, null, react_1.default.Children.map(children, function (child, idx) {
             if (child.type !== TabPane)
                 return null;
             if (selected !== idx)
                 return null;
-            return react_1.default.cloneElement(child, {
-                selected: selected === idx,
-                handleClick: function () { return handleSelect(idx); },
-            });
+            return child;
         }))));
 };
 exports.Tabs = Tabs;

package/dist/components/ThreekitProvider/index.js

@@ -33,8 +33,8 @@ var App = function (props) {
     var dispatch = (0, store_1.useThreekitDispatch)();
     (0, react_1.useEffect)(function () {
         var init = function () {
-            var playerConfig = props.playerConfig, project = props.project, locale = props.locale, threekitEnv = props.threekitEnv;
-            dispatch((0, threekit_1.launch)({ playerConfig: playerConfig, project: project, locale: locale, threekitEnv: threekitEnv }));
+            var playerConfig = props.playerConfig, project = props.project, locale = props.locale, threekitEnv = props.threekitEnv, eventHandlers = props.eventHandlers;
+            dispatch((0, threekit_1.launch)({ playerConfig: playerConfig, project: project, locale: locale, threekitEnv: threekitEnv, eventHandlers: eventHandlers }));
         };
         init();
         return;

package/dist/components/TrebleApp/index.js

@@ -33,7 +33,6 @@ function TrebleApp(props) {
     var _a;
     var project = props.project, productId = props.productId, playerConfig = props.playerConfig, threekitEnv = props.threekitEnv, locale = props.locale, theme = props.theme;
     var config = constants_1.IS_TREBLE_SCRIPTS ? (0, utils_1.loadTrebleConfig)() : {};
-    console.log(config);
     if (!((_a = config.treble) === null || _a === void 0 ? void 0 : _a.productsCtx)) {
         console.error('Treble Config is not setup correctly');
         return null;

package/dist/constants.d.ts

@@ -21,6 +21,7 @@ export declare const TK_SAVED_CONFIG_PARAM_KEY = "tkConfigId";
 /*****************************************************
  * Threekit Player Initialization Defaults
  ****************************************************/
+export declare const TK_PLAYER_LOADER_DIV = "tk-ply-loader";
 export declare const TK_PLAYER_ROOT_DIV = "tk-ply-root";
 export declare const DEFAULT_PLAYER_CONFIG: {
     showConfigurator: boolean;

package/dist/constants.js

@@ -4,7 +4,7 @@
  ****************************************************/
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WISHLIST_LOCALSTORAGE_KEY = exports.SNAPSHOT_OUTPUTS = exports.SNAPSHOT_FORMATS = exports.METADATA_RESERVED = exports.ATTRIBUTES_RESERVED = exports.SORT_OPTIONS = exports.ATTRIBUTE_TYPES = exports.DEFAULT_PLAYER_CONFIG = exports.TK_PLAYER_ROOT_DIV = exports.TK_SAVED_CONFIG_PARAM_KEY = exports.TK_PRODUCT_ID_PARAM_KEY = exports.IS_TREBLE_SCRIPTS = exports.FORM_CLASS_NAME = exports.DISPLAY_CLASS_NAME = exports.TOOL_CLASS_NAME = exports.LAYOUT_CLASS_NAME = exports.WIDGET_CLASS_NAME = exports.INPUT_COMPONENT_CLASS_NAME = exports.CLASS_NAME_PREFIX = exports.DEFAULT_CLASS_NAME = void 0;
+exports.WISHLIST_LOCALSTORAGE_KEY = exports.SNAPSHOT_OUTPUTS = exports.SNAPSHOT_FORMATS = exports.METADATA_RESERVED = exports.ATTRIBUTES_RESERVED = exports.SORT_OPTIONS = exports.ATTRIBUTE_TYPES = exports.DEFAULT_PLAYER_CONFIG = exports.TK_PLAYER_ROOT_DIV = exports.TK_PLAYER_LOADER_DIV = exports.TK_SAVED_CONFIG_PARAM_KEY = exports.TK_PRODUCT_ID_PARAM_KEY = exports.IS_TREBLE_SCRIPTS = exports.FORM_CLASS_NAME = exports.DISPLAY_CLASS_NAME = exports.TOOL_CLASS_NAME = exports.LAYOUT_CLASS_NAME = exports.WIDGET_CLASS_NAME = exports.INPUT_COMPONENT_CLASS_NAME = exports.CLASS_NAME_PREFIX = exports.DEFAULT_CLASS_NAME = void 0;
 exports.DEFAULT_CLASS_NAME = 'threekit-react';
 exports.CLASS_NAME_PREFIX = 'tk';
 exports.INPUT_COMPONENT_CLASS_NAME = "".concat(exports.DEFAULT_CLASS_NAME, " ").concat(exports.CLASS_NAME_PREFIX, "-input");
@@ -25,6 +25,7 @@ exports.TK_SAVED_CONFIG_PARAM_KEY = 'tkConfigId';
 /*****************************************************
  * Threekit Player Initialization Defaults
  ****************************************************/
+exports.TK_PLAYER_LOADER_DIV = 'tk-ply-loader';
 exports.TK_PLAYER_ROOT_DIV = 'tk-ply-root';
 exports.DEFAULT_PLAYER_CONFIG = {
     // authToken: undefined,

package/dist/hooks/usePlayerPortal/index.d.ts

@@ -1,2 +1,3 @@
-declare const usePlayerPortal: () => ((toEl: string) => void) | undefined;
+declare type UsePlayerPortal = [undefined, undefined] | [(toEl: string) => void, () => void];
+declare const usePlayerPortal: () => UsePlayerPortal;
 export default usePlayerPortal;

package/dist/hooks/usePlayerPortal/index.js

@@ -1,22 +1,43 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
 var react_redux_1 = require("react-redux");
 var threekit_1 = require("../../store/threekit");
+var constants_1 = require("../../constants");
 var usePlayerPortal = function () {
+    var htmlElements = (0, react_1.useRef)({
+        player: null,
+        playerLoader: null,
+        playerWrapper: null,
+    });
     var playerElementId = (0, react_redux_1.useSelector)(threekit_1.getPlayerElementId);
     if (!playerElementId)
-        return undefined;
+        return [undefined, undefined];
     var portalPlayerTo = function (toEl) {
         if (!toEl)
             return;
-        var playerEl = document.getElementById(playerElementId);
-        var playerWrapperEl = document.getElementById(toEl);
-        if (!playerEl)
+        if (!htmlElements.current.player)
+            htmlElements.current.player = document.getElementById(playerElementId);
+        htmlElements.current.playerWrapper = document.getElementById(toEl);
+        if (!htmlElements.current.player)
             throw new Error('Move from element not found');
-        if (!playerWrapperEl)
+        if (!htmlElements.current.playerWrapper)
             throw new Error('Move To element not found');
-        playerWrapperEl.appendChild(playerEl);
+        htmlElements.current.playerWrapper.appendChild(htmlElements.current.player);
     };
-    return portalPlayerTo;
+    var returnPlayer = function () {
+        constants_1.TK_PLAYER_LOADER_DIV;
+        if (!htmlElements.current.player)
+            htmlElements.current.player = document.getElementById(playerElementId);
+        if (!htmlElements.current.playerLoader)
+            htmlElements.current.playerLoader =
+                document.getElementById(constants_1.TK_PLAYER_LOADER_DIV);
+        if (!htmlElements.current.player)
+            throw new Error('Move from element not found');
+        if (!htmlElements.current.playerLoader)
+            throw new Error('Player Loader element not found');
+        htmlElements.current.playerLoader.appendChild(htmlElements.current.player);
+    };
+    return [portalPlayerTo, returnPlayer];
 };
 exports.default = usePlayerPortal;

package/dist/hooks/useZoom/index.d.ts

@@ -1,2 +1,3 @@
-declare const useZoom: () => [(step: number) => void, (step: number) => void];
+declare type UseZoom = [(step: number) => void, (step: number) => void];
+declare const useZoom: () => UseZoom;
 export default useZoom;

package/dist/store/threekit.d.ts

@@ -5,11 +5,15 @@ import { ISaveConfigurationConfig, WishlistArray } from '../Treble';
 /*****************************************************
  * Types and Interfaces
  ****************************************************/
+interface EventHandlers {
+    postConfigurationChange?: (attributes: Array<IThreekitDisplayAttribute>) => void | Promise<void>;
+}
 export interface ILaunchConfig {
     threekitEnv: string;
     locale: string;
     project: IProject;
     playerConfig: IPlayerConfig;
+    eventHandlers: EventHandlers;
 }
 interface IPriceConfig {
     id: string;

package/dist/store/threekit.js

@@ -75,7 +75,7 @@ var createPlayerLoaderEl = function (elementId) {
     playerElement.setAttribute('id', elementId);
     playerElement.style.height = '100%';
     var playerLoader = document.createElement('div');
-    playerLoader.setAttribute('id', 'tk-player-loader');
+    playerLoader.setAttribute('id', constants_1.TK_PLAYER_LOADER_DIV);
     playerLoader.appendChild(playerElement);
     playerLoader.style.opacity = '0';
     playerLoader.style.height = '1px';
@@ -84,6 +84,10 @@ var createPlayerLoaderEl = function (elementId) {
     document.body.appendChild(playerLoader);
     return playerElement;
 };
+/*****************************************************
+ * Constants and Event Handlers
+ ****************************************************/
+var EVENTS = {};
 var initialState = {
     //  Player HTML element
     playerElId: undefined,
@@ -357,6 +361,8 @@ var launch = function (launchConfig) {
                         dispatch(setLanguage(launchConfig.locale));
                         dispatch(setTranslations(translations));
                     }
+                    if (launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.eventHandlers)
+                        EVENTS = Object.assign(EVENTS, launchConfig.eventHandlers);
                     if (pricebook.length) {
                         priceConfig = {
                             id: pricebook[0].id,
@@ -393,6 +399,12 @@ var setConfiguration = function (config) { return function (dispatch) { return _
             case 1:
                 _a.sent();
                 updatedAttributes = window.threekit.configurator.getDisplayAttributes();
+                if (!EVENTS.postConfigurationChange) return [3 /*break*/, 3];
+                return [4 /*yield*/, EVENTS.postConfigurationChange(updatedAttributes)];
+            case 2:
+                _a.sent();
+                _a.label = 3;
+            case 3:
                 dispatch(setAttributes(updatedAttributes));
                 dispatch(setPlayerLoading(false));
                 return [2 /*return*/];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threekit-tools/treble",
-  "version": "0.0.38",
+  "version": "0.0.42",
   "author": "Amaan Saeed",
   "license": "MIT",
   "files": [