@gechiui/block-editor/src/components/border-style-control/index.js

Generic block editor.

/**
 * GeChiUI dependencies
 */
import { Button } from '@gechiui/components';
import { __ } from '@gechiui/i18n';
import { lineDashed, lineDotted, lineSolid } from '@gechiui/icons';

const BORDER_STYLES = [
	{ label: __( '纯色' ), icon: lineSolid, value: 'solid' },
	{ label: __( '虚线' ), icon: lineDashed, value: 'dashed' },
	{ label: __( '点线' ), icon: lineDotted, value: 'dotted' },
];

/**
 * Control to display border style options.
 *
 * @param {Object}   props          Component props.
 * @param {Function} props.onChange Handler for changing border style selection.
 * @param {string}   props.value    Currently selected border style value.
 *
 * @return {GCElement} Custom border style segmented control.
 */
export default function BorderStyleControl( { onChange, value } ) {
	return (
		<fieldset className="components-border-style-control">
			<legend>{ __( '样式' ) }</legend>
			<div className="components-border-style-control__buttons">
				{ BORDER_STYLES.map( ( borderStyle ) => (
					<Button
						key={ borderStyle.value }
						icon={ borderStyle.icon }
						isSmall
						isPressed={ borderStyle.value === value }
						onClick={ () =>
							onChange(
								borderStyle.value === value
									? undefined
									: borderStyle.value
							)
						}
						aria-label={ borderStyle.label }
					/>
				) ) }
			</div>
		</fieldset>
	);
}