@threekit-tools/treble 0.0.54 → 0.0.57-animation

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/dist/components/FlatForm/index.js +24 -3
  2. package/dist/components/TextInput/index.d.ts +11 -0
  3. package/dist/components/TextInput/index.js +27 -0
  4. package/dist/components/TextInput/textInput.styles.d.ts +1 -0
  5. package/dist/components/TextInput/textInput.styles.js +13 -0
  6. package/dist/components/Upload/index.d.ts +1 -1
  7. package/dist/components/Upload/index.js +22 -18
  8. package/dist/components/Upload/upload.styles.d.ts +4 -2
  9. package/dist/components/Upload/upload.styles.js +10 -6
  10. package/dist/components/UploadArea/index.d.ts +12 -0
  11. package/dist/components/UploadArea/index.js +137 -0
  12. package/dist/components/UploadArea/uploadArea.styles.d.ts +7 -0
  13. package/dist/components/UploadArea/uploadArea.styles.js +16 -0
  14. package/dist/components/containers/formInputContainer.d.ts +4 -2
  15. package/dist/components/formComponents.d.ts +4 -1
  16. package/dist/components/formComponents.js +14 -6
  17. package/dist/hooks/useAttribute/index.d.ts +1 -1
  18. package/dist/hooks/useAttribute/index.js +11 -7
  19. package/dist/hooks/useSingleAnimation/index.d.ts +17 -0
  20. package/dist/hooks/useSingleAnimation/index.js +264 -0
  21. package/dist/icons/Spinner.d.ts +1 -0
  22. package/dist/icons/Spinner.js +2 -2
  23. package/dist/threekit.d.ts +4 -1
  24. package/dist/utils.d.ts +2 -2
  25. package/dist/utils.js +5 -5
  26. package/package.json +17 -2
package/dist/components/FlatForm/index.js CHANGED
@@ -10,6 +10,25 @@ var __assign = (this && this.__assign) || function () {
10
10
  };
11
11
  return __assign.apply(this, arguments);
12
12
  };
13
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
14
+ if (k2 === undefined) k2 = k;
15
+ Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
16
+ }) : (function(o, m, k, k2) {
17
+ if (k2 === undefined) k2 = k;
18
+ o[k2] = m[k];
19
+ }));
20
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
21
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
22
+ }) : function(o, v) {
23
+ o["default"] = v;
24
+ });
25
+ var __importStar = (this && this.__importStar) || function (mod) {
26
+ if (mod && mod.__esModule) return mod;
27
+ var result = {};
28
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
29
+ __setModuleDefault(result, mod);
30
+ return result;
31
+ };
13
32
  var __importDefault = (this && this.__importDefault) || function (mod) {
14
33
  return (mod && mod.__esModule) ? mod : { "default": mod };
15
34
  };
@@ -20,7 +39,7 @@ var prop_types_1 = __importDefault(require("prop-types"));
20
39
  var flatForm_styles_1 = require("./flatForm.styles");
21
40
  var ProductName_1 = __importDefault(require("../ProductName"));
22
41
  var ProductDescription_1 = __importDefault(require("../ProductDescription"));
23
- var formComponents_1 = __importDefault(require("../formComponents"));
42
+ var formComponents_1 = __importStar(require("../formComponents"));
24
43
  var utils_1 = require("../../utils");
25
44
  var useConfigurator_1 = __importDefault(require("../../hooks/useConfigurator"));
26
45
  var constants_1 = require("../../constants");
@@ -45,10 +64,12 @@ var FlatForm = function (props) {
45
64
  var Component;
46
65
  var props = ((_b = (_a = (attributes || {})) === null || _a === void 0 ? void 0 : _a[attr.name]) === null || _b === void 0 ? void 0 : _b.props) || {};
47
66
  var type = attr.type;
48
- if (type === 'Asset' &&
49
- attr.assetType === constants_1.ASSET_TYPES.upload) {
67
+ if (attr.type === 'Asset' && attr.assetType === constants_1.ASSET_TYPES.upload) {
50
68
  type = attr.assetType;
51
69
  }
70
+ else if (attr.type === 'String' && attr.values.length === 0) {
71
+ type = formComponents_1.FORM_COMPONENT_TYPES.stringInput;
72
+ }
52
73
  if ((_d = (_c = (attributes || {})) === null || _c === void 0 ? void 0 : _c[attr.name]) === null || _d === void 0 ? void 0 : _d.component) {
53
74
  Component = (_e = Object.entries(formComponents_1.default[type] || {}).find(function (_a) {
54
75
  var _b, _c;
package/dist/components/TextInput/index.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ /// <reference types="react" />
2
+ import { IFormComponentProps } from '../containers/formInputContainer';
3
+ export interface ITextInput extends IFormComponentProps<undefined> {
4
+ }
5
+ export declare const TextInput: {
6
+ (props: ITextInput): JSX.Element;
7
+ componentName: string;
8
+ compatibleAttributes: Set<string>;
9
+ };
10
+ declare const _default: (props: ITextInput) => JSX.Element | null;
11
+ export default _default;
package/dist/components/TextInput/index.js ADDED
@@ -0,0 +1,27 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.TextInput = void 0;
7
+ var react_1 = __importDefault(require("react"));
8
+ // import PropTypes from 'prop-types';
9
+ var FormComponentTitle_1 = __importDefault(require("../FormComponentTitle"));
10
+ var FormComponentDescription_1 = __importDefault(require("../FormComponentDescription"));
11
+ var textInput_styles_1 = require("./textInput.styles");
12
+ var shared_styles_1 = require("../shared.styles");
13
+ var utils_1 = require("../../utils");
14
+ var constants_1 = require("../../constants");
15
+ var formInputContainer_1 = __importDefault(require("../containers/formInputContainer"));
16
+ var TextInput = function (props) {
17
+ var title = props.title, description = props.description, value = props.value, onChange = props.onChange, customClassName = props.className;
18
+ var cls = (0, utils_1.generateInputClassName)('text-input', customClassName, title);
19
+ return (react_1.default.createElement(shared_styles_1.FormComponentWrapper, { className: cls },
20
+ react_1.default.createElement(FormComponentTitle_1.default, { title: title, className: cls }),
21
+ react_1.default.createElement(FormComponentDescription_1.default, { description: description, className: cls }),
22
+ react_1.default.createElement(textInput_styles_1.Input, { type: "text", value: value, onChange: function (e) { return onChange && onChange(e.target.value); }, className: cls })));
23
+ };
24
+ exports.TextInput = TextInput;
25
+ exports.TextInput.componentName = 'text-input';
26
+ exports.TextInput.compatibleAttributes = new Set([constants_1.ATTRIBUTE_TYPES.string]);
27
+ exports.default = (0, formInputContainer_1.default)(exports.TextInput);
package/dist/components/TextInput/textInput.styles.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const Input: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
package/dist/components/TextInput/textInput.styles.js ADDED
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
+ return cooked;
5
+ };
6
+ var __importDefault = (this && this.__importDefault) || function (mod) {
7
+ return (mod && mod.__esModule) ? mod : { "default": mod };
8
+ };
9
+ Object.defineProperty(exports, "__esModule", { value: true });
10
+ exports.Input = void 0;
11
+ var styled_components_1 = __importDefault(require("styled-components"));
12
+ exports.Input = styled_components_1.default.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n margin: 0;\n padding: 10px 6px;\n background: #fff;\n border: 1px solid #d9d9d9;\n color: ", ";\n outline: none;\n border-radius: 2px;\n font-size: 14px;\n transition: all 0.3s;\n font-family: ", ";\n\n &:hover {\n border-color: ", ";\n }\n\n &:focus {\n border-color: ", ";\n box-shadow: 0 0 0 2px ", ";\n }\n"], ["\n width: 100%;\n margin: 0;\n padding: 10px 6px;\n background: #fff;\n border: 1px solid #d9d9d9;\n color: ", ";\n outline: none;\n border-radius: 2px;\n font-size: 14px;\n transition: all 0.3s;\n font-family: ", ";\n\n &:hover {\n border-color: ", ";\n }\n\n &:focus {\n border-color: ", ";\n box-shadow: 0 0 0 2px ", ";\n }\n"])), function (props) { return props.theme.textColor; }, function (props) { return props.theme.fontFamily; }, function (props) { return props.theme.primaryColor; }, function (props) { return props.theme.primaryColor; }, function (props) { return "".concat(props.theme.primaryColor, "33"); });
13
+ var templateObject_1;
package/dist/components/Upload/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import { IFormComponentProps, IOptionShared } from '../containers/formInputContainer';
3
3
  export interface IUpload extends Pick<IFormComponentProps<IOptionShared>, 'title' | 'description' | 'className' | 'value'> {
4
- onChange: (file: File) => Promise<void>;
4
+ onChange: (file: File | undefined) => Promise<void>;
5
5
  }
6
6
  export declare const Upload: {
7
7
  (props: IUpload): JSX.Element;
package/dist/components/Upload/index.js CHANGED
@@ -71,13 +71,15 @@ var upload_styles_1 = require("./upload.styles");
71
71
  var Upload = function (props) {
72
72
  var title = props.title, description = props.description, value = props.value, onChange = props.onChange, customClassName = props.className;
73
73
  var _a = (0, react_1.useState)(false), isUploading = _a[0], setIsUploading = _a[1];
74
- var _b = (0, react_1.useState)(undefined), filename = _b[0], setFilename = _b[1];
75
- var inputRef = (0, react_1.createRef)();
74
+ var inputRef = (0, react_1.useRef)(null);
75
+ var imgRef = (0, react_1.useRef)(null);
76
76
  var cls = (0, utils_1.generateInputClassName)('upload', customClassName, title);
77
77
  var handleClick = function () {
78
78
  var _a;
79
79
  if (isUploading)
80
80
  return;
81
+ if (value === null || value === void 0 ? void 0 : value.length)
82
+ return;
81
83
  (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
82
84
  };
83
85
  var handleUpload = function (file) { return __awaiter(void 0, void 0, void 0, function () {
@@ -90,14 +92,14 @@ var Upload = function (props) {
90
92
  case 1:
91
93
  _a.sent();
92
94
  setIsUploading(false);
93
- setFilename(file.name);
95
+ if (!file)
96
+ return [2 /*return*/];
94
97
  reader = new FileReader();
95
98
  reader.onload = function () {
96
- var imgEl = document.getElementById('trbl-upload-img');
97
- if (!imgEl)
99
+ if (!imgRef.current)
98
100
  return;
99
101
  // @ts-ignore
100
- imgEl.src = reader.result;
102
+ imgRef.current.src = reader.result;
101
103
  };
102
104
  reader.readAsDataURL(file);
103
105
  return [2 /*return*/];
@@ -107,7 +109,7 @@ var Upload = function (props) {
107
109
  return (react_1.default.createElement(shared_styles_1.FormComponentWrapper, null,
108
110
  react_1.default.createElement(FormComponentTitle_1.default, { title: title, className: cls }),
109
111
  react_1.default.createElement(FormComponentDescription_1.default, { description: description, className: cls }),
110
- react_1.default.createElement(upload_styles_1.UploadWrapper, { className: cls },
112
+ react_1.default.createElement(upload_styles_1.UploadWrapper, { className: cls, uploaded: !!(!isUploading && (value === null || value === void 0 ? void 0 : value.length)) },
111
113
  react_1.default.createElement("input", { type: "file", ref: inputRef, onChange: function (e) { return __awaiter(void 0, void 0, void 0, function () {
112
114
  var _a;
113
115
  return __generator(this, function (_b) {
@@ -117,19 +119,21 @@ var Upload = function (props) {
117
119
  return [2 /*return*/];
118
120
  });
119
121
  }); } }),
120
- react_1.default.createElement("button", { type: "button", onClick: handleClick }, isUploading ? (react_1.default.createElement(upload_styles_1.UploadingWrapper, null,
121
- react_1.default.createElement("div", null,
122
+ react_1.default.createElement("button", { type: "button", onClick: handleClick }, isUploading ? (react_1.default.createElement(react_1.default.Fragment, null,
123
+ react_1.default.createElement(upload_styles_1.IconWrapper, null,
122
124
  react_1.default.createElement(icons_1.SpinnerIcon, { size: "28px" })),
123
- react_1.default.createElement("div", null, "Uploading..."))) : (value === null || value === void 0 ? void 0 : value.length) ? (react_1.default.createElement(upload_styles_1.UploadingWrapper, null,
124
- react_1.default.createElement("div", null,
125
- react_1.default.createElement("img", { src: "#", id: "trbl-upload-img" })),
126
- react_1.default.createElement("div", null,
127
- react_1.default.createElement("div", null, filename),
128
- react_1.default.createElement("div", null, "Upload another file.")))) : (react_1.default.createElement("div", null,
125
+ react_1.default.createElement("div", null, "Uploading..."))) : (value === null || value === void 0 ? void 0 : value.length) ? (react_1.default.createElement(upload_styles_1.ImageWrapper, null,
129
126
  react_1.default.createElement("div", null,
130
- react_1.default.createElement(icons_1.ImageIcon, null)),
131
- react_1.default.createElement("div", null, "Click to upload"),
132
- react_1.default.createElement("div", null, "Supported file types: PNG, JPEG, SVG")))))));
127
+ react_1.default.createElement("img", { ref: imgRef, src: "#" })),
128
+ react_1.default.createElement(upload_styles_1.ImageActionArea, null,
129
+ react_1.default.createElement("div", { onClick: function (e) {
130
+ handleUpload(undefined);
131
+ e.stopPropagation();
132
+ } },
133
+ react_1.default.createElement(icons_1.DeleteIcon, null))))) : (react_1.default.createElement(react_1.default.Fragment, null,
134
+ react_1.default.createElement(upload_styles_1.IconWrapper, null,
135
+ react_1.default.createElement(icons_1.AddIcon, null)),
136
+ react_1.default.createElement("div", null, "Upload")))))));
133
137
  };
134
138
  exports.Upload = Upload;
135
139
  exports.Upload.componentName = 'upload';
package/dist/components/Upload/upload.styles.d.ts CHANGED
@@ -1,7 +1,9 @@
1
1
  interface IUploadWrapper {
2
2
  fullWidth?: boolean;
3
- iconOnly?: boolean;
3
+ uploaded: boolean;
4
4
  }
5
5
  export declare const UploadWrapper: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, IUploadWrapper, never>;
6
- export declare const UploadingWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
6
+ export declare const ImageWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
7
+ export declare const ImageActionArea: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
8
+ export declare const IconWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
7
9
  export {};
package/dist/components/Upload/upload.styles.js CHANGED
@@ -7,10 +7,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
7
7
  return (mod && mod.__esModule) ? mod : { "default": mod };
8
8
  };
9
9
  Object.defineProperty(exports, "__esModule", { value: true });
10
- exports.UploadingWrapper = exports.UploadWrapper = void 0;
10
+ exports.IconWrapper = exports.ImageActionArea = exports.ImageWrapper = exports.UploadWrapper = void 0;
11
11
  var styled_components_1 = __importDefault(require("styled-components"));
12
- exports.UploadWrapper = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n overflow: hidden;\n display: inline-block;\n\n & button {\n min-height: 40px;\n height: max-content;\n width: ", ";\n padding: ", ";\n overflow: hidden;\n font-family: ", ";\n font-size: ", ";\n color: ", ";\n text-align: center;\n background: white;\n cursor: pointer;\n border-radius: ", ";\n border: 1px solid ", ";\n transition: all 0.16s ease-in-out;\n }\n\n .tk-icon {\n transition: all 0.16s ease-in-out;\n }\n\n & button:hover {\n border: 1px solid ", ";\n color: ", ";\n\n .tk-icon {\n stroke: ", ";\n }\n }\n\n & input[type='file'] {\n display: none;\n }\n"], ["\n position: relative;\n overflow: hidden;\n display: inline-block;\n\n & button {\n min-height: 40px;\n height: max-content;\n width: ", ";\n padding: ", ";\n overflow: hidden;\n font-family: ", ";\n font-size: ", ";\n color: ", ";\n text-align: center;\n background: white;\n cursor: pointer;\n border-radius: ", ";\n border: 1px solid ", ";\n transition: all 0.16s ease-in-out;\n }\n\n .tk-icon {\n transition: all 0.16s ease-in-out;\n }\n\n & button:hover {\n border: 1px solid ", ";\n color: ", ";\n\n .tk-icon {\n stroke: ", ";\n }\n }\n\n & input[type='file'] {\n display: none;\n }\n"])), function (props) {
13
- return props.fullWidth ? '100%' : props.iconOnly ? '40px' : 'max-content';
14
- }, function (props) { return (props.iconOnly ? '0px' : '10px 16px'); }, function (props) { return props.theme.fontFamily; }, function (props) { return props.theme.fontBaseSize; }, function (props) { return props.theme.textColor; }, function (props) { return props.theme.borderRadius || '2px'; }, function (props) { return props.theme.borderColorBase; }, function (props) { return props.theme.primaryColor; }, function (props) { return props.theme.primaryColor; }, function (props) { return props.theme.primaryColor; });
15
- exports.UploadingWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: max-content max-content;\n grid-gap: 8px;\n\n & > div {\n height: max-content;\n position: relative;\n top: 50%;\n transform: translateY(-50%);\n }\n\n img {\n height: 72px;\n }\n"], ["\n display: grid;\n grid-template-columns: max-content max-content;\n grid-gap: 8px;\n\n & > div {\n height: max-content;\n position: relative;\n top: 50%;\n transform: translateY(-50%);\n }\n\n img {\n height: 72px;\n }\n"])));
16
- var templateObject_1, templateObject_2;
12
+ var SIZE = '110px';
13
+ var PADDING = '6px';
14
+ exports.UploadWrapper = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n overflow: hidden;\n display: inline-block;\n\n & button {\n height: ", ";\n width: ", ";\n /* padding: 6px; */\n overflow: hidden;\n font-family: ", ";\n font-size: ", ";\n color: ", ";\n text-align: center;\n background: white;\n cursor: ", ";\n border-radius: ", ";\n border: 1px\n ", ";\n transition: all 0.16s ease-in-out;\n\n img {\n height: 100%;\n width: 100%;\n }\n }\n\n .tk-icon {\n transition: all 0.16s ease-in-out;\n }\n\n & button:hover {\n border-color: ", ";\n color: ", ";\n\n .tk-icon {\n ", ";\n }\n }\n\n & input[type='file'] {\n display: none;\n }\n"], ["\n position: relative;\n overflow: hidden;\n display: inline-block;\n\n & button {\n height: ", ";\n width: ", ";\n /* padding: 6px; */\n overflow: hidden;\n font-family: ", ";\n font-size: ", ";\n color: ", ";\n text-align: center;\n background: white;\n cursor: ", ";\n border-radius: ", ";\n border: 1px\n ", ";\n transition: all 0.16s ease-in-out;\n\n img {\n height: 100%;\n width: 100%;\n }\n }\n\n .tk-icon {\n transition: all 0.16s ease-in-out;\n }\n\n & button:hover {\n border-color: ", ";\n color: ", ";\n\n .tk-icon {\n ", ";\n }\n }\n\n & input[type='file'] {\n display: none;\n }\n"])), SIZE, function (props) { return (props.fullWidth ? '100%' : SIZE); }, function (props) { return props.theme.fontFamily; }, function (props) { return props.theme.fontBaseSize; }, function (props) { return props.theme.textColor; }, function (props) { return (props.uploaded ? 'default' : 'pointer'); }, function (props) { return props.theme.borderRadius || '2px'; }, function (props) {
15
+ return "".concat(props.uploaded ? 'solid' : 'dashed', " ").concat(props.theme.borderColorBase);
16
+ }, function (props) { return props.theme.primaryColor; }, function (props) { return props.theme.primaryColor; }, function (props) { return (props.uploaded ? '' : "stroke: ".concat(props.theme.primaryColor)); });
17
+ exports.ImageWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n\n & > div {\n height: calc(", " - (2 * (", " + 1px)));\n width: calc(", " - (2 * (", " + 1px)));\n }\n"], ["\n position: relative;\n\n & > div {\n height: calc(", " - (2 * (", " + 1px)));\n width: calc(", " - (2 * (", " + 1px)));\n }\n"])), SIZE, PADDING, SIZE, PADDING);
18
+ exports.ImageActionArea = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n height: calc(", " - (2 * (", " + 1px)));\n width: calc(", " - (2 * (", " + 1px)));\n\n transition: all 0.3s;\n\n &:hover {\n background: rgba(0, 0, 0, 0.6);\n\n & > div {\n opacity: 1;\n }\n }\n\n & > div {\n opacity: 0;\n cursor: pointer;\n }\n\n & > div:hover {\n .tk-icon {\n stroke: ", ";\n }\n }\n\n .tk-icon {\n stroke: white;\n }\n\n & > div {\n height: max-content;\n width: max-content;\n position: relative;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n height: calc(", " - (2 * (", " + 1px)));\n width: calc(", " - (2 * (", " + 1px)));\n\n transition: all 0.3s;\n\n &:hover {\n background: rgba(0, 0, 0, 0.6);\n\n & > div {\n opacity: 1;\n }\n }\n\n & > div {\n opacity: 0;\n cursor: pointer;\n }\n\n & > div:hover {\n .tk-icon {\n stroke: ", ";\n }\n }\n\n .tk-icon {\n stroke: white;\n }\n\n & > div {\n height: max-content;\n width: max-content;\n position: relative;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n"])), SIZE, PADDING, SIZE, PADDING, function (props) { return props.theme.primaryColor; });
19
+ exports.IconWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin-bottom: 12px;\n"], ["\n margin-bottom: 12px;\n"])));
20
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
package/dist/components/UploadArea/index.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ /// <reference types="react" />
2
+ import { IFormComponentProps, IOptionShared } from '../containers/formInputContainer';
3
+ export interface IUpload extends Pick<IFormComponentProps<IOptionShared>, 'title' | 'description' | 'className' | 'value'> {
4
+ onChange: (file: File) => Promise<void>;
5
+ }
6
+ export declare const UploadArea: {
7
+ (props: IUpload): JSX.Element;
8
+ componentName: string;
9
+ compatibleAttributes: Set<string>;
10
+ };
11
+ declare const _default: (props: IUpload) => JSX.Element | null;
12
+ export default _default;
package/dist/components/UploadArea/index.js ADDED
@@ -0,0 +1,137 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
5
+ }) : (function(o, m, k, k2) {
6
+ if (k2 === undefined) k2 = k;
7
+ o[k2] = m[k];
8
+ }));
9
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
10
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
11
+ }) : function(o, v) {
12
+ o["default"] = v;
13
+ });
14
+ var __importStar = (this && this.__importStar) || function (mod) {
15
+ if (mod && mod.__esModule) return mod;
16
+ var result = {};
17
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
18
+ __setModuleDefault(result, mod);
19
+ return result;
20
+ };
21
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
22
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
23
+ return new (P || (P = Promise))(function (resolve, reject) {
24
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
25
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
26
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
27
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
28
+ });
29
+ };
30
+ var __generator = (this && this.__generator) || function (thisArg, body) {
31
+ var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
32
+ return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
33
+ function verb(n) { return function (v) { return step([n, v]); }; }
34
+ function step(op) {
35
+ if (f) throw new TypeError("Generator is already executing.");
36
+ while (_) try {
37
+ if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
38
+ if (y = 0, t) op = [op[0] & 2, t.value];
39
+ switch (op[0]) {
40
+ case 0: case 1: t = op; break;
41
+ case 4: _.label++; return { value: op[1], done: false };
42
+ case 5: _.label++; y = op[1]; op = [0]; continue;
43
+ case 7: op = _.ops.pop(); _.trys.pop(); continue;
44
+ default:
45
+ if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
46
+ if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
47
+ if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
48
+ if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
49
+ if (t[2]) _.ops.pop();
50
+ _.trys.pop(); continue;
51
+ }
52
+ op = body.call(thisArg, _);
53
+ } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
54
+ if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
55
+ }
56
+ };
57
+ var __importDefault = (this && this.__importDefault) || function (mod) {
58
+ return (mod && mod.__esModule) ? mod : { "default": mod };
59
+ };
60
+ Object.defineProperty(exports, "__esModule", { value: true });
61
+ exports.UploadArea = void 0;
62
+ var react_1 = __importStar(require("react"));
63
+ var constants_1 = require("../../constants");
64
+ var FormComponentTitle_1 = __importDefault(require("../FormComponentTitle"));
65
+ var FormComponentDescription_1 = __importDefault(require("../FormComponentDescription"));
66
+ var shared_styles_1 = require("../shared.styles");
67
+ var utils_1 = require("../../utils");
68
+ var icons_1 = require("../../icons");
69
+ var formInputContainer_1 = __importDefault(require("../containers/formInputContainer"));
70
+ var uploadArea_styles_1 = require("./uploadArea.styles");
71
+ var UploadArea = function (props) {
72
+ var title = props.title, description = props.description, value = props.value, onChange = props.onChange, customClassName = props.className;
73
+ var _a = (0, react_1.useState)(false), isUploading = _a[0], setIsUploading = _a[1];
74
+ var _b = (0, react_1.useState)(undefined), filename = _b[0], setFilename = _b[1];
75
+ var inputRef = (0, react_1.useRef)(null);
76
+ var imgRef = (0, react_1.useRef)(null);
77
+ var cls = (0, utils_1.generateInputClassName)('upload', customClassName, title);
78
+ var handleClick = function () {
79
+ var _a;
80
+ if (isUploading)
81
+ return;
82
+ (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
83
+ };
84
+ var handleUpload = function (file) { return __awaiter(void 0, void 0, void 0, function () {
85
+ var reader;
86
+ return __generator(this, function (_a) {
87
+ switch (_a.label) {
88
+ case 0:
89
+ setIsUploading(true);
90
+ return [4 /*yield*/, onChange(file)];
91
+ case 1:
92
+ _a.sent();
93
+ setIsUploading(false);
94
+ setFilename(file.name);
95
+ reader = new FileReader();
96
+ reader.onload = function () {
97
+ if (!imgRef.current)
98
+ return;
99
+ // @ts-ignore
100
+ imgRef.current.src = reader.result;
101
+ };
102
+ reader.readAsDataURL(file);
103
+ return [2 /*return*/];
104
+ }
105
+ });
106
+ }); };
107
+ return (react_1.default.createElement(shared_styles_1.FormComponentWrapper, null,
108
+ react_1.default.createElement(FormComponentTitle_1.default, { title: title, className: cls }),
109
+ react_1.default.createElement(FormComponentDescription_1.default, { description: description, className: cls }),
110
+ react_1.default.createElement(uploadArea_styles_1.UploadWrapper, { className: cls },
111
+ react_1.default.createElement("input", { type: "file", ref: inputRef, onChange: function (e) { return __awaiter(void 0, void 0, void 0, function () {
112
+ var _a;
113
+ return __generator(this, function (_b) {
114
+ if (!((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) || !onChange)
115
+ return [2 /*return*/];
116
+ handleUpload(e.target.files[0]);
117
+ return [2 /*return*/];
118
+ });
119
+ }); } }),
120
+ react_1.default.createElement("button", { type: "button", onClick: handleClick }, isUploading ? (react_1.default.createElement(uploadArea_styles_1.UploadingWrapper, null,
121
+ react_1.default.createElement("div", null,
122
+ react_1.default.createElement(icons_1.SpinnerIcon, { size: "28px" })),
123
+ react_1.default.createElement("div", null, "Uploading..."))) : (value === null || value === void 0 ? void 0 : value.length) ? (react_1.default.createElement(uploadArea_styles_1.UploadingWrapper, null,
124
+ react_1.default.createElement("div", null,
125
+ react_1.default.createElement("img", { ref: imgRef, src: "#" })),
126
+ react_1.default.createElement("div", null,
127
+ react_1.default.createElement("div", null, filename),
128
+ react_1.default.createElement("div", null, "Upload another file.")))) : (react_1.default.createElement("div", null,
129
+ react_1.default.createElement("div", null,
130
+ react_1.default.createElement(icons_1.ImageIcon, null)),
131
+ react_1.default.createElement("div", null, "Click to upload"),
132
+ react_1.default.createElement("div", null, "Supported file types: PNG, JPEG, SVG")))))));
133
+ };
134
+ exports.UploadArea = UploadArea;
135
+ exports.UploadArea.componentName = 'upload-area';
136
+ exports.UploadArea.compatibleAttributes = new Set([constants_1.ATTRIBUTE_TYPES.asset]);
137
+ exports.default = (0, formInputContainer_1.default)(exports.UploadArea);
package/dist/components/UploadArea/uploadArea.styles.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ interface IUploadWrapper {
2
+ fullWidth?: boolean;
3
+ iconOnly?: boolean;
4
+ }
5
+ export declare const UploadWrapper: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, IUploadWrapper, never>;
6
+ export declare const UploadingWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
7
+ export {};
package/dist/components/UploadArea/uploadArea.styles.js ADDED
@@ -0,0 +1,16 @@
1
+ "use strict";
2
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
+ return cooked;
5
+ };
6
+ var __importDefault = (this && this.__importDefault) || function (mod) {
7
+ return (mod && mod.__esModule) ? mod : { "default": mod };
8
+ };
9
+ Object.defineProperty(exports, "__esModule", { value: true });
10
+ exports.UploadingWrapper = exports.UploadWrapper = void 0;
11
+ var styled_components_1 = __importDefault(require("styled-components"));
12
+ exports.UploadWrapper = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n overflow: hidden;\n display: inline-block;\n\n & button {\n min-height: 40px;\n height: max-content;\n width: ", ";\n padding: ", ";\n overflow: hidden;\n font-family: ", ";\n font-size: ", ";\n color: ", ";\n text-align: center;\n background: white;\n cursor: pointer;\n border-radius: ", ";\n border: 1px solid ", ";\n transition: all 0.16s ease-in-out;\n }\n\n .tk-icon {\n transition: all 0.16s ease-in-out;\n }\n\n & button:hover {\n border: 1px solid ", ";\n color: ", ";\n\n .tk-icon {\n stroke: ", ";\n }\n }\n\n & input[type='file'] {\n display: none;\n }\n"], ["\n position: relative;\n overflow: hidden;\n display: inline-block;\n\n & button {\n min-height: 40px;\n height: max-content;\n width: ", ";\n padding: ", ";\n overflow: hidden;\n font-family: ", ";\n font-size: ", ";\n color: ", ";\n text-align: center;\n background: white;\n cursor: pointer;\n border-radius: ", ";\n border: 1px solid ", ";\n transition: all 0.16s ease-in-out;\n }\n\n .tk-icon {\n transition: all 0.16s ease-in-out;\n }\n\n & button:hover {\n border: 1px solid ", ";\n color: ", ";\n\n .tk-icon {\n stroke: ", ";\n }\n }\n\n & input[type='file'] {\n display: none;\n }\n"])), function (props) {
13
+ return props.fullWidth ? '100%' : props.iconOnly ? '40px' : 'max-content';
14
+ }, function (props) { return (props.iconOnly ? '0px' : '10px 16px'); }, function (props) { return props.theme.fontFamily; }, function (props) { return props.theme.fontBaseSize; }, function (props) { return props.theme.textColor; }, function (props) { return props.theme.borderRadius || '2px'; }, function (props) { return props.theme.borderColorBase; }, function (props) { return props.theme.primaryColor; }, function (props) { return props.theme.primaryColor; }, function (props) { return props.theme.primaryColor; });
15
+ exports.UploadingWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: max-content max-content;\n grid-gap: 8px;\n\n & > div {\n height: max-content;\n position: relative;\n top: 50%;\n transform: translateY(-50%);\n }\n\n img {\n height: 72px;\n }\n"], ["\n display: grid;\n grid-template-columns: max-content max-content;\n grid-gap: 8px;\n\n & > div {\n height: max-content;\n position: relative;\n top: 50%;\n transform: translateY(-50%);\n }\n\n img {\n height: 72px;\n }\n"])));
16
+ var templateObject_1, templateObject_2;
package/dist/components/containers/formInputContainer.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { FunctionComponent } from 'react';
2
+ import { RawAttributeValue } from '../../hooks/useAttribute';
2
3
  import { IDisplayAttributeAssetValue, IThreekitDisplayAttribute } from '../../threekit';
3
4
  export interface IOptionShared {
4
5
  name: string;
@@ -23,10 +24,11 @@ export interface IFormContainerProps extends Pick<MetadataKeys, 'metadataKeyThum
23
24
  title?: string;
24
25
  description?: string;
25
26
  value?: string;
26
- onClick?: (value: string) => void;
27
+ onClick?: (value: RawAttributeValue) => Promise<void>;
28
+ onChange?: (value: RawAttributeValue) => Promise<void>;
27
29
  className?: string;
28
30
  }
29
- export interface IFormComponentProps<T extends IOptionShared | undefined> extends Pick<IFormContainerProps, 'title' | 'description' | 'value' | 'onClick' | 'className'> {
31
+ export interface IFormComponentProps<T extends IOptionShared | undefined> extends Pick<IFormContainerProps, 'title' | 'description' | 'value' | 'onClick' | 'onChange' | 'className'> {
30
32
  options: null | undefined | Array<T>;
31
33
  }
32
34
  export interface IFormComponent<P> extends FunctionComponent<P> {
package/dist/components/formComponents.d.ts CHANGED
@@ -1,7 +1,10 @@
1
1
  /// <reference types="react" />
2
+ export declare const FORM_COMPONENT_TYPES: {
3
+ stringInput: string;
4
+ };
2
5
  export declare const formComponents: {
3
6
  [x: string]: {
4
- [x: string]: ((props: import("./Cards").ICards) => JSX.Element | null) | ((props: import("./Tiles").ITiles) => JSX.Element | null);
7
+ [x: string]: ((props: import("./Cards").ICards) => JSX.Element | null) | ((props: import("./Tiles").ITiles) => JSX.Element | null) | ((props: import("./TextInput").ITextInput) => JSX.Element | null);
5
8
  } | {
6
9
  [x: string]: (props: import("./Upload").IUpload) => JSX.Element | null;
7
10
  };
package/dist/components/formComponents.js CHANGED
@@ -18,9 +18,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
18
18
  __setModuleDefault(result, mod);
19
19
  return result;
20
20
  };
21
- var _a, _b, _c, _d;
21
+ var _a, _b, _c, _d, _e;
22
22
  Object.defineProperty(exports, "__esModule", { value: true });
23
- exports.formComponents = void 0;
23
+ exports.formComponents = exports.FORM_COMPONENT_TYPES = void 0;
24
24
  var constants_1 = require("../constants");
25
25
  var Cards_1 = __importStar(require("./Cards"));
26
26
  var Dropdown_1 = __importStar(require("./Dropdown"));
@@ -29,9 +29,14 @@ var Swatch_1 = __importStar(require("./Swatch"));
29
29
  var Tiles_1 = __importStar(require("./Tiles"));
30
30
  var TilesGroup_1 = __importStar(require("./TilesGroup"));
31
31
  var Upload_1 = __importStar(require("./Upload"));
32
+ // import UploadArea, { UploadArea as UploadAreaComponent } from './UploadArea';
33
+ var TextInput_1 = __importStar(require("./TextInput"));
34
+ exports.FORM_COMPONENT_TYPES = {
35
+ stringInput: 'string-input',
36
+ };
37
+ // First option for each attribute type is the default value
32
38
  exports.formComponents = (_a = {},
33
39
  _a[constants_1.ATTRIBUTE_TYPES.asset] = (_b = {},
34
- // First option is default
35
40
  _b[Strips_1.Strips.componentName] = Strips_1.default,
36
41
  _b[Cards_1.Cards.componentName] = Cards_1.default,
37
42
  _b[Dropdown_1.Dropdown.componentName] = Dropdown_1.default,
@@ -40,16 +45,19 @@ exports.formComponents = (_a = {},
40
45
  _b[TilesGroup_1.TilesGroup.componentName] = TilesGroup_1.default,
41
46
  _b),
42
47
  _a[constants_1.ATTRIBUTE_TYPES.string] = (_c = {},
43
- // First option is default
44
48
  _c[Tiles_1.Tiles.componentName] = Tiles_1.default,
45
49
  _c[Dropdown_1.Dropdown.componentName] = Dropdown_1.default,
46
50
  _c[Cards_1.Cards.componentName] = Cards_1.default,
47
51
  _c[Strips_1.Strips.componentName] = Strips_1.default,
48
52
  _c[Swatch_1.Swatch.componentName] = Swatch_1.default,
49
53
  _c[TilesGroup_1.TilesGroup.componentName] = TilesGroup_1.default,
54
+ _c[TextInput_1.TextInput.componentName] = TextInput_1.default,
50
55
  _c),
51
- _a[constants_1.ASSET_TYPES.upload] = (_d = {},
52
- _d[Upload_1.Upload.componentName] = Upload_1.default,
56
+ _a[exports.FORM_COMPONENT_TYPES.stringInput] = (_d = {},
57
+ _d[TextInput_1.TextInput.componentName] = TextInput_1.default,
53
58
  _d),
59
+ _a[constants_1.ASSET_TYPES.upload] = (_e = {},
60
+ _e[Upload_1.Upload.componentName] = Upload_1.default,
61
+ _e),
54
62
  _a);
55
63
  exports.default = exports.formComponents;
package/dist/hooks/useAttribute/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { IThreekitDisplayAttribute, IConfigurationColor } from '../../threekit';
2
- export declare type RawAttributeValue = string | number | boolean | IConfigurationColor | File;
2
+ export declare type RawAttributeValue = string | number | boolean | IConfigurationColor | File | undefined;
3
3
  declare type UseAttributeError = [undefined, undefined];
4
4
  declare type UseAttributeSuccess = [
5
5
  IThreekitDisplayAttribute,
package/dist/hooks/useAttribute/index.js CHANGED
@@ -61,17 +61,21 @@ var useAttribute = function (attributeName) {
61
61
  switch (_b.label) {
62
62
  case 0:
63
63
  if (!(attribute.type === 'Asset' &&
64
- attribute.assetType === constants_1.ASSET_TYPES.upload)) return [3 /*break*/, 2];
65
- return [4 /*yield*/, api_1.default.catalog.uploadAsset(value)];
66
- case 1:
64
+ attribute.assetType === constants_1.ASSET_TYPES.upload)) return [3 /*break*/, 4];
65
+ if (!!value) return [3 /*break*/, 1];
66
+ preppedValue = (0, utils_1.selectionToConfiguration)('', attribute.type);
67
+ return [3 /*break*/, 3];
68
+ case 1: return [4 /*yield*/, api_1.default.catalog.uploadAsset(value)];
69
+ case 2:
67
70
  assetId = _b.sent();
68
71
  if (assetId)
69
72
  preppedValue = (0, utils_1.selectionToConfiguration)(assetId, attribute.type);
70
- return [3 /*break*/, 3];
71
- case 2:
72
- preppedValue = (0, utils_1.selectionToConfiguration)(value, attribute.type);
73
73
  _b.label = 3;
74
- case 3:
74
+ case 3: return [3 /*break*/, 5];
75
+ case 4:
76
+ preppedValue = (0, utils_1.selectionToConfiguration)(value, attribute.type);
77
+ _b.label = 5;
78
+ case 5:
75
79
  dispatch((0, attributes_1.setConfiguration)((_a = {},
76
80
  _a[attributeName] = preppedValue,
77
81
  _a)));
package/dist/hooks/useSingleAnimation/index.d.ts ADDED
@@ -0,0 +1,17 @@
1
+ import { ICoordinates } from '../../threekit';
2
+ interface NodeConfig {
3
+ nodeId: string;
4
+ paddingStart: number;
5
+ paddingEnd: number;
6
+ delay: number;
7
+ duration: number;
8
+ translation: ICoordinates;
9
+ rotation: ICoordinates;
10
+ scale: ICoordinates;
11
+ }
12
+ interface AnimationConfig {
13
+ duration: number;
14
+ nodes: Array<NodeConfig>;
15
+ }
16
+ declare const useAnimation: (animationConfig: AnimationConfig) => undefined[] | (boolean | (() => Promise<void>))[];
17
+ export default useAnimation;
package/dist/hooks/useSingleAnimation/index.js ADDED
@@ -0,0 +1,264 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
14
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
15
+ return new (P || (P = Promise))(function (resolve, reject) {
16
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
17
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
18
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
19
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
20
+ });
21
+ };
22
+ var __generator = (this && this.__generator) || function (thisArg, body) {
23
+ var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
24
+ return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
25
+ function verb(n) { return function (v) { return step([n, v]); }; }
26
+ function step(op) {
27
+ if (f) throw new TypeError("Generator is already executing.");
28
+ while (_) try {
29
+ if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
30
+ if (y = 0, t) op = [op[0] & 2, t.value];
31
+ switch (op[0]) {
32
+ case 0: case 1: t = op; break;
33
+ case 4: _.label++; return { value: op[1], done: false };
34
+ case 5: _.label++; y = op[1]; op = [0]; continue;
35
+ case 7: op = _.ops.pop(); _.trys.pop(); continue;
36
+ default:
37
+ if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
38
+ if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
39
+ if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
40
+ if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
41
+ if (t[2]) _.ops.pop();
42
+ _.trys.pop(); continue;
43
+ }
44
+ op = body.call(thisArg, _);
45
+ } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
46
+ if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
47
+ }
48
+ };
49
+ var __importDefault = (this && this.__importDefault) || function (mod) {
50
+ return (mod && mod.__esModule) ? mod : { "default": mod };
51
+ };
52
+ Object.defineProperty(exports, "__esModule", { value: true });
53
+ var react_1 = require("react");
54
+ var useThreekitInitStatus_1 = __importDefault(require("../useThreekitInitStatus"));
55
+ var utils_1 = require("../../utils");
56
+ var prepAnimateConfig = function (config) {
57
+ return new Promise(function (resolve) { return __awaiter(void 0, void 0, void 0, function () {
58
+ var totalDuration, player, assetId, nodesRaw, nodes;
59
+ return __generator(this, function (_a) {
60
+ switch (_a.label) {
61
+ case 0:
62
+ totalDuration = config.duration * 1000 || 0;
63
+ player = window.threekit.player.enableApi('player');
64
+ return [4 /*yield*/, player.getAssetInstance(window.threekit.player.scene.find({
65
+ id: window.threekit.player.instanceId,
66
+ plug: 'Proxy',
67
+ property: 'asset',
68
+ }))];
69
+ case 1:
70
+ assetId = _a.sent();
71
+ nodesRaw = Object.entries(config.nodes).reduce(function (output, _a) {
72
+ var _b;
73
+ var name = _a[0], nodeData = _a[1];
74
+ var nodeId = window.threekit.player.scene.get({
75
+ from: assetId,
76
+ name: name,
77
+ }).id;
78
+ var node = Object.assign({ nodeId: nodeId }, { duration: (nodeData.duration || config.duration || 0) * 1000 }, { paddingStart: (nodeData.delay || 0) * 1000 }, 'translation' in nodeData
79
+ ? {
80
+ translation: [
81
+ window.threekit.player.scene.get({
82
+ from: assetId,
83
+ id: nodeId,
84
+ plug: 'Transform',
85
+ property: 'translation',
86
+ }),
87
+ Object.assign({ x: 0, y: 0, z: 0 }, nodeData.translation),
88
+ ],
89
+ }
90
+ : {}, 'rotation' in nodeData
91
+ ? {
92
+ rotation: [
93
+ window.threekit.player.scene.get({
94
+ from: assetId,
95
+ id: nodeId,
96
+ plug: 'Transform',
97
+ property: 'rotation',
98
+ }),
99
+ Object.assign({ x: 0, y: 0, z: 0 }, nodeData.rotation),
100
+ ],
101
+ }
102
+ : {}, 'scale' in nodeData
103
+ ? {
104
+ scale: [
105
+ window.threekit.player.scene.get({
106
+ from: assetId,
107
+ id: nodeId,
108
+ plug: 'Transform',
109
+ property: 'scale',
110
+ }),
111
+ Object.assign({ x: 0, y: 0, z: 0 }, nodeData.scale),
112
+ ],
113
+ }
114
+ : {});
115
+ var duration = node.duration + node.paddingStart;
116
+ if (duration > totalDuration)
117
+ totalDuration = duration;
118
+ return Object.assign(output, (_b = {}, _b[name] = node, _b));
119
+ }, {});
120
+ nodes = Object.entries(nodesRaw).reduce(function (output, _a) {
121
+ var _b;
122
+ var nodeName = _a[0], nodeData = _a[1];
123
+ var paddingEnd = 0;
124
+ if (totalDuration !== nodeData.duration + nodeData.paddingStart)
125
+ paddingEnd =
126
+ totalDuration - (nodeData.duration + nodeData.paddingStart);
127
+ return Object.assign(output, (_b = {},
128
+ _b[nodeName] = __assign(__assign({}, nodeData), { paddingEnd: paddingEnd }),
129
+ _b));
130
+ }, {});
131
+ resolve([assetId, totalDuration, nodes]);
132
+ return [2 /*return*/];
133
+ }
134
+ });
135
+ }); });
136
+ };
137
+ var useAnimation = function (animationConfig) {
138
+ var _a = (0, react_1.useState)(false), animationInProgress = _a[0], setAnimationInProgress = _a[1];
139
+ var ref = (0, react_1.useRef)({
140
+ assetId: undefined,
141
+ startTime: 0,
142
+ totalDuration: 0,
143
+ nodes: {},
144
+ isTransformed: false,
145
+ });
146
+ var isLoaded = (0, useThreekitInitStatus_1.default)();
147
+ if (!isLoaded)
148
+ return [undefined, undefined];
149
+ var animateFrame = function (timestamp) {
150
+ // if (startTime.current === undefined) startTime.current = timestamp;
151
+ // const elapsed = timestamp - startTime.current;
152
+ if (ref.current.startTime === undefined)
153
+ ref.current.startTime = timestamp;
154
+ var elapsed = timestamp - ref.current.startTime;
155
+ Object.values(ref.current.nodes).forEach(function (nodeConfig) {
156
+ if (!ref.current.isTransformed) {
157
+ // If its too early we don't animate
158
+ if (elapsed < nodeConfig.paddingStart)
159
+ return;
160
+ // If its too early we don't animate
161
+ if (elapsed > nodeConfig.duration + nodeConfig.paddingStart)
162
+ return;
163
+ }
164
+ else if (ref.current.isTransformed) {
165
+ // If its too early we don't animate
166
+ if (elapsed < nodeConfig.paddingEnd)
167
+ return;
168
+ // If its too early we don't animate
169
+ if (elapsed > nodeConfig.duration + nodeConfig.paddingEnd)
170
+ return;
171
+ }
172
+ var progressTime = !ref.current.isTransformed
173
+ ? elapsed - nodeConfig.paddingStart
174
+ : elapsed - nodeConfig.paddingEnd;
175
+ var animationPercent = (0, utils_1.easeInOutCubic)(progressTime / nodeConfig.duration);
176
+ var translation;
177
+ var rotation;
178
+ var scale;
179
+ if ('translation' in nodeConfig) {
180
+ translation = Object.keys(nodeConfig.translation[1]).reduce(function (output, axis) {
181
+ var _a;
182
+ var value = !ref.current.isTransformed
183
+ ? nodeConfig.translation[0][axis] +
184
+ nodeConfig.translation[1][axis] * animationPercent
185
+ : nodeConfig.translation[1][axis] +
186
+ nodeConfig.translation[0][axis] -
187
+ nodeConfig.translation[1][axis] * animationPercent;
188
+ return Object.assign(output, (_a = {}, _a[axis] = value, _a));
189
+ }, {});
190
+ window.threekit.player.scene.set({
191
+ from: ref.current.assetId,
192
+ id: nodeConfig.nodeId,
193
+ plug: 'Transform',
194
+ property: 'translation',
195
+ }, translation);
196
+ }
197
+ if ('rotation' in nodeConfig) {
198
+ rotation = Object.keys(nodeConfig.rotation[1]).reduce(function (output, axis) {
199
+ var _a;
200
+ var value = !ref.current.isTransformed
201
+ ? nodeConfig.rotation[0][axis] +
202
+ nodeConfig.rotation[1][axis] * animationPercent
203
+ : nodeConfig.rotation[1][axis] +
204
+ nodeConfig.rotation[0][axis] -
205
+ nodeConfig.rotation[1][axis] * animationPercent;
206
+ return Object.assign(output, (_a = {}, _a[axis] = value, _a));
207
+ }, {});
208
+ window.threekit.player.scene.set({
209
+ from: ref.current.assetId,
210
+ id: nodeConfig.nodeId,
211
+ plug: 'Transform',
212
+ property: 'rotation',
213
+ }, rotation);
214
+ }
215
+ if ('scale' in nodeConfig) {
216
+ scale = Object.keys(nodeConfig.scale[1]).reduce(function (output, axis) {
217
+ var _a;
218
+ var value = !ref.current.isTransformed
219
+ ? nodeConfig.scale[0][axis] +
220
+ nodeConfig.scale[1][axis] * animationPercent
221
+ : nodeConfig.scale[1][axis] +
222
+ nodeConfig.scale[0][axis] -
223
+ nodeConfig.scale[1][axis] * animationPercent;
224
+ return Object.assign(output, (_a = {}, _a[axis] = value, _a));
225
+ }, {});
226
+ window.threekit.player.scene.set({
227
+ from: ref.current.assetId,
228
+ id: nodeConfig.nodeId,
229
+ plug: 'Transform',
230
+ property: 'scale',
231
+ }, scale);
232
+ }
233
+ });
234
+ if (elapsed < ref.current.totalDuration) {
235
+ window.requestAnimationFrame(animateFrame);
236
+ }
237
+ else {
238
+ setAnimationInProgress(false);
239
+ ref.current.startTime = undefined;
240
+ ref.current.isTransformed = !ref.current.isTransformed;
241
+ }
242
+ };
243
+ var handleClickAnimate = function () { return __awaiter(void 0, void 0, void 0, function () {
244
+ var _a;
245
+ return __generator(this, function (_b) {
246
+ switch (_b.label) {
247
+ case 0:
248
+ ref.current.startTime = undefined;
249
+ if (!!ref.current.nodes) return [3 /*break*/, 2];
250
+ return [4 /*yield*/, prepAnimateConfig(animationConfig)];
251
+ case 1:
252
+ _a = _b.sent(), ref.current.assetId = _a[0], ref.current.totalDuration = _a[1], ref.current.nodes = _a[2];
253
+ ref.current.isTransformed = false;
254
+ _b.label = 2;
255
+ case 2:
256
+ setAnimationInProgress(true);
257
+ window.requestAnimationFrame(animateFrame);
258
+ return [2 /*return*/];
259
+ }
260
+ });
261
+ }); };
262
+ return [animationInProgress, handleClickAnimate];
263
+ };
264
+ exports.default = useAnimation;
package/dist/icons/Spinner.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  interface ISpinnerProps {
3
3
  size?: string;
4
+ thickness?: string;
4
5
  }
5
6
  declare function Spinner(props: ISpinnerProps): JSX.Element;
6
7
  declare namespace Spinner {
package/dist/icons/Spinner.js CHANGED
@@ -29,10 +29,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
29
29
  var react_1 = __importDefault(require("react"));
30
30
  var styled_components_1 = __importStar(require("styled-components"));
31
31
  function Spinner(props) {
32
- return react_1.default.createElement(Wrapper, { size: props.size });
32
+ return react_1.default.createElement(Wrapper, { size: props.size, thickness: props.thickness });
33
33
  }
34
34
  var spin = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\nto {\n transform: rotate(360deg);\n}\n"], ["\nto {\n transform: rotate(360deg);\n}\n"])));
35
- var Wrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: inline-block;\n width: ", ";\n height: ", ";\n border: 5px solid rgba(0, 0, 0, 0.3);\n border-radius: 50%;\n border-top-color: #000;\n animation: ", " 1s ease-in-out infinite;\n"], ["\n display: inline-block;\n width: ", ";\n height: ", ";\n border: 5px solid rgba(0, 0, 0, 0.3);\n border-radius: 50%;\n border-top-color: #000;\n animation: ", " 1s ease-in-out infinite;\n"])), function (props) { return props.size || '40px'; }, function (props) { return props.size || '40px'; }, spin);
35
+ var Wrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: inline-block;\n width: ", ";\n height: ", ";\n border: ", " solid rgba(0, 0, 0, 0.3);\n border-radius: 50%;\n border-top-color: #000;\n animation: ", " 1s ease-in-out infinite;\n"], ["\n display: inline-block;\n width: ", ";\n height: ", ";\n border: ", " solid rgba(0, 0, 0, 0.3);\n border-radius: 50%;\n border-top-color: #000;\n animation: ", " 1s ease-in-out infinite;\n"])), function (props) { return props.size || '40px'; }, function (props) { return props.size || '40px'; }, function (props) { return props.thickness || '5px'; }, spin);
36
36
  Spinner.iconName = 'spinner';
37
37
  exports.default = Spinner;
38
38
  var templateObject_1, templateObject_2;
package/dist/threekit.d.ts CHANGED
@@ -20,7 +20,7 @@ export interface ISceneQuery {
20
20
  child?: string;
21
21
  parent?: boolean;
22
22
  includeParent?: boolean;
23
- from?: ISceneQuery;
23
+ from?: string | ISceneQuery;
24
24
  hasPlug?: string;
25
25
  operator?: any;
26
26
  operatorIndex?: number;
@@ -36,6 +36,7 @@ export interface ISceneQuery {
36
36
  hierarchial?: boolean;
37
37
  }
38
38
  export interface ISceneResult {
39
+ id: string;
39
40
  name: string;
40
41
  configurator: IThreekitPrivateConfigurator;
41
42
  }
@@ -160,6 +161,8 @@ export interface IThreekitScene {
160
161
  RENDERED: 'rendered';
161
162
  };
162
163
  get: (query: ISceneQuery | string) => ISceneResult;
164
+ find: (query: ISceneQuery | string) => ISceneResult;
165
+ set: (query: ISceneQuery | string, transform: ICoordinates) => void;
163
166
  }
164
167
  export interface IThreekitTools {
165
168
  addTool: (tool: string) => void;
package/dist/utils.d.ts CHANGED
@@ -22,7 +22,7 @@ export declare const generateLayoutClassName: (component: string, customClassNam
22
22
  export declare const generateToolClassName: (component: string, customClassName?: string | undefined, title?: string | undefined) => string;
23
23
  export declare const generateDisplayClassName: (component: string, customClassName?: string | undefined, title?: string | undefined) => string;
24
24
  export declare const generateFormClassName: (component: string, customClassName?: string | undefined, title?: string | undefined) => string;
25
- export declare const IsJsonString: (str: string) => boolean;
25
+ export declare const isJsonString: (str: string) => boolean;
26
26
  export declare const objectToQueryStr: (obj: Record<string, any>) => string;
27
27
  export declare const getParams: () => Record<string, string | {
28
28
  [key: string]: any;
@@ -56,7 +56,7 @@ export declare const createThreekitScriptEl: (threekitDomain: string) => Promise
56
56
  export declare const translateAttribute: (attributes: Array<IThreekitDisplayAttribute>, translations?: ITranslationMap | undefined, language?: string | undefined) => IThreekitDisplayAttribute;
57
57
  export declare const selectionToConfiguration: (value: RawAttributeValue, attributeType: IAttributeTypes) => string | number | boolean | File | IConfigurationColor | {
58
58
  assetId: RawAttributeValue;
59
- };
59
+ } | undefined;
60
60
  export declare const filterFormAttributes: (attributes: Record<string, IThreekitDisplayAttribute>, attributeComponentProps: IAttributesComponentProps, includeReservedAttributes: boolean) => IThreekitDisplayAttribute[];
61
61
  export declare const isUuid: (str?: string | undefined) => boolean;
62
62
  export declare const loadTrebleConfig: () => Partial<ITrebleConfig>;
package/dist/utils.js CHANGED
@@ -9,7 +9,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
9
9
  return to.concat(ar || Array.prototype.slice.call(from));
10
10
  };
11
11
  Object.defineProperty(exports, "__esModule", { value: true });
12
- exports.loadTrebleConfig = exports.isUuid = exports.filterFormAttributes = exports.selectionToConfiguration = exports.translateAttribute = exports.createThreekitScriptEl = exports.metadataValueToObject = exports.easeInOutCubic = exports.copyToClipboard = exports.dataURItoFile = exports.dataURItoBlob = exports.setCameraPosition = exports.getCameraPosition = exports.findHitNode = exports.deflateRgb = exports.inflateRgb = exports.rgbToHex = exports.hexToRgb = exports.regularToKebabCase = exports.deepCompare = exports.shallowCompare = exports.getResumableUrl = exports.getParams = exports.objectToQueryStr = exports.IsJsonString = exports.generateFormClassName = exports.generateDisplayClassName = exports.generateToolClassName = exports.generateLayoutClassName = exports.generateWidgetClassName = exports.generateInputClassName = exports.generateClassName = void 0;
12
+ exports.loadTrebleConfig = exports.isUuid = exports.filterFormAttributes = exports.selectionToConfiguration = exports.translateAttribute = exports.createThreekitScriptEl = exports.metadataValueToObject = exports.easeInOutCubic = exports.copyToClipboard = exports.dataURItoFile = exports.dataURItoBlob = exports.setCameraPosition = exports.getCameraPosition = exports.findHitNode = exports.deflateRgb = exports.inflateRgb = exports.rgbToHex = exports.hexToRgb = exports.regularToKebabCase = exports.deepCompare = exports.shallowCompare = exports.getResumableUrl = exports.getParams = exports.objectToQueryStr = exports.isJsonString = exports.generateFormClassName = exports.generateDisplayClassName = exports.generateToolClassName = exports.generateLayoutClassName = exports.generateWidgetClassName = exports.generateInputClassName = exports.generateClassName = void 0;
13
13
  var constants_1 = require("./constants");
14
14
  var generateClassName = function (baseClass) {
15
15
  return function (component, customClassName, title) {
@@ -29,7 +29,7 @@ exports.generateLayoutClassName = (0, exports.generateClassName)(constants_1.LAY
29
29
  exports.generateToolClassName = (0, exports.generateClassName)(constants_1.TOOL_CLASS_NAME);
30
30
  exports.generateDisplayClassName = (0, exports.generateClassName)(constants_1.DISPLAY_CLASS_NAME);
31
31
  exports.generateFormClassName = (0, exports.generateClassName)(constants_1.FORM_CLASS_NAME);
32
- var IsJsonString = function (str) {
32
+ var isJsonString = function (str) {
33
33
  try {
34
34
  JSON.parse(str);
35
35
  }
@@ -38,7 +38,7 @@ var IsJsonString = function (str) {
38
38
  }
39
39
  return true;
40
40
  };
41
- exports.IsJsonString = IsJsonString;
41
+ exports.isJsonString = isJsonString;
42
42
  var isObject = function (object) {
43
43
  return object != null && typeof object === 'object';
44
44
  };
@@ -50,7 +50,7 @@ var objectToQueryStr = function (obj) {
50
50
  if (i)
51
51
  output += '&';
52
52
  if (val !== undefined)
53
- output += "".concat(key, "=").concat((0, exports.IsJsonString)(val) ? JSON.stringify(val) : val);
53
+ output += "".concat(key, "=").concat((0, exports.isJsonString)(val) ? JSON.stringify(val) : val);
54
54
  return output;
55
55
  }, '?');
56
56
  };
@@ -62,7 +62,7 @@ var getParams = function () {
62
62
  if (!(key === null || key === void 0 ? void 0 : key.length))
63
63
  return output;
64
64
  var preppedValue = decodeURIComponent(value);
65
- output[decodeURIComponent(key)] = (0, exports.IsJsonString)(preppedValue)
65
+ output[decodeURIComponent(key)] = (0, exports.isJsonString)(preppedValue)
66
66
  ? JSON.parse(preppedValue)
67
67
  : preppedValue;
68
68
  return output;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@threekit-tools/treble",
3
- "version": "0.0.54",
3
+ "version": "0.0.57-animation",
4
4
  "author": "Amaan Saeed",
5
5
  "license": "MIT",
6
6
  "files": [
@@ -13,6 +13,14 @@
13
13
  "publishConfig": {
14
14
  "directory": "dist"
15
15
  },
16
+ "jest": {
17
+ "verbose": true,
18
+ "globals": {
19
+ "ts-jest": {
20
+ "tsConfig": "tsconfig.json"
21
+ }
22
+ }
23
+ },
16
24
  "scripts": {
17
25
  "start": "tsc --watch",
18
26
  "build": "tsc",
@@ -21,7 +29,8 @@
21
29
  "build-storybook": "build-storybook -o build",
22
30
  "lint": "eslint ./src",
23
31
  "check-format": "prettier -c ./src",
24
- "format": "prettier --write ./src"
32
+ "format": "prettier --write ./src",
33
+ "test": "jest"
25
34
  },
26
35
  "dependencies": {
27
36
  "@reduxjs/toolkit": "^1.6.2",
@@ -40,18 +49,24 @@
40
49
  "@storybook/addon-links": "^6.3.12",
41
50
  "@storybook/addon-storysource": "^6.3.12",
42
51
  "@storybook/react": "^6.3.12",
52
+ "@testing-library/jest-dom": "^5.16.2",
53
+ "@testing-library/react": "^12.1.3",
54
+ "@types/jest": "^27.4.1",
43
55
  "@types/node": "^16.10.3",
44
56
  "@types/react": ">=17.0.27",
45
57
  "@types/react-dom": ">=17.0.9",
46
58
  "@types/redux-logger": "^3.0.9",
47
59
  "@types/styled-components": "^5.1.15",
48
60
  "@types/webpack-env": "^1.16.3",
61
+ "babel-jest": "^27.5.1",
49
62
  "babel-loader": "^8.2.2",
63
+ "jest": "^27.5.1",
50
64
  "react": ">=17.0.2",
51
65
  "react-dom": ">=17.0.2",
52
66
  "rimraf": "^3.0.2",
53
67
  "serve": "^12.0.1",
54
68
  "storybook-addon-styled-component-theme": "^2.0.0",
69
+ "ts-jest": "^27.1.3",
55
70
  "typescript": ">=4.4.4"
56
71
  },
57
72
  "gitHead": "2e16bcf98f81e16bb1768072fdb3968122e7966f"