@ray-js/components/lib/View/View.thing.js

Ray basic components

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
const _excluded = ["id", "className", "style", "hoverClassName", "hoverStartTime", "hoverStayTime", "children", "onLongClick", "onTouchStart", "onTouchMove", "onTouchEnd", "onTouchCancel", "onClick", "hoverable", "onTransitionEnd"];
import * as React from 'react';
import clsx from 'clsx';
import PropTypes from 'prop-types';
import { inlineStyle, useTouch } from '@ray-js/framework-shared';
import { View as RemaxView } from '@ray-js/adapter';
import styles from './index.module.less';
const View = /*#__PURE__*/React.forwardRef((props, ref) => {
  const {
      id,
      className,
      style,
      hoverClassName,
      hoverStartTime,
      hoverStayTime,
      children,
      onLongClick,
      onTouchStart,
      onTouchMove,
      onTouchEnd,
      onTouchCancel,
      onClick,
      hoverable,
      onTransitionEnd
    } = props,
    restProps = _objectWithoutProperties(props, _excluded);
  const [touching, handlers] = useTouch({
    hoverDelay: hoverStartTime,
    hoverDuration: hoverStayTime,
    onLongClick,
    onTouchStart,
    onTouchMove,
    onTouchEnd,
    onTouchCancel,
    onClick
  });
  return /*#__PURE__*/React.createElement(RemaxView
  // @ts-ignore
  , _extends({
    ref: ref,
    id: id,
    className: className,
    style: inlineStyle(style),
    hoverClassName: clsx({
      [styles.hover]: hoverable
    }, hoverClassName),
    hoverStartTime: hoverStartTime,
    hoverStayTime: hoverStayTime,
    onTransitionEnd: onTransitionEnd
  }, handlers, restProps), children);
});
View.displayName = 'View';
export default View;
View.propTypes = {
  id: PropTypes.string,
  className: PropTypes.string,
  style: PropTypes.object,
  hoverClassName: PropTypes.string,
  hoverStartTime: PropTypes.number,
  hoverStayTime: PropTypes.number,
  children: PropTypes.node,
  onLongClick: PropTypes.func,
  onTouchStart: PropTypes.func,
  onTouchMove: PropTypes.func,
  onTouchEnd: PropTypes.func,
  onTouchCancel: PropTypes.func,
  onClick: PropTypes.func,
  hoverable: PropTypes.bool,
  onTransitionEnd: PropTypes.func
};