LVD-FluentUi-PropertySheet

A ReactJS property sheet component built using the FluentUI library. What this basically does is display key-value data, with some additional features:

• allow value rendering as a <code> fragment;
• supports value rendering as a link, by providing an url property;
• supports rendering an action icon button next to the value, by providing an action code and icon;
• supports custom label rendering;
• supports configurable label alignment;
• supports custom value rendering.

Installation

npm install --save lvd-fluentui-propertysheet

Demo

The demo directory contains a compiled and ready-to-run example. Just open up the index.html file.

Basic Usage

import React from 'react';
import { PropertySheet, PropertySheetLabelAlignments } from 'lvd-fluentui-propertysheet';

class PropertySheetSamplePage extends React.Component {
	constructor(props) {
		super(props);
	}

	render() {
		return (
			<div className="lvd-property-sheet-demo-container">
				<PropertySheet 
					items={this._getSampleItems()}
					labelAlignment={PropertySheetLabelAlignments.right}
					onValueItemActionInvoked={this._handleValueItemActionInvoked}
				/>
			</div>
		);
	}

	_getSampleItems() {
		return [
			{ label: 'Test 1', value: 'Value 1' },
			{ label: 'Test 2', value: 'Value 2', formatAsCode: true },
			{ label: 'Test 3', value: 'Value 3', url: 'http://alexboia.net' },
			{ label: 'Test 4', value: 'Value 4', action: { code: 'Edit', icon: 'Edit' } },
			{ label: 'Test 5', value: 'Value 5' }
		];
	}
}

You can find a full working example here.

Styling

You can either directly include the dist/style.css into your html web page or use the @import directive inside your stylesheet if building using webpack:

@import '~lvd-fluentui-propertysheet/dist/style.css';

Also see the component itself.

Building

To build the demo application:

npm run build-app

To build the library:

npm run build-dist

To build both in one sitting:

npm run build

Customization Options

| What | Prop Name | Type | Notes | | --- | --- | --- | --- | | Set items | items | Property Sheet Data Item Object | See below. Mandatory. | | Set additional container css class name | className | string | Defaults to null. | | Set additional inline css style properties | style | object | Key-value plain javascript object. Defaults to {}. | | Only show label fields | labelOnly | boolean | Defaults to false. | | Change label alignment | labelAlignment | PropertySheetLabelAlignments | See here for all supported values. Defaults to PropertySheetLabelAlignments.right. | | Display underlines for values that are rendered as links | underlineValueLinks | boolean | Defaults to false. | | Provide custom label renderer | onRenderLabel | (item: Property Sheet Data Item Object, itemIndex: number) => JSX.Element | Defaults to null. | | Provide custom value renderer | onRenderValue | (item: Property Sheet Data Item Object, itemIndex: number) => JSX.Element | Defaults to null. |

Property Sheet Data Item Object

Each item must be a plain javascript object with the following properties:

| Name | Type | Notes | | --- | --- | --- | | label | string | Displayable label. Mandatory. | | value | string | Displayable value. Optional. | | formatAsCode | boolean | Render this item as a code block. Optional. Defaults to false | | url | string | Render this item as a link with this url. Optional. Defaults to null | | action | Property Sheet Data Item Action Object | Action descriptor for when an action icon button needs to be rendered next to the raw value. See below. Optional. Defaults to null. |

Property Sheet Data Item Action Object

Each item action descriptor must be a plain javascript object with the following properties:

| Name | Type | Notes | | --- | --- | --- | | code | string | Action code. Can be later used when listening for actions via onValueItemActionInvoked. Mandatory. | | icon | string | Must be a valid FluentUi icon name. Mandatory. |

Events

| Event | Prop Name | Arguments | Notes | | --- | --- | --- | --- | | Item action invoked | onValueItemActionInvoked | (item: Property Sheet Data Item Object, itemIndex: number, event: React.MouseEvent) | Triggered when the action button related to a value is clicked. |

Changelog

Version 0.0.1

• First tracked version.

Donate

I put some of my free time into developing and maintaining this plugin. If helped you in your projects and you are happy with it, you can...