react-native-ios-utilities
Version:
Utilities for react-native + iOS and wrappers for using swift together with fabric/paper + JSI
84 lines (83 loc) • 3.09 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CardTitle = CardTitle;
var React = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _Colors = require("../misc/Colors.js");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
/**
* ```
* ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐
* .─────────────.
* │ Title ( Pill Title ) │
* `─────────────'
* │ Subtitle... │
* ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
* ```
*/
function CardTitle(props) {
const hasTitle = props.title != null;
const cardPillWrapper = {
marginLeft: hasTitle ? 10 : 0
};
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: [styles.cardTitleContainer, {
marginTop: props.extraMarginTop ?? 0
}],
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.cardTitle,
children: props.title ?? ''
}), props.pillTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: [styles.cardPillWrapper, cardPillWrapper],
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.cardPillContainer,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.cardPillTitleText,
numberOfLines: 1,
children: props.pillTitle
})
})
})]
}), props.subtitle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.cardSubtitleText,
children: props.subtitle ?? 'subtitle'
})]
});
}
;
const styles = _reactNative.StyleSheet.create({
cardTitleContainer: {
flexDirection: 'row',
alignItems: 'center'
},
cardTitle: {
fontSize: 16,
fontWeight: '600'
},
cardPillWrapper: {
flex: 1,
alignItems: 'flex-start'
},
cardPillContainer: {
backgroundColor: _Colors.Colors.BLUE.A400,
paddingHorizontal: 10,
paddingVertical: 5,
borderRadius: 10
},
cardPillTitleText: {
color: 'white',
fontWeight: '600',
fontSize: 14
},
cardSubtitleText: {
marginTop: 7,
fontWeight: '300',
fontSize: 12,
color: 'rgba(0,0,0,0.5)'
}
});
//# sourceMappingURL=CardTitle.js.map