Namespace, Primitive, Method

    lvd-fluentui-propertysheet
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.1 • Public • Published

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

    ko-fi

    Keywords

    none

    Install

    npm i lvd-fluentui-propertysheet

    DownloadsWeekly Downloads

    0

    Version

    0.0.1

    License

    BSD-3-Clause

    Unpacked Size

    2.6 MB

    Total Files

    12

    Last publish

    Collaborators

    • alexandru.boia