@kirz/react-native-toolkit/lib/module/components/ViewInsetShadow.js

Toolkit to speed up React Native development

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React, { useEffect, useRef, useState } from 'react';
import { View, Image } from 'react-native';
import ViewShot from 'react-native-view-shot';
const cachedShadows = {};
export function ViewInsetShadow(_ref) {
  let {
    offsetX,
    offsetY,
    color = 'black',
    blurRadius = 10,
    wrapperProps,
    innerBorderRadiusStyle,
    ...props
  } = _ref;
  const viewShotRef = useRef();
  const onLayoutCalled = useRef(false);
  const invisibleBorderWidth = 20;
  const borderWidth = {
    x: Math.max(invisibleBorderWidth, Math.abs(offsetX ?? 0)) + 5,
    y: Math.max(invisibleBorderWidth, Math.abs(offsetY ?? 0)) + 5
  };
  const margin = {
    x: borderWidth.x,
    y: borderWidth.x
  };
  const cacheKey = `${color}_${blurRadius}_${offsetX}_${offsetY}_${JSON.stringify((wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.style) ?? {})}_${JSON.stringify(props.style)}_${JSON.stringify(margin)}`;
  const [imageUri, setImageUri] = useState(cachedShadows[cacheKey] ?? null);
  const redrawShadow = async () => {
    var _viewShotRef$current;
    if (!((_viewShotRef$current = viewShotRef.current) !== null && _viewShotRef$current !== void 0 && _viewShotRef$current.capture) || cachedShadows[cacheKey]) {
      return;
    }
    onLayoutCalled.current = true;
    const result = await viewShotRef.current.capture();
    cachedShadows[cacheKey] = result;
    setImageUri(result);
  };
  useEffect(() => {
    if (!onLayoutCalled.current || cachedShadows[cacheKey]) {
      return;
    }
    redrawShadow();
  }, [cacheKey]);
  return /*#__PURE__*/React.createElement(View, wrapperProps, /*#__PURE__*/React.createElement(View, {
    style: {
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0
    }
  }, /*#__PURE__*/React.createElement(ViewShot, {
    ref: viewShotRef,
    options: {
      result: 'tmpfile'
    },
    style: {
      position: 'absolute',
      left: -margin.x,
      right: -margin.x,
      bottom: -margin.y,
      top: -margin.y
    }
  }, /*#__PURE__*/React.createElement(View, _extends({}, props, {
    style: [props.style, {
      borderColor: color,
      borderLeftWidth: borderWidth.x,
      borderRightWidth: borderWidth.x,
      borderTopWidth: borderWidth.y,
      borderBottomWidth: borderWidth.y,
      borderBottomLeftRadius: innerBorderRadiusStyle.borderBottomLeftRadius + borderWidth.x,
      borderBottomRightRadius: innerBorderRadiusStyle.borderBottomRightRadius + borderWidth.x,
      borderTopLeftRadius: innerBorderRadiusStyle.borderTopLeftRadius + borderWidth.x,
      borderTopRightRadius: innerBorderRadiusStyle.borderTopRightRadius + borderWidth.x
    }, {
      left: offsetX,
      top: offsetY,
      height: '100%',
      width: '100%'
    }],
    onLayout: redrawShadow
  })))), imageUri && /*#__PURE__*/React.createElement(Image, {
    source: {
      uri: imageUri
    },
    blurRadius: blurRadius,
    style: {
      position: 'absolute',
      left: -margin.x,
      right: -margin.x,
      bottom: -margin.y,
      top: -margin.y
    }
  }));
}
//# sourceMappingURL=ViewInsetShadow.js.map