@bootstrap-styled/ra-ui
Version:
UI components for react-admin
243 lines (204 loc) • 9.64 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.SelectInput = void 0;
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 _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 _Option = _interopRequireDefault(require("@bootstrap-styled/v4/lib/Option"));
var _compose = _interopRequireDefault(require("recompose/compose"));
var _raCore = require("ra-core");
var _ResettableTextField = _interopRequireDefault(require("./ResettableTextField"));
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,
emptyValue = _ref.emptyValue,
filter = _ref.filter,
filterToQuery = _ref.filterToQuery,
formClassName = _ref.formClassName,
initializeForm = _ref.initializeForm,
input = _ref.input,
isRequired = _ref.isRequired,
label = _ref.label,
locale = _ref.locale,
meta = _ref.meta,
onChange = _ref.onChange,
options = _ref.options,
optionValue = _ref.optionValue,
optionText = _ref.optionText,
disableValue = _ref.disableValue,
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", "emptyValue", "filter", "filterToQuery", "formClassName", "initializeForm", "input", "isRequired", "label", "locale", "meta", "onChange", "options", "optionValue", "optionText", "disableValue", "perPage", "record", "reference", "resource", "setFilter", "setPagination", "setSort", "sort", "source", "textAlign", "translate", "translateChoice", "validation"]);
return rest;
};
var SelectInput = function (_Component) {
(0, _inherits2.default)(SelectInput, _Component);
function SelectInput() {
var _getPrototypeOf2;
var _this;
(0, _classCallCheck2.default)(this, SelectInput);
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)(SelectInput)).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 (eventOrValue) {
var value = eventOrValue.target ? eventOrValue.target.value : eventOrValue;
_this.props.input.onChange(value);
_this.props.input.onBlur();
_this.setState({
value: value
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "addAllowEmpty", function (choices) {
if (_this.props.allowEmpty) {
return [_react.default.createElement(_Option.default, {
value: _this.props.emptyValue,
key: "null"
})].concat((0, _toConsumableArray2.default)(choices));
}
return choices;
});
(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 _this$props2 = _this.props,
optionValue = _this$props2.optionValue,
disableValue = _this$props2.disableValue;
return _react.default.createElement(_Option.default, {
key: (0, _get.default)(choice, optionValue),
value: (0, _get.default)(choice, optionValue),
disabled: (0, _get.default)(choice, disableValue)
}, _this.renderMenuItemOption(choice));
});
return _this;
}
(0, _createClass2.default)(SelectInput, [{
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 _this$props3 = this.props,
allowEmpty = _this$props3.allowEmpty,
choices = _this$props3.choices,
className = _this$props3.className,
input = _this$props3.input,
isRequired = _this$props3.isRequired,
label = _this$props3.label,
meta = _this$props3.meta,
options = _this$props3.options,
resource = _this$props3.resource,
source = _this$props3.source,
rest = (0, _objectWithoutProperties2.default)(_this$props3, ["allowEmpty", "choices", "className", "input", "isRequired", "label", "meta", "options", "resource", "source"]);
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(_ResettableTextField.default, (0, _extends2.default)({
value: this.state.value,
label: _react.default.createElement(_raCore.FieldTitle, {
label: label,
source: source,
resource: resource,
isRequired: isRequired
}),
name: input.name,
className: className,
error: !!(touched && error),
helperText: touched && error || helperText,
type: "select"
}, options, sanitizeRestProps(rest), {
onChange: this.handleChange
}), this.addAllowEmpty(choices.map(this.renderMenuItem)));
}
}]);
return SelectInput;
}(_react.Component);
exports.SelectInput = SelectInput;
SelectInput.propTypes = {
allowEmpty: _propTypes.default.bool.isRequired,
emptyValue: _propTypes.default.any,
choices: _propTypes.default.arrayOf(_propTypes.default.object),
className: _propTypes.default.string,
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,
disableValue: _propTypes.default.string,
resource: _propTypes.default.string,
source: _propTypes.default.string,
translate: _propTypes.default.func.isRequired,
translateChoice: _propTypes.default.bool
};
SelectInput.defaultProps = {
allowEmpty: false,
emptyValue: '',
choices: [],
options: {},
optionText: 'name',
optionValue: 'id',
translateChoice: true,
disableValue: 'disabled'
};
var _default = (0, _compose.default)(_raCore.addField, _raCore.translate)(SelectInput);
exports.default = _default;