Skip to content

Commit 377157a

Browse files
jp-programmer1jp-programmer1
committed
fix onChange type
1 parent 7ff2fd9 commit 377157a

File tree

15 files changed

+154
-370
lines changed

15 files changed

+154
-370
lines changed

‎lib/bootstrap/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ require("../../lib/styles/styles.css");
2929
*/
3030
const ValidationBuilderEditor = ({ data, onChange, className = "", config, pillStyles }) => {
3131
var _a;
32-
const { onChangeCallback, onAddField, fields, onRemoveField, fieldKeys, onChangeFieldName } = (0, useActionsField_1.useActionsField)(data, onChange);
32+
const { onChangeCallback, onAddField, fields, onRemoveField, fieldKeys, onChangeFieldName, onChangeType } = (0, useActionsField_1.useActionsField)(data, onChange);
3333
return (react_1.default.createElement("div", { className: `react-jsonschema-validate-editor-container ${className}` },
3434
react_1.default.createElement("div", { className: "validate-editor-container-button-add" },
3535
react_1.default.createElement("button", { type: "button", style: (_a = config === null || config === void 0 ? void 0 : config.addField) === null || _a === void 0 ? void 0 : _a.styles, className: "btn btn-primary btn-sm", onClick: onAddField }, (config === null || config === void 0 ? void 0 : config.addField) ?
@@ -52,7 +52,7 @@ const ValidationBuilderEditor = ({ data, onChange, className = "", config, pillS
5252
onChangeFieldName(value, key);
5353
} })),
5454
react_1.default.createElement("div", { className: "col-sm-2 validate-editor-container-select-type" },
55-
react_1.default.createElement(TagType_1.TagType, { classNameField: "form-select", styles: Object.assign({}, pillStyles === null || pillStyles === void 0 ? void 0 : pillStyles.pillType), data: field, onChange: (value) => onChangeCallback(value, key) })),
55+
react_1.default.createElement(TagType_1.TagType, { classNameField: "form-select", styles: Object.assign({}, pillStyles === null || pillStyles === void 0 ? void 0 : pillStyles.pillType), data: field, onChange: (value) => onChangeType(value, key) })),
5656
react_1.default.createElement("div", { className: "col-sm-7 validate-editor-container-config-tags " }, field.type &&
5757
react_1.default.createElement(ExtendedConfigEdit_1.ExtendedConfigEdit, { keyComponent: `${key}-${field.fieldKey}`, values: field, onChangeCallback: (value) => onChangeCallback(value, key), classNameFieldTag: "form-control", classNameFieldSelect: "form-select", config: { config: config, stylesTag: (pillStyles === null || pillStyles === void 0 ? void 0 : pillStyles.pillTag) || {} } })))))));
5858
};

‎lib/custom/index.d.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
/// <reference types="react" />
22
import { ValidationBuilderEditorInterface } from '../interfaces/ValidationBuilderEditorInterface';
33
import '../../lib/styles/styles.css';
4-
import '../../lib/styles/styles.css';
54
/**
65
* @param onChange function that returns a object and list (schema) => void;
76
* @param className set container className

‎lib/custom/index.js

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ const Index_1 = require("../components/Index");
1010
require("../../lib/styles/styles.css");
1111
const useActionsField_1 = require("../hooks/useActionsField");
1212
const TagType_1 = require("../components/TagType");
13-
require("../../lib/styles/styles.css");
1413
/**
1514
* @param onChange function that returns a object and list (schema) => void;
1615
* @param className set container className
@@ -30,16 +29,16 @@ require("../../lib/styles/styles.css");
3029
*/
3130
const ValidationBuilderEditor = ({ data, onChange, className = "", config, pillStyles }) => {
3231
var _a;
33-
const { onChangeCallback, onAddField, fields, onRemoveField, fieldKeys, onChangeFieldName } = (0, useActionsField_1.useActionsField)(data, onChange);
34-
return (react_1.default.createElement("div", { className: `react-jsonschema-validate-editor-container ${className}` },
32+
const { onChangeCallback, onAddField, fields, onRemoveField, fieldKeys, onChangeFieldName, onChangeType } = (0, useActionsField_1.useActionsField)(data, onChange);
33+
return (react_1.default.createElement("div", { className: `validate-builder-container ${className}` },
3534
react_1.default.createElement("div", { className: "validate-editor-container-button-add" },
3635
react_1.default.createElement("button", { type: "button", style: (_a = config === null || config === void 0 ? void 0 : config.addField) === null || _a === void 0 ? void 0 : _a.styles, className: "validate-editor-button", onClick: onAddField }, (config === null || config === void 0 ? void 0 : config.addField) ?
3736
react_1.default.createElement(react_1.default.Fragment, null,
3837
config.addField.icon && react_1.default.createElement("i", { className: config === null || config === void 0 ? void 0 : config.addField.icon }),
3938
config.addField.text && config.addField.text)
4039
: 'Add')),
41-
fields && fields.map((field, key) => (react_1.default.createElement("div", { className: "row align-items-center mb-3", key: key },
42-
react_1.default.createElement("div", { className: "col-sm-3 d-flex align-items-center", style: { marginTop: 5 } },
40+
fields && fields.map((field, key) => (react_1.default.createElement("div", { className: "validate-builder-TC-container-fields", key: key },
41+
react_1.default.createElement("div", { className: "validate-builder-TC-fields-remove", style: { marginTop: 5 } },
4342
react_1.default.createElement("div", { className: "validate-editor-container-remove-field" },
4443
react_1.default.createElement("button", { type: "button", className: "validate-editor-button", onClick: onRemoveField }, (config === null || config === void 0 ? void 0 : config.removeField) ?
4544
react_1.default.createElement(react_1.default.Fragment, null,
@@ -52,9 +51,9 @@ const ValidationBuilderEditor = ({ data, onChange, className = "", config, pillS
5251
}, onChange: (value) => {
5352
onChangeFieldName(value, key);
5453
} })),
55-
react_1.default.createElement("div", { className: "col-sm-2 validate-editor-container-select-type" },
56-
react_1.default.createElement(TagType_1.TagType, { classNameField: "validate-editor-field-input", styles: Object.assign({}, pillStyles === null || pillStyles === void 0 ? void 0 : pillStyles.pillType), data: field, onChange: (value) => onChangeCallback(value, key) })),
57-
react_1.default.createElement("div", { className: "col-sm-7 validate-editor-container-config-tags " }, field.type &&
54+
react_1.default.createElement("div", { className: "validate-editor-container-select-type" },
55+
react_1.default.createElement(TagType_1.TagType, { classNameField: "validate-editor-field-input", styles: Object.assign({}, pillStyles === null || pillStyles === void 0 ? void 0 : pillStyles.pillType), data: field, onChange: (value) => onChangeType(value, key) })),
56+
react_1.default.createElement("div", { className: "validate-editor-container-config-tags " }, field.type &&
5857
react_1.default.createElement(ExtendedConfigEdit_1.ExtendedConfigEdit, { keyComponent: `${key}-${field.fieldKey}`, values: field, onChangeCallback: (value) => onChangeCallback(value, key), classNameFieldTag: "validate-editor-field-input", classNameFieldSelect: "validate-editor-field-input", config: { config: config, stylesTag: (pillStyles === null || pillStyles === void 0 ? void 0 : pillStyles.pillTag) || {} } })))))));
5958
};
6059
exports.ValidationBuilderEditor = ValidationBuilderEditor;

‎lib/hooks/useActionsField.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,6 @@ export declare const useActionsField: (data: any, onChange: any) => {
44
fields: any[];
55
onRemoveField: (index: any) => void;
66
onChangeFieldName: (value: any, key: any) => void;
7+
onChangeType: (value: any, key: any) => void;
78
fieldKeys: any[];
89
};

‎lib/hooks/useActionsField.js

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
Object.defineProperty(exports, "__esModule", { value: true });
33
exports.useActionsField = void 0;
44
const react_1 = require("react");
5+
const utils_1 = require("../utils");
56
const useActionsField = (data, onChange) => {
67
const [values, setValues] = (0, react_1.useState)(data);
78
const [fields, setFields] = (0, react_1.useState)([]);
@@ -43,7 +44,24 @@ const useActionsField = (data, onChange) => {
4344
let copy = [...fieldKeys];
4445
copy[key] = value;
4546
setFieldKeys(copy);
46-
}, []);
47-
return { onChangeCallback, onAddField, fields, onRemoveField, onChangeFieldName, fieldKeys };
47+
}, [fieldKeys]);
48+
const onChangeType = (0, react_1.useCallback)((value, key) => {
49+
let copyFields = [...fields];
50+
let type = value.type;
51+
let fieldKey = value.fieldKey;
52+
let newType = utils_1.types[value.type];
53+
let fieldSelect = copyFields[key];
54+
console.log(fieldSelect);
55+
if (value.type !== fieldSelect.type) {
56+
for (const keyField in fieldSelect) {
57+
let find = newType.find((t) => t.name === keyField);
58+
if (!find)
59+
delete value[keyField];
60+
}
61+
value = Object.assign(Object.assign({}, value), { type, fieldKey: fieldKey });
62+
onChangeCallback(value, key);
63+
}
64+
}, [fields, onChangeCallback]);
65+
return { onChangeCallback, onAddField, fields, onRemoveField, onChangeFieldName, onChangeType, fieldKeys };
4866
};
4967
exports.useActionsField = useActionsField;

‎lib/hooks/useActionsTag.js

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,6 @@ const useActionsTag = (values, onChangeCallback) => {
1919
}
2020
}
2121
let extractOptions = utils_1.types[values.type].map((op) => ({ value: op.name, label: op.name }));
22-
data.forEach((d, index) => {
23-
let findIndex = extractOptions.findIndex(op => op.value === d.tag);
24-
if (findIndex === -1) {
25-
data.splice(index, 1);
26-
}
27-
});
2822
setGeneralOptions(extractOptions);
2923
setTags(data);
3024
}

‎lib/interfaces/JsonSchemaInterface.d.ts

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

‎lib/interfaces/JsonSchemaInterface.js

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

‎lib/styles/styles.css

Lines changed: 45 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,6 @@
11
:root {
22
--colorText: rgb(112, 111, 111);
33
}
4-
/* class utils */
5-
.t-l{
6-
text-align: left;
7-
}
8-
.t-r{
9-
text-align: right;
10-
}
11-
.t-c{
12-
text-align: center;
13-
}
144

155
/* Badge */
166
.react-jsonschema-validate-editor-container{
@@ -120,7 +110,6 @@
120110
.validation-builder-item-custom-message, .validation-builder-item-action,
121111
.validation-builder-item-custom-string, .validation-builder-item-custom-date{
122112
border: 1px solid rgba(106, 106, 106, 0.453);
123-
padding: 0.2rem;
124113
border-radius: 4px;
125114
margin-left: 0px!important;
126115
}
@@ -130,8 +119,52 @@
130119
border: 1px solid black;
131120
background-color: white;
132121
border-radius: 0.2rem;
122+
cursor: pointer;
123+
transition: all .3s ease-in-out;
124+
}
125+
.validate-editor-button:hover{
126+
opacity: 0.6;
133127
}
134128
.validate-editor-field-input{
129+
height: 1.8rem;
135130
width: 100%;
136-
height: 2.3rem;
131+
}
132+
.validate-builder-container{
133+
padding: 1rem;
134+
}
135+
.validate-builder-TC-container-fields{
136+
display: flex;
137+
align-items: center;
138+
139+
}
140+
.validate-builder-TC-fields-remove{
141+
display: flex;
142+
align-items: center;
143+
}
144+
.validate-builder-container .validation-builder-grid{
145+
display: flex;
146+
align-items: center;
147+
}
148+
.validate-builder-container .show{
149+
display: block!important;
150+
}
151+
.validate-builder-container .validation-builder-container-dropdown-menu{
152+
display: none;
153+
position: absolute;
154+
margin-top: 0.4rem;
155+
background-color: white;
156+
-webkit-box-shadow: 5px 5px 30px 5px rgba(0, 0, 0, 0.153);
157+
box-shadow: 5px 5px 30px 5px rgba(0,0,0,0.153);
158+
border-radius: 2px 0;
159+
z-index: 999999;
160+
}
161+
.validate-builder-container .validation-builder-container-tags{
162+
margin-left: 1rem;
163+
}
164+
.validate-builder-container .validate-editor-container-select-type{
165+
margin-left: 1rem;
166+
width: 10rem;
167+
}
168+
.validate-builder-container .validation-builder-conatainer-select-tag{
169+
margin-left: 1rem;
137170
}

‎src/bootstrap/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ import '../../lib/styles/styles.css';
2525
*/
2626

2727
export const ValidationBuilderEditor = ({ data, onChange, className = "", config, pillStyles }: ValidationBuilderEditorInterface): JSX.Element => {
28-
const { onChangeCallback, onAddField, fields, onRemoveField, fieldKeys, onChangeFieldName } = useActionsField(data, onChange);
28+
const { onChangeCallback, onAddField, fields, onRemoveField, fieldKeys, onChangeFieldName, onChangeType } = useActionsField(data, onChange);
2929

3030
return (
3131
<div className={`react-jsonschema-validate-editor-container ${className}`}>
@@ -66,7 +66,7 @@ export const ValidationBuilderEditor = ({ data, onChange, className = "", config
6666
<TagType
6767
classNameField="form-select"
6868
styles={{...pillStyles?.pillType }}
69-
data={field} onChange={(value: string) => onChangeCallback(value, key)}
69+
data={field} onChange={(value: string) => onChangeType(value, key)}
7070
/>
7171
</div>
7272
<div className="col-sm-7 validate-editor-container-config-tags ">

0 commit comments

Comments
 (0)