@prosperitainova/dumbo-react-native
Version:
Dumbo for React Native Library
207 lines (204 loc) • 6.66 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.UiPanelItem = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _colors = require("../../styles/colors");
var _helpers = require("../../helpers");
var _Text = require("../Text");
var _ = _interopRequireDefault(require("@carbon/icons/es/chevron--down/20"));
var _2 = _interopRequireDefault(require("@carbon/icons/es/chevron--up/20"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/** Item to show in the UiPanel */
/** Props for UiPanelItem component */
/**
* UiPanelItem component for rendering an item in the UI Panel
* This is a child of UiPanel component
*
* {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/UiPanel.tsx | Example code}
*/
class UiPanelItem extends _react.default.Component {
state = {
open: false
};
itemColor(forceDisabled) {
const {
disabled
} = this.props;
if (disabled || forceDisabled) {
return (0, _colors.getColor)('textDisabled');
} else {
return (0, _colors.getColor)('textSecondary');
}
}
get styles() {
const {
open
} = this.state;
return _reactNative.StyleSheet.create({
wrapper: {
flexDirection: 'row',
alignItems: 'flex-start',
backgroundColor: open ? (0, _colors.getColor)('backgroundSelected') : undefined,
minHeight: 48
},
primaryText: {
color: this.itemColor(),
flex: 1,
padding: 16,
paddingTop: 13,
paddingBottom: 13
},
childText: {
color: this.itemColor(),
flex: 1,
padding: 16,
paddingTop: 13,
paddingBottom: 13
},
icon: {
padding: 14
},
openIndicator: {
width: 4,
backgroundColor: (0, _colors.getColor)('borderInteractive'),
position: 'absolute',
top: 0,
left: 0,
bottom: 0
},
nestedItem: {
flexDirection: 'row',
alignItems: 'flex-start',
minHeight: 48
}
});
}
pressParent = event => {
const {
open
} = this.state;
const {
children,
onPress,
noChildrenPressCallback
} = this.props;
if (typeof onPress === 'function') {
onPress(event);
}
if (children?.length) {
this.setState({
open: !open
});
} else if (typeof noChildrenPressCallback === 'function') {
noChildrenPressCallback();
}
};
getStateStyle = state => {
return state.pressed ? {
backgroundColor: (0, _colors.getColor)('layerActive01')
} : undefined;
};
get nestedItems() {
const {
children,
noChildrenPressCallback
} = this.props;
return children?.filter(item => !item.hidden).map((item, index) => {
const finalTextStyle = (0, _helpers.styleReferenceBreaker)(this.styles.childText);
const finalStyle = (0, _helpers.styleReferenceBreaker)(this.styles.nestedItem);
finalStyle.paddingLeft = item.leftIcon ? 24 : 72;
if (item.disabled) {
finalTextStyle.color = (0, _colors.getColor)('textDisabled');
}
const onPress = event => {
if (typeof item.onPress === 'function') {
item.onPress(event);
}
if (typeof noChildrenPressCallback === 'function') {
noChildrenPressCallback();
}
};
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
style: state => (0, _helpers.pressableFeedbackStyle)(state, (0, _helpers.styleReferenceBreaker)(finalStyle, item.style), this.getStateStyle),
accessibilityRole: "button",
accessibilityLabel: item.text,
onPress: onPress,
onLongPress: item.onLongPress,
disabled: item.disabled,
...(item.componentProps || {}),
children: [!!item.leftIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: this.styles.icon,
children: (0, _helpers.createIcon)(item.leftIcon, 20, 20, this.itemColor(item.disabled))
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
breakMode: item.textBreakMode,
style: finalTextStyle,
text: item.text
}), !!item.rightIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: this.styles.icon,
children: (0, _helpers.createIcon)(item.rightIcon, 20, 20, this.itemColor(item.disabled))
})]
}, index);
});
}
componentDidMount() {
const {
openOnLoad,
children
} = this.props;
if (openOnLoad && !!children?.length) {
this.setState({
open: true
});
}
}
render() {
const {
open
} = this.state;
const {
text,
textBreakMode,
leftIcon,
disabled,
children,
componentProps,
style,
rightIcon,
onLongPress
} = this.props;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
style: state => (0, _helpers.pressableFeedbackStyle)(state, (0, _helpers.styleReferenceBreaker)(this.styles.wrapper, style), this.getStateStyle),
accessibilityRole: "button",
accessibilityLabel: text,
onPress: this.pressParent,
onLongPress: onLongPress,
disabled: disabled,
...(componentProps || {}),
children: [open && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: this.styles.openIndicator
}), !!leftIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: this.styles.icon,
children: (0, _helpers.createIcon)(leftIcon, 20, 20, this.itemColor())
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
breakMode: textBreakMode,
type: "heading-compact-02",
style: this.styles.primaryText,
text: text
}), !!rightIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: this.styles.icon,
children: (0, _helpers.createIcon)(rightIcon, 20, 20, this.itemColor())
}), !!children?.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: this.styles.icon,
children: (0, _helpers.createIcon)(open ? _2.default : _.default, 20, 20, this.itemColor())
})]
}), open && children && this.nestedItems]
});
}
}
exports.UiPanelItem = UiPanelItem;
//# sourceMappingURL=index.js.map