@6thquake/react-material
Version:
React components that implement Google's Material Design.
323 lines (271 loc) • 9.8 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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
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 _MenuItem = _interopRequireDefault(require("../MenuItem"));
var _Pagination = _interopRequireDefault(require("../Pagination"));
var _AsyncSelectFilter = _interopRequireDefault(require("./AsyncSelectFilter"));
var _Divider = _interopRequireDefault(require("../Divider"));
var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
var _AsyncSelectRoot = _interopRequireDefault(require("./AsyncSelectRoot"));
var _throttle = require("../utils/throttle");
var _yellow = _interopRequireDefault(require("../colors/yellow"));
var _Input = _interopRequireDefault(require("../Input"));
/**
* @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 AsyncSelect =
/*#__PURE__*/
function (_Component) {
(0, _inherits2.default)(AsyncSelect, _Component);
function AsyncSelect(props) {
var _this;
(0, _classCallCheck2.default)(this, AsyncSelect);
_this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(AsyncSelect).call(this, props));
_this.throttlingtem = (0, _throttle.debounce)(props.onChangeFilter, props.debounceProps.wait);
return _this;
}
(0, _createClass2.default)(AsyncSelect, [{
key: "onChangePage",
value: function onChangePage(currentPage1) {
this.props.onChangePage(currentPage1);
}
}, {
key: "onChangeFilter",
value: function onChangeFilter(e) {
if (this.props.debounceAble) {
e.persist();
this.throttlingtem(e.target.value);
} else {
this.props.onChangeFilter(e.target.value);
}
}
}, {
key: "menuItems",
value: function menuItems() {
var _this$props = this.props,
options = _this$props.options,
children = _this$props.children,
mapper = _this$props.mapper;
if (children) {
return children;
}
if (Array.isArray(options)) {
return options.map(function (name, index) {
switch ((0, _typeof2.default)(name)) {
case 'string':
return _react.default.createElement(_MenuItem.default, {
key: index,
value: name
}, name);
case 'object':
return _react.default.createElement(_MenuItem.default, {
key: index,
value: typeof mapper.value === 'function' ? mapper.value(name, index) : name
}, typeof mapper.label === 'function' ? mapper.label(name, index) : name[mapper.label]);
default:
throw new Error('React-Material:select[dataSource] only supports type `string[] | Object[]`.');
}
});
}
throw new Error('React-Material: the `options` property must be an array ');
}
}, {
key: "render",
value: function render() {
var _this$props2 = this.props,
isDark = _this$props2.isDark,
paginationProps = _this$props2.paginationProps,
placeholder = _this$props2.placeholder,
multiple = _this$props2.multiple,
classes = _this$props2.classes,
disabled = _this$props2.disabled,
htmlFor = _this$props2.htmlFor,
value = _this$props2.value,
onChange = _this$props2.onChange,
onOpen = _this$props2.onOpen,
readOnly = _this$props2.readOnly,
comparison = _this$props2.comparison,
renderValue = _this$props2.renderValue,
other = (0, _objectWithoutProperties2.default)(_this$props2, ["isDark", "paginationProps", "placeholder", "multiple", "classes", "disabled", "htmlFor", "value", "onChange", "onOpen", "readOnly", "comparison", "renderValue"]);
var input = isDark ? _react.default.createElement(_Input.default, {
classes: {
root: classes.inputText,
underline: classes.underline
}
}) : _react.default.createElement(_Input.default, null);
return _react.default.createElement(_AsyncSelectRoot.default, (0, _extends2.default)({}, other, {
input: input,
readOnly: readOnly,
disabled: disabled,
onOpen: onOpen,
multiple: multiple,
value: value,
comparison: comparison,
onChange: onChange,
classes: (0, _extends2.default)({}, classes, {
root: classes.root,
selectMenu: classes.selectMenu
}),
inputProps: {
placeholder: placeholder,
id: htmlFor
},
renderValue: renderValue
}), _react.default.createElement(_AsyncSelectFilter.default, {
fullWidth: true,
autoFocus: true,
placeholder: placeholder,
onChange: this.onChangeFilter.bind(this)
}), this.menuItems(), _react.default.createElement(_Divider.default, null), _react.default.createElement(_Pagination.default, (0, _extends2.default)({}, paginationProps, {
onChangePage: this.onChangePage.bind(this)
})));
}
}]);
return AsyncSelect;
}(_react.Component);
AsyncSelect.propTypes = {
/**
* compare the value of selected with option value,return Boolen,
*/
comparison: _propTypes.default.func,
/**
* If true, aysncselect will add debounce when filter options by filter value.
*/
debounceAble: _propTypes.default.bool,
/**
* If debounceAble is true, config debounce wait and max continue time,the unit is milliseconds.
*/
debounceProps: _propTypes.default.shape({
wait: _propTypes.default.number
}),
/**
* decided select is disabled
*/
disabled: _propTypes.default.bool,
/**
* filter function
*/
filter: _propTypes.default.func,
/**
* option item label and value, when assignment option by options
*/
mapper: _propTypes.default.shape({
label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func])
}),
/**
* decided multiple select
*/
multiple: _propTypes.default.bool,
/**
* callback to parent component when select option
*/
onChange: _propTypes.default.func.isRequired,
/**
* callback to parent component when filter change
*/
onChangeFilter: _propTypes.default.func,
/**
* callback to parent component when current page change
*/
onChangePage: _propTypes.default.func,
/**
* callback to parent component when select open
*/
onOpen: _propTypes.default.func.isRequired,
/**
* select options,
*/
options: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool, _propTypes.default.object])),
/**
* pagination component config
*/
paginationProps: _propTypes.default.object,
/**
* placeholder of filter box
*/
placeholder: _propTypes.default.string,
/**
* decided select is readonly
*/
readonly: _propTypes.default.bool,
/**
* Render the selected value
*
* Signature:
* `function(value: any) => ReactElement`
* value: The value provided to the component..
*/
renderValue: _propTypes.default.func,
/**
* 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.bool, _propTypes.default.object, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool, _propTypes.default.object]))])
};
AsyncSelect.defaultProps = {
paginationProps: {
page: 0,
rowsPerPage: 5,
count: 0
},
mapper: {
label: 'label',
value: 'value'
},
comparison: function comparison(select, option) {
return select === option;
},
debounceProps: {
wait: 1000
}
};
var _default = (0, _withStyles.default)(styles, {
name: 'RMAsyncSelect'
})(AsyncSelect);
exports.default = _default;