d2-ui
Version:
237 lines (212 loc) • 9.09 kB
JavaScript
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; }; }();
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; }
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import List from 'material-ui/List/List';
import ListItem from 'material-ui/List/ListItem';
import TextField from 'material-ui/TextField';
import FontIcon from 'material-ui/FontIcon';
var styles = {
container: {
padding: '16px 32px 0 24px',
position: 'relative',
flex: 1
},
closeButton: {
position: 'absolute',
cursor: 'pointer',
top: '2rem',
right: '.75rem',
fontSize: '1rem',
color: '#AAA'
},
list: {
paddingTop: 0,
paddingBottom: 0,
backgroundColor: 'transparent',
marginTop: 16
},
item: {
fontSize: 14,
borderRadius: 5,
margin: '0 8px'
},
activeItem: {
fontSize: 14,
fontWeight: 700,
color: '#2196f3',
backgroundColor: '#e0e0e0',
borderRadius: 5,
margin: '0 8px'
},
sidebar: {
backgroundColor: '#f3f3f3',
overflowY: 'auto',
width: 295
}
};
var Sidebar = function (_Component) {
_inherits(Sidebar, _Component);
function Sidebar() {
var _ref;
var _temp, _this, _ret;
_classCallCheck(this, Sidebar);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Sidebar.__proto__ || Object.getPrototypeOf(Sidebar)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
currentSection: _this.props.currentSection || _this.props.sections[0] && _this.props.sections[0].key,
searchText: ''
}, _this.changeSearchText = function () {
_this.setState({ searchText: _this.searchBox.getValue() }, function () {
if (_this.props.onChangeSearchText) {
_this.props.onChangeSearchText(_this.state.searchText);
}
});
}, _this.onClear = function () {
_this.setState({ searchText: '' }, function () {
if (_this.props.onChangeSearchText) {
_this.props.onChangeSearchText(_this.state.searchText);
}
});
}, _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(Sidebar, [{
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(props) {
var _this2 = this;
if (props.currentSection) {
this.setState({ currentSection: props.currentSection });
}
if (props.searchText && props.searchText !== this.state.searchText) {
this.setState({ searchText: props.searchText }, function () {
_this2.changeSearchText();
});
}
}
}, {
key: 'setSection',
value: function setSection(key) {
// TODO: Refactor as this behavior is sort of silly. The current version of the SideBar with managed state should
// probably be a HoC and a simpler version of the header bar should be available for more dynamic scenarios.
this.props.onSectionClick(key);
if (key !== this.state.currentSection) {
this.setState({ currentSection: key });
this.props.onChangeSection(key);
}
}
}, {
key: 'clearSearchBox',
value: function clearSearchBox() {
this.setState({ searchText: '' });
}
}, {
key: 'renderSidebarButtons',
value: function renderSidebarButtons() {
if (this.props.sideBarButtons) {
return React.createElement(
'div',
{ style: { padding: '1rem 0 0' } },
this.props.sideBarButtons
);
}
return null;
}
}, {
key: 'renderSearchField',
value: function renderSearchField() {
var _this3 = this;
var d2 = this.context.d2;
if (this.props.showSearchField) {
return React.createElement(
'div',
{ style: styles.container },
React.createElement(TextField, {
hintText: this.props.searchFieldLabel ? this.props.searchFieldLabel : d2.i18n.getTranslation('search'),
style: { width: '100%' },
value: this.state.searchText,
onChange: this.changeSearchText,
ref: function ref(_ref2) {
_this3.searchBox = _ref2;
}
}),
this.state.searchText ? React.createElement(
FontIcon,
{ style: styles.closeButton, className: 'material-icons', onClick: this.onClear },
'clear'
) : undefined
);
}
return null;
}
}, {
key: 'renderSections',
value: function renderSections() {
var _this4 = this;
return React.createElement(
List,
{ style: styles.list },
this.props.sections.map(function (section) {
var listItemStyle = section.key === _this4.state.currentSection && !_this4.state.searchText ? styles.activeItem : styles.item;
var icon = typeof section.icon === 'string' || section.icon instanceof String ? React.createElement(
FontIcon,
{ className: 'material-icons' },
section.icon
) : section.icon;
return React.createElement(ListItem, {
key: section.key,
primaryText: section.label,
onClick: _this4.setSection.bind(_this4, section.key),
style: listItemStyle,
leftIcon: icon,
containerElement: section.containerElement
});
})
);
}
}, {
key: 'render',
value: function render() {
return React.createElement(
'div',
{ style: Object.assign(styles.sidebar, this.props.styles.leftBar), className: 'left-bar' },
this.renderSidebarButtons(),
this.renderSearchField(),
this.renderSections()
);
}
}]);
return Sidebar;
}(Component);
Sidebar.propTypes = {
sections: PropTypes.arrayOf(PropTypes.shape({
key: PropTypes.string,
label: PropTypes.string,
containerElement: PropTypes.object,
icon: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
})).isRequired,
currentSection: PropTypes.string,
onChangeSection: PropTypes.func,
onSectionClick: PropTypes.func,
showSearchField: PropTypes.bool,
searchFieldLabel: PropTypes.string,
onChangeSearchText: PropTypes.func,
sideBarButtons: PropTypes.element,
styles: PropTypes.shape({
leftBar: PropTypes.object
})
};
Sidebar.contextTypes = {
d2: PropTypes.object,
muiTheme: PropTypes.object
};
Sidebar.defaultProps = {
showSearchField: false,
styles: {
leftBar: {}
},
onSectionClick: function onSectionClick() {}
};
export default Sidebar;