@fruits-chain/react-native-xiaoshu/lib/module/skeleton/skeleton-paragraph.js

🌈 React Native UI library

import React, { useMemo, memo } from 'react';
import { PlaceholderLine } from 'rn-placeholder';
import Space from '../space';
import Theme from '../theme';
import SkeletonActive from './skeleton-active';
import { varCreator } from './style';

const SkeletonParagraph = _ref => {
  let {
    active = true,
    rows,
    widths
  } = _ref;
  const TOKENS = Theme.useThemeTokens();
  const CV = Theme.createVar(TOKENS, varCreator);
  const style = useMemo(() => ({
    backgroundColor: CV.skeleton_color
  }), [CV.skeleton_color]);
  const paragraphs = useMemo(() => new Array(rows).fill(0).map((_, i) => i), [rows]);
  const nodeJSX = /*#__PURE__*/React.createElement(Space, null, paragraphs.map(n => {
    return /*#__PURE__*/React.createElement(PlaceholderLine, {
      key: n,
      width: widths === null || widths === void 0 ? void 0 : widths[n],
      style: style,
      noMargin: true
    });
  }));

  if (active) {
    return /*#__PURE__*/React.createElement(SkeletonActive, null, nodeJSX);
  } // eslint-disable-next-line react/jsx-no-useless-fragment


  return nodeJSX;
};

export default /*#__PURE__*/memo(SkeletonParagraph);
//# sourceMappingURL=skeleton-paragraph.js.map