react-native-inner-shadow/lib/module/components/CornerRadii.js

react native inner shadows with linear gradient design UI

"use strict";

import React from 'react';
import { RoundedRect } from '@shopify/react-native-skia';
import { getBorderRadius } from "../utils.js";
import { CANVAS_PADDING } from "../constants.js";
import { jsx as _jsx } from "react/jsx-runtime";
export const CornerRadii = /*#__PURE__*/React.memo(function CornerRadii({
  width,
  height,
  style,
  children,
  backgroundColor
}) {
  const rrct = React.useMemo(() => {
    const {
      topLeftRadius,
      topRightRadius,
      bottomRightRadius,
      bottomLeftRadius
    } = getBorderRadius({
      borderRadius: style?.borderRadius,
      borderTopStartRadius: style?.borderTopStartRadius,
      borderTopLeftRadius: style?.borderTopLeftRadius,
      borderTopEndRadius: style?.borderTopEndRadius,
      borderTopRightRadius: style?.borderTopRightRadius,
      borderBottomStartRadius: style?.borderBottomStartRadius,
      borderBottomLeftRadius: style?.borderBottomLeftRadius,
      borderBottomEndRadius: style?.borderBottomEndRadius,
      borderBottomRightRadius: style?.borderBottomRightRadius
    });
    return {
      rect: {
        x: CANVAS_PADDING,
        y: CANVAS_PADDING,
        width: width,
        height: height
      },
      topLeft: {
        x: topLeftRadius,
        y: topLeftRadius
      },
      topRight: {
        x: topRightRadius,
        y: topRightRadius
      },
      bottomRight: {
        x: bottomRightRadius,
        y: bottomRightRadius
      },
      bottomLeft: {
        x: bottomLeftRadius,
        y: bottomLeftRadius
      }
    };
  }, [width, height, style?.borderRadius, style?.borderTopStartRadius, style?.borderTopLeftRadius, style?.borderTopEndRadius, style?.borderTopRightRadius, style?.borderBottomStartRadius, style?.borderBottomLeftRadius, style?.borderBottomEndRadius, style?.borderBottomRightRadius]);
  return /*#__PURE__*/_jsx(RoundedRect, {
    rect: rrct,
    color: backgroundColor,
    children: children
  });
});
//# sourceMappingURL=CornerRadii.js.map