6 examples of 'boxshadow react native' in JavaScript

30
render() {
31
    const _a = this.props, { settings, children } = _a, others = __rest(_a, ["settings", "children"]);
32
    const { width = 0, height = 0, color = "#000", border = 0, radius = 0, opacity = 1, x = 0, y = 0, } = settings;
33
    const lineWidth = border, rectWidth = width - radius * 2, rectHeight = height - radius * 2;
34
    const outerWidth = lineWidth + radius;
35
    const middleOffset = radius / outerWidth;
36
    return (React.createElement(react_native_1.View, Object.assign({}, others),
37
        React.createElement(Svg, { height: height + lineWidth * 2 + radius * 2, width: width + lineWidth * 2 + radius * 2, style: { position: "absolute", top: y - lineWidth, left: x - lineWidth } },
38
            React.createElement(Defs, null,
39
                React.createElement(LinearGradient, { id: "top", x1: "0", y1: `${lineWidth}`, x2: "0", y2: "0" }, this.linear('BoxTop', opacity, color)),
40
                React.createElement(LinearGradient, { id: "bottom", x1: "0", y1: "0", x2: "0", y2: `${lineWidth}` }, this.linear('BoxBottom', opacity, color)),
41
                React.createElement(LinearGradient, { id: "left", x1: `${lineWidth}`, y1: "0", x2: "0", y2: "0" }, this.linear('BoxLeft', opacity, color)),
42
                React.createElement(LinearGradient, { id: "right", x1: "0", y1: "0", x2: `${lineWidth}`, y2: "0" }, this.linear('BoxRight', opacity, color)),
43
                React.createElement(RadialGradient, { id: "border-left-top", r: outerWidth, cx: outerWidth, cy: outerWidth, fx: outerWidth, fy: outerWidth }, this.radial('BoxLeftTop', opacity, color, middleOffset)),
44
                React.createElement(RadialGradient, { id: "border-left-bottom", r: outerWidth, cx: outerWidth, cy: 0, fx: outerWidth, fy: 0 }, this.radial('BoxLeftBottom', opacity, color, middleOffset)),
45
                React.createElement(RadialGradient, { id: "border-right-top", r: outerWidth, cx: 0, cy: outerWidth, fx: 0, fy: outerWidth }, this.radial('BoxRightTop', opacity, color, middleOffset)),
46
                React.createElement(RadialGradient, { id: "border-right-bottom", r: outerWidth, cx: 0, cy: 0, fx: 0, fy: 0 }, this.radial('BoxRightBottom', opacity, color, middleOffset))),
47
            React.createElement(Path, { d: `M 0 ${outerWidth},Q 0 0 ${outerWidth} 0,v ${lineWidth},q ${-radius} 0 ${-radius} ${radius},h ${-lineWidth},z`, fill: "url(#border-left-top)" }),
48
            React.createElement(Path, { d: `M ${rectWidth + lineWidth + radius} 0,q ${outerWidth} 0 ${outerWidth} ${outerWidth},h ${-lineWidth},q 0 ${-radius} ${-radius} ${-radius},v ${-lineWidth},z`, fill: "url(#border-right-top)" }),
49
            React.createElement(Path, { d: `M ${rectWidth + lineWidth + 2 * radius} ${rectHeight + lineWidth + radius},h ${lineWidth},q 0 ${outerWidth} -${outerWidth} ${outerWidth},v ${-lineWidth},q ${radius} 0 ${radius} ${-radius},z`, fill: "url(#border-right-bottom)" }),
50
            React.createElement(Path, { d: `M 0 ${rectHeight + lineWidth + radius},q 0 ${outerWidth} ${outerWidth} ${outerWidth},v ${-lineWidth},q ${-radius} 0 ${-radius} ${-radius},h ${-lineWidth},z`, fill: "url(#border-left-bottom)" }),
51
            React.createElement(Rect, { x: outerWidth, y: "0", width: rectWidth, height: lineWidth, fill: "url(#top)" }),
52
            React.createElement(Rect, { x: "0", y: outerWidth, width: lineWidth, height: rectHeight, fill: "url(#left)" }),
53
            React.createElement(Rect, { x: rectWidth + lineWidth + 2 * radius, y: outerWidth, width: lineWidth, height: rectHeight, fill: "url(#right)" }),
54
            React.createElement(Rect, { x: outerWidth, y: rectHeight + lineWidth + 2 * radius, width: rectWidth, height: lineWidth, fill: "url(#bottom)" }),
55
            React.createElement(Path, { d: `M ${outerWidth} ${lineWidth},h ${rectWidth},q ${radius} 0 ${radius} ${radius},v ${rectHeight},q 0 ${radius} -${radius} ${radius},h -${rectWidth},q -${radius} 0 -${radius} -${radius},v -${rectHeight},q 0 -${radius} ${radius} -${radius}`, fill: alpha(color, opacity) })),
56
        children));
57
}

147
var boxShadow = function boxShadow(dp) {
148
  if (dp === 0) return 'none';
149
  var shadow = '0px ';
150
  var ambientY = dp;
151
  var ambientBlur = dp == 1 ? 3 : dp * 2;
152
  var ambientAlpha = (dp + 10 + dp / 9.38) / 100;
153
  shadow += ambientY + 'px ' + ambientBlur + 'px rgba(0, 0, 0, ' + ambientAlpha + '), 0px ';
154
  var directY = dp < 10 ? dp % 2 == 0 ? dp - (dp / 2 - 1) : dp - (dp - 1) / 2 : dp - 4;
155
  var directBlur = dp == 1 ? 3 : dp * 2;
156
  var directAlpha = (24 - Math.round(dp / 10)) / 100;
157
  shadow += directY + 'px ' + directBlur + 'px rgba(0, 0, 0, ' + directAlpha + ')';
158
  return shadow;
159
};

27
var returnBoxShadow = function returnBoxShadow(color) {
28
29
  return '0 1.4rem 2.6rem -1.2rem ' + hexa(color, 0.42) + ', 0 .4rem 2.3rem 0 rgba(0,0,0,0.12), 0 .8rem 1rem -.5rem ' + hexa(color, 0.2);
30
};

8
export function boxShadow(
9
  offsetX: number,
10
  offsetY: number,
11
  blurRadius: number,
12
  spreadRadius: number,
13
  color?: ?string,
14
): string {
15
  if (color === none || color == null) {
16
    return none;
17
  }
18
  return `${offsetX}px ${offsetY}px ${blurRadius}px ${spreadRadius}px ${color}`;
19
}

22
patchReactNativeWithZone(zone: any): void {}

26
render() {
27
  return createElement(Page, this.props);
28
}