@prosperitainova/dumbo-react-native
Version:
Dumbo for React Native Library
89 lines (86 loc) • 2.77 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Pagination = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _colors = require("../../styles/colors");
var _helpers = require("../../helpers");
var _defaultText = require("../../constants/defaultText");
var _ = _interopRequireDefault(require("@carbon/icons/es/circle--solid/20"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/** Props for Pagination component */
/**
* Pagination component for rendering a pagination menu
*
* {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Pagination.tsx | Example code}
*/
class Pagination extends _react.default.Component {
get styles() {
return _reactNative.StyleSheet.create({
wrapper: {
width: '100%',
flexDirection: 'column'
},
wrapperContent: {
marginRight: 'auto',
marginLeft: 'auto'
},
item: {
padding: 8,
paddingLeft: 4,
paddingRight: 4
}
});
}
changePage = page => {
const {
onPageChange
} = this.props;
if (typeof onPageChange === 'function') {
onPageChange(page);
}
};
getPageItem(index) {
const {
currentPage
} = this.props;
const page = index + 1;
const getStateStyle = state => {
return state.pressed ? {
backgroundColor: (0, _colors.getColor)('layerActive01')
} : undefined;
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
style: state => (0, _helpers.pressableFeedbackStyle)(state, this.styles.item, getStateStyle),
onPress: () => this.changePage(page),
accessibilityLabel: String(page),
children: (0, _helpers.createIcon)(_.default, 8, 8, currentPage === page ? (0, _colors.getColor)('buttonTertiary') : (0, _colors.getColor)('iconOnColorDisabled'))
}, index);
}
render() {
const {
componentProps,
style,
paginationText,
totalPages
} = this.props;
const elements = [];
for (let i = 0; i < totalPages; i++) {
elements.push(this.getPageItem(i));
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
bounces: false,
style: (0, _helpers.styleReferenceBreaker)(this.styles.wrapper, style),
contentContainerStyle: this.styles.wrapperContent,
...(componentProps || {}),
accessibilityLabel: paginationText || _defaultText.defaultText.pagination,
horizontal: true,
children: elements.map(item => item)
});
}
}
exports.Pagination = Pagination;
//# sourceMappingURL=index.js.map