UNPKG

react-native-paper

Version:
66 lines (63 loc) 2.01 kB
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } import * as React from 'react'; import { StyleSheet } from 'react-native'; import Text from '../Typography/Text'; import TouchableRipple from '../TouchableRipple/TouchableRipple'; /** * A component to show a single cell inside of a table. * * <div class="screenshots"> * <figure> * <img class="medium" src="screenshots/data-table-row-cell.png" /> * </figure> * </div> * * * ## Usage * ```js * import * as React from 'react'; * import { DataTable } from 'react-native-paper'; * * const MyComponent = () => ( * <DataTable.Row> * <DataTable.Cell numeric>1</DataTable.Cell> * <DataTable.Cell numeric>2</DataTable.Cell> * <DataTable.Cell numeric>3</DataTable.Cell> * <DataTable.Cell numeric>4</DataTable.Cell> * </DataTable.Row> * ); * * export default MyComponent; * ``` * * If you want to support multiline text, please use View instead, as multiline text doesn't comply with * MD Guidelines (https://github.com/callstack/react-native-paper/issues/2381). */ const DataTableCell = _ref => { let { children, textStyle, style, numeric, ...rest } = _ref; return /*#__PURE__*/React.createElement(TouchableRipple, _extends({}, rest, { style: [styles.container, numeric && styles.right, style] }), /*#__PURE__*/React.createElement(Text, { style: textStyle, numberOfLines: 1 }, children)); }; DataTableCell.displayName = 'DataTable.Cell'; const styles = StyleSheet.create({ container: { flex: 1, flexDirection: 'row', alignItems: 'center' }, right: { justifyContent: 'flex-end' } }); export default DataTableCell; //# sourceMappingURL=DataTableCell.js.map