@storybook/addon-ondevice-controls
Version:
Display storybook controls on your device.
42 lines (41 loc) • 1.81 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_native_theming_1 = require("@storybook/react-native-theming");
const RadioContainer = react_native_theming_1.styled.View(({ isInline }) => ({
flexDirection: isInline ? 'row' : 'column',
alignItems: isInline ? 'center' : 'flex-start',
flexWrap: 'wrap',
gap: 10,
}));
const RadioTouchable = react_native_theming_1.styled.TouchableOpacity(() => ({
alignItems: 'center',
flexDirection: 'row',
}));
const RadioCircle = react_native_theming_1.styled.View(({ theme }) => ({
width: 16,
height: 16,
borderWidth: 1,
borderColor: theme.appBorderColor,
borderRadius: '100%',
backgroundColor: theme.background.content,
alignItems: 'center',
justifyContent: 'center',
}));
const RadioInnerCircle = react_native_theming_1.styled.View(({ theme, selected }) => ({
width: 8,
height: 8,
borderRadius: '100%',
backgroundColor: selected ? theme.color.positive : 'transparent',
}));
const RadioLabel = react_native_theming_1.styled.Text(({ theme }) => ({
fontSize: theme.typography.size.s1,
paddingStart: 10,
color: theme.color.defaultText,
}));
const RadioSelect = ({ data = [], value = '', onChange, isInline }) => {
return ((0, jsx_runtime_1.jsx)(RadioContainer, { isInline: isInline, children: data.map((item) => ((0, jsx_runtime_1.jsxs)(RadioTouchable, { activeOpacity: 0.7, onPress: () => {
onChange(item);
}, children: [(0, jsx_runtime_1.jsx)(RadioCircle, { children: (0, jsx_runtime_1.jsx)(RadioInnerCircle, { selected: value === item.key }) }), (0, jsx_runtime_1.jsx)(RadioLabel, { children: item.label })] }, item.label))) }));
};
exports.default = RadioSelect;