Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@trendmicro/react-buttons

Package Overview
Dependencies
Maintainers
1
Versions
23
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@trendmicro/react-buttons - npm Package Compare versions

Comparing version 0.4.7 to 0.5.0

1646

lib/index.js

@@ -1,2 +0,2 @@

/*! react-buttons v0.4.7 | (c) 2017 Trend Micro Inc. | MIT | https://github.com/trendmicro-frontend/react-buttons */
/*! react-buttons v0.5.0 | (c) 2017 Trend Micro Inc. | MIT | https://github.com/trendmicro-frontend/react-buttons */
module.exports =

@@ -16,5 +16,5 @@ /******/ (function(modules) { // webpackBootstrap

/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };

@@ -26,3 +26,3 @@ /******/

/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ module.l = true;
/******/

@@ -40,2 +40,28 @@ /******/ // Return the exports of the module

/******/
/******/ // identity function for calling harmony imports with the correct context
/******/ __webpack_require__.i = function(value) { return value; };
/******/
/******/ // 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__

@@ -45,3 +71,3 @@ /******/ __webpack_require__.p = "";

/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ return __webpack_require__(__webpack_require__.s = 9);
/******/ })

@@ -51,799 +77,859 @@ /************************************************************************/

/* 0 */
/***/ function(module, exports, __webpack_require__) {
/***/ (function(module, exports) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ButtonDropdown = exports.ButtonToolbar = exports.ButtonGroup = exports.Button = undefined;
var _Button2 = __webpack_require__(1);
var _Button3 = _interopRequireDefault(_Button2);
var _ButtonGroup2 = __webpack_require__(9);
var _ButtonGroup3 = _interopRequireDefault(_ButtonGroup2);
var _ButtonToolbar2 = __webpack_require__(10);
var _ButtonToolbar3 = _interopRequireDefault(_ButtonToolbar2);
var _ButtonDropdown2 = __webpack_require__(4);
var _ButtonDropdown3 = _interopRequireDefault(_ButtonDropdown2);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.Button = _Button3.default;
exports.ButtonGroup = _ButtonGroup3.default;
exports.ButtonToolbar = _ButtonToolbar3.default;
exports.ButtonDropdown = _ButtonDropdown3.default;
// removed by extract-text-webpack-plugin
module.exports = {"btn":"buttons---btn---2jZHN","active":"buttons---active---2-a32","focus":"buttons---focus---1kVJZ","hover":"buttons---hover---42FF2","disabled":"buttons---disabled---eCY9b","btn-icon-only":"buttons---btn-icon-only---NYhkW","btnIconOnly":"buttons---btn-icon-only---NYhkW","btn-default":"buttons---btn-default---1wWXD","btnDefault":"buttons---btn-default---1wWXD","btn-primary":"buttons---btn-primary---Wp1wb","btnPrimary":"buttons---btn-primary---Wp1wb","btn-danger":"buttons---btn-danger---1UUqU","btnDanger":"buttons---btn-danger---1UUqU","btn-border":"buttons---btn-border---1O58b","btnBorder":"buttons---btn-border---1O58b","btn-link":"buttons---btn-link---1xwS4","btnLink":"buttons---btn-link---1xwS4","btn-lg":"buttons---btn-lg---2xtUV","btnLg":"buttons---btn-lg---2xtUV","btn-group-lg":"buttons---btn-group-lg---3C8An","btnGroupLg":"buttons---btn-group-lg---3C8An","btn-md":"buttons---btn-md---HRR_F","btnMd":"buttons---btn-md---HRR_F","btn-group-md":"buttons---btn-group-md---3FQVP","btnGroupMd":"buttons---btn-group-md---3FQVP","btn-sm":"buttons---btn-sm---3cNnY","btnSm":"buttons---btn-sm---3cNnY","btn-group-sm":"buttons---btn-group-sm---3_QLf","btnGroupSm":"buttons---btn-group-sm---3_QLf","btn-xs":"buttons---btn-xs---2eEDQ","btnXs":"buttons---btn-xs---2eEDQ","btn-group-xs":"buttons---btn-group-xs---1c4pb","btnGroupXs":"buttons---btn-group-xs---1c4pb","btn-block":"buttons---btn-block---1nSNV","btnBlock":"buttons---btn-block---1nSNV","btn-group":"buttons---btn-group---1jaDo","btnGroup":"buttons---btn-group---1jaDo","btn-group-vertical":"buttons---btn-group-vertical---3Lm1e","btnGroupVertical":"buttons---btn-group-vertical---3Lm1e","btn-toolbar":"buttons---btn-toolbar---2-GfJ","btnToolbar":"buttons---btn-toolbar---2-GfJ","input-group":"buttons---input-group---1T18I","inputGroup":"buttons---input-group---1T18I","dropdown-toggle":"buttons---dropdown-toggle---vMtjL","dropdownToggle":"buttons---dropdown-toggle---vMtjL","open":"buttons---open---1ju75","btn-group-justified":"buttons---btn-group-justified---3qB9u","btnGroupJustified":"buttons---btn-group-justified---3qB9u","dropdown-menu":"buttons---dropdown-menu---1fkH0","dropdownMenu":"buttons---dropdown-menu---1fkH0","dropdown":"buttons---dropdown---1yvIZ","select-value-zone":"buttons---select-value-zone---1WDhx","selectValueZone":"buttons---select-value-zone---1WDhx","select-arrow-zone":"buttons---select-arrow-zone---2AKJW","selectArrowZone":"buttons---select-arrow-zone---2AKJW","caret":"buttons---caret---3CkEt","dropdown-nooptions":"buttons---dropdown-nooptions---Z3N2g","dropdownNooptions":"buttons---dropdown-nooptions---Z3N2g","ready":"buttons---ready---m-e-B","dropup":"buttons---dropup---30DnN","dropdown-split":"buttons---dropdown-split---3C0pZ","dropdownSplit":"buttons---dropdown-split---3C0pZ"};
/***/ },
/***/ }),
/* 1 */
/***/ function(module, exports, __webpack_require__) {
/***/ (function(module, exports) {
'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 _classnames = __webpack_require__(2);
var _classnames2 = _interopRequireDefault(_classnames);
var _react = __webpack_require__(3);
var _react2 = _interopRequireDefault(_react);
var _ButtonDropdown = __webpack_require__(4);
var _ButtonDropdown2 = _interopRequireDefault(_ButtonDropdown);
var _index = __webpack_require__(5);
var _index2 = _interopRequireDefault(_index);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return 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; }
var Button = function Button(props) {
var className = props.className,
componentClass = props.componentClass,
type = props.type,
btnSize = props.btnSize,
btnStyle = props.btnStyle,
active = props.active,
hover = props.hover,
focus = props.focus,
disabled = props.disabled,
block = props.block,
iconOnly = props.iconOnly,
dropdown = props.dropdown,
others = _objectWithoutProperties(props, ['className', 'componentClass', 'type', 'btnSize', 'btnStyle', 'active', 'hover', 'focus', 'disabled', 'block', 'iconOnly', 'dropdown']);
var Component = componentClass;
if (dropdown) {
return _react2.default.createElement(_ButtonDropdown2.default, props);
}
return _react2.default.createElement(Component, _extends({}, others, {
type: type,
className: (0, _classnames2.default)(className, _index2.default.btn, _defineProperty({}, _index2.default['btn-lg'], btnSize === 'large' || btnSize === 'lg'), _defineProperty({}, _index2.default['btn-md'], btnSize === 'medium' || btnSize === 'md'), _defineProperty({}, _index2.default['btn-sm'], btnSize === 'small' || btnSize === 'sm'), _defineProperty({}, _index2.default['btn-xs'], btnSize === 'extra-small' || btnSize === 'xs'), _defineProperty({}, _index2.default['btn-default'], btnStyle === 'default'), _defineProperty({}, _index2.default['btn-primary'], btnStyle === 'primary'), _defineProperty({}, _index2.default['btn-danger'], btnStyle === 'danger' || btnStyle === 'emphasis'), _defineProperty({}, _index2.default['btn-border'], btnStyle === 'border' || btnStyle === 'flat'), _defineProperty({}, _index2.default['btn-link'], btnStyle === 'link'), _defineProperty({}, _index2.default['btn-block'], block), _defineProperty({}, _index2.default['btn-icon-only'], iconOnly), _defineProperty({}, _index2.default.hover, hover), _defineProperty({}, _index2.default.active, active), _defineProperty({}, _index2.default.focus, focus)),
disabled: !!disabled
}));
};
Button.propTypes = {
componentClass: _react.PropTypes.oneOfType([_react.PropTypes.element, _react.PropTypes.string]),
type: _react.PropTypes.oneOf(['button', 'reset', 'submit']),
btnSize: _react.PropTypes.oneOf(['lg', 'md', 'sm', 'xs', 'large', 'medium', 'small', 'extra-small']),
btnStyle: _react.PropTypes.oneOf(['default', 'primary', 'danger', 'emphasis', // alias of "danger"
'border', 'flat', // alias of "border"
'link']),
active: _react.PropTypes.bool,
hover: _react.PropTypes.bool,
focus: _react.PropTypes.bool,
disabled: _react.PropTypes.bool,
block: _react.PropTypes.bool,
iconOnly: _react.PropTypes.bool,
dropdown: _react.PropTypes.bool
};
Button.defaultProps = {
componentClass: 'button',
type: 'button',
btnSize: 'md',
btnStyle: 'default',
active: false,
hover: false,
focus: false,
disabled: false,
block: false,
iconOnly: false,
dropdown: false
};
exports.default = Button;
module.exports = require("classnames");
/***/ },
/***/ }),
/* 2 */
/***/ function(module, exports) {
/***/ (function(module, exports) {
module.exports = require("classnames");
module.exports = require("react");
/***/ },
/***/ }),
/* 3 */
/***/ function(module, exports) {
/***/ (function(module, exports, __webpack_require__) {
module.exports = require("react");
"use strict";
/***/ },
Object.defineProperty(exports, "__esModule", {
value: true
});
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 _classnames = __webpack_require__(1);
var _classnames2 = _interopRequireDefault(_classnames);
var _react = __webpack_require__(2);
var _react2 = _interopRequireDefault(_react);
var _index = __webpack_require__(0);
var _index2 = _interopRequireDefault(_index);
var _ButtonGroup = __webpack_require__(4);
var _ButtonGroup2 = _interopRequireDefault(_ButtonGroup);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
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 ButtonDropdown = function (_Component) {
_inherits(ButtonDropdown, _Component);
function ButtonDropdown() {
var _ref;
var _temp, _this, _ret;
_classCallCheck(this, ButtonDropdown);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ButtonDropdown.__proto__ || Object.getPrototypeOf(ButtonDropdown)).call.apply(_ref, [this].concat(args))), _this), _this.state = _this.getDefaultState(), _this.actions = {
dropdown: {
handleKeyDown: function handleKeyDown(e) {
if (!_this.props.dropdown || _this.props.disabled) {
return;
}
var isOpen = _this.state.isOpen;
switch (e.keyCode) {
case 13:
// enter
if (!isOpen) {
return;
}
_this.selectValue(_this.state.focusedOption);
break;
case 27:
// escape
if (isOpen) {
_this.closeMenu();
}
break;
case 38:
// up
_this.focusPreviousOption();
break;
case 40:
// down
_this.focusNextOption();
break;
default:
return;
}
e.stopPropagation();
e.preventDefault();
_this.focusButton();
},
handleMouseDown: function handleMouseDown(e) {
if (!_this.props.dropdown || _this.props.disabled) {
return;
}
_this.setState({
isOpen: !_this.state.isOpen
}, function () {
if (_this.state.isOpen) {
_this.focusAdjacentOption();
}
_this.focusButton();
});
// prevent default event handlers
e.stopPropagation();
e.preventDefault();
},
handleBlur: function handleBlur(e) {
if (!_this.props.dropdown || _this.props.disabled) {
return;
}
_this.closeMenu();
}
},
menu: {
handleOptionChanged: function handleOptionChanged(e) {
var el = e.currentTarget;
var index = el.dataset.key;
var selectedOption = _this.state.options[index];
_this.selectValue(selectedOption);
e.stopPropagation();
e.preventDefault();
},
handleMouseEnter: function handleMouseEnter(e) {
_this.focusOption(e);
},
handleMouseMove: function handleMouseMove(e) {
_this.focusOption(e);
}
}
}, _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(ButtonDropdown, [{
key: 'componentDidMount',
value: function componentDidMount() {
var _props = this.props,
dropdown = _props.dropdown,
fixedWidth = _props.fixedWidth,
dropdownStyle = _props.dropdownStyle;
if (dropdown && fixedWidth) {
var dropdownWidth = this.btnDropdown.parentElement.offsetWidth;
var menuWidth = this.menu.offsetWidth;
var caretWidth = dropdownStyle === 'split' ? this.btnDropdown.offsetWidth : this.caret.offsetWidth;
var newWidth = 0;
menuWidth += caretWidth;
if (menuWidth > dropdownWidth) {
newWidth = menuWidth;
} else if (dropdownWidth > menuWidth) {
newWidth = dropdownWidth;
}
if (newWidth > 0) {
this.resize({
width: newWidth
});
}
this.setState({
isReady: true
});
}
}
}, {
key: 'resize',
value: function resize(size) {
if (!size) {
return;
}
this.btnDropdown.parentElement.style.width = size.width + 'px';
this.menu.style.width = size.width + 'px';
}
}, {
key: 'getDefaultState',
value: function getDefaultState() {
var _props2 = this.props,
value = _props2.value,
dropdown = _props2.dropdown,
options = _props2.options,
fixedWidth = _props2.fixedWidth;
var focusedOption = void 0;
var initItems = void 0;
if (dropdown && Array.isArray(options)) {
var isChecked = void 0;
// Get default selected option(s) for renderValue function
initItems = options.map(function (option, i) {
isChecked = option.value === value;
var tempObj = {
value: option.value,
label: option.label,
id: 'option_item_' + i,
checked: isChecked
};
return tempObj;
});
focusedOption = initItems.find(function (item) {
return item.checked === true;
});
}
return {
isOpen: false,
focusedOption: focusedOption,
options: initItems,
isReady: !fixedWidth // 'isReady' will affect initialization display of menu
};
}
}, {
key: 'closeMenu',
value: function closeMenu() {
this.setState({
isOpen: false
});
}
}, {
key: 'focusButton',
value: function focusButton() {
this.btnDropdown.focus();
}
}, {
key: 'focusOption',
value: function focusOption(event) {
var index = event.currentTarget.dataset.key;
var option = this.props.options[index];
this.setState({
focusedOption: option
});
event.stopPropagation();
event.preventDefault();
}
}, {
key: 'focusNextOption',
value: function focusNextOption() {
this.focusAdjacentOption('next');
}
}, {
key: 'focusPreviousOption',
value: function focusPreviousOption() {
this.focusAdjacentOption('previous');
}
}, {
key: 'focusAdjacentOption',
value: function focusAdjacentOption(dir) {
var options = this.state.options;
var _state = this.state,
focusedOption = _state.focusedOption,
isOpen = _state.isOpen;
if (!isOpen) {
this.setState({
isOpen: true,
focusedOption: focusedOption || options[dir === 'next' ? 0 : options.length - 1]
});
return;
}
if (!Array.isArray(options)) {
return;
}
var focusedIndex = -1;
focusedIndex = options.indexOf(focusedOption);
if (dir === 'next' && focusedIndex !== -1) {
focusedIndex = (focusedIndex + 1) % options.length;
} else if (dir === 'previous') {
if (focusedIndex > 0) {
focusedIndex--;
} else {
focusedIndex = options.length - 1;
}
}
if (focusedIndex === -1) {
focusedIndex = 0;
}
this.setState({
focusedOption: options[focusedIndex]
});
}
}, {
key: 'getOptionLabel',
value: function getOptionLabel(option) {
return option.label;
}
}, {
key: 'getSelectedOptions',
value: function getSelectedOptions() {
var options = this.state.options;
var selectedOptions = [];
if (Array.isArray(options)) {
selectedOptions = options.filter(function (item) {
return item.checked === true;
});
}
return selectedOptions;
}
}, {
key: 'selectValue',
value: function selectValue(item) {
var _this2 = this;
this.focusButton();
this.setState({
isOpen: false
}, function () {
_this2.updateValue(item);
});
}
}, {
key: 'updateValue',
value: function updateValue(option) {
var newOptions = this.state.options;
var prevSelectedOption = newOptions.find(function (item) {
return item.checked === true;
});
if (prevSelectedOption) {
prevSelectedOption.checked = false;
}
var selectedIndex = newOptions.findIndex(function (item) {
return item.value === option.value;
});
newOptions[selectedIndex].checked = true;
this.setValue(newOptions);
}
}, {
key: 'setValue',
value: function setValue(newOptions) {
var _this3 = this;
this.setState({
options: newOptions
}, function () {
var value = _this3.getSelectedOptions();
var returnValue = value;
if (value.length > 0) {
returnValue = value[0];
}
_this3.props.onChange(returnValue);
});
}
}, {
key: 'renderMenuOptions',
value: function renderMenuOptions() {
var _this4 = this;
var customOptionRenderer = this.props.customOptionRenderer;
var _state2 = this.state,
focusedOption = _state2.focusedOption,
options = _state2.options;
var _actions$menu = this.actions.menu,
handleOptionChanged = _actions$menu.handleOptionChanged,
handleMouseEnter = _actions$menu.handleMouseEnter,
handleMouseMove = _actions$menu.handleMouseMove;
var defaultMenuOption = function defaultMenuOption(item) {
return _this4.getOptionLabel(item);
};
var renderLabel = customOptionRenderer || defaultMenuOption;
return options.map(function (item, key) {
return _react2.default.createElement(
'li',
{ key: 'option_' + key },
_react2.default.createElement(
'a',
{
className: (0, _classnames2.default)(_defineProperty({}, _index2.default.focus, item === focusedOption)),
'data-key': key,
onMouseDown: handleOptionChanged,
onMouseEnter: handleMouseEnter,
onMouseMove: handleMouseMove
},
renderLabel(item)
)
);
});
}
}, {
key: 'renderMenu',
value: function renderMenu() {
var _this5 = this;
if (!this.props.dropdown || this.props.disabled) {
return null;
}
var _state3 = this.state,
isReady = _state3.isReady,
options = _state3.options;
if (options && options.length) {
return _react2.default.createElement(
'ul',
{
ref: function ref(node) {
_this5.menu = node;
},
className: (0, _classnames2.default)(_index2.default['dropdown-menu'], _defineProperty({}, _index2.default.ready, isReady))
},
this.renderMenuOptions()
);
} else if (this.props.noOptionsText) {
return _react2.default.createElement(
'div',
{
ref: function ref(node) {
_this5.menu = node;
},
className: (0, _classnames2.default)(_index2.default['dropdown-nooptions'], _defineProperty({}, _index2.default.ready, isReady))
},
this.props.noOptionsText
);
} else {
return null;
}
}
}, {
key: 'renderValue',
value: function renderValue() {
var _props3 = this.props,
placeholder = _props3.placeholder,
children = _props3.children,
customValueRenderer = _props3.customValueRenderer;
var selectedOption = this.getSelectedOptions();
var el = children;
if (selectedOption.length === 0) {
if (placeholder) {
el = _react2.default.createElement(
'span',
null,
placeholder
);
}
} else {
var renderLabel = customValueRenderer || this.getOptionLabel;
el = renderLabel(selectedOption[0]);
}
return _react2.default.createElement(
'div',
{ className: _index2.default['select-value-zone'] },
el
);
}
}, {
key: 'renderArrow',
value: function renderArrow() {
var _this6 = this;
return _react2.default.createElement(
'div',
{
ref: function ref(node) {
_this6.caret = node;
},
className: (0, _classnames2.default)(_index2.default['select-arrow-zone'])
},
_react2.default.createElement('span', { className: _index2.default.caret })
);
}
}, {
key: 'render',
value: function render() {
var _this7 = this;
var _props4 = this.props,
className = _props4.className,
hover = _props4.hover,
active = _props4.active,
focus = _props4.focus,
disabled = _props4.disabled,
btnSize = _props4.btnSize,
dropdownStyle = _props4.dropdownStyle;
var _actions$dropdown = this.actions.dropdown,
handleKeyDown = _actions$dropdown.handleKeyDown,
handleMouseDown = _actions$dropdown.handleMouseDown,
handleBlur = _actions$dropdown.handleBlur;
var isOpen = this.state.isOpen;
var isSplitLayout = dropdownStyle === 'split';
return _react2.default.createElement(
_ButtonGroup2.default,
{
btnSize: btnSize,
className: (0, _classnames2.default)(className, _index2.default.dropdown, _defineProperty({}, _index2.default['dropdown-single'], dropdownStyle === 'single'), _defineProperty({}, _index2.default['dropdown-split'], isSplitLayout), _defineProperty({}, _index2.default['dropdown-text'], dropdownStyle === 'text'), _defineProperty({}, _index2.default.dropup, isOpen))
},
isSplitLayout && _react2.default.createElement(
'button',
{
type: 'button',
className: (0, _classnames2.default)(_index2.default.btn, _index2.default['btn-border']),
disabled: !!disabled
},
this.renderValue()
),
_react2.default.createElement(
'button',
{
ref: function ref(node) {
_this7.btnDropdown = node;
},
type: 'button',
className: (0, _classnames2.default)(_index2.default.btn, _index2.default['dropdown-toggle'], _defineProperty({}, _index2.default['btn-border'], dropdownStyle === 'single' || isSplitLayout), _defineProperty({}, _index2.default['btn-link'], dropdownStyle === 'text'), _defineProperty({}, _index2.default.hover, hover || isOpen), _defineProperty({}, _index2.default.active, active), _defineProperty({}, _index2.default.focus, focus)),
disabled: !!disabled,
onKeyDown: handleKeyDown,
onMouseDown: handleMouseDown,
onBlur: handleBlur
},
!isSplitLayout && this.renderValue(),
this.renderArrow()
),
this.renderMenu()
);
}
}]);
return ButtonDropdown;
}(_react.Component);
ButtonDropdown.propTypes = {
active: _react.PropTypes.bool,
btnSize: _react.PropTypes.oneOf(['lg', 'md', 'sm', 'xs', 'large', 'medium', 'small', 'extra-small']),
disabled: _react.PropTypes.bool,
focus: _react.PropTypes.bool,
hover: _react.PropTypes.bool,
dropdown: _react.PropTypes.bool,
dropdownStyle: _react.PropTypes.oneOf(['single', 'split', 'text']),
value: _react.PropTypes.any, // initial field value
options: _react.PropTypes.array, // array of options
placeholder: _react.PropTypes.string, // field placeholder, displayed when there's no value
noOptionsText: _react.PropTypes.oneOfType([// text displayed when there are no any options
_react2.default.PropTypes.string, _react2.default.PropTypes.noe]),
fixedWidth: _react.PropTypes.bool, // the width of dropdown and menu are consistent
customValueRenderer: _react2.default.PropTypes.func, // customValueRenderer: function (option) {}
customOptionRenderer: _react2.default.PropTypes.func, // renders a custom menu with options
onChange: _react.PropTypes.func // onChange handler: function (newValue) {}
};
ButtonDropdown.defaultProps = {
hover: false,
active: false,
focus: false,
disabled: false,
block: false,
dropdown: true,
iconOnly: false,
btnSize: 'md',
btnStyle: 'default',
dropdownStyle: 'single',
fixedWidth: false,
noOptionsText: 'No options found'
};
exports.default = ButtonDropdown;
/***/ }),
/* 4 */
/***/ function(module, exports, __webpack_require__) {
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
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 _classnames = __webpack_require__(2);
var _classnames2 = _interopRequireDefault(_classnames);
var _react = __webpack_require__(3);
var _react2 = _interopRequireDefault(_react);
var _index = __webpack_require__(5);
var _index2 = _interopRequireDefault(_index);
var _ButtonGroup = __webpack_require__(9);
var _ButtonGroup2 = _interopRequireDefault(_ButtonGroup);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
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 ButtonDropdown = function (_Component) {
_inherits(ButtonDropdown, _Component);
function ButtonDropdown() {
var _ref;
var _temp, _this, _ret;
_classCallCheck(this, ButtonDropdown);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ButtonDropdown.__proto__ || Object.getPrototypeOf(ButtonDropdown)).call.apply(_ref, [this].concat(args))), _this), _this.state = _this.getDefaultState(), _this.actions = {
dropdown: {
handleKeyDown: function handleKeyDown(e) {
if (!_this.props.dropdown || _this.props.disabled) {
return;
}
var isOpen = _this.state.isOpen;
switch (e.keyCode) {
case 13:
// enter
if (!isOpen) {
return;
}
_this.selectValue(_this.state.focusedOption);
break;
case 27:
// escape
if (isOpen) {
_this.closeMenu();
}
break;
case 38:
// up
_this.focusPreviousOption();
break;
case 40:
// down
_this.focusNextOption();
break;
default:
return;
}
e.stopPropagation();
e.preventDefault();
_this.focusButton();
},
handleMouseDown: function handleMouseDown(e) {
if (!_this.props.dropdown || _this.props.disabled) {
return;
}
_this.setState({
isOpen: !_this.state.isOpen
}, function () {
if (_this.state.isOpen) {
_this.focusAdjacentOption();
}
_this.focusButton();
});
// prevent default event handlers
e.stopPropagation();
e.preventDefault();
},
handleBlur: function handleBlur(e) {
if (!_this.props.dropdown || _this.props.disabled) {
return;
}
_this.closeMenu();
}
},
menu: {
handleOptionChanged: function handleOptionChanged(e) {
var el = e.currentTarget;
var index = el.dataset.key;
var selectedOption = _this.state.options[index];
_this.selectValue(selectedOption);
e.stopPropagation();
e.preventDefault();
},
handleMouseEnter: function handleMouseEnter(e) {
_this.focusOption(e);
},
handleMouseMove: function handleMouseMove(e) {
_this.focusOption(e);
}
}
}, _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(ButtonDropdown, [{
key: 'componentDidMount',
value: function componentDidMount() {
var _props = this.props,
dropdown = _props.dropdown,
fixedWidth = _props.fixedWidth,
dropdownStyle = _props.dropdownStyle;
if (dropdown && fixedWidth) {
var dropdownWidth = this.btnDropdown.parentElement.offsetWidth;
var menuWidth = this.menu.offsetWidth;
var caretWidth = dropdownStyle === 'split' ? this.btnDropdown.offsetWidth : this.caret.offsetWidth;
var newWidth = 0;
menuWidth += caretWidth;
if (menuWidth > dropdownWidth) {
newWidth = menuWidth;
} else if (dropdownWidth > menuWidth) {
newWidth = dropdownWidth;
}
if (newWidth > 0) {
this.resize({
width: newWidth
});
}
this.setState({
isReady: true
});
}
}
}, {
key: 'resize',
value: function resize(size) {
if (!size) {
return;
}
this.btnDropdown.parentElement.style.width = size.width + 'px';
this.menu.style.width = size.width + 'px';
}
}, {
key: 'getDefaultState',
value: function getDefaultState() {
var _props2 = this.props,
value = _props2.value,
dropdown = _props2.dropdown,
options = _props2.options,
fixedWidth = _props2.fixedWidth;
var focusedOption = void 0;
var initItems = void 0;
if (dropdown && Array.isArray(options)) {
(function () {
var isChecked = void 0;
// Get default selected option(s) for renderValue function
initItems = options.map(function (option, i) {
isChecked = option.value === value;
var tempObj = {
value: option.value,
label: option.label,
id: 'option_item_' + i,
checked: isChecked
};
return tempObj;
});
focusedOption = initItems.find(function (item) {
return item.checked === true;
});
})();
}
return {
isOpen: false,
focusedOption: focusedOption,
options: initItems,
isReady: !fixedWidth // 'isReady' will affect initialization display of menu
};
}
}, {
key: 'closeMenu',
value: function closeMenu() {
this.setState({
isOpen: false
});
}
}, {
key: 'focusButton',
value: function focusButton() {
this.btnDropdown.focus();
}
}, {
key: 'focusOption',
value: function focusOption(event) {
var index = event.currentTarget.dataset.key;
var option = this.props.options[index];
this.setState({
focusedOption: option
});
event.stopPropagation();
event.preventDefault();
}
}, {
key: 'focusNextOption',
value: function focusNextOption() {
this.focusAdjacentOption('next');
}
}, {
key: 'focusPreviousOption',
value: function focusPreviousOption() {
this.focusAdjacentOption('previous');
}
}, {
key: 'focusAdjacentOption',
value: function focusAdjacentOption(dir) {
var options = this.state.options;
var _state = this.state,
focusedOption = _state.focusedOption,
isOpen = _state.isOpen;
if (!isOpen) {
this.setState({
isOpen: true,
focusedOption: focusedOption || options[dir === 'next' ? 0 : options.length - 1]
});
return;
}
if (!Array.isArray(options)) {
return;
}
var focusedIndex = -1;
focusedIndex = options.indexOf(focusedOption);
if (dir === 'next' && focusedIndex !== -1) {
focusedIndex = (focusedIndex + 1) % options.length;
} else if (dir === 'previous') {
if (focusedIndex > 0) {
focusedIndex--;
} else {
focusedIndex = options.length - 1;
}
}
if (focusedIndex === -1) {
focusedIndex = 0;
}
this.setState({
focusedOption: options[focusedIndex]
});
}
}, {
key: 'getOptionLabel',
value: function getOptionLabel(option) {
return option.label;
}
}, {
key: 'getSelectedOptions',
value: function getSelectedOptions() {
var options = this.state.options;
var selectedOptions = [];
if (Array.isArray(options)) {
selectedOptions = options.filter(function (item) {
return item.checked === true;
});
}
return selectedOptions;
}
}, {
key: 'selectValue',
value: function selectValue(item) {
var _this2 = this;
this.focusButton();
this.setState({
isOpen: false
}, function () {
_this2.updateValue(item);
});
}
}, {
key: 'updateValue',
value: function updateValue(option) {
var newOptions = this.state.options;
var prevSelectedOption = newOptions.find(function (item) {
return item.checked === true;
});
if (prevSelectedOption) {
prevSelectedOption.checked = false;
}
var selectedIndex = newOptions.findIndex(function (item) {
return item.value === option.value;
});
newOptions[selectedIndex].checked = true;
this.setValue(newOptions);
}
}, {
key: 'setValue',
value: function setValue(newOptions) {
var _this3 = this;
this.setState({
options: newOptions
}, function () {
var value = _this3.getSelectedOptions();
var returnValue = value;
if (value.length > 0) {
returnValue = value[0];
}
_this3.props.onChange(returnValue);
});
}
}, {
key: 'renderMenuOptions',
value: function renderMenuOptions() {
var _this4 = this;
var customOptionRenderer = this.props.customOptionRenderer;
var _state2 = this.state,
focusedOption = _state2.focusedOption,
options = _state2.options;
var _actions$menu = this.actions.menu,
handleOptionChanged = _actions$menu.handleOptionChanged,
handleMouseEnter = _actions$menu.handleMouseEnter,
handleMouseMove = _actions$menu.handleMouseMove;
var defaultMenuOption = function defaultMenuOption(item) {
return _this4.getOptionLabel(item);
};
var renderLabel = customOptionRenderer || defaultMenuOption;
return options.map(function (item, key) {
return _react2.default.createElement(
'li',
{ key: 'option_' + key },
_react2.default.createElement(
'a',
{
className: (0, _classnames2.default)(_defineProperty({}, _index2.default.focus, item === focusedOption)),
'data-key': key,
onMouseDown: handleOptionChanged,
onMouseEnter: handleMouseEnter,
onMouseMove: handleMouseMove
},
renderLabel(item)
)
);
});
}
}, {
key: 'renderMenu',
value: function renderMenu() {
var _this5 = this;
if (!this.props.dropdown || this.props.disabled) {
return null;
}
var _state3 = this.state,
isReady = _state3.isReady,
options = _state3.options;
if (options && options.length) {
return _react2.default.createElement(
'ul',
{
ref: function ref(node) {
_this5.menu = node;
},
className: (0, _classnames2.default)(_index2.default['dropdown-menu'], _defineProperty({}, _index2.default.ready, isReady))
},
this.renderMenuOptions()
);
} else if (this.props.noOptionsText) {
return _react2.default.createElement(
'div',
{
ref: function ref(node) {
_this5.menu = node;
},
className: (0, _classnames2.default)(_index2.default['dropdown-nooptions'], _defineProperty({}, _index2.default.ready, isReady))
},
this.props.noOptionsText
);
} else {
return null;
}
}
}, {
key: 'renderValue',
value: function renderValue() {
var _props3 = this.props,
placeholder = _props3.placeholder,
children = _props3.children,
customValueRenderer = _props3.customValueRenderer;
var selectedOption = this.getSelectedOptions();
var el = children;
if (selectedOption.length === 0) {
if (placeholder) {
el = _react2.default.createElement(
'span',
null,
placeholder
);
}
} else {
var renderLabel = customValueRenderer || this.getOptionLabel;
el = renderLabel(selectedOption[0]);
}
return _react2.default.createElement(
'div',
{ className: _index2.default['select-value-zone'] },
el
);
}
}, {
key: 'renderArrow',
value: function renderArrow() {
var _this6 = this;
return _react2.default.createElement(
'div',
{
ref: function ref(node) {
_this6.caret = node;
},
className: (0, _classnames2.default)(_index2.default['select-arrow-zone'])
},
_react2.default.createElement('span', { className: _index2.default.caret })
);
}
}, {
key: 'render',
value: function render() {
var _this7 = this;
var _props4 = this.props,
className = _props4.className,
hover = _props4.hover,
active = _props4.active,
focus = _props4.focus,
disabled = _props4.disabled,
btnSize = _props4.btnSize,
dropdownStyle = _props4.dropdownStyle;
var _actions$dropdown = this.actions.dropdown,
handleKeyDown = _actions$dropdown.handleKeyDown,
handleMouseDown = _actions$dropdown.handleMouseDown,
handleBlur = _actions$dropdown.handleBlur;
var isOpen = this.state.isOpen;
var isSplitLayout = dropdownStyle === 'split';
return _react2.default.createElement(
_ButtonGroup2.default,
{
btnSize: btnSize,
className: (0, _classnames2.default)(className, _index2.default.dropdown, _defineProperty({}, _index2.default['dropdown-single'], dropdownStyle === 'single'), _defineProperty({}, _index2.default['dropdown-split'], isSplitLayout), _defineProperty({}, _index2.default['dropdown-text'], dropdownStyle === 'text'), _defineProperty({}, _index2.default.dropup, isOpen))
},
isSplitLayout && _react2.default.createElement(
'button',
{
type: 'button',
className: (0, _classnames2.default)(_index2.default.btn, _index2.default['btn-border']),
disabled: !!disabled
},
this.renderValue()
),
_react2.default.createElement(
'button',
{
ref: function ref(node) {
_this7.btnDropdown = node;
},
type: 'button',
className: (0, _classnames2.default)(_index2.default.btn, _index2.default['dropdown-toggle'], _defineProperty({}, _index2.default['btn-border'], dropdownStyle === 'single' || isSplitLayout), _defineProperty({}, _index2.default['btn-link'], dropdownStyle === 'text'), _defineProperty({}, _index2.default.hover, hover || isOpen), _defineProperty({}, _index2.default.active, active), _defineProperty({}, _index2.default.focus, focus)),
disabled: !!disabled,
onKeyDown: handleKeyDown,
onMouseDown: handleMouseDown,
onBlur: handleBlur
},
!isSplitLayout && this.renderValue(),
this.renderArrow()
),
this.renderMenu()
);
}
}]);
return ButtonDropdown;
}(_react.Component);
ButtonDropdown.propTypes = {
active: _react.PropTypes.bool,
btnSize: _react.PropTypes.oneOf(['lg', 'md', 'sm', 'xs', 'large', 'medium', 'small', 'extra-small']),
disabled: _react.PropTypes.bool,
focus: _react.PropTypes.bool,
hover: _react.PropTypes.bool,
dropdown: _react.PropTypes.bool,
dropdownStyle: _react.PropTypes.oneOf(['single', 'split', 'text']),
value: _react.PropTypes.any, // initial field value
options: _react.PropTypes.array, // array of options
placeholder: _react.PropTypes.string, // field placeholder, displayed when there's no value
noOptionsText: _react.PropTypes.oneOfType([// text displayed when there are no any options
_react2.default.PropTypes.string, _react2.default.PropTypes.noe]),
fixedWidth: _react.PropTypes.bool, // the width of dropdown and menu are consistent
customValueRenderer: _react2.default.PropTypes.func, // customValueRenderer: function (option) {}
customOptionRenderer: _react2.default.PropTypes.func, // renders a custom menu with options
onChange: _react.PropTypes.func // onChange handler: function (newValue) {}
};
ButtonDropdown.defaultProps = {
hover: false,
active: false,
focus: false,
disabled: false,
block: false,
dropdown: true,
iconOnly: false,
btnSize: 'md',
btnStyle: 'default',
dropdownStyle: 'single',
fixedWidth: false,
noOptionsText: 'No options found'
};
exports.default = ButtonDropdown;
"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 _classnames = __webpack_require__(1);
var _classnames2 = _interopRequireDefault(_classnames);
var _react = __webpack_require__(2);
var _react2 = _interopRequireDefault(_react);
var _index = __webpack_require__(0);
var _index2 = _interopRequireDefault(_index);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return 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; }
var ButtonGroup = function ButtonGroup(_ref) {
var _classes;
var className = _ref.className,
btnSize = _ref.btnSize,
vertical = _ref.vertical,
props = _objectWithoutProperties(_ref, ['className', 'btnSize', 'vertical']);
var classes = (_classes = {}, _defineProperty(_classes, _index2.default.btnGroup, true), _defineProperty(_classes, _index2.default.btnGroupLg, btnSize === 'large' || btnSize === 'lg'), _defineProperty(_classes, _index2.default.btnGroupMd, btnSize === 'medium' || btnSize === 'md'), _defineProperty(_classes, _index2.default.btnGroupSm, btnSize === 'small' || btnSize === 'sm'), _defineProperty(_classes, _index2.default.btnGroupXs, btnSize === 'extra-small' || btnSize === 'xs'), _defineProperty(_classes, _index2.default.btnGroupVertical, vertical), _classes);
return _react2.default.createElement('div', _extends({}, props, {
className: (0, _classnames2.default)(className, classes)
}));
};
ButtonGroup.propTypes = {
btnSize: _react.PropTypes.oneOf(['lg', 'md', 'sm', 'xs', 'large', 'medium', 'small', 'extra-small']),
vertical: _react.PropTypes.bool
};
ButtonGroup.defaultProps = {
btnSize: 'md', // Defaults to medium size
vertical: false
};
exports.default = ButtonGroup;
/***/ }),
/* 5 */
/***/ function(module, exports) {
/***/ (function(module, exports, __webpack_require__) {
// removed by extract-text-webpack-plugin
module.exports = {"btn":"buttons---btn---2jZHN","active":"buttons---active---2-a32","focus":"buttons---focus---1kVJZ","hover":"buttons---hover---42FF2","disabled":"buttons---disabled---eCY9b","btn-icon-only":"buttons---btn-icon-only---NYhkW","btnIconOnly":"buttons---btn-icon-only---NYhkW","btn-default":"buttons---btn-default---1wWXD","btnDefault":"buttons---btn-default---1wWXD","btn-primary":"buttons---btn-primary---Wp1wb","btnPrimary":"buttons---btn-primary---Wp1wb","btn-danger":"buttons---btn-danger---1UUqU","btnDanger":"buttons---btn-danger---1UUqU","btn-border":"buttons---btn-border---1O58b","btnBorder":"buttons---btn-border---1O58b","btn-link":"buttons---btn-link---1xwS4","btnLink":"buttons---btn-link---1xwS4","btn-lg":"buttons---btn-lg---2xtUV","btnLg":"buttons---btn-lg---2xtUV","btn-group-lg":"buttons---btn-group-lg---3C8An","btnGroupLg":"buttons---btn-group-lg---3C8An","btn-md":"buttons---btn-md---HRR_F","btnMd":"buttons---btn-md---HRR_F","btn-group-md":"buttons---btn-group-md---3FQVP","btnGroupMd":"buttons---btn-group-md---3FQVP","btn-sm":"buttons---btn-sm---3cNnY","btnSm":"buttons---btn-sm---3cNnY","btn-group-sm":"buttons---btn-group-sm---3_QLf","btnGroupSm":"buttons---btn-group-sm---3_QLf","btn-xs":"buttons---btn-xs---2eEDQ","btnXs":"buttons---btn-xs---2eEDQ","btn-group-xs":"buttons---btn-group-xs---1c4pb","btnGroupXs":"buttons---btn-group-xs---1c4pb","btn-block":"buttons---btn-block---1nSNV","btnBlock":"buttons---btn-block---1nSNV","btn-group":"buttons---btn-group---1jaDo","btnGroup":"buttons---btn-group---1jaDo","btn-group-vertical":"buttons---btn-group-vertical---3Lm1e","btnGroupVertical":"buttons---btn-group-vertical---3Lm1e","btn-toolbar":"buttons---btn-toolbar---2-GfJ","btnToolbar":"buttons---btn-toolbar---2-GfJ","input-group":"buttons---input-group---1T18I","inputGroup":"buttons---input-group---1T18I","dropdown-toggle":"buttons---dropdown-toggle---vMtjL","dropdownToggle":"buttons---dropdown-toggle---vMtjL","open":"buttons---open---1ju75","btn-group-justified":"buttons---btn-group-justified---3qB9u","btnGroupJustified":"buttons---btn-group-justified---3qB9u","dropdown-menu":"buttons---dropdown-menu---1fkH0","dropdownMenu":"buttons---dropdown-menu---1fkH0","dropdown":"buttons---dropdown---1yvIZ","select-value-zone":"buttons---select-value-zone---1WDhx","selectValueZone":"buttons---select-value-zone---1WDhx","select-arrow-zone":"buttons---select-arrow-zone---2AKJW","selectArrowZone":"buttons---select-arrow-zone---2AKJW","caret":"buttons---caret---3CkEt","dropdown-nooptions":"buttons---dropdown-nooptions---Z3N2g","dropdownNooptions":"buttons---dropdown-nooptions---Z3N2g","ready":"buttons---ready---m-e-B","dropup":"buttons---dropup---30DnN","dropdown-split":"buttons---dropdown-split---3C0pZ","dropdownSplit":"buttons---dropdown-split---3C0pZ"};
"use strict";
/***/ },
/* 6 */,
/* 7 */,
/* 8 */,
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 _class, _temp;
var _classnames = __webpack_require__(1);
var _classnames2 = _interopRequireDefault(_classnames);
var _react = __webpack_require__(2);
var _react2 = _interopRequireDefault(_react);
var _reactAddonsShallowCompare = __webpack_require__(7);
var _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare);
var _warning = __webpack_require__(8);
var _warning2 = _interopRequireDefault(_warning);
var _ButtonDropdown = __webpack_require__(3);
var _ButtonDropdown2 = _interopRequireDefault(_ButtonDropdown);
var _index = __webpack_require__(0);
var _index2 = _interopRequireDefault(_index);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return 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 Button = (_temp = _class = function (_Component) {
_inherits(Button, _Component);
function Button() {
_classCallCheck(this, Button);
return _possibleConstructorReturn(this, (Button.__proto__ || Object.getPrototypeOf(Button)).apply(this, arguments));
}
_createClass(Button, [{
key: 'shouldComponentUpdate',
value: function shouldComponentUpdate(nextProps, nextState) {
return (0, _reactAddonsShallowCompare2.default)(this, nextProps, nextState);
}
}, {
key: 'render',
value: function render() {
var _classes;
var _props = this.props,
className = _props.className,
Component = _props.componentClass,
type = _props.type,
btnSize = _props.btnSize,
btnStyle = _props.btnStyle,
active = _props.active,
hover = _props.hover,
focus = _props.focus,
disabled = _props.disabled,
block = _props.block,
iconOnly = _props.iconOnly,
dropdown = _props.dropdown,
dropdownToggle = _props.dropdownToggle,
props = _objectWithoutProperties(_props, ['className', 'componentClass', 'type', 'btnSize', 'btnStyle', 'active', 'hover', 'focus', 'disabled', 'block', 'iconOnly', 'dropdown', 'dropdownToggle']);
if (dropdown) {
(0, _warning2.default)(false, 'Dropdown is deprecated and will be removed in a future version. ' + 'For new dropdown component, see https://github.com/trendmicro-frontend/react-dropdown.');
return _react2.default.createElement(_ButtonDropdown2.default, this.props);
}
var classes = (_classes = {}, _defineProperty(_classes, _index2.default.btn, true), _defineProperty(_classes, _index2.default.btnLg, btnSize === 'large' || btnSize === 'lg'), _defineProperty(_classes, _index2.default.btnMd, btnSize === 'medium' || btnSize === 'md'), _defineProperty(_classes, _index2.default.btnSm, btnSize === 'small' || btnSize === 'sm'), _defineProperty(_classes, _index2.default.btnXs, btnSize === 'extra-small' || btnSize === 'xs'), _defineProperty(_classes, _index2.default.btnDefault, btnStyle === 'default'), _defineProperty(_classes, _index2.default.btnPrimary, btnStyle === 'primary'), _defineProperty(_classes, _index2.default.btnDanger, btnStyle === 'danger' || btnStyle === 'emphasis'), _defineProperty(_classes, _index2.default.btnBorder, btnStyle === 'border' || btnStyle === 'flat'), _defineProperty(_classes, _index2.default.btnLink, btnStyle === 'link'), _defineProperty(_classes, _index2.default.btnBlock, block), _defineProperty(_classes, _index2.default.btnIconOnly, iconOnly), _defineProperty(_classes, _index2.default.hover, hover), _defineProperty(_classes, _index2.default.active, active), _defineProperty(_classes, _index2.default.focus, focus), _defineProperty(_classes, _index2.default.dropdownToggle, dropdownToggle), _classes);
return _react2.default.createElement(Component, _extends({}, props, {
type: type,
className: (0, _classnames2.default)(className, classes),
disabled: disabled
}));
}
}]);
return Button;
}(_react.Component), _class.propTypes = {
componentClass: _react.PropTypes.oneOfType([_react.PropTypes.func, _react.PropTypes.string]),
type: _react.PropTypes.oneOf(['button', 'reset', 'submit']),
btnSize: _react.PropTypes.oneOf(['lg', 'md', 'sm', 'xs', 'large', 'medium', 'small', 'extra-small']),
btnStyle: _react.PropTypes.oneOf(['default', 'primary', 'danger', 'emphasis', // alias of "danger"
'border', 'flat', // alias of "border"
'link']),
active: _react.PropTypes.bool,
hover: _react.PropTypes.bool,
focus: _react.PropTypes.bool,
disabled: _react.PropTypes.bool,
block: _react.PropTypes.bool,
iconOnly: _react.PropTypes.bool,
// Dropdown is deprecated and will be removed in a future version.
dropdown: _react.PropTypes.bool,
// Apply styles for use in a Dropdown.
// This prop will be set automatically when the Button is used inside a Dropdown.
dropdownToggle: _react.PropTypes.bool
}, _class.defaultProps = {
componentClass: 'button',
type: 'button',
btnSize: 'md',
btnStyle: 'default',
active: false,
hover: false,
focus: false,
disabled: false,
block: false,
iconOnly: false,
dropdown: false, // deprecated
dropdownToggle: false
}, _temp);
exports.default = Button;
/***/ }),
/* 6 */
/***/ (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 _classnames = __webpack_require__(1);
var _classnames2 = _interopRequireDefault(_classnames);
var _react = __webpack_require__(2);
var _react2 = _interopRequireDefault(_react);
var _index = __webpack_require__(0);
var _index2 = _interopRequireDefault(_index);
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; }
var ButtonToolbar = function ButtonToolbar(_ref) {
var className = _ref.className,
props = _objectWithoutProperties(_ref, ['className']);
return _react2.default.createElement('div', _extends({}, props, {
className: (0, _classnames2.default)(className, _index2.default.btnToolbar)
}));
};
exports.default = ButtonToolbar;
/***/ }),
/* 7 */
/***/ (function(module, exports) {
module.exports = require("react-addons-shallow-compare");
/***/ }),
/* 8 */
/***/ (function(module, exports) {
module.exports = require("warning");
/***/ }),
/* 9 */
/***/ function(module, exports, __webpack_require__) {
/***/ (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 _classnames = __webpack_require__(2);
var _classnames2 = _interopRequireDefault(_classnames);
var _react = __webpack_require__(3);
var _react2 = _interopRequireDefault(_react);
var _index = __webpack_require__(5);
var _index2 = _interopRequireDefault(_index);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return 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; }
var ButtonGroup = function ButtonGroup(_ref) {
var className = _ref.className,
btnSize = _ref.btnSize,
vertical = _ref.vertical,
props = _objectWithoutProperties(_ref, ['className', 'btnSize', 'vertical']);
return _react2.default.createElement('div', _extends({}, props, {
className: (0, _classnames2.default)(className, _index2.default['btn-group'], _defineProperty({}, _index2.default['btn-group-lg'], btnSize === 'large' || btnSize === 'lg'), _defineProperty({}, _index2.default['btn-group-md'], btnSize === 'medium' || btnSize === 'md'), _defineProperty({}, _index2.default['btn-group-sm'], btnSize === 'small' || btnSize === 'sm'), _defineProperty({}, _index2.default['btn-group-xs'], btnSize === 'extra-small' || btnSize === 'xs'), _defineProperty({}, _index2.default['btn-group-vertical'], vertical))
}));
};
ButtonGroup.propTypes = {
btnSize: _react.PropTypes.oneOf(['lg', 'md', 'sm', 'xs', 'large', 'medium', 'small', 'extra-small']),
vertical: _react.PropTypes.bool
};
ButtonGroup.defaultProps = {
btnSize: 'md', // Defaults to medium size
vertical: false
};
exports.default = ButtonGroup;
"use strict";
/***/ },
/* 10 */
/***/ 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 _classnames = __webpack_require__(2);
var _classnames2 = _interopRequireDefault(_classnames);
var _react = __webpack_require__(3);
var _react2 = _interopRequireDefault(_react);
var _index = __webpack_require__(5);
var _index2 = _interopRequireDefault(_index);
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; }
var ButtonToolbar = function ButtonToolbar(_ref) {
var className = _ref.className,
props = _objectWithoutProperties(_ref, ['className']);
return _react2.default.createElement('div', _extends({}, props, {
className: (0, _classnames2.default)(className, _index2.default['btn-toolbar'])
}));
};
exports.default = ButtonToolbar;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ButtonDropdown = exports.ButtonToolbar = exports.ButtonGroup = exports.Button = undefined;
/***/ }
var _Button2 = __webpack_require__(5);
var _Button3 = _interopRequireDefault(_Button2);
var _ButtonGroup2 = __webpack_require__(4);
var _ButtonGroup3 = _interopRequireDefault(_ButtonGroup2);
var _ButtonToolbar2 = __webpack_require__(6);
var _ButtonToolbar3 = _interopRequireDefault(_ButtonToolbar2);
var _ButtonDropdown2 = __webpack_require__(3);
var _ButtonDropdown3 = _interopRequireDefault(_ButtonDropdown2);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.Button = _Button3.default;
exports.ButtonGroup = _ButtonGroup3.default;
exports.ButtonToolbar = _ButtonToolbar3.default;
exports.ButtonDropdown = _ButtonDropdown3.default;
/***/ })
/******/ ]);
//# sourceMappingURL=index.js.map

42

package.json
{
"name": "@trendmicro/react-buttons",
"version": "0.4.7",
"version": "0.5.0",
"description": "Trend Micro Components: React Buttons",

@@ -57,28 +57,30 @@ "main": "lib/index.js",

"dependencies": {
"@trendmicro/react-loader": "^0.1.0",
"classnames": "^2.2.5",
"react-addons-shallow-compare": "^0.14.0 || ^15.0.0"
"react-addons-shallow-compare": "^0.14.0 || ^15.0.0",
"warning": "^3.0.0"
},
"devDependencies": {
"babel-cli": "~6.18.0",
"babel-core": "~6.18.2",
"@trendmicro/react-loader": "^0.5.0",
"babel-cli": "~6.22.2",
"babel-core": "~6.22.1",
"babel-eslint": "~7.1.1",
"babel-loader": "~6.2.9",
"babel-loader": "~6.2.10",
"babel-plugin-transform-decorators-legacy": "~1.3.4",
"babel-preset-es2015": "~6.18.0",
"babel-preset-react": "~6.16.0",
"babel-preset-stage-0": "~6.16.0",
"clean-css": "~3.4.21",
"babel-preset-es2015": "~6.22.0",
"babel-preset-react": "~6.22.0",
"babel-preset-stage-0": "~6.22.0",
"clean-css": "~4.0.3",
"clean-css-cli": "~4.0.0",
"coveralls": "~2.11.15",
"css-loader": "~0.26.1",
"eslint": "~3.11.1",
"eslint-config-trendmicro": "~0.5.0",
"eslint": "~3.14.1",
"eslint-config-trendmicro": "~0.5.1",
"eslint-loader": "~1.6.1",
"eslint-plugin-import": "~2.2.0",
"eslint-plugin-jsx-a11y": "~2.2.3",
"eslint-plugin-react": "~6.8.0",
"extract-text-webpack-plugin": "~1.0.1",
"html-webpack-plugin": "~2.24.1",
"eslint-plugin-react": "~6.9.0",
"extract-text-webpack-plugin": "^2.0.0-rc.3",
"file-loader": "^0.10.0",
"html-webpack-plugin": "~2.28.0",
"http-server": "~0.9.0",
"json-loader": "~0.5.4",
"nib": "~1.1.2",

@@ -88,9 +90,11 @@ "react": "^0.14.0 || ^15.0.0",

"style-loader": "~0.13.1",
"stylint": "~1.5.7",
"stylint": "~1.5.9",
"stylint-loader": "~1.0.0",
"stylus-loader": "~2.4.0",
"tap": "~8.0.1",
"webpack": "~1.14.0",
"tap": "~10.0.0",
"trendmicro-ui": "^0.2.0",
"url-loader": "^0.5.7",
"webpack": "~2.2.1",
"webpack-dev-server": "~1.16.2"
}
}

102

README.md

@@ -20,3 +20,3 @@ # react-buttons [![build status](https://travis-ci.org/trendmicro-frontend/react-buttons.svg?branch=master)](https://travis-ci.org/trendmicro-frontend/react-buttons) [![Coverage Status](https://coveralls.io/repos/github/trendmicro-frontend/react-buttons/badge.svg?branch=master)](https://coveralls.io/github/trendmicro-frontend/react-buttons?branch=master)

```js
import { Button, ButtonGroup, ButtonToolbar, ButtonDropdown } from '@trendmicro/react-buttons';
import { Button, ButtonGroup, ButtonToolbar } from '@trendmicro/react-buttons';

@@ -188,104 +188,4 @@ // Be sure to include styles at some point, probably during your bootstraping

### Dropdown Buttons
#### Single
```js
<Button
dropdown
placeholder="Select..."
options={[
{ label: 'Action', value: 'v1' },
{ label: 'Another action', value: 'v2' },
{ label: 'Something else here', value: 'v3' }
]}
onChange={(selectedOption) => {
if (selectedOption) {
console.log('label =' + selectedOption.label + ', value = ' + selectedOption.value);
}
}}
/>
```
#### Split
```js
<Button
dropdown
dropdownStyle="split"
placeholder="Select..."
options={[
{ label: 'Action', value: 'v1' },
{ label: 'Another action', value: 'v2' },
{ label: 'Something else here', value: 'v3' }
]}
/>
```
#### Fixed width
```js
<Button
dropdown
placeholder="Select..."
options={[
{ label: 'Action', value: 'v1' },
{ label: 'Another action', value: 'v2' },
{ label: 'Something else here', value: 'v3' }
]}
value="v1"
fixedWidth={true}
/>
```
#### Text
```js
<Button
dropdown
dropdownStyle="text"
options={[
{ label: 'Action', value: 'v1' },
{ label: 'Another action', value: 'v2' },
{ label: 'Something else here', value: 'v3' }
]}
>
All Devices
</Button>
```
#### Icon
```js
<Button
dropdown
dropdownStyle="text"
options={[
{ label: 'Action', value: 'v1' },
{ label: 'Another action', value: 'v2' },
{ label: 'Something else here', value: 'v3' }
]}
customValueRenderer={(option) => {
return (
<div>
<i className="fa fa-database" />
<span>{option.label}</span>
</div>
);
}}
>
All Devices
</Button>
```
#### Dropdown Sizes
```js
<Button btnSize="large" dropdown>Large</Button>
<Button btnSize="medium" dropdown>Default</Button>
<Button btnSize="small" dropdown>Small</Button>
<Button btnSize="extra-small" dropdown>Extra Small</Button>
```
## License
MIT
dist/react-buttons.css

Sorry, the diff of this file is not supported yet

dist/react-buttons.min.css

Sorry, the diff of this file is not supported yet

lib/index.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc