mirror of
https://github.com/ToolJet/ToolJet
synced 2026-05-24 09:28:31 +00:00
fix: fixed first render issues and removed unused configs
This commit is contained in:
johnsoncherian
parent
20730a3d86
commit
c1ce02f030
3 changed files with 25 additions and 287 deletions
|
|
@ -18,14 +18,29 @@ export const Steps = function Steps({ properties, styles, fireEvent, setExposedV
|
|||
const [activeStepId, setActiveStepId] = useState(currentStepId);
|
||||
const theme = properties.variant;
|
||||
const [progressBarWidth, setProgressBarWidth] = useState(0);
|
||||
const [labelPadding, setLabelPadding] = useState(0);
|
||||
const [containerPadding, setContainerPadding] = useState(0);
|
||||
const [containerWidth, setContainerWidth] = useState(0);
|
||||
const [filteredSteps, setFilteredSteps] = useState([]);
|
||||
const firstLabelRef = useRef(null);
|
||||
const lastLabelRef = useRef(null);
|
||||
const containerRef = useRef(null);
|
||||
|
||||
const currentStepIndex = filteredSteps.findIndex((step) => step.id == activeStepId);
|
||||
|
||||
useEffect(() => {
|
||||
const sanitizedSteps = JSON.parse(JSON.stringify(steps || [])).map((step) => ({
|
||||
...step,
|
||||
visible: 'visible' in step ? step.visible : true,
|
||||
disabled: 'disabled' in step ? step.disabled : false,
|
||||
}));
|
||||
const newFilteredSteps = (sanitizedSteps || []).filter((step) => step.visible);
|
||||
setFilteredSteps(newFilteredSteps);
|
||||
setStepsArr(sanitizedSteps);
|
||||
}, [JSON.stringify(steps)]);
|
||||
|
||||
// Common function to calculate progress bar width and label padding
|
||||
const calculateProgressBarWidth = () => {
|
||||
debugger;
|
||||
if (!containerRef.current || theme !== 'titles') return;
|
||||
|
||||
const containerWidth = containerRef.current.offsetWidth;
|
||||
|
|
@ -37,7 +52,7 @@ export const Steps = function Steps({ properties, styles, fireEvent, setExposedV
|
|||
|
||||
if (filteredSteps.length === 1) {
|
||||
setProgressBarWidth(containerWidth);
|
||||
setLabelPadding(0); // No padding needed for single step
|
||||
setContainerPadding(0); // No padding needed for single step
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -45,24 +60,22 @@ export const Steps = function Steps({ properties, styles, fireEvent, setExposedV
|
|||
const progressBarWidth = (containerWidth - totalStepsWidth) / totalProgressBars;
|
||||
setProgressBarWidth(Math.min(progressBarWidth, (containerWidth - totalStepsWidth) / filteredSteps.length));
|
||||
|
||||
// Calculate label padding
|
||||
// Calculate container padding
|
||||
if (firstLabelRef.current && lastLabelRef.current) {
|
||||
// Step 1: Calculate individual label width
|
||||
const labelWidth = (containerWidth - (filteredSteps.length - 1) - 4) / filteredSteps.length;
|
||||
|
||||
// Step 2: Find max label length
|
||||
const firstLabelWidth = firstLabelRef.current.offsetWidth;
|
||||
const lastLabelWidth = lastLabelRef.current.offsetWidth;
|
||||
const maxLabelWidth = Math.max(firstLabelWidth, lastLabelWidth);
|
||||
|
||||
// Step 3: Calculate label padding
|
||||
const calculatedPadding = (maxLabelWidth / 2) - 1;
|
||||
setLabelPadding(Math.max(2, calculatedPadding)); // Ensure minimum padding of 2px
|
||||
setContainerPadding(Math.max(2, calculatedPadding)); // Ensure minimum padding of 2px
|
||||
}
|
||||
};
|
||||
|
||||
// Add resize observer to track container width and calculate progress bar width
|
||||
useEffect(() => {
|
||||
calculateProgressBarWidth();
|
||||
if (theme !== 'titles') return;
|
||||
|
||||
const resizeObserver = new ResizeObserver((entries) => {
|
||||
|
|
@ -76,27 +89,7 @@ export const Steps = function Steps({ properties, styles, fireEvent, setExposedV
|
|||
}
|
||||
|
||||
return () => resizeObserver.disconnect();
|
||||
}, [theme, JSON.stringify(steps)]);
|
||||
|
||||
// Recalculate measurements when steps change
|
||||
useEffect(() => {
|
||||
calculateProgressBarWidth();
|
||||
}, [theme, JSON.stringify(steps)]);
|
||||
|
||||
// Filter visible steps and find current step index
|
||||
const filteredSteps = (stepsArr || []).filter((step) => step.visible);
|
||||
const currentStepIndex = filteredSteps.findIndex((step) => step.id == activeStepId);
|
||||
|
||||
// Sanitize steps data
|
||||
useEffect(() => {
|
||||
const sanitizedSteps = JSON.parse(JSON.stringify(steps || [])).map((step) => ({
|
||||
...step,
|
||||
visible: 'visible' in step ? step.visible : true,
|
||||
disabled: 'disabled' in step ? step.disabled : false,
|
||||
}));
|
||||
setStepsArr(sanitizedSteps);
|
||||
}, [JSON.stringify(steps)]);
|
||||
|
||||
}, [theme, JSON.stringify(steps), filteredSteps]);
|
||||
// Dynamic styles for theming
|
||||
const dynamicStyle = {
|
||||
'--bgColor': styles.color,
|
||||
|
|
@ -169,7 +162,7 @@ export const Steps = function Steps({ properties, styles, fireEvent, setExposedV
|
|||
style={{
|
||||
height,
|
||||
boxShadow,
|
||||
padding: theme === 'titles' ? `0 ${labelPadding}px` : 0,
|
||||
padding: theme === 'titles' ? `0 ${containerPadding}px` : 2,
|
||||
...dynamicStyle
|
||||
}}
|
||||
data-cy={dataCy}
|
||||
|
|
@ -184,7 +177,7 @@ export const Steps = function Steps({ properties, styles, fireEvent, setExposedV
|
|||
const isLastStep = index === filteredSteps.length - 1;
|
||||
|
||||
return (
|
||||
<React.Fragment key={step.id}>
|
||||
<React.Fragment key={index}> {/* using index as key to avoid issues due to duplicate step ids */}
|
||||
<ToolTip
|
||||
show={!step.disabled && !isDisabled}
|
||||
message={step.tooltip || ''}
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ import { verticalDividerConfig } from './verticalDivider';
|
|||
import { customComponentConfig } from './customComponent';
|
||||
import { buttonGroupConfig } from './buttonGroup';
|
||||
import { pdfConfig } from './pdf';
|
||||
import { stepsConfig } from './steps';
|
||||
// import { stepsConfig } from './steps';
|
||||
import { kanbanConfig } from './kanban';
|
||||
import { colorPickerConfig } from './colorPicker';
|
||||
import { treeSelectConfig } from './treeSelect';
|
||||
|
|
@ -106,7 +106,7 @@ export {
|
|||
customComponentConfig,
|
||||
buttonGroupConfig,
|
||||
pdfConfig,
|
||||
stepsConfig,
|
||||
// stepsConfig,
|
||||
kanbanConfig,
|
||||
kanbanBoardConfig, //!Depreciated
|
||||
colorPickerConfig,
|
||||
|
|
|
|||
|
|
@ -1,255 +0,0 @@
|
|||
export const stepsConfig = {
|
||||
name: 'Steps',
|
||||
displayName: 'Steps',
|
||||
description: 'Step-by-step navigation aid',
|
||||
component: 'Steps',
|
||||
properties: {
|
||||
variant: {
|
||||
type: 'switch',
|
||||
displayName: 'Variant',
|
||||
validation: { schema: { type: 'string' }, defaultValue: 'titles' },
|
||||
options: [
|
||||
{ displayName: 'Label', value: 'titles' },
|
||||
{ displayName: 'Numbers', value: 'numbers' },
|
||||
{ displayName: 'Plain', value: 'plain' },
|
||||
],
|
||||
accordian: 'label',
|
||||
},
|
||||
schema: {
|
||||
type: 'code',
|
||||
displayName: 'Schema',
|
||||
conditionallyRender: {
|
||||
key: 'advanced',
|
||||
value: true,
|
||||
},
|
||||
accordian: 'Options',
|
||||
},
|
||||
steps: {
|
||||
type: 'code',
|
||||
displayName: '',
|
||||
showLabel: false,
|
||||
validation: {
|
||||
schema: {
|
||||
type: 'array',
|
||||
element: { type: 'object', object: { id: { type: 'number' } } },
|
||||
},
|
||||
defaultValue: `[{ name: 'step 1'}, {name: 'step 2'}]`,
|
||||
},
|
||||
},
|
||||
visibility: {
|
||||
type: 'toggle',
|
||||
displayName: 'Visibility',
|
||||
validation: { schema: { type: 'boolean' }, defaultValue: true },
|
||||
section: 'additionalActions',
|
||||
},
|
||||
// disabledState: {
|
||||
// type: 'toggle',
|
||||
// displayName: 'Disable',
|
||||
// validation: { schema: { type: 'boolean' }, defaultValue: true },
|
||||
// section: 'additionalActions',
|
||||
// },
|
||||
advanced: {
|
||||
type: 'toggle',
|
||||
displayName: 'Dynamic options',
|
||||
validation: {
|
||||
schema: { type: 'boolean' },
|
||||
defaultValue: true,
|
||||
},
|
||||
accordian: 'Options',
|
||||
},
|
||||
currentStep: {
|
||||
type: 'code',
|
||||
displayName: 'Current step',
|
||||
validation: {
|
||||
schema: { type: 'number' },
|
||||
defaultValue: 1,
|
||||
},
|
||||
},
|
||||
stepsSelectable: {
|
||||
type: 'toggle',
|
||||
displayName: 'Steps selectable',
|
||||
validation: {
|
||||
schema: { type: 'boolean' },
|
||||
defaultValue: false,
|
||||
},
|
||||
section: 'additionalActions',
|
||||
},
|
||||
},
|
||||
defaultSize: {
|
||||
width: 22,
|
||||
height: 38,
|
||||
},
|
||||
others: {
|
||||
showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
|
||||
showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
|
||||
},
|
||||
actions: [
|
||||
{
|
||||
handle: 'setStep',
|
||||
displayName: 'Set step',
|
||||
params: [
|
||||
{
|
||||
handle: 'option',
|
||||
displayName: 'Option',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
handle: 'setVisibility',
|
||||
displayName: 'Set visibility',
|
||||
params: [
|
||||
{
|
||||
handle: 'option',
|
||||
displayName: 'Option',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
handle: 'setDisabled',
|
||||
displayName: 'Set disabled',
|
||||
params: [
|
||||
{
|
||||
handle: 'option',
|
||||
displayName: 'Option',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
handle: 'resetSteps',
|
||||
displayName: 'Reset steps',
|
||||
params: [],
|
||||
},
|
||||
{
|
||||
handle: 'setStepVisible',
|
||||
displayName: 'Set step visible',
|
||||
params: [
|
||||
{
|
||||
handle: 'id',
|
||||
displayName: 'Step id',
|
||||
},
|
||||
{
|
||||
handle: 'visibility',
|
||||
displayName: 'visibility',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
handle: 'setStepDisable',
|
||||
displayName: 'Set step disable',
|
||||
params: [
|
||||
{
|
||||
handle: 'id',
|
||||
displayName: 'Step id',
|
||||
},
|
||||
{
|
||||
handle: 'disabled',
|
||||
displayName: 'disabled',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
events: {
|
||||
onSelect: { displayName: 'On select' },
|
||||
},
|
||||
styles: {
|
||||
incompletedAccent: {
|
||||
type: 'color',
|
||||
displayName: 'Incompleted accent',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
defaultValue: '#E4E7EB',
|
||||
},
|
||||
accordian: 'steps',
|
||||
},
|
||||
incompletedLabel: {
|
||||
type: 'color',
|
||||
displayName: 'Incompleted label',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
defaultValue: '#1B1F24',
|
||||
},
|
||||
accordian: 'steps',
|
||||
},
|
||||
completedAccent: {
|
||||
type: 'color',
|
||||
displayName: 'Completed accent',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
defaultValue: '#4368E3',
|
||||
},
|
||||
accordian: 'steps',
|
||||
},
|
||||
completedLabel: {
|
||||
type: 'color',
|
||||
displayName: 'Completed label',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
defaultValue: '#FBFCFD',
|
||||
},
|
||||
accordian: 'steps',
|
||||
},
|
||||
currentStepLabel: {
|
||||
type: 'color',
|
||||
displayName: 'Current step label',
|
||||
validation: {
|
||||
schema: { type: 'string' },
|
||||
defaultValue: '#1B1F24',
|
||||
},
|
||||
accordian: 'steps',
|
||||
},
|
||||
padding: {
|
||||
type: 'switch',
|
||||
displayName: 'Padding',
|
||||
validation: {
|
||||
schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
|
||||
defaultValue: 'default',
|
||||
},
|
||||
options: [
|
||||
{ displayName: 'Default', value: 'default' },
|
||||
{ displayName: 'None', value: 'none' },
|
||||
],
|
||||
accordian: 'container',
|
||||
},
|
||||
},
|
||||
exposedVariables: {
|
||||
currentStepId: '3',
|
||||
},
|
||||
definition: {
|
||||
others: {
|
||||
showOnDesktop: { value: '{{true}}' },
|
||||
showOnMobile: { value: '{{false}}' },
|
||||
},
|
||||
properties: {
|
||||
steps: {
|
||||
value: [
|
||||
{ name: 'step 1', tooltip: 'some tooltip', id: 1, visible: { value: true }, disabled: { value: false } },
|
||||
{ name: 'step 2', tooltip: 'some tooltip', id: 2, visible: { value: true }, disabled: { value: false } },
|
||||
{ name: 'step 3', tooltip: 'some tooltip', id: 3, visible: { value: true }, disabled: { value: false } },
|
||||
{ name: 'step 4', tooltip: 'some tooltip', id: 4, visible: { value: true }, disabled: { value: false } },
|
||||
{ name: 'step 5', tooltip: 'some tooltip', id: 5, visible: { value: true }, disabled: { value: false } },
|
||||
],
|
||||
},
|
||||
schema: {
|
||||
value: `{{ [{ name: 'step 1', tooltip: 'some tooltip', id: 1,visible: true, disabled: false},{ name: 'step 2', tooltip: 'some tooltip', id: 2,visible: true, disabled: false},{ name: 'step 3', tooltip: 'some tooltip', id: 3,visible: true, disabled: false},{ name: 'step 4', tooltip: 'some tooltip', id: 4,visible: true, disabled: false},{ name: 'step 5', tooltip: 'some tooltip', id: 5,visible: true, disabled: false}]}}`,
|
||||
},
|
||||
variant: { value: 'titles' },
|
||||
currentStep: { value: '{{3}}' },
|
||||
stepsSelectable: { value: true },
|
||||
advanced: { value: `{{false}}` },
|
||||
// disabledState: { value: '{{false}}' },
|
||||
visibility: { value: '{{true}}' },
|
||||
},
|
||||
events: [],
|
||||
styles: {
|
||||
visibility: { value: '{{true}}' },
|
||||
color: { value: '' },
|
||||
textColor: { value: '' },
|
||||
padding: { value: 'default' },
|
||||
incompletedAccent: { value: '#E4E7EB' },
|
||||
incompletedLabel: { value: '#1B1F24' },
|
||||
completedAccent: { value: '#4368E3' },
|
||||
completedLabel: { value: '#1B1F24' },
|
||||
currentStepLabel: { value: '#1B1F24' },
|
||||
},
|
||||
},
|
||||
};
|
||||
Loading…
Reference in a new issue