dash-core-components
Version:
Core component suite for Dash
192 lines (190 loc) • 8.74 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireWildcard(require("react"));
require("./css/react-select@1.0.0-rc.3.min.css");
var _optionTypes = require("../utils/optionTypes");
var _LoadingElement = _interopRequireDefault(require("../utils/LoadingElement"));
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 }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
/**
* RadioItems is a component that encapsulates several radio item inputs.
* The values and labels of the RadioItems is specified in the `options`
* property and the seleced item is specified with the `value` property.
* Each radio item is rendered as an input with a surrounding label.
*/
class RadioItems extends _react.Component {
render() {
var _this$props = this.props,
id = _this$props.id,
className = _this$props.className,
style = _this$props.style,
inputClassName = _this$props.inputClassName,
inputStyle = _this$props.inputStyle,
labelClassName = _this$props.labelClassName,
labelStyle = _this$props.labelStyle,
options = _this$props.options,
setProps = _this$props.setProps,
value = _this$props.value,
inline = _this$props.inline;
var ids = {};
if (id) {
ids = {
id,
key: id
};
}
return /*#__PURE__*/_react.default.createElement(_LoadingElement.default, _extends({}, ids, {
className: className,
style: style
}), (0, _optionTypes.sanitizeOptions)(options).map(option => /*#__PURE__*/_react.default.createElement("label", {
style: _objectSpread({
display: inline ? 'inline-block' : 'block'
}, labelStyle),
className: labelClassName,
key: option.value,
title: option.title
}, /*#__PURE__*/_react.default.createElement("input", {
checked: option.value === value,
className: inputClassName,
disabled: Boolean(option.disabled),
style: inputStyle,
type: "radio",
onChange: () => {
setProps({
value: option.value
});
}
}), option.label)));
}
}
exports.default = RadioItems;
RadioItems.propTypes = {
/**
* An array of options, or inline dictionary of options
*/
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
}))]),
/**
* The currently selected value
*/
value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool]),
/**
* Indicates whether the options labels should be displayed inline (true=horizontal)
* or in a block (false=vertical).
*/
inline: _propTypes.default.bool,
/**
* The style of the container (div)
*/
style: _propTypes.default.object,
/**
* The class of the container (div)
*/
className: _propTypes.default.string,
/**
* The style of the <input> radio element
*/
inputStyle: _propTypes.default.object,
/**
* The class of the <input> radio element
*/
inputClassName: _propTypes.default.string,
/**
* The style of the <label> that wraps the radio input
* and the option's label
*/
labelStyle: _propTypes.default.object,
/**
* The class of the <label> that wraps the radio input
* and the option's label
*/
labelClassName: _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 value 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'])
};
RadioItems.defaultProps = {
inputStyle: {},
inputClassName: '',
labelStyle: {},
labelClassName: '',
options: [],
persisted_props: ['value'],
persistence_type: 'local',
inline: false
};