@prosperitainova/dumbo-react-native/lib/commonjs/components/Toggle/index.js

Dumbo for React Native Library

"use strict";

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

/**
 * Toggle component for rendering a boolean toggle switch
 * This component utilizes Native Switch from iOS and Android.
 * It is styled to be similar to Carbon.
 * But relies on the final styling from the OS.
 *
 * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Toggle.tsx | Example code}
 */
class Toggle extends _react.default.Component {
  get styles() {
    return _reactNative.StyleSheet.create({
      wrapper: {
        paddingTop: 22
      },
      switchWrapper: {
        flexDirection: 'row',
        paddingTop: 4
      },
      selectedText: {
        marginLeft: 8,
        marginTop: 4
      }
    });
  }
  get textInputStyles() {
    return (0, _BaseTextInputs.getTextInputStyle)();
  }
  get trackColor() {
    return {
      false: (0, _colors.getColor)('toggleOff'),
      true: (0, _colors.getColor)('supportSuccess')
    };
  }
  onChange = value => {
    const {
      onChange
    } = this.props;
    if (typeof onChange === 'function') {
      onChange(value);
    }
  };
  render() {
    const {
      disabled,
      componentProps,
      hideLabel,
      label,
      helperText,
      style,
      selectedLabelText,
      toggled,
      toggleWrapperStyle
    } = this.props;
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
      style: (0, _helpers.styleReferenceBreaker)(this.styles.wrapper, style),
      accessible: true,
      accessibilityLabel: label,
      accessibilityHint: helperText,
      children: [!!(label && !hideLabel) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
        style: this.textInputStyles.label,
        type: "label-02",
        text: label
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
        style: (0, _helpers.styleReferenceBreaker)(this.styles.switchWrapper, toggleWrapperStyle),
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Switch, {
          value: toggled,
          onValueChange: this.onChange,
          disabled: disabled,
          trackColor: this.trackColor,
          thumbColor: (0, _colors.getColor)('iconOnColor'),
          ...(componentProps || {})
        }), !!selectedLabelText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
          style: this.styles.selectedText,
          text: toggled ? selectedLabelText.on : selectedLabelText.off
        })]
      }), !!helperText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
        style: this.textInputStyles.helperText,
        type: "helper-text-02",
        text: helperText
      })]
    });
  }
}
exports.Toggle = Toggle;
//# sourceMappingURL=index.js.map