@prosperitainova/dumbo-react-native/lib/commonjs/components/DataTable/DataTableHeaderSelected.js

Dumbo for React Native Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DataTableHeaderSelected = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _colors = require("../../styles/colors");
var _helpers = require("../../helpers");
var _Button = require("../Button");
var _Text = require("../Text");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/** Props for DataTableHeaderSelected component */

/**
 * DataTableHeaderSelected component for rendering a data table header area that indicates that items are chosen.
 * Used as a child of DataTable
 *
 * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/DataTable.tsx | Example code}
 */
class DataTableHeaderSelected extends _react.default.Component {
  get styles() {
    return _reactNative.StyleSheet.create({
      wrapper: {
        height: 48,
        backgroundColor: (0, _colors.getColor)('backgroundBrand'),
        flexDirection: 'row'
      },
      actions: {
        flexDirection: 'row',
        flex: 1
      },
      actionsContainer: {
        flexDirection: 'row',
        flexGrow: 1,
        justifyContent: 'flex-end'
      },
      action: {
        paddingRight: 24
      },
      itemsSelected: {
        paddingLeft: 16,
        paddingTop: 15,
        paddingBottom: 15,
        color: (0, _colors.getColor)('textOnColor')
      },
      cancel: {
        paddingRight: 16
      },
      cancelWrapper: {
        position: 'relative'
      },
      divider: {
        backgroundColor: (0, _colors.getColor)('iconOnColor'),
        width: 1,
        height: 16,
        position: 'absolute',
        top: 16,
        left: 0
      }
    });
  }
  get actions() {
    const {
      actions
    } = this.props;
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
      bounces: false,
      horizontal: true,
      style: this.styles.actions,
      contentContainerStyle: this.styles.actionsContainer,
      children: (actions || []).map((item, index) => {
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
          ...item,
          style: this.styles.action
        }, index);
      })
    });
  }
  get cancelAction() {
    const {
      onCancel,
      cancelText
    } = this.props;
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
      style: this.styles.cancelWrapper,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
        kind: "primary",
        style: this.styles.cancel,
        onPress: onCancel,
        text: cancelText
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        style: this.styles.divider
      })]
    });
  }
  render() {
    const {
      componentProps,
      style,
      itemsSelectedText
    } = this.props;
    const finalStyles = (0, _helpers.styleReferenceBreaker)(this.styles.wrapper, style);
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
      style: finalStyles,
      ...(componentProps || {}),
      accessibilityRole: "menubar",
      children: [!!itemsSelectedText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
        style: this.styles.itemsSelected,
        text: itemsSelectedText,
        type: "body-compact-01"
      }), this.actions, this.cancelAction]
    });
  }
}
exports.DataTableHeaderSelected = DataTableHeaderSelected;
//# sourceMappingURL=DataTableHeaderSelected.js.map