@salesforce/design-system-react/components/lookup/__docs__/storybook-stories.jsx

Salesforce Lightning Design System for React

import React from 'react';

import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import IconSettings from '../../icon-settings';

import { LOOKUP } from '../../../utilities/constants';
import Lookup from '../../lookup';
import Header from '../../lookup/header';
import Footer from '../../lookup/footer';

import SLDSButton from '../../button';

class DemoLookup extends React.Component {
	static displayName = 'DemoLookup';

	state = {
		options: [
			{ label: 'File 1' },
			{ label: 'File 2' },
			{ label: 'File 3' },
			{ label: 'File 4' },
		],
	};

	clearSelected = () => {
		this.setState({ currentSelected: -1 });
	};

	handleSelect = (selectedItem, ...rest) => {
		action('select')(selectedItem, ...rest);
		this.setState({
			currentSelected: this.state.options.indexOf(selectedItem),
		});
	};

	render() {
		return (
			<div>
				<div>
					<SLDSButton onClick={this.clearSelected}>Clear Selected</SLDSButton>
				</div>
				<Lookup
					{...this.props}
					onChange={action('change')}
					onSelect={this.handleSelect}
					options={this.state.options}
					selectedItem={this.state.currentSelected}
				/>
			</div>
		);
	}
}

class DemoLookupAccounts extends React.Component {
	static displayName = 'DemoLookupAccounts';

	state = {
		options: [
			{ label: "Paddy's Pub", subTitle: 'Boston, MA' },
			{ label: 'Tyrell Corp', subTitle: 'San Francisco, CA' },
			{ label: 'Paper St. Soap Company', subTitle: 'Beloit, WI' },
			{ label: 'Nakatomi Investments', subTitle: 'Chicago, IL' },
			{ label: 'Acme Landscaping' },
			{ label: 'Acme Construction', subTitle: 'Grand Marais, MN' },
		],
	};

	handleSelect = (selectedItem, ...rest) => {
		action('select')(selectedItem, ...rest);
		this.setState({ selectedItem });
	};

	render() {
		return (
			<Lookup
				{...this.props}
				footerRenderer={Footer}
				headerRenderer={Header}
				onChange={action('change')}
				onSelect={this.handleSelect}
				options={this.state.options}
			/>
		);
	}
}

storiesOf(LOOKUP, module)
	.addDecorator((getStory) => (
		<div className="slds-p-around_medium">
			<IconSettings iconPath="/assets/icons">{getStory()}</IconSettings>
		</div>
	))
	.add('Standard', () => (
		<DemoLookup
			emptyMessage="No Files found"
			hasError={false}
			iconCategory="utility"
			iconName="open_folder"
			isInline
			label="Files"
		/>
	))
	.add('Disabled', () => <DemoLookup disabled />)
	.add('Standard with Accounts', () => (
		<DemoLookupAccounts
			emptyMessage="No Accounts found"
			hasError={false}
			iconCategory="standard"
			iconName="account"
			isInline
			label="Account"
		/>
	))
	.add('Custom Empty Message Content', () => (
		<DemoLookup emptyMessage={<span>No matches.</span>} isInline />
	));