dash-core-components
Version:
Core component suite for Dash
223 lines (221 loc) • 9.19 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _ramda = require("ramda");
var _excluded = ["setProps", "value", "n_blur", "n_blur_timestamp", "n_clicks", "n_clicks_timestamp", "persisted_props", "persistence_type"];
/* eslint-disable no-unused-vars */
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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
var textAreaProps = ['id', 'autoFocus', 'cols', 'disabled', 'form', 'maxLength', 'minLength', 'name', 'placeholder', 'readOnly', 'required', 'rows', 'wrap', 'accessKey', 'className', 'contentEditable', 'contextMenu', 'dir', 'draggable', 'hidden', 'lang', 'spellCheck', 'style', 'tabIndex', 'title'];
/**
* A basic HTML textarea for entering multiline text.
*
*/
var Textarea = _ref => {
var setProps = _ref.setProps,
value = _ref.value,
_ref$n_blur = _ref.n_blur,
n_blur = _ref$n_blur === void 0 ? 0 : _ref$n_blur,
_ref$n_blur_timestamp = _ref.n_blur_timestamp,
n_blur_timestamp = _ref$n_blur_timestamp === void 0 ? -1 : _ref$n_blur_timestamp,
n_clicks = _ref.n_clicks,
_ref$n_clicks_timesta = _ref.n_clicks_timestamp,
n_clicks_timestamp = _ref$n_clicks_timesta === void 0 ? -1 : _ref$n_clicks_timesta,
persisted_props = _ref.persisted_props,
persistence_type = _ref.persistence_type,
props = _objectWithoutProperties(_ref, _excluded);
var ctx = window.dash_component_api.useDashContext();
var isLoading = ctx.useLoading();
return /*#__PURE__*/_react.default.createElement("textarea", _extends({
"data-dash-is-loading": isLoading || undefined,
value: value,
onChange: e => {
setProps({
value: e.target.value
});
},
onBlur: () => {
setProps({
n_blur: n_blur + 1,
n_blur_timestamp: Date.now()
});
},
onClick: () => {
setProps({
n_clicks: n_clicks + 1,
n_clicks_timestamp: Date.now()
});
}
}, (0, _ramda.pick)(textAreaProps, props)));
};
Textarea.dashPersistence = {
persisted_props: ['value'],
persistence_type: 'local'
};
Textarea.propTypes = {
/**
* 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,
/**
* The value of the textarea
*/
value: _propTypes.default.string,
/**
* The element should be automatically focused after the page loaded.
*/
autoFocus: _propTypes.default.string,
/**
* Defines the number of columns in a textarea.
*/
cols: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/**
* Indicates whether the user can interact with the element.
*/
disabled: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
/**
* Indicates the form that is the owner of the element.
*/
form: _propTypes.default.string,
/**
* Defines the maximum number of characters allowed in the element.
*/
maxLength: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/**
* Defines the minimum number of characters allowed in the element.
*/
minLength: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/**
* Name of the element. For example used by the server to identify the fields in form submits.
*/
name: _propTypes.default.string,
/**
* Provides a hint to the user of what can be entered in the field.
*/
placeholder: _propTypes.default.string,
/**
* Indicates whether the element can be edited.
* readOnly is an HTML boolean attribute - it is enabled by a boolean or
* 'readOnly'. Alternative capitalizations `readonly` & `READONLY`
* are also acccepted.
*/
readOnly: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.oneOf(['readOnly', 'readonly', 'READONLY'])]),
/**
* Indicates whether this element is required to fill out or not.
* required is an HTML boolean attribute - it is enabled by a boolean or
* 'required'. Alternative capitalizations `REQUIRED`
* are also acccepted.
*/
required: _propTypes.default.oneOfType([_propTypes.default.oneOf(['required', 'REQUIRED']), _propTypes.default.bool]),
/**
* Defines the number of rows in a text area.
*/
rows: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/**
* Indicates whether the text should be wrapped.
*/
wrap: _propTypes.default.string,
/**
* Defines a keyboard shortcut to activate or add focus to the element.
*/
accessKey: _propTypes.default.string,
/**
* Often used with CSS to style elements with common properties.
*/
className: _propTypes.default.string,
/**
* Indicates whether the element's content is editable.
*/
contentEditable: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
/**
* Defines the ID of a <menu> element which will serve as the element's context menu.
*/
contextMenu: _propTypes.default.string,
/**
* Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
*/
dir: _propTypes.default.string,
/**
* Defines whether the element can be dragged.
*/
draggable: _propTypes.default.oneOfType([
// enumerated property, not a boolean property: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable
_propTypes.default.oneOf(['true', 'false']), _propTypes.default.bool]),
/**
* Prevents rendering of given element, while keeping child elements, e.g. script elements, active.
*/
hidden: _propTypes.default.string,
/**
* Defines the language used in the element.
*/
lang: _propTypes.default.string,
/**
* Indicates whether spell checking is allowed for the element.
*/
spellCheck: _propTypes.default.oneOfType([
// enumerated property, not a boolean property: https://www.w3.org/TR/html51/editing.html#spelling-and-grammar-checking
_propTypes.default.oneOf(['true', 'false']), _propTypes.default.bool]),
/**
* Defines CSS styles which will override styles previously set.
*/
style: _propTypes.default.object,
/**
* Overrides the browser's default tab order and follows the one specified instead.
*/
tabIndex: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/**
* Text to be displayed in a tooltip when hovering over the element.
*/
title: _propTypes.default.string,
/**
* Number of times the textarea lost focus.
*/
n_blur: _propTypes.default.number,
/**
* Last time the textarea lost focus.
*/
n_blur_timestamp: _propTypes.default.number,
/**
* Number of times the textarea has been clicked.
*/
n_clicks: _propTypes.default.number,
/**
* Last time the textarea was clicked.
*/
n_clicks_timestamp: _propTypes.default.number,
/**
* 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'])
};
var _default = exports.default = Textarea;