client/components/split-button/docs/example.jsx - trunk - githubmirror/wp-calypso

client/components/split-button/docs/example.jsx
93 строки3 KB
Griffith Chen
Lodash: replace map() with native Array.prototype.map (#112102)
30 июн 2026, 06:44
30 июн 2026, 06:440dc1083
import { Card } from '@automattic/components';
import { PureComponent } from 'react';
import PopoverMenuItem from 'calypso/components/popover-menu/item';
import PopoverMenuSeparator from 'calypso/components/popover-menu/separator';
import SplitButton from '../';

const popoverItems = [
	<PopoverMenuItem key="sbe-oa" icon="add">
		Option A
	</PopoverMenuItem>,
	<PopoverMenuItem key="sbe-ob" icon="pencil">
		Option B
	</PopoverMenuItem>,
	<PopoverMenuSeparator key="sbe-sep" />,
	<PopoverMenuItem key="sbe-oc" icon="help">
		Option C
	</PopoverMenuItem>,
	<PopoverMenuItem key="sbe-od" disabled icon="cross-circle">
		Disabled option
	</PopoverMenuItem>,
];

class SplitButtonExample extends PureComponent {
	state = {
		compactButtons: false,
	};

	toggleButtons = () => this.setState( { compactButtons: ! this.state.compactButtons } );

	render() {
		const compact = { compact: this.state.compactButtons };
		return (
			<div>
				<button className="docs__design-toggle button" onClick={ this.toggleButtons }>
					{ this.state.compactButtons ? 'Normal Buttons' : 'Compact Buttons' }
				</button>
				<Card>
					{ [
						[
							{ label: 'Split Button', icon: 'history' },
							{ label: 'Split Button', primary: true },
							{ label: 'Split Button with white separator', primary: true, whiteSeparator: true },
							{ icon: 'globe' },
						],
						[
							{ label: 'Split Button', primary: true, disableMain: true },
							{ label: 'Split Button', icon: 'history', primary: true, disableMenu: true },
						],
						[
							{ label: 'Split Button', primary: true, disabled: true },
							{ icon: 'globe', primary: true, disabled: true },
						],
						[
							{ label: 'Split Button', icon: 'history', scary: true },
							{ label: 'Split Button', primary: true, scary: true },
							{ icon: 'globe', scary: true },
						],
						[
							{ label: 'Split Button', primary: true, disableMain: true, scary: true },
							{
								label: 'Split Button',
								icon: 'history',
								primary: true,
								disableMenu: true,
								scary: true,
							},
						],
						[
							{ label: 'Split Button', primary: true, disabled: true, scary: true },
							{ icon: 'globe', primary: true, disabled: true, scary: true },
						],
					].map( ( row, rowIndex ) => (
						<div className="docs__design-button-row" key={ `split-button-row-${ rowIndex }` }>
							{ row.map( ( item, itemIndex ) => (
								<SplitButton
									key={ `split-button-item-${ rowIndex }-${ itemIndex }` }
									{ ...item }
									{ ...compact }
								>
									{ popoverItems }
								</SplitButton>
							) ) }
						</div>
					) ) }
				</Card>
			</div>
		);
	}
}

SplitButtonExample.displayName = 'SplitButton';

export default SplitButtonExample;