@bootstrap-styled/ra-ui
Version:
UI components for react-admin
235 lines (197 loc) • 9.87 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 = exports.SelectArrayInput = void 0;
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 _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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _get = _interopRequireDefault(require("lodash/get"));
var _FormGroup = _interopRequireDefault(require("@bootstrap-styled/v4/lib/Form/FormGroup"));
var _FormFeedback = _interopRequireDefault(require("@bootstrap-styled/v4/lib/Form/FormFeedback"));
var _Badge = _interopRequireDefault(require("@bootstrap-styled/v4/lib/Badge"));
var _compose = _interopRequireDefault(require("recompose/compose"));
var _raCore = require("ra-core");
var _Option = _interopRequireDefault(require("@bootstrap-styled/v4/lib/Option"));
var _SelectMutiple = _interopRequireDefault(require("../extendMui/SelectMutiple"));
var sanitizeRestProps = function sanitizeRestProps(_ref) {
var addLabel = _ref.addLabel,
allowEmpty = _ref.allowEmpty,
basePath = _ref.basePath,
choices = _ref.choices,
className = _ref.className,
component = _ref.component,
crudGetMatching = _ref.crudGetMatching,
crudGetOne = _ref.crudGetOne,
defaultValue = _ref.defaultValue,
filter = _ref.filter,
filterToQuery = _ref.filterToQuery,
formClassName = _ref.formClassName,
initializeForm = _ref.initializeForm,
input = _ref.input,
isRequired = _ref.isRequired,
label = _ref.label,
limitChoicesToValue = _ref.limitChoicesToValue,
locale = _ref.locale,
meta = _ref.meta,
onChange = _ref.onChange,
options = _ref.options,
optionValue = _ref.optionValue,
optionText = _ref.optionText,
perPage = _ref.perPage,
record = _ref.record,
reference = _ref.reference,
resource = _ref.resource,
setFilter = _ref.setFilter,
setPagination = _ref.setPagination,
setSort = _ref.setSort,
sort = _ref.sort,
source = _ref.source,
textAlign = _ref.textAlign,
translate = _ref.translate,
translateChoice = _ref.translateChoice,
validation = _ref.validation,
rest = (0, _objectWithoutProperties2.default)(_ref, ["addLabel", "allowEmpty", "basePath", "choices", "className", "component", "crudGetMatching", "crudGetOne", "defaultValue", "filter", "filterToQuery", "formClassName", "initializeForm", "input", "isRequired", "label", "limitChoicesToValue", "locale", "meta", "onChange", "options", "optionValue", "optionText", "perPage", "record", "reference", "resource", "setFilter", "setPagination", "setSort", "sort", "source", "textAlign", "translate", "translateChoice", "validation"]);
return rest;
};
var SelectArrayInput = function (_Component) {
(0, _inherits2.default)(SelectArrayInput, _Component);
function SelectArrayInput() {
var _getPrototypeOf2;
var _this;
(0, _classCallCheck2.default)(this, SelectArrayInput);
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)(SelectArrayInput)).call.apply(_getPrototypeOf2, [this].concat(args)));
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
value: _this.props.input.value || []
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleChange", function (event) {
_this.props.input.onChange(event.target.value);
_this.props.input.onBlur(event.target.value);
_this.setState({
value: event.target.value
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderMenuItemOption", function (choice) {
var _this$props = _this.props,
optionText = _this$props.optionText,
translate = _this$props.translate,
translateChoice = _this$props.translateChoice;
if (_react.default.isValidElement(optionText)) {
return _react.default.cloneElement(optionText, {
record: choice
});
}
var choiceName = typeof optionText === 'function' ? optionText(choice) : (0, _get.default)(choice, optionText);
return translateChoice ? translate(choiceName, {
_: choiceName
}) : choiceName;
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderMenuItem", function (choice) {
var optionValue = _this.props.optionValue;
return _react.default.createElement(_Option.default, {
key: (0, _get.default)(choice, optionValue),
value: (0, _get.default)(choice, optionValue),
type: "button"
}, _this.renderMenuItemOption(choice));
});
return _this;
}
(0, _createClass2.default)(SelectArrayInput, [{
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(nextProps) {
if (nextProps.input.value !== this.props.input.value) {
this.setState({
value: nextProps.input.value || []
});
}
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var _this$props2 = this.props,
choices = _this$props2.choices,
className = _this$props2.className,
isRequired = _this$props2.isRequired,
label = _this$props2.label,
meta = _this$props2.meta,
options = _this$props2.options,
resource = _this$props2.resource,
source = _this$props2.source,
optionText = _this$props2.optionText,
optionValue = _this$props2.optionValue,
rest = (0, _objectWithoutProperties2.default)(_this$props2, ["choices", "className", "isRequired", "label", "meta", "options", "resource", "source", "optionText", "optionValue"]);
if (typeof meta === 'undefined') {
throw new Error("The SelectInput 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;
return _react.default.createElement(_FormGroup.default, (0, _extends2.default)({
className: className
}, sanitizeRestProps(rest)), _react.default.createElement(_raCore.FieldTitle, {
label: label,
source: source,
resource: resource,
isRequired: isRequired
}), _react.default.createElement(_SelectMutiple.default, (0, _extends2.default)({
value: this.state.value,
name: source,
renderValue: function renderValue(selected) {
return _react.default.createElement(_react.default.Fragment, null, choices.filter(function (choice) {
return selected.indexOf((0, _get.default)(choice, optionValue)) !== -1;
}).map(function (choice) {
return _react.default.createElement(_Badge.default, {
key: (0, _get.default)(choice, optionValue),
className: "p-2 mx-1"
}, _this2.renderMenuItemOption(choice));
}));
}
}, options, {
onChange: this.handleChange
}), choices.map(this.renderMenuItem)), !!(touched && error) && _react.default.createElement(_FormFeedback.default, null, error), helperText && _react.default.createElement(_FormFeedback.default, null, helperText));
}
}]);
return SelectArrayInput;
}(_react.Component);
exports.SelectArrayInput = SelectArrayInput;
SelectArrayInput.propTypes = {
choices: _propTypes.default.arrayOf(_propTypes.default.object),
className: _propTypes.default.string,
children: _propTypes.default.node,
input: _propTypes.default.object,
isRequired: _propTypes.default.bool,
label: _propTypes.default.string,
meta: _propTypes.default.object,
options: _propTypes.default.object,
optionText: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.element]).isRequired,
optionValue: _propTypes.default.string.isRequired,
resource: _propTypes.default.string,
source: _propTypes.default.string,
translate: _propTypes.default.func.isRequired,
translateChoice: _propTypes.default.bool
};
SelectArrayInput.defaultProps = {
choices: [],
options: {},
optionText: 'name',
optionValue: 'id',
translateChoice: true
};
var EnhancedSelectArrayInput = (0, _compose.default)(_raCore.addField, _raCore.translate)(SelectArrayInput);
var _default = EnhancedSelectArrayInput;
exports.default = _default;