@fruits-chain/react-native-xiaoshu/lib/module/divider/divider-line-dashed.js

🌈 React Native UI library

"use strict";

import React, { useState, useCallback, useMemo, memo } from 'react';
import { View, useWindowDimensions } from 'react-native';
import { Line, Svg } from 'react-native-svg';
import Theme from "../theme/index.js";
import { varCreator } from "./style.js";

/**
 * 分割线
 */
import { jsx as _jsx } from "react/jsx-runtime";
const DividerLineDashed = ({
  theme,
  color,
  position,
  adaptive = true,
  direction = 'horizontal'
}) => {
  const isVertical = direction === 'vertical';
  const {
    width
  } = useWindowDimensions();
  const [CV] = Theme.useStyle({
    varCreator,
    theme
  });
  const [size, setSize] = useState(isVertical ? CV.divider_vertical_min_height : width);
  const viewStyle = useMemo(() => {
    if (isVertical) {
      return {
        flex: 1,
        width: 1,
        height: '100%'
      };
    }
    const s = {
      flex: 1,
      maxWidth: 'auto'
    };
    if (position === 'left') {
      s.marginRight = CV.divider_margin_horizontal;
    }
    if (position === 'right') {
      s.marginLeft = CV.divider_margin_horizontal;
    }
    if (!adaptive) {
      s.maxWidth = position === 'left' ? CV.divider_content_left_width : CV.divider_content_right_width;
    }
    return s;
  }, [isVertical, position, adaptive, CV.divider_margin_horizontal, CV.divider_content_left_width, CV.divider_content_right_width]);
  const onLayout = useCallback(e => {
    setSize(e.nativeEvent.layout[isVertical ? 'height' : 'width']);
  }, [isVertical]);
  return /*#__PURE__*/_jsx(View, {
    onLayout: onLayout,
    style: viewStyle,
    children: isVertical ? /*#__PURE__*/_jsx(Svg, {
      width: 1,
      height: size,
      viewBox: `0 0 1 ${size}`,
      children: /*#__PURE__*/_jsx(Line, {
        x1: "0.5",
        y1: "0",
        x2: "0.5",
        y2: size,
        strokeWidth: 1,
        strokeDasharray: "2 2",
        stroke: color
      })
    }) : /*#__PURE__*/_jsx(Svg, {
      width: size,
      height: 1,
      viewBox: `0 0 ${size} 1`,
      children: /*#__PURE__*/_jsx(Line, {
        x1: "0",
        y1: "0.5",
        x2: size,
        y2: "0.5",
        strokeWidth: 1,
        strokeDasharray: "2 2",
        stroke: color
      })
    })
  });
};
export default /*#__PURE__*/memo(DividerLineDashed);
//# sourceMappingURL=divider-line-dashed.js.map