fix color not selected in table properties

This commit is contained in:
ammarahm-ed
2021-12-31 15:33:22 +05:00
parent 406609301c
commit 1f0396609c
4 changed files with 15 additions and 10 deletions

View File

@@ -8,11 +8,12 @@ import Heading from '../../components/Typography/Heading';
import Paragraph from '../../components/Typography/Paragraph';
import {useTracked} from '../../provider';
import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/EventManager';
import layoutmanager from '../../utils/layout-manager';
import {SIZE} from '../../utils/SizeUtils';
import {EditorWebView} from './Functions';
import tiny from './tiny/tiny';
import ColorItem from './tiny/toolbar/coloritem';
import {editor_colors} from './tiny/toolbar/constants';
import {editor_colors, rgbToHex} from './tiny/toolbar/constants';
export const TableCellProperties = ({data}) => {
const [state] = useTracked();
@@ -21,6 +22,7 @@ export const TableCellProperties = ({data}) => {
console.log(data);
const onUpdateCell = data => {
layoutmanager.withSpringAnimation(500);
setCellOptions(data);
};
@@ -213,8 +215,7 @@ export const TableCellProperties = ({data}) => {
title="Body"
/>
</View>
<Heading size={SIZE.md}>Cell background color</Heading>
<Heading size={SIZE.md}>Cell background color(${cellOptions.backgroundColor})</Heading>
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
@@ -225,7 +226,8 @@ export const TableCellProperties = ({data}) => {
{editor_colors.map(item => (
<ColorItem
value={item}
checked={item === cellOptions.backgroundColor}
key={item}
checked={item === (rgbToHex(cellOptions.backgroundColor))}
onCustomPress={color => {
tiny.call(
EditorWebView,

View File

@@ -5,11 +5,12 @@ import {Button} from '../../components/Button';
import Heading from '../../components/Typography/Heading';
import {useTracked} from '../../provider';
import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/EventManager';
import layoutmanager from '../../utils/layout-manager';
import {SIZE} from '../../utils/SizeUtils';
import {EditorWebView} from './Functions';
import tiny from './tiny/tiny';
import ColorItem from './tiny/toolbar/coloritem';
import {editor_colors} from './tiny/toolbar/constants';
import {editor_colors, rgbToHex} from './tiny/toolbar/constants';
export const TableRowProperties = ({data}) => {
const [state] = useTracked();
@@ -18,6 +19,7 @@ export const TableRowProperties = ({data}) => {
console.log(data);
const onUpdateRow = data => {
layoutmanager.withSpringAnimation(500);
setRowOptions(data);
};
@@ -102,7 +104,8 @@ export const TableRowProperties = ({data}) => {
{editor_colors.map(item => (
<ColorItem
value={item}
checked={item === rowOptions.backgroundColor}
key={item}
checked={item === rgbToHex(rowOptions.backgroundColor)}
onCustomPress={color => {
tiny.call(
EditorWebView,
@@ -138,7 +141,7 @@ export const TableRowProperties = ({data}) => {
{editor_colors.map(item => (
<ColorItem
value={item}
checked={item === rowOptions.backgroundColor}
key={item}
onCustomPress={color => {
tiny.call(
EditorWebView,

View File

@@ -16,6 +16,8 @@ const ColorItem = ({value, format, onCustomPress, checked}) => {
const [state] = useTracked();
const {colors} = state;
const [selected, setSelected] = useState(false);
const isChecked = value !== '' && (selected || checked);
const isNil = value === '';
useEffect(() => {
if (onCustomPress) return;
@@ -68,9 +70,6 @@ const ColorItem = ({value, format, onCustomPress, checked}) => {
eSendEvent('onColorChange');
};
const isNil = value === '';
const isChecked = value !== '' && (selected || checked);
return (
<TouchableOpacity
onPress={onPress}

View File

@@ -54,6 +54,7 @@ function trim(str) {
}
export function rgbToHex(color) {
if (color.startsWith("#")) return color;
if (!color.startsWith('rgba')) {
color = '' + color;
if (!color || color.indexOf('rgb') < 0) {