zmp-react/esm/zalo-ui-kits/picker.js

Build full featured iOS & Android apps using ZMP & React

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import React, { useRef, useEffect, useImperativeHandle, forwardRef } from 'react';
import ReactDOMServer from 'react-dom/server';
import Input from './input';
import { zmp } from '../shared/zmp';
import { htmlDecode } from '../../common/utils';
/* 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__*/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 = _objectWithoutPropertiesLoose(_ref, ["placeholder", "title", "inputId", "data", "defaultSelect", "selected", "actionText", "onChange", "onCancel", "onClickAction", "label", "errorMessage", "errorMessageForce", "required", "info", "style"]);

  var pickerDevice = useRef(null);
  var inputRef = useRef(null);
  useImperativeHandle(ref, function () {
    return pickerDevice.current;
  }, [pickerDevice.current]);
  useEffect(function () {
    var _inputRef$current;

    var inputEl = (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.el;
    pickerDevice.current = zmp.picker.create(_extends({}, 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 = ReactDOMServer.renderToStaticMarkup(columns);
        var toolbarMarkup = ReactDOMServer.renderToStaticMarkup(toolbar);
        var columnsHtml = htmlDecode(columnsMarkup);
        var toolbarHtml = 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.createElement("div", null, /*#__PURE__*/React.createElement(Input, {
    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';
export default Picker;