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> ); } } |