@gechiui/block-editor
Version:
60 lines (53 loc) • 1.66 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = BorderStyleControl;
var _element = require("@gechiui/element");
var _components = require("@gechiui/components");
var _i18n = require("@gechiui/i18n");
var _icons = require("@gechiui/icons");
/**
* GeChiUI dependencies
*/
const BORDER_STYLES = [{
label: (0, _i18n.__)('纯色'),
icon: _icons.lineSolid,
value: 'solid'
}, {
label: (0, _i18n.__)('虚线'),
icon: _icons.lineDashed,
value: 'dashed'
}, {
label: (0, _i18n.__)('点线'),
icon: _icons.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.
*/
function BorderStyleControl(_ref) {
let {
onChange,
value
} = _ref;
return (0, _element.createElement)("fieldset", {
className: "components-border-style-control"
}, (0, _element.createElement)("legend", null, (0, _i18n.__)('样式')), (0, _element.createElement)("div", {
className: "components-border-style-control__buttons"
}, BORDER_STYLES.map(borderStyle => (0, _element.createElement)(_components.Button, {
key: borderStyle.value,
icon: borderStyle.icon,
isSmall: true,
isPressed: borderStyle.value === value,
onClick: () => onChange(borderStyle.value === value ? undefined : borderStyle.value),
"aria-label": borderStyle.label
}))));
}
//# sourceMappingURL=index.js.map