Skip to content

Commit ba11eb8

Browse files
jp-programmer1jp-programmer1
committed
insert padding in pills and modified opacity
1 parent 0514478 commit ba11eb8

File tree

8 files changed

+32
-38
lines changed

8 files changed

+32
-38
lines changed

‎lib/components/Tag.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -62,24 +62,24 @@ const Tag = ({ data, styles, onClickTag, namekey, onRemove, onEditTag, className
6262
config.removeTag.text && config.removeTag.text)
6363
: react_1.default.createElement(IconClose_1.default, { color: "gray" }))))));
6464
};
65-
const Message = ({ data, config }) => (react_1.default.createElement("div", { className: "validation-builder-item-message", style: Object.assign({ opacity: data.value && data.value.message && data.value.message !== "" ? 1 : 0.60 }, config && config.message && config.message.styles) }, config && config.message ?
65+
const Message = ({ data, config }) => (react_1.default.createElement("div", { className: "validation-builder-item-message", style: Object.assign({ opacity: data.value && data.value.message && data.value.message !== "" ? 1 : 0.40 }, config && config.message && config.message.styles) }, config && config.message ?
6666
react_1.default.createElement(react_1.default.Fragment, null,
6767
config.message.icon && react_1.default.createElement("i", { className: config.message.icon }),
6868
config.message.text && config.message.text)
6969
: react_1.default.createElement("div", { className: 'validation-builder-item-icon' },
7070
react_1.default.createElement(IconMessage_1.default, null))));
71-
const NumberComponent = ({ value, config }) => (react_1.default.createElement("div", { className: "validation-builder-item-action", style: Object.assign(Object.assign({}, config && config.valueNumberTag && config.valueNumberTag.styles), { opacity: value && value !== "" ? 1 : 0.60 }) }, config && config.valueNumberTag ?
71+
const NumberComponent = ({ value, config }) => (react_1.default.createElement("div", { className: "validation-builder-item-action", style: Object.assign(Object.assign({}, config && config.valueNumberTag && config.valueNumberTag.styles), { opacity: value && value !== "" ? 1 : 0.40 }) }, config && config.valueNumberTag ?
7272
react_1.default.createElement(react_1.default.Fragment, null,
7373
config.valueNumberTag.icon && react_1.default.createElement("i", { className: config.valueNumberTag.icon }),
7474
config.valueNumberTag.text && config.valueNumberTag.text)
7575
: react_1.default.createElement("span", null, value || "0")));
76-
const StringComponent = ({ value, config }) => (react_1.default.createElement("div", { className: 'validation-builder-item-tag-string', style: Object.assign({ opacity: value && value !== "" ? 1 : 0.60 }, config && config.valueStringTag && config.valueStringTag.styles) }, config && config.valueStringTag ?
76+
const StringComponent = ({ value, config }) => (react_1.default.createElement("div", { className: 'validation-builder-item-tag-string', style: Object.assign({ opacity: value && value !== "" ? 1 : 0.40 }, config && config.valueStringTag && config.valueStringTag.styles) }, config && config.valueStringTag ?
7777
react_1.default.createElement(react_1.default.Fragment, null,
7878
config.valueStringTag.icon && react_1.default.createElement("i", { className: config.valueStringTag.icon }),
7979
config.valueStringTag.text && config.valueStringTag.text)
8080
: react_1.default.createElement("div", { className: 'validation-builder-item-icon' },
8181
react_1.default.createElement(IconKey_1.default, null))));
82-
const DateComponent = ({ value, config }) => (react_1.default.createElement("div", { className: 'validation-builder-item-tag-string', style: Object.assign({ opacity: value && value !== "" ? 1 : 0.60 }, config && config.valueDateTag && config.valueDateTag.styles) }, config && config.valueDateTag ?
82+
const DateComponent = ({ value, config }) => (react_1.default.createElement("div", { className: 'validation-builder-item-tag-string', style: Object.assign({ opacity: value && value !== "" ? 1 : 0.40 }, config && config.valueDateTag && config.valueDateTag.styles) }, config && config.valueDateTag ?
8383
react_1.default.createElement(react_1.default.Fragment, null,
8484
config.valueDateTag.icon && react_1.default.createElement("i", { className: config.valueDateTag.icon }),
8585
config.valueDateTag.text && config.valueDateTag.text)

‎lib/index.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
import { ValidationBuilderEditor } from "./custom";
22
import transformSchemaToYup from './transformYup/transformYup';
3-
export { ValidationBuilderEditor, transformSchemaToYup, };
3+
export { ValidationBuilderEditor, transformSchemaToYup };

‎lib/styles/styles.css‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,9 @@
1-
:root {
2-
--colorText: rgb(112, 111, 111);
3-
}
4-
51
/* Badge */
62
.react-jsonschema-validate-editor-container{
73
padding: 1rem;
84
}
95
.validate-editor-container-button-add{
106
display: flex;
11-
justify-content: start;
127
align-items: center;
138
margin-bottom: 0.5rem;
149
}
@@ -19,7 +14,9 @@
1914
padding: 0.4rem;
2015
margin-left: 0.2rem;
2116
}
22-
17+
.validation-builder-tag-type .validation-builder-badge{
18+
text-align: center;
19+
}
2320
.validation-builder-container-tags{
2421
display: grid;
2522
grid-template-columns: repeat(4, 1fr);
@@ -45,7 +42,7 @@
4542
background-color: white;
4643
border: 1px solid rgba(230, 230, 230, 0.705);
4744
text-align: center;
48-
color: var(--colorText);
45+
color: rgb(112, 111, 111);
4946
z-index: 99999;
5047

5148
}
@@ -73,8 +70,9 @@
7370
grid-gap: 1px;
7471
}
7572
.validation-builder-label{
73+
padding-left: 0.75rem;
74+
width: 5rem;
7675
text-align: left;
77-
width: 4rem;
7876
}
7977
.validate-editor-container-config-tags .validation-builder-data-tags {
8078
margin-right: 0.7rem;
@@ -141,7 +139,7 @@
141139
height: 1.8rem;
142140
border: 1px solid rgba(128, 128, 128, 0.472);
143141
border-radius: 0.2rem;
144-
padding-left: 0.5rem;
142+
padding-left: 0.75rem;
145143
}
146144
.validate-builder-container{
147145
padding: 1rem;
@@ -150,7 +148,7 @@
150148
display: flex;
151149
flex-wrap: wrap;
152150
}
153-
@media (min-width: 768px) {
151+
@media(min-width: 768px) {
154152
.validate-builder-TC-container-fields{
155153
flex-wrap: nowrap;
156154
}
@@ -204,6 +202,7 @@
204202
.validation-builder-container-remove-tag{
205203
opacity: 0;
206204
transition: all .2s ease-in-out;
205+
text-align: end;
207206
}
208207
.validation-builder-badge.validation-builder-grid:hover > .validation-builder-container-remove-tag{
209208
opacity: 1;

‎lib/transformJsonschema/index.d.ts‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎lib/transformJsonschema/index.js‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎package.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-validation-builder",
3-
"version": "1.0.0",
3+
"version": "1.0.1",
44
"description": "validation builder dynamic",
55
"main": "lib/index.js",
66
"types": "lib/index.d.ts",
@@ -14,7 +14,10 @@
1414
"keywords": [
1515
"validation",
1616
"react-validation",
17-
"editor-validation"
17+
"editor-validation",
18+
"dynamic-validation",
19+
"convert-yup",
20+
"transform yup editor"
1821
],
1922
"author": "Juan P. Fernández - [email protected] - https://www.linkedin.com/in/juan-pablo-fern%C3%A1ndez-23a940180/",
2023
"license": "MIT",

‎src/components/Tag.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ const Tag = ({ data, styles, onClickTag, namekey, onRemove, onEditTag, className
8989
}
9090
const Message = ({ data, config }) => (
9191
<div className="validation-builder-item-message"
92-
style={{ opacity: data.value && data.value.message && data.value.message !== "" ? 1 : 0.60, ...config && config.message && config.message.styles }}
92+
style={{ opacity: data.value && data.value.message && data.value.message !== "" ? 1 : 0.40, ...config && config.message && config.message.styles }}
9393
>
9494
{config && config.message ?
9595
<React.Fragment>
@@ -101,7 +101,7 @@ const Message = ({ data, config }) => (
101101
);
102102

103103
const NumberComponent = ({ value, config }) => (
104-
<div className="validation-builder-item-action" style={{...config && config.valueNumberTag && config.valueNumberTag.styles, opacity: value && value !== "" ? 1 : 0.60 }}>
104+
<div className="validation-builder-item-action" style={{...config && config.valueNumberTag && config.valueNumberTag.styles, opacity: value && value !== "" ? 1 : 0.40 }}>
105105
{config && config.valueNumberTag ?
106106
<React.Fragment>
107107
{config.valueNumberTag.icon && <i className={config.valueNumberTag.icon}></i>}
@@ -113,7 +113,7 @@ const NumberComponent = ({ value, config }) => (
113113

114114
const StringComponent = ({ value, config }) => (
115115
<div className='validation-builder-item-tag-string'
116-
style={{ opacity: value && value !== "" ? 1 : 0.60, ...config && config.valueStringTag && config.valueStringTag.styles }}>
116+
style={{ opacity: value && value !== "" ? 1 : 0.40, ...config && config.valueStringTag && config.valueStringTag.styles }}>
117117
{config && config.valueStringTag ?
118118
<React.Fragment>
119119
{config.valueStringTag.icon && <i className={config.valueStringTag.icon}></i>}
@@ -125,7 +125,7 @@ const StringComponent = ({ value, config }) => (
125125

126126
const DateComponent = ({ value, config }) => (
127127
<div className='validation-builder-item-tag-string'
128-
style={{ opacity: value && value !== "" ? 1 : 0.60, ...config && config.valueDateTag && config.valueDateTag.styles }}>
128+
style={{ opacity: value && value !== "" ? 1 : 0.40, ...config && config.valueDateTag && config.valueDateTag.styles }}>
129129
{config && config.valueDateTag ?
130130
<React.Fragment>
131131
{config.valueDateTag.icon && <i className={config.valueDateTag.icon}></i>}

‎src/theme/styles.css‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,9 @@
1-
:root {
2-
--colorText: rgb(112, 111, 111);
3-
}
4-
51
/* Badge */
62
.react-jsonschema-validate-editor-container{
73
padding: 1rem;
84
}
95
.validate-editor-container-button-add{
106
display: flex;
11-
justify-content: start;
127
align-items: center;
138
margin-bottom: 0.5rem;
149
}
@@ -19,7 +14,9 @@
1914
padding: 0.4rem;
2015
margin-left: 0.2rem;
2116
}
22-
17+
.validation-builder-tag-type .validation-builder-badge{
18+
text-align: center;
19+
}
2320
.validation-builder-container-tags{
2421
display: grid;
2522
grid-template-columns: repeat(4, 1fr);
@@ -45,7 +42,7 @@
4542
background-color: white;
4643
border: 1px solid rgba(230, 230, 230, 0.705);
4744
text-align: center;
48-
color: var(--colorText);
45+
color: rgb(112, 111, 111);
4946
z-index: 99999;
5047

5148
}
@@ -73,8 +70,9 @@
7370
grid-gap: 1px;
7471
}
7572
.validation-builder-label{
73+
padding-left: 0.75rem;
74+
width: 5rem;
7675
text-align: left;
77-
width: 4rem;
7876
}
7977
.validate-editor-container-config-tags .validation-builder-data-tags {
8078
margin-right: 0.7rem;
@@ -141,7 +139,7 @@
141139
height: 1.8rem;
142140
border: 1px solid rgba(128, 128, 128, 0.472);
143141
border-radius: 0.2rem;
144-
padding-left: 0.5rem;
142+
padding-left: 0.75rem;
145143
}
146144
.validate-builder-container{
147145
padding: 1rem;
@@ -150,7 +148,7 @@
150148
display: flex;
151149
flex-wrap: wrap;
152150
}
153-
@media (min-width: 768px) {
151+
@media(min-width: 768px) {
154152
.validate-builder-TC-container-fields{
155153
flex-wrap: nowrap;
156154
}
@@ -204,6 +202,7 @@
204202
.validation-builder-container-remove-tag{
205203
opacity: 0;
206204
transition: all .2s ease-in-out;
205+
text-align: end;
207206
}
208207
.validation-builder-badge.validation-builder-grid:hover > .validation-builder-container-remove-tag{
209208
opacity: 1;

0 commit comments

Comments
 (0)