@threekit-tools/treble 0.0.34-codepen-0 → 0.0.37-codepen-0
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.
|
@@ -5,6 +5,7 @@ export interface ISwatch extends IFormComponentProps<IOption> {
|
|
|
5
5
|
showThumbnail?: boolean;
|
|
6
6
|
showPrice?: boolean;
|
|
7
7
|
showDescription?: boolean;
|
|
8
|
+
size?: string;
|
|
8
9
|
}
|
|
9
10
|
export declare const Swatch: {
|
|
10
11
|
(props: ISwatch): JSX.Element;
|
|
@@ -37,6 +38,12 @@ export declare const Swatch: {
|
|
|
37
38
|
* Handles the user seletion by passing the value of the selected
|
|
38
39
|
* option as the argument into the onClick callback.
|
|
39
40
|
*/
|
|
41
|
+
size: PropTypes.Requireable<string>;
|
|
42
|
+
/**
|
|
43
|
+
* The size of the for a swatch option. The size should be a valid CSS
|
|
44
|
+
* height/width property.
|
|
45
|
+
*
|
|
46
|
+
*/
|
|
40
47
|
onClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
41
48
|
/**
|
|
42
49
|
* The options set to be displayed for the user
|
|
@@ -24,13 +24,13 @@ var SwatchInfo = function (props) {
|
|
|
24
24
|
react_1.default.createElement("div", null))));
|
|
25
25
|
};
|
|
26
26
|
var Thumbnail = function (props) {
|
|
27
|
-
var imageUrl = props.imageUrl, color = props.color, name = props.name, shape = props.shape, className = props.className;
|
|
27
|
+
var imageUrl = props.imageUrl, color = props.color, name = props.name, shape = props.shape, size = props.size, className = props.className;
|
|
28
28
|
if (!imageUrl && !color)
|
|
29
29
|
return react_1.default.createElement("div", null);
|
|
30
|
-
return (react_1.default.createElement(swatch_styles_1.OptionThumbnail, { className: "".concat(className, " option-thumbnail"), color: color, shape: shape }, imageUrl ? react_1.default.createElement("img", { src: imageUrl, alt: name || '' }) : react_1.default.createElement("span", null)));
|
|
30
|
+
return (react_1.default.createElement(swatch_styles_1.OptionThumbnail, { className: "".concat(className, " option-thumbnail"), color: color, shape: shape, size: size }, imageUrl ? react_1.default.createElement("img", { src: imageUrl, alt: name || '' }) : react_1.default.createElement("span", null)));
|
|
31
31
|
};
|
|
32
32
|
var Swatch = function (props) {
|
|
33
|
-
var _a = Object.assign({ shape: 'round' }, props), title = _a.title, shape = _a.shape, description = _a.description, options = _a.options, value = _a.value, onClick = _a.onClick, customClassName = _a.className, showThumbnail = _a.showThumbnail, showPrice = _a.showPrice, showDescription = _a.showDescription;
|
|
33
|
+
var _a = Object.assign({ shape: 'round', size: '60px' }, props), title = _a.title, shape = _a.shape, description = _a.description, options = _a.options, value = _a.value, onClick = _a.onClick, customClassName = _a.className, showThumbnail = _a.showThumbnail, showPrice = _a.showPrice, showDescription = _a.showDescription, size = _a.size;
|
|
34
34
|
var cls = (0, utils_1.generateInputClassName)('swatch', customClassName, title);
|
|
35
35
|
return (react_1.default.createElement(shared_styles_1.FormComponentWrapper, { className: cls },
|
|
36
36
|
react_1.default.createElement(FormComponentTitle_1.default, { title: title, className: cls }),
|
|
@@ -45,9 +45,9 @@ var Swatch = function (props) {
|
|
|
45
45
|
}), imageUrl = _a.imageUrl, color = _a.color, name = _a.name, description = _a.description, price = _a.price, optionValue = _a.optionValue;
|
|
46
46
|
var selected = value === optionValue;
|
|
47
47
|
var clsOpt = "".concat(cls, "-option option-").concat(i, " ").concat(optionValue).concat(selected ? ' selected' : '');
|
|
48
|
-
return (react_1.default.createElement(swatch_styles_1.OptionWrapper, { key: i, onClick: function () { return onClick && onClick(optionValue); }, selected: selected, className: clsOpt, shape: shape },
|
|
48
|
+
return (react_1.default.createElement(swatch_styles_1.OptionWrapper, { key: i, onClick: function () { return onClick && onClick(optionValue); }, selected: selected, className: clsOpt, shape: shape, size: size },
|
|
49
49
|
react_1.default.createElement("div", null,
|
|
50
|
-
react_1.default.createElement(Thumbnail, { imageUrl: imageUrl, color: color, shape: shape, className: clsOpt })),
|
|
50
|
+
react_1.default.createElement(Thumbnail, { imageUrl: imageUrl, color: color, shape: shape, className: clsOpt, size: size })),
|
|
51
51
|
react_1.default.createElement(SwatchInfo, { title: name, price: price, description: description })));
|
|
52
52
|
}))));
|
|
53
53
|
};
|
|
@@ -81,6 +81,12 @@ exports.Swatch.propTypes = {
|
|
|
81
81
|
* Handles the user seletion by passing the value of the selected
|
|
82
82
|
* option as the argument into the onClick callback.
|
|
83
83
|
*/
|
|
84
|
+
size: prop_types_1.default.string,
|
|
85
|
+
/**
|
|
86
|
+
* The size of the for a swatch option. The size should be a valid CSS
|
|
87
|
+
* height/width property.
|
|
88
|
+
*
|
|
89
|
+
*/
|
|
84
90
|
onClick: prop_types_1.default.func,
|
|
85
91
|
/**
|
|
86
92
|
* The options set to be displayed for the user
|
|
@@ -10,16 +10,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.OptionWrapper = exports.SwatchInfoWrapper = exports.OptionThumbnail = exports.OptionWrapperStyles = exports.SwatchWrapper = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
exports.SwatchWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n\n & > div {\n margin-bottom: 5px;\n }\n\n & > div:not(:last-child) {\n margin-right: 5px;\n }\n"], ["\n width: 100%;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n\n & > div {\n margin-bottom: 5px;\n }\n\n & > div:not(:last-child) {\n margin-right: 5px;\n }\n"])));
|
|
13
|
-
exports.OptionWrapperStyles = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height:
|
|
13
|
+
exports.OptionWrapperStyles = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n\n & > div:first-child {\n height: ", ";\n width: ", ";\n border-radius: ", ";\n border: 2px solid\n ", ";\n\n padding: 2px;\n\n cursor: pointer;\n transition: all 0.3s;\n\n &:hover {\n ", "\n }\n }\n"], ["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n\n & > div:first-child {\n height: ", ";\n width: ", ";\n border-radius: ", ";\n border: 2px solid\n ", ";\n\n padding: 2px;\n\n cursor: pointer;\n transition: all 0.3s;\n\n &:hover {\n ", "\n }\n }\n"])), function (props) { return props.size || '60px'; }, function (props) { return props.size || '60px'; }, function (props) {
|
|
14
14
|
return props.shape === 'round' ? '50%' : props.theme.borderRadius;
|
|
15
|
-
}, function (props) {
|
|
15
|
+
}, function (props) { return props.size || '60px'; }, function (props) { return props.size || '60px'; }, function (props) {
|
|
16
16
|
return props.shape === 'round' ? '50%' : props.theme.borderRadius;
|
|
17
17
|
}, function (props) { return (props.selected ? props.theme.primaryColor : '#00000000'); }, function (props) {
|
|
18
18
|
return props.selected
|
|
19
19
|
? ''
|
|
20
20
|
: "border: 2px solid ".concat(props.theme.primaryColor, "55;");
|
|
21
21
|
});
|
|
22
|
-
exports.OptionThumbnail = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height:
|
|
22
|
+
exports.OptionThumbnail = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n text-align: center;\n display: block;\n\n border-radius: ", ";\n overflow: hidden;\n\n ", "\n\n img {\n height: 100%;\n width: auto;\n object-fit: cover;\n }\n"], ["\n height: ", ";\n width: ", ";\n text-align: center;\n display: block;\n\n border-radius: ", ";\n overflow: hidden;\n\n ", "\n\n img {\n height: 100%;\n width: auto;\n object-fit: cover;\n }\n"])), function (props) { return (props.size ? "calc(".concat(props.size, " - 8px)") : '52px'); }, function (props) { return (props.size ? "calc(".concat(props.size, " - 8px)") : '52px'); }, function (props) {
|
|
23
23
|
return props.shape === 'round' ? '50%' : props.theme.borderRadius;
|
|
24
24
|
}, function (props) { return (props.color ? "background: ".concat(props.color, ";") : ''); });
|
|
25
25
|
exports.SwatchInfoWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: max-content;\n position: relative;\n top: -100%;\n left: 50%;\n transform: translateX(-50%) translateY(-100%);\n padding-bottom: 4px;\n color: white;\n font-family: ", ";\n\n display: none;\n\n & > div:nth-child(1) {\n background: rgba(0, 0, 0, 0.6);\n padding: 4px 6px;\n border-radius: ", ";\n max-width: 250px;\n }\n\n & > div:nth-child(2) {\n display: flex;\n flex-direction: row;\n justify-content: space-around;\n\n & > div {\n width: 0;\n height: 0;\n border-left: 8px solid transparent;\n border-right: 8px solid transparent;\n\n border-top: 8px solid rgba(0, 0, 0, 0.6);\n\n overflow: hidden;\n pointer-events: none;\n }\n }\n"], ["\n width: max-content;\n position: relative;\n top: -100%;\n left: 50%;\n transform: translateX(-50%) translateY(-100%);\n padding-bottom: 4px;\n color: white;\n font-family: ", ";\n\n display: none;\n\n & > div:nth-child(1) {\n background: rgba(0, 0, 0, 0.6);\n padding: 4px 6px;\n border-radius: ", ";\n max-width: 250px;\n }\n\n & > div:nth-child(2) {\n display: flex;\n flex-direction: row;\n justify-content: space-around;\n\n & > div {\n width: 0;\n height: 0;\n border-left: 8px solid transparent;\n border-right: 8px solid transparent;\n\n border-top: 8px solid rgba(0, 0, 0, 0.6);\n\n overflow: hidden;\n pointer-events: none;\n }\n }\n"])), function (props) { return props.theme.fontFamily; }, function (props) { return props.theme.borderRadius; });
|
package/dist/utils.js
CHANGED
|
@@ -351,28 +351,24 @@ var isUuid = function (str) {
|
|
|
351
351
|
exports.isUuid = isUuid;
|
|
352
352
|
var loadTrebleConfig = function () {
|
|
353
353
|
var config = {};
|
|
354
|
+
// try {
|
|
355
|
+
// const project = require(`/threekit.config.js`).default;
|
|
356
|
+
// if (project) config.project = project;
|
|
357
|
+
// } catch (e) {
|
|
358
|
+
// console.log(e);
|
|
359
|
+
// }
|
|
360
|
+
// try {
|
|
361
|
+
// const player = require('/.treble/player.config.js').default;
|
|
362
|
+
// if (player) config.player = player;
|
|
363
|
+
// } catch (e) {
|
|
364
|
+
// console.log(e);
|
|
365
|
+
// }
|
|
366
|
+
// try {
|
|
367
|
+
// const treble = require('/.treble/treble.config.js').default;
|
|
368
|
+
// if (treble) config.treble = treble;
|
|
369
|
+
// } catch (e) {
|
|
370
|
+
// console.log(e);
|
|
371
|
+
// }
|
|
354
372
|
return config;
|
|
355
373
|
};
|
|
356
374
|
exports.loadTrebleConfig = loadTrebleConfig;
|
|
357
|
-
// export const loadTrebleConfig = () => {
|
|
358
|
-
// let config: Partial<ITrebleConfig> = {};
|
|
359
|
-
// try {
|
|
360
|
-
// const project = require(`/threekit.config.js`).default;
|
|
361
|
-
// if (project) config.project = project;
|
|
362
|
-
// } catch (e) {
|
|
363
|
-
// console.log(e);
|
|
364
|
-
// }
|
|
365
|
-
// try {
|
|
366
|
-
// const player = require('/.treble/player.config.js').default;
|
|
367
|
-
// if (player) config.player = player;
|
|
368
|
-
// } catch (e) {
|
|
369
|
-
// console.log(e);
|
|
370
|
-
// }
|
|
371
|
-
// try {
|
|
372
|
-
// const treble = require('/.treble/treble.config.js').default;
|
|
373
|
-
// if (treble) config.treble = treble;
|
|
374
|
-
// } catch (e) {
|
|
375
|
-
// console.log(e);
|
|
376
|
-
// }
|
|
377
|
-
// return config;
|
|
378
|
-
// };
|