@tra-tech/react-native-kitra
Version:
UI kit for React Native
197 lines (196 loc) • 6.9 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _reactNative = require("react-native");
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
var _react = require("react");
var _KitraProvider = require("../../core/KitraProvider");
var _Icon = _interopRequireDefault(require("../Icons/Icon"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
const styles = _reactNative.StyleSheet.create({
childrenContainer: {
width: 50,
height: 50,
borderRadius: 50,
position: 'absolute',
flexDirection: 'row'
},
childrenText: {
right: 60,
top: 10,
position: 'absolute',
fontSize: 12,
fontWeight: '500',
paddingVertical: 5,
paddingHorizontal: 12,
textAlign: 'center'
},
childrenButton: {
width: '100%',
height: '100%',
borderRadius: 50,
justifyContent: 'center',
alignItems: 'center'
},
container: {
width: 40,
position: 'absolute',
bottom: '5%'
},
innerContainer: {
justifyContent: 'center',
alignItems: 'center'
},
nodeContainer: {
width: 60,
height: 60,
borderRadius: 50
},
nodeButton: {
width: '100%',
height: '100%',
borderRadius: 50,
justifyContent: 'center',
alignItems: 'center'
}
});
const ChildItem = _ref => {
let {
item,
index,
offset,
onPress,
variant,
typography
} = _ref;
const childRotate = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
transform: [{
translateY: -offset.value * ((index + 1) * 65)
}],
opacity: offset.value
}));
const childRotete1 = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
transform: [{
translateX: -offset.value * 80
}],
opacity: offset.value
}));
const childRotete2 = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
transform: [{
translateX: -offset.value * 60
}, {
translateY: -offset.value * 60
}],
opacity: offset.value
}));
const childRotete3 = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
transform: [{
translateY: -offset.value * 80
}],
opacity: offset.value
}));
return /*#__PURE__*/React.createElement(_reactNativeReanimated.default.View, {
key: index,
style: [styles.childrenContainer, variant === 'spread' ? index === 0 && childRotete1 || index === 1 && childRotete2 || index === 2 && childRotete3 : [childRotate, {
bottom: 20
}], {
backgroundColor: item.backgroundColor || '#82B98E'
}]
}, variant !== 'spread' && item.title ? /*#__PURE__*/React.createElement(_reactNative.View, {
style: [styles.childrenText, {
backgroundColor: 'white',
borderRadius: 5
}]
}, /*#__PURE__*/React.createElement(_reactNative.Text, {
style: [{
color: item.titleColor || '#82B98E',
fontSize: typography === null || typography === void 0 ? void 0 : typography.body.xsmedium.fontSize,
lineHeight: typography === null || typography === void 0 ? void 0 : typography.body.xsmedium.lineHeight
}]
}, item.title)) : null, /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
onPress: onPress,
testID: `children_item_${index}`,
style: styles.childrenButton
}, item.icon));
};
const SpeedDial = _ref2 => {
let {
theme,
typography,
baseItemBackground = theme === null || theme === void 0 ? void 0 : theme.tertiary,
items,
onChange,
variant = 'flat',
baseItemIcon = /*#__PURE__*/React.createElement(_Icon.default, {
type: "material-community",
name: "close",
size: 25,
color: theme === null || theme === void 0 ? void 0 : theme.white
})
} = _ref2;
const offset = (0, _reactNativeReanimated.useSharedValue)(0);
const rotate = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
transform: [{
rotateZ: `${(offset.value - 1) * 45}deg`
}]
}));
const animationStartConfig = {
damping: 10,
mass: 1
};
const animationEndConfig = {
mass: 1,
stiffness: 100
};
(0, _react.useEffect)(() => {
if (variant === 'spread') {
items = items.slice(0, 3);
}
}, [variant]);
const onPress = () => {
if (offset.value > 0) {
offset.value = (0, _reactNativeReanimated.withSpring)(0, animationStartConfig);
onChange && onChange(false);
} else {
offset.value = (0, _reactNativeReanimated.withSpring)(1, animationEndConfig);
onChange && onChange(true);
}
};
return /*#__PURE__*/React.createElement(_reactNative.View, {
style: [{
right: '7%'
}, {
alignSelf: 'flex-end'
}, styles.container]
}, /*#__PURE__*/React.createElement(_reactNative.View, {
style: styles.innerContainer
}, /*#__PURE__*/React.createElement(React.Fragment, null, items.map((item, index) => /*#__PURE__*/React.createElement(ChildItem, {
typography: typography,
key: index,
item: item,
index: index,
offset: offset,
variant: variant,
onPress: item.onPress
}))), /*#__PURE__*/React.createElement(_reactNativeReanimated.default.View, {
style: [baseItemIcon === /*#__PURE__*/React.createElement(_Icon.default, {
type: "material-community",
name: "close",
size: 25,
color: theme === null || theme === void 0 ? void 0 : theme.white
}) ? rotate : null, styles.nodeContainer, {
backgroundColor: baseItemBackground
}]
}, /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
testID: "base_item",
style: styles.nodeButton,
onPress: onPress
}, baseItemIcon))));
};
var _default = (0, _KitraProvider.applyDefaults)(SpeedDial);
exports.default = _default;
//# sourceMappingURL=SpeedDial.js.map