Skip to content

Commit fe920d2

Browse files
jp-programmer1jp-programmer1
committed
remove focus in bootstrap
1 parent 4ba50c4 commit fe920d2

File tree

13 files changed

+52
-46
lines changed

13 files changed

+52
-46
lines changed

‎lib/bootstrap/FilterEditor.d.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,15 @@
22
import { FilterEditor } from '../interfaces/Interfaces';
33
import '../../lib/styles/stylesTB.css';
44
/**
5-
*
65
* @param options object Array [{label:"Person Name", value:"name", icon: "fas fa-user", fieldType?: "string", fieldComponent?:(data, onChange, onEditField) => FieldComponent}];
76
* @param values object {person: "Juan", date: "12/12/2019"};
87
* @param onChangeValues function to return select value (data:values) => void;
98
* @param setVisibleValue function options to return tag value (nameFilter, value) => return string;
109
* @param getData function to query all data [{active: true, color: "red", edit: true, fieldType: "number", label: "Login Code", name: "loginCode", value: ""}];
10+
* @param configButtons object {add: {icon, text, addComponent}, remove: {icon, text, removeComponent}, filterActive: {icon, filterActiveComponent}, filterDisabled: {icon, filterDisabledComponent}}
11+
* @param className container className
1112
* @returns {JSX.Element}
1213
* @constructor
1314
*/
14-
declare const FilterEditor: ({ options, values, onChangeValues, getData, setVisibleValue, configButtons }: FilterEditor) => JSX.Element;
15+
declare const FilterEditor: ({ options, values, onChangeValues, getData, setVisibleValue, configButtons, className }: FilterEditor) => JSX.Element;
1516
export default FilterEditor;

‎lib/bootstrap/FilterEditor.js

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,27 +28,28 @@ const RenderFields_1 = require("../render-fields/RenderFields");
2828
const useFilter_1 = require("../hooks/useFilter");
2929
require("../../lib/styles/stylesTB.css");
3030
/**
31-
*
3231
* @param options object Array [{label:"Person Name", value:"name", icon: "fas fa-user", fieldType?: "string", fieldComponent?:(data, onChange, onEditField) => FieldComponent}];
3332
* @param values object {person: "Juan", date: "12/12/2019"};
3433
* @param onChangeValues function to return select value (data:values) => void;
3534
* @param setVisibleValue function options to return tag value (nameFilter, value) => return string;
3635
* @param getData function to query all data [{active: true, color: "red", edit: true, fieldType: "number", label: "Login Code", name: "loginCode", value: ""}];
36+
* @param configButtons object {add: {icon, text, addComponent}, remove: {icon, text, removeComponent}, filterActive: {icon, filterActiveComponent}, filterDisabled: {icon, filterDisabledComponent}}
37+
* @param className container className
3738
* @returns {JSX.Element}
3839
* @constructor
3940
*/
40-
const FilterEditor = ({ options = [], values = {}, onChangeValues, getData, setVisibleValue, configButtons }) => {
41+
const FilterEditor = ({ options = [], values = {}, onChangeValues, getData, setVisibleValue, configButtons, className }) => {
4142
const [viewFilter, setViewFilter] = (0, react_1.useState)();
4243
const [fieldEditMode, setFieldEditMode] = (0, react_1.useState)(false);
4344
const [openOptions, setOpenOptions] = (0, react_1.useState)(false);
4445
const { dataFields, optionsFilter, onAdd, onEdit, onRemove, onChange, onActivateFilter } = (0, useFilter_1.useFilter)({ data: values, options, onChangeCallback: onChangeValues, setVisibleValue });
4546
(0, react_1.useEffect)(() => {
4647
getData && getData(dataFields);
4748
}, [getData, dataFields]);
48-
return (react_1.default.createElement(react_1.default.Fragment, null,
49+
return (react_1.default.createElement("div", { className: className },
4950
react_1.default.createElement("div", { className: 'filter-TB-editor-container' },
5051
dataFields.length > 0 && dataFields.map((d, key) => (react_1.default.createElement(react_1.default.Fragment, { key: key },
51-
react_1.default.createElement("div", { className: "btn-group filter-TB-editor-container-tags", onClick: () => !fieldEditMode && onEdit(key) },
52+
react_1.default.createElement("div", { className: "filter-TB-editor-container-tags", onClick: () => !fieldEditMode && onEdit(key) },
5253
react_1.default.createElement("button", { type: 'button', className: `filter-TB-editor-dropdown-container btn btn-sm btn-outline-secondary dropdown-toogle ${d.edit ? 'show' : ''}`, onMouseEnter: () => setViewFilter(key), onMouseLeave: () => setViewFilter(-1), style: Object.assign(Object.assign({}, d.styles), { opacity: d.active ? 1 : 0.5 }) },
5354
d.icon && react_1.default.createElement("i", { className: `${d.icon} filter-TB-editor-tag-icon` }),
5455
react_1.default.createElement("span", { className: 'filter-TB-editor-tag' }, d.tag || d.value || d.label),
@@ -75,7 +76,7 @@ const FilterEditor = ({ options = [], values = {}, onChangeValues, getData, setV
7576
configButtons.remove.removeComponent && configButtons.remove.removeComponent),
7677
!configButtons && "Remove"))))))),
7778
optionsFilter.length > 0 &&
78-
react_1.default.createElement("div", { className: "btn-group filter-TB-editor-container-options", onClick: () => setOpenOptions(!openOptions) },
79+
react_1.default.createElement("div", { className: "filter-TB-editor-container-options", onClick: () => setOpenOptions(!openOptions) },
7980
react_1.default.createElement("button", { className: `btn btn-sm btn-outline-secondary dropdown-toogle ${openOptions ? 'show' : ""}`, type: 'button', "data-bs-toggle": "dropdown", "aria-expanded": "false" },
8081
configButtons &&
8182
react_1.default.createElement(react_1.default.Fragment, null,

‎lib/custom/FilterEditor.d.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,15 @@
22
import { FilterEditor } from '../interfaces/Interfaces';
33
import '../../lib/styles/stylesTC.css';
44
/**
5-
*
65
* @param options object Array [{label:"Person Name", value:"name", icon: "fas fa-user", fieldType?: "string", fieldComponent?:(data, onChange, onEditField) => FieldComponent}];
76
* @param values object {person: "Juan", date: "12/12/2019"};
87
* @param onChangeValues function to return select value (data:values) => void;
98
* @param setVisibleValue function options to return tag value (nameFilter, value) => return string;
109
* @param getData function to query all data [{active: true, color: "red", edit: true, fieldType: "number", label: "Login Code", name: "loginCode", value: ""}];
10+
* @param configButtons object {add: {icon, text, addComponent}, remove: {icon, text, removeComponent}, filterActive: {icon, filterActiveComponent}, filterDisabled: {icon, filterDisabledComponent}}
11+
* @param className container className
1112
* @returns {JSX.Element}
1213
* @constructor
1314
*/
14-
declare const FilterEditor: ({ options, values, onChangeValues, getData, setVisibleValue, configButtons }: FilterEditor) => JSX.Element;
15+
declare const FilterEditor: ({ options, values, onChangeValues, getData, setVisibleValue, configButtons, className }: FilterEditor) => JSX.Element;
1516
export default FilterEditor;

‎lib/custom/FilterEditor.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,24 +28,25 @@ const useFilter_1 = require("../hooks/useFilter");
2828
require("../../lib/styles/stylesTC.css");
2929
const RenderFields_1 = require("../render-fields/RenderFields");
3030
/**
31-
*
3231
* @param options object Array [{label:"Person Name", value:"name", icon: "fas fa-user", fieldType?: "string", fieldComponent?:(data, onChange, onEditField) => FieldComponent}];
3332
* @param values object {person: "Juan", date: "12/12/2019"};
3433
* @param onChangeValues function to return select value (data:values) => void;
3534
* @param setVisibleValue function options to return tag value (nameFilter, value) => return string;
3635
* @param getData function to query all data [{active: true, color: "red", edit: true, fieldType: "number", label: "Login Code", name: "loginCode", value: ""}];
36+
* @param configButtons object {add: {icon, text, addComponent}, remove: {icon, text, removeComponent}, filterActive: {icon, filterActiveComponent}, filterDisabled: {icon, filterDisabledComponent}}
37+
* @param className container className
3738
* @returns {JSX.Element}
3839
* @constructor
3940
*/
40-
const FilterEditor = ({ options = [], values = {}, onChangeValues, getData, setVisibleValue, configButtons }) => {
41+
const FilterEditor = ({ options = [], values = {}, onChangeValues, getData, setVisibleValue, configButtons, className }) => {
4142
const [viewFilter, setViewFilter] = (0, react_1.useState)();
4243
const [fieldEditMode, setFieldEditMode] = (0, react_1.useState)(false);
4344
const [openOptions, setOpenOptions] = (0, react_1.useState)(false);
4445
const { dataFields, optionsFilter, onAdd, onEdit, onRemove, onChange, onActivateFilter } = (0, useFilter_1.useFilter)({ data: values, options, onChangeCallback: onChangeValues, setVisibleValue });
4546
(0, react_1.useEffect)(() => {
4647
getData && getData(dataFields);
4748
}, [getData, dataFields]);
48-
return (react_1.default.createElement(react_1.default.Fragment, null,
49+
return (react_1.default.createElement("div", { className: className },
4950
react_1.default.createElement("div", { className: 'filter-TC-editor-container' },
5051
dataFields.length > 0 && dataFields.map((d, key) => (react_1.default.createElement(react_1.default.Fragment, { key: key },
5152
react_1.default.createElement("div", { className: "filter-TC-editor-container-tags", onClick: () => !fieldEditMode && onEdit(key) },

‎lib/index.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
import FilterEditor from "./bootstrap/FilterEditor";
1+
import FilterEditor from "./custom/FilterEditor";
22
export { FilterEditor };

‎lib/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
44
};
55
Object.defineProperty(exports, "__esModule", { value: true });
66
exports.FilterEditor = void 0;
7-
const FilterEditor_1 = __importDefault(require("./bootstrap/FilterEditor"));
7+
const FilterEditor_1 = __importDefault(require("./custom/FilterEditor"));
88
exports.FilterEditor = FilterEditor_1.default;

‎lib/interfaces/Interfaces.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export interface UseFilter {
3434
export interface FilterEditor {
3535
options: Array<Options>;
3636
values: {};
37+
className?: string;
3738
onChangeValues: (data: any) => void;
3839
getData: (data: any) => void;
3940
setVisibleValue: (nameFilter: string, value: any) => string;

‎lib/styles/stylesTB.css

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,20 @@
11
/** BOOTSTRAP **/
22
/** ------------------------------ **/
3+
.filter-TB-editor-container{
4+
display: flex;
5+
align-items: center;
6+
width: 100%;
7+
}
38
/* TAGS */
49
.filter-TB-editor-container-tags{
510
margin-right: 0.5rem;
611
}
712
.filter-TB-editor-container-tags .filter-TB-editor-dropdown-container{
813
display: flex;
914
align-items: center;
10-
width: 30%;
15+
}
16+
.filter-TB-editor-dropdown-container:focus{
17+
box-shadow: none;
1118
}
1219
.filter-TB-editor-tag-icon{
1320
margin-right: 0.3rem;
@@ -20,9 +27,6 @@
2027
}
2128
.filter-TB-editor-container-tags .filter-TB-editor-dropdown-menu{
2229
width: max-content;
23-
position: absolute;
24-
inset: 0px auto auto 0px;
25-
transform: translate(0px, 40px);
2630
}
2731
.filter-TB-editor-container-field{
2832
display: inline-flex;
@@ -41,11 +45,6 @@
4145
background-color: rgb(46, 174, 46);
4246
}
4347
/* OPTIONS */
44-
.filter-TB-editor-dropdown-menu{
45-
position: absolute;
46-
inset: 0px auto auto 0px;
47-
transform: translate(0px, 40px);
48-
}
4948
.filter-TB-editor-dropdown-menu li{
5049
cursor: pointer;
5150
}

‎src/bootstrap/FilterEditor.tsx

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,17 @@ import { useFilter } from '../hooks/useFilter';
55
import '../../lib/styles/stylesTB.css';
66

77
/**
8-
*
98
* @param options object Array [{label:"Person Name", value:"name", icon: "fas fa-user", fieldType?: "string", fieldComponent?:(data, onChange, onEditField) => FieldComponent}];
109
* @param values object {person: "Juan", date: "12/12/2019"};
1110
* @param onChangeValues function to return select value (data:values) => void;
1211
* @param setVisibleValue function options to return tag value (nameFilter, value) => return string;
1312
* @param getData function to query all data [{active: true, color: "red", edit: true, fieldType: "number", label: "Login Code", name: "loginCode", value: ""}];
13+
* @param configButtons object {add: {icon, text, addComponent}, remove: {icon, text, removeComponent}, filterActive: {icon, filterActiveComponent}, filterDisabled: {icon, filterDisabledComponent}}
14+
* @param className container className
1415
* @returns {JSX.Element}
1516
* @constructor
1617
*/
17-
const FilterEditor = ({ options = [], values = {}, onChangeValues, getData, setVisibleValue, configButtons }: FilterEditor) => {
18+
const FilterEditor = ({ options = [], values = {}, onChangeValues, getData, setVisibleValue, configButtons, className }: FilterEditor) => {
1819
const [viewFilter, setViewFilter] = useState<Number>();
1920
const [fieldEditMode, setFieldEditMode] = useState(false);
2021
const [openOptions, setOpenOptions] = useState(false);
@@ -29,11 +30,11 @@ const FilterEditor = ({ options = [], values = {}, onChangeValues, getData, setV
2930
}, [getData, dataFields]);
3031

3132
return (
32-
<React.Fragment>
33+
<div className={className}>
3334
<div className='filter-TB-editor-container'>
3435
{dataFields.length > 0 && dataFields.map((d: Field, key: any) => (
3536
<React.Fragment key={key}>
36-
<div className="btn-group filter-TB-editor-container-tags" onClick={() => !fieldEditMode && onEdit(key)}>
37+
<div className="filter-TB-editor-container-tags" onClick={() => !fieldEditMode && onEdit(key)}>
3738
<button type='button'
3839
className={`filter-TB-editor-dropdown-container btn btn-sm btn-outline-secondary dropdown-toogle ${d.edit ? 'show' : ''}`}
3940
onMouseEnter={() => setViewFilter(key)}
@@ -87,7 +88,7 @@ const FilterEditor = ({ options = [], values = {}, onChangeValues, getData, setV
8788
</React.Fragment>
8889
))}
8990
{optionsFilter.length > 0 &&
90-
<div className="btn-group filter-TB-editor-container-options" onClick={() => setOpenOptions(!openOptions)}>
91+
<div className="filter-TB-editor-container-options" onClick={() => setOpenOptions(!openOptions)}>
9192
<button className={`btn btn-sm btn-outline-secondary dropdown-toogle ${openOptions ? 'show' : ""}`} type='button' data-bs-toggle="dropdown" aria-expanded="false">
9293
{configButtons &&
9394
<React.Fragment>
@@ -111,7 +112,7 @@ const FilterEditor = ({ options = [], values = {}, onChangeValues, getData, setV
111112
</div>
112113
}
113114
</div>
114-
</React.Fragment>
115+
</div>
115116

116117
)
117118
}

‎src/custom/FilterEditor.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,17 @@ import '../../lib/styles/stylesTC.css';
55
import { FieldComponent } from '../render-fields/RenderFields';
66

77
/**
8-
*
98
* @param options object Array [{label:"Person Name", value:"name", icon: "fas fa-user", fieldType?: "string", fieldComponent?:(data, onChange, onEditField) => FieldComponent}];
109
* @param values object {person: "Juan", date: "12/12/2019"};
1110
* @param onChangeValues function to return select value (data:values) => void;
1211
* @param setVisibleValue function options to return tag value (nameFilter, value) => return string;
1312
* @param getData function to query all data [{active: true, color: "red", edit: true, fieldType: "number", label: "Login Code", name: "loginCode", value: ""}];
13+
* @param configButtons object {add: {icon, text, addComponent}, remove: {icon, text, removeComponent}, filterActive: {icon, filterActiveComponent}, filterDisabled: {icon, filterDisabledComponent}}
14+
* @param className container className
1415
* @returns {JSX.Element}
1516
* @constructor
1617
*/
17-
const FilterEditor = ({ options = [], values = {}, onChangeValues, getData, setVisibleValue, configButtons }: FilterEditor) => {
18+
const FilterEditor = ({ options = [], values = {}, onChangeValues, getData, setVisibleValue, configButtons, className }: FilterEditor) => {
1819
const [viewFilter, setViewFilter] = useState<Number>();
1920
const [fieldEditMode, setFieldEditMode] = useState(false);
2021
const [openOptions, setOpenOptions] = useState(false);
@@ -29,7 +30,7 @@ const FilterEditor = ({ options = [], values = {}, onChangeValues, getData, setV
2930
}, [getData, dataFields]);
3031

3132
return (
32-
<React.Fragment>
33+
<div className={className}>
3334
<div className='filter-TC-editor-container'>
3435
{dataFields.length > 0 && dataFields.map((d: Field, key: any) => (
3536
<React.Fragment key={key}>
@@ -111,7 +112,7 @@ const FilterEditor = ({ options = [], values = {}, onChangeValues, getData, setV
111112
</div>
112113
}
113114
</div>
114-
</React.Fragment>
115+
</div>
115116

116117
)
117118
}

0 commit comments

Comments
 (0)