@eccenca/gui-elements
Version:
Collection of low-level GUI elements like Buttons, Icons or Alerts. Also includes core styles for those elements.
1,573 lines (1,234 loc) • 213 kB
JavaScript
module.exports =
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 29);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {
module.exports = require("react");
/***/ }),
/* 1 */
/***/ (function(module, exports) {
module.exports = require("babel-runtime/helpers/extends");
/***/ }),
/* 2 */
/***/ (function(module, exports) {
module.exports = require("prop-types");
/***/ }),
/* 3 */
/***/ (function(module, exports) {
module.exports = require("babel-runtime/helpers/objectWithoutProperties");
/***/ }),
/* 4 */
/***/ (function(module, exports) {
module.exports = require("classnames");
/***/ }),
/* 5 */
/***/ (function(module, exports) {
module.exports = require("lodash");
/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
var _extends2 = __webpack_require__(1);
var _extends3 = _interopRequireDefault(_extends2);
var _objectWithoutProperties2 = __webpack_require__(3);
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _react = __webpack_require__(0);
var _react2 = _interopRequireDefault(_react);
var _propTypes = __webpack_require__(2);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _classnames = __webpack_require__(4);
var _classnames2 = _interopRequireDefault(_classnames);
var _Button = __webpack_require__(35);
var _Button2 = _interopRequireDefault(_Button);
var _FABButton = __webpack_require__(36);
var _FABButton2 = _interopRequireDefault(_FABButton);
var _Tooltip = __webpack_require__(10);
var _Tooltip2 = _interopRequireDefault(_Tooltip);
var _Icon = __webpack_require__(14);
var _Icon2 = _interopRequireDefault(_Icon);
var _canonicaltooltips = __webpack_require__(19);
var _canonicaltooltips2 = _interopRequireDefault(_canonicaltooltips);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
Read the [GUI spec about button usage](https://confluence.brox.de/display/ECCGMBH/GUI+Specifications#GUISpecifications-Buttons).
```js
import {Button} from '@eccenca/gui-elements';
const Page = React.createClass({
// template rendering
render() {
return (
<Button>
Flat button
</Button>
// use the button parameters according to MDL-API, @see https://getmdl.io/components/index.html#buttons-section
<Button
raised
accent
colored
ripple
disabled
badge="5"
>
Button label
</Button>
// you can apply all other button properties on icon buttons, too (e.g. affirmative, accent, ripple, ...)
<Button
iconName="menu_more"
tooltip="This is a Test!"
fabSize="mini"
/>
)
},
// ....
});
```
*/
var Button = function Button(props) {
/* TODO:
* add label/content as tooltip for icon/fab buttons
* add label as tooltip if children content is available
*/
var badge = props.badge,
className = props.className,
fabSize = props.fabSize,
iconName = props.iconName,
affirmative = props.affirmative,
dismissive = props.dismissive,
disruptive = props.disruptive,
defaultTooltip = props.tooltip,
defaultChildren = props.children,
defaultRipple = props.ripple,
otherProps = (0, _objectWithoutProperties3.default)(props, ['badge', 'className', 'fabSize', 'iconName', 'affirmative', 'dismissive', 'disruptive', 'tooltip', 'children', 'ripple']);
var semanticConfig = {};
if (affirmative === true) {
semanticConfig.accent = true;
semanticConfig.colored = false;
}
if (dismissive === true || disruptive === true) {
semanticConfig.accent = false;
semanticConfig.colored = false;
}
var classes = (0, _classnames2.default)({
'mdl-button--icon': typeof iconName !== 'undefined',
'mdl-button--danger': disruptive === true,
'mdl-badge mdl-badge--overlap': typeof badge !== 'undefined'
}, className);
var ripple = defaultRipple === true; // disable ripple by default
var tooltip = defaultTooltip;
// if tooltip is empty check for default one
if (!tooltip && tooltip !== false && typeof _canonicaltooltips2.default[iconName] !== 'undefined') {
tooltip = _canonicaltooltips2.default[iconName];
}
var button = '';
var buttonContent = defaultChildren;
if (iconName) {
buttonContent =
// if tooltip already exist send 'false' to prevent adding additional default tooltip in <Icon/>
_react2.default.createElement(_Icon2.default, {
name: iconName,
tooltip: tooltip || tooltip === false ? false : '',
badge: badge || false
});
}
if (badge && !iconName) {
otherProps['data-badge'] = badge;
}
if (fabSize) {
button = _react2.default.createElement(
_FABButton2.default,
(0, _extends3.default)({
className: classes,
ripple: ripple,
mini: fabSize === 'mini'
}, otherProps, semanticConfig),
buttonContent
);
} else {
button = _react2.default.createElement(
_Button2.default,
(0, _extends3.default)({
className: classes,
ripple: ripple
}, otherProps, semanticConfig),
buttonContent
);
}
if (tooltip && !props.disabled) {
button = _react2.default.createElement(
_Tooltip2.default,
{ label: tooltip },
button
);
}
return button;
};
Button.propTypes = {
children: _propTypes2.default.oneOfType([_propTypes2.default.node]),
/**
string (optional): use badge if the (icon) button need to be enhanced by
a small badge containing 1 to 3 chars or digits
*/
badge: _propTypes2.default.string,
/**
string (optional): additional CSS class name
*/
className: _propTypes2.default.string,
/**
boolean (default: false): button is disabled and cannot get used to trigger an action
*/
disabled: _propTypes2.default.bool,
/**
string 'mini|large' (optional): use fabSize only if it is a Material Design floating action button (FAB)
*/
fabSize: _propTypes2.default.string,
/**
string (optional): icon name if it is an Material Design icon button
We defined some canonical names for icons and their meanings:
- 'edit': edit data
- 'remove': remove data
- 'arrow_nextpage': go to next page
- 'arrow_prevpage': go to previous page
- 'arrow_lastpage': go to last page
- 'arrow_firstpage': go to first page
- 'arrow_dropdown': open dropdown select
- 'expand_more': expand GUI element to show more details
- 'expand_less': reduce GUI element to show less details
- 'menu_more': open context menu
- 'filter': filter data
- 'sort': sort data
- 'hide': hide (or close/remove) GUI elements
- 'access_forbidden': no access to read and write data
For other symbols and icon names @see https://material.io/icons/
*/
iconName: _propTypes2.default.string,
/**
boolean (default: false): activate ripple effect on button
*/
ripple: _propTypes2.default.bool,
/**
React node or boolean (optional): tooltip text, some icons have fallback
tooltips, set it to false if you need to prevent them
*/
tooltip: _propTypes2.default.oneOfType([_propTypes2.default.node, _propTypes2.default.bool]),
// internal properties, used by button sub types
affirmative: _propTypes2.default.bool,
dismissive: _propTypes2.default.bool,
disruptive: _propTypes2.default.bool
};
Button.displayName = 'Button';
exports.default = Button;
module.exports = exports['default'];
/***/ }),
/* 7 */
/***/ (function(module, exports) {
module.exports = require("babel-runtime/helpers/classCallCheck");
/***/ }),
/* 8 */
/***/ (function(module, exports) {
module.exports = require("babel-runtime/helpers/possibleConstructorReturn");
/***/ }),
/* 9 */
/***/ (function(module, exports) {
module.exports = require("babel-runtime/helpers/inherits");
/***/ }),
/* 10 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
var _Tooltip = __webpack_require__(37);
var _Tooltip2 = _interopRequireDefault(_Tooltip);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Tooltip2.default;
module.exports = exports['default'];
/***/ }),
/* 11 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
var _extends2 = __webpack_require__(1);
var _extends3 = _interopRequireDefault(_extends2);
var _objectWithoutProperties2 = __webpack_require__(3);
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _react = __webpack_require__(0);
var _react2 = _interopRequireDefault(_react);
var _propTypes = __webpack_require__(2);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _classnames = __webpack_require__(4);
var _classnames2 = _interopRequireDefault(_classnames);
var _Button = __webpack_require__(6);
var _Button2 = _interopRequireDefault(_Button);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
```js
import { Alert, Error, Info, Success, Warning } from '@eccenca/gui-elements';
const Page = React.createClass({
// template rendering
onDismiss(){ },
render() {
return (
<Alert
border={true} // true|false, default is false
vertSpacing={true} // true|false, default is false
handlerDismiss={this.onDismiss} // onClick handler, necessary if icon button should be rendered
labelDismiss="label for handler" // string, default: "Hide"
iconDismiss="expand_less" // string, default: "close"
reducedHeight={true} // true|false, default is false
>
<p>This is a</p>
<p>untyped message.</p>
</Alert>
<Info border vertSpacing>
info
</Info>
<Success border vertSpacing>
success
</Success>
<Warning border vertSpacing>
warning
</Warning>
<Error
handlerDismiss={this.onDismiss}
labelDismiss="remove error"
vertSpacing
>
error with tooltip
</Error>
)
},
// ....
});
```
*/
var Alert = function Alert(props) {
var className = props.className,
border = props.border,
handlerDismiss = props.handlerDismiss,
labelDismiss = props.labelDismiss,
iconDismiss = props.iconDismiss,
type = props.type,
vertSpacing = props.vertSpacing,
reducedHeight = props.reducedHeight,
children = props.children,
otherProps = (0, _objectWithoutProperties3.default)(props, ['className', 'border', 'handlerDismiss', 'labelDismiss', 'iconDismiss', 'type', 'vertSpacing', 'reducedHeight', 'children']);
var classes = (0, _classnames2.default)('mdl-alert', {
'mdl-alert--info': type === 'info',
'mdl-alert--success': type === 'success',
'mdl-alert--warning': type === 'warning',
'mdl-alert--danger': type === 'error',
'mdl-alert--border': border,
'mdl-alert--spacing': vertSpacing,
'mdl-alert--reducedheight': reducedHeight,
'mdl-alert--dismissable': typeof handlerDismiss !== 'undefined'
}, className);
var dismiss = false;
if (handlerDismiss) {
dismiss = _react2.default.createElement(
'div',
{ className: 'mdl-alert__dismiss' },
_react2.default.createElement(_Button2.default, {
type: 'button',
iconName: iconDismiss || 'hide',
tooltip: labelDismiss || 'Hide',
onClick: handlerDismiss
})
);
}
return _react2.default.createElement(
'div',
(0, _extends3.default)({ className: classes }, otherProps),
_react2.default.createElement(
'div',
{ className: 'mdl-alert__content' },
children
),
dismiss
);
};
Alert.propTypes = {
children: _propTypes2.default.node.isRequired,
/**
string (optional): additional CSS class name
*/
className: _propTypes2.default.string,
/**
function (optional): handler that provides dismiss functionality for the message, this it not handled by the
element itself
*/
handlerDismiss: _propTypes2.default.func,
/**
string (optional): tooltip text that is shown on dismiss button, default is 'Hide'
*/
labelDismiss: _propTypes2.default.string,
/**
string (optional): icon that is used for dismiss button, default icon is `hide`
*/
iconDismiss: _propTypes2.default.string,
/**
string (optional): type of the alert message, one of `info`, `success`, `warning` and `error`, otherwise the
alert is not typed and appeares without special color scheme
*/
type: _propTypes2.default.string,
/**
boolean (optional): adds a small border to the alert message, default it appears without border
*/
border: _propTypes2.default.bool,
/**
boolean (optional): adds top and bottom margins to the alert message, default it appears without additional
whitespace around it
*/
vertSpacing: _propTypes2.default.bool,
/**
boolean (optional): forces alert message to be not larger than 50% of the viewport and adds scrollbars on
overflows, otherwise it takes as much vertical space as content needs
*/
reducedHeight: _propTypes2.default.bool
};
Alert.displayName = 'Alert';
exports.default = Alert;
module.exports = exports['default'];
/***/ }),
/* 12 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
var _extends2 = __webpack_require__(1);
var _extends3 = _interopRequireDefault(_extends2);
var _objectWithoutProperties2 = __webpack_require__(3);
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _react = __webpack_require__(0);
var _react2 = _interopRequireDefault(_react);
var _propTypes = __webpack_require__(2);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _Tooltip = __webpack_require__(10);
var _Tooltip2 = _interopRequireDefault(_Tooltip);
var _Button = __webpack_require__(6);
var _Button2 = _interopRequireDefault(_Button);
var _Progressbar = __webpack_require__(20);
var _Progressbar2 = _interopRequireDefault(_Progressbar);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
`<ProgressButton/>` is a special version of the `<Button/>` element that can be used to visualize a running process.
It is shown as a raised disabled button but this behaviour can be overwritten, using the `raised`
and `disabled` paramters from the `<Button/>` element.
```js
import {ProgressButton} from '@eccenca/gui-elements';
const Page = React.createClass({
// template rendering
render() {
return (
<ProgressButton
progress={50}
lastUpdate={'August 31st 2017, 9:48:24 am.'}
tooltip={'running'}
raised={false}
>
Working!
</ProgressButton>
)
},
// ....
});
```
You can use `progress` option directly on `<AffirmativeButton/>`, `<DismissiveButton/>`
and `<DisruptiveButton/>` elements.
*/
var ProgressButton = function ProgressButton(props) {
var children = props.children,
tooltip = props.tooltip,
progress = props.progress,
lastUpdate = props.lastUpdate,
otherProps = (0, _objectWithoutProperties3.default)(props, ['children', 'tooltip', 'progress', 'lastUpdate']);
// template rendering
var progressbar = _react2.default.createElement(_Progressbar2.default, {
appearLocal: true,
indeterminate: !progress,
progress: progress || 0
});
if (typeof tooltip !== 'undefined' && tooltip) {
var infoUpdate = lastUpdate ? lastUpdate + ' ' : '';
progressbar = _react2.default.createElement(
_Tooltip2.default,
{
label: progress ? '' + infoUpdate + tooltip + ': ' + progress + '%' : infoUpdate + tooltip
},
progressbar
);
}
// render button
return _react2.default.createElement(
_Button2.default,
(0, _extends3.default)({}, otherProps, { raised: true, disabled: true }),
children,
progressbar
);
};
ProgressButton.propTypes = {
/**
integer (default: 0): progress number 0..100, if not set or 0 then an infinite progress bar is used
*/
progress: _propTypes2.default.number,
/**
message queue subject (optional): channel subject that are used to update information about progress,
if given that the button element listens to it for update objects that include `progressNumber`
property with a value between 0 and 100
*/
tooltip: _propTypes2.default.string,
/**
string (optional): text info that shows information about the last known update on the process
*/
lastUpdate: _propTypes2.default.string
};
ProgressButton.displayName = 'ProgressButton';
exports.default = ProgressButton;
module.exports = exports['default'];
/***/ }),
/* 13 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
var _extends2 = __webpack_require__(1);
var _extends3 = _interopRequireDefault(_extends2);
var _classCallCheck2 = __webpack_require__(7);
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _possibleConstructorReturn2 = __webpack_require__(8);
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = __webpack_require__(9);
var _inherits3 = _interopRequireDefault(_inherits2);
exports.default = ScrollingHOC;
var _react = __webpack_require__(0);
var _react2 = _interopRequireDefault(_react);
var _reactDom = __webpack_require__(33);
var _reactDom2 = _interopRequireDefault(_reactDom);
var _scrollIntoView = __webpack_require__(34);
var _scrollIntoView2 = _interopRequireDefault(_scrollIntoView);
var _lodash = __webpack_require__(5);
var _lodash2 = _interopRequireDefault(_lodash);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function ScrollingHOC(WrappedComponent) {
return function (_React$Component) {
(0, _inherits3.default)(_class, _React$Component);
function _class(props) {
(0, _classCallCheck3.default)(this, _class);
var _this = (0, _possibleConstructorReturn3.default)(this, _React$Component.call(this, props));
_this.scrollIntoView = _this.scrollIntoView.bind(_this);
_this.scrollElementIntoView = _this.scrollElementIntoView.bind(_this);
return _this;
}
_class.prototype.scrollIntoView = function scrollIntoView() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
this.scrollElementIntoView(_reactDom2.default.findDOMNode(this), options);
/*
options {
animationTime: 500, // (optional) integer, time in milliseconds
topOffset: 0, // (optional) integer, pixels to offset top alignment
callbackFinished: function(result) {}, // (optional) function, result parameter is currently 'cancelled' or 'completed'
}
*/
};
_class.prototype.scrollElementIntoView = function scrollElementIntoView(element) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var domElement = false;
if (_lodash2.default.isElement(element)) {
// is already a DOM element
domElement = element;
if (__DEBUG__) {
console.log('scrolling DOM element with a height of ' + domElement.scrollHeight);
}
} else if (_lodash2.default.get(element, 'props', false) !== false) {
// await a mounted react element or component
// TODO: improve test, 'props' is only a weak check, findDOMNode still can fail
domElement = _reactDom2.default.findDOMNode(element);
if (__DEBUG__) {
console.log('scrolling react element with a height of ' + domElement.scrollHeight);
}
}
if (!domElement) {
if (__DEBUG__) {
console.warn('Cannot scroll element that is not part of the DOM.');
}
return false;
}
return (0, _scrollIntoView2.default)(domElement, {
time: _lodash2.default.get(options, 'animationTime', 500),
align: {
top: 0, // align it to the top, or user cannot see top part if element is higher than the viewport
topOffset: _lodash2.default.get(options, 'topOffset', 0)
},
/*
We replace the standard isScrollable with a function which also checks
overflowX and overflowY, as only checking overflow is not enough in IE/Edge,
because if the following is set:
.foo {
overflow-x: hidden;
overflow-y: auto;
}
`getComputedStyle(element).overflow` will yield `'hidden'`
*/
isScrollable: function isScrollable(el) {
if (el === window) {
return true;
}
if (el.scrollHeight !== el.clientHeight || el.scrollWidth !== el.clientWidth) {
var css = getComputedStyle(el);
return css && (css.overflow !== 'hidden' || _lodash2.default.get(options, 'scrollY', true) && css.overflowY !== 'hidden' || _lodash2.default.get(options, 'scrollX', true) && css.overflowX !== 'hidden');
}
return false;
}
}, function (result) {
if (__DEBUG__) {
console.log('element scrolling ' + result + ', now at ' + domElement.getBoundingClientRect().top);
}
if (_lodash2.default.isFunction(options.callbackFinished)) {
options.callbackFinished(result);
}
});
};
_class.prototype.render = function render() {
// eslint-disable-next-line max-len
return _react2.default.createElement(WrappedComponent, (0, _extends3.default)({ scrollElementIntoView: this.scrollElementIntoView, scrollIntoView: this.scrollIntoView }, this.props));
};
return _class;
}(_react2.default.Component);
}
module.exports = exports['default'];
/***/ }),
/* 14 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
var _extends2 = __webpack_require__(1);
var _extends3 = _interopRequireDefault(_extends2);
var _objectWithoutProperties2 = __webpack_require__(3);
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _react = __webpack_require__(0);
var _react2 = _interopRequireDefault(_react);
var _propTypes = __webpack_require__(2);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _classnames = __webpack_require__(4);
var _classnames2 = _interopRequireDefault(_classnames);
var _lodash = __webpack_require__(5);
var _Tooltip = __webpack_require__(10);
var _Tooltip2 = _interopRequireDefault(_Tooltip);
var _icontable = __webpack_require__(38);
var _icontable2 = _interopRequireDefault(_icontable);
var _canonicalicons = __webpack_require__(39);
var _canonicalicons2 = _interopRequireDefault(_canonicalicons);
var _canonicaltooltips = __webpack_require__(19);
var _canonicaltooltips2 = _interopRequireDefault(_canonicaltooltips);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
import {Icon} from '@eccenca/gui-elements';
const Page = React.createClass({
// template rendering
render() {
return (
<Icon
name="cloud_download" // icon name, @see https://material.io/icons/
tooltip="cloudy clouds" // tooltip, some icons have fallback tooltips, set it to false if you need to prevent them
badge="5" // Badge, as shown in https://getmdl.io/components/index.html#badges-section
/>
)
},
// ....
});
```
*/
/* eslint camelcase: 0 */
var Icon = function Icon(props) {
var className = props.className,
_props$badge = props.badge,
badge = _props$badge === undefined ? false : _props$badge,
otherProps = (0, _objectWithoutProperties3.default)(props, ['className', 'badge']);
var name = otherProps.name;
delete otherProps.name;
var tooltip = otherProps.tooltip;
delete otherProps.tooltip;
if (!tooltip && tooltip !== false) {
if (typeof _canonicaltooltips2.default[name] !== 'undefined') {
tooltip = _canonicaltooltips2.default[name];
} else if (__DEBUG__) {
console.warn('Icon "' + name + '" has no canonical tooltip defined');
}
}
if (typeof _canonicalicons2.default[name] !== 'undefined') {
if (name === 'delete' && __DEBUG__) {
console.warn('Do not use "delete" as icon name. Please use "remove" instead.');
}
name = _canonicalicons2.default[name];
} else if (__DEBUG__) {
console.log('%cFound usage of "' + name + '" as icon name. Use canonical icon names if possible.', 'color: orange');
}
if (!(0, _lodash.includes)(_icontable2.default, name)) {
if (__DEBUG__) {
console.error('"' + name + '" is not a valid icon name.');
}
name = 'error';
}
var classes = (0, _classnames2.default)('material-icons', { 'mdl-badge mdl-badge--overlap': badge }, className);
var icon = _react2.default.createElement(
'i',
(0, _extends3.default)({ className: classes, 'data-badge': badge }, otherProps),
name
);
if (tooltip) {
icon = _react2.default.createElement(
_Tooltip2.default,
{ label: tooltip },
icon
);
}
return icon;
};
Icon.propTypes = {
className: _propTypes2.default.string,
name: _propTypes2.default.string.isRequired,
tooltip: _propTypes2.default.oneOfType([_propTypes2.default.node, _propTypes2.default.bool])
};
Icon.displayName = 'Icon';
exports.default = Icon;
module.exports = exports['default'];
/***/ }),
/* 15 */
/***/ (function(module, exports) {
module.exports = require("react-mdl/lib/utils/basicClassCreator");
/***/ }),
/* 16 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
var _extends2 = __webpack_require__(1);
var _extends3 = _interopRequireDefault(_extends2);
var _objectWithoutProperties2 = __webpack_require__(3);
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _classCallCheck2 = __webpack_require__(7);
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _possibleConstructorReturn2 = __webpack_require__(8);
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = __webpack_require__(9);
var _inherits3 = _interopRequireDefault(_inherits2);
var _react = __webpack_require__(0);
var _react2 = _interopRequireDefault(_react);
var _propTypes = __webpack_require__(2);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _classnames = __webpack_require__(4);
var _classnames2 = _interopRequireDefault(_classnames);
var _Select = __webpack_require__(70);
var _Select2 = _interopRequireDefault(_Select);
var _Creatable = __webpack_require__(71);
var _Creatable2 = _interopRequireDefault(_Creatable);
var _Async = __webpack_require__(72);
var _Async2 = _interopRequireDefault(_Async);
var _AsyncCreatable = __webpack_require__(73);
var _AsyncCreatable2 = _interopRequireDefault(_AsyncCreatable);
var _lodash = __webpack_require__(5);
var _lodash2 = _interopRequireDefault(_lodash);
var _uniqueId = __webpack_require__(25);
var _uniqueId2 = _interopRequireDefault(_uniqueId);
var _Button = __webpack_require__(6);
var _Button2 = _interopRequireDefault(_Button);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
// format value to lowercase string
var stringCompare = function stringCompare(value) {
return _lodash2.default.toLower(_lodash2.default.toString(value));
};
var clearRenderer = function clearRenderer() {
return _react2.default.createElement(_Button2.default, { iconName: 'clear', className: 'mdl-button--clearance', tabIndex: -1 });
};
/**
The SelectBox wraps [react-select](https://github.com/JedWatson/react-select) to use mixed content of strings and numbers as well as the default object type.
The SelectBox behaves like a [controlled input](https://facebook.github.io/react/docs/forms.html#controlled-components).
Please refer to all available properties in the linked documentations.
```js
import { SelectBox } from '@eccenca/gui-elements';
const Page = React.createClass({
getInitialState(){
return {
value: 8,
};
},
selectBoxOnChange(value){
this.setState({
value
});
},
// template rendering
render() {
return (
<SelectBox
placeholder="Label for SelectBox"
options={['label1', 3]}
optionsOnTop={true} // option list opens up on top of select input (default: false)
value={this.state.value}
onChange={this.selectBoxOnChange}
creatable={true} // allow creation of new values
promptTextCreator={(newLabel) => ('New stuff: ' + newLabel)} // change default "Create option 'newLabel'" to "New stuff: 'newLabel'"
multi={true} // allow multi selection
clearable={false} // hide 'remove all selected values' button
searchable={true} // whether to behave like a type-ahead or not
reducedSize={false} // remove vertical whitespace around element, default: false
/>
)
},
});
```
Note:
- if objects are used in multi selectable options you can add {"clearableValue": false} to it to hide delete button for this specifc object
- if "creatable" is set new values will be applied on Enter, Tab and Comma (",")
- ``placeholder`` label is used within MDL floating label layout
*/
var SelectBox = function (_Component) {
(0, _inherits3.default)(SelectBox, _Component);
function SelectBox(props) {
(0, _classCallCheck3.default)(this, SelectBox);
var _this = (0, _possibleConstructorReturn3.default)(this, _Component.call(this, props));
_this.onChange = _this.onChange.bind(_this);
_this.uniqueOptions = _this.uniqueOptions.bind(_this);
_this.onFocus = _this.onFocus.bind(_this);
_this.onBlur = _this.onBlur.bind(_this);
return _this;
}
SelectBox.prototype.onChange = function onChange(newValue) {
// If the options consist of plainvalues, we just want to return the plain value
if (_lodash2.default.get(newValue, '$plainValue', false)) {
return this.props.onChange(newValue.value, this.props.name);
}
return this.props.onChange(newValue, this.props.name);
};
// default check for value creation
// prevent double values (check case insensitive, and handle numbers as string)
SelectBox.prototype.uniqueOptions = function uniqueOptions(_ref) {
var newObject = _ref.option,
options = _ref.options;
return !_lodash2.default.some(options, function (_ref2) {
var value = _ref2.value,
label = _ref2.label;
return stringCompare(value) === stringCompare(newObject.value) && stringCompare(label) === stringCompare(newObject.label);
});
};
SelectBox.prototype.onFocus = function onFocus() {
this.setState({
focused: true
});
};
SelectBox.prototype.onBlur = function onBlur() {
this.setState({
focused: false
});
};
SelectBox.prototype.render = function render() {
var _props = this.props,
autofocus = _props.autofocus,
className = _props.className,
creatable = _props.creatable,
_props$placeholder = _props.placeholder,
placeholder = _props$placeholder === undefined ? '' : _props$placeholder,
reducedSize = _props.reducedSize,
optionsOnTop = _props.optionsOnTop,
value = _props.value,
_props$async = _props.async,
async = _props$async === undefined ? false : _props$async,
uniqueId = _props.uniqueId,
passProps = (0, _objectWithoutProperties3.default)(_props, ['autofocus', 'className', 'creatable', 'placeholder', 'reducedSize', 'optionsOnTop', 'value', 'async', 'uniqueId']);
// we do not want to pass onChange, as we wrap onChange ourselves
delete passProps.onChange;
// we do not want to pass name, as we use it ourselves
delete passProps.name;
passProps.onFocus = this.onFocus;
passProps.onBlur = this.onBlur;
passProps.clearable = _lodash2.default.isUndefined(passProps.clearable) ? true : passProps.clearable;
if (passProps.clearable) {
passProps.clearRenderer = clearRenderer;
}
var focused = this.state && typeof this.state.focused !== 'undefined' ? this.state.focused : autofocus;
var classes = (0, _classnames2.default)({
'mdl-textfield mdl-js-textfield mdl-textfield--full-width': true, // use always
'mdl-textfield--floating-label': true, // use always
'mdl-textfield--reduced': reducedSize === true,
'mdl-textfield--missinglabel': !placeholder,
'is-dirty': !_lodash2.default.isNil(value) && (_lodash2.default.isNumber(value) || !_lodash2.default.isEmpty(value)),
'is-focused': focused === true,
'Select--optionsontop': optionsOnTop === true
}, className);
var parsedValue = null;
// if value is not empty or a number check for formatting
if (!_lodash2.default.isEmpty(value) || _lodash2.default.isNumber(value)) {
// in case of multi select is used
if (_lodash2.default.isArray(value)) {
parsedValue = _lodash2.default.map(value, function (it) {
return _lodash2.default.isPlainObject(it) ? it : { value: it, label: it };
});
} else {
parsedValue = _lodash2.default.isPlainObject(value) ? value : { value: value, label: value };
}
}
var component = null;
if (async) {
var _passProps$ignoreCase = passProps.ignoreCase,
ignoreCase = _passProps$ignoreCase === undefined ? false : _passProps$ignoreCase,
_passProps$ignoreAcce = passProps.ignoreAccents,
ignoreAccents = _passProps$ignoreAcce === undefined ? false : _passProps$ignoreAcce,
passAsyncProps = (0, _objectWithoutProperties3.default)(passProps, ['ignoreCase', 'ignoreAccents']);
if (creatable) {
component = _react2.default.createElement(_AsyncCreatable2.default, (0, _extends3.default)({}, passAsyncProps, {
value: parsedValue,
id: uniqueId,
onChange: this.onChange,
isOptionUnique: this.props.isOptionUnique || this.uniqueOptions,
ignoreAccents: ignoreAccents,
ignoreCase: ignoreCase,
placeholder: ''
}));
} else {
component = _react2.default.createElement(_Async2.default, (0, _extends3.default)({}, passAsyncProps, {
id: uniqueId,
value: parsedValue,
onChange: this.onChange,
ignoreAccents: ignoreAccents,
ignoreCase: ignoreCase,
placeholder: ''
}));
}
} else {
var options = passProps.options,
passSyncProps = (0, _objectWithoutProperties3.default)(passProps, ['options']);
// parse values to object format if needed
var parsedOptions = _lodash2.default.isPlainObject(options[0]) ? options : _lodash2.default.map(options, function (it) {
return {
value: it,
label: it,
$plainValue: true
};
});
if (creatable) {
component = _react2.default.createElement(_Creatable2.default, (0, _extends3.default)({}, passSyncProps, {
id: uniqueId,
value: parsedValue,
options: parsedOptions,
onChange: this.onChange,
isOptionUnique: this.props.isOptionUnique || this.uniqueOptions,
placeholder: ''
}));
} else {
component = _react2.default.createElement(_Select2.default, (0, _extends3.default)({}, passSyncProps, {
id: uniqueId,
value: parsedValue,
options: parsedOptions,
onChange: this.onChange,
placeholder: ''
}));
}
}
return _react2.default.createElement(
'div',
{
className: classes,
'data-test-id': 'ecc-gui-elements-' + uniqueId
},
component,
_react2.default.createElement(
'label',
{ className: 'mdl-textfield__label', htmlFor: uniqueId },
placeholder
)
);
};
return SelectBox;
}(_react.Component);
SelectBox.displayName = 'SelectBox';
SelectBox.propTypes = {
/**
* contains values which are available in dropdown list
* options is an array of objects or strings and/or numbers
*/
options: _propTypes2.default.arrayOf(function (propValue, key, componentName, location, propFullName) {
var containObjects = _lodash2.default.isPlainObject(_lodash2.default.head(propValue));
var isObject = _lodash2.default.isPlainObject(propValue[key]);
var isNumberOrString = _lodash2.default.isString(propValue[key]) || _lodash2.default.isNumber(propValue[key]);
if (!containObjects && !isNumberOrString || containObjects && !isObject) {
return new Error('Invalid prop `' + propFullName + '` supplied to' + (' `' + componentName + '`. No mixed content (object vs string/number) allowed.'));
}
return false;
}).isRequired,
/**
* contains selected value
* value is an object or a strings a numbers
*/
value: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number, _propTypes2.default.object,
// only needed for multiple inputs
_propTypes2.default.array]),
// onChange handler
onChange: _propTypes2.default.func.isRequired,
// allow creation of new values
creatable: _propTypes2.default.bool,
/**
* remove vertical whitespace around element
*/
reducedSize: _propTypes2.default.bool
};
SelectBox.defaultProps = {
creatable: false,
reducedSize: false
};
exports.default = (0, _uniqueId2.default)(SelectBox, {
prefix: 'selectBox',
targetProp: 'uniqueId'
});
module.exports = exports['default'];
/***/ }),
/* 17 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
var _extends2 = __webpack_require__(1);
var _extends3 = _interopRequireDefault(_extends2);
var _objectWithoutProperties2 = __webpack_require__(3);
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _react = __webpack_require__(0);
var _react2 = _interopRequireDefault(_react);
var _propTypes = __webpack_require__(2);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _classnames = __webpack_require__(4);
var _classnames2 = _interopRequireDefault(_classnames);
var _Textfield = __webpack_require__(74);
var _Textfield2 = _interopRequireDefault(_Textfield);
var _lodash = __webpack_require__(5);
var _lodash2 = _interopRequireDefault(_lodash);
var _Button = __webpack_require__(6);
var _Button2 = _interopRequireDefault(_Button);
var _uniqueId = __webpack_require__(25);
var _uniqueId2 = _interopRequireDefault(_uniqueId);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var extendedOnChange = function extendedOnChange(onChangeFn, event) {
if (_lodash2.default.isFunction(onChangeFn)) {
onChangeFn({
event: event,
name: event.target.name,
value: event.target.value,
rawValue: event.target.value
});
}
};
/**
Provides a input field or area to insert text or numbers.
```js
import { TextField } from '@eccenca/gui-elements';
class Page extends React.Component {
// event is the original react onChange event
// value is event.target.value (a shortcut for convienience)
onChange({event, value}) {
this.setState({
varname: value,
})
},
// template rendering
render() {
return (
<TextField
name="varname"
value={this.state.varname}
label="Textfield"
onChange={this.onChange}
error="Please correct your input" // optional, error message
stretch={false} // do not use full width (default: true)
multiline={true} // use a text area (default: false)
/>
)
},
// ....
};
```
*/
var TextField = function TextField(props) {
var children = props.children,
className = props.className,
label = props.label,
multiline = props.multiline,
onChange = props.onChange,
onClearValue = props.onClearValue,
reducedSize = props.reducedSize,
stretch = props.stretch,
value = props.value,
otherProps = (0, _objectWithoutProperties3.default)(props, ['children', 'className', 'label', 'multiline', 'onChange', 'onClearValue', 'reducedSize', 'stretch', 'value']);
var classes = (0, _classnames2.default)(className, {
'mdl-textfield--full-width': stretch === true,
'mdl-textfield--clearable': _lodash2.default.isFunction(onClearValue),
'mdl-textfield--reduced': reducedSize === true,
'mdl-textfield--multiline': multiline === true,
'mdl-textfield--missinglabel': !label
});
// provides clearance button
var clearButton = _lodash2.default.isFunction(onClearValue) && value ? _react2.default.createElement(
'div',
{ className: 'mdl-input__clearable-holder' },
_react2.default.createElement(_Button2.default, {
disabled: !!otherProps.disabled,
type: 'button',
iconName: 'clear',
onClick: onClearValue,
className: 'mdl-button--clearance'
})
) : false;
return _react2.default.createElement(
_Textfield2.default,
(0, _extends3.default)({
className: classes,
floatingLabel: true,
value: value,
label: label,
onChange: extendedOnChange.bind(null, onChange),
rows: multiline === true ? 3 : 0
}, otherProps),
clearButton,
children
);
};
TextField.propTypes = {
/**
additional class names for element
*/
className: _propTypes2.default.string,
/**
inout element is disabled and not useable
*/
disabled: _propTypes2.default.bool,
/**
error message regarding the value of input
*/
error: _propTypes2.default.node,
/**
additional class names for the native HTML input element that is used
*/
inputClassName: _propTypes2.default.string,
/**
label for input field
*/
label: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]).isRequired,
/**
use a multilined textarea inout
*/
multiline: _propTypes2.default.bool,
/**
event handler when the inout value is changed, gets event object as input
*/
onChange: _propTypes2.default.func.isRequired,
/**
button to clear value is added when the event handler is given
*/
onClearValue: _propTypes2.default.func,
/**
reduce whitespace around the element
*/
reducedSize: _propTypes2.default.bool,
/**
value is required
*/
required: _propTypes2.default.bool,
/**
use full width that is available
*/
stretch: _propTypes2.default.bool,
/**
initial value of the input field
*/
value: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]).isRequired
};
TextField.defaultProps = {
disabled: false,
error: false,
label: '',
multiline: false,
onClearValue: undefined,
reducedSize: false,
required: false,
stretch: true
};
TextField.displayName = 'TextField';
exports.default = (0, _uniqueId2.default)(TextField, { prefix: 'textField', targetProp: 'id' });
module.exports = exports['default'];
/***/ }),
/* 18 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
var _Alert = __webpack_require__(11);
var _Alert2 = _interopRequireDefault(_Alert);
var _Error = __webpack_require__(40);
var _Error2 = _interopRequireDefault(_Error);
var _Info = __webpack_require__(41);
var _Info2 = _interopRequireDefault(_Info);
var _Success = __webpack_require__(42);
var _Success2 = _interopRequireDefault(_Success);
var _Warning = __webpack_require__(43);
var _Warning2 = _interopRequireDefault(_Warning);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = {
Alert: _Alert2.default,
Error: _Error2.default,
Info: _Info2.default,
Success: _Success2.default,
Warning: