@eccenca/gui-elements
Version:
Collection of low-level GUI elements like Buttons, Icons or Alerts. Also includes core styles for those elements.
1,571 lines (1,233 loc) • 202 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 = 31);
/******/ })
/************************************************************************/
/******/ ([
/* 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("babel-runtime/helpers/objectWithoutProperties");
/***/ }),
/* 3 */
/***/ (function(module, exports) {
module.exports = require("classnames");
/***/ }),
/* 4 */
/***/ (function(module, exports) {
module.exports = require("lodash");
/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
var _getPrototypeOf = __webpack_require__(36);
var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
var _lodash = __webpack_require__(4);
var _lodash2 = _interopRequireDefault(_lodash);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var getDisplayName = function getDisplayName(Component) {
var objectConstructor = (0, _getPrototypeOf2.default)(Component).constructor;
var objectTest = typeof objectConstructor !== 'undefined' ? objectConstructor : Component;
return objectTest.displayName || objectTest.name || (typeof objectTest === 'string' ? objectTest : objectTest.toString());
};
var showDifferences = function showDifferences(object, config, nextConfig) {
if (__DEBUG__) {
var componentName = getDisplayName(object);
var diff = _lodash2.default.reduce(object[config], function (result, value, key) {
return _lodash2.default.isEqual(value, nextConfig[key]) ? result : result.concat(key);
}, []);
console.log(componentName + '.' + config + ' not equal for: ' + diff.join(', '));
}
};
var PerformanceMixin = {
shouldComponentUpdate: function shouldComponentUpdate(nextProps, nextState) {
if (_lodash2.default.isEqual(nextState, this.state) === false) {
if (__DEBUG__ && window.enablePerformanceMixingLog) {
showDifferences(this, 'state', nextState);
}
return true;
}
if (_lodash2.default.isEqual(nextProps, this.props) === false) {
if (__DEBUG__ && window.enablePerformanceMixingLog) {
showDifferences(this, 'props', nextProps);
}
return true;
}
return false;
}
};
exports.default = PerformanceMixin;
module.exports = exports['default'];
/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
var _extends2 = __webpack_require__(1);
var _extends3 = _interopRequireDefault(_extends2);
var _objectWithoutProperties2 = __webpack_require__(2);
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _react = __webpack_require__(0);
var _react2 = _interopRequireDefault(_react);
var _classnames = __webpack_require__(3);
var _classnames2 = _interopRequireDefault(_classnames);
var _Button = __webpack_require__(39);
var _Button2 = _interopRequireDefault(_Button);
var _FABButton = __webpack_require__(40);
var _FABButton2 = _interopRequireDefault(_FABButton);
var _Tooltip = __webpack_require__(9);
var _Tooltip2 = _interopRequireDefault(_Tooltip);
var _Icon = __webpack_require__(11);
var _Icon2 = _interopRequireDefault(_Icon);
var _PerformanceMixin = __webpack_require__(5);
var _PerformanceMixin2 = _interopRequireDefault(_PerformanceMixin);
var _canonicaltooltips = __webpack_require__(21);
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
>
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 = _react2.default.createClass({
mixins: [_PerformanceMixin2.default],
displayName: 'Button',
// define property types
propTypes: {
children: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.node]),
/**
string (optional): additional CSS class name
*/
className: _react2.default.PropTypes.string,
/**
boolean (default: false): button is disabled and cannot get used to trigger an action
*/
disabled: _react2.default.PropTypes.bool,
/**
string 'mini|large' (optional): use fabSize only if it is a Material Design floating action button (FAB)
*/
fabSize: _react2.default.PropTypes.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: _react2.default.PropTypes.string,
/**
boolean (default: false): activate ripple effect on button
*/
ripple: _react2.default.PropTypes.bool,
/**
React node or boolean (optional): tooltip text, some icons have fallback tooltips, set it to false if you need to prevent them
*/
tooltip: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.node, _react2.default.PropTypes.bool]),
// internal properties, used by button sub types
affirmative: _react2.default.PropTypes.bool,
dismissive: _react2.default.PropTypes.bool,
disruptive: _react2.default.PropTypes.bool
},
// template rendering
render: function render() {
/* TODO:
* add label/content as tooltip for icon/fab buttons
* add label as tooltip if children content is available
*/
var _props = this.props,
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, ['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
}, 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 : ''
});
}
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 && !this.props.disabled) {
button = _react2.default.createElement(
_Tooltip2.default,
{ label: tooltip },
button
);
}
return button;
}
});
exports.default = Button;
module.exports = exports['default'];
/***/ }),
/* 7 */
/***/ (function(module, exports) {
module.exports = require("prop-types");
/***/ }),
/* 8 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
var _extends2 = __webpack_require__(1);
var _extends3 = _interopRequireDefault(_extends2);
var _objectWithoutProperties2 = __webpack_require__(2);
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _react = __webpack_require__(0);
var _react2 = _interopRequireDefault(_react);
var _classnames = __webpack_require__(3);
var _classnames2 = _interopRequireDefault(_classnames);
var _Button = __webpack_require__(6);
var _Button2 = _interopRequireDefault(_Button);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var Alert = _react2.default.createClass({
displayName: 'Alert',
// define property types
propTypes: {
children: _react2.default.PropTypes.node.isRequired,
className: _react2.default.PropTypes.string,
handlerDismiss: _react2.default.PropTypes.func,
labelDismiss: _react2.default.PropTypes.string,
iconDismiss: _react2.default.PropTypes.string,
type: _react2.default.PropTypes.string,
border: _react2.default.PropTypes.bool,
vertSpacing: _react2.default.PropTypes.bool
},
// template rendering
render: function render() {
var _props = this.props,
className = _props.className,
border = _props.border,
handlerDismiss = _props.handlerDismiss,
labelDismiss = _props.labelDismiss,
iconDismiss = _props.iconDismiss,
type = _props.type,
vertSpacing = _props.vertSpacing,
children = _props.children,
otherProps = (0, _objectWithoutProperties3.default)(_props, ['className', 'border', 'handlerDismiss', 'labelDismiss', 'iconDismiss', 'type', 'vertSpacing', '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--dismissable': typeof handlerDismiss !== 'undefined'
}, className);
// TODO: add onclick event to remove alert
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
);
}
});
exports.default = Alert;
module.exports = exports['default'];
/***/ }),
/* 9 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
var _Tooltip = __webpack_require__(41);
var _Tooltip2 = _interopRequireDefault(_Tooltip);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Tooltip2.default;
module.exports = exports['default'];
/***/ }),
/* 10 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
var _extends2 = __webpack_require__(1);
var _extends3 = _interopRequireDefault(_extends2);
var _objectWithoutProperties2 = __webpack_require__(2);
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _react = __webpack_require__(0);
var _react2 = _interopRequireDefault(_react);
var _lodash = __webpack_require__(4);
var _lodash2 = _interopRequireDefault(_lodash);
var _classnames = __webpack_require__(3);
var _classnames2 = _interopRequireDefault(_classnames);
var _Tooltip = __webpack_require__(9);
var _Tooltip2 = _interopRequireDefault(_Tooltip);
var _Button = __webpack_require__(6);
var _Button2 = _interopRequireDefault(_Button);
var _Progressbar = __webpack_require__(22);
var _Progressbar2 = _interopRequireDefault(_Progressbar);
var _PerformanceMixin = __webpack_require__(5);
var _PerformanceMixin2 = _interopRequireDefault(_PerformanceMixin);
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';
import rxmq from 'ecc-messagebus';
// channel event which updates progressTopic
rxmq.channel('yourchannel').subject('progressNumber').onNext({
progress: 30, // integer, progress in percentage
lastUpdate: 'August 31st 2017, 9:48:24 am.', // string which should be a date, require tooltip to be set
});
const Page = React.createClass({
// template rendering
render() {
return (
<ProgressButton
progress={50}
progressTopic={rxmq.channel('yourchannel').subject('progressNumber')}
tooltip={'running'}
raised={false}
>
Working!
</ProgressButton>
)
},
// ....
});
```
You can use `progress` and `progressTopic` options directly on `<AffirmativeButton/>`, `<DismissiveButton/>` and `<DisruptiveButton/>` elements.
*/
var ProgressButton = _react2.default.createClass({
mixins: [_PerformanceMixin2.default],
displayName: 'ProgressButton',
// define property types
propTypes: {
/**
integer (default: 0): progress number 0..100, if not set or 0 then an infinite progress bar is used
*/
progress: _react2.default.PropTypes.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
*/
progressTopic: _react2.default.PropTypes.object,
/**
string (optional): tooltip for progress bar
if a progress number is known (via option or message queue) then the tooltip is extenden by a colon, the value and a percent char
*/
tooltip: _react2.default.PropTypes.string,
/**
string (optional): text info that shows information about the last known update on the process
*/
lastUpdate: _react2.default.PropTypes.string
},
getDefaultProps: function getDefaultProps() {
return {};
},
getInitialState: function getInitialState() {
return {
progress: _lodash2.default.get(this.props, 'progress', 0),
lastUpdate: _lodash2.default.get(this.props, 'lastUpdate', false)
};
},
componentDidMount: function componentDidMount() {
if (_lodash2.default.has(this.props, 'progressTopic')) {
var topic = _lodash2.default.get(this.props, 'progressTopic');
if (_lodash2.default.isFunction(topic.subscribe)) {
this.subscription = topic.subscribe(this.handleProgressUpdates);
}
}
},
componentWillUnmount: function componentWillUnmount() {
if (_lodash2.default.has(this, 'subscription')) {
this.subscription.unsubscribe();
}
},
handleProgressUpdates: function handleProgressUpdates(_ref) {
var progressNumber = _ref.progressNumber,
_ref$lastUpdate = _ref.lastUpdate,
lastUpdate = _ref$lastUpdate === undefined ? false : _ref$lastUpdate;
if (_lodash2.default.isNumber(progressNumber)) {
this.setState({
progress: progressNumber,
lastUpdate: lastUpdate
});
}
},
// template rendering
render: function render() {
// split 'normal' props from button content
var _props = this.props,
children = _props.children,
className = _props.className,
tooltip = _props.tooltip,
otherProps = (0, _objectWithoutProperties3.default)(_props, ['children', 'className', 'tooltip']);
delete otherProps.progress;
delete otherProps.progressTopic;
var classes = (0, _classnames2.default)('mdl-progress mdl-js-progress', className);
var progressbar = _react2.default.createElement(_Progressbar2.default, {
appearLocal: true,
indeterminate: !this.state.progress,
progress: this.state.progress ? this.state.progress : 0
});
if (typeof tooltip !== 'undefined' && tooltip) {
var lastUpdate = this.state.lastUpdate ? this.state.lastUpdate + ' ' : '';
progressbar = _react2.default.createElement(
_Tooltip2.default,
{
label: this.state.progress ? '' + lastUpdate + tooltip + ': ' + this.state.progress + '%' : lastUpdate + tooltip },
progressbar
);
}
// render button
return _react2.default.createElement(
_Button2.default,
(0, _extends3.default)({ raised: true, disabled: true }, otherProps),
children,
progressbar
);
}
});
exports.default = ProgressButton;
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__(2);
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _react = __webpack_require__(0);
var _react2 = _interopRequireDefault(_react);
var _classnames = __webpack_require__(3);
var _classnames2 = _interopRequireDefault(_classnames);
var _lodash = __webpack_require__(4);
var _Tooltip = __webpack_require__(9);
var _Tooltip2 = _interopRequireDefault(_Tooltip);
var _PerformanceMixin = __webpack_require__(5);
var _PerformanceMixin2 = _interopRequireDefault(_PerformanceMixin);
var _icontable = __webpack_require__(42);
var _icontable2 = _interopRequireDefault(_icontable);
var _canonicalicons = __webpack_require__(43);
var _canonicalicons2 = _interopRequireDefault(_canonicalicons);
var _canonicaltooltips = __webpack_require__(21);
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 = _react2.default.createClass({
mixins: [_PerformanceMixin2.default],
displayName: 'Icon',
// define property types
propTypes: {
className: _react2.default.PropTypes.string,
name: _react2.default.PropTypes.string.isRequired,
tooltip: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.node, _react2.default.PropTypes.bool])
},
// template rendering
render: function render() {
var _props = this.props,
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;
}
});
exports.default = Icon;
module.exports = exports['default'];
/***/ }),
/* 12 */
/***/ (function(module, exports) {
module.exports = require("babel-runtime/helpers/classCallCheck");
/***/ }),
/* 13 */
/***/ (function(module, exports) {
module.exports = require("babel-runtime/helpers/possibleConstructorReturn");
/***/ }),
/* 14 */
/***/ (function(module, exports) {
module.exports = require("babel-runtime/helpers/inherits");
/***/ }),
/* 15 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
var _extends2 = __webpack_require__(1);
var _extends3 = _interopRequireDefault(_extends2);
var _objectWithoutProperties2 = __webpack_require__(2);
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _react = __webpack_require__(0);
var _react2 = _interopRequireDefault(_react);
var _classnames = __webpack_require__(3);
var _classnames2 = _interopRequireDefault(_classnames);
var _Select = __webpack_require__(72);
var _Select2 = _interopRequireDefault(_Select);
var _Creatable = __webpack_require__(73);
var _Creatable2 = _interopRequireDefault(_Creatable);
var _Async = __webpack_require__(74);
var _Async2 = _interopRequireDefault(_Async);
var _AsyncCreatable = __webpack_require__(75);
var _AsyncCreatable2 = _interopRequireDefault(_AsyncCreatable);
var _lodash = __webpack_require__(4);
var _lodash2 = _interopRequireDefault(_lodash);
var _PerformanceMixin = __webpack_require__(5);
var _PerformanceMixin2 = _interopRequireDefault(_PerformanceMixin);
var _uniqueId = __webpack_require__(28);
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' });
};
var SelectBox = _react2.default.createClass({
mixins: [_PerformanceMixin2.default],
displayName: 'SelectBox',
propTypes: {
/**
* contains values which are available in dropdown list
* options is an array of objects or strings and/or numbers
*/
options: _react2.default.PropTypes.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;
}),
/**
* contains selected value
* value is an object or a strings a numbers
*/
value: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.number, _react2.default.PropTypes.object,
// only needed for multiple inputs
_react2.default.PropTypes.array]),
// onChange handler
onChange: _react2.default.PropTypes.func.isRequired,
// allow creation of new values
creatable: _react2.default.PropTypes.bool
},
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)
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);
});
},
onFocus: function onFocus() {
this.setState({
focused: true
});
},
onBlur: function onBlur() {
this.setState({
focused: false
});
},
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,
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', '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': !!placeholder,
'mdl-textfield--floating-label': !!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 },
component,
placeholder && _react2.default.createElement(
'label',
{ className: 'mdl-textfield__label', htmlFor: uniqueId },
placeholder
)
);
}
});
exports.default = (0, _uniqueId2.default)(SelectBox, {
prefix: 'selectBox',
targetProp: 'uniqueId'
});
module.exports = exports['default'];
/***/ }),
/* 16 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
var _extends2 = __webpack_require__(1);
var _extends3 = _interopRequireDefault(_extends2);
var _objectWithoutProperties2 = __webpack_require__(2);
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _react = __webpack_require__(0);
var _react2 = _interopRequireDefault(_react);
var _propTypes = __webpack_require__(7);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _classnames = __webpack_require__(3);
var _classnames2 = _interopRequireDefault(_classnames);
var _Textfield = __webpack_require__(76);
var _Textfield2 = _interopRequireDefault(_Textfield);
var _lodash = __webpack_require__(4);
var _lodash2 = _interopRequireDefault(_lodash);
var _Button = __webpack_require__(6);
var _Button2 = _interopRequireDefault(_Button);
var _uniqueId = __webpack_require__(28);
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
});
// provides clean searchstring button
var clearButton = _lodash2.default.isFunction(onClearValue) && value ? _react2.default.createElement(
'div',
{ className: 'mdl-input__clearable-holder' },
_react2.default.createElement(_Button2.default, {
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: false,
reducedSize: false,
required: false,
stretch: true
};
TextField.displayName = 'TextField';
exports.default = (0, _uniqueId2.default)(TextField, { prefix: 'textField', targetProp: 'id' });
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__(2);
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _react = __webpack_require__(0);
var _react2 = _interopRequireDefault(_react);
var _propTypes = __webpack_require__(7);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _classnames = __webpack_require__(3);
var _classnames2 = _interopRequireDefault(_classnames);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
Provides table row element that can be enriched by sub elements.
```js
import {TableRow} from '@eccenca/gui-elements';
class Page extends React.Component {
// ...
// template rendering
// use it inside the correct Table elements
render() {
return (
<TableRow
multiline={false} // boolean true or false, allow linebreaks and multilined content in table cells (optional, default: false)
preventCellOverflow={true} // boolean true or false, prevent overflowing content in table cells (optional, default: false)
className="my-own-class" // string, used for additional CSS class descriptions
>
<!-- content -->
</TableRow>
)
},
// ...
};
```
*/
var TableRow = function TableRow(props) {
var className = props.className,
children = props.children,
multiline = props.multiline,
preventCellOverflow = props.preventCellOverflow,
otherProps = (0, _objectWithoutProperties3.default)(props, ['className', 'children', 'multiline', 'preventCellOverflow']);
var rowClassNames = (0, _classnames2.default)({
'mdl-data-table--multiline': multiline === true,
'mdl-data-table--preventoverflow': preventCellOverflow === true
}, className);
return _react2.default.createElement(
'tr',
(0, _extends3.default)({ className: rowClassNames }, otherProps),
children
);
};
TableRow.propTypes = {
children: _propTypes2.default.oneOfType([_propTypes2.default.node]),
/**
* optional CSS class
*/
className: _propTypes2.default.string,
/**
* allow linebreaks and multilined content in table cells
*/
multiline: _propTypes2.default.bool,
/**
* prevent overflowing content in table cells
*/
preventCellOverflow: _propTypes2.default.bool
};
TableRow.defaultProps = {
className: '',
multiline: false,
preventCellOverflow: false
};
TableRow.displayName = 'Table row';
exports.default = TableRow;
module.exports = exports['default'];
/***/ }),
/* 18 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
var _extends2 = __webpack_require__(1);
var _extends3 = _interopRequireDefault(_extends2);
var _objectWithoutProperties2 = __webpack_require__(2);
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _react = __webpack_require__(0);
var _react2 = _interopRequireDefault(_react);
var _propTypes = __webpack_require__(7);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _classnames = __webpack_require__(3);
var _classnames2 = _interopRequireDefault(_classnames);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
Provides table cell element that can be enriched by sub elements.
```js
import {TableCell} from '@eccenca/gui-elements';
class Page extends React.Component {
// ...
// template rendering
// use it inside the correct Table elements
render() {
return (
<TableCell
isHead={true} // boolean, if the table cell contains a table head for the column or row (optional, default: false)
likeHead={true} // boolean, if a normal table cell should be look like a head element (optional, default: false)
multiline={false} // boolean true or false, allow linebreaks and multilined content in table cells (optional, default: false)
preventCellOverflow={true} // boolean true or false, prevent overflowing content in table cells (optional, default: false)
className="my-own-class" // string, used for additional CSS class descriptions
>
<!-- content -->
</TableCell>
)
},
// ...
};
```
*/
var TableCell = function TableCell(props) {
var isHead = props.isHead,
likeHead = props.likeHead,
className = props.className,
children = props.children,
multiline = props.multiline,
preventCellOverflow = props.preventCellOverflow,
otherProps = (0, _objectWithoutProperties3.default)(props, ['isHead', 'likeHead', 'className', 'children', 'multiline', 'preventCellOverflow']);
var TableCellType = isHead === true ? 'th' : 'td';
var cellClassNames = (0, _classnames2.default)({
'mdl-data-table__header': isHead === false && likeHead === true,
'mdl-data-table--multiline': multiline === true,
'mdl-data-table--preventoverflow': preventCellOverflow === true
}, className);
return _react2.default.createElement(
TableCellType,
(0, _extends3.default)({ className: cellClassNames }, otherProps),
children
);
};
TableCell.propTypes = {
children: _propTypes2.default.oneOfType([_propTypes2.default.node]),
/**
* optional CSS class
*/
className: _propTypes2.default.string,
/**
* table cell is head for column or row
*/
isHead: _propTypes2.default.bool,
/**
* table cell looks like header cell
*/
likeHead: _propTypes2.default.bool,
/**
* allow linebreaks and multilined content in table cells
*/
multiline: _propTypes2.default.bool,
/**
* prevent overflowing content in table cells
*/
preventCellOverflow: _propTypes2.default.bool
};
TableCell.defaultProps = {
isHead: false,
likeHead: false,
className: '',
multiline: false,
preventCellOverflow: false
};
TableCell.displayName = 'Table cell';
exports.default = TableCell;
module.exports = exports['default'];
/***/ }),
/* 19 */
/***/ (function(module, exports) {
module.exports = require("react-dom");
/***/ }),
/* 20 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
var _Alert = __webpack_require__(8);
var _Alert2 = _interopRequireDefault(