@td-design/react-native/lib/module/divider/index.js

react-native UI组件库

import React from 'react';
import { StyleSheet } from 'react-native';
import Svg, { G, Rect } from 'react-native-svg';
import { useTheme } from '@shopify/restyle';
import Box from '../box';
import Flex from '../flex';
import helpers from '../helpers';
import Text from '../text';
const {
  px,
  ONE_PIXEL,
  deviceWidth
} = helpers;
const Divider = props => {
  const theme = useTheme();
  const {
    type = 'solid',
    axis = 'horizontal',
    margin = 'x1',
    height = px(40),
    color = theme.colors.border,
    text = '',
    textAlign = 'center',
    dashGap,
    dashLength,
    dashThickness
  } = props;
  if (!text) {
    if (type === 'dashed') {
      return axis === 'horizontal' ? /*#__PURE__*/React.createElement(HorizontalDashLine, {
        dashLength,
        dashThickness,
        dashGap,
        color,
        margin
      }) : /*#__PURE__*/React.createElement(VerticalDashLine, {
        dashLength,
        dashThickness,
        dashGap,
        color,
        margin,
        height
      });
    }
    return /*#__PURE__*/React.createElement(Box, {
      style: [{
        backgroundColor: color
      }, axis === 'horizontal' ? {
        width: '100%',
        height: ONE_PIXEL,
        marginVertical: theme.spacing[margin]
      } : {
        width: ONE_PIXEL,
        height,
        marginHorizontal: theme.spacing[margin]
      }]
    });
  }
  const styles = StyleSheet.create({
    line: {
      width: '100%',
      height: ONE_PIXEL,
      backgroundColor: color
    },
    'prefix-left': {
      flex: 1
    },
    'prefix-center': {
      flex: 1
    },
    'prefix-right': {
      flex: 6
    },
    'suffix-left': {
      flex: 6
    },
    'suffix-center': {
      flex: 1
    },
    'suffix-right': {
      flex: 1
    },
    content: {
      marginHorizontal: px(8)
    }
  });
  return /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Box, {
    style: [type === 'dashed' ? {} : styles.line, styles[`prefix-${textAlign}`]]
  }, type === 'dashed' && /*#__PURE__*/React.createElement(HorizontalDashLine, {
    dashLength,
    dashThickness,
    dashGap,
    color,
    margin
  })), /*#__PURE__*/React.createElement(Box, {
    style: styles.content
  }, /*#__PURE__*/React.createElement(Text, {
    variant: "p3",
    color: "text"
  }, text)), /*#__PURE__*/React.createElement(Box, {
    style: [type === 'dashed' ? {} : styles.line, styles[`suffix-${textAlign}`]]
  }, type === 'dashed' && /*#__PURE__*/React.createElement(HorizontalDashLine, {
    dashLength,
    dashThickness,
    dashGap,
    color,
    margin
  })));
};
Divider.displayName = 'Divider';
export default Divider;
const HorizontalDashLine = _ref => {
  let {
    dashLength,
    dashThickness,
    dashGap,
    color,
    margin
  } = _ref;
  const itemWidth = dashLength ?? px(8);
  const itemHeight = dashThickness ?? px(1);
  const spacing = dashGap ? dashGap + itemWidth : px(16);
  const dashes = new Array(Math.floor(deviceWidth / spacing)).fill(null);
  return /*#__PURE__*/React.createElement(Box, {
    marginVertical: margin,
    width: "100%"
  }, /*#__PURE__*/React.createElement(Svg, {
    height: itemHeight,
    width: "100%"
  }, /*#__PURE__*/React.createElement(G, null, dashes.map((_, index) => /*#__PURE__*/React.createElement(Rect, {
    key: index,
    x: "0",
    y: "0",
    width: itemWidth,
    height: itemHeight,
    fill: color,
    translateX: spacing * index
  })))));
};
const VerticalDashLine = _ref2 => {
  let {
    dashLength,
    dashThickness,
    dashGap,
    color,
    margin,
    height
  } = _ref2;
  const itemHeight = dashThickness ?? px(4);
  const itemWidth = dashLength ?? px(1);
  const spacing = dashGap ? dashGap + itemHeight : px(4);
  const dashes = new Array(Math.floor(height / spacing)).fill(null);
  return /*#__PURE__*/React.createElement(Box, {
    marginHorizontal: margin,
    height: height
  }, /*#__PURE__*/React.createElement(Svg, {
    width: itemWidth,
    height: "100%"
  }, /*#__PURE__*/React.createElement(G, null, dashes.map((_, index) => /*#__PURE__*/React.createElement(Rect, {
    key: index,
    x: "0",
    y: spacing ? spacing / 2 : 0,
    width: itemWidth,
    height: itemHeight,
    fill: color,
    translateY: spacing * index
  })))));
};
//# sourceMappingURL=index.js.map