@arpitbhalla/rneui-base-dev
Version:
Cross Platform React Native UI Toolkit
111 lines (110 loc) • 6.35 kB
JavaScript
"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Icon = void 0;
var react_1 = __importDefault(require("react"));
var react_native_1 = require("react-native");
var color_1 = __importDefault(require("color"));
var getIconType_1 = __importDefault(require("../helpers/getIconType"));
var getIconStyle_1 = __importDefault(require("../helpers/getIconStyle"));
var helpers_1 = require("../helpers");
var Icon = function (_a) {
var _b, _c, _d;
var _e = _a.type, type = _e === void 0 ? 'material' : _e, name = _a.name, _f = _a.size, size = _f === void 0 ? 24 : _f, colorProp = _a.color, iconStyle = _a.iconStyle, iconProps = _a.iconProps, _g = _a.underlayColor, underlayColor = _g === void 0 ? 'transparent' : _g, _h = _a.reverse, reverse = _h === void 0 ? false : _h, _j = _a.raised, raised = _j === void 0 ? false : _j, containerStyle = _a.containerStyle, reverseColorProp = _a.reverseColor, _k = _a.disabled, disabled = _k === void 0 ? false : _k, disabledStyle = _a.disabledStyle, onPress = _a.onPress, onLongPress = _a.onLongPress, onPressIn = _a.onPressIn, onPressOut = _a.onPressOut, _l = _a.Component, Component = _l === void 0 ? onPress || onLongPress || onPressIn || onPressOut
? react_native_1.Pressable
: react_native_1.View : _l, _m = _a.solid, solid = _m === void 0 ? false : _m, _o = _a.brand, brand = _o === void 0 ? false : _o, _p = _a.theme, theme = _p === void 0 ? helpers_1.defaultTheme : _p, pressableProps = _a.pressableProps, rest = __rest(_a, ["type", "name", "size", "color", "iconStyle", "iconProps", "underlayColor", "reverse", "raised", "containerStyle", "reverseColor", "disabled", "disabledStyle", "onPress", "onLongPress", "onPressIn", "onPressOut", "Component", "solid", "brand", "theme", "pressableProps"]);
var color = colorProp || ((_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.black);
var reverseColor = reverseColorProp || ((_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.white);
var IconComponent = (0, getIconType_1.default)(type);
var iconSpecificStyle = (0, getIconStyle_1.default)(type, { solid: solid, brand: brand });
var getBackgroundColor = react_1.default.useMemo(function () {
var _a;
if (reverse) {
return color;
}
return raised ? (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.white : 'transparent';
}, [color, raised, reverse, (_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.white]);
var buttonStyles = react_1.default.useMemo(function () { return ({
borderRadius: size + 4,
height: size * 2 + 4,
width: size * 2 + 4,
}); }, [size]);
return (react_1.default.createElement(react_native_1.View, { style: react_native_1.StyleSheet.flatten([
!raised && styles.container,
(reverse || raised) && styles.button,
(reverse || raised) && buttonStyles,
raised && styles.raised,
iconStyle && iconStyle.borderRadius
? {
borderRadius: iconStyle.borderRadius,
}
: {},
containerStyle && containerStyle,
]), testID: "RNE__ICON__CONTAINER" },
react_1.default.createElement(Component, __assign({ testID: "RNE__ICON__CONTAINER_ACTION" }, __assign(__assign({ android_ripple: (0, helpers_1.androidRipple)((0, color_1.default)(reverse ? color : underlayColor)
.alpha(0.3)
.rgb()
.string()), onPress: onPress, onLongPress: onLongPress, onPressIn: onPressIn, onPressOut: onPressOut, disabled: disabled, accessibilityRole: 'button' }, pressableProps), rest)),
react_1.default.createElement(react_native_1.View, { style: react_native_1.StyleSheet.flatten([
(reverse || raised) && buttonStyles,
{
backgroundColor: getBackgroundColor,
alignItems: 'center',
justifyContent: 'center',
},
disabled && styles.disabled,
disabled && disabledStyle,
]), testID: "RNE__ICON" },
react_1.default.createElement(IconComponent, __assign({ testID: "RNE__ICON__Component", style: react_native_1.StyleSheet.flatten([
{ backgroundColor: 'transparent' },
iconStyle && iconStyle,
]), size: size, name: name, color: reverse ? reverseColor : color }, iconSpecificStyle, iconProps))))));
};
exports.Icon = Icon;
var styles = react_native_1.StyleSheet.create({
container: {
overflow: 'hidden',
},
button: {
margin: 7,
},
raised: __assign({}, react_native_1.Platform.select({
android: {
elevation: 2,
},
default: {
shadowColor: 'rgba(0,0,0, .4)',
shadowOffset: { height: 1, width: 1 },
shadowOpacity: 1,
shadowRadius: 1,
},
})),
disabled: {
backgroundColor: '#D1D5D8',
},
});
exports.Icon.displayName = 'Icon';