wix-style-react
Version:
379 lines (275 loc) • 18 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireDefault(require("react"));
var _DropdownLayout = require("../DropdownLayout/DropdownLayout");
var _Input = _interopRequireDefault(require("../Input"));
var _InputWithOptions2 = _interopRequireWildcard(require("../InputWithOptions/InputWithOptions"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
var AutoComplete = /*#__PURE__*/function (_InputWithOptions) {
(0, _inherits2["default"])(AutoComplete, _InputWithOptions);
var _super = _createSuper(AutoComplete);
function AutoComplete() {
(0, _classCallCheck2["default"])(this, AutoComplete);
return _super.apply(this, arguments);
}
(0, _createClass2["default"])(AutoComplete, [{
key: "dropdownAdditionalProps",
value: function dropdownAdditionalProps() {
var _this$props = this.props,
options = _this$props.options,
predicate = _this$props.predicate,
emptyStateMessage = _this$props.emptyStateMessage;
var filterFunc = this.state.isEditing ? predicate : function () {
return true;
};
var filtered = options.filter(filterFunc);
if (emptyStateMessage && filtered.length === 0) {
return {
options: [{
id: 'empty-state-message',
value: emptyStateMessage,
disabled: true
}]
};
} else {
return {
options: filtered
};
}
}
}]);
return AutoComplete;
}(_InputWithOptions2["default"]);
(0, _defineProperty2["default"])(AutoComplete, "displayName", 'AutoComplete');
(0, _defineProperty2["default"])(AutoComplete, "propTypes", {
/** Associate a control with the regions that it controls.*/
ariaControls: _propTypes["default"].string,
/** Associate a region with its descriptions. Similar to aria-controls but instead associating descriptions to the region and description identifiers are separated with a space.*/
ariaDescribedby: _propTypes["default"].string,
/** Define a string that labels the current element in case where a text label is not visible on the screen. */
ariaLabel: _propTypes["default"].string,
/** Focus the element on mount (standard React input autoFocus). */
autoFocus: _propTypes["default"].bool,
/** Select the entire text of the element on focus (standard React input autoSelect). */
autoSelect: _propTypes["default"].bool,
/** Control the border style of input. */
border: _propTypes["default"].oneOf(['standard', 'round', 'bottomLine']),
/** Specifies a CSS class name to be appended to the component’s root element.*/
className: _propTypes["default"].string,
/** Displays clear button (X) on a non-empty input. */
clearButton: _propTypes["default"].bool,
/** Closes DropdownLayout when option is selected.*/
closeOnSelect: _propTypes["default"].bool,
/** Render a custom input component instead of the default html input tag.*/
customInput: _propTypes["default"].elementType ? _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node, _propTypes["default"].elementType]) : _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
/** Applies a data-hook HTML attribute that can be used in the tests. */
dataHook: _propTypes["default"].string,
/** Sets a default value for those who want to use this component un-controlled. */
defaultValue: _propTypes["default"].string,
/** Specifies whether input should be disabled or not. */
disabled: _propTypes["default"].bool,
/** Restricts input editing.*/
disableEditing: _propTypes["default"].bool,
/** Sets the offset of the dropdown from the left in pixels. */
dropdownOffsetLeft: _propTypes["default"].string,
/** Sets the width of the dropdown in pixels.*/
dropdownWidth: _propTypes["default"].string,
/** Defines a message to be displayed instead of options when no options exist or no options pass the predicate filter function. */
emptyStateMessage: _propTypes["default"].node,
/** Adds a fixed footer container at the bottom of options list in `<DropdownLayout/>`.*/
fixedFooter: _propTypes["default"].node,
/** Adds a fixed header container at the top of options list in `<DropdownLayout/>`.*/
fixedHeader: _propTypes["default"].node,
/** Highlights and scrolls view to the specified option when dropdown layout is opened. It does not select the specified option. */
focusOnOption: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
/** Scrolls view to the selected option when dropdown layout is opened. */
focusOnSelectedOption: _propTypes["default"].bool,
/** USED FOR TESTING. Forces focus state on the input. */
forceFocus: _propTypes["default"].bool,
/** USED FOR TESTING. Forces hover state on the input.*/
forceHover: _propTypes["default"].bool,
/** Specifies whether there are more items to be loaded. */
hasMore: _propTypes["default"].bool,
/** Specifies whether status suffix should be hidden.*/
hideStatusSuffix: _propTypes["default"].bool,
/** Highlight word parts that match search criteria in bold. */
highlight: _propTypes["default"].node,
/** Assigns an unique identifier for the root element. */
id: _propTypes["default"].string,
/** Specifies whether `<DropdownLayout/>` is in a container component. If true, some styles such as shadows, positioning and padding will be added to the component contentContainer.*/
inContainer: _propTypes["default"].bool,
/** Specifies whether lazy loading of the dropdown layout items is enabled. */
infiniteScroll: _propTypes["default"].bool,
/** Allows to render a custom input component instead of the default `<Input/>`. */
inputElement: _propTypes["default"].element,
/** Defines a callback function which is called on a request to render more list items. */
loadMore: _propTypes["default"].func,
/**
* ##### Sets the default hover behavior:
* * `false` - no initially hovered list item
* * `true` - hover first selectable option
* * any `number/string` - specify the id of an option to be hovered
*/
markedOption: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].string, _propTypes["default"].number]),
/** Sets a maximum value of an input. Similar to html5 max attribute. */
max: _propTypes["default"].number,
/** Sets the maximum height of the dropdownLayout in pixels. */
maxHeightPixels: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
/** Sets the maximum number of characters that can be entered into a field.*/
maxLength: _propTypes["default"].number,
/** Specifies whether input should have a dropdown menu arrow on the right side. */
menuArrow: _propTypes["default"].bool,
/** Sets a minimum value of an input. Similar to HTML5 min attribute. */
min: _propTypes["default"].number,
/** Sets the minimum width of dropdownLayout in pixels. */
minWidthPixels: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
/** Reference element data when a form is submitted. */
name: _propTypes["default"].string,
/** Specifies whether input shouldn’t have rounded corners on its left. */
noLeftBorderRadius: _propTypes["default"].bool,
/** Specifies whether input shouldn’t have rounded corners on its right.*/
noRightBorderRadius: _propTypes["default"].bool,
/** Defines a standard input onBlur callback */
onBlur: _propTypes["default"].func,
/** Defines a standard input onChange callback.*/
onChange: _propTypes["default"].func,
/** Displays clear button (X) on a non-empty input and calls a callback function with no arguments.*/
onClear: _propTypes["default"].func,
/** Defines a callback function which is called whenever the user presses the escape key. */
onClose: _propTypes["default"].func,
/** Defines a callback function called on compositionstart/compositionend events.*/
onCompositionChange: _propTypes["default"].func,
/** Defines a callback handler that is called when user presses `enter`.*/
onEnterPressed: _propTypes["default"].func,
/** Defines a callback handler that is called when user presses `escape`.*/
onEscapePressed: _propTypes["default"].func,
/** Defines a standard input onFocus callback. */
onFocus: _propTypes["default"].func,
/** Defines a standard input onClick callback.*/
onInputClicked: _propTypes["default"].func,
/** Defines a standard input onKeyUp callback. */
onKeyDown: _propTypes["default"].func,
/** Defines a callback function which is called when user performs a submit action. Submit action triggers are: "Enter", "Tab", [typing any defined delimiters], paste action. `onManuallyInput(values: Array): void - The array of strings is the result of splitting the input value by the given delimiters.*/
onManuallyInput: _propTypes["default"].func,
/** Defines a callback function which is called whenever the user enters dropdown layout with the mouse cursor. */
onMouseEnter: _propTypes["default"].func,
/** Defines a callback function which is called whenever the user exits from dropdown layout with a mouse cursor.*/
onMouseLeave: _propTypes["default"].func,
/** Defines a callback function which is called whenever an option becomes focused (hovered/active). Receives the relevant option object from the original props.options array.*/
onOptionMarked: _propTypes["default"].func,
/** Defines a callback function which is called when options dropdown is hidden.*/
onOptionsHide: _propTypes["default"].func,
/** Defines a callback function which is called when options dropdown is shown.*/
onOptionsShow: _propTypes["default"].func,
/** Defines a callback handler that is called when user pastes text from a clipboard (using mouse or keyboard shortcut).*/
onPaste: _propTypes["default"].func,
/** Defines a callback function which is called whenever user selects a different option in the list.*/
onSelect: _propTypes["default"].func,
/** Specify an array of options:
* - id `<string / number>` *required*: the id of the option, should be unique.
* - value `<function / string / node>` *required*: can be a string, react element or a builder function.
* - disabled `<bool>` *default value- false*: whether this option is disabled or not
* - linkTo `<string>`: when provided the option will be an anchor to the given value
* - title `<bool>` *default value- false* **deprecated**: please use `listItemSectionBuilder` for rendering a title.
* - overrideStyle `<bool>` *default value- false* **deprecated**: please use `overrideOptionStyle` for override option styles.
* - overrideOptionStyle `<bool>` *default value- false* - when set to `true`, the option will be responsible to its own styles. No styles will be applied from the DropdownLayout itself.
* - label `<string>`: the string displayed within an input when the option is selected. This is used when using `<DropdownLayout/>` with an `<Input/>`.
*/
options: _propTypes["default"].arrayOf(_DropdownLayout.optionValidator),
/** Handles container overflow. */
overflow: _propTypes["default"].string,
/** Sets a pattern that typed value must match to be valid (regex). */
pattern: _propTypes["default"].string,
/** Sets a placeholder message to display. */
placeholder: _propTypes["default"].string,
/** Allows to pass all common popover props. */
popoverProps: _propTypes["default"].shape({
appendTo: _propTypes["default"].oneOf(['window', 'scrollParent', 'parent', 'viewport']),
maxWidth: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
minWidth: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
flip: _propTypes["default"].bool,
fixed: _propTypes["default"].bool,
placement: _propTypes["default"].oneOf(['auto-start', 'auto', 'auto-end', 'top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start']),
dynamicWidth: _propTypes["default"].bool
}),
/** Defines a callback predicate for the filtering options function. */
predicate: _propTypes["default"].func,
/** Pass a component you want to show as the prefix of the input, e.g., text string, icon. */
prefix: _propTypes["default"].node,
/** Specifies whether input is read only. */
readOnly: _propTypes["default"].bool,
/** Specifies whether input is mandatory. */
required: _propTypes["default"].bool,
/** Flip component horizontally so it would be more suitable to RTL. */
rtl: _propTypes["default"].bool,
/** Specifies whether selected option will be highlighted when dropdown is reopened.Specifies whether selected option will be highlighted when dropdown is reopened. */
selectedHighlight: _propTypes["default"].bool,
/** Specifies selected option by its id. */
selectedId: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
/** Controls whether to show options if input is empty. */
showOptionsIfEmptyInput: _propTypes["default"].bool,
/** Controls the size of the input. */
size: _propTypes["default"].oneOf(['small', 'medium', 'large']),
/** Specify the status of a field. */
status: _propTypes["default"].oneOf(['error', 'warning', 'loading']),
/** Defines the message to display on status icon hover. If not given or empty there will be no tooltip. */
statusMessage: _propTypes["default"].node,
/** Pass a component you want to show as the suffix of the input, e.g., text string, icon. */
suffix: _propTypes["default"].node,
/** Indicates that element can be focused and where it participates in sequential keyboard navigation.*/
tabIndex: _propTypes["default"].number,
/** Handles text overflow behavior. It can either clip (default) or display ellipsis. */
textOverflow: _propTypes["default"].string,
/** Controls placement of a status tooltip. */
tooltipPlacement: _propTypes["default"].string,
/** Specifies the type of `<input/>` element to display. Default is text string. */
type: _propTypes["default"].string,
/** Specifies whether component should be shown or hidden. */
visible: _propTypes["default"].bool
});
(0, _defineProperty2["default"])(AutoComplete, "defaultProps", {
predicate: function predicate() {
return true;
},
autoSelect: true,
border: 'standard',
clearButton: false,
closeOnSelect: true,
dropdownOffsetLeft: '0',
dropdownWidth: null,
hasMore: false,
hideStatusSuffix: false,
inContainer: false,
infiniteScroll: false,
loadMore: null,
markedOption: false,
maxHeightPixels: 260,
maxLength: 524288,
options: [],
overflow: 'auto',
selectedHighlight: true,
showOptionsIfEmptyInput: true,
size: 'medium',
textOverflow: 'clip',
onSelect: function onSelect() {},
inputElement: /*#__PURE__*/_react["default"].createElement(_Input["default"], null),
popoverProps: _InputWithOptions2.DEFAULT_POPOVER_PROPS,
tabIndex: 0
});
var _default = AutoComplete;
exports["default"] = _default;