zmp-react
Version:
Build full featured iOS & Android apps using ZMP & React
152 lines (133 loc) • 6.93 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _react = _interopRequireWildcard(require("react"));
var _server = _interopRequireDefault(require("react-dom/server"));
var _input = _interopRequireDefault(require("./input"));
var _zmp = require("../shared/zmp");
var _utils = require("../../common/utils");
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; }
/* dts-props
placeholder?: string
title?: string
inputID?: string
label?: label;
errorMessage? : string
errorMessageForce? : boolean
required? : boolean
info? : string
style?: React.CSSProperties;
data?: any[];
defaultSelect?: any[];
selected?: string;
actionText?: string;
onClickAction: (...args: any[]) => void
onChange?: (...args: any[]) => void
onCancel?: (...args: any[]) => void
CHILDREN_PROP
*/
var Picker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
var placeholder = _ref.placeholder,
_ref$title = _ref.title,
title = _ref$title === void 0 ? '' : _ref$title,
inputId = _ref.inputId,
_ref$data = _ref.data,
data = _ref$data === void 0 ? [] : _ref$data,
defaultSelect = _ref.defaultSelect,
selected = _ref.selected,
_ref$actionText = _ref.actionText,
actionText = _ref$actionText === void 0 ? 'Done' : _ref$actionText,
onChange = _ref.onChange,
onCancel = _ref.onCancel,
onClickAction = _ref.onClickAction,
label = _ref.label,
errorMessage = _ref.errorMessage,
errorMessageForce = _ref.errorMessageForce,
required = _ref.required,
info = _ref.info,
style = _ref.style,
props = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["placeholder", "title", "inputId", "data", "defaultSelect", "selected", "actionText", "onChange", "onCancel", "onClickAction", "label", "errorMessage", "errorMessageForce", "required", "info", "style"]);
var pickerDevice = (0, _react.useRef)(null);
var inputRef = (0, _react.useRef)(null);
(0, _react.useImperativeHandle)(ref, function () {
return pickerDevice.current;
}, [pickerDevice.current]);
(0, _react.useEffect)(function () {
var _inputRef$current;
var inputEl = (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.el;
pickerDevice.current = _zmp.zmp.picker.create((0, _extends2.default)({}, props, {
inputEl: inputEl ? inputEl.querySelector('input') : "#" + inputId,
rotateEffect: false,
backdrop: true,
value: selected || defaultSelect,
render: function render() {
var _this = this;
var columns = this.cols.map(function (col) {
return _this.renderColumn(col);
});
var toolbar = this.params.toolbar && this.renderToolbar();
var columnsMarkup = _server.default.renderToStaticMarkup(columns);
var toolbarMarkup = _server.default.renderToStaticMarkup(toolbar);
var columnsHtml = (0, _utils.htmlDecode)(columnsMarkup);
var toolbarHtml = (0, _utils.htmlDecode)(toolbarMarkup);
var classes = this.params.cssClass || '';
var renderEl = "<div class=\"sheet-modal picker picker-sheet " + classes + "\">\n <div class=\"zmp-picker-sheet-header\">\n <a class=\"zmp-picker-close-btn link sheet-close popover-close no-ripple\" ></a>\n " + (title ? "<div class=\"zmp-picker-sheet-title\">" + title + "</div>" : '') + "\n </div>\n <div class=\"sheet-modal-inner picker-columns\">\n " + columnsHtml + "\n <div class=\"picker-center-highlight\"></div>\n </div>\n " + toolbarHtml + "\n </div>";
return renderEl;
},
renderToolbar: function renderToolbar() {
return '<div class="toolbar">' + '<div class="toolbar-inner">' + '<div class="zmp-toolbar-center">' + ("<a href=\"#\" class=\"zmp-picker-action-button\">" + actionText + "</a>") + '</div>' + '</div>' + '</div>';
},
cols: data,
on: {
open: function open(picker) {
picker.$el.find('.zmp-picker-action-button').on('click', function () {
if (typeof onClickAction === 'function') {
onClickAction(picker);
} else {
picker.close();
}
});
},
change: function change(picker, value, displayValue) {
if (typeof onChange === 'function') {
onChange(picker, value, displayValue);
}
},
close: function close(picker) {
if (typeof onCancel === 'function') {
onCancel(picker);
}
}
}
}));
return function () {
if (pickerDevice.current) {
if (pickerDevice.current.opened) {
pickerDevice.current.close();
}
pickerDevice.current.destroy();
}
pickerDevice.current = null;
};
}, []);
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_input.default, {
type: "text",
label: label,
ref: inputRef,
placeholder: placeholder,
readonly: true,
inputId: inputId,
errorMessage: errorMessage,
errorMessageForce: errorMessageForce,
required: required,
info: info,
style: style
}));
});
Picker.displayName = 'zmp-picker';
var _default = Picker;
exports.default = _default;