@ozen-ui/kit
Version:
React component library
42 lines (41 loc) • 3.58 kB
JavaScript
import { __assign, __rest } from "tslib";
import './modules/DataListCardStatus/DataListCardStatus.css';
import './modules/DataListCardItem/DataListCardItem.css';
import './DataListCard.css';
import React from 'react';
import { useThemeProps } from '../../hooks/useThemeProps';
import { cn } from '../../utils/classname';
import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
import { DataListBase } from '../DataListBase';
import { ListCardContext } from '../ListCard';
import { DataListCardNoOption, DataListCardLoading } from './components';
import { DATA_LIST_CARD_DEFAULT_LOADING, DATA_LIST_CARD_DEFAULT_SHADOW, DATA_LIST_CARD_DEFAULT_SHOW_NO_OPTIONS, DATA_LIST_CARD_DEFAULT_TAG, DATA_LIST_CARD_RADIUS_BY_SIZE, DATA_LIST_CARD_DEFAULT_BACKGROUND_COLOR_SCHEME, DATA_LIST_CARD_DEFAULT_CONTENT_TRAILING_RATIO, DATA_LIST_CARD_DEFAULT_INTERACTIVE, DATA_LIST_CARD_DEFAULT_SIZE, } from './constants';
import { DataListCardContext } from './DataListCardContext';
export var cnDataListCard = cn('DataListCard');
var DataListCardRender = function (inProps, ref) {
var props = useThemeProps({
props: inProps,
name: 'DataListCard',
});
var className = props.className, children = props.children, _a = props.as, as = _a === void 0 ? DATA_LIST_CARD_DEFAULT_TAG : _a, active = props.active, _b = props.size, size = _b === void 0 ? DATA_LIST_CARD_DEFAULT_SIZE : _b, borderColorScheme = props.borderColorScheme, _c = props.backgroundColorScheme, backgroundColorScheme = _c === void 0 ? DATA_LIST_CARD_DEFAULT_BACKGROUND_COLOR_SCHEME : _c, _d = props.interactive, interactive = _d === void 0 ? DATA_LIST_CARD_DEFAULT_INTERACTIVE : _d, _e = props.contentTrailingRatio, contentTrailingRatio = _e === void 0 ? DATA_LIST_CARD_DEFAULT_CONTENT_TRAILING_RATIO : _e, _f = props.shadow, shadow = _f === void 0 ? DATA_LIST_CARD_DEFAULT_SHADOW : _f, radiusProp = props.radius, _g = props.loading, loading = _g === void 0 ? DATA_LIST_CARD_DEFAULT_LOADING : _g, loadingText = props.loadingText, _h = props.showNoOptions, showNoOptions = _h === void 0 ? DATA_LIST_CARD_DEFAULT_SHOW_NO_OPTIONS : _h, noOptionsText = props.noOptionsText, other = __rest(props, ["className", "children", "as", "active", "size", "borderColorScheme", "backgroundColorScheme", "interactive", "contentTrailingRatio", "shadow", "radius", "loading", "loadingText", "showNoOptions", "noOptionsText"]);
var radius = radiusProp !== null && radiusProp !== void 0 ? radiusProp : DATA_LIST_CARD_RADIUS_BY_SIZE[size];
return (React.createElement(ListCardContext.Provider, { value: {
variant: 'list',
size: size,
borderColorScheme: borderColorScheme,
backgroundColorScheme: backgroundColorScheme,
interactive: interactive,
contentTrailingRatio: contentTrailingRatio,
} },
React.createElement(DataListCardContext.Provider, { value: {
size: size,
showNoOptions: showNoOptions,
loading: loading,
} },
React.createElement(DataListBase, __assign({}, other, { as: as, active: active, className: cnDataListCard({ size: size }, [className]), shadow: shadow, radius: radius, ref: ref }),
children,
React.createElement(DataListCardLoading, { loadingText: loadingText }),
React.createElement(DataListCardNoOption, { noOptionsText: noOptionsText })))));
};
export var DataListCard = polymorphicComponentWithRef(DataListCardRender);
DataListCard.displayName = 'DataListCard';