@prosperitainova/dumbo-react-native
Version:
Dumbo for React Native Library
118 lines (115 loc) • 3.61 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.checkboxRadioBaseStyle = exports.Checkbox = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _defaultText = require("../../constants/defaultText");
var _helpers = require("../../helpers");
var _colors = require("../../styles/colors");
var _Text = require("../Text");
var _ = _interopRequireDefault(require("@carbon/icons/es/checkbox/20"));
var _2 = _interopRequireDefault(require("@carbon/icons/es/checkbox--checked--filled/20"));
var _Tooltip = require("../Tooltip");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const checkboxRadioBaseStyle = exports.checkboxRadioBaseStyle = {
paddingTop: 14,
paddingBottom: 14,
minWidth: 48,
flexDirection: 'row',
alignContent: 'flex-start'
};
/** Props for Checkbox and Radio component */
/**
* Checkbox component for rendering a checkbox
*
* {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Checkbox.tsx | Example code}
*/
class Checkbox extends _react.default.Component {
get styles() {
return _reactNative.StyleSheet.create({
wrapper: checkboxRadioBaseStyle,
checkboxWrapper: {
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'center'
}
});
}
get textStyle() {
const {
disabled
} = this.props;
const finalStyle = {
color: (0, _colors.getColor)(disabled ? 'textDisabled' : 'textPrimary'),
marginLeft: 8,
lineHeight: 20,
maxWidth: '100%'
};
return finalStyle;
}
get checkbox() {
const {
checked,
disabled
} = this.props;
const color = disabled ? (0, _colors.getColor)('iconDisabled') : (0, _colors.getColor)('iconPrimary');
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
children: checked ? (0, _helpers.createIcon)(_2.default, 20, 20, color) : (0, _helpers.createIcon)(_.default, 20, 20, color)
});
}
onPress = event => {
const {
onPress,
checked,
id
} = this.props;
if (typeof onPress === 'function') {
onPress(!checked, id, event);
}
};
onLongPress = event => {
const {
onLongPress,
id
} = this.props;
if (typeof onLongPress === 'function') {
onLongPress(id, event);
}
};
render() {
const {
disabled,
componentProps,
label,
accessibleText,
hideLabel,
style,
tooltipProps,
wrapperStyle
} = this.props;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: (0, _helpers.styleReferenceBreaker)(this.styles.checkboxWrapper, wrapperStyle),
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
style: (0, _helpers.styleReferenceBreaker)(this.styles.wrapper, style),
disabled: disabled,
accessibilityLabel: accessibleText || _defaultText.defaultText.checkbox,
accessibilityHint: label,
accessibilityRole: "checkbox",
onPress: this.onPress,
onLongPress: this.onLongPress,
...(componentProps || {}),
children: [this.checkbox, !hideLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
style: this.textStyle,
text: label
})]
}), !!tooltipProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
...tooltipProps
})]
});
}
}
exports.Checkbox = Checkbox;
//# sourceMappingURL=index.js.map