@6thquake/react-material
Version:
React components that implement Google's Material Design.
504 lines (422 loc) • 14.5 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 _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
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 _TextField = _interopRequireDefault(require("../TextField"));
var _Paper = _interopRequireDefault(require("../Paper"));
var _Chip = _interopRequireDefault(require("../Chip"));
var _Pagination = _interopRequireDefault(require("../Pagination"));
var _Divider = _interopRequireDefault(require("../Divider"));
var _MenuItem = _interopRequireDefault(require("../MenuItem"));
var _throttle = require("../utils/throttle");
var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
/**
* @ignore - do not document.
*/
var styles = function styles(theme) {
return {
root: {
flexGrow: 1
},
container: {
flexGrow: 1,
position: 'relative'
},
textarea: {
width: '100%'
},
modal: {
position: 'fixed',
top: 0,
right: 0,
bottom: 0,
left: 0,
overflow: 'hidden',
outline: 0,
backgroundColor: 'rgb(0, 0, 0)',
opacity: 0,
zIndex: 1
},
paper: {
position: 'absolute',
zIndex: 200,
marginTop: theme.spacing(1),
left: 0,
right: 0,
padding: '10px'
},
chip: {
margin: "".concat(theme.spacing(0.5), "px ").concat(theme.spacing(0.25), "px")
},
inputRoot: {
flexGrow: 1,
flexWrap: 'wrap'
},
inputHold: {
padding: '10px 0 7px'
}
};
};
var AsyncAutoComplete =
/*#__PURE__*/
function (_Component) {
(0, _inherits2.default)(AsyncAutoComplete, _Component);
function AsyncAutoComplete(props) {
var _this;
(0, _classCallCheck2.default)(this, AsyncAutoComplete);
_this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(AsyncAutoComplete).call(this, props));
_this.handleDelete = function (item) {
return function (event) {
if (_this.props.disabled) {
return;
}
var value = (0, _toConsumableArray2.default)(_this.props.value);
value.splice(value.indexOf(item), 1);
var target;
if (event.target) {
target = event.target;
}
event.persist();
event.target = (0, _extends2.default)({}, target, {
value: value
});
_this.props.onChange(event);
};
};
_this.handleItemClick = function (child) {
return function (event) {
_this.setState({
inputValue: ''
});
if (!_this.props.multiple) {
_this.setState({
open: false
});
}
var onChange = _this.props.onChange;
if (onChange) {
var value;
var target;
if (event.target) {
target = event.target;
}
var selecttext = child ? child.props.value : event.target.textContent;
if (_this.props.multiple) {
value = Array.isArray(_this.props.value) ? (0, _toConsumableArray2.default)(_this.props.value) : [];
var itemIndex = value.indexOf(selecttext);
if (itemIndex === -1) {
value.push(selecttext);
} else {
value.splice(itemIndex, 1);
}
} else {
value = selecttext;
_this.setState({
inputValue: value
});
}
event.persist();
event.target = (0, _extends2.default)({}, target, {
value: value
});
onChange(event, child);
}
};
};
_this.handleBlur = function (event) {
if (_this.props.onBlur) {
_this.props.onBlur(event);
} else {
var onChange = _this.props.onChange;
if (onChange) {
var value;
var target;
if (event.target) {
target = event.target;
}
var selecttext = _this.state.inputValue;
if (_this.props.multiple) {
value = Array.isArray(_this.props.value) ? (0, _toConsumableArray2.default)(_this.props.value) : [];
var itemIndex = value.indexOf(selecttext);
if (itemIndex === -1) {
if (selecttext) {
value.push(selecttext);
}
}
_this.setState({
open: false,
inputValue: ''
});
} else {
value = selecttext;
_this.setState({
open: false,
inputValue: value
});
}
event.persist();
event.target = (0, _extends2.default)({}, target, {
value: value
});
onChange(event);
}
}
};
_this.throttlingtem = (0, _throttle.debounce)(props.onChangeInput, props.debounceProps.wait);
_this.state = {
open: false,
inputValue: '',
selectedItem: [],
page: 0
};
return _this;
}
(0, _createClass2.default)(AsyncAutoComplete, [{
key: "componentDidMount",
value: function componentDidMount() {
if (!this.props.multiple) {
this.setState({
inputValue: this.props.value
});
}
}
}, {
key: "onFocus",
value: function onFocus(e) {
if (this.props.select) {
this.setState({
open: true
});
}
}
}, {
key: "handleChange",
value: function handleChange(event) {
this.setState({
open: true,
inputValue: event.target.value
});
if (this.props.debounceAble) {
event.persist();
this.throttlingtem(event);
} else {
this.props.onChangeInput(event);
}
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var _this$props = this.props,
PaginationProps = _this$props.PaginationProps,
onChangePage = _this$props.onChangePage,
classes = _this$props.classes,
placeholder = _this$props.placeholder,
children = _this$props.children,
multiple = _this$props.multiple,
value = _this$props.value,
options = _this$props.options,
mapper = _this$props.mapper,
disabled = _this$props.disabled;
var _this$state = this.state,
open = _this$state.open,
inputValue = _this$state.inputValue;
var items;
if (options) {
items = options ? options.map(function (item, index) {
var selected = false;
switch ((0, _typeof2.default)(item)) {
case 'string':
if (multiple) {
if (!Array.isArray(value)) {
throw new Error('React-Material: the `value` property must be an array ' + 'when using the `AsyncAutoComplete` component with `multiple`.');
}
selected = value.indexOf(item) !== -1;
} else {
selected = value === item;
}
return _react.default.createElement(_MenuItem.default, {
key: index,
value: item,
selected: selected,
onClick: _this2.handleItemClick(null)
}, item);
case 'object':
if (multiple) {
if (!Array.isArray(value)) {
throw new Error('React-Material: the `value` property must be an array ' + 'when using the `AsyncAutoComplete` component with `multiple`.');
}
selected = value.indexOf(typeof mapper.value === 'function' ? mapper.value(item, index) : item[mapper.value]) !== -1;
} else {
selected = value === (typeof mapper.value === 'function' ? mapper.value(item, index) : item[mapper.value]);
}
return _react.default.createElement(_MenuItem.default, {
key: index,
value: item[mapper.value],
selected: selected,
onClick: _this2.handleItemClick(null)
}, typeof mapper.label === 'function' ? mapper.label(item, index) : item[mapper.label]);
default:
throw new Error('AsyncAutoComplete[options] only supports type `string[] | Object[]`.');
}
}) : [];
} else {
items = _react.default.Children.map(children, function (child) {
if (!_react.default.isValidElement(child)) {
return null;
}
var selected = false;
if (multiple) {
if (!Array.isArray(value)) {
throw new Error('React-Material: the `value` property must be an array ' + 'when using the `AsyncAutoComplete` component with `multiple`.');
}
selected = value.indexOf(child.props.value) !== -1;
} else {
selected = value === child.props.value;
}
return _react.default.cloneElement(child, {
onClick: _this2.handleItemClick(child),
role: 'option',
selected: selected,
value: undefined,
// The value is most likely not a valid HTML attribute.
'data-value': child.props.value // Instead, we provide it as a data attribute.
});
});
}
return _react.default.createElement("div", {
className: classes.root
}, open ? _react.default.createElement("div", {
onClick: this.handleBlur,
className: classes.modal
}) : null, _react.default.createElement("div", {
className: classes.container
}, multiple ? _react.default.createElement(_TextField.default, {
disabled: disabled,
className: classes.textarea,
onChange: this.handleChange.bind(this),
value: inputValue,
multiline: true,
onFocus: this.onFocus.bind(this),
rows: "1",
InputProps: {
classes: {
root: classes.inputRoot,
input: classes.inputHold
},
startAdornment: value.map(function (item) {
return _react.default.createElement(_Chip.default, {
key: item,
label: item,
className: classes.chip,
onDelete: _this2.handleDelete(item)
});
}),
placeholder: value.length > 0 ? '' : placeholder
}
}) : _react.default.createElement(_TextField.default, {
disabled: disabled,
onFocus: this.onFocus.bind(this),
className: classes.textarea,
onChange: this.handleChange.bind(this),
value: inputValue,
placeholder: placeholder
}), open ? _react.default.createElement(_Paper.default, {
className: classes.paper,
square: true
}, items, _react.default.createElement(_Divider.default, null), _react.default.createElement(_Pagination.default, (0, _extends2.default)({}, PaginationProps, {
onChangePage: onChangePage
}))) : null));
}
}]);
return AsyncAutoComplete;
}(_react.Component);
AsyncAutoComplete.propTypes = {
/**
* If true, autocomplete will add debounce when filter options by input value.
*/
debounceAble: _propTypes.default.bool,
/**
* If debounceAble true, config debounce wait and max continue time, the unit is milliseconds.
*/
debounceProps: _propTypes.default.shape({
wait: _propTypes.default.number
}),
/**
* Decided autocomplete is disabled
*/
disabled: _propTypes.default.bool,
/**
* 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. If true, value must be an array and the menu will support multiple selections.
*/
multiple: _propTypes.default.bool,
/**
* Callback function fired when a menu item is selected.
*/
onChange: _propTypes.default.func.isRequired,
/**
* Callback fired when the input value is changed.
*/
onChangeInput: _propTypes.default.func,
/**
* Callback fired when the current page of pagination is changed.
*/
onChangePage: _propTypes.default.func,
/**
* autocomplete options,
*/
options: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.number])),
/**
* Pagination component config
*/
PaginationProps: _propTypes.default.object,
/**
* placeholder
*/
placeholder: _propTypes.default.string,
/**
* If true, autocomplete performance is like a select, when focus, option open.
*/
select: _propTypes.default.bool,
/**
* The value of the Input element, required for a controlled component.
*/
value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]))])
};
AsyncAutoComplete.defaultProps = {
PaginationProps: {
page: 0,
rowsPerPage: 5,
count: 0
},
multiple: false,
disabled: false,
select: false,
debounceProps: {
wait: 1000
}
};
var _default = (0, _withStyles.default)(styles, {
name: 'RMAsyncAutoComplete'
})(AsyncAutoComplete);
exports.default = _default;