@fruits-chain/react-native-xiaoshu/lib/module/water-mark/water-mark.js

🌈 React Native UI library

"use strict";

import React, { useState, memo } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { getDefaultValue } from "../helpers/index.js";
import { usePersistFn } from "../hooks/index.js";
import Theme from "../theme/index.js";
import { varCreator } from "./style.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const STYLES = StyleSheet.create({
  water_mark: {
    flex: 1,
    width: '100%',
    overflow: 'hidden'
  },
  text_row: {
    alignContent: 'center'
  },
  texts: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    flexDirection: 'row'
  }
});
const WaterMark = ({
  theme,
  text,
  color,
  fontSize,
  opacity,
  textWidth = 64,
  textHeight = 64,
  rotate = -45,
  foreground = false,
  children,
  style,
  onLayout,
  ...restProps
}) => {
  const [CV] = Theme.useStyle({
    varCreator,
    theme
  });
  const [measure, setMeasure] = useState({
    width: 0,
    height: 0
  });
  const _color = getDefaultValue(color, CV.water_mark_text_color);
  const _fontSize = getDefaultValue(fontSize, CV.water_mark_text_font_size);
  const _opacity = getDefaultValue(opacity, CV.water_mark_text_opacity);
  const onLayoutWrapper = usePersistFn(e => {
    onLayout?.(e);
    setMeasure(e.nativeEvent.layout);
  });
  const renderMark = () => {
    if (measure.height === 0 || measure.width === 0 || textWidth === 0 || textHeight === 0) {
      return null;
    }
    const texts = [];
    const x = Math.ceil(measure.width / textWidth);
    const y = Math.ceil(measure.height / textHeight);
    for (let index0 = 0; index0 < x * y; index0++) {
      const ts = [];
      for (let index1 = 0; index1 < y; index1++) {
        ts.push(/*#__PURE__*/_jsx(Text, {
          // eslint-disable-next-line react-native/no-inline-styles
          style: {
            color: _color,
            fontSize: _fontSize,
            width: textWidth,
            height: textHeight,
            lineHeight: textHeight,
            textAlign: 'center',
            opacity: _opacity,
            transform: [{
              rotateZ: `${rotate}deg`
            }]
          },
          children: text
        }, `${index0}_${index1}`));
      }
      texts.push(/*#__PURE__*/_jsx(View, {
        style: STYLES.text_row,
        children: ts
      }, index0));
    }
    return /*#__PURE__*/_jsx(View, {
      pointerEvents: "none",
      style: STYLES.texts,
      children: texts
    });
  };
  return /*#__PURE__*/_jsxs(View, {
    ...restProps,
    onLayout: onLayoutWrapper,
    style: style ? [STYLES.water_mark, style] : STYLES.water_mark,
    children: [!foreground ? renderMark() : null, children, foreground ? renderMark() : null]
  });
};
export default /*#__PURE__*/memo(WaterMark);
//# sourceMappingURL=water-mark.js.map