@rnw-community/object-field-tree
v0.68.0
Published
Create a object fields combinations tree with data generator function
Downloads
195
Maintainers
Readme
Object field tree
Utility for generating complex nested objects with data generation callback and full TypeScript support with IDE autocompletion.
combine((...keys) => data, ...objects)
Real world usage examples: @rnw-community/fast-style
Example
Typescript enum and object usage example
You need to understand how TS converts enums into JS.
import { combine } from '@rnw-community/object-field-tree';
import { View } from 'react-native';
import { WidgetStyles } from './widget.styles';
enum ScienceEnum {
'Mathematics' = 'Mathematics Science',
'Physics' = 'Physics Science',
'Chemistry' = 'Chemistry Science',
}
const complexityObject = {
Easy: 'Easy',
Medium: 'Medium',
Hard: 'Hard',
};
const tree = combine(
(science, complexity) => ({
science: ScienceEnum[science],
complexity: complexityObject[complexity],
complexData: `${science}_${complexity}`,
}),
ScienceEnum,
complexityObject
);
console.log(tree.Physics.Hard);
console.log(tree.Chemistry.Easy);
Generating components example
With this approach you can create a strictly configurable building framework of Components for your project with very easy usage and IDE autocompletion.
import { combine } from '@rnw-community/object-field-tree';
import { View } from 'react-native';
import { WidgetStyles } from './widget.styles';
enum WidgetHeightEnum {
'Small' = 'Small',
'Medium' = 'Medium',
}
const widgetWidthMap = {
Third: WidgetStyles.thrirdWidth,
TwoThirds: WidgetStyles.twoThrirdsWidth,
Full: WidgetStyles.fullWidth,
};
const widgetHeightStyleMap = {
[WidgetHeightEnum.Small]: WidgetStyles.smallHeight,
[WidgetHeightEnum.Medium]: WidgetStyles.MediumHeight,
};
export const Widget = combine(
(height, width) => props => <View {...props} style={[widgetHeightStyleMap[height], widgetWidthMap[width]]} />,
WidgetHeightEnum,
widgetWidthMap
);
// Widget usage
const Component = () => (
<Widget.Small.Full>
<View>
<Text>Hello!</Text>
</View>
</Widget.Small.Full>
);
License
This library is licensed under The MIT License.