Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix label validation style render bug. #1350

Merged
merged 19 commits into from Aug 25, 2022
Merged

Fix label validation style render bug. #1350

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
91f7532
feat(blocks-antd): Add status to input components.
StephanieJKS Aug 22, 2022
230570b
feat(blocks-antd): Add feedback classes for corresponding colors.
StephanieJKS Aug 22, 2022
51ba949
feat(blocks-antd): Replace ant feedback classes.
StephanieJKS Aug 22, 2022
8bdcfd5
fix: Revert back to ant classes.
StephanieJKS Aug 24, 2022
f5b70a4
fix: Fix extra bouncing when changing from displaying feedback to dis…
StephanieJKS Aug 24, 2022
7cf9605
chore: Remove custom style classes.
StephanieJKS Aug 24, 2022
77dc6c9
Merge branch 'develop' into label-validation
StephanieJKS Aug 24, 2022
c1f9b7d
fix(blocks-antd): Fix feedback icon classes so that correct color is …
StephanieJKS Aug 24, 2022
2c02f08
fix(blocks-antd): Fix autocomplete bug when option is selected.
StephanieJKS Aug 24, 2022
ed73fe9
chore(blocks-antd): Simplify code for label feedback / extra.
StephanieJKS Aug 24, 2022
f7f78e9
feat(blocks-antd): Add feedback icon to TextInput and Selectors.
StephanieJKS Aug 24, 2022
65df59d
Merge branch 'develop' into label-validation
Gervwyk Aug 24, 2022
832f68c
feat(blocks-antd): Change content to use named args.
StephanieJKS Aug 24, 2022
2719887
feat(blocks-antd): Add feedback icon to WeekSelector.
StephanieJKS Aug 24, 2022
cd049c6
Merge branch 'label-validation' of https://github.com/lowdefy/lowdefy…
StephanieJKS Aug 24, 2022
280f05d
Merge branch 'develop' into label-validation
Gervwyk Aug 24, 2022
91a1e8b
feat(blocks-antd): Change feedback icon to be added in label.
StephanieJKS Aug 25, 2022
997fae8
feat(blocks-antd): Add default suffix icon to date selectors.
StephanieJKS Aug 25, 2022
1e29169
fix(blocks-antd): Add class for feedback icon margin.
StephanieJKS Aug 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 1 addition & 3 deletions packages/plugins/blocks/blocks-antd/src/blocks/AutoComplete/AutoComplete.js
View file
Open in desktop
Expand Up @@ -56,9 +56,7 @@ const AutoCompleteInput = ({
allowClear={properties.allowClear !== false}
size={properties.size}
filterOption={(input, option) =>
(option.filterstring || option.children.props.html || '')
.toLowerCase()
.indexOf(input.toLowerCase()) >= 0
`${option.value}`.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
onChange={(newVal) => {
methods.setValue(newVal);
Expand Down
13 changes: 6 additions & 7 deletions packages/plugins/blocks/blocks-antd/src/blocks/DateRangeSelector/DateRangeSelector.js
View file
Open in desktop
Expand Up @@ -66,20 +66,19 @@ const DateRangeSelector = ({
getPopupContainer={() => document.getElementById(`${blockId}_popup`)}
separator={properties.separator || '~'}
size={properties.size}
status={validation.status}
placeholder={
(type.isArray(properties.placeholder) && [
properties.placeholder[0] || 'Start Date',
properties.placeholder[1] || 'End Date',
]) || ['Start Date', 'End Date']
}
suffixIcon={
properties.suffixIcon && (
<Icon
blockId={`${blockId}_suffixIcon`}
events={events}
properties={properties.suffixIcon || 'AiOutlineCalendar'}
/>
)
<Icon
blockId={`${blockId}_suffixIcon`}
events={events}
properties={properties.suffixIcon || 'AiOutlineCalendar'}
/>
}
onChange={(newVal) => {
methods.setValue(
Expand Down
13 changes: 6 additions & 7 deletions packages/plugins/blocks/blocks-antd/src/blocks/DateSelector/DateSelector.js
View file
Open in desktop
Expand Up @@ -58,14 +58,13 @@ const DateSelector = ({
placeholder={properties.placeholder || 'Select Date'}
showToday={properties.showToday}
size={properties.size}
status={validation.status}
suffixIcon={
properties.suffixIcon && (
<Icon
blockId={`${blockId}_suffixIcon`}
events={events}
properties={properties.suffixIcon || 'AiOutlineCalendar'}
/>
)
<Icon
blockId={`${blockId}_suffixIcon`}
events={events}
properties={properties.suffixIcon || 'AiOutlineCalendar'}
/>
}
disabledDate={disabledDate(properties.disabledDates)}
onChange={(newVal) => {
Expand Down
13 changes: 6 additions & 7 deletions packages/plugins/blocks/blocks-antd/src/blocks/DateTimeSelector/DateTimeSelector.js
View file
Open in desktop
Expand Up @@ -67,14 +67,13 @@ const DateTimeSelector = ({
showNow={properties.showNow}
showToday={properties.showToday}
size={properties.size}
status={validation.status}
suffixIcon={
properties.suffixIcon && (
<Icon
blockId={`${blockId}_suffixIcon`}
events={events}
properties={properties.suffixIcon || 'AiOutlineCalendar'}
/>
)
<Icon
blockId={`${blockId}_suffixIcon`}
events={events}
properties={properties.suffixIcon || 'AiOutlineCalendar'}
/>
}
showTime={{
format: properties.timeFormat || 'HH:mm',
Expand Down
35 changes: 23 additions & 12 deletions packages/plugins/blocks/blocks-antd/src/blocks/Label/Label.js
View file
Open in desktop
Expand Up @@ -44,6 +44,7 @@ const Label = ({
const {
extraClassName,
feedbackClassName,
iconClassName,
label,
labelClassName,
labelCol,
Expand All @@ -64,7 +65,7 @@ const Label = ({
const IconNode = validation.status && iconMap[validation.status];
const icon =
validation.status && IconNode ? (
<span className="ant-form-item-children-icon">
<span className={iconClassName}>
<IconNode />
</span>
) : null;
Expand All @@ -85,17 +86,27 @@ const Label = ({
</div>
{icon}
</div>
<CSSMotion visible={showFeedback} motionName="show-help" motionAppear removeOnLeave>
{({ className: motionClassName }) => (
<div className={classNames(feedbackClassName, motionClassName)}>
{validation[validationKeyMap[validation.status]] &&
validation[validationKeyMap[validation.status]].length > 0 &&
validation[validationKeyMap[validation.status]][0]}
</div>
)}
</CSSMotion>
{showExtra && (
<div className={extraClassName}>{renderHtml({ html: properties.extra, methods })}</div>
{(showFeedback || showExtra) && (
<CSSMotion
visible={showFeedback || showExtra}
motionName="show-help"
motionAppear
removeOnLeave
>
{({ className: motionClassName }) => (
<div className={classNames(extraClassName, motionClassName)}>
{showFeedback ? (
<div className={classNames(feedbackClassName)}>
{validation[validationKeyMap[validation.status]] &&
validation[validationKeyMap[validation.status]].length > 0 &&
validation[validationKeyMap[validation.status]][0]}
</div>
) : (
renderHtml({ html: properties.extra, methods })
)}
</div>
)}
</CSSMotion>
)}
</Col>
</Row>
Expand Down
20 changes: 11 additions & 9 deletions packages/plugins/blocks/blocks-antd/src/blocks/Label/labelLogic.js
View file
Open in desktop
Expand Up @@ -47,12 +47,6 @@ const labelLogic = ({
const rowClassName = classNames({
[`ant-form-item`]: true,
[`ant-form-item-with-help`]: false,
// Status
[`ant-form-item-has-feedback`]: validation.status && properties.hasFeedback !== false,
[`ant-form-item-has-success`]: validation.status === 'success',
[`ant-form-item-has-warning`]: validation.status === 'warning',
[`ant-form-item-has-error`]: validation.status === 'error',
[`ant-form-item-is-validating`]: validation.status === 'validating',
[methods.makeCssClass({
flexWrap: properties.inline && 'inherit', // wrap extra content below input
marginBottom: 0,
Expand Down Expand Up @@ -94,10 +88,8 @@ const labelLogic = ({
properties.extraStyle,
])]: true,
});

const feedbackClassName = classNames({
'ant-form-item-explain': true,
'ant-form-item-extra': true,
[`ant-form-item-explain-feedback`]: validation.status && properties.hasFeedback !== false,
[`ant-form-item-explain-success`]: validation.status === 'success',
[`ant-form-item-explain-warning`]: validation.status === 'warning',
[`ant-form-item-explain-error`]: validation.status === 'error',
Expand All @@ -110,11 +102,21 @@ const labelLogic = ({
])]: true,
});

const iconClassName = classNames({
'ant-form-item-feedback-icon': true,
[`ant-form-item-feedback-icon-success`]: validation.status === 'success',
[`ant-form-item-feedback-icon-warning`]: validation.status === 'warning',
[`ant-form-item-feedback-icon-error`]: validation.status === 'error',
[`ant-form-item-feedback-icon-validating`]: validation.status === 'validating',
'ldf-feedback-icon': true,
});

const showExtra = !!properties.extra && (!validation.status || validation.status === 'success');
const showFeedback = validation.status === 'warning' || validation.status === 'error';
return {
extraClassName,
feedbackClassName,
iconClassName,
label: !properties.disabled && label,
labelClassName,
labelCol,
Expand Down
4 changes: 4 additions & 0 deletions packages/plugins/blocks/blocks-antd/src/blocks/Label/style.less
View file
Open in desktop
Expand Up @@ -28,3 +28,7 @@
.ant-input-affix-wrapper {
height: 100% !important;
}

.ldf-feedback-icon {
margin-left: @margin-xss;
}
13 changes: 6 additions & 7 deletions packages/plugins/blocks/blocks-antd/src/blocks/MonthSelector/MonthSelector.js
View file
Open in desktop
Expand Up @@ -60,15 +60,14 @@ const MonthSelector = ({
getPopupContainer={() => document.getElementById(`${blockId}_popup`)}
placeholder={properties.placeholder || 'Select Month'}
size={properties.size}
status={validation.status}
value={type.isDate(value) ? moment.utc(value).startOf('month') : null}
suffixIcon={
properties.suffixIcon && (
<Icon
blockId={`${blockId}_suffixIcon`}
events={events}
properties={properties.suffixIcon || 'AiOutlineCalendar'}
/>
)
<Icon
blockId={`${blockId}_suffixIcon`}
events={events}
properties={properties.suffixIcon || 'AiOutlineCalendar'}
/>
}
onChange={(newVal) => {
methods.setValue(
Expand Down
1 change: 1 addition & 0 deletions packages/plugins/blocks/blocks-antd/src/blocks/MultipleSelector/MultipleSelector.js
View file
Open in desktop
Expand Up @@ -62,6 +62,7 @@ const MultipleSelector = ({
placeholder={get(properties, 'placeholder', { default: 'Select items' })}
showArrow={get(properties, 'showArrow', { default: true })}
size={properties.size}
status={validation.status}
value={getValueIndex(value, uniqueValueOptions, true)}
suffixIcon={
properties.suffixIcon && (
Expand Down
1 change: 1 addition & 0 deletions packages/plugins/blocks/blocks-antd/src/blocks/NumberInput/NumberInput.js
View file
Open in desktop
Expand Up @@ -57,6 +57,7 @@ const NumberInput = ({
placeholder={properties.placeholder}
precision={properties.precision}
size={properties.size}
status={validation.status}
step={properties.step}
onChange={(newVal) => {
methods.setValue(newVal);
Expand Down
1 change: 1 addition & 0 deletions packages/plugins/blocks/blocks-antd/src/blocks/PasswordInput/PasswordInput.js
View file
Open in desktop
Expand Up @@ -65,6 +65,7 @@ const PasswordInput = ({
placeholder={properties.placeholder}
value={value}
size={properties.size}
status={validation.status}
visibilityToggle={properties.visibilityToggle}
/>
);
Expand Down
1 change: 1 addition & 0 deletions packages/plugins/blocks/blocks-antd/src/blocks/Selector/Selector.js
View file
Open in desktop
Expand Up @@ -59,6 +59,7 @@ const Selector = ({
getPopupContainer={() => document.getElementById(`${blockId}_popup`)}
disabled={properties.disabled || loading}
placeholder={get(properties, 'placeholder', { default: 'Select item' })}
status={validation.status}
suffixIcon={
properties.suffixIcon && (
<Icon
Expand Down
21 changes: 13 additions & 8 deletions packages/plugins/blocks/blocks-antd/src/blocks/TextInput/TextInput.js
View file
Open in desktop
Expand Up @@ -54,6 +54,7 @@ const TextInput = ({
maxLength={properties.maxLength}
placeholder={properties.placeholder}
size={properties.size}
status={validation.status}
value={value}
onChange={(event) => {
methods.setValue(event.target.value);
Expand All @@ -78,14 +79,18 @@ const TextInput = ({
))
}
suffix={
properties.suffix ||
(properties.suffixIcon && (
<Icon
blockId={`${blockId}_suffixIcon`}
events={events}
properties={properties.suffixIcon}
/>
))
(properties.suffix || properties.suffixIcon) && (
<>
{properties.suffix && properties.suffix}
{properties.suffixIcon && (
<Icon
blockId={`${blockId}_suffixIcon`}
events={events}
properties={properties.suffixIcon}
/>
)}
</>
)
}
/>
);
Expand Down
13 changes: 6 additions & 7 deletions packages/plugins/blocks/blocks-antd/src/blocks/WeekSelector/WeekSelector.js
View file
Open in desktop
Expand Up @@ -60,14 +60,13 @@ const WeekSelector = ({
getPopupContainer={() => document.getElementById(`${blockId}_popup`)}
placeholder={properties.placeholder || 'Select Week'}
size={properties.size}
status={validation.status}
suffixIcon={
properties.suffixIcon && (
<Icon
blockId={`${blockId}_suffixIcon`}
events={events}
properties={properties.suffixIcon || 'AiOutlineCalendar'}
/>
)
<Icon
blockId={`${blockId}_suffixIcon`}
events={events}
properties={properties.suffixIcon || 'AiOutlineCalendar'}
/>
}
onChange={(newVal) => {
methods.setValue(
Expand Down