@bootstrap-styled/ra-ui
Version:
UI components for react-admin
520 lines (454 loc) • 20.2 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.AutocompleteArrayInput = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
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 _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _get = _interopRequireDefault(require("lodash/get"));
var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
var _reactAutosuggest = _interopRequireDefault(require("react-autosuggest"));
var _Chip = _interopRequireDefault(require("@material-ui/core/Chip"));
var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
var _Popper = _interopRequireDefault(require("@material-ui/core/Popper"));
var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
var _parse = _interopRequireDefault(require("autosuggest-highlight/parse"));
var _match = _interopRequireDefault(require("autosuggest-highlight/match"));
var _blue = _interopRequireDefault(require("@material-ui/core/colors/blue"));
var _compose = _interopRequireDefault(require("recompose/compose"));
var _classnames = _interopRequireDefault(require("classnames"));
var _raCore = require("ra-core");
var _AutocompleteArrayInputChip = _interopRequireDefault(require("./AutocompleteArrayInputChip"));
var styles = function styles(theme) {
return {
container: {
flexGrow: 1,
position: 'relative'
},
root: {},
suggestionsContainerOpen: {
position: 'absolute',
marginBottom: theme.spacing.unit * 3,
zIndex: 2
},
suggestion: {
display: 'block',
fontFamily: theme.typography.fontFamily
},
suggestionText: {
fontWeight: 300
},
highlightedSuggestionText: {
fontWeight: 500
},
suggestionsList: {
margin: 0,
padding: 0,
listStyleType: 'none'
},
chip: {
marginRight: theme.spacing.unit
},
chipDisabled: {
pointerEvents: 'none'
},
chipFocused: {
backgroundColor: _blue.default[300]
}
};
};
var AutocompleteArrayInput = function (_React$Component) {
(0, _inherits2.default)(AutocompleteArrayInput, _React$Component);
function AutocompleteArrayInput() {
var _getPrototypeOf2;
var _this;
(0, _classCallCheck2.default)(this, AutocompleteArrayInput);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(AutocompleteArrayInput)).call.apply(_getPrototypeOf2, [this].concat(args)));
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "initialInputValue", []);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
dirty: false,
inputValue: _this.initialInputValue,
searchText: '',
suggestions: []
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "inputEl", null);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "anchorEl", null);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getInputValue", function (inputValue) {
return inputValue === '' ? _this.initialInputValue : inputValue;
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getSuggestionValue", function (suggestion) {
return (0, _get.default)(suggestion, _this.props.optionValue);
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getSuggestionText", function (suggestion) {
if (!suggestion) return '';
var _this$props = _this.props,
optionText = _this$props.optionText,
translate = _this$props.translate,
translateChoice = _this$props.translateChoice;
var suggestionLabel = typeof optionText === 'function' ? optionText(suggestion) : (0, _get.default)(suggestion, optionText);
return translateChoice ? translate(suggestionLabel, {
_: suggestionLabel
}).toString() : suggestionLabel.toString();
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSuggestionSelected", function (event, _ref) {
var suggestion = _ref.suggestion,
method = _ref.method;
var input = _this.props.input;
input.onChange([].concat((0, _toConsumableArray2.default)(_this.state.inputValue || []), [_this.getSuggestionValue(suggestion)]));
if (method === 'enter') {
event.preventDefault();
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSuggestionsFetchRequested", function () {
var _this$props2 = _this.props,
choices = _this$props2.choices,
inputValueMatcher = _this$props2.inputValueMatcher;
_this.setState(function (_ref2) {
var searchText = _ref2.searchText;
return {
suggestions: choices.filter(function (suggestion) {
return inputValueMatcher(searchText, suggestion, _this.getSuggestionText);
})
};
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSuggestionsClearRequested", function () {
_this.updateFilter('');
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleMatchSuggestionOrFilter", function (inputValue) {
_this.setState({
dirty: true,
searchText: inputValue
});
_this.updateFilter(inputValue);
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleChange", function (event, _ref3) {
var newValue = _ref3.newValue,
method = _ref3.method;
switch (method) {
case 'type':
case 'escape':
{
_this.handleMatchSuggestionOrFilter(newValue);
}
break;
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderInput", function (inputProps) {
var input = _this.props.input;
var autoFocus = inputProps.autoFocus,
className = inputProps.className,
isRequired = inputProps.isRequired,
label = inputProps.label,
meta = inputProps.meta,
onChange = inputProps.onChange,
resource = inputProps.resource,
source = inputProps.source,
value = inputProps.value,
ref = inputProps.ref,
_inputProps$options = inputProps.options,
InputProps = _inputProps$options.InputProps,
options = (0, _objectWithoutProperties2.default)(_inputProps$options, ["InputProps"]),
other = (0, _objectWithoutProperties2.default)(inputProps, ["autoFocus", "className", "isRequired", "label", "meta", "onChange", "resource", "source", "value", "ref", "options"]);
if (typeof meta === 'undefined') {
throw new Error("The TextInput component wasn't called within a redux-form <Field>. Did you decorate it and forget to add the addField prop to your component? See https://marmelab.com/react-admin/Inputs.html#writing-your-own-input-component for details.");
}
var touched = meta.touched,
error = meta.error,
_meta$helperText = meta.helperText,
helperText = _meta$helperText === void 0 ? false : _meta$helperText;
var storeInputRef = function storeInputRef(input) {
_this.inputEl = input;
_this.updateAnchorEl();
ref(input);
};
return _react.default.createElement(_AutocompleteArrayInputChip.default, (0, _extends2.default)({
clearInputValueOnChange: true,
onUpdateInput: onChange,
onAdd: _this.handleAdd,
onDelete: _this.handleDelete,
value: _this.getInputValue(input.value),
inputRef: storeInputRef,
error: touched && error,
helperText: touched && error && helperText,
chipRenderer: _this.renderChip,
label: _react.default.createElement(_raCore.FieldTitle, {
label: label,
source: source,
resource: resource,
isRequired: isRequired
})
}, other, options));
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderChip", function (_ref4, key) {
var value = _ref4.value,
isFocused = _ref4.isFocused,
isDisabled = _ref4.isDisabled,
handleClick = _ref4.handleClick,
handleDelete = _ref4.handleDelete;
var choices = _this.props.choices;
var suggestion = choices.find(function (choice) {
return _this.getSuggestionValue(choice) === value;
});
return _react.default.createElement(_Chip.default, {
key: key,
onClick: handleClick,
onDelete: handleDelete,
label: _this.getSuggestionText(suggestion)
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleAdd", function (chip) {
var _this$props3 = _this.props,
choices = _this$props3.choices,
input = _this$props3.input,
limitChoicesToValue = _this$props3.limitChoicesToValue,
inputValueMatcher = _this$props3.inputValueMatcher;
var filteredChoices = choices.filter(function (choice) {
return inputValueMatcher(chip, choice, _this.getSuggestionText);
});
var choice = filteredChoices.length === 1 ? filteredChoices[0] : filteredChoices.find(function (c) {
return _this.getSuggestionValue(c) === chip;
});
if (choice) {
return input.onChange([].concat((0, _toConsumableArray2.default)(_this.state.inputValue || []), [_this.getSuggestionValue(choice)]));
}
if (limitChoicesToValue) {
_this.updateFilter('');
return;
}
input.onChange([].concat((0, _toConsumableArray2.default)(_this.state.inputValue), [chip]));
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleDelete", function (chip) {
var input = _this.props.input;
input.onChange(_this.state.inputValue.filter(function (value) {
return value !== chip;
}));
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSuggestionsContainer", function (autosuggestOptions) {
var _autosuggestOptions$c = autosuggestOptions.containerProps,
className = _autosuggestOptions$c.className,
containerProps = (0, _objectWithoutProperties2.default)(_autosuggestOptions$c, ["className"]),
children = autosuggestOptions.children;
var _this$props$classes = _this.props.classes,
classes = _this$props$classes === void 0 ? {} : _this$props$classes;
_this.updateAnchorEl();
return _react.default.createElement(_Popper.default, {
className: className,
open: Boolean(children),
anchorEl: _this.anchorEl,
placement: "bottom-start"
}, _react.default.createElement(_Paper.default, (0, _extends2.default)({
square: true
}, containerProps), children));
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSuggestionComponent", function (_ref5) {
var suggestion = _ref5.suggestion,
query = _ref5.query,
isHighlighted = _ref5.isHighlighted,
props = (0, _objectWithoutProperties2.default)(_ref5, ["suggestion", "query", "isHighlighted"]);
return _react.default.createElement("div", props);
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSuggestion", function (suggestion, _ref6) {
var query = _ref6.query,
isHighlighted = _ref6.isHighlighted;
var label = _this.getSuggestionText(suggestion);
var matches = (0, _match.default)(label, query);
var parts = (0, _parse.default)(label, matches);
var suggestionComponent = _this.props.suggestionComponent;
return _react.default.createElement(_MenuItem.default, {
selected: isHighlighted,
component: suggestionComponent || _this.renderSuggestionComponent,
suggestion: suggestion,
query: query,
isHighlighted: isHighlighted
}, _react.default.createElement("div", null, parts.map(function (part, index) {
return part.highlight ? _react.default.createElement("span", {
key: index
}, part.text) : _react.default.createElement("strong", {
key: index
}, part.text);
})));
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleFocus", function () {
var input = _this.props.input;
input && input.onFocus && input.onFocus();
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateFilter", function (value) {
var _this$props4 = _this.props,
setFilter = _this$props4.setFilter,
choices = _this$props4.choices;
if (_this.previousFilterValue !== value) {
if (setFilter) {
setFilter(value);
} else {
_this.setState({
searchText: value,
suggestions: choices.filter(function (choice) {
return _this.getSuggestionText(choice).toLowerCase().indexOf(value.toLowerCase()) !== -1;
})
});
}
}
_this.previousFilterValue = value;
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "shouldRenderSuggestions", function (val) {
var shouldRenderSuggestions = _this.props.shouldRenderSuggestions;
if (shouldRenderSuggestions !== undefined && typeof shouldRenderSuggestions === 'function') {
return shouldRenderSuggestions(val);
}
return true;
});
return _this;
}
(0, _createClass2.default)(AutocompleteArrayInput, [{
key: "componentWillMount",
value: function componentWillMount() {
this.setState({
inputValue: this.getInputValue(this.props.input.value),
suggestions: this.props.choices
});
}
}, {
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(nextProps) {
var _this2 = this;
var choices = nextProps.choices,
input = nextProps.input,
inputValueMatcher = nextProps.inputValueMatcher;
if (!(0, _isEqual.default)(this.getInputValue(input.value), this.state.inputValue)) {
this.setState({
inputValue: this.getInputValue(input.value),
dirty: false,
suggestions: this.props.choices
});
this.updateFilter('');
} else if (!(0, _isEqual.default)(choices, this.props.choices)) {
this.setState(function (_ref7) {
var searchText = _ref7.searchText;
return {
suggestions: choices.filter(function (suggestion) {
return inputValueMatcher(searchText, suggestion, _this2.getSuggestionText);
})
};
});
}
}
}, {
key: "updateAnchorEl",
value: function updateAnchorEl() {
if (!this.inputEl) {
return;
}
var inputPosition = this.inputEl.getBoundingClientRect();
if (!this.anchorEl) {
this.anchorEl = {
getBoundingClientRect: function getBoundingClientRect() {
return inputPosition;
}
};
} else {
var anchorPosition = this.anchorEl.getBoundingClientRect();
if (anchorPosition.x !== inputPosition.x || anchorPosition.y !== inputPosition.y) {
this.anchorEl = {
getBoundingClientRect: function getBoundingClientRect() {
return inputPosition;
}
};
}
}
}
}, {
key: "render",
value: function render() {
var _this$props5 = this.props,
alwaysRenderSuggestions = _this$props5.alwaysRenderSuggestions,
isRequired = _this$props5.isRequired,
label = _this$props5.label,
meta = _this$props5.meta,
resource = _this$props5.resource,
source = _this$props5.source,
className = _this$props5.className,
options = _this$props5.options;
var _this$state = this.state,
suggestions = _this$state.suggestions,
searchText = _this$state.searchText;
return _react.default.createElement(_reactAutosuggest.default, {
renderInputComponent: this.renderInput,
suggestions: suggestions,
alwaysRenderSuggestions: alwaysRenderSuggestions,
onSuggestionSelected: this.handleSuggestionSelected,
onSuggestionsFetchRequested: this.handleSuggestionsFetchRequested,
onSuggestionsClearRequested: this.handleSuggestionsClearRequested,
renderSuggestionsContainer: this.renderSuggestionsContainer,
getSuggestionValue: this.getSuggestionText,
renderSuggestion: this.renderSuggestion,
shouldRenderSuggestions: this.shouldRenderSuggestions,
inputProps: {
blurBehavior: 'add',
className: className,
isRequired: isRequired,
label: label,
meta: meta,
onChange: this.handleChange,
resource: resource,
source: source,
value: searchText,
onFocus: this.handleFocus,
options: options
}
});
}
}]);
return AutocompleteArrayInput;
}(_react.default.Component);
exports.AutocompleteArrayInput = AutocompleteArrayInput;
AutocompleteArrayInput.propTypes = {
allowEmpty: _propTypes.default.bool,
alwaysRenderSuggestions: _propTypes.default.bool,
choices: _propTypes.default.arrayOf(_propTypes.default.object),
className: _propTypes.default.string,
InputProps: _propTypes.default.object,
input: _propTypes.default.object,
inputValueMatcher: _propTypes.default.func,
isRequired: _propTypes.default.bool,
label: _propTypes.default.string,
limitChoicesToValue: _propTypes.default.bool,
meta: _propTypes.default.object,
options: _propTypes.default.object,
optionText: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]).isRequired,
optionValue: _propTypes.default.string.isRequired,
resource: _propTypes.default.string,
shouldRenderSuggestions: _propTypes.default.func,
setFilter: _propTypes.default.func,
source: _propTypes.default.string,
suggestionComponent: _propTypes.default.func,
translate: _propTypes.default.func.isRequired,
translateChoice: _propTypes.default.bool.isRequired
};
AutocompleteArrayInput.defaultProps = {
choices: [],
options: {},
optionText: 'name',
optionValue: 'id',
limitChoicesToValue: false,
translateChoice: true,
inputValueMatcher: function inputValueMatcher(input, suggestion, getOptionText) {
return getOptionText(suggestion).toLowerCase().trim().indexOf(input.toLowerCase().trim()) !== -1;
}
};
var _default = (0, _compose.default)(_raCore.addField, _raCore.translate)(AutocompleteArrayInput);
exports.default = _default;