react-awesome-query-builder-pd
Version:
User-friendly query builder for React. Demo: https://ukrbublik.github.io/react-awesome-query-builder
215 lines (174 loc) • 8.25 kB
JavaScript
"use strict";
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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _omit = _interopRequireDefault(require("lodash/omit"));
var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
var _Autocomplete = _interopRequireDefault(require("@mui/lab/Autocomplete"));
var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
var _styles = require("@mui/styles");
var _CheckBoxOutlineBlank = _interopRequireDefault(require("@mui/icons-material/CheckBoxOutlineBlank"));
var _CheckBox = _interopRequireDefault(require("@mui/icons-material/CheckBox"));
var _useListValuesAutocomplete = _interopRequireDefault(require("../../../../hooks/useListValuesAutocomplete"));
var _excluded = ["width", "showCheckboxes"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
var nonCheckedIcon = /*#__PURE__*/_react["default"].createElement(_CheckBoxOutlineBlank["default"], {
fontSize: "small"
});
var checkedIcon = /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], {
fontSize: "small"
}); // const defaultFilterOptions = createFilterOptions();
var emptyArray = [];
var _default = function _default(props) {
var allowCustomValues = props.allowCustomValues,
multiple = props.multiple,
selectedValue = props.value,
customProps = props.customProps,
readonly = props.readonly,
config = props.config; // hook
var _useListValuesAutocom = (0, _useListValuesAutocomplete["default"])(props, {
debounceTimeout: 100,
multiple: multiple
}),
open = _useListValuesAutocom.open,
onOpen = _useListValuesAutocom.onOpen,
onClose = _useListValuesAutocom.onClose,
onChange = _useListValuesAutocom.onChange,
onInputChange = _useListValuesAutocom.onInputChange,
inputValue = _useListValuesAutocom.inputValue,
options = _useListValuesAutocom.options,
isInitialLoading = _useListValuesAutocom.isInitialLoading,
isLoading = _useListValuesAutocom.isLoading,
aPlaceholder = _useListValuesAutocom.aPlaceholder,
extendOptions = _useListValuesAutocom.extendOptions,
getOptionSelected = _useListValuesAutocom.getOptionSelected,
getOptionDisabled = _useListValuesAutocom.getOptionDisabled,
getOptionLabel = _useListValuesAutocom.getOptionLabel; // setings
var _config$settings = config.settings,
defaultSelectWidth = _config$settings.defaultSelectWidth,
defaultSearchWidth = _config$settings.defaultSearchWidth;
var _ref = customProps || {},
width = _ref.width,
showCheckboxes = _ref.showCheckboxes,
rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
var customInputProps = rest.input || {};
var inputWidth = customInputProps.width || defaultSearchWidth;
customInputProps = (0, _omit["default"])(customInputProps, ["width"]);
var customAutocompleteProps = (0, _omit["default"])(rest, ["showSearch", "showCheckboxes"]);
var fullWidth = true;
var minWidth = width || defaultSelectWidth;
var style = {
width: multiple ? undefined : minWidth,
minWidth: minWidth
};
var placeholder = !readonly ? aPlaceholder : "";
var hasValue = selectedValue != null; // should be simple value to prevent re-render!s
var value = hasValue ? selectedValue : multiple ? emptyArray : null;
var filterOptions = function filterOptions(options, params) {
// const filtered = defaultFilterOptions(options, params);
var extended = extendOptions(options, params);
return extended;
}; // styles
var useStyles = (0, _styles.makeStyles)(function (theme) {
return {
// fix too small width
input: {
minWidth: inputWidth + " !important"
}
};
});
var useStylesChip = (0, _styles.makeStyles)(function (theme) {
return {
// fix height
root: {
height: "auto"
},
label: {
marginTop: "3px",
marginBottom: "3px"
}
};
});
var classesChip = useStylesChip();
var classes = useStyles(); // render
var renderInput = function renderInput(params) {
return /*#__PURE__*/_react["default"].createElement(_TextField["default"], (0, _extends2["default"])({}, params, {
InputProps: _objectSpread(_objectSpread({}, params.InputProps), {}, {
readOnly: readonly,
endAdornment: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isLoading ? /*#__PURE__*/_react["default"].createElement(_CircularProgress["default"], {
color: "inherit",
size: 20
}) : null, params.InputProps.endAdornment)
}),
disabled: readonly,
placeholder: placeholder //onChange={onInputChange}
}, customInputProps));
};
var renderTags = function renderTags(value, getTagProps) {
return value.map(function (option, index) {
return /*#__PURE__*/_react["default"].createElement(_Chip["default"], (0, _extends2["default"])({
key: index,
classes: classesChip,
label: getOptionLabel(option)
}, getTagProps({
index: index
})));
});
};
var renderOption = function renderOption(option, _ref2) {
var selected = _ref2.selected;
if (multiple && showCheckboxes != false) {
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
icon: nonCheckedIcon,
checkedIcon: checkedIcon,
style: {
marginRight: 8
},
checked: selected
}), option.title);
} else {
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, option.title);
}
};
return /*#__PURE__*/_react["default"].createElement(_FormControl["default"], {
fullWidth: fullWidth
}, /*#__PURE__*/_react["default"].createElement(_Autocomplete["default"], (0, _extends2["default"])({
filterSelectedOptions: true,
disableCloseOnSelect: multiple,
fullWidth: fullWidth,
multiple: multiple,
style: style,
classes: classes,
freeSolo: allowCustomValues,
loading: isInitialLoading,
open: open,
onOpen: onOpen,
onClose: onClose,
inputValue: inputValue,
onInputChange: onInputChange,
label: placeholder,
onChange: onChange,
value: value,
getOptionSelected: getOptionSelected,
disabled: readonly,
readOnly: readonly,
options: options,
getOptionLabel: getOptionLabel,
getOptionDisabled: getOptionDisabled,
renderInput: renderInput,
renderTags: renderTags,
renderOption: renderOption,
filterOptions: filterOptions
}, customAutocompleteProps)));
};
exports["default"] = _default;