Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | 1x 1x 1x 1x 1x 1x 1x 1x 1x | // @flow
import * as React from 'react';
import type {IconProps} from 'shared/src/types';
import ToolbarIcon, {markAttrs} from '@canner/slate-icon-shared';
import addMarkOverwrite from '@canner/slate-helper-mark-addoverwrite';
import {haveMarks} from '@canner/slate-util-have';
import {getMarkType} from '@canner/slate-util-get';
import ColorPicker from 'rc-color-picker';
import hexRgb from 'hex-rgb';
import {FONTBGCOLOR} from '@canner/slate-constant/lib/marks';
import omit from 'lodash.omit';
import commonMark from '@canner/slate-editor-renderer/lib/commonMark';
import 'rc-color-picker/assets/index.css';
export const FontBgColorPlugin = (opt) => {
const options = Object.assign({
type: FONTBGCOLOR,
tagName: 'span',
backgroundColor: markAttrs.backgroundColor
}, opt);
return {
renderMark: (props) => {
if (props.mark.type === options.type)
return commonMark(options.tagName, omit(options, ['type', 'tagName']))(props);
}
}
}
export default class fontBgColor extends React.Component<IconProps, {color: Object}> {
typeName: string
constructor(props: IconProps) {
super(props);
this.typeName = this.props.type || FONTBGCOLOR;
this.state = {
color: {}
};
}
static defaultProps = {
colorKey: 'color'
}
onChange = (color: {color: string, alpha: number, open: boolean}) => {
let {change, onChange, colorKey} = this.props;
// $FlowFixMe
color.rgba = `rgba(${hexRgb(color.color, {format: 'array'}).join(',')}, ${color.alpha / 100})`;
this.setState({color});
onChange(addMarkOverwrite(change, {type: this.typeName, data: {[colorKey]: color}}));
}
render() {
const {icon, change, ...rest} = this.props;
const isActive = haveMarks(change, this.typeName);
let colorStyle = {};
Iif (isActive) {
const first = getMarkType(change, this.typeName).first().get('data');
const color = first.get('color');
const alpha = first.get('alpha');
colorStyle = {
fill: color,
opacity: alpha
};
}
return (
<ColorPicker
onChange={this.onChange}>
<ToolbarIcon
colorStyle={colorStyle}
type={this.typeName}
icon={icon || 'Background'}
isActive={isActive}
{...rest}
/>
</ColorPicker>
);
}
}
|