I was working on many projects using the same React FluentUi components and decided to add them all in a homemade 'custom library'.
- FluentUi React Fabric 6
- Requires
- "react": "^17.0.2"
- "react-dom": "^17.0.2"
- "typescript": "3.9.7" More info on package.json
You may find some property shared with all components and there is why :
- currentObj : state object to use with the component
- objSetter / setter : state setter of the current object
- propertyName : name of the property in current object (for the setter)
- isReadOnly : set the input as read only
- value / defaultValue : the default value to display in the component
This component is used to create aligned form instead of using many different type of input (like TextField, NumberInput, Dropdown, DatePicker...). Using the InputLayout component, you can specify what alignment you want for an input : no label, all in one line, small label with bigger input...Using this component, you an call every other component of the library with same properties and specify same layout to perfectly align all inputs.
Examples below :
-
Simple TextField
<InputLayout component={EInputType.TextField} layoutType={EInputLayoutType.tierLine} isReadOnly={customDisableButtonAccess()} label={'Name'} objValue={userObject.name} currentObj={userObject} objSetter={setUserObject} objPropertyName='name' isRequired={true} />
-
TrippelToggle
<InputLayout component={EInputType.TrippleToggle} layoutType={EInputLayoutType.veryVerySmallInputLine} isReadOnly={customDisableButtonAccess()} onTextToogle={Yes} offTextToogle={No} label={'User is admin ?'} objValue={userObject.admin} currentObj={userObject} objSetter={setUserObject} objPropertyName='admin' isRequired={true} isPrimaryColor={ETripleToogleColor.default} />
-
NumberInput
<InputLayout component={EInputType.NumberInput} layoutType={EInputLayoutType.middleLine} isReadOnly={true} suffix={' ' + '€'} min={0} label={'API cost'} objValue={api.cost} currentObj={api} objSetter={setApi} objPropertyName='cost' />
In the settings of the InputLayout you can change the display of your component using only one property : layoutType. You have many possible layout from the smallest 'veryVerySmallInputLine' (input is very small like 1 word but label is big) to the biggest 'smallLabel'. You can set an input without label or set input and label in one line using all the screen space. Check the layout options and test what is the best for your form. Using same option for different component will align them all in the page.
You can also add your own component in the InputLayout : add your component in the 'inputComponentView.tsx' script and setup all the required properties for your input in the 'IInputLayoutProps.ts'. Add your component name in the 'EInputType' enum and that's all, you can now use your component in the InputLayout.
This component display a message in a box with icons in function of the type of message that you wants to show : warning, error, info and success.
const messageBarComp: sharedModels.IMessageBarComp = {
message: 'Hello There',
messageType: MessageBarType.warning,
showDismissButton: true,
isDimissInternal: false,
currentObj: null,
objSetter: null
};
<div>
<MessageBarComp messageBarComp={renderEditMessage} />
</div>
This component display an info icon with tooltip to show a message. You can use different icon and setup a specific message.
<InfoMark label={'New info'} iconName={EInfoMarkIcon.Question} size={EInfoMarkSize.larger} />
This component display a notification in the top right corner of the screen. The notification has a title and a message. In case of success, this notification will automatically disappear in 5 secondes. In case of error it will disappear when user click on it.
-
Create notification properties
// --- Notification / MessageBar export function emptyNotificationMessage(): sharedModels.INotificationMessage { const notificationMessage: sharedModels.INotificationMessage = { title: '', message: '', messageType: 0 }; return notificationMessage; } export function emptyNotificationPopupConfig(): sharedModels.INotificationPopupConfig { const notificationPopupConfig: sharedModels.INotificationPopupConfig = { activator: false, activatorSetter: null }; return notificationPopupConfig; } let notificationMessage: sharedModels.INotificationMessage = emptyNotificationMessage(); let notificationConfig: sharedModels.INotificationPopupConfig = emptyNotificationPopupConfig();
-
Preload notification config
export function createNotificationPopupConfig(activator: boolean, activatorSetter: React.Dispatch<React.SetStateAction<boolean>>): sharedModels.INotificationPopupConfig { const notificationPopupConfig: sharedModels.INotificationPopupConfig = { activator: activator, activatorSetter: activatorSetter }; return notificationPopupConfig; } notificationConfig = createNotificationPopupConfig(noficitationTransition, setNoficitationTransition);
-
Setup notification message and type
notificationMessage = createNotificationMessage(t('SUCCESS_0'), t('RECORD_2'), MessageBarType.success); showNewNotification(notificationMessage, notificationConfig);
-
Display notification popup in front
<div> <NotificationPopup notificationPopup={notificationMessage} notificationPopupConfig={notificationConfig} /> </div>
This component display a input box for number with arrow to add or remove the amount. Component also check min or max value, and can add a prefix to the number.
<NumberInput
label='Rating component'
isReadOnly={true}
suffix={'%'}
increment={1}
defaultValue={props.objValue}
currentObject={props.currentObj}
setter={props.objSetter}
propertyName={'rate'}
min={0}
max={100}
/>
The NumberInput automatically add an 's' for suffix for number upper than 1, like : 1 file --> 2 files. There is a JSON file with custom suffix. This file gives you the possibility of exclude some sufix for automatic plural concat or use custom plural type like 'x' instead of 's'.
This component display a spinner in the front of the screen. There are posibilities of layout, spinner size, label..
<CustomSpinner
spinnerOptions={createCustomSpinnerOptions(
'Loading data...',
ECustomSpinnerLabelPosition.bottom,
ECustomSpinnerPosition.top,
ECustomSpinnerSize.larger,
true
)}
/>
This component display a datepicker input box in one line. You can change datepicker language (currently in french).
<OneLineDatePicker
label='Star date'
isReadOnly={false}
date={new Date()}
currentObject={props.currentObj}
setter={props.objSetter}
propertyName={'startDate'}
/>
This component display a dropdown with a search input inside the options of the dropdown.
-
Generate a list of options
// Generate fruit list const fruitList: Array<IComboBoxOption> = []; fruitList.forEach((fruit: IFuit) => { fruitList.push({ key: idFruit, text: fruitLib }); });
-
Use component
<SearchableDropdown label='Fruits' isReadOnly={false} value={props.objValue} options={fruitList} currentObject={props.currentObj} setter={props.objSetter} propertieName={'favoredFruit'} />
This component display a custom dropdown.
-
Generate a list of options
// Generate fruit list const fruitList: Array<IComboBoxOption> = []; fruitList.forEach((fruit: IFuit) => { fruitList.push({ key: idFruit, text: fruitLib }); });
-
Use component
<SelectChoice label='Fruit List' isReadOnly={false} value={props.objValue} options={fruitList} currentObject={props.currentObj} setter={props.objSetter} propertieName={'Favored fruit'} />
This component display toggle button with 2 choices, but user can unselect all choices (for a null value). Give the possibility of a true, or false, or nothing (null). PrimaryColor will use default blue color for the input. If false, buttons will be green (for true) and red (for false).
<TrippleChoiceToggle
isReadOnly={false}
defaultValue={props.objValue}
currentObject={props.currentObj}
setter={props.objSetter}
propertyName={'hasRights'}
isPrimaryColor={true}
/>
Feel free to use this library !