@threekit-tools/treble 0.0.84 → 0.0.85
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.
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import { BUTTON_SHAPES, BUTTON_TYPES } from '../Button';
|
|
4
|
+
import type { Positions } from './share.styles';
|
|
4
5
|
interface ShareProps {
|
|
5
6
|
shape?: BUTTON_SHAPES;
|
|
6
7
|
type?: BUTTON_TYPES;
|
|
7
8
|
className?: string;
|
|
8
9
|
message?: string;
|
|
10
|
+
position: Positions;
|
|
9
11
|
}
|
|
10
12
|
export declare const Share: {
|
|
11
13
|
(props: ShareProps): JSX.Element | null;
|
|
@@ -1,27 +1,157 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
26
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
27
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
28
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
29
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
30
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
31
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
32
|
+
});
|
|
33
|
+
};
|
|
34
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
35
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
36
|
+
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
37
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
38
|
+
function step(op) {
|
|
39
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
40
|
+
while (_) try {
|
|
41
|
+
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;
|
|
42
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
43
|
+
switch (op[0]) {
|
|
44
|
+
case 0: case 1: t = op; break;
|
|
45
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
46
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
47
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
48
|
+
default:
|
|
49
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
50
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
51
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
52
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
53
|
+
if (t[2]) _.ops.pop();
|
|
54
|
+
_.trys.pop(); continue;
|
|
55
|
+
}
|
|
56
|
+
op = body.call(thisArg, _);
|
|
57
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
58
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
59
|
+
}
|
|
60
|
+
};
|
|
2
61
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
62
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
63
|
};
|
|
5
64
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
65
|
exports.Share = void 0;
|
|
7
|
-
var react_1 =
|
|
66
|
+
var react_1 = __importStar(require("react"));
|
|
8
67
|
var prop_types_1 = __importDefault(require("prop-types"));
|
|
9
68
|
var Button_1 = __importDefault(require("../Button"));
|
|
69
|
+
var message_1 = __importDefault(require("../message"));
|
|
10
70
|
var Share_1 = __importDefault(require("../../icons/Share"));
|
|
11
71
|
var useThreekitInitStatus_1 = __importDefault(require("../../hooks/useThreekitInitStatus"));
|
|
12
|
-
var useShare_1 = __importDefault(require("../../hooks/useShare"));
|
|
13
72
|
var utils_1 = require("../../utils");
|
|
73
|
+
var share_styles_1 = require("./share.styles");
|
|
14
74
|
var Share = function (props) {
|
|
15
|
-
var _a = Object.assign({
|
|
75
|
+
var _a = Object.assign({
|
|
76
|
+
type: 'threekit',
|
|
77
|
+
shape: 'round',
|
|
78
|
+
message: 'Link copied!',
|
|
79
|
+
position: 'bottom-right',
|
|
80
|
+
}, props), shape = _a.shape, type = _a.type, className = _a.className, msg = _a.message, position = _a.position;
|
|
16
81
|
var hasLoaded = (0, useThreekitInitStatus_1.default)();
|
|
17
|
-
var
|
|
18
|
-
|
|
82
|
+
var _b = (0, react_1.useState)(false), show = _b[0], setShow = _b[1];
|
|
83
|
+
var _c = (0, react_1.useState)(null), resumeUrl = _c[0], setResumeUrl = _c[1];
|
|
84
|
+
var resumeUrlElRef = (0, react_1.useRef)(null);
|
|
85
|
+
var shareButtonRef = (0, react_1.useRef)(null);
|
|
86
|
+
var shareContentRef = (0, react_1.useRef)(null);
|
|
87
|
+
(0, react_1.useEffect)(function () {
|
|
88
|
+
var handleClickOutside = function (e) {
|
|
89
|
+
var _a, _b;
|
|
90
|
+
if (!e)
|
|
91
|
+
return;
|
|
92
|
+
if (!((_a = shareButtonRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) &&
|
|
93
|
+
!((_b = shareContentRef.current) === null || _b === void 0 ? void 0 : _b.contains(e.target))) {
|
|
94
|
+
setShow(false);
|
|
95
|
+
e.stopPropagation();
|
|
96
|
+
}
|
|
97
|
+
};
|
|
98
|
+
document.addEventListener('mousedown', handleClickOutside);
|
|
99
|
+
return function () {
|
|
100
|
+
document.removeEventListener('mousedown', handleClickOutside);
|
|
101
|
+
};
|
|
102
|
+
}, [show, shareButtonRef, shareContentRef]);
|
|
103
|
+
if (!hasLoaded)
|
|
19
104
|
return null;
|
|
20
105
|
var cls = (0, utils_1.generateWidgetClassName)('share', className);
|
|
21
|
-
var handleClick = function () {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
106
|
+
var handleClick = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
107
|
+
var configuration, e_1;
|
|
108
|
+
return __generator(this, function (_a) {
|
|
109
|
+
switch (_a.label) {
|
|
110
|
+
case 0:
|
|
111
|
+
if (show) {
|
|
112
|
+
setResumeUrl(null);
|
|
113
|
+
setShow(!show);
|
|
114
|
+
return [2];
|
|
115
|
+
}
|
|
116
|
+
return [4, window.threekit.treble.saveConfiguration()];
|
|
117
|
+
case 1:
|
|
118
|
+
configuration = _a.sent();
|
|
119
|
+
_a.label = 2;
|
|
120
|
+
case 2:
|
|
121
|
+
_a.trys.push([2, 4, , 5]);
|
|
122
|
+
return [4, navigator.clipboard.writeText(configuration.resumableUrl)];
|
|
123
|
+
case 3:
|
|
124
|
+
_a.sent();
|
|
125
|
+
if (msg === null || msg === void 0 ? void 0 : msg.length)
|
|
126
|
+
message_1.default.info(msg);
|
|
127
|
+
return [3, 5];
|
|
128
|
+
case 4:
|
|
129
|
+
e_1 = _a.sent();
|
|
130
|
+
setResumeUrl(configuration.resumableUrl);
|
|
131
|
+
setShow(!show);
|
|
132
|
+
return [3, 5];
|
|
133
|
+
case 5: return [2];
|
|
134
|
+
}
|
|
135
|
+
});
|
|
136
|
+
}); };
|
|
137
|
+
var handleClickCopy = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
138
|
+
var _a;
|
|
139
|
+
return __generator(this, function (_b) {
|
|
140
|
+
if (!((_a = resumeUrlElRef.current) === null || _a === void 0 ? void 0 : _a.value))
|
|
141
|
+
return [2];
|
|
142
|
+
navigator.clipboard.writeText(resumeUrlElRef.current.value);
|
|
143
|
+
if (msg === null || msg === void 0 ? void 0 : msg.length)
|
|
144
|
+
message_1.default.info(msg);
|
|
145
|
+
return [2];
|
|
146
|
+
});
|
|
147
|
+
}); };
|
|
148
|
+
return (react_1.default.createElement(share_styles_1.Wrapper, { ref: shareButtonRef },
|
|
149
|
+
react_1.default.createElement(Button_1.default, { className: cls, shape: shape, type: type, icon: Share_1.default.iconName, onClick: handleClick }),
|
|
150
|
+
show ? (react_1.default.createElement(share_styles_1.ShareWrapper, { position: position },
|
|
151
|
+
react_1.default.createElement(share_styles_1.Content, { ref: shareContentRef },
|
|
152
|
+
react_1.default.createElement("input", { type: "text", ref: resumeUrlElRef, value: resumeUrl || '', onChange: function () { } }),
|
|
153
|
+
react_1.default.createElement("button", { type: "button", onClick: handleClickCopy }, "copy link")),
|
|
154
|
+
react_1.default.createElement(share_styles_1.Caret, null))) : null));
|
|
25
155
|
};
|
|
26
156
|
exports.Share = Share;
|
|
27
157
|
exports.Share.propTypes = {
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export declare type Positions = 'top-right' | 'bottom-right' | 'bottom-left' | 'top-left';
|
|
2
|
+
interface PositionProps {
|
|
3
|
+
position: Positions;
|
|
4
|
+
}
|
|
5
|
+
export declare const Wrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
6
|
+
export declare const Content: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
7
|
+
export declare const Caret: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
8
|
+
export declare const ShareWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, PositionProps, never>;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,23 @@
|
|
|
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.ShareWrapper = exports.Caret = exports.Content = exports.Wrapper = void 0;
|
|
11
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
+
exports.Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n position: relative;\n"], ["\n height: 40px;\n width: 40px;\n position: relative;\n"])));
|
|
13
|
+
var ShareWrapperStyles = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
14
|
+
exports.Content = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: 24px 18px;\n border-radius: 4px;\n background: rgba(0, 0, 0, 0.9);\n color: white;\n font-size: 16px;\n width: 290px;\n\n display: flex;\n flex-direction: row;\n justify-content: center;\n\n input {\n background: #555555;\n color: #ffffff;\n border: none;\n outline: none;\n padding: 9px;\n border-radius: 4px;\n font-size: 13px;\n text-overflow: ellipsis;\n width: 180px;\n }\n\n button {\n color: #2a94f5;\n font-size: 13px;\n background: none;\n outline: none;\n border: none;\n cursor: pointer;\n }\n"], ["\n padding: 24px 18px;\n border-radius: 4px;\n background: rgba(0, 0, 0, 0.9);\n color: white;\n font-size: 16px;\n width: 290px;\n\n display: flex;\n flex-direction: row;\n justify-content: center;\n\n input {\n background: #555555;\n color: #ffffff;\n border: none;\n outline: none;\n padding: 9px;\n border-radius: 4px;\n font-size: 13px;\n text-overflow: ellipsis;\n width: 180px;\n }\n\n button {\n color: #2a94f5;\n font-size: 13px;\n background: none;\n outline: none;\n border: none;\n cursor: pointer;\n }\n"])));
|
|
15
|
+
exports.Caret = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: 0;\n height: 0;\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n border-top: 8px solid rgba(0, 0, 0, 0.9);\n\n position: absolute;\n"], ["\n width: 0;\n height: 0;\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n border-top: 8px solid rgba(0, 0, 0, 0.9);\n\n position: absolute;\n"])));
|
|
16
|
+
exports.ShareWrapper = (0, styled_components_1.default)(ShareWrapperStyles)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n top: ", ";\n left: ", ";\n transform: ", ";\n\n ", " {\n left: ", ";\n top: ", ";\n\n transform: ", ";\n }\n"], ["\n top: ", ";\n left: ", ";\n transform: ", ";\n\n ", " {\n left: ", ";\n top: ", ";\n\n transform: ", ";\n }\n"])), function (props) { return (props.position.includes('top') ? '14px' : '-100%'); }, function (props) { return (props.position.includes('right') ? '-250px' : 'auto'); }, function (props) {
|
|
17
|
+
return props.position.includes('top')
|
|
18
|
+
? ''
|
|
19
|
+
: 'translateY(calc(0px - 14px - 100%))';
|
|
20
|
+
}, exports.Caret, function (props) { return (props.position.includes('right') ? '260px' : '10px'); }, function (props) { return (props.position.includes('top') ? '0' : 'auto'); }, function (props) {
|
|
21
|
+
return props.position.includes('top') ? 'translateY(-100%) scaleY(-1)' : '';
|
|
22
|
+
});
|
|
23
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@threekit-tools/treble",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.85",
|
|
4
4
|
"author": "Amaan Saeed",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"files": [
|
|
@@ -43,6 +43,8 @@
|
|
|
43
43
|
"dependencies": {
|
|
44
44
|
"@reduxjs/toolkit": "^1.6.2",
|
|
45
45
|
"axios": "^0.22.0",
|
|
46
|
+
"chokidar": "^3.5.3",
|
|
47
|
+
"live-server": "^1.2.2",
|
|
46
48
|
"react-redux": "^7.2.6",
|
|
47
49
|
"redux": "^4.1.2",
|
|
48
50
|
"redux-logger": "^3.0.6",
|