From e838d3e96bb421056dfb06f7f68b53416b17fd31 Mon Sep 17 00:00:00 2001 From: Manish Kushare Date: Mon, 26 Sep 2022 15:05:46 +0530 Subject: [PATCH] Enhancement : [ Text widget ] refactor (#4038) * refactor Text widget * refactored text widget * bug fixed * changed the type of action for visibility to toggle * changed the default value of background color to transparent * made event menu open by default in widget inspector * made the suggested changes * bug fixed : app was crashing due to visibility * made changes to improve readability --- frontend/src/Editor/Components/Text.jsx | 21 +++++++++-------- .../Inspector/Components/DefaultComponent.jsx | 6 ++--- frontend/src/Editor/Inspector/Inspector.jsx | 2 +- .../src/Editor/WidgetManager/widgetConfig.js | 23 ++++++++++++++----- 4 files changed, 33 insertions(+), 19 deletions(-) diff --git a/frontend/src/Editor/Components/Text.jsx b/frontend/src/Editor/Components/Text.jsx index 7a623c18c2..0116f44d46 100644 --- a/frontend/src/Editor/Components/Text.jsx +++ b/frontend/src/Editor/Components/Text.jsx @@ -6,8 +6,7 @@ export const Text = function Text({ height, properties, styles, darkMode, regist textSize, textColor, textAlign, - visibility, - disabledState, + backgroundColor, fontWeight, decoration, transformation, @@ -17,29 +16,33 @@ export const Text = function Text({ height, properties, styles, darkMode, regist letterSpacing, wordSpacing, fontVariant, + disabledState, } = styles; - const [loadingState, setLoadingState] = useState(false); + const { loadingState } = properties; const [text, setText] = useState(() => computeText()); - + const [visibility, setVisibility] = useState(styles.visibility); const color = textColor === '#000' ? (darkMode ? '#fff' : '#000') : textColor; + useEffect(() => { + visibility !== styles.visibility && setVisibility(styles.visibility); + }, [styles.visibility]); + // eslint-disable-next-line react-hooks/exhaustive-deps useEffect(() => setText(() => computeText()), [properties.text]); - useEffect(() => { - const loadingStateProperty = properties.loadingState; - setLoadingState(loadingStateProperty); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [properties.loadingState]); registerAction('setText', async function (text) { setText(text); }); + registerAction('visibility', async function (value) { + setVisibility(value); + }); function computeText() { return properties.text === 0 || properties.text === false ? properties.text?.toString() : properties.text; } const computedStyles = { + backgroundColor, color, height, display: visibility ? 'flex' : 'none', diff --git a/frontend/src/Editor/Inspector/Components/DefaultComponent.jsx b/frontend/src/Editor/Inspector/Components/DefaultComponent.jsx index 24db43e330..21cf344d3d 100644 --- a/frontend/src/Editor/Inspector/Components/DefaultComponent.jsx +++ b/frontend/src/Editor/Inspector/Components/DefaultComponent.jsx @@ -86,7 +86,7 @@ export const baseComponentProperties = ( if (events.length > 0) { items.push({ title: `${i18next.t('widget.common.events', 'Events')}`, - isOpen: false, + isOpen: true, children: ( {renderElement( @@ -142,7 +142,7 @@ export const baseComponentProperties = ( items.push({ title: `${i18next.t('widget.common.layout', 'Layout')}`, - isOpen: false, + isOpen: true, children: ( <> {renderElement( diff --git a/frontend/src/Editor/Inspector/Inspector.jsx b/frontend/src/Editor/Inspector/Inspector.jsx index b236ce6627..acf93ee584 100644 --- a/frontend/src/Editor/Inspector/Inspector.jsx +++ b/frontend/src/Editor/Inspector/Inspector.jsx @@ -326,7 +326,7 @@ export const Inspector = ({ items.push({ title: `${t('widget.common.general', 'General')}`, - isOpen: false, + isOpen: true, children: ( <> {renderElement( diff --git a/frontend/src/Editor/WidgetManager/widgetConfig.js b/frontend/src/Editor/WidgetManager/widgetConfig.js index bb7835e528..5f469fe535 100644 --- a/frontend/src/Editor/WidgetManager/widgetConfig.js +++ b/frontend/src/Editor/WidgetManager/widgetConfig.js @@ -1655,7 +1655,13 @@ export const widgets = [ schema: { type: 'number' }, }, }, - + backgroundColor: { + type: 'color', + displayName: 'Background Color', + validation: { + schema: { type: 'string' }, + }, + }, textColor: { type: 'color', displayName: 'Text Color', @@ -1692,6 +1698,11 @@ export const widgets = [ displayName: 'Set Text', params: [{ handle: 'text', displayName: 'Text', defaultValue: 'New text' }], }, + { + handle: 'visibility', + displayName: 'Set Visibility', + params: [{ handle: 'visibility', displayName: 'Value', defaultValue: `{{false}}`, type: 'toggle' }], + }, ], definition: { others: { @@ -1699,17 +1710,15 @@ export const widgets = [ showOnMobile: { value: '{{false}}' }, }, properties: { - text: { value: 'Text goes here !' }, - visible: { value: '{{true}}' }, + text: { value: 'Hello, there!' }, loadingState: { value: `{{false}}` }, }, events: [], styles: { - textSize: { value: 14 }, + backgroundColor: { value: '#ffffff00' }, textColor: { value: '#000' }, + textSize: { value: 14 }, textAlign: { value: 'left' }, - visibility: { value: '{{true}}' }, - disabledState: { value: '{{false}}' }, fontWeight: { value: 'normal' }, decoration: { value: 'none' }, transformation: { value: 'none' }, @@ -1719,6 +1728,8 @@ export const widgets = [ letterSpacing: { value: 0 }, wordSpacing: { value: 0 }, fontVariant: { value: 'normal' }, + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, }, }, },