dash-core-components
Version:
Core component suite for Dash
182 lines (180 loc) • 7.64 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.propTypes = exports.defaultProps = exports.default = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireWildcard(require("react"));
var _dropdown = _interopRequireDefault(require("../utils/LazyLoader/dropdown"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
var RealDropdown = /*#__PURE__*/(0, _react.lazy)(_dropdown.default);
/**
* Dropdown is an interactive dropdown element for selecting one or more
* items.
* The values and labels of the dropdown items are specified in the `options`
* property and the selected item(s) are specified with the `value` property.
*
* Use a dropdown when you have many options (more than 5) or when you are
* constrained for space. Otherwise, you can use RadioItems or a Checklist,
* which have the benefit of showing the users all of the items at once.
*/
class Dropdown extends _react.Component {
render() {
return /*#__PURE__*/_react.default.createElement(_react.Suspense, {
fallback: null
}, /*#__PURE__*/_react.default.createElement(RealDropdown, this.props));
}
}
exports.default = Dropdown;
Dropdown.propTypes = {
/**
* An array of options {label: [string|number], value: [string|number]},
* an optional disabled field can be used for each option
*/
options: _propTypes.default.oneOfType([
/**
* Array of options where the label and the value are the same thing - [string|number|bool]
*/
_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool])),
/**
* Simpler `options` representation in dictionary format. The order is not guaranteed.
* {`value1`: `label1`, `value2`: `label2`, ... }
* which is equal to
* [{label: `label1`, value: `value1`}, {label: `label2`, value: `value2`}, ...]
*/
_propTypes.default.object,
/**
* An array of options {label: [string|number], value: [string|number]},
* an optional disabled field can be used for each option
*/
_propTypes.default.arrayOf(_propTypes.default.exact({
/**
* The option's label
*/
label: _propTypes.default.node.isRequired,
/**
* The value of the option. This value
* corresponds to the items specified in the
* `value` property.
*/
value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool]).isRequired,
/**
* If true, this option is disabled and cannot be selected.
*/
disabled: _propTypes.default.bool,
/**
* The HTML 'title' attribute for the option. Allows for
* information on hover. For more information on this attribute,
* see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title
*/
title: _propTypes.default.string,
/**
* Optional search value for the option, to use if the label
* is a component or provide a custom search value different
* from the label. If no search value and the label is a
* component, the `value` will be used for search.
*/
search: _propTypes.default.string
}))]),
/**
* The value of the input. If `multi` is false (the default)
* then value is just a string that corresponds to the values
* provided in the `options` property. If `multi` is true, then
* multiple values can be selected at once, and `value` is an
* array of items with values corresponding to those in the
* `options` prop.
*/
value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool]))]),
/**
* If true, the user can select multiple values
*/
multi: _propTypes.default.bool,
/**
* Whether or not the dropdown is "clearable", that is, whether or
* not a small "x" appears on the right of the dropdown that removes
* the selected value.
*/
clearable: _propTypes.default.bool,
/**
* Whether to enable the searching feature or not
*/
searchable: _propTypes.default.bool,
/**
* The value typed in the DropDown for searching.
*/
search_value: _propTypes.default.string,
/**
* The grey, default text shown when no option is selected
*/
placeholder: _propTypes.default.string,
/**
* If true, this dropdown is disabled and the selection cannot be changed.
*/
disabled: _propTypes.default.bool,
/**
* If false, the menu of the dropdown will not close once a value is selected.
*/
closeOnSelect: _propTypes.default.bool,
/**
* height of each option. Can be increased when label lengths would wrap around
*/
optionHeight: _propTypes.default.number,
/**
* height of the options dropdown.
*/
maxHeight: _propTypes.default.number,
/**
* Defines CSS styles which will override styles previously set.
*/
style: _propTypes.default.object,
/**
* className of the dropdown element
*/
className: _propTypes.default.string,
/**
* The ID of this component, used to identify dash components
* in callbacks. The ID needs to be unique across all of the
* components in an app.
*/
id: _propTypes.default.string,
/**
* Dash-assigned callback that gets fired when the input changes
*/
setProps: _propTypes.default.func,
/**
* Used to allow user interactions in this component to be persisted when
* the component - or the page - is refreshed. If `persisted` is truthy and
* hasn't changed from its previous value, a `value` that the user has
* changed while using the app will keep that change, as long as
* the new `value` also matches what was given originally.
* Used in conjunction with `persistence_type`.
*/
persistence: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string, _propTypes.default.number]),
/**
* Properties whose user interactions will persist after refreshing the
* component or the page. Since only `value` is allowed this prop can
* normally be ignored.
*/
persisted_props: _propTypes.default.arrayOf(_propTypes.default.oneOf(['value'])),
/**
* Where persisted user changes will be stored:
* memory: only kept in memory, reset on page refresh.
* local: window.localStorage, data is kept after the browser quit.
* session: window.sessionStorage, data is cleared once the browser quit.
*/
persistence_type: _propTypes.default.oneOf(['local', 'session', 'memory'])
};
Dropdown.defaultProps = {
clearable: true,
disabled: false,
multi: false,
searchable: true,
optionHeight: 35,
maxHeight: 200,
closeOnSelect: true,
persisted_props: ['value'],
persistence_type: 'local'
};
var propTypes = exports.propTypes = Dropdown.propTypes;
var defaultProps = exports.defaultProps = Dropdown.defaultProps;