Skip to content

Commit

Permalink
Merge pull request imnapo#32 from jsamr/style-props
Browse files Browse the repository at this point in the history 
Provide styles props to CNRichTextEditor and CNToolbar
  • Loading branch information
@imnapo
imnapo authored Mar 22, 2019
2 parents 5206b1c + 083d196 commit 35f4cf3
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 24 deletions.
28 changes: 25 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,10 +167,13 @@ Actually we did not implement 'Toolbar buttons and menus' and 'Image Uploading P
To see an example of how to implement more advanced feature of this editor please check this [Link](https://github.com/imnapo/react-native-cn-richtext-editor/blob/master/expo-demo/App.js).

Also be noticed that this example is writen with expo and required 'react-native-popup-menu' package.
## Props

## API

### CNRichTextEditor

#### Props

| Name | Description | Required |
| ------ | ----------- | ---- |
| onSelectedTagChanged | this event triggers when selected tag of editor is changed. | No |
Expand All @@ -180,9 +183,21 @@ Also be noticed that this example is writen with expo and required 'react-native
| value | an array object which keeps value of the editor | Yes |
| styleList | an object consist of styles name and values (use getDefaultStyles function) | Yes |
| ImageComponent | a React component (class or functional) which will be used to render images. Will be passed `style` and `source` props. | No |
| style | Styles applied to the outermost component. | No |
| contentContainerStyle | Styles applied to the scrollview content. | No |

#### Instance methods

| Name | Params | Description |
| ------ | ---- | ----------- |
| applyToolbar | `toolType` | Apply the given transformation to selected text. |
| insertImage | `uri, id?, height?, width?` | Insert the provided image where cursor is positionned. |
| focus | | Focus to the last `TextInput` |

### CNToolbar

#### Props

| Name | Required | Description |
| ------ | ------ | ----------- |
| selectedTag | Yes | selected tag of the editor |
Expand All @@ -200,9 +215,15 @@ Also be noticed that this example is writen with expo and required 'react-native
| image | No | a component which renders as image button |
| highlight | No | a component which renders as highlight button |
| foreColor | No | a component which renders as foreColor button |

| style | No | style applied to container |
| color | No | default color passed to icon |
| backgroundColor | No | default background color passed to icon |
| selectedColor | No | color applied when icon is selected |
| selectedBackgroundColor | No | background color applied when icon is selected |
| iconContainerStyle | No | a style prop assigned to icon container |

### Functions

| Name | Param | Returns | Description |
| ------ | ------ | ------ |----------- |
| getInitialObject | - | javascript object | create a initial value for the editor. |
Expand All @@ -211,6 +232,7 @@ Also be noticed that this example is writen with expo and required 'react-native
| getDefaultStyles | - | javascript object | creates required styles for the editor. |

## Expo Demo App

Checkout the
[expo-demo App](https://expo.io/@imnapo/expo-demo)
on Expo which uses react-native-cn-richtext-editor components.
Expand All @@ -219,5 +241,5 @@ If you are looking to test and run expo-demo App locally, click
view the implementation & run it locally.

## License
ISC

ISC
6 changes: 3 additions & 3 deletions src/CNRichTextEditor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -528,7 +528,7 @@ class CNRichTextEditor extends Component {

render() {

const {value, style} = this.props;
const {value, style, contentContainerStyle} = this.props;

return (
<View
Expand All @@ -538,11 +538,11 @@ class CNRichTextEditor extends Component {
}, style]}>


<ScrollView contentContainerStyle={{
<ScrollView contentContainerStyle={[{
flexGrow: 1,
alignContent: 'flex-start',
justifyContent: 'flex-start',
}} >
}, contentContainerStyle]} >
<View style={{
flex: 1,
alignContent: 'flex-start',
Expand Down
39 changes: 21 additions & 18 deletions src/CNToolbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,11 @@ class CNToolbar extends Component {
}

renderStyleButtons(size, color, bgColor, selectedColor, selectedBgColor) {
const { selectedStyles, selectedTag, bold,
const { selectedStyles, selectedTag, bold, iconContainerStyle,
italic,
underline,
lineThrough } = this.props;
const iconStyles = [styles.iconContainer, iconContainerStyle]
return (
<View style={[styles.iconSetContainer, { flexGrow: 4 }]}>
{
Expand All @@ -31,8 +32,7 @@ class CNToolbar extends Component {
onPress={() => {
this.onStyleKeyPress('bold');
}}>
<View style={[styles.iconContainer
, {
<View style={[iconStyles, {
backgroundColor: selectedStyles.indexOf('bold') >= 0 ? selectedBgColor : bgColor
}]}>
{
Expand All @@ -49,7 +49,7 @@ class CNToolbar extends Component {
onPress={() => {
this.onStyleKeyPress('italic');
}}>
<View style={[styles.iconContainer
<View style={[iconStyles
, {
backgroundColor: selectedStyles.indexOf('italic') >= 0 ? selectedBgColor : bgColor
}]}>
Expand All @@ -66,7 +66,7 @@ class CNToolbar extends Component {
onPress={() => {
this.onStyleKeyPress('underline');
}}>
<View style={[styles.iconContainer
<View style={[iconStyles
, {
backgroundColor: selectedStyles.indexOf('underline') >= 0 ? selectedBgColor : bgColor
}]}>
Expand All @@ -83,7 +83,7 @@ class CNToolbar extends Component {
onPress={() => {
this.onStyleKeyPress('lineThrough');
}}>
<View style={[styles.iconContainer
<View style={[iconStyles
, {
backgroundColor: selectedStyles.indexOf('lineThrough') >= 0 ? selectedBgColor : bgColor
}]}>
Expand All @@ -100,18 +100,20 @@ class CNToolbar extends Component {

renderTagButtons(size, color, bgColor, selectedColor, selectedBgColor) {
const { selectedStyles, selectedTag, title,
heading,
heading, iconContainerStyle,
ul,
ol,
body, } = this.props;
const iconStyles = [styles.iconContainer, iconContainerStyle]

return (
<View style={[styles.iconSetContainer, { flexGrow: 5 }]}>
{body ?
<TouchableWithoutFeedback
onPress={() => {
this.onStyleKeyPress('body');
}}>
<View style={[styles.iconContainer
<View style={[iconStyles
, {
backgroundColor: selectedTag === 'body' ? selectedBgColor : bgColor
}]}>
Expand All @@ -129,7 +131,7 @@ class CNToolbar extends Component {
onPress={() => {
this.onStyleKeyPress('title');
}}>
<View style={[styles.iconContainer
<View style={[iconStyles
, {
backgroundColor: selectedTag === 'title' ? selectedBgColor : bgColor
}]}>
Expand All @@ -146,7 +148,7 @@ class CNToolbar extends Component {
onPress={() => {
this.onStyleKeyPress('heading');
}}>
<View style={[styles.iconContainer
<View style={[iconStyles
, {
backgroundColor: selectedTag === 'heading' ? selectedBgColor : bgColor
}]}>
Expand All @@ -163,7 +165,7 @@ class CNToolbar extends Component {
onPress={() => {
this.onStyleKeyPress('ul');
}}>
<View style={[styles.iconContainer
<View style={[iconStyles
, {
backgroundColor: selectedTag === 'ul' ? selectedBgColor : bgColor
}]}>
Expand All @@ -180,7 +182,7 @@ class CNToolbar extends Component {
onPress={() => {
this.onStyleKeyPress('ol');
}}>
<View style={[styles.iconContainer
<View style={[iconStyles
, {
backgroundColor: selectedTag === 'ol' ? selectedBgColor : bgColor
}]}>
Expand All @@ -197,10 +199,11 @@ class CNToolbar extends Component {

renderExtras(size, color, bgColor, selectedColor, selectedBgColor) {
const { selectedStyles, selectedTag, title,
image,
image, iconContainerStyle,
highlight,
foreColor,
} = this.props;
const iconStyles = [styles.iconContainer, iconContainerStyle]
return (
<View style={[styles.iconSetContainer, { flexGrow: 2 }]}>
{
Expand All @@ -210,7 +213,7 @@ class CNToolbar extends Component {
onPress={() => {
this.onStyleKeyPress('image');
}}>
<View style={[styles.iconContainer
<View style={[iconStyles
, {
backgroundColor: bgColor
}]}>
Expand All @@ -227,7 +230,7 @@ class CNToolbar extends Component {
onPress={() => {
this.onStyleKeyPress('foreColor');
}}>
<View style={[styles.iconContainer
<View style={[iconStyles
, {
backgroundColor: selectedStyles.indexOf('foreColor') >= 0 ? selectedBgColor : bgColor
}]}>
Expand All @@ -243,7 +246,7 @@ class CNToolbar extends Component {
onPress={() => {
this.onStyleKeyPress('highlight');
}}>
<View style={[styles.iconContainer
<View style={[iconStyles
, {
backgroundColor: selectedStyles.indexOf('highlight') >= 0 ? selectedBgColor : bgColor
}]}>
Expand All @@ -263,7 +266,7 @@ class CNToolbar extends Component {
const { selectedStyles, selectedTag,
bold, italic, underline, lineThrough,
title, heading, ul, ol, body,
image, foreColor, highlight
image, foreColor, highlight, style
} = this.props;

let styleButtons = !bold && !italic && !underline && !lineThrough;
Expand All @@ -277,7 +280,7 @@ class CNToolbar extends Component {
let selectedBgColor = this.props.selectedBackgroundColor ? this.props.selectedBackgroundColor : defaultSelectedBgColor;

return (
<View style={styles.toolbarContainer}>
<View style={[styles.toolbarContainer, style]}>
{styleButtons === false ? this.renderStyleButtons(size, color, bgColor, selectedColor, selectedBgColor) : null}
{(styleButtons === false && tagButtons === false) ? <View style={styles.separator}></View> : null}
{tagButtons === false ? this.renderTagButtons(size, color, bgColor, selectedColor, selectedBgColor) : null}
Expand Down

0 comments on commit 35f4cf3

Please sign in to comment.