2021-04-02 04:16:26 +00:00
|
|
|
import React from 'react';
|
2021-08-30 11:43:05 +00:00
|
|
|
import { resolveReferences } from '@/_helpers/utils';
|
2021-04-02 04:16:26 +00:00
|
|
|
|
2021-04-30 06:31:32 +00:00
|
|
|
export const TextInput = function TextInput({
|
|
|
|
|
id,
|
|
|
|
|
width,
|
|
|
|
|
height,
|
|
|
|
|
component,
|
|
|
|
|
onComponentClick,
|
|
|
|
|
currentState,
|
2021-04-30 08:10:57 +00:00
|
|
|
onComponentOptionChanged
|
2021-04-30 06:31:32 +00:00
|
|
|
}) {
|
|
|
|
|
console.log('currentState', currentState);
|
2021-04-04 13:11:17 +00:00
|
|
|
|
2021-04-30 06:31:32 +00:00
|
|
|
const placeholder = component.definition.properties.placeholder.value;
|
2021-08-30 12:51:09 +00:00
|
|
|
const widgetVisibility = component.definition.styles?.visibility?.value || true;
|
2021-08-30 11:43:05 +00:00
|
|
|
|
|
|
|
|
let parsedWidgetVisibility = widgetVisibility;
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
parsedWidgetVisibility = resolveReferences(parsedWidgetVisibility, currentState, []);
|
|
|
|
|
} catch (err) { console.log(err); }
|
2021-04-04 13:11:17 +00:00
|
|
|
|
2021-04-30 06:31:32 +00:00
|
|
|
return (
|
|
|
|
|
<input
|
2021-08-30 13:23:58 +00:00
|
|
|
onClick={event => {event.stopPropagation(); onComponentClick(id, component)}}
|
2021-04-30 06:31:32 +00:00
|
|
|
onChange={(e) => onComponentOptionChanged(component, 'value', e.target.value)}
|
|
|
|
|
type="text"
|
2021-04-30 08:10:57 +00:00
|
|
|
className="form-control"
|
2021-04-30 06:31:32 +00:00
|
|
|
placeholder={placeholder}
|
2021-08-30 11:43:05 +00:00
|
|
|
style={{ width, height, display:parsedWidgetVisibility ? '' : 'none' }}
|
2021-04-30 06:31:32 +00:00
|
|
|
/>
|
|
|
|
|
);
|
2021-04-02 04:16:26 +00:00
|
|
|
};
|