Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-05 22:38:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

[improvement] Widget components #1475 - star rating widget (#1490)

Browse source 
* new implementation/image

* Revert "new implementation/image"

This reverts commit 637bd83108.

* new implementation/star-rating
This commit is contained in:
Arpit 2021-12-14 16:46:35 +05:30 committed by GitHub
parent ada707678e
commit d46ea97ae9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
frontend/src/Editor/Components/StarRating/index.js
View file

@ -2,42 +2,18 @@ import '@/_styles/widgets/star-rating.scss';
import React from 'react';
import { useTrail } from 'react-spring';
import { resolveReferences, resolveWidgetFieldValue } from '@/_helpers/utils';
import Star from './star';
export const StarRating = function StarRating({
id,
component,
onComponentClick,
onComponentOptionChanged,
currentState,
onEvent,
}) {
const label = component.definition.properties.label.value;
const defaultSelected = +component.definition.properties.defaultSelected.value ?? 5;
const maxRating = +component.definition.properties.maxRating.value ?? 5;
const allowHalfStar = component.definition.properties.allowHalfStar.value ?? false;
const textColorProperty = component.definition.styles.textColor;
const color = textColorProperty ? textColorProperty.value : '#ffb400';
const labelColorProperty = component.definition.styles.labelColor;
const labelColor = labelColorProperty ? labelColorProperty.value : '#333';
const widgetVisibility = component.definition.styles?.visibility?.value ?? true;
const disabledState = component.definition.styles?.disabledState?.value ?? false;
export const StarRating = function StarRating({ properties, styles, fireEvent, setExposedVariable }) {
const label = properties.label;
const defaultSelected = properties.defaultSelected ?? 5;
const maxRating = properties.maxRating ?? 5;
const allowHalfStar = properties.allowHalfStar ?? false;
const tooltips = properties.tooltips;
const parsedDisabledState =
typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState;
let parsedWidgetVisibility = widgetVisibility;
try {
parsedWidgetVisibility = resolveReferences(parsedWidgetVisibility, currentState, []);
} catch (err) {
console.log(err);
}
const tooltips = component.definition.properties.tooltips.value ?? [];
const _tooltips = resolveReferences(tooltips, currentState, []) ?? [];
const { visibility, disabledState, textColorProperty, labelColor } = styles;
const color = textColorProperty ?? '#ffb400';
const animatedStars = useTrail(maxRating, {
config: {
@ -58,21 +34,21 @@ export const StarRating = function StarRating({
React.useEffect(() => {
setRatingIndex(defaultSelected - 1);
onComponentOptionChanged(component, 'value', defaultSelected);
setExposedVariable('value', defaultSelected);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [defaultSelected]);
React.useEffect(() => {
setTimeout(() => {
onComponentOptionChanged(component, 'value', defaultSelected);
setExposedVariable('value', defaultSelected);
}, 1000);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
function handleClick(idx) {
// +1 cos code is considering index from 0,1,2.....
onComponentOptionChanged(component, 'value', idx + 1);
onEvent('onChange', { component });
setExposedVariable('value', idx + 1);
fireEvent('onChange');
}
const getActive = (index) => {
@ -86,20 +62,12 @@ export const StarRating = function StarRating({
};
const getTooltip = (index) => {
if (_tooltips && Array.isArray(_tooltips) && _tooltips.length > 0) return _tooltips[index];
if (tooltips && Array.isArray(tooltips) && tooltips.length > 0) return tooltips[index];
return '';
};
return (
<div
data-disabled={parsedDisabledState}
className="star-rating"
onClick={(event) => {
event.stopPropagation();
onComponentClick(id, component, event);
}}
style={{ display: parsedWidgetVisibility ? '' : 'none' }}
>
<div data-disabled={disabledState} className="star-rating" style={{ display: visibility ? '' : 'none' }}>
{/* TODO: Add label color defination property instead of hardcoded color*/}
<span className="label form-check-label col-auto" style={{ color: labelColor }}>
{label}