@tra-tech/react-native-kitra/lib/module/components/Button/Button.js

UI kit for React Native

function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
/* eslint-disable no-nested-ternary */
import React, { useState } from 'react';
import { Platform, Pressable, StyleSheet, Text } from 'react-native';
import { applyDefaults } from '../../core/KitraProvider';
export const Button = _ref => {
  var _statusStyle$default, _statusStyle$default$, _statusStyle$default2, _statusStyle$default3, _statusStyle$focused, _statusStyle$focused$, _statusStyle$focused2, _statusStyle$focused3, _statusStyle$disabled, _statusStyle$disabled2, _statusStyle$disabled3, _statusStyle$disabled4;
  let {
    theme,
    typography,
    size = 'medium',
    disabled = false,
    label = '',
    statusStyle,
    iconPosition = 'left',
    style,
    textStyle,
    children,
    ...props
  } = _ref;
  const [isPressed, setIsPressed] = useState(false);
  const fontStyles = {
    large: typography === null || typography === void 0 ? void 0 : typography.body.medium,
    medium: typography === null || typography === void 0 ? void 0 : typography.body.smedium,
    small: typography === null || typography === void 0 ? void 0 : typography.body.xsmedium
  };
  const viewStyles = {
    default: {
      container: {
        backgroundColor: (statusStyle === null || statusStyle === void 0 ? void 0 : (_statusStyle$default = statusStyle.default) === null || _statusStyle$default === void 0 ? void 0 : (_statusStyle$default$ = _statusStyle$default.container) === null || _statusStyle$default$ === void 0 ? void 0 : _statusStyle$default$.backgroundColor) || (theme === null || theme === void 0 ? void 0 : theme.primary)
      },
      text: {
        color: (statusStyle === null || statusStyle === void 0 ? void 0 : (_statusStyle$default2 = statusStyle.default) === null || _statusStyle$default2 === void 0 ? void 0 : (_statusStyle$default3 = _statusStyle$default2.text) === null || _statusStyle$default3 === void 0 ? void 0 : _statusStyle$default3.color) || (theme === null || theme === void 0 ? void 0 : theme.white)
      }
    },
    focused: {
      container: {
        backgroundColor: (statusStyle === null || statusStyle === void 0 ? void 0 : (_statusStyle$focused = statusStyle.focused) === null || _statusStyle$focused === void 0 ? void 0 : (_statusStyle$focused$ = _statusStyle$focused.container) === null || _statusStyle$focused$ === void 0 ? void 0 : _statusStyle$focused$.backgroundColor) || (theme === null || theme === void 0 ? void 0 : theme.focused)
      },
      text: {
        color: (statusStyle === null || statusStyle === void 0 ? void 0 : (_statusStyle$focused2 = statusStyle.focused) === null || _statusStyle$focused2 === void 0 ? void 0 : (_statusStyle$focused3 = _statusStyle$focused2.text) === null || _statusStyle$focused3 === void 0 ? void 0 : _statusStyle$focused3.color) || (theme === null || theme === void 0 ? void 0 : theme.white)
      }
    },
    disabled: {
      container: {
        backgroundColor: (statusStyle === null || statusStyle === void 0 ? void 0 : (_statusStyle$disabled = statusStyle.disabled) === null || _statusStyle$disabled === void 0 ? void 0 : (_statusStyle$disabled2 = _statusStyle$disabled.container) === null || _statusStyle$disabled2 === void 0 ? void 0 : _statusStyle$disabled2.backgroundColor) || (theme === null || theme === void 0 ? void 0 : theme.disabledLight)
      },
      text: {
        color: (statusStyle === null || statusStyle === void 0 ? void 0 : (_statusStyle$disabled3 = statusStyle.disabled) === null || _statusStyle$disabled3 === void 0 ? void 0 : (_statusStyle$disabled4 = _statusStyle$disabled3.text) === null || _statusStyle$disabled4 === void 0 ? void 0 : _statusStyle$disabled4.color) || (theme === null || theme === void 0 ? void 0 : theme.grey)
      }
    }
  };
  return /*#__PURE__*/React.createElement(Pressable, _extends({
    onPressIn: () => setIsPressed(true),
    onPressOut: () => setIsPressed(false),
    android_ripple: {
      color: viewStyles.focused.container.backgroundColor
    },
    style: _ref2 => {
      let {
        pressed
      } = _ref2;
      return [styles.container, {
        flexDirection: iconPosition === 'left' ? 'row' : 'row-reverse'
      }, label ? {
        paddingVertical: 15,
        paddingHorizontal: 30
      } : {
        padding: (fontStyles[size].lineHeight - fontStyles[size].fontSize) / 2 + 10
      }, Platform.OS === 'ios' ? pressed ? viewStyles.focused.container : viewStyles.default.container : viewStyles.default.container, disabled ? viewStyles.disabled.container : null, style];
    },
    disabled: disabled
  }, props), React.Children.map(children, item => {
    var _item$props;
    return /*#__PURE__*/React.cloneElement(item, {
      size: item.props.size || fontStyles[size].fontSize,
      color: disabled ? viewStyles.disabled.text.color : isPressed ? item.props.color || viewStyles.focused.text.color : item.props.color || viewStyles.default.text.color,
      style: [label.length ? iconPosition === 'left' ? {
        marginRight: 10
      } : {
        marginLeft: 10
      } : null, (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.style]
    });
  }), /*#__PURE__*/React.createElement(Text, {
    testID: "button_text",
    style: [disabled ? viewStyles.disabled.text : isPressed ? viewStyles.focused.text : viewStyles.default.text, {
      fontWeight: '500'
    }, fontStyles[size], textStyle]
  }, label));
};
export default applyDefaults(Button);
const styles = StyleSheet.create({
  container: {
    width: '100%',
    borderRadius: 5,
    alignItems: 'center',
    justifyContent: 'center'
  }
});
//# sourceMappingURL=Button.js.map