sh-input-select
Version:
Select input box superhero theme
1,392 lines (1,211 loc) • 100 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("react"), require("lodash"));
else if(typeof define === 'function' && define.amd)
define(["react", "lodash"], factory);
else if(typeof exports === 'object')
exports["sh-input-select"] = factory(require("react"), require("lodash"));
else
root["sh-input-select"] = factory(root["React"], root["_"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_3__) {
return /******/ (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] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.loaded = 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;
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/*!**********************!*\
!*** ./src/index.js ***!
\**********************/
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _shInputSelect = __webpack_require__(/*! ./sh-input-select.js */ 1);
var _shInputSelect2 = _interopRequireDefault(_shInputSelect);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _shInputSelect2.default;
/***/ }),
/* 1 */
/*!********************************!*\
!*** ./src/sh-input-select.js ***!
\********************************/
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = __webpack_require__(/*! react */ 2);
var _react2 = _interopRequireDefault(_react);
var _lodash = __webpack_require__(/*! lodash */ 3);
var _ = _interopRequireWildcard(_lodash);
var _shCore = __webpack_require__(/*! sh-core */ 4);
var _shCore2 = _interopRequireDefault(_shCore);
var _propTypes = __webpack_require__(/*! prop-types */ 5);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _iconCheckboxSelected = __webpack_require__(/*! ./icons/icon-checkbox-selected */ 15);
var _iconCheckboxSelected2 = _interopRequireDefault(_iconCheckboxSelected);
var _iconCheckboxUnselected = __webpack_require__(/*! ./icons/icon-checkbox-unselected */ 16);
var _iconCheckboxUnselected2 = _interopRequireDefault(_iconCheckboxUnselected);
var _iconChevronDown = __webpack_require__(/*! ./icons/icon-chevron-down */ 17);
var _iconChevronDown2 = _interopRequireDefault(_iconChevronDown);
var _iconChevronLeft = __webpack_require__(/*! ./icons/icon-chevron-left */ 18);
var _iconChevronLeft2 = _interopRequireDefault(_iconChevronLeft);
var _iconChevronRight = __webpack_require__(/*! ./icons/icon-chevron-right */ 19);
var _iconChevronRight2 = _interopRequireDefault(_iconChevronRight);
__webpack_require__(/*! ./sh-input-select.scss */ 20);
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var defaultGetFunction = function defaultGetFunction(option) {
if (_.isObject(option)) {
if (option.name) {
return option.name;
} else {
return JSON.stringify(option);
}
} else {
return option;
}
};
var defaultConfig = {
getDisplay: defaultGetFunction,
getLabelDisplay: defaultGetFunction,
multiselect: false,
idField: null,
tree: false,
treeHasChildren: function treeHasChildren(options, option) {
return !!_.find(options, { parentId: option.id });
},
treeGetChildren: function treeGetChildren(options, option) {
return _.filter(options, { parentId: option ? option.id : null });
},
required: false
};
var hotKeys = {
esc: 27,
space: 32,
up: 38,
down: 40
};
hotKeys.list = _.values(hotKeys);
var ShInputSelect = function (_React$Component) {
_inherits(ShInputSelect, _React$Component);
/** @namespace this.refs.inputElement */
/** @namespace this.refs.dropdownElement */
/** @namespace this.refs.mainElement */
function ShInputSelect() {
_classCallCheck(this, ShInputSelect);
var _this = _possibleConstructorReturn(this, (ShInputSelect.__proto__ || Object.getPrototypeOf(ShInputSelect)).call(this));
_this.state = {
value: null,
dropdownOpen: false,
dropdownDirection: 'down',
config: _.cloneDeep(defaultConfig),
treePath: [],
treeCurrentIndex: -1,
statusValid: false,
statusTouched: false
};
_this.checkDocumentEvent = _this.checkDocumentEvent.bind(_this);
_this.inputKeyUp = _this.inputKeyUp.bind(_this);
_this.toggleDropdown = _this.toggleDropdown.bind(_this);
_this.optionKeyUp = _this.optionKeyUp.bind(_this);
_this.optionSelect = _this.optionSelect.bind(_this);
_this.navigateTab = _this.navigateTab.bind(_this);
_this.validate = _this.validate.bind(_this);
_this.validateAll = _this.validateAll.bind(_this);
return _this;
}
_createClass(ShInputSelect, [{
key: 'componentWillMount',
value: function componentWillMount() {
if (this.props.validator) {
this.props.validator.register(this, this.validate);
}
this.setState({
config: _.assign(this.state.config, this.props.config)
});
this.updateStateValue(this.props.value);
document.addEventListener('click', this.checkDocumentEvent);
document.addEventListener('keyup', this.checkDocumentEvent);
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(props) {
this.setState({
config: _.assign(this.state.config, props.config)
});
if (!_.isEqual(this.state.value, props.value)) {
this.updateStateValue(props.value);
}
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
document.removeEventListener('click', this.checkDocumentEvent);
document.removeEventListener('keyup', this.checkDocumentEvent);
if (this.props.validator) {
this.props.validator.unregister(this);
}
}
}, {
key: 'checkDocumentEvent',
value: function checkDocumentEvent(event) {
if (this.state.dropdownOpen && !_.includes(event.path, this.refs.mainElement)) {
this.closeDropdown();
}
}
}, {
key: 'updateStateValue',
value: function updateStateValue(value) {
var _this2 = this;
if (this.isMulti()) {
var newValue = this.props.options.filter(function (option) {
return !!_.includes(value, _this2.getIdField(option));
});
this.setState({
value: newValue
}, this.validateAll);
} else {
this.setState({
value: this.getOption(value)
}, this.validateAll);
}
}
}, {
key: 'checkRequired',
value: function checkRequired() {
if (this.state.config.required) {
if (this.isMulti()) {
return !_.isEmpty(this.state.value);
} else {
return this.state.value;
}
} else {
return true;
}
}
}, {
key: 'validate',
value: function validate(onSubmit) {
var rtn = {
isValid: true
};
if (!this.checkRequired()) {
rtn = {
isValid: false,
msg: 'Required'
};
}
this.setState({
statusValid: rtn.isValid,
statusTouched: onSubmit || this.state.statusTouched
});
return rtn;
}
}, {
key: 'validateAll',
value: function validateAll() {
if (this.props.validator) {
this.props.validator.validate();
} else {
this.validate();
}
}
}, {
key: 'inputKeyUp',
value: function inputKeyUp(event) {
if (_.includes(hotKeys, event.keyCode)) {
event.preventDefault();
event.stopPropagation();
switch (event.keyCode) {
case hotKeys.space:
{
this.toggleDropdown();
break;
}
case hotKeys.esc:
{
this.closeDropdown();
break;
}
case hotKeys.down:
{
this.navigateTab(-1, -2);
}
}
}
}
}, {
key: 'inputKeyDown',
value: function inputKeyDown(event) {
if (_.includes(hotKeys, event.keyCode)) {
event.preventDefault();
event.stopPropagation();
}
}
}, {
key: 'toggleDropdown',
value: function toggleDropdown() {
if (this.state.dropdownOpen) {
this.closeDropdown();
} else {
this.openDropdown();
}
}
}, {
key: 'closeDropdown',
value: function closeDropdown() {
this.validate(true);
this.setState({
dropdownOpen: false
});
}
}, {
key: 'openDropdown',
value: function openDropdown() {
var dropdownDirection = 'down';
if (this.refs.mainElement && window.innerHeight - this.refs.mainElement.getBoundingClientRect().bottom < 300) {
dropdownDirection = 'up';
}
this.setState({
dropdownOpen: true,
dropdownDirection: dropdownDirection
});
}
}, {
key: 'optionKeyUp',
value: function optionKeyUp(option, index) {
var _this3 = this;
return function (event) {
if (_.includes(hotKeys, event.keyCode)) {
event.preventDefault();
event.stopPropagation();
switch (event.keyCode) {
case hotKeys.space:
{
// Space
_this3.optionSelect(option)();
break;
}
case hotKeys.esc:
{
// Esc
_this3.closeDropdown();
break;
}
case hotKeys.up:
{
// Up Arrow
_this3.navigateTab(1, index);
break;
}
case hotKeys.down:
{
// Down Arrow
_this3.navigateTab(-1, index);
break;
}
}
}
};
}
}, {
key: 'optionKeyDown',
value: function optionKeyDown(event) {
if (_.includes(hotKeys, event.keyCode)) {
event.preventDefault();
event.stopPropagation();
}
}
}, {
key: 'navigateTab',
value: function navigateTab(direction, index) {
if (!this.state.dropdownOpen) {
this.openDropdown();
}
var minIndex = 0;
if (this.state.treePath.length > 0) {
minIndex = -1;
}
var currentElement = null;
if (index < minIndex) {
currentElement = this.refs.dropdownElement.lastElementChild.lastElementChild;
} else {
currentElement = this.refs.dropdownElement.lastElementChild.children[index + -1 * minIndex];
}
var nextElement = null;
if (direction < 0) {
nextElement = currentElement.nextElementSibling;
if (!nextElement) {
nextElement = currentElement.parentElement.firstElementChild;
}
} else {
nextElement = currentElement.previousElementSibling;
if (!nextElement) {
nextElement = currentElement.parentElement.lastElementChild;
}
}
if (nextElement) {
nextElement.focus();
}
}
/**
* Select this option
* @param option
* @returns {function()} this function does the actual work
*/
}, {
key: 'optionSelect',
value: function optionSelect(option) {
var _this4 = this;
return function () {
if (_this4.checkTree(option)) {
_this4.refs.inputElement.focus();
if (_.last(_this4.state.treePath) == option) {
_this4.setState({
treeCurrentIndex: _this4.state.treeCurrentIndex - 1
});
setTimeout(function () {
_this4.setState({
treePath: _.dropRight(_this4.state.treePath)
});
}, 550);
} else {
_this4.setState({
treePath: _.concat(_this4.state.treePath, option)
});
setTimeout(function () {
_this4.setState({
treeCurrentIndex: _this4.state.treeCurrentIndex + 1
});
}, 50);
}
} else if (_this4.isMulti()) {
var newValue = void 0;
if (_.includes(_this4.state.value, option)) {
newValue = _.without(_this4.state.value, option);
} else {
newValue = _.concat(_this4.state.value, option);
}
_this4.setState({
value: newValue
}, _this4.validateAll);
_this4.props.onChange(newValue.map(function (value) {
return _this4.getIdField(value);
}));
} else {
var _newValue = _this4.getIdField(option);
_this4.updateStateValue(_newValue);
_this4.closeDropdown();
if (!_.isEqual(_this4.state.value, _newValue)) {
_this4.props.onChange(_newValue);
}
}
};
}
/**
* Gets the proper value used to set the value of the select
* @param option - object to get idField for
* @returns {*} the value of the idField or the entire object
*/
}, {
key: 'getIdField',
value: function getIdField(option) {
if (this.state.config.idField) {
return _.get(option, this.state.config.idField);
} else {
return option;
}
}
/**
* Get an option based on value and config
* @param value - value stored and changed
* @returns {object} Option that matches passed in value
*/
}, {
key: 'getOption',
value: function getOption(value) {
if (this.state.config.idField) {
var search = {};
_.set(search, this.state.config.idField, value);
return _.find(this.props.options, search);
} else {
return value;
}
}
/**
* Get the proper displayable string for an option
* @param option - object to get the display for
* @returns {string} Visual representation of this option
*/
}, {
key: 'getDisplay',
value: function getDisplay(option) {
if (_.isFunction(this.state.config.getDisplay)) {
return this.state.config.getDisplay(option);
} else if (_.isString(this.state.config.getDisplay)) {
return _.get(option, this.state.config.getDisplay);
} else {
return JSON.stringify(option);
}
}
/**
* Get the proper displayable string for an label
* @param option - object to get the display for
* @returns {string} Visual representation of this option to be used as label
*/
}, {
key: 'getLabel',
value: function getLabel(option) {
if (_.isFunction(this.state.config.getLabelDisplay)) {
return this.state.config.getLabelDisplay(option);
} else if (_.isString(this.state.config.getLabelDisplay)) {
return _.get(option, this.state.config.getLabelDisplay);
} else {
return JSON.stringify(option);
}
}
}, {
key: 'isMulti',
value: function isMulti() {
return this.state.config.multiselect;
}
}, {
key: 'isTree',
value: function isTree() {
return this.state.config.tree;
}
}, {
key: 'checkTree',
value: function checkTree(option) {
if (!this.isTree()) {
return false;
} else {
return this.state.config.treeHasChildren(this.props.options, option);
}
}
}, {
key: 'render',
value: function render() {
var _this5 = this;
//noinspection JSUnusedLocalSymbols
var _props = this.props,
value = _props.value,
options = _props.options,
onChange = _props.onChange,
config = _props.config,
classNames = _props.classNames,
validator = _props.validator,
other = _objectWithoutProperties(_props, ['value', 'options', 'onChange', 'config', 'classNames', 'validator']);
var mainClasses = {
shInputSelect: true,
openDown: this.state.dropdownDirection === 'down',
openUp: this.state.dropdownDirection !== 'down',
closed: !this.state.dropdownOpen,
opened: this.state.dropdownOpen,
shValid: this.state.statusValid,
shInvalid: !this.state.statusValid,
shTouched: this.state.statusTouched,
shUntouched: !this.state.statusTouched,
other: classNames
};
var inputSelected = 'Select';
if (this.isMulti()) {
if (this.state.value.length === 0) {
// Don't do anything
} else if (this.state.value.length === this.props.options.length) {
inputSelected = 'All Selected';
} else if (this.state.value.length === 1) {
inputSelected = this.getLabel(this.state.value[0]);
} else {
inputSelected = this.state.value.length + ' Selected';
}
} else if (this.state.value) {
inputSelected = this.getLabel(this.state.value);
}
var input = _react2.default.createElement(
'div',
{ className: 'input', ref: 'inputElement', tabIndex: '0', onClick: this.toggleDropdown,
onKeyUp: this.inputKeyUp, onKeyDown: this.inputKeyDown, onFocus: this.onFocus },
_react2.default.createElement(
'div',
{ className: 'input-selected' },
inputSelected
),
_react2.default.createElement(_iconChevronDown2.default, null)
);
var generateOptions = function generateOptions(tabable, parentOption) {
var preOptions = _this5.props.options;
if (_this5.isTree()) {
preOptions = _this5.state.config.treeGetChildren(preOptions, parentOption);
}
return preOptions.map(function (current, index) {
var showSelected = null;
if (_this5.isMulti()) {
if (_.includes(_this5.state.value, current)) {
showSelected = _react2.default.createElement(_iconCheckboxSelected2.default, null);
} else {
showSelected = _react2.default.createElement(_iconCheckboxUnselected2.default, null);
}
}
var showTree = null;
if (_this5.isTree()) {
if (_this5.state.config.treeHasChildren(_this5.props.options, current)) {
showTree = _react2.default.createElement(
'div',
{ className: 'tree-forward-icon' },
_react2.default.createElement(_iconChevronRight2.default, null)
);
}
}
var optionDisplay = _this5.getDisplay(current);
return _react2.default.createElement(
'div',
{ key: index, className: 'option', tabIndex: tabable && _this5.state.dropdownOpen ? 0 : -1,
onClick: _this5.optionSelect(current), onKeyUp: _this5.optionKeyUp(current, index),
onKeyDown: _this5.optionKeyDown },
showSelected,
_react2.default.createElement(
'div',
{ className: 'option-details', title: optionDisplay },
optionDisplay
),
showTree
);
});
};
var generateDropdownClasses = function generateDropdownClasses(index) {
return _shCore2.default.getClassNames({
dropdown: true,
multi: _this5.isMulti(),
tree: _this5.isTree(),
left: index < _this5.state.treeCurrentIndex,
current: index === _this5.state.treeCurrentIndex,
right: index > _this5.state.treeCurrentIndex
});
};
var dropdownPages = [];
if (this.isTree()) {
dropdownPages.push(_react2.default.createElement(
'div',
{ key: 'dropdown-main', className: generateDropdownClasses(-1) },
generateOptions(this.state.treePath.length === 0)
));
for (var i = 0; i < this.state.treePath.length; i++) {
var parentOption = this.state.treePath[i];
var tabable = this.state.treePath.length - 1 === i;
var treeBack = _react2.default.createElement(
'div',
{ key: 'back', className: 'option back', tabIndex: tabable && this.state.dropdownOpen ? 0 : -1,
onClick: this.optionSelect(parentOption), onKeyUp: this.optionKeyUp(parentOption, -1),
onKeyDown: this.optionKeyDown },
_react2.default.createElement(
'div',
{ className: 'tree-back-icon' },
_react2.default.createElement(_iconChevronLeft2.default, null)
),
_react2.default.createElement(
'div',
{ className: 'option-details' },
this.getDisplay(parentOption)
)
);
dropdownPages.push(_react2.default.createElement(
'div',
{ key: 'dropdown-' + i, className: generateDropdownClasses(i) },
treeBack,
generateOptions(tabable, parentOption)
));
}
} else {
dropdownPages.push(_react2.default.createElement(
'div',
{ key: 'dropdown-main', className: generateDropdownClasses(-1) },
generateOptions(true)
));
}
var dropdownWrapper = _react2.default.createElement(
'div',
{ className: 'dropdown-wrapper', ref: 'dropdownElement' },
dropdownPages
);
return _react2.default.createElement(
'div',
_extends({ ref: 'mainElement' }, other, { className: _shCore2.default.getClassNames(mainClasses) }),
input,
dropdownWrapper
);
}
}]);
return ShInputSelect;
}(_react2.default.Component);
ShInputSelect.propTypes = {
value: _propTypes2.default.any,
options: _propTypes2.default.array.isRequired,
onChange: _propTypes2.default.func,
config: _propTypes2.default.object,
validator: _propTypes2.default.object
};
ShInputSelect.defaultProps = {
value: null,
options: [],
onChange: _.noop,
config: defaultConfig,
validator: null
};
exports.default = ShInputSelect;
/***/ }),
/* 2 */
/*!**************************************************************************************!*\
!*** external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react"} ***!
\**************************************************************************************/
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_2__;
/***/ }),
/* 3 */
/*!*************************************************************************************!*\
!*** external {"root":"_","commonjs2":"lodash","commonjs":"lodash","amd":"lodash"} ***!
\*************************************************************************************/
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_3__;
/***/ }),
/* 4 */
/*!**********************************!*\
!*** ./~/sh-core/bin/sh-core.js ***!
\**********************************/
/***/ (function(module, exports, __webpack_require__) {
(function webpackUniversalModuleDefinition(root, factory) {
if(true)
module.exports = factory(__webpack_require__(/*! lodash */ 3));
else if(typeof define === 'function' && define.amd)
define(["lodash"], factory);
else if(typeof exports === 'object')
exports["sh-core"] = factory(require("lodash"));
else
root["sh-core"] = factory(root["_"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_2__) {
return /******/ (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] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.loaded = 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;
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/*!**********************!*\
!*** ./src/index.js ***!
\**********************/
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getDecimal = exports.getClassNames = undefined;
var _getClassNames = __webpack_require__(/*! ./util/get-class-names */ 1);
var _getClassNames2 = _interopRequireDefault(_getClassNames);
var _getDecimal = __webpack_require__(/*! ./util/get-decimal */ 3);
var _getDecimal2 = _interopRequireDefault(_getDecimal);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.getClassNames = _getClassNames2.default;
exports.getDecimal = _getDecimal2.default;
exports.default = {
getClassNames: _getClassNames2.default,
getDecimal: _getDecimal2.default
};
/***/ },
/* 1 */
/*!*************************************!*\
!*** ./src/util/get-class-names.js ***!
\*************************************/
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _lodash = __webpack_require__(/*! lodash */ 2);
var _ = _interopRequireWildcard(_lodash);
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
/**
* Get a string of classNames from the object passed in. Uses the keys for class names and only adds them if the value is true. Value of keys can be boolean, function, or strings. Functions are evaluated on call. Strings are appended to end of key.
*
* @param {object} classObject Object containing keys of class names.
* @returns {string}
*/
function getClassNames(classObject) {
var classNames = [];
for (var key in classObject) {
if (classObject.hasOwnProperty(key)) {
var check = classObject[key];
var className = _.kebabCase(key);
if (_.isFunction(check)) {
if (check()) {
classNames.push(className);
}
} else if (_.isString(check)) {
if (className === 'include' || _.includes(check, ' ')) {
classNames = _.concat(classNames, check.split(' '));
} else {
classNames.push(className + '-' + _.kebabCase(check));
}
} else if (check) {
classNames.push(className);
}
}
}
classNames = _.uniq(classNames);
return classNames.join(' ');
}
exports.default = getClassNames;
/***/ },
/* 2 */
/*!*************************************************************************************!*\
!*** external {"root":"_","commonjs2":"lodash","commonjs":"lodash","amd":"lodash"} ***!
\*************************************************************************************/
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_2__;
/***/ },
/* 3 */
/*!*********************************!*\
!*** ./src/util/get-decimal.js ***!
\*********************************/
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _lodash = __webpack_require__(/*! lodash */ 2);
var _ = _interopRequireWildcard(_lodash);
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
/**
* Get a decimal value from a string or number, remove any unnecessary characters.
*
* @param {string} value Alpha characters will be removed and a decimal will be returned. For example if you give it 'b.123' 0.123 will be returned.
* @returns {number}
*/
function getDecimal(value) {
if (!value) {
return 0;
}
var num = value;
if (!_.isNumber(value)) {
var isNeg = '-' && _.includes(value, '-');
var regExp = '[^0-9.]';
var numString = value.toString().replace(new RegExp(regExp, 'g'), '');
var numList = numString.split('.');
// numList will always have at least one value in array because we checked for an empty string earlier.
numList[0] += '.';
numString = numList.join('');
num = parseFloat(numString);
if (!num) {
num = 0;
} else if (isNeg) {
num *= -1;
}
}
return num;
}
exports.default = getDecimal;
/***/ }
/******/ ])
});
;
//# sourceMappingURL=sh-core.js.map
/***/ }),
/* 5 */
/*!*******************************!*\
!*** ./~/prop-types/index.js ***!
\*******************************/
/***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(process) {/**
* Copyright (c) 2013-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
if (process.env.NODE_ENV !== 'production') {
var REACT_ELEMENT_TYPE = (typeof Symbol === 'function' &&
Symbol.for &&
Symbol.for('react.element')) ||
0xeac7;
var isValidElement = function(object) {
return typeof object === 'object' &&
object !== null &&
object.$$typeof === REACT_ELEMENT_TYPE;
};
// By explicitly using `prop-types` you are opting into new development behavior.
// http://fb.me/prop-types-in-prod
var throwOnDirectAccess = true;
module.exports = __webpack_require__(/*! ./factoryWithTypeCheckers */ 7)(isValidElement, throwOnDirectAccess);
} else {
// By explicitly using `prop-types` you are opting into new production behavior.
// http://fb.me/prop-types-in-prod
module.exports = __webpack_require__(/*! ./factoryWithThrowingShims */ 14)();
}
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(/*! ./../process/browser.js */ 6)))
/***/ }),
/* 6 */
/*!******************************!*\
!*** ./~/process/browser.js ***!
\******************************/
/***/ (function(module, exports) {
// shim for using process in browser
var process = module.exports = {};
// cached from whatever global is present so that test runners that stub it
// don't break things. But we need to wrap it in a try catch in case it is
// wrapped in strict mode code which doesn't define any globals. It's inside a
// function because try/catches deoptimize in certain engines.
var cachedSetTimeout;
var cachedClearTimeout;
function defaultSetTimout() {
throw new Error('setTimeout has not been defined');
}
function defaultClearTimeout () {
throw new Error('clearTimeout has not been defined');
}
(function () {
try {
if (typeof setTimeout === 'function') {
cachedSetTimeout = setTimeout;
} else {
cachedSetTimeout = defaultSetTimout;
}
} catch (e) {
cachedSetTimeout = defaultSetTimout;
}
try {
if (typeof clearTimeout === 'function') {
cachedClearTimeout = clearTimeout;
} else {
cachedClearTimeout = defaultClearTimeout;
}
} catch (e) {
cachedClearTimeout = defaultClearTimeout;
}
} ())
function runTimeout(fun) {
if (cachedSetTimeout === setTimeout) {
//normal enviroments in sane situations
return setTimeout(fun, 0);
}
// if setTimeout wasn't available but was latter defined
if ((cachedSetTimeout === defaultSetTimout || !cachedSetTimeout) && setTimeout) {
cachedSetTimeout = setTimeout;
return setTimeout(fun, 0);
}
try {
// when when somebody has screwed with setTimeout but no I.E. maddness
return cachedSetTimeout(fun, 0);
} catch(e){
try {
// When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally
return cachedSetTimeout.call(null, fun, 0);
} catch(e){
// same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error
return cachedSetTimeout.call(this, fun, 0);
}
}
}
function runClearTimeout(marker) {
if (cachedClearTimeout === clearTimeout) {
//normal enviroments in sane situations
return clearTimeout(marker);
}
// if clearTimeout wasn't available but was latter defined
if ((cachedClearTimeout === defaultClearTimeout || !cachedClearTimeout) && clearTimeout) {
cachedClearTimeout = clearTimeout;
return clearTimeout(marker);
}
try {
// when when somebody has screwed with setTimeout but no I.E. maddness
return cachedClearTimeout(marker);
} catch (e){
try {
// When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally
return cachedClearTimeout.call(null, marker);
} catch (e){
// same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error.
// Some versions of I.E. have different rules for clearTimeout vs setTimeout
return cachedClearTimeout.call(this, marker);
}
}
}
var queue = [];
var draining = false;
var currentQueue;
var queueIndex = -1;
function cleanUpNextTick() {
if (!draining || !currentQueue) {
return;
}
draining = false;
if (currentQueue.length) {
queue = currentQueue.concat(queue);
} else {
queueIndex = -1;
}
if (queue.length) {
drainQueue();
}
}
function drainQueue() {
if (draining) {
return;
}
var timeout = runTimeout(cleanUpNextTick);
draining = true;
var len = queue.length;
while(len) {
currentQueue = queue;
queue = [];
while (++queueIndex < len) {
if (currentQueue) {
currentQueue[queueIndex].run();
}
}
queueIndex = -1;
len = queue.length;
}
currentQueue = null;
draining = false;
runClearTimeout(timeout);
}
process.nextTick = function (fun) {
var args = new Array(arguments.length - 1);
if (arguments.length > 1) {
for (var i = 1; i < arguments.length; i++) {
args[i - 1] = arguments[i];
}
}
queue.push(new Item(fun, args));
if (queue.length === 1 && !draining) {
runTimeout(drainQueue);
}
};
// v8 likes predictible objects
function Item(fun, array) {
this.fun = fun;
this.array = array;
}
Item.prototype.run = function () {
this.fun.apply(null, this.array);
};
process.title = 'browser';
process.browser = true;
process.env = {};
process.argv = [];
process.version = ''; // empty string to avoid regexp issues
process.versions = {};
function noop() {}
process.on = noop;
process.addListener = noop;
process.once = noop;
process.off = noop;
process.removeListener = noop;
process.removeAllListeners = noop;
process.emit = noop;
process.prependListener = noop;
process.prependOnceListener = noop;
process.listeners = function (name) { return [] }
process.binding = function (name) {
throw new Error('process.binding is not supported');
};
process.cwd = function () { return '/' };
process.chdir = function (dir) {
throw new Error('process.chdir is not supported');
};
process.umask = function() { return 0; };
/***/ }),
/* 7 */
/*!*************************************************!*\
!*** ./~/prop-types/factoryWithTypeCheckers.js ***!
\*************************************************/
/***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(process) {/**
* Copyright (c) 2013-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
'use strict';
var emptyFunction = __webpack_require__(/*! fbjs/lib/emptyFunction */ 8);
var invariant = __webpack_require__(/*! fbjs/lib/invariant */ 9);
var warning = __webpack_require__(/*! fbjs/lib/warning */ 10);
var assign = __webpack_require__(/*! object-assign */ 11);
var ReactPropTypesSecret = __webpack_require__(/*! ./lib/ReactPropTypesSecret */ 12);
var checkPropTypes = __webpack_require__(/*! ./checkPropTypes */ 13);
module.exports = function(isValidElement, throwOnDirectAccess) {
/* global Symbol */
var ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
var FAUX_ITERATOR_SYMBOL = '@@iterator'; // Before Symbol spec.
/**
* Returns the iterator method function contained on the iterable object.
*
* Be sure to invoke the function with the iterable as context:
*
* var iteratorFn = getIteratorFn(myIterable);
* if (iteratorFn) {
* var iterator = iteratorFn.call(myIterable);
* ...
* }
*
* @param {?object} maybeIterable
* @return {?function}
*/
function getIteratorFn(maybeIterable) {
var iteratorFn = maybeIterable && (ITERATOR_SYMBOL && maybeIterable[ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL]);
if (typeof iteratorFn === 'function') {
return iteratorFn;
}
}
/**
* Collection of methods that allow declaration and validation of props that are
* supplied to React components. Example usage:
*
* var Props = require('ReactPropTypes');
* var MyArticle = React.createClass({
* propTypes: {
* // An optional string prop named "description".
* description: Props.string,
*
* // A required enum prop named "category".
* category: Props.oneOf(['News','Photos']).isRequired,
*
* // A prop named "dialog" that requires an instance of Dialog.
* dialog: Props.instanceOf(Dialog).isRequired
* },
* render: function() { ... }
* });
*
* A more formal specification of how these methods are used:
*
* type := array|bool|func|object|number|string|oneOf([...])|instanceOf(...)
* decl := ReactPropTypes.{type}(.isRequired)?
*
* Each and every declaration produces a function with the same signature. This
* allows the creation of custom validation functions. For example:
*
* var MyLink = React.createClass({
* propTypes: {
* // An optional string or URI prop named "href".
* href: function(props, propName, componentName) {
* var propValue = props[propName];
* if (propValue != null && typeof propValue !== 'string' &&
* !(propValue instanceof URI)) {
* return new Error(
* 'Expected a string or an URI for ' + propName + ' in ' +
* componentName
* );
* }
* }
* },
* render: function() {...}
* });
*
* @internal
*/
var ANONYMOUS = '<<anonymous>>';
// Important!
// Keep this list in sync with production version in `./factoryWithThrowingShims.js`.
var ReactPropTypes = {
array: createPrimitiveTypeChecker('array'),
bool: createPrimitiveTypeChecker('boolean'),
func: createPrimitiveTypeChecker('function'),
number: createPrimitiveTypeChecker('number'),
object: createPrimitiveTypeChecker('object'),
string: createPrimitiveTypeChecker('string'),
symbol: createPrimitiveTypeChecker('symbol'),
any: createAnyTypeChecker(),
arrayOf: createArrayOfTypeChecker,
element: createElementTypeChecker(),
instanceOf: createInstanceTypeChecker,
node: createNodeChecker(),
objectOf: createObjectOfTypeChecker,
oneOf: createEnumTypeChecker,
oneOfType: createUnionTypeChecker,
shape: createShapeTypeChecker,
exact: createStrictShapeTypeChecker,
};
/**
* inlined Object.is polyfil