@ray-js/components/lib/View/View.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", "children", "hoverClassName", "hoverStartTime", "hoverStayTime", "hoverable", "onClick", "onLongClick", "onTouchCancel", "onTouchEnd", "onTouchMove", "onTouchStart", "onTransitionEnd"];
import * as React from 'react';
import clsx from 'clsx';
import PropTypes from 'prop-types';
import handleProps from '../utils/handleProps';
import { filterProps, inlineStyle, useTouch } from '@ray-js/framework-shared';
import { defaultViewProps } from './props';
import styles from './index.module.less';
const View = /*#__PURE__*/React.forwardRef((props, ref) => {
  const {
      id,
      className,
      style,
      children,
      hoverClassName,
      hoverStartTime,
      hoverStayTime,
      hoverable,
      onClick,
      onLongClick,
      onTouchCancel,
      onTouchEnd,
      onTouchMove,
      onTouchStart,
      onTransitionEnd
    } = props,
    restProps = _objectWithoutProperties(props, _excluded);
  const [touching, handlers] = useTouch({
    hoverDelay: hoverStartTime,
    hoverDuration: hoverStayTime,
    onLongClick,
    onTouchStart,
    onTouchMove,
    onTouchEnd,
    onTouchCancel,
    onClick
  });
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("v-view", _extends({}, handleProps(props), {
    ref: ref,
    id: id,
    class: clsx('ray-view', className, hoverable && touching && styles.hover, touching && hoverClassName),
    onTransitionEnd: onTransitionEnd,
    style: inlineStyle(style)
  }, handlers, filterProps(restProps)), children));
});
View.defaultProps = defaultViewProps;
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
};