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

Dumbo for React Native Library

"use strict";

import React from 'react';
import { StyleSheet, View, ScrollView } from 'react-native';
import { getColor } from '../../styles/colors';
import { styleReferenceBreaker } from '../../helpers';
import { Button } from '../Button';
import { Text } from '../Text';

/** Props for DataTableHeaderSelected component */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * 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}
 */
export class DataTableHeaderSelected extends React.Component {
  get styles() {
    return StyleSheet.create({
      wrapper: {
        height: 48,
        backgroundColor: 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: getColor('textOnColor')
      },
      cancel: {
        paddingRight: 16
      },
      cancelWrapper: {
        position: 'relative'
      },
      divider: {
        backgroundColor: getColor('iconOnColor'),
        width: 1,
        height: 16,
        position: 'absolute',
        top: 16,
        left: 0
      }
    });
  }
  get actions() {
    const {
      actions
    } = this.props;
    return /*#__PURE__*/_jsx(ScrollView, {
      bounces: false,
      horizontal: true,
      style: this.styles.actions,
      contentContainerStyle: this.styles.actionsContainer,
      children: (actions || []).map((item, index) => {
        return /*#__PURE__*/_jsx(Button, {
          ...item,
          style: this.styles.action
        }, index);
      })
    });
  }
  get cancelAction() {
    const {
      onCancel,
      cancelText
    } = this.props;
    return /*#__PURE__*/_jsxs(View, {
      style: this.styles.cancelWrapper,
      children: [/*#__PURE__*/_jsx(Button, {
        kind: "primary",
        style: this.styles.cancel,
        onPress: onCancel,
        text: cancelText
      }), /*#__PURE__*/_jsx(View, {
        style: this.styles.divider
      })]
    });
  }
  render() {
    const {
      componentProps,
      style,
      itemsSelectedText
    } = this.props;
    const finalStyles = styleReferenceBreaker(this.styles.wrapper, style);
    return /*#__PURE__*/_jsxs(View, {
      style: finalStyles,
      ...(componentProps || {}),
      accessibilityRole: "menubar",
      children: [!!itemsSelectedText && /*#__PURE__*/_jsx(Text, {
        style: this.styles.itemsSelected,
        text: itemsSelectedText,
        type: "body-compact-01"
      }), this.actions, this.cancelAction]
    });
  }
}
//# sourceMappingURL=DataTableHeaderSelected.js.map