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

UI kit for React Native

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.Button = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _KitraProvider = require("../../core/KitraProvider");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
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 */
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] = (0, _react.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.default.createElement(_reactNative.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
      }, _reactNative.Platform.OS === 'ios' ? pressed ? viewStyles.focused.container : viewStyles.default.container : viewStyles.default.container, disabled ? viewStyles.disabled.container : null, style];
    },
    disabled: disabled
  }, props), _react.default.Children.map(children, item => {
    var _item$props;
    return /*#__PURE__*/_react.default.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.default.createElement(_reactNative.Text, {
    testID: "button_text",
    style: [disabled ? viewStyles.disabled.text : isPressed ? viewStyles.focused.text : viewStyles.default.text, {
      fontWeight: '500'
    }, fontStyles[size], textStyle]
  }, label));
};
exports.Button = Button;
var _default = (0, _KitraProvider.applyDefaults)(Button);
exports.default = _default;
const styles = _reactNative.StyleSheet.create({
  container: {
    width: '100%',
    borderRadius: 5,
    alignItems: 'center',
    justifyContent: 'center'
  }
});
//# sourceMappingURL=Button.js.map