@audira/carbon-react-native
Version:
Build React Native apps with component and shared patterns using Carbon
73 lines (72 loc) • 3 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.InlineLoading = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _carbonReactNativeElements = require("@audira/carbon-react-native-elements");
var _checkmarkFilled = _interopRequireDefault(require("@carbon/icons/svg/32/checkmark--filled.svg"));
var _errorFilled = _interopRequireDefault(require("@carbon/icons/svg/32/error--filled.svg"));
var _index = require("../../_internal/contexts/index.js");
var _index2 = require("../../_internal/style-sheets/index.js");
var _index3 = require("../../carbon-style-sheet/index.js");
var _index4 = require("../../contexts/index.js");
var _index5 = require("../loading/index.js");
var _index6 = require("../text/index.js");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const InlineLoading = exports.InlineLoading = /*#__PURE__*/(0, _react.forwardRef)(function InlineLoading({
state = 'active',
text,
style,
'aria-label': ariaLabel,
textProps,
dir,
...props
}, ref) {
const themeContext = (0, _react.useContext)(_index4.ThemeContext),
globalConfigContext = (0, _react.useContext)(_index.GlobalConfigContext);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
ref: ref,
...props,
"aria-label": ariaLabel ?? text,
dir: dir ?? globalConfigContext.rtl ? 'rtl' : undefined,
style: [_index2.FlexStyleSheet.flex_row, _index2.FlexStyleSheet.items_center, styleSheet.inlineLoading, globalConfigContext.rtl ? _index2.CommonStyleSheet.rtl : undefined, style],
children: [state == 'active' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.Loading, {
type: "small"
}) : state == 'error' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_errorFilled.default, {
width: 16,
height: 16,
fill: mapIconErrorColor[themeContext.colorScheme]
}) : state == 'finished' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkmarkFilled.default, {
width: 16,
height: 16,
fill: mapIconCheckmarkColor[themeContext.colorScheme]
}) : null, !!text && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index6.Text, {
...textProps,
type: "body_compact_01",
style: [carbonStyleSheet.text, textProps?.style],
children: text
})]
});
});
const styleSheet = _reactNative.StyleSheet.create({
inlineLoading: {
columnGap: 8
}
}),
carbonStyleSheet = _index3.CarbonStyleSheet.create({
text: {
color: _index3.CarbonStyleSheet.color.text_secondary
}
}),
mapIconErrorColor = {
gray_10: _carbonReactNativeElements.Color.Token.gray_10.support_error,
gray_100: _carbonReactNativeElements.Color.Token.gray_100.support_error
},
mapIconCheckmarkColor = {
gray_10: _carbonReactNativeElements.Color.Token.gray_10.support_success,
gray_100: _carbonReactNativeElements.Color.Token.gray_100.support_success
};
//# sourceMappingURL=InlineLoading.js.map