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

[improvement] Widget components #1475 - range-picker widget (#1486)

Browse source 
* new implementation/daterange-picker

* resolved

* Bump default width of range picker from 8 to 10

Co-authored-by: Sherfin Shamsudeen <sherfin94@gmail.com>
This commit is contained in:
Arpit 2021-12-14 16:47:02 +05:30 committed by GitHub
parent 8fa30f5612
commit 1069320120
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
frontend/src/Editor/Components/DaterangePicker.jsx
View file

@ -3,48 +3,34 @@ import 'react-datetime/css/react-datetime.css';
import { DateRangePicker } from 'react-dates';
import 'react-dates/lib/css/_datepicker.css';
import 'react-dates/initialize';
import { resolveReferences, resolveWidgetFieldValue } from '@/_helpers/utils';
export const DaterangePicker = function DaterangePicker({
id,
height,
component,
onComponentClick,
currentState,
onComponentOptionChanged,
properties,
styles,
exposedVariables,
setExposedVariable,
}) {
console.log('currentState', currentState);
const { visibility, disabledState } = styles;
const startDateProp = component.definition.properties.startDate;
const endDateProp = component.definition.properties.endDate;
const formatProp = component.definition.properties.format;
const widgetVisibility = component.definition.styles?.visibility?.value ?? true;
const disabledState = component.definition.styles?.disabledState?.value ?? false;
const parsedDisabledState =
typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState;
const startDateProp = exposedVariables.startDate;
const endDateProp = exposedVariables.endDate;
const formatProp = properties.format;
const [focusedInput, setFocusedInput] = useState(null);
const [startDate, setStartDate] = useState(startDateProp ? startDateProp.value : null);
const [endDate, setEndDate] = useState(endDateProp ? endDateProp.value : null);
let parsedWidgetVisibility = widgetVisibility;
try {
parsedWidgetVisibility = resolveReferences(parsedWidgetVisibility, currentState, []);
} catch (err) {
console.log(err);
}
const [startDate, setStartDate] = useState(startDateProp ?? null);
const [endDate, setEndDate] = useState(endDateProp ?? null);
function onDateChange(dates) {
const start = dates.startDate;
const end = dates.endDate;
if (start) {
onComponentOptionChanged(component, 'startDate', start.format(formatProp.value));
setExposedVariable('startDate', start.format(formatProp.value));
}
if (end) {
onComponentOptionChanged(component, 'endDate', end.format(formatProp.value));
setExposedVariable('endDate', end.format(formatProp.value));
}
setStartDate(start);
@ -56,16 +42,9 @@ export const DaterangePicker = function DaterangePicker({
}
return (
<div
className="daterange-picker-widget p-0"
style={{ height, display: parsedWidgetVisibility ? '' : 'none' }}
onClick={(event) => {
event.stopPropagation();
onComponentClick(id, component, event);
}}
>
<div className="daterange-picker-widget p-0" style={{ height, display: visibility ? '' : 'none' }}>
<DateRangePicker
disabled={parsedDisabledState}
disabled={disabledState}
startDate={startDate}
startDateId="startDate"
isOutsideRange={() => false}

2
frontend/src/Editor/Components/components.js
View file

@ -644,7 +644,7 @@ export const componentTypes = [
description: 'Select a date range',
component: 'DaterangePicker',
defaultSize: {
width: 8,
width: 10,
height: 30,
},
others: {