@udecode/plate-ui-button
Version:
Button UI for Plate
203 lines (186 loc) • 6.34 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var _styled = require('styled-components');
var React = require('react');
var plateButton = require('@udecode/plate-button');
var plateCommon = require('@udecode/plate-common');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var _styled__default = /*#__PURE__*/_interopDefaultLegacy(_styled);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
function _extends() {
_extends = Object.assign ? Object.assign.bind() : function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
const plateButtonCss = [{
"position": "relative",
"boxSizing": "border-box",
"display": "inline-flex",
"maxWidth": "100%",
"alignItems": "center",
"justifyContent": "center",
"> :not([hidden]) ~ :not([hidden])": {
"--tw-space-x-reverse": "0",
"marginRight": "calc(0.5rem * var(--tw-space-x-reverse))",
"marginLeft": "calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))"
},
"padding": "0px",
"textAlign": "center"
}, {
"cursor": "pointer",
"borderWidth": "0px",
"fontWeight": "500",
":focus": {
"outline": "2px solid transparent !important",
"outlineOffset": "2px !important"
}
}, {
"--tw-bg-opacity": "1",
"backgroundColor": "rgb(255 255 255 / var(--tw-bg-opacity))",
":hover": {
"--tw-bg-opacity": "1",
"backgroundColor": "rgb(243 244 246 / var(--tw-bg-opacity))"
},
":active": {
"--tw-bg-opacity": "1",
"backgroundColor": "rgb(229 231 235 / var(--tw-bg-opacity))"
}
}, {
"minHeight": "28px",
"minWidth": "28px",
"paddingLeft": "0.625rem",
"paddingRight": "0.625rem",
"paddingTop": "0px",
"paddingBottom": "0px"
}, _styled.css(["font-family:inherit;font-size:14px;border-radius:3px;color:inherit;:active{color:inherit;}:visited{color:inherit;}"])];
const cssMenuItemButton = [plateButtonCss, {
"width": "100%",
"justifyContent": "flex-start"
}];
const primaryButtonCss = [plateButtonCss, {
"--tw-bg-opacity": "1",
"backgroundColor": "rgb(59 130 246 / var(--tw-bg-opacity))",
"--tw-text-opacity": "1",
"color": "rgb(255 255 255 / var(--tw-text-opacity))",
":hover": {
"--tw-bg-opacity": "1",
"backgroundColor": "rgb(37 99 235 / var(--tw-bg-opacity))"
},
":active": {
"--tw-bg-opacity": "1",
"backgroundColor": "rgb(29 78 216 / var(--tw-bg-opacity))",
"--tw-text-opacity": "1",
"color": "rgb(255 255 255 / var(--tw-text-opacity))"
}
}];
const PlateButton = /*#__PURE__*/React.forwardRef(({
size,
px,
py,
css: _css,
...props
}, ref) => /*#__PURE__*/React__default["default"].createElement(_StyledButton, _extends({
type: "button",
ref: ref
}, props)));
var _StyledButton = _styled__default["default"](plateButton.Button).withConfig({
displayName: "PlateButton___StyledButton",
componentId: "sc-wfqywr-0"
})(["", ""], plateButtonCss);
const Icon = /*#__PURE__*/React.forwardRef((props, ref) => {
const {
children,
iconVerticalAlign,
size,
title,
...otherProps
} = props;
const iconProps = {
height: props.height !== undefined ? props.height : size,
width: props.width !== undefined ? props.width : size,
'aria-hidden': title == null ? 'true' : undefined,
focusable: 'false',
role: title != null ? 'img' : undefined,
...otherProps
};
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({}, iconProps, {
ref: ref
}), title && /*#__PURE__*/React__default["default"].createElement("title", {
key: "icon-title"
}, title), children);
});
const StyledIcon = _styled__default["default"](Icon).withConfig({
displayName: "StyledIcon",
componentId: "sc-1lmwuuu-0"
})(["display:inline-block;vertical-align:", ";overflow:hidden;height:100%;"], props => props.iconVerticalAlign);
const DeleteIcon = props => /*#__PURE__*/React__default["default"].createElement(StyledIcon, _extends({
viewBox: "0 0 24 24",
fill: "currentColor"
}, props), /*#__PURE__*/React__default["default"].createElement("path", {
fill: "none",
d: "M0 0h24v24H0z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
}));
const RemoveNodeButton = ({
element,
children,
...props
}) => {
const editor = plateCommon.useEditorRef();
return /*#__PURE__*/React__default["default"].createElement(PlateButton, _extends({
onClick: () => {
const path = plateCommon.findNodePath(editor, element);
plateCommon.removeNodes(editor, {
at: path
});
plateCommon.focusEditor(editor, editor.selection);
}
}, props), /*#__PURE__*/React__default["default"].createElement(_StyledDeleteIcon, null), children);
};
var _StyledDeleteIcon = _styled__default["default"](DeleteIcon).withConfig({
displayName: "RemoveNodeButton___StyledDeleteIcon",
componentId: "sc-nzabn0-0"
})({
"width": "1rem"
});
const ChevronDownIcon = props => /*#__PURE__*/React__default["default"].createElement(_StyledStyledIcon, _extends({
viewBox: "0 0 24 24",
focusable: "false",
"aria-hidden": "true"
}, props), /*#__PURE__*/React__default["default"].createElement("path", {
fill: "currentColor",
d: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
}));
var _StyledStyledIcon = _styled__default["default"](StyledIcon).withConfig({
displayName: "ChevronDownIcon___StyledStyledIcon",
componentId: "sc-1mognml-0"
})({
"pointerEvents": "none",
"display": "inline",
"height": "100%",
"maxHeight": "100%",
"maxWidth": "100%",
"userSelect": "none",
"overflow": "hidden",
"textAlign": "center",
"verticalAlign": "middle"
});
exports.ChevronDownIcon = ChevronDownIcon;
exports.DeleteIcon = DeleteIcon;
exports.PlateButton = PlateButton;
exports.RemoveNodeButton = RemoveNodeButton;
exports.StyledIcon = StyledIcon;
exports.cssMenuItemButton = cssMenuItemButton;
exports.plateButtonCss = plateButtonCss;
exports.primaryButtonCss = primaryButtonCss;
//# sourceMappingURL=index.js.map