# ghostkit/3.3.3/gutenberg/components/dropdown-picker/index.js

Block Animations, Motion & Scroll Effects – Ghost Kit, version 3.3.3. 65 lines.

- Page: https://pluginprobe.com/plugins/ghostkit/3.3.3/code/gutenberg/components/dropdown-picker/index.js
- Raw: https://pluginprobe.com/plugins/ghostkit/3.3.3/raw/gutenberg/components/dropdown-picker/index.js
- Modified: 2024-02-18T18:40:24+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/ghostkit/3.3.3/code/gutenberg/components/dropdown-picker/index.js#L10-L20`.

```javascript
import classnames from 'classnames/dedupe';

import { BaseControl, Button, Dropdown } from '@wordpress/components';

/**
 * Component
 *
 * @param props
 */
export default function DropdownPicker(props) {
	const {
		label,
		className,
		contentClassName,
		onClick,
		open,
		onToggle,
		children,
	} = props;

	return (
		<BaseControl className="ghostkit-component-dropdown-picker-wrapper">
			<Dropdown
				className={classnames(
					'ghostkit-component-dropdown-picker__dropdown',
					className
				)}
				contentClassName={classnames(
					'ghostkit-component-dropdown-picker__dropdown-content',
					contentClassName
				)}
				popoverProps={{
					placement: 'left-start',
					offset: 36,
					shift: true,
				}}
				open={open}
				onToggle={onToggle}
				renderToggle={({ isOpen, onToggle: toggle }) => (
					<Button
						className={classnames(
							'ghostkit-component-dropdown-picker-toggle',
							isOpen
								? 'ghostkit-component-dropdown-picker-toggle-active'
								: ''
						)}
						onClick={(e) => {
							if (onClick) {
								onClick(toggle, isOpen, e);
							} else {
								toggle();
							}
						}}
					>
						<span className="ghostkit-component-dropdown-picker-toggle-label">
							{label}
						</span>
					</Button>
				)}
				renderContent={() => children}
			/>
		</BaseControl>
	);
}

```