@up-group-ui/react-controls
Version:
Up shared react controls
232 lines • 12.4 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.UpButton = exports.BaseButton = exports.ActionIconMap = void 0;
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
var theming_1 = (0, tslib_1.__importDefault)(require("../../../Common/theming"));
var typestyle_1 = require("typestyle");
var LoadingIndicator_1 = (0, tslib_1.__importDefault)(require("../../Display/LoadingIndicator"));
var types_1 = require("../../../Common/utils/types");
var icons_1 = require("../../../Common/theming/icons");
var SvgIcon_1 = (0, tslib_1.__importDefault)(require("../../Display/SvgIcon"));
var styles_1 = require("./styles");
var withTheme_1 = (0, tslib_1.__importDefault)(require("../../../Common/theming/withTheme"));
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 BaseButton = (function (_super) {
(0, tslib_1.__extends)(BaseButton, _super);
function BaseButton() {
return _super !== null && _super.apply(this, arguments) || this;
}
BaseButton.prototype.render = function () {
var _a = this.props, children = _a.children, className = _a.className, onClick = _a.onClick, dataFor = _a.dataFor, width = _a.width, isProcessing = _a.isProcessing, type = _a.type, disabled = _a.disabled, dropDown = _a.dropDown, name = _a.name;
var actionType = this.props.actionType;
var iconName = null;
if (actionType && exports.ActionIconMap.containsKey(actionType)) {
iconName = exports.ActionIconMap.get(actionType);
}
else if (this.props.iconName) {
iconName = this.props.iconName;
}
var icon = null;
if (iconName) {
icon = ((0, jsx_runtime_1.jsx)(SvgIcon_1.default, { iconName: iconName, width: this.props.iconSize, height: this.props.iconSize, className: this.props.rotate ? 'up-rotating' : '', color: this.props.color }, void 0));
}
var tooltipProps = {};
if (dataFor) {
tooltipProps = {
'data-tip': 'tooltip',
'data-for': dataFor,
};
}
var MainButton = ((0, jsx_runtime_1.jsxs)("button", (0, tslib_1.__assign)({ type: type, name: name, disabled: disabled, onClick: onClick, className: (0, classnames_1.default)('up-btn', dropDown !== 'none' && children ? 'up-btn-drop-down' : '', (0, styles_1.getStyles)(this.props), className) }, tooltipProps, { children: [icon != null && isProcessing !== true && icon, width !== 'icon' && children, isProcessing === true && ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: "up-loading-indicator-wrapper" }, { children: (0, jsx_runtime_1.jsx)(LoadingIndicator_1.default, { displayMode: 'inline', isLoading: true, width: width === 'icon' ? 24 : 48, height: width === 'icon' ? 24 : 48 }, void 0) }), void 0))] }), void 0));
return MainButton;
};
return BaseButton;
}(react_1.default.Component));
exports.BaseButton = BaseButton;
var UpButton = (function (_super) {
(0, tslib_1.__extends)(UpButton, _super);
function UpButton(props) {
var _this = _super.call(this, props) || this;
_this.handleClick = function (e) {
if (_this.props.disabled !== true) {
var returnValue_1 = _this.props.onClick(e);
if (Promise.resolve(returnValue_1) === returnValue_1) {
_this.setState({ isProcessing: true }, function () {
returnValue_1
.then(function (result) {
_this.setState({ isProcessing: false });
return result;
})
.catch(function (errors) {
_this.setState({ isProcessing: false });
return errors;
});
});
}
if (_this.props.dropDown !== 'none') {
_this.setState({ isToggled: !_this.state.isToggled });
}
}
e.preventDefault();
e.stopPropagation();
};
_this.collapse = function () {
if (_this.props.dropDown !== 'none') {
_this.setState({ isToggled: false });
}
};
_this.handleActionClick = function (action) {
action.onClick(null);
_this.collapse();
};
_this.isControlled = function (propName) { return _this.props[propName] !== undefined; };
_this.getValue = function (propName) { return (_this.isControlled(propName) ? _this.props[propName] : _this.state[propName]); };
_this.disabled = function () { return _this.props.disabled || _this.state.isProcessing; };
_this.setReference = function (e) {
_this.dropDownContainer = e;
};
_this.getDropDownStyles = function () {
var styles = {
display: _this.getValue('isToggled') ? 'block' : 'none',
position: 'unset',
zIndex: 1000,
listStyle: 'none',
backgroundColor: '#ffffff',
color: '#111',
margin: 0,
paddingTop: 10,
paddingBottom: 10,
paddingLeft: 0,
height: _this.getValue('isToggled') ? 'auto' : '0px',
transition: _this.getValue('isToggled') ? 'height 2s ease-in' : 'height 2s ease-out',
transform: _this.getValue('isToggled') ? 'scaleY(1)' : 'scaleY(0)',
transformOrigin: 'top',
border: "1px solid " + _this.props.theme.colorMap[_this.props.intent],
borderTop: 0,
borderRadius: '0px 0px 4px 4px',
};
var viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
if (_this.dropDownContainer &&
_this.dropDownContainer.getBoundingClientRect().right + _this.dropDownContainer.offsetWidth + 20 >= viewportWidth) {
styles.right = '10px';
}
else if (_this.dropDownContainer && _this.dropDownContainer.offsetLeft <= 10) {
styles.left = '10px';
}
return styles;
};
_this.handleClick = _this.handleClick.bind(_this);
_this.state = {
isToggled: _this.props.isToggled,
isProcessing: _this.props.isProcessing,
prevProps: props,
isElementHover: false,
};
return _this;
}
UpButton.prototype.componentWillReceiveProps = function (nextProps, prevState) {
if (nextProps.disabled) {
this.setState({ isToggled: false });
}
};
UpButton.prototype.isSeparator = function (element) {
return element.size !== undefined;
};
UpButton.prototype.render = function () {
var _this = this;
var _a = this.props, name = _a.name, children = _a.children, tooltip = _a.tooltip, onClick = _a.onClick, iconName = _a.iconName, iconPosition = _a.iconPosition, disabled = _a.disabled, isProcessing = _a.isProcessing, others = (0, tslib_1.__rest)(_a, ["name", "children", "tooltip", "onClick", "iconName", "iconPosition", "disabled", "isProcessing"]);
(0, typestyle_1.cssRaw)("\n .up-btn-wrapper:hover > div > .isHovered {\n visibility: visible;\n }\n ");
var buttonElement = (0, typestyle_1.style)({
cursor: 'pointer',
padding: '8px',
color: this.props.theme.colorMap.grey1,
$nest: {
'&:hover': {
color: this.props.theme.colorMap[this.props.intent],
},
},
});
var separatorElement = (0, typestyle_1.style)({
height: '1px',
margin: '9px 0',
overflow: 'hidden',
backgroundColor: '#e5e5e5',
});
var icon = iconName;
if (icon == null && this.props.dropDown != 'none') {
if (this.props.dropDown == 'up') {
icon = 'arrow-up';
}
else if (this.props.dropDown == 'down') {
icon = 'arrow-down';
}
}
var position = iconPosition;
if (position === 'none' && this.props.dropDown != 'none') {
position = 'right';
}
else if (position === 'none' && icon == null) {
position = 'left';
}
var handleClickProps = this.props.type === 'submit' ? {} : { onClick: this.handleClick };
var RenderButton = function (renderButtonProps) {
return ((0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ style: { display: 'flex' } }, { children: [(0, jsx_runtime_1.jsx)(BaseButton, (0, tslib_1.__assign)({ name: name, iconName: icon, iconPosition: position, isToggled: _this.getValue('isToggled') }, handleClickProps, { isProcessing: _this.getValue('isProcessing'), disabled: _this.disabled() }, others, renderButtonProps, { children: children != null && (0, jsx_runtime_1.jsx)("span", (0, tslib_1.__assign)({ className: 'up-btn-label' }, { children: children }), void 0) }), void 0), !children && _this.props.dropDown != 'none' && _this.getValue('isToggled') && ((0, jsx_runtime_1.jsx)("span", { className: "up-btn-missing-border" }, void 0))] }), void 0));
};
var tooltipElement = (0, typestyle_1.style)({
position: 'relative',
display: 'inline-block',
});
var tooltipTextElement = (0, typestyle_1.style)({
visibility: 'hidden',
backgroundColor: '#111',
color: '#fff',
textAlign: 'center',
borderRadius: '6px',
padding: '8px',
position: 'absolute',
zIndex: 9999,
bottom: '110%',
left: '50%',
marginLeft: '-60px',
opacity: 0.8,
});
return ((0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ ref: this.setReference, className: (0, classnames_1.default)('up-btn-wrapper', (0, styles_1.getWrapperStyles)(this.props), this.props.className) }, { children: [tooltip === null ? ((0, jsx_runtime_1.jsx)(RenderButton, {}, void 0)) : ((0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: tooltipElement }, { children: [(0, jsx_runtime_1.jsx)(RenderButton, {}, void 0), (0, jsx_runtime_1.jsx)("span", (0, tslib_1.__assign)({ className: (0, classnames_1.default)('isHovered', tooltipTextElement) }, { children: tooltip['content'] || tooltip }), void 0)] }), void 0)), !this.props.disabled && this.props.dropDown != 'none' && this.getValue('isToggled') && ((0, jsx_runtime_1.jsx)("ul", (0, tslib_1.__assign)({ tabIndex: 0, className: (0, typestyle_1.style)(this.getDropDownStyles()) }, { children: this.props.extraActions.map(function (v, i) {
var isSeparator = _this.isSeparator(v);
if (!isSeparator) {
return ((0, jsx_runtime_1.jsx)("li", (0, tslib_1.__assign)({ tabIndex: i + 1, className: buttonElement, onMouseDown: _this.handleActionClick.bind(_this, v) }, { children: v.libelle }), i));
}
else {
return (0, jsx_runtime_1.jsx)("li", { tabIndex: i + 1, role: 'separator', className: separatorElement }, i);
}
}) }), void 0))] }), void 0));
};
UpButton.defaultProps = {
backgroundColor: '',
fontSize: 'medium',
disabled: false,
shadow: false,
iconName: null,
iconPosition: 'none',
iconSize: 20,
intent: 'default',
width: 'auto',
height: 'normal',
tooltip: null,
dropDown: 'none',
onClick: function (e) { },
theme: theming_1.default,
type: 'button',
name: 'button',
};
return UpButton;
}(react_1.default.Component));
exports.UpButton = UpButton;
exports.default = (0, withTheme_1.default)(UpButton);
//# sourceMappingURL=UpButton.js.map