@prosperitainova/dumbo-react-native
Version:
Dumbo for React Native Library
148 lines (145 loc) • 4.21 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Tabs = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _colors = require("../../styles/colors");
var _helpers = require("../../helpers");
var _Text = require("../Text");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/** Item to pass to Tabs */
/** Props for Tabs component */
/**
* Tabs component for rendering tabs on the page
*
* {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Tabs.tsx | Example code}
*/
class Tabs extends _react.default.Component {
state = {
currentIndex: 0
};
get styles() {
const basicStyle = {
padding: 16,
paddingTop: 15,
paddingBottom: 11,
flex: 1,
minHeight: 48,
borderBottomWidth: 3,
borderBottomColor: (0, _colors.getColor)('layer01')
};
return _reactNative.StyleSheet.create({
scrollWrapper: {
// Space for scrollbar
paddingBottom: 16,
flexGrow: 1
},
wrapper: {
minHeight: 48,
flexDirection: 'row',
width: '100%'
},
item: {
...basicStyle,
backgroundColor: (0, _colors.getColor)('layer01')
}
});
}
changeItem = (item, index) => {
const {
onChange
} = this.props;
this.setState({
currentIndex: index
}, () => {
if (typeof onChange === 'function') {
onChange(index, item);
}
});
};
getStateStyle = state => {
return state.pressed ? {
backgroundColor: (0, _colors.getColor)('layerActive01')
} : undefined;
};
getTab(item, index) {
const {
currentIndex
} = this.state;
const active = index === currentIndex;
const finalStyle = (0, _helpers.styleReferenceBreaker)(this.styles.item);
const textStyle = {
color: active ? (0, _colors.getColor)('textPrimary') : (0, _colors.getColor)('textSecondary')
};
if (item.disabled) {
textStyle.color = (0, _colors.getColor)('textDisabled');
}
if (active) {
finalStyle.borderBottomColor = (0, _colors.getColor)('borderInteractive');
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
disabled: item.disabled,
onPress: () => this.changeItem(item, index),
style: state => (0, _helpers.pressableFeedbackStyle)(state, finalStyle, this.getStateStyle),
accessibilityLabel: item.text,
accessibilityRole: "tab",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
type: active ? 'heading-compact-01' : 'body-compact-01',
style: textStyle,
breakMode: "tail",
text: item.text
})
}, index);
}
componentDidUpdate(previousProps) {
const {
selectedIndex
} = this.props;
if (typeof selectedIndex === 'number' && previousProps.selectedIndex !== selectedIndex) {
this.setState({
currentIndex: selectedIndex
});
}
}
componentDidMount() {
const {
selectedIndex
} = this.props;
if (typeof selectedIndex === 'number') {
this.setState({
currentIndex: selectedIndex
});
}
}
render() {
const {
items,
componentProps,
style,
scrollMode
} = this.props;
const content = (items || []).map((item, index) => this.getTab(item, index));
if (scrollMode) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
contentContainerStyle: this.styles.scrollWrapper,
bounces: false,
horizontal: true,
style: (0, _helpers.styleReferenceBreaker)(this.styles.wrapper, style),
accessibilityRole: "tablist",
...(componentProps || {}),
children: content
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: (0, _helpers.styleReferenceBreaker)(this.styles.wrapper, style),
accessibilityRole: "tablist",
...(componentProps || {}),
children: content
});
}
}
exports.Tabs = Tabs;
//# sourceMappingURL=index.js.map