@zohodesk/components
Version:
In this Package, we Provide Some Basic Components to Build Web App
237 lines (219 loc) • 6.91 kB
JavaScript
import React, { useRef, useState } from 'react';
import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
import { CardHeader_propTypes, CardContent_propTypes, Card_propTypes, CardFooter_propTypes } from "./props/propTypes";
import { Card_defaultProps, CardHeader_defaultProps, CardContent_defaultProps, CardFooter_defaultProps } from "./props/defaultProps";
import { Container, Box } from "../Layout";
import { getLibraryConfig } from "../../Provider/Config";
import style from "../../Card/Card.module.css";
/* eslint-disable react/forbid-component-props */
/*
isscroll header border change use ref
scroll logic remove from here
scroll logic move to virtualizer list
*/
/* performance handling pending in card component moving to ref instead of setState */
export function CardHeader(props) {
let {
isScroll,
children,
dataId,
dataSelectorId,
customClass
} = props;
const cardHeader = useRef(null);
function getCardHeaderDom(ele) {
cardHeader.current = ele;
}
function setScrollClassName() {
if (!cardHeader.current) {
return null;
}
}
return /*#__PURE__*/React.createElement(Box, {
className: `${isScroll ? style.scroll : style.notScroll} ${customClass}`,
eleRef: getCardHeaderDom,
dataId: dataId,
dataSelectorId: dataSelectorId
}, children);
}
CardHeader.propTypes = CardHeader_propTypes;
CardHeader.defaultProps = CardHeader_defaultProps;
export function CardContent(props) {
let {
onScroll,
eleRef,
children,
scroll,
isScrollAttribute,
dataId,
dataSelectorId,
shrink,
customClass,
preventParentScroll
} = props;
return /*#__PURE__*/React.createElement(Box, {
flexible: true,
onScroll: onScroll,
eleRef: eleRef,
scroll: scroll,
preventParentScroll: preventParentScroll,
isScrollAttribute: isScrollAttribute,
dataId: dataId,
shrink: shrink,
className: customClass,
dataSelectorId: dataSelectorId
}, children);
}
CardContent.propTypes = CardContent_propTypes;
CardContent.defaultProps = CardContent_defaultProps;
export default function Card(props) {
let {
onClick,
children,
isScrollAttribute,
dataId,
eleRef,
customClass = '',
htmlId,
a11y,
from,
limit,
fetchData,
noMoreData,
scrollAt,
noNeedUpScroll,
isPercentageScroll,
onScroll
} = props;
let {
role
} = a11y;
const [isScroll, setScroll] = useState(false);
const fromRef = useRef(from);
const limitRef = useRef(limit);
const to = useRef(from + 3 * limit);
const lastScrollTop = useRef(0);
const isFetching = useRef(false);
const scrollDirection = useRef(null);
useEffectCallOnlyAfterState(() => {
fromRef.current = from;
}, [from]);
function onCardScroll(e) {
let scrollContainerObj = e.currentTarget;
let {
scrollHeight
} = scrollContainerObj;
let {
scrollTop
} = scrollContainerObj;
let {
offsetHeight
} = scrollContainerObj;
onScroll && onScroll(e);
if (scrollTop > lastScrollTop.current) {
scrollDirection.current = 'down';
} else {
scrollDirection.current = 'up';
}
lastScrollTop.current = scrollTop;
if (fetchData && !isFetching.current) {
if (scrollDirection.current === 'down' && !noMoreData) {
const scrollingPercentage = (scrollTop + offsetHeight) / (scrollHeight - scrollAt) * 100;
const prefetch = isPercentageScroll ? scrollingPercentage >= getLibraryConfig('scrollFetchLimit') : scrollHeight - scrollAt <= scrollTop + offsetHeight;
if (prefetch) {
isFetching.current = true;
fetchData(fromRef.current + limitRef.current, limitRef.current + to.current, scrollDirection.current).then(() => {
to.current = limitRef.current + to.current;
isFetching.current = false;
}, () => {
isFetching.current = false;
});
}
} else {
if (0 >= scrollTop - scrollAt && fromRef.current !== 0 && !noNeedUpScroll) {
isFetching.current = true;
fetchData(fromRef.current - limitRef.current, to.current - limitRef.current, scrollDirection.current).then(() => {
to.current = to.current - limitRef.current;
isFetching.current = false;
}, () => {
isFetching.current = false;
});
}
}
}
if (fetchData && !noNeedUpScroll) {
if (fromRef.current !== 0 && scrollTop === 0 && !noNeedUpScroll) {
scrollContainerObj.scrollTop = scrollTop + offsetHeight / 3;
} else if (scrollHeight === scrollTop + offsetHeight && !noMoreData) {
scrollContainerObj.scrollTop = scrollTop - offsetHeight / 2;
}
} // if (isScrollShadow) {
// this.onSetScroll();
// }
} // setScroll(isScroll) {
// let { isScroll: stateIsScroll } = this.state;
// if (isScroll && !stateIsScroll) {
// this.setState({ isScroll: true }, () => {
// this.onClearScroll();
// });
// } else if (!isScroll && stateIsScroll) {
// this.setState({ isScroll: false });
// }
// }
return /*#__PURE__*/React.createElement(Container, {
className: `${customClass}`,
isScrollAttribute: isScrollAttribute,
onClick: onClick,
dataId: dataId,
eleRef: eleRef
}, React.Children.map(children, child => {
if (!child) {
return child;
}
if (child.type === CardHeader || props.childTypes && child.type === props.childTypes.cardHeader) {
return /*#__PURE__*/React.cloneElement(child, {
isScroll
});
} else if (child.type === CardContent || props.childTypes && child.type === props.childTypes.cardContent) {
return /*#__PURE__*/React.createElement(Box, {
id: htmlId,
role: role,
flexible: true,
scroll: child.props.scroll,
preventParentScroll: child.props.preventParentScroll,
onScroll: onCardScroll,
eleRef: child.props.eleRef,
isScrollAttribute: child.props.isScrollAttribute,
dataId: child.props.dataId,
shrink: child.props.shrink,
className: child.props.customClass,
dataSelectorId: child.props.dataSelectorId
}, child.props.children);
}
return child;
}));
}
Card.propTypes = Card_propTypes;
Card.defaultProps = Card_defaultProps; // if (__DOCS__) {
// Card.docs = {
// componentGroup: 'Template',
// folderName: 'Style Guide',
// external: true,
// description: ' '
// };
// }
export function CardFooter(props) {
let {
children,
dataId,
customClass,
dataSelectorId
} = props;
return /*#__PURE__*/React.createElement(Box, {
className: `${customClass}`,
dataId: dataId,
dataSelectorId: dataSelectorId
}, children);
}
CardFooter.propTypes = CardFooter_propTypes;
CardFooter.defaultProps = CardFooter_defaultProps;