@threekit-tools/treble 0.0.40 → 0.0.44

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/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;
@@ -45,6 +45,6 @@ var ThreekitProvider = function (props) {
     return (react_1.default.createElement(react_redux_1.Provider, { store: store_1.default },
         react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme_1.default },
             react_1.default.createElement(GlobalStyles_styles_1.default, null),
-            react_1.default.createElement(App, { locale: props.locale, project: props.project, playerConfig: props.playerConfig, threekitEnv: props.threekitEnv }, props.children))));
+            react_1.default.createElement(App, { locale: props.locale, project: props.project, playerConfig: props.playerConfig, threekitEnv: props.threekitEnv, eventHandlers: props.eventHandlers }, props.children))));
 };
 exports.default = ThreekitProvider;

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

@@ -1,5 +1,5 @@
 import { IConfigurationColor, IThreekitDisplayAttribute } from '../../threekit';
-export declare type AttributeValue = string | number | IConfigurationColor;
+export declare type AttributeValue = string | number | boolean | IConfigurationColor;
 declare type UseAttributeError = [undefined, undefined];
 declare type UseAttributeSuccess = [
     IThreekitDisplayAttribute,

package/dist/hooks/useAttribute/index.js

@@ -16,8 +16,6 @@ var useAttribute = function (attributeName) {
     var handleChange = function (value) {
         var _a;
         var preppedValue = (0, utils_1.selectionToConfiguration)(value, attribute.type);
-        if (!preppedValue)
-            return;
         dispatch((0, threekit_1.setConfiguration)((_a = {},
             _a[attributeName] = preppedValue,
             _a)));

package/dist/store/threekit.d.ts

@@ -5,11 +5,15 @@ import { ISaveConfigurationConfig, WishlistArray } from '../Treble';
 /*****************************************************
  * Types and Interfaces
  ****************************************************/
+interface EventHandlers {
+    postConfigurationChange?: (updatedAttributes: Array<IThreekitDisplayAttribute>, configurationChange: ISetConfiguration, previousConfiguration: 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

@@ -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,
@@ -384,15 +390,22 @@ var launch = function (launchConfig) {
 exports.launch = launch;
 //  Configurator
 var setConfiguration = function (config) { return function (dispatch) { return __awaiter(void 0, void 0, void 0, function () {
-    var updatedAttributes;
+    var previousConfiguration, updatedAttributes;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
+                previousConfiguration = window.threekit.configurator.getDisplayAttributes();
                 dispatch(setPlayerLoading(true));
                 return [4 /*yield*/, window.threekit.configurator.setConfiguration(config)];
             case 1:
                 _a.sent();
                 updatedAttributes = window.threekit.configurator.getDisplayAttributes();
+                if (!EVENTS.postConfigurationChange) return [3 /*break*/, 3];
+                return [4 /*yield*/, EVENTS.postConfigurationChange(updatedAttributes, config, previousConfiguration)];
+            case 2:
+                _a.sent();
+                _a.label = 3;
+            case 3:
                 dispatch(setAttributes(updatedAttributes));
                 dispatch(setPlayerLoading(false));
                 return [2 /*return*/];

package/dist/utils.d.ts

@@ -53,9 +53,9 @@ export declare const metadataValueToObject: (data: string) => Record<string, str
  */
 export declare const createThreekitScriptEl: (threekitDomain: string) => Promise<void>;
 export declare const translateAttribute: (attributes: Array<IThreekitDisplayAttribute>, translations?: ITranslationMap | undefined, language?: string | undefined) => IThreekitDisplayAttribute;
-export declare const selectionToConfiguration: (value: string | number | IConfigurationColor, attributeType: string) => string | number | IConfigurationColor | {
-    assetId: string | number | IConfigurationColor;
-} | undefined;
+export declare const selectionToConfiguration: (value: string | number | boolean | IConfigurationColor, attributeType: string) => string | number | boolean | IConfigurationColor | {
+    assetId: string | number | boolean | IConfigurationColor;
+};
 export declare const filterFormAttributes: (attributes: Record<string, IThreekitDisplayAttribute>, attributeComponentProps: IAttributesComponentProps, includeReservedAttributes: boolean) => IThreekitDisplayAttribute[];
 export declare const isUuid: (str?: string | undefined) => boolean;
 export declare const loadTrebleConfig: () => Partial<ITrebleConfig>;

package/dist/utils.js

@@ -306,8 +306,6 @@ var translateAttribute = function (attributes, translations, language) {
 };
 exports.translateAttribute = translateAttribute;
 var selectionToConfiguration = function (value, attributeType) {
-    if (!value)
-        return undefined;
     switch (attributeType) {
         case constants_1.ATTRIBUTE_TYPES.number:
         case constants_1.ATTRIBUTE_TYPES.string:

package/package.json

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