@6thquake/react-material
Version:
React components that implement Google's Material Design.
434 lines (365 loc) • 13.7 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _SyncSelect = _interopRequireDefault(require("./SyncSelect"));
var _Pagination = _interopRequireDefault(require("../Pagination"));
var _AsyncSelectFilter = _interopRequireDefault(require("./AsyncSelectFilter"));
var _Divider = _interopRequireDefault(require("../Divider"));
var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
var _ArrowDropDown = _interopRequireDefault(require("../internal/svg-icons/ArrowDropDown"));
var _Input = _interopRequireDefault(require("../Input"));
var _yellow = _interopRequireDefault(require("../colors/yellow"));
/**
* @ignore - do not document.
*/
var styles = function styles(theme) {
return {
selectMenu: {
whiteSpace: 'pre-wrap'
},
root: {
width: '100%'
},
icon: {
color: theme.palette.grey[300]
},
inputText: {
color: theme.palette.common.white,
'&$disabled': {
color: theme.palette.grey[200]
}
},
underline: {
'&:after': {
borderBottomColor: _yellow.default[500]
},
'&:before': {
borderBottomColor: theme.palette.grey[300]
} // '&$disabled:before': {
// borderBottomColor: theme.palette.grey[200],
// },
// '&:hover:not($disabled):not($focused):not($error):before': {
// borderBottomColor: 'red',
// },
}
};
};
var Select =
/*#__PURE__*/
function (_Component) {
(0, _inherits2.default)(Select, _Component);
function Select(props) {
var _this;
(0, _classCallCheck2.default)(this, Select);
_this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Select).call(this, props));
_this.state = {
paginationProps: {
page: 0,
rowsPerPage: 5,
count: 0
},
text: '',
optionsArray: []
};
return _this;
}
(0, _createClass2.default)(Select, [{
key: "onChangePage",
value: function onChangePage(i) {
var _this2 = this;
this.setState({
paginationProps: (0, _extends2.default)({}, this.state.paginationProps, {
page: i
})
}, function () {
var op = _this2.menuItems(_this2.state.text);
var start = _this2.state.paginationProps.page * _this2.state.paginationProps.rowsPerPage;
var end = (_this2.state.paginationProps.page + 1) * _this2.state.paginationProps.rowsPerPage > op.length ? undefined : (_this2.state.paginationProps.page + 1) * _this2.state.paginationProps.rowsPerPage;
_this2.setState({
optionsArray: op.slice(start, end)
});
});
}
}, {
key: "onfilter",
value: function onfilter(e) {
var _this3 = this;
var op = this.menuItems(e.target.value);
this.setState({
text: e.target.value,
paginationProps: (0, _extends2.default)({}, this.state.paginationProps, {
page: 0,
count: op.length
})
}, function () {
var op = _this3.menuItems(_this3.state.text);
var start = _this3.state.paginationProps.page * _this3.state.paginationProps.rowsPerPage;
var end = (_this3.state.paginationProps.page + 1) * _this3.state.paginationProps.rowsPerPage > op.length ? undefined : (_this3.state.paginationProps.page + 1) * _this3.state.paginationProps.rowsPerPage;
_this3.setState({
optionsArray: op.slice(start, end)
});
});
}
}, {
key: "menuItems",
value: function menuItems(text) {
var children = this.props.children;
var filterData = [];
if (children) {
filterData = _react.default.Children.toArray(children).filter(function (child) {
return !text || child.props.children.toLowerCase().indexOf(text.toLowerCase()) !== -1 || child.props.value.toLowerCase().indexOf(text.toLowerCase()) !== -1;
});
return filterData;
}
return null;
}
}, {
key: "render",
value: function render() {
var _this$props = this.props,
isDark = _this$props.isDark,
children = _this$props.children,
placeholder = _this$props.placeholder,
multiple = _this$props.multiple,
classes = _this$props.classes,
disabled = _this$props.disabled,
htmlFor = _this$props.htmlFor,
onChange = _this$props.onChange,
_renderValue = _this$props.renderValue,
value = _this$props.value,
showPagination = _this$props.showPagination,
showFilter = _this$props.showFilter,
displayEmpty = _this$props.displayEmpty,
IconComponent = _this$props.IconComponent,
other = (0, _objectWithoutProperties2.default)(_this$props, ["isDark", "children", "placeholder", "multiple", "classes", "disabled", "htmlFor", "onChange", "renderValue", "value", "showPagination", "showFilter", "displayEmpty", "IconComponent"]);
var input = isDark ? _react.default.createElement(_Input.default, {
classes: {
root: classes.inputText,
underline: classes.underline
}
}) : _react.default.createElement(_Input.default, null);
var _this$state = this.state,
text = _this$state.text,
paginationProps = _this$state.paginationProps,
optionsArray = _this$state.optionsArray;
return _react.default.createElement(_SyncSelect.default, (0, _extends2.default)({}, other, {
input: input,
multiple: multiple,
value: value,
displayEmpty: displayEmpty,
onChange: onChange,
classes: (0, _extends2.default)({}, classes, {
root: classes.root,
selectMenu: classes.selectMenu,
icon: isDark && classes.icon
}),
inputProps: {
IconComponent: IconComponent,
placeholder: placeholder,
id: htmlFor
},
disabled: disabled,
renderValue: function renderValue(selected) {
if (_renderValue) {
return _renderValue(selected);
}
var displaySingle = '';
var displayMultiple = [];
_react.default.Children.map(children, function (child) {
if (!_react.default.isValidElement(child)) {
return null;
}
var selected;
if (multiple) {
if (!Array.isArray(value)) {
throw new Error('React-Material: the `value` property must be an array ' + 'when using the `Select` component with `multiple`.');
}
selected = value.indexOf(child.props.value) !== -1;
if (selected) {
displayMultiple.push(child.props.children);
}
} else {
selected = value === child.props.value;
if (selected) {
displaySingle = child.props.children;
}
}
});
return multiple ? displayMultiple.join(', ') : displaySingle;
}
}), showFilter ? _react.default.createElement(_AsyncSelectFilter.default, {
fullWidth: true,
autoFocus: true,
text: text,
placeholder: placeholder,
onChange: this.onfilter.bind(this)
}) : null, optionsArray, showPagination ? _react.default.createElement(_Divider.default, null) : null, showPagination ? _react.default.createElement(_Pagination.default, (0, _extends2.default)({}, paginationProps, {
onChangePage: this.onChangePage.bind(this)
})) : null);
}
}], [{
key: "getDerivedStateFromProps",
value: function getDerivedStateFromProps(nextProps, prevState) {
if (nextProps !== prevState.preProps) {
if (nextProps.showPagination) {
return {
paginationProps: (0, _extends2.default)({}, prevState.paginationProps, {
rowsPerPage: nextProps.rowsPerPage,
count: nextProps.children.length
}),
preProps: nextProps
};
}
return {
optionsArray: nextProps.children,
preProps: nextProps
};
}
return null;
}
}]);
return Select;
}(_react.Component);
Select.propTypes = {
/**
* If true, the width of the popover will automatically be set according to the items inside the
* menu, otherwise it will be at least the width of the select input.
*/
autoWidth: _propTypes.default.bool,
/**
* The option elements to populate the select with. Can be some MenuItem when native is false and option when native is true.
* ⚠️The MenuItem elements must be direct descendants when native is false.
*/
children: _propTypes.default.node,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css-api) below for more details.
*/
classes: _propTypes.default.object.isRequired,
/**
* Whether disabled the select
*/
disabled: _propTypes.default.bool,
/**
* If true, a value is displayed even if no items are selected.
* In order to display a meaningful value, a function should be passed to the renderValue prop which returns the value to be displayed when no items are selected. You can only use it when the native prop is false (default).
*/
displayEmpty: _propTypes.default.bool,
/**
* The icon that displays the arrow.
*/
IconComponent: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.object]),
/**
* An Input element; does not have to be a material-ui specific Input.
*/
input: _propTypes.default.element,
/**
* Attributes applied to the input element. When native is true, the attributes are applied on the select element.
*/
inputProps: _propTypes.default.object,
/**
* isDark
*/
isDark: _propTypes.default.bool,
/**
* Props applied to the Menu element.
*/
MenuProps: _propTypes.default.object,
/**
* If true, value must be an array and the menu will support multiple selections.
*/
multiple: _propTypes.default.bool,
/**
* If true, the component will be using a native select element.
*/
native: _propTypes.default.bool,
/**
* Callback function fired when a menu item is selected.
*
* Signature:
* function(event: object, child?: object) => void
* event: The event source of the callback. You can pull out the new value by accessing event.target.value.
* child: The react element that was selected when native is false (default).
*/
onChange: _propTypes.default.func,
/**
* Callback fired when the component requests to be closed. Use in controlled mode (see open).
*
* Signature:
* function(event: object) => void
* event: The event source of the callback
*/
onClose: _propTypes.default.func,
/**
* Callback fired when the component requests to be opened. Use in controlled mode (see open).
*
* Signature:
* function(event: object) => void
* event: The event source of the callback
*/
onOpen: _propTypes.default.func,
/**
* Control select open state. You can only use it when the native prop is false (default).
*/
open: _propTypes.default.bool,
/**
* placeholder
*/
placeholder: _propTypes.default.string,
/**
* Render the selected value. You can only use it when the native prop is false (default).
*
* Signature:
* function(value: any) => ReactElement
* value: The value provided to the component.
*/
renderValue: _propTypes.default.func,
/**
* row per page.
*/
rowsPerPage: _propTypes.default.number,
/**
* Props applied to the clickable div element.
*/
SelectDisplayProps: _propTypes.default.object,
/**
* If true, show the filter box
*/
showFilter: _propTypes.default.bool,
/**
* If true, show the pagination box
*/
showPagination: _propTypes.default.bool,
/**
* The input value. This prop is required when the native prop is false (default).
*/
value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]))])
};
Select.defaultProps = {
autoWidth: false,
displayEmpty: false,
rowsPerPage: 5,
IconComponent: _ArrowDropDown.default,
input: _react.default.createElement(_Input.default, null),
multiple: false,
native: false,
placeholder: 'please input something',
showFilter: false,
showPagination: false,
isDark: false
};
var _default = (0, _withStyles.default)(styles)(Select);
exports.default = _default;