@up-group/react-controls
Version:
We know that there are a ton of react UI library projects to choose from. Our hope with this one is to provide the next generation of react components that you can use to bootstrap your next project, or as a reference for building a UIKit. Read on to get
165 lines • 17 kB
JavaScript
"use strict";
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var themedComponents_1 = require("../../../Common/theming/themedComponents");
var utils_1 = require("../../../Common/utils");
var types_1 = require("../../../Common/utils/types");
var _1 = require("./");
var index_1 = require("../../Display/SvgIcon/index");
var icons_1 = require("../../Display/SvgIcon/icons");
var classnames = require("classnames");
var LoadingIndicator_1 = require("../../Display/LoadingIndicator");
exports.ActionIconMap = new types_1.Dictionary([]);
for (var i = 0; i < icons_1.IconNames.length; i++) {
var iconName = icons_1.IconNames[i];
exports.ActionIconMap.set(iconName, iconName);
}
var DEFAULT_MIN_SIZE = "30px";
var DEFAULT_BORDER_RADIUS = "4px";
var ReactButtonComponent = function (props) {
var children = props.children, className = props.className, onClick = props.onClick, dataFor = props.dataFor, width = props.width, iconPosition = props.iconPosition, isProcessing = props.isProcessing;
var actionType = props.actionType;
var iconName = 'none';
if (actionType && exports.ActionIconMap.containsKey(actionType)) {
iconName = exports.ActionIconMap.get(actionType);
}
else if (props.iconName) {
iconName = props.iconName;
}
var icon = React.createElement(index_1.default, { iconName: iconName, width: props.iconSize, height: props.iconSize, position: iconPosition, className: props.rotate ? 'rotating' : '', color: props.color });
var tooltipProps = {};
if (dataFor) {
tooltipProps = {
"data-tip": "tooltip",
"data-for": dataFor
};
}
var MainButton = (React.createElement("button", __assign({ onClick: onClick, className: classnames('up-btn', className) }, tooltipProps),
iconName != 'none' && iconPosition == 'left' && isProcessing !== true &&
icon,
width !== 'icon' && isProcessing !== true &&
children,
width !== 'icon' && isProcessing === true &&
React.createElement(LoadingIndicator_1.default, { displayMode: "inline", isLoading: true }),
iconName != 'none' && iconPosition == 'right' && isProcessing !== true &&
icon));
return MainButton;
};
var shadow = function (props) {
return (_a = ["\n box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 -1px 0 rgba(16, 22, 26, 0.1) ;\n"], _a.raw = ["\n box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 -1px 0 rgba(16, 22, 26, 0.1) ;\n"], themedComponents_1.css(_a));
var _a;
};
var base = function (props) {
return (_a = ["\n text-align: center;\n font-size: ", ";\n border: none;\n text-decoration: none;\n display: inline-block;\n cursor: pointer;\n vertical-align: middle;\n width: ", ";\n line-height: ", ";\n svg {\n margin:0px;\n display:inline-block;\n float: ", ";\n }\n span {\n display: inline-block;\n padding-top: 3px;\n padding-bottom: 3px;\n float:left;\n height: ", ";\n padding-left: ", ";\n padding-right: ", ";\n }\n &:active {\n box-shadow: inset 5px 5px 5px rgba(16, 22, 26, 0.2) ;\n }\n &:focus {\n outline: transparent auto 0px ;\n outline-offset:'0px';\n }\n"], _a.raw = ["\n text-align: center;\n font-size: ", ";\n border: none;\n text-decoration: none;\n display: inline-block;\n cursor: pointer;\n vertical-align: middle;\n width: ", ";\n line-height: ", ";\n svg {\n margin:0px;\n display:inline-block;\n float: ", ";\n }\n span {\n display: inline-block;\n padding-top: 3px;\n padding-bottom: 3px;\n float:left;\n height: ", ";\n padding-left: ", ";\n padding-right: ", ";\n }\n &:active {\n box-shadow: inset 5px 5px 5px rgba(16, 22, 26, 0.2) ;\n }\n &:focus {\n outline: transparent auto 0px ;\n outline-offset:'0px';\n }\n"], themedComponents_1.css(_a, function (props) { return utils_1.default(_1.fontSizeMap[props.fontSize]); }, function (props) { return _1.buttonSizeMap[props.width] || 'auto'; }, function (props) { return props.theme.minButtonSize || DEFAULT_MIN_SIZE; }, function (props) { return props.iconPosition; }, function (props) { return props.theme.minButtonSize || DEFAULT_MIN_SIZE; }, function (props) { return (props.width == "auto") ? "8px" : "inherit"; }, function (props) { return (props.width == "auto") ? "8px" : "inherit"; }));
var _a;
};
var disabled = function (props) {
return (_a = ["\n background: ", ";\n color: ", ";\n cursor: not-allowed;\n"], _a.raw = ["\n background: ", ";\n color: ", ";\n cursor: not-allowed;\n"], themedComponents_1.css(_a, function (props) { return props.theme.colorMap.disabledBg; }, function (props) { return props.theme.colorMap.disabledFg; }));
var _a;
};
var toggle = function (props) {
return (_a = ["\n color : ", ";\n background-color: ", ";\n box-shadow: inset 5px 5px 5px rgba(16, 22, 26, 0.2) ;\n svg {\n fill: ", "\n }\n"], _a.raw = ["\n color : ", ";\n background-color: ", ";\n box-shadow: inset 5px 5px 5px rgba(16, 22, 26, 0.2) ;\n svg {\n fill: ", "\n }\n"], themedComponents_1.css(_a, function (props) { return props.color || props.theme.colorMap[props.intent + "HoverFg"] || 'black'; }, function (props) { return props.color || props.theme.colorMap[props.intent + "Active"] || 'white'; }, function (props) { return props.backgroundColor || props.theme.colorMap[props.intent + "HoverFg"]; }));
var _a;
};
var active = function (props) {
return (_a = ["\n color : ", ";\n background-color: ", ";\n border-color: ", ";\n border-width:1px;\n border-style:solid;\n &:hover {\n color : ", ";\n background-color: ", ";\n svg {\n fill: ", "\n }\n }\n &:hover:active {\n color : ", ";\n background-color: ", ";\n svg {\n fill: ", "\n }\n }\n &:active {\n color : ", ";\n background-color: ", ";\n svg {\n fill: ", "\n }\n }\n svg {\n fill: ", "\n }\n"], _a.raw = ["\n color : ", ";\n background-color: ", ";\n border-color: ", ";\n border-width:1px;\n border-style:solid;\n &:hover {\n color : ", ";\n background-color: ", ";\n svg {\n fill: ", "\n }\n }\n &:hover:active {\n color : ", ";\n background-color: ", ";\n svg {\n fill: ", "\n }\n }\n &:active {\n color : ", ";\n background-color: ", ";\n svg {\n fill: ", "\n }\n }\n svg {\n fill: ", "\n }\n"], themedComponents_1.css(_a, function (props) { return props.color || props.theme.colorMap[props.intent + "Fg"] || 'black'; }, function (props) { return props.backgroundColor || props.theme.colorMap[props.intent]; }, function (props) { return props.borderColor || props.theme.colorMap[props.intent + "Dark"]; }, function (props) { return props.color || props.theme.colorMap[props.intent + "HoverFg"] || 'black'; }, function (props) { return props.color || props.theme.colorMap[props.intent + "Hover"] || 'white'; }, function (props) { return props.backgroundColor || props.theme.colorMap[props.intent + "Fg"]; }, function (props) { return props.color || props.theme.colorMap[props.intent + "HoverFg"] || 'black'; }, function (props) { return props.color || props.theme.colorMap[props.intent + "HoverActive"] || 'white'; }, function (props) { return props.backgroundColor || props.theme.colorMap[props.intent + "HoverFg"]; }, function (props) { return props.color || props.theme.colorMap[props.intent + "HoverFg"] || 'black'; }, function (props) { return props.color || props.theme.colorMap[props.intent + "Active"] || 'white'; }, function (props) { return props.backgroundColor || props.theme.colorMap[props.intent + "HoverFg"]; }, function (props) { return props.color || props.theme.colorMap[props.intent + "Fg"] || 'white'; }));
var _a;
};
var large = function (props) {
return (_a = ["\n padding: 10px;\n font-size: 18px;\n line-height: 1.3;\n border-radius: ", ";\n svg {\n margin:0px;\n width:32px;\n height:32px;\n }\n"], _a.raw = ["\n padding: 10px;\n font-size: 18px;\n line-height: 1.3;\n border-radius: ", ";\n svg {\n margin:0px;\n width:32px;\n height:32px;\n }\n"], themedComponents_1.css(_a, function (props) { return props.theme.borderRadius || DEFAULT_BORDER_RADIUS; }));
var _a;
};
var normal = function (props) {
return (_a = ["\n padding: 6px;\n font-size: 14px;\n line-height: 1.2;\n height: 34px;\n width : ", ";\n border-radius: ", "; \n svg {\n margin:0px;\n width:20px;\n height:20px;\n }\n"], _a.raw = ["\n padding: 6px;\n font-size: 14px;\n line-height: 1.2;\n height: 34px;\n width : ", ";\n border-radius: ", "; \n svg {\n margin:0px;\n width:20px;\n height:20px;\n }\n"], themedComponents_1.css(_a, function (props) { return (props.dropDown != 'none') ? "auto" : _1.buttonSizeMap[props.width] || 'inherit'; }, function (props) { return props.theme.borderRadius || DEFAULT_BORDER_RADIUS; }));
var _a;
};
var small = function (props) {
return (_a = ["\n padding: 3px 8px;\n font-size: 12px;\n line-height: 1.5;\n border-radius: 3px;\n svg {\n margin:0px;\n width:16px;\n height:16px;\n }\n"], _a.raw = ["\n padding: 3px 8px;\n font-size: 12px;\n line-height: 1.5;\n border-radius: 3px;\n svg {\n margin:0px;\n width:16px;\n height:16px;\n }\n"], themedComponents_1.css(_a));
var _a;
};
var xsmall = function (props) {
return (_a = ["\n padding: 1px 4px;\n font-size: 12px;\n line-height: 1.5;\n border-radius: 3px;\n svg {\n margin:0px;\n width:12px;\n height:12px;\n }\n"], _a.raw = ["\n padding: 1px 4px;\n font-size: 12px;\n line-height: 1.5;\n border-radius: 3px;\n svg {\n margin:0px;\n width:12px;\n height:12px;\n }\n"], themedComponents_1.css(_a));
var _a;
};
var icon = function (props) {
return (_a = ["\n padding: 0px;\n height: 24px;\n width: 24px;\n min-width:initial;\n min-height:initial;\n border-radius: 3px;\n font-size: 12px;\n line-height: 1.5;\n svg {\n margin:3px !important;\n width:15px;\n height:15px;\n border:0px;\n padding:0px;\n }\n"], _a.raw = ["\n padding: 0px;\n height: 24px;\n width: 24px;\n min-width:initial;\n min-height:initial;\n border-radius: 3px;\n font-size: 12px;\n line-height: 1.5;\n svg {\n margin:3px !important;\n width:15px;\n height:15px;\n border:0px;\n padding:0px;\n }\n"], themedComponents_1.css(_a));
var _a;
};
var iconXSmall = function (props) {
return (_a = ["\n padding: 1px 2px;\n min-width:initial;\n min-height:initial;\n border-radius: 3px;\n font-size: 10px;\n line-height: 1;\n\n svg {\n margin:3px;\n width:12px;\n height:12px;\n }\n"], _a.raw = ["\n padding: 1px 2px;\n min-width:initial;\n min-height:initial;\n border-radius: 3px;\n font-size: 10px;\n line-height: 1;\n\n svg {\n margin:3px;\n width:12px;\n height:12px;\n }\n"], themedComponents_1.css(_a));
var _a;
};
var iconSmall = function (props) {
return (_a = ["\n padding: 3px 4px;\n min-width:initial;\n min-height:initial;\n border-radius: 3px;\n font-size: 12px;\n line-height: 1.5;\n svg {\n margin:3px;\n width:16px;\n height:16px;\n }\n"], _a.raw = ["\n padding: 3px 4px;\n min-width:initial;\n min-height:initial;\n border-radius: 3px;\n font-size: 12px;\n line-height: 1.5;\n svg {\n margin:3px;\n width:16px;\n height:16px;\n }\n"], themedComponents_1.css(_a));
var _a;
};
var iconNormal = function (props) {
return (_a = ["\n padding: 4px 5px;\n border-radius: 3px;\n min-width:initial;\n min-height:initial;\n font-size: 12px;\n line-height: 1.5;\n svg {\n margin:3px;\n width:20px;\n height:20px;\n }\n"], _a.raw = ["\n padding: 4px 5px;\n border-radius: 3px;\n min-width:initial;\n min-height:initial;\n font-size: 12px;\n line-height: 1.5;\n svg {\n margin:3px;\n width:20px;\n height:20px;\n }\n"], themedComponents_1.css(_a));
var _a;
};
var iconLarge = function (props) {
return (_a = ["\n padding: 6px 8px;\n border-radius: 3px;\n min-width:initial;\n min-height:initial;\n font-size: 14px;\n line-height: 1.5;\n svg {\n margin:3px;\n width:32px;\n height:32px;\n }\n"], _a.raw = ["\n padding: 6px 8px;\n border-radius: 3px;\n min-width:initial;\n min-height:initial;\n font-size: 14px;\n line-height: 1.5;\n svg {\n margin:3px;\n width:32px;\n height:32px;\n }\n"], themedComponents_1.css(_a));
var _a;
};
var getWidth = function (props) {
return props.width != "icon" ? normal(props) : (_a = [""], _a.raw = [""], themedComponents_1.css(_a));
var _a;
};
var getHeight = function (props) {
if (props.width == "icon") {
switch (props.height) {
case 'xsmall':
return iconXSmall(props);
case 'small':
return iconSmall(props);
case 'large':
return iconLarge(props);
default:
return icon(props);
}
}
else {
switch (props.height) {
case 'xsmall':
return xsmall(props);
case 'small':
return small(props);
case 'large':
return large(props);
default:
return normal(props);
}
}
};
var rounded = function (props) {
return (_a = ["\n height:32px;\n width:32px;\n border-radius:16px;\n div {\n margin:0px;\n height:32px;\n width:32px;\n }\n svg {\n margin:7px !important;\n width: 16px;\n height: 16px;\n }\n"], _a.raw = ["\n height:32px;\n width:32px;\n border-radius:16px;\n div {\n margin:0px;\n height:32px;\n width:32px;\n }\n svg {\n margin:7px !important;\n width: 16px;\n height: 16px;\n }\n"], themedComponents_1.css(_a));
var _a;
};
var rotatingAnimation = (_a = ["\n from {\n -ms-transform: rotate(0deg);\n -moz-transform: rotate(0deg);\n -webkit-transform: rotate(0deg);\n -o-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n to {\n -ms-transform: rotate(360deg);\n -moz-transform: rotate(360deg);\n -webkit-transform: rotate(360deg);\n -o-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n"], _a.raw = ["\n from {\n -ms-transform: rotate(0deg);\n -moz-transform: rotate(0deg);\n -webkit-transform: rotate(0deg);\n -o-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n to {\n -ms-transform: rotate(360deg);\n -moz-transform: rotate(360deg);\n -webkit-transform: rotate(360deg);\n -o-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n"], themedComponents_1.keyframes(_a));
var rotate = function (props) {
return (_a = ["\n .rotating {\n -webkit-animation: ", " 2s linear infinite;\n -moz-animation: ", " 2s linear infinite;\n -ms-animation: ", " 2s linear infinite;\n -o-animation: ", " 2s linear infinite;\n animation: ", " 2s linear infinite;\n }\n"], _a.raw = ["\n .rotating {\n -webkit-animation: ", " 2s linear infinite;\n -moz-animation: ", " 2s linear infinite;\n -ms-animation: ", " 2s linear infinite;\n -o-animation: ", " 2s linear infinite;\n animation: ", " 2s linear infinite;\n }\n"], themedComponents_1.css(_a, rotatingAnimation, rotatingAnimation, rotatingAnimation, rotatingAnimation, rotatingAnimation));
var _a;
};
exports.BaseButton = (_b = ["\n", "\n", "\n", "\n", "\n", "\n", "\n", "\n", "\n"], _b.raw = ["\n", "\n", "\n", "\n", "\n", "\n", "\n", "\n", "\n"], themedComponents_1.default(ReactButtonComponent)(_b, function (props) { return base(props); }, function (props) { return getWidth(props); }, function (props) { return getHeight(props); }, function (props) {
return props.shadow ? shadow(props) : (_a = [""], _a.raw = [""], themedComponents_1.css(_a));
var _a;
}, function (props) {
return props.rounded ? rounded(props) : (_a = [""], _a.raw = [""], themedComponents_1.css(_a));
var _a;
}, function (props) { return props.disabled ? disabled(props) : active(props); }, function (props) {
return props.rotate ? rotate(props) : (_a = [""], _a.raw = [""], themedComponents_1.css(_a));
var _a;
}, function (props) {
return props.isToggled ? toggle(props) : (_a = [""], _a.raw = [""], themedComponents_1.css(_a));
var _a;
}));
var _a, _b;
//# sourceMappingURL=styles.js.map