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

Styles added

Browse source
This commit is contained in:
Shaurya Sharma 2025-03-19 02:31:37 +05:30
parent 7dc87f8ba5
commit ccc14a030c
5 changed files with 224 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
frontend/src/AppBuilder/WidgetManager/widgets/phoneinput.js
View file

@ -35,7 +35,11 @@ export const phoneinputConfig = {
defaultValue: 'Default value',
},
},
isCountryChangeEnabled: {
type: 'toggle',
displayName: 'Enable country change',
validation: { schema: { type: 'boolean' }, defaultValue: true },
},
loadingState: {
type: 'toggle',
displayName: 'Loading state',
@ -162,21 +166,6 @@ export const phoneinputConfig = {
validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
accordian: 'field',
},
icon: {
type: 'icon',
displayName: 'Icon',
validation: { schema: { type: 'string' }, defaultValue: 'IconHome2' },
accordian: 'field',
visibility: false,
},
iconColor: {
type: 'color',
displayName: 'Icon color',
validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' },
accordian: 'field',
visibility: false,
showLabel: false,
},
borderRadius: {
type: 'numberInput',
displayName: 'Border radius',
@ -279,6 +268,7 @@ export const phoneinputConfig = {
disabledState: { value: '{{false}}' },
loadingState: { value: '{{false}}' },
tooltip: { value: '' },
isCountryChangeEnabled: { value: '{{true}}' },
},
events: [],
styles: {
@ -288,7 +278,6 @@ export const phoneinputConfig = {
errTextColor: { value: '#D72D39' },
borderRadius: { value: '{{6}}' },
backgroundColor: { value: '#fff' },
iconColor: { value: '#CFD3D859' },
direction: { value: 'left' },
width: { value: '{{33}}' },
alignment: { value: 'side' },
@ -296,8 +285,6 @@ export const phoneinputConfig = {
auto: { value: '{{true}}' },
padding: { value: 'default' },
boxShadow: { value: '0px 0px 0px 0px #00000040' },
icon: { value: 'IconHome2' },
iconVisibility: { value: false },
},
},
};

11
frontend/src/AppBuilder/Widgets/BaseComponents/hooks/useInput.js
View file

@ -56,16 +56,27 @@ export const useInput = ({
useEffect(() => {
disable !== disabledState && setDisable(disabledState);
if (isInitialRender.current) return;
setExposedVariable('isDisabled', disabledState);
}, [disabledState]);
useEffect(() => {
visibility !== properties.visibility && setVisibility(properties.visibility);
if (isInitialRender.current) return;
setExposedVariable('isVisible', properties.visibility);
}, [properties.visibility]);
useEffect(() => {
loading !== loadingState && setLoading(loadingState);
if (isInitialRender.current) return;
setExposedVariable('isLoading', loadingState);
}, [loadingState]);
useEffect(() => {
if (isInitialRender.current) return;
setExposedVariable('isMandatory', isMandatory);
}, [isMandatory]);
useEffect(() => {
if (isInitialRender.current) return;
const validationStatus = validate(value);

152
frontend/src/AppBuilder/Widgets/PhoneInput.jsx
View file

@ -1,8 +1,154 @@
import React from 'react';
import { default as ReactPhoneInput } from 'react-phone-input-2';
import 'react-phone-input-2/lib/material.css';
import 'react-phone-input-2/lib/style.css';
import { useInput } from './BaseComponents/hooks/useInput';
import Loader from '@/ToolJetUI/Loader/Loader';
import Label from '@/_ui/Label';
export const PhoneInput = (props) => {
const [value, setValue] = React.useState();
return <ReactPhoneInput placeholder="Enter phone number" value={value} onChange={setValue} enableSearch={true} />;
const { properties, styles, componentName, darkMode } = props;
const inputLogic = useInput(props);
const {
inputRef,
labelRef,
value,
visibility,
loading,
disable,
validationStatus,
showValidationError,
isFocused,
labelWidth,
iconVisibility,
setIconVisibility,
isValid,
validationError,
isMandatory,
setInputValue,
handleChange,
handleBlur,
handleFocus,
handleKeyUp,
} = inputLogic;
const { label, placeholder, isCountryChangeEnabled } = properties;
const {
textColor,
backgroundColor,
alignment,
width,
direction,
auto,
color,
borderColor,
accentColor,
errTextColor,
} = styles;
const _width = (width / 100) * 70;
const defaultAlignment = alignment === 'side' || alignment === 'top' ? alignment : 'side';
const inputBorderColor = isFocused
? accentColor != '4368E3'
? accentColor
: 'var(--primary-accent-strong)'
: borderColor != '#CCD1D5'
? borderColor
: disable || loading
? '1px solid var(--borders-disabled-on-white)'
: 'var(--borders-default)';
const inputStyle = {
color: textColor,
backgroundColor,
border: `${isFocused ? '1.5px' : '1px'} solid ${inputBorderColor}`,
};
const buttonStyle = {
backgroundColor: backgroundColor,
border: `${isFocused ? '1.5px' : '1px'} solid ${inputBorderColor}`,
};
const loaderStyle = {
right:
direction === 'right' &&
defaultAlignment === 'side' &&
((label?.length > 0 && width > 0) || (auto && width == 0 && label && label?.length != 0))
? `${labelWidth + 11}px`
: '11px',
top:
defaultAlignment === 'top'
? ((label?.length > 0 && width > 0) || (auto && width == 0 && label && label?.length != 0)) &&
'calc(50% + 10px)'
: '',
transform:
defaultAlignment === 'top' &&
((label?.length > 0 && width > 0) || (auto && width == 0 && label && label?.length != 0)) &&
' translateY(-50%)',
zIndex: 3,
};
return (
<>
<div
data-cy={`label-${String(componentName).toLowerCase()}`}
className={`text-input d-flex ${
defaultAlignment === 'top' &&
((width != 0 && label?.length != 0) || (auto && width == 0 && label && label?.length != 0))
? 'flex-column'
: 'align-items-center'
} ${direction === 'right' && defaultAlignment === 'side' ? 'flex-row-reverse' : ''}
${direction === 'right' && defaultAlignment === 'top' ? 'text-right' : ''}
${visibility || 'invisible'}`}
style={{
position: 'relative',
whiteSpace: 'nowrap',
width: '100%',
height: '100%',
}}
>
<Label
label={label}
width={width}
labelRef={labelRef}
darkMode={darkMode}
color={color}
defaultAlignment={defaultAlignment}
direction={direction}
auto={auto}
isMandatory={isMandatory}
_width={_width}
labelWidth={labelWidth}
/>
<ReactPhoneInput
placeholder={placeholder}
value={value}
onChange={setInputValue}
enableSearch={true}
ref={inputRef}
inputStyle={inputStyle}
buttonStyle={buttonStyle}
searchPlaceholder="Search"
disabled={disable || loading}
onBlur={handleBlur}
onFocus={handleFocus}
onKeyUp={handleKeyUp}
disableDropdown={isCountryChangeEnabled}
/>
{loading && <Loader style={loaderStyle} width="16" />}
</div>
{showValidationError && visibility && (
<div
data-cy={`${String(componentName).toLowerCase()}-invalid-feedback`}
style={{
color: errTextColor !== '#D72D39' ? errTextColor : 'var(--status-error-strong)',
textAlign: direction == 'left' && 'end',
fontSize: '11px',
fontWeight: '400',
lineHeight: '16px',
}}
>
{validationError}
</div>
)}
</>
);
};

52
frontend/src/_styles/theme.scss
View file

@ -18629,3 +18629,55 @@ section.ai-message-prompt-input-wrapper {
}
}
}
.react-tel-input {
height:100% !important;
width: 100% !important;
.country-list {
scrollbar-width: none;
width: 208px;
height:236px;
border-radius: 8px;
margin-top: 3px !important;
}
.form-control {
height:100% !important;
width: 100% !important;
// border: 1px solid var(--border-weak, #E4E7EB) !important;
}
.flag-dropdown {
border-right: 1px solid #CCD1D5 !important;
}
.search {
width:100%;
padding: 0px !important;
.search-emoji {
display: none;
}
.search-box {
border: 0px;
border-bottom: 1px solid var(--border-weak, #ccd1d5);
width:100%;
margin-left: 0 !important;
height: 36px;
}
}
.country {
min-height:32px;
font-size: 14px;
font-family: IBM Plex Sans;
font-weight: 400;
padding: 6px 6px !important;
padding-left: 22px !important;
color: #1B1F24;
}
}

25
server/src/modules/apps/services/widget-config/phoneinput.js
View file

@ -35,7 +35,11 @@ export const phoneinputConfig = {
defaultValue: 'Default value',
},
},
isCountryChangeEnabled: {
type: 'toggle',
displayName: 'Enable country change',
validation: { schema: { type: 'boolean' }, defaultValue: true },
},
loadingState: {
type: 'toggle',
displayName: 'Loading state',
@ -162,21 +166,6 @@ export const phoneinputConfig = {
validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
accordian: 'field',
},
icon: {
type: 'icon',
displayName: 'Icon',
validation: { schema: { type: 'string' }, defaultValue: 'IconHome2' },
accordian: 'field',
visibility: false,
},
iconColor: {
type: 'color',
displayName: 'Icon color',
validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' },
accordian: 'field',
visibility: false,
showLabel: false,
},
borderRadius: {
type: 'numberInput',
displayName: 'Border radius',
@ -279,6 +268,7 @@ export const phoneinputConfig = {
disabledState: { value: '{{false}}' },
loadingState: { value: '{{false}}' },
tooltip: { value: '' },
isCountryChangeEnabled: { value: '{{true}}' },
},
events: [],
styles: {
@ -288,7 +278,6 @@ export const phoneinputConfig = {
errTextColor: { value: '#D72D39' },
borderRadius: { value: '{{6}}' },
backgroundColor: { value: '#fff' },
iconColor: { value: '#CFD3D859' },
direction: { value: 'left' },
width: { value: '{{33}}' },
alignment: { value: 'side' },
@ -296,8 +285,6 @@ export const phoneinputConfig = {
auto: { value: '{{true}}' },
padding: { value: 'default' },
boxShadow: { value: '0px 0px 0px 0px #00000040' },
icon: { value: 'IconHome2' },
iconVisibility: { value: false },
},
},
};