You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
1.8 KiB
JavaScript
91 lines
1.8 KiB
JavaScript
5 years ago
|
import PropTypes from 'prop-types';
|
||
|
import classNames from 'classnames';
|
||
|
|
||
|
export default function ToolbarComponent(props) {
|
||
|
const {
|
||
|
className,
|
||
|
children,
|
||
|
...rest
|
||
|
} = props;
|
||
|
const cn = classNames(className, 'scratchpad__toolbar flex-row flex-cross-center');
|
||
|
return (
|
||
|
<div {...rest} className={cn}>{children}</div>
|
||
|
);
|
||
|
}
|
||
|
|
||
|
ToolbarComponent.propTypes = {
|
||
|
className: PropTypes.string,
|
||
|
children: PropTypes.node,
|
||
|
};
|
||
|
|
||
|
export function ToolbarButtonComponent(props) {
|
||
|
const {
|
||
|
activated,
|
||
|
disabled,
|
||
|
onClick,
|
||
|
className,
|
||
|
children,
|
||
|
...rest
|
||
|
} = props;
|
||
|
const cn = classNames(className, 'scratchpad__toolbar__item scratchpad__toolbar__button', {
|
||
|
activated,
|
||
|
disabled,
|
||
|
enabled: !disabled,
|
||
|
});
|
||
|
return (
|
||
|
<button
|
||
|
{...rest}
|
||
|
tabIndex="-1"
|
||
|
className={cn}
|
||
|
onClick={() => !disabled && onClick && onClick()}
|
||
|
>
|
||
|
<div>{children}</div>
|
||
|
</button>
|
||
|
);
|
||
|
}
|
||
|
|
||
|
ToolbarButtonComponent.propTypes = {
|
||
|
activated: PropTypes.bool,
|
||
|
disabled: PropTypes.bool,
|
||
|
onClick: PropTypes.func,
|
||
|
className: PropTypes.string,
|
||
|
children: PropTypes.node,
|
||
|
};
|
||
|
|
||
|
ToolbarButtonComponent.defaultProps = {
|
||
|
activated: false,
|
||
|
disabled: false,
|
||
|
};
|
||
|
|
||
|
export function ToolbarSplitComponent(props) {
|
||
|
const {
|
||
|
className,
|
||
|
...rest
|
||
|
} = props;
|
||
|
const cn = classNames(className, 'scratchpad__toolbar__item scratchpad__toolbar__split');
|
||
|
return (
|
||
|
<div {...rest} className={cn} />
|
||
|
);
|
||
|
}
|
||
|
|
||
|
ToolbarSplitComponent.propTypes = {
|
||
|
className: PropTypes.string,
|
||
|
};
|
||
|
|
||
|
export function ToolbarItemComponent(props) {
|
||
|
const {
|
||
|
className,
|
||
|
children,
|
||
|
...rest
|
||
|
} = props;
|
||
|
const cn = classNames(className, 'scratchpad__toolbar__item');
|
||
|
return (
|
||
|
<div {...rest} className={cn}>{children}</div>
|
||
|
);
|
||
|
}
|
||
|
|
||
|
ToolbarItemComponent.propTypes = {
|
||
|
className: PropTypes.string,
|
||
|
children: PropTypes.node,
|
||
|
};
|