@blueeast/bluerain-ui-interfaces

BlueRain UI Interfaces

A UI interfaces collection to align the components development process across all platforms. React components build using these interfaces supposedly should work on Web, Mobile (iOS and Android) and Desktop.

Status

Usage

Run the following command in the plugin directoy:

npm i --save @blueeast/bluerain-ui-interfaces

List of Interfaces

Following component interfaces have been defined and exposed through this repo.

• ActivityIndicator
• AppBar
• Avatar
• Badge
• Breadcrumb
• Button
• Card
• Carousel
• Checkbox
• Chip
• Color
• Divider
• DocumentSelectionState
• Drawer
• FormControl
• Icon
• Image
• List
• Map
• Model
• Picker
• Progressbar
• SelectionList
• Slider
• StatusBar
• Switch
• Tab
• TabBar
• Tabs
• Text
• TextInput
• TouchableHighlight
• TouchableOpacity
• TouchableWithoutFeedback
• View
• VirtualizedList
• WebView
• Stepper
• Notification

Example Implementation of Interface

• First export interface from bluerain-ui-interfaces repo.

import { TextInputProperties } from '@blueeast/bluerain-ui-interfaces';

• Then extend/implement interface for component you intend to develop

export interface MUITextInputProperties extends TextInputProperties {
 autoComplete?: string,
 autoCorrect?: string,
 id?: string,
 label?: string,
 className?: any,
 margin?: 'none' |
    'dense' |
    'normal',
 required?: boolean,
 error?: boolean,
 type?: string,
 rowsMax?: string,
 rows?: string,
 helperText?: ReactNode,
 InputLabelProps?: object,
 fullWidth?: boolean,
 errorText?: ReactNode,
}

• Then use above extended interface for component development

const BlueRainTextInput: React.StatelessComponent<MUITextInputProperties> = (rawProps) => {
 const { onChangeText , ...props } = rawProps;
 let disabled = false;
 if(props.editable !== undefined && !props.editable) {
  disabled = true;
 }
 return (
 <TextField
  onChange={(props.onChange || onChangeText) ? customOnChange(rawProps) : () => {return null;}}
  rows={props.numberOfLines}
  helperText={props.errorText}
  {...props}
 />
 );
};

export default BlueRainTextInput;

Notice how props from interface have been mapped to material-ui textinput props. For exmaple rows has been mapped numberOfLines.