Lvd-fluentui-propertysheet NPM

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...

@everything-registry/sub-chunk-2112 @zalastax/nolb-lv @infinitebrahmanuniverse/nolb-lv

0.0.1

4 years ago