oolib 2.12.3 → 2.13.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.
- package/dist/components/ActionMenu/index.js +0 -1
- package/dist/components/PercentCompletedPi/index.d.ts +4 -0
- package/dist/components/PercentCompletedPi/index.js +21 -0
- package/dist/components/PercentCompletedPi/styled.d.ts +4 -0
- package/dist/components/PercentCompletedPi/styled.js +32 -0
- package/dist/components/TabBar/index.styled.js +3 -3
- package/dist/components/TextInputs/index.js +2 -2
- package/dist/components/UserRoleBadge/index.d.ts +1 -4
- package/dist/components/UserRoleBadge/index.js +4 -2
- package/dist/globalStyles/index.js +2 -2
- package/dist/index.d.ts +1 -0
- package/dist/index.js +3 -1
- package/package.json +1 -1
|
@@ -58,7 +58,6 @@ var ActionMenu = function (_a) {
|
|
|
58
58
|
setShowActions(!showActions);
|
|
59
59
|
} }),
|
|
60
60
|
react_1.default.createElement(styled_1.StyledActionsDropMenu, __assign({ unfold: showActions }, { align: align, invert: invert }), actions.map(function (action) {
|
|
61
|
-
console.log(action);
|
|
62
61
|
var ActionButton = action.buttonComp || styled_1.StyledActionBtn;
|
|
63
62
|
return (react_1.default.createElement(ActionButton, __assign({ style: { justifyContent: 'left' } }, action, { onClick: function (ev) {
|
|
64
63
|
action.onClick && action.onClick(ev);
|
|
@@ -0,0 +1,21 @@
|
|
|
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.PercentCompletedPi = void 0;
|
|
7
|
+
var react_1 = __importDefault(require("react"));
|
|
8
|
+
var styled_1 = require("./styled");
|
|
9
|
+
function PercentCompletedPi(_a) {
|
|
10
|
+
var percent = _a.percent, _b = _a.size, size = _b === void 0 ? "2.4rem" : _b;
|
|
11
|
+
var perUnit = 1.8;
|
|
12
|
+
var transform = "rotate(".concat(parseInt(percent) * perUnit, "deg)");
|
|
13
|
+
return (react_1.default.createElement(styled_1.StyledWrapper, { size: size },
|
|
14
|
+
react_1.default.createElement(styled_1.StyledCircle, { size: size },
|
|
15
|
+
react_1.default.createElement(styled_1.StyledMask, { size: size, transform: transform },
|
|
16
|
+
react_1.default.createElement(styled_1.StyledFill, { size: size, transform: transform, className: "fill" })),
|
|
17
|
+
react_1.default.createElement(styled_1.StyledMask, { size: size, className: "mask half" },
|
|
18
|
+
react_1.default.createElement(styled_1.StyledFill, { size: size, transform: transform, className: "fill" }),
|
|
19
|
+
react_1.default.createElement(styled_1.StyledFill, { size: size, transform: transform, className: "fill fix" })))));
|
|
20
|
+
}
|
|
21
|
+
exports.PercentCompletedPi = PercentCompletedPi;
|
|
@@ -0,0 +1,32 @@
|
|
|
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.StyledFill = exports.StyledMask = exports.StyledCircle = exports.StyledWrapper = void 0;
|
|
11
|
+
var macro_1 = __importDefault(require("styled-components/macro"));
|
|
12
|
+
var utilsOolib_1 = require("../../utilsOolib");
|
|
13
|
+
exports.StyledWrapper = macro_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 50%;\n ", "\n background-color: ", ";\n"], ["\n border-radius: 50%;\n ", "\n background-color: ", ";\n"])), function (_a) {
|
|
14
|
+
var size = _a.size;
|
|
15
|
+
return "\n width: ".concat(size, ";\n height: ").concat(size, "; \n ");
|
|
16
|
+
}, function (_a) {
|
|
17
|
+
var theme = _a.theme;
|
|
18
|
+
return (0, utilsOolib_1.getPrimaryColor40)(theme.colors);
|
|
19
|
+
});
|
|
20
|
+
exports.StyledCircle = macro_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
21
|
+
exports.StyledMask = macro_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", "\n position: absolute;\n border-radius: 50%;\n \n"], ["\n ", "\n position: absolute;\n border-radius: 50%;\n \n"])), function (_a) {
|
|
22
|
+
var size = _a.size, transform = _a.transform;
|
|
23
|
+
return "\n ".concat(transform ? "transform: ".concat(transform) : '', ";\n width: ").concat(size, ";\n height: ").concat(size, "; \n clip: rect(0px, ").concat(size, ", ").concat(size, ", ").concat((parseFloat(size.replace('rem', '').trim()) / 2) + 'rem', ");\n ");
|
|
24
|
+
});
|
|
25
|
+
exports.StyledFill = macro_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", "\n border-radius: 50%;\n position: absolute;\n background-color: ", ";\n"], ["\n ", "\n border-radius: 50%;\n position: absolute;\n background-color: ", ";\n"])), function (_a) {
|
|
26
|
+
var size = _a.size, transform = _a.transform;
|
|
27
|
+
return "\n transform: ".concat(transform, ";\n width: ").concat(size, ";\n height: ").concat(size, "; \n clip: rect(0px, ").concat((parseFloat(size.replace('rem', '').trim()) / 2) + 'rem', ", ").concat(size, ", 0px);\n ");
|
|
28
|
+
}, function (_a) {
|
|
29
|
+
var theme = _a.theme;
|
|
30
|
+
return (0, utilsOolib_1.getPrimaryColor100)(theme.colors);
|
|
31
|
+
});
|
|
32
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -64,9 +64,9 @@ var tabBarTabStyle2 = (0, styled_components_1.css)(templateObject_9 || (template
|
|
|
64
64
|
// border-top: ${({ top }) => top && `0.1rem solid ${greyColor5}`};
|
|
65
65
|
// border-bottom: ${({ bottom }) => bottom && `0.1rem solid ${greyColor5}`};
|
|
66
66
|
// `;
|
|
67
|
-
exports.TabBarStyled = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n background-color: ", ";\n z-index: 1000;\n"], ["\n background-color: ", ";\n z-index: 1000;\n"])), white);
|
|
68
|
-
exports.TabBarContainerStyled = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n width: fit-content;\n"], ["\n width: fit-content;\n"])));
|
|
69
|
-
exports.TabBarRowStyled = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
67
|
+
exports.TabBarStyled = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n background-color: ", ";\n z-index: 1000;\n height: 4rem;\n"], ["\n background-color: ", ";\n z-index: 1000;\n height: 4rem;\n"])), white);
|
|
68
|
+
exports.TabBarContainerStyled = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n width: fit-content;\n height: 100%;\n"], ["\n width: fit-content;\n height: 100%;\n"])));
|
|
69
|
+
exports.TabBarRowStyled = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n display: flex;\n height: 100%;\n"], ["\n display: flex;\n height: 100%;\n"])));
|
|
70
70
|
exports.TabBarTabWrapper = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
71
71
|
var tabBarStyle = _a.tabBarStyle;
|
|
72
72
|
return (tabBarStyle === '1'
|
|
@@ -85,7 +85,7 @@ var DisplayIcon = function (_a) {
|
|
|
85
85
|
return (react_1.default.createElement("div", { style: { cursor: onClick ? 'pointer' : '' }, onMouseDown: onClick || null }, IconComp && react_1.default.createElement(IconComp, { size: size, weight: "bold" })));
|
|
86
86
|
};
|
|
87
87
|
var TextInput = function (props) {
|
|
88
|
-
var id = props.id, invert = props.invert, disabled = props.disabled, icon = props.icon, type = props.type, maxNumLimiter = props.maxNumLimiter, _a = props.placeholder, placeholder = _a === void 0 ? 'Enter Text...' : _a, value = props.value, onChange = props.onChange, readOnly = props.readOnly, iconOnClick = props.iconOnClick, eyeIcon = props.eyeIcon, S = props.S, validateOnBlur = props.validateOnBlur, actionBtn = props.actionBtn, className = props.className;
|
|
88
|
+
var id = props.id, invert = props.invert, disabled = props.disabled, icon = props.icon, type = props.type, maxNumLimiter = props.maxNumLimiter, _a = props.placeholder, placeholder = _a === void 0 ? 'Enter Text...' : _a, value = props.value, onChange = props.onChange, onFocus = props.onFocus, readOnly = props.readOnly, iconOnClick = props.iconOnClick, eyeIcon = props.eyeIcon, S = props.S, validateOnBlur = props.validateOnBlur, actionBtn = props.actionBtn, className = props.className;
|
|
89
89
|
var _b = (0, react_1.useState)(''), inputStatus = _b[0], setInputStatus = _b[1];
|
|
90
90
|
var composition = icon && !eyeIcon ? 'icon+text' : 'textOnly';
|
|
91
91
|
var size = S ? 'S' : 'M';
|
|
@@ -124,7 +124,7 @@ var TextInput = function (props) {
|
|
|
124
124
|
readOnly ? (react_1.default.createElement(Typo_1.SANS_3, { invert: invert }, type === 'password' ? '********' : value)) : (react_1.default.createElement(react_1.default.Fragment, null,
|
|
125
125
|
react_1.default.createElement(index_styled_1.InputContainerStyled, { invert: invert, type: type, disabled: disabled, status: inputStatus === null || inputStatus === void 0 ? void 0 : inputStatus.type, eyeIcon: eyeIcon, composition: composition },
|
|
126
126
|
icon && (react_1.default.createElement(DisplayIcon, { icon: icon, size: S ? 15 : 20, onClick: iconOnClick || null })),
|
|
127
|
-
react_1.default.createElement(index_styled_1.InputStyled, { className: 'SANS_3', id: id, type: type, name: type, placeholder: placeholder, value: value, onChange: handleOnChange, maxLength: maxNumLimiter, onBlur: handleValidateOnBlur, size: size, autoComplete: 'off' }),
|
|
127
|
+
react_1.default.createElement(index_styled_1.InputStyled, { className: 'SANS_3', id: id, type: type, name: type, placeholder: placeholder, value: value, onChange: handleOnChange, maxLength: maxNumLimiter, onBlur: handleValidateOnBlur, onFocus: onFocus, size: size, autoComplete: 'off' }),
|
|
128
128
|
inputStatus === 'loading' && (react_1.default.createElement("div", { style: { padding: '1rem 0' } },
|
|
129
129
|
react_1.default.createElement(Loader_1.Loader, { invert: invert, inline: true }))),
|
|
130
130
|
actionBtn && (react_1.default.createElement(Buttons_1.ButtonPrimary, { value: actionBtn.text, invert: actionBtn.invert, onClick: actionBtnEnabaled && actionBtn.onClick, disabled: !actionBtnEnabaled, style: { marginRight: '-2rem' } }))),
|
|
@@ -6,17 +6,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
exports.UserRoleBadge = void 0;
|
|
7
7
|
var react_1 = __importDefault(require("react"));
|
|
8
8
|
var icons_1 = require("../../icons");
|
|
9
|
+
var styled_components_1 = require("styled-components");
|
|
9
10
|
var BadgeAdmin = icons_1.icons.BadgeAdmin, BadgeSuperAdmin = icons_1.icons.BadgeSuperAdmin, BadgeMod = icons_1.icons.BadgeMod, BadgeVetted = icons_1.icons.BadgeVetted;
|
|
10
11
|
var UserRoleBadge = function (_a) {
|
|
11
12
|
var _b;
|
|
12
|
-
var role = _a.role, value = _a.value, className = _a.className
|
|
13
|
+
var role = _a.role, value = _a.value, className = _a.className;
|
|
13
14
|
var badges = {
|
|
14
15
|
BadgeSuperAdmin: BadgeSuperAdmin,
|
|
15
16
|
BadgeAdmin: BadgeAdmin,
|
|
16
17
|
BadgeMod: BadgeMod,
|
|
17
18
|
BadgeVetted: BadgeVetted
|
|
18
19
|
};
|
|
19
|
-
var
|
|
20
|
+
var theme = (0, styled_components_1.useTheme)();
|
|
21
|
+
var iconName = (_b = theme._Roles[value || role]) === null || _b === void 0 ? void 0 : _b.badgeIcon;
|
|
20
22
|
var Icon = iconName && badges[iconName];
|
|
21
23
|
return (Icon ?
|
|
22
24
|
react_1.default.createElement("div", { className: className },
|
|
@@ -11,5 +11,5 @@ var normalize_1 = require("./normalize");
|
|
|
11
11
|
var mixins_1 = require("../themes/mixins");
|
|
12
12
|
require("../assets/fonts/style.css");
|
|
13
13
|
var greyColor15 = themes_1.colors.greyColor15, greyColor40 = themes_1.colors.greyColor40, greyColor80 = themes_1.colors.greyColor80, greyColor100 = themes_1.colors.greyColor100;
|
|
14
|
-
exports.GlobalStyles = (0, styled_components_1.createGlobalStyle)(
|
|
15
|
-
var templateObject_1;
|
|
14
|
+
exports.GlobalStyles = (0, styled_components_1.createGlobalStyle)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\n//some normalize code picked off the internet\n", "\n\nhtml{\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-size:10px;\n color: ", ";\n scroll-behavior: smooth;\n}\n\n\n", "\n\nhr {\n border: none;\n border-bottom: 0.1rem solid ", ";\n}\n\n\n\nbutton:focus, input:focus, textarea:focus{\n outline: none;\n}\n\n// be sure never to add 'span' to this list.. ( it will mess with base typo styling on RTE )\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n ", "\n font-weight: normal;\n font-style: normal;\n margin: 0;\n padding: 0;\n}\n\nul, ol { padding-left: 2rem; margin-bottom: 0;}\nli { list-style: none }\n\n.sansSerif{\n ", "\n}\n\n.serif{\n ", "\n}\n\n.medium {\n font-weight: 500;\n}\n\n.semibold {\n font-weight: 600;\n}\n\n.bold{\n font-weight:bold;\n}\n\n.italic{\n font-style: italic;\n}\n\nb, strong {\n font-weight: bold;\n}\n\n\n \n"], ["\n\n//some normalize code picked off the internet\n", "\n\nhtml{\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-size:10px;\n color: ", ";\n scroll-behavior: smooth;\n}\n\n\n", "\n\nhr {\n border: none;\n border-bottom: 0.1rem solid ", ";\n}\n\n\n\nbutton:focus, input:focus, textarea:focus{\n outline: none;\n}\n\n// be sure never to add 'span' to this list.. ( it will mess with base typo styling on RTE )\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n ", "\n font-weight: normal;\n font-style: normal;\n margin: 0;\n padding: 0;\n}\n\nul, ol { padding-left: 2rem; margin-bottom: 0;}\nli { list-style: none }\n\n.sansSerif{\n ", "\n}\n\n.serif{\n ", "\n}\n\n.medium {\n font-weight: 500;\n}\n\n.semibold {\n font-weight: 600;\n}\n\n.bold{\n font-weight:bold;\n}\n\n.italic{\n font-style: italic;\n}\n\nb, strong {\n font-weight: bold;\n}\n\n\n \n"])), normalize_1.normalize, greyColor100, (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ::-webkit-scrollbar { \n width: 0.7rem;// for vertical bars\n height: 0.5rem; //for vertical bars \n }\n ::-webkit-scrollbar-track {background-color: ", ";}\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 0.4rem;\n }\n ::-webkit-scrollbar-thumb:hover {background-color: ", ";}\n ", "{\n ::-webkit-scrollbar { \n width: 1rem;\n height: 0.7rem;\n }\n ::-webkit-scrollbar-thumb {\n border-radius: 0.5rem;\n }\n }"], ["\n ::-webkit-scrollbar { \n width: 0.7rem;// for vertical bars\n height: 0.5rem; //for vertical bars \n }\n ::-webkit-scrollbar-track {background-color: ", ";}\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 0.4rem;\n }\n ::-webkit-scrollbar-thumb:hover {background-color: ", ";}\n ", "{\n ::-webkit-scrollbar { \n width: 1rem;\n height: 0.7rem;\n }\n ::-webkit-scrollbar-thumb {\n border-radius: 0.5rem;\n }\n }"])), greyColor15, greyColor40, greyColor80, (0, mixins_1.mediaQuery)('md')), greyColor80, themes_1.typo.sansSerif, themes_1.typo.sansSerif, themes_1.typo.serif);
|
|
15
|
+
var templateObject_1, templateObject_2;
|
package/dist/index.d.ts
CHANGED
|
@@ -20,3 +20,4 @@ export { UserRoleBadge } from "./components/UserRoleBadge";
|
|
|
20
20
|
export { OKELink } from "./components/OKELink";
|
|
21
21
|
export { Tooltip } from "./components/Tooltip";
|
|
22
22
|
export { ActionMenu } from "./components/ActionMenu";
|
|
23
|
+
export { PercentCompletedPi } from "./components/PercentCompletedPi";
|
package/dist/index.js
CHANGED
|
@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
14
14
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.icons = exports.colors = exports.GlobalStyles = void 0;
|
|
17
|
+
exports.PercentCompletedPi = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.icons = exports.colors = exports.GlobalStyles = void 0;
|
|
18
18
|
var globalStyles_1 = require("./globalStyles");
|
|
19
19
|
Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
|
|
20
20
|
__exportStar(require("./components/Typo"), exports);
|
|
@@ -42,6 +42,8 @@ var Tooltip_1 = require("./components/Tooltip");
|
|
|
42
42
|
Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return Tooltip_1.Tooltip; } });
|
|
43
43
|
var ActionMenu_1 = require("./components/ActionMenu");
|
|
44
44
|
Object.defineProperty(exports, "ActionMenu", { enumerable: true, get: function () { return ActionMenu_1.ActionMenu; } });
|
|
45
|
+
var PercentCompletedPi_1 = require("./components/PercentCompletedPi");
|
|
46
|
+
Object.defineProperty(exports, "PercentCompletedPi", { enumerable: true, get: function () { return PercentCompletedPi_1.PercentCompletedPi; } });
|
|
45
47
|
__exportStar(require("./components/TabBar"), exports);
|
|
46
48
|
__exportStar(require("./components/Banners"), exports);
|
|
47
49
|
__exportStar(require("./themes/mixins"), exports);
|