zmp-react
Version:
Build full featured iOS & Android apps using ZMP & React
262 lines (230 loc) • 10.4 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _useIsomorphicLayoutEffect = require("../shared/use-isomorphic-layout-effect");
var _utils = require("../shared/utils");
var _mixins = require("../shared/mixins");
var _zmp = require("../shared/zmp");
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; }
var Searchbar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
var _zmpSearchbar = (0, _react.useRef)(null);
var className = props.className,
id = props.id,
style = props.style,
noShadow = props.noShadow,
noHairline = props.noHairline,
_props$form = props.form,
form = _props$form === void 0 ? true : _props$form,
_props$placeholder = props.placeholder,
placeholder = _props$placeholder === void 0 ? 'Search' : _props$placeholder,
spellcheck = props.spellcheck,
_props$disableButton = props.disableButton,
disableButton = _props$disableButton === void 0 ? true : _props$disableButton,
_props$disableButtonT = props.disableButtonText,
disableButtonText = _props$disableButtonT === void 0 ? 'Cancel' : _props$disableButtonT,
_props$clearButton = props.clearButton,
clearButton = _props$clearButton === void 0 ? true : _props$clearButton,
value = props.value,
_props$inputEvents = props.inputEvents,
inputEvents = _props$inputEvents === void 0 ? 'change input compositionend' : _props$inputEvents,
expandable = props.expandable,
inline = props.inline,
searchContainer = props.searchContainer,
_props$searchIn = props.searchIn,
searchIn = _props$searchIn === void 0 ? '.item-title' : _props$searchIn,
_props$searchItem = props.searchItem,
searchItem = _props$searchItem === void 0 ? 'li' : _props$searchItem,
_props$searchGroup = props.searchGroup,
searchGroup = _props$searchGroup === void 0 ? '.list-group' : _props$searchGroup,
_props$searchGroupTit = props.searchGroupTitle,
searchGroupTitle = _props$searchGroupTit === void 0 ? '.item-divider, .list-group-title' : _props$searchGroupTit,
_props$foundEl = props.foundEl,
foundEl = _props$foundEl === void 0 ? '.searchbar-found' : _props$foundEl,
_props$notFoundEl = props.notFoundEl,
notFoundEl = _props$notFoundEl === void 0 ? '.searchbar-not-found' : _props$notFoundEl,
backdrop = props.backdrop,
backdropEl = props.backdropEl,
_props$hideOnEnableEl = props.hideOnEnableEl,
hideOnEnableEl = _props$hideOnEnableEl === void 0 ? '.searchbar-hide-on-enable' : _props$hideOnEnableEl,
_props$hideOnSearchEl = props.hideOnSearchEl,
hideOnSearchEl = _props$hideOnSearchEl === void 0 ? '.searchbar-hide-on-search' : _props$hideOnSearchEl,
_props$ignore = props.ignore,
ignore = _props$ignore === void 0 ? '.searchbar-ignore' : _props$ignore,
_props$customSearch = props.customSearch,
customSearch = _props$customSearch === void 0 ? false : _props$customSearch,
_props$removeDiacriti = props.removeDiacritics,
removeDiacritics = _props$removeDiacriti === void 0 ? false : _props$removeDiacriti,
_props$hideDividers = props.hideDividers,
hideDividers = _props$hideDividers === void 0 ? true : _props$hideDividers,
_props$hideGroups = props.hideGroups,
hideGroups = _props$hideGroups === void 0 ? true : _props$hideGroups,
_props$init = props.init,
init = _props$init === void 0 ? true : _props$init;
var extraAttrs = (0, _utils.getExtraAttrs)(props);
var elRef = (0, _react.useRef)(null);
var inputRef = (0, _react.useRef)(null);
var search = function search(query) {
if (!_zmpSearchbar.current) return undefined;
return _zmpSearchbar.current.search(query);
};
var enable = function enable() {
if (!_zmpSearchbar.current) return undefined;
return _zmpSearchbar.current.enable();
};
var disable = function disable() {
if (!_zmpSearchbar.current) return undefined;
return _zmpSearchbar.current.disable();
};
var toggle = function toggle() {
if (!_zmpSearchbar.current) return undefined;
return _zmpSearchbar.current.toggle();
};
var clear = function clear() {
if (!_zmpSearchbar.current) return undefined;
return _zmpSearchbar.current.clear();
};
var onChange = function onChange(event) {
(0, _utils.emit)(props, 'change', event);
};
var onInput = function onInput(event) {
(0, _utils.emit)(props, 'input', event);
};
var onFocus = function onFocus(event) {
(0, _utils.emit)(props, 'focus', event);
};
var onBlur = function onBlur(event) {
(0, _utils.emit)(props, 'blur', event);
};
var onSubmit = function onSubmit(event) {
(0, _utils.emit)(props, 'submit', event);
};
var onClearButtonClick = function onClearButtonClick(event) {
(0, _utils.emit)(props, 'click:clear clickClear', event);
};
var onDisableButtonClick = function onDisableButtonClick(event) {
(0, _utils.emit)(props, 'click:disable clickDisable', event);
};
(0, _react.useImperativeHandle)(ref, function () {
return {
el: elRef.current,
input: inputRef.current,
zmpSearchbar: function zmpSearchbar() {
return _zmpSearchbar.current;
},
search: search,
enable: enable,
disable: disable,
toggle: toggle,
clear: clear
};
});
var onMount = function onMount() {
if (!init) return;
(0, _zmp.zmpready)(function () {
var params = (0, _utils.noUndefinedProps)({
el: elRef.current,
inputEvents: inputEvents,
searchContainer: searchContainer,
searchIn: searchIn,
searchItem: searchItem,
searchGroup: searchGroup,
searchGroupTitle: searchGroupTitle,
hideOnEnableEl: hideOnEnableEl,
hideOnSearchEl: hideOnSearchEl,
foundEl: foundEl,
notFoundEl: notFoundEl,
backdrop: backdrop,
backdropEl: backdropEl,
disableButton: disableButton,
ignore: ignore,
customSearch: customSearch,
removeDiacritics: removeDiacritics,
hideDividers: hideDividers,
hideGroups: hideGroups,
expandable: expandable,
inline: inline,
on: {
search: function search(searchbar, query, previousQuery) {
(0, _utils.emit)(props, 'searchbarSearch', searchbar, query, previousQuery);
},
clear: function clear(searchbar, previousQuery) {
(0, _utils.emit)(props, 'searchbarClear', searchbar, previousQuery);
},
enable: function enable(searchbar) {
(0, _utils.emit)(props, 'searchbarEnable', searchbar);
},
disable: function disable(searchbar) {
(0, _utils.emit)(props, 'searchbarDisable', searchbar);
}
}
});
Object.keys(params).forEach(function (key) {
if (params[key] === '') {
delete params[key];
}
});
_zmpSearchbar.current = _zmp.zmp.searchbar.create(params);
});
};
var onDestroy = function onDestroy() {
if (_zmpSearchbar.current && _zmpSearchbar.current.destroy) _zmpSearchbar.current.destroy();
_zmpSearchbar.current = null;
};
(0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
onMount();
return onDestroy;
}, []);
var clearEl;
var disableEl;
if (clearButton) {
clearEl = /*#__PURE__*/_react.default.createElement("span", {
className: "input-clear-button",
onClick: onClearButtonClick
});
}
if (disableButton) {
disableEl = /*#__PURE__*/_react.default.createElement("span", {
className: "searchbar-disable-button",
onClick: onDisableButtonClick
}, disableButtonText);
}
var SearchbarTag = form ? 'form' : 'div';
var classes = (0, _utils.classNames)(className, 'searchbar', {
'searchbar-inline': inline,
'no-shadow': noShadow,
'no-hairline': noHairline,
'searchbar-expandable': expandable
}, (0, _mixins.colorClasses)(props));
var slots = (0, _utils.getSlots)(props);
return /*#__PURE__*/_react.default.createElement(SearchbarTag, (0, _extends2.default)({
ref: elRef,
id: id,
style: style,
className: classes
}, extraAttrs, {
onSubmit: onSubmit
}), slots['before-inner'], /*#__PURE__*/_react.default.createElement("div", {
className: "searchbar-inner"
}, slots['inner-start'], /*#__PURE__*/_react.default.createElement("div", {
className: "searchbar-input-wrap"
}, slots['input-wrap-start'], /*#__PURE__*/_react.default.createElement("input", {
ref: inputRef,
value: value,
placeholder: placeholder,
spellCheck: spellcheck,
type: "search",
onInput: onInput,
onChange: onChange,
onFocus: onFocus,
onBlur: onBlur
}), /*#__PURE__*/_react.default.createElement("i", {
className: "searchbar-icon"
}), clearEl, slots['input-wrap-end']), disableEl, slots['inner-end'], slots.default), slots['after-inner']);
});
Searchbar.displayName = 'zmp-searchbar';
var _default = Searchbar;
exports.default = _default;