zmp-react/esm/components/toggle.js

Build full featured iOS & Android apps using ZMP & React

import _extends from "@babel/runtime/helpers/extends";
import React, { forwardRef, useRef, useImperativeHandle } from 'react';
import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect';
import { classNames, getExtraAttrs, emit } from '../shared/utils';
import { colorClasses } from '../shared/mixins';
import { zmpready, zmp } from '../shared/zmp';
import { watchProp } from '../shared/watch-prop';
import { useTooltip } from '../shared/use-tooltip';

var Toggle = /*#__PURE__*/forwardRef(function (props, ref) {
  var _zmpToggle = useRef(null);

  var className = props.className,
      id = props.id,
      style = props.style,
      _props$init = props.init,
      init = _props$init === void 0 ? true : _props$init,
      checked = props.checked,
      defaultChecked = props.defaultChecked,
      disabled = props.disabled,
      readonly = props.readonly,
      name = props.name,
      value = props.value;
  var extraAttrs = getExtraAttrs(props);
  var elRef = useRef(null);

  var onChange = function onChange(event) {
    emit(props, 'change', event);
  };

  useImperativeHandle(ref, function () {
    return {
      el: elRef.current,
      zmpToggle: function zmpToggle() {
        return _zmpToggle.current;
      }
    };
  });
  useTooltip(elRef, props);
  watchProp(checked, function (newValue) {
    if (!_zmpToggle.current) return;
    _zmpToggle.current.checked = newValue;
  });

  var onMount = function onMount() {
    zmpready(function () {
      if (!init || !elRef.current) return;
      _zmpToggle.current = zmp.toggle.create({
        el: elRef.current,
        on: {
          change: function change(toggleInstance) {
            emit(props, 'toggleChange', toggleInstance.checked);
          }
        }
      });
    });
  };

  var onDestroy = function onDestroy() {
    if (_zmpToggle.current && _zmpToggle.current.destroy && _zmpToggle.current.$el) {
      _zmpToggle.current.destroy();
    }

    _zmpToggle.current = null;
  };

  useIsomorphicLayoutEffect(function () {
    onMount();
    return onDestroy;
  }, []);
  var labelClasses = classNames('toggle', className, {
    disabled: disabled
  }, colorClasses(props));
  var inputEl = /*#__PURE__*/React.createElement("input", {
    type: "checkbox",
    name: name,
    disabled: disabled,
    readOnly: readonly,
    checked: checked,
    defaultChecked: defaultChecked,
    value: value,
    onChange: onChange
  });
  return /*#__PURE__*/React.createElement("label", _extends({
    id: id,
    style: style,
    className: labelClasses,
    ref: elRef
  }, extraAttrs), inputEl, /*#__PURE__*/React.createElement("span", {
    className: "toggle-icon"
  }));
});
Toggle.displayName = 'zmp-toggle';
export default Toggle;