@omniumretail/component-library 1.1.95 → 1.1.97
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bundle.js +1 -1
- package/dist/main.css +2 -2
- package/dist/types/components/ResponsiveTable/index.d.ts +1 -0
- package/dist/types/components/Switch/index.d.ts +4 -1
- package/dist/types/components/Tag/index.d.ts +2 -0
- package/package.json +1 -1
- package/src/components/ResponsiveTable/ResponsiveTable.stories.tsx +5 -1
- package/src/components/ResponsiveTable/index.tsx +10 -2
- package/src/components/Switch/index.tsx +12 -2
- package/src/components/Tag/Tag.stories.tsx +15 -4
- package/src/components/Tag/index.tsx +17 -7
- package/src/components/Tag/styles.module.scss +9 -34
- package/src/locales/en.json +2 -1
- package/src/locales/es.json +2 -1
- package/src/locales/pt.json +2 -1
package/dist/main.css
CHANGED
|
@@ -8,14 +8,14 @@
|
|
|
8
8
|
.YPXf1KvhUKPvYzjuCpbK{display:block;color:var(--color-black);text-transform:capitalize;font-size:var(--font-size-body-base);line-height:125%;font-weight:var(--font-weight-semibold)}.YPXf1KvhUKPvYzjuCpbK:not(:first-child){margin-top:8px}.ExPJyFK95xTcgtx9cRbg{text-transform:uppercase}
|
|
9
9
|
.EBnBgAHgtsQFrDoso9Dw{background-color:var(--color-orange);height:1px;border:none}.FLVlQ5eFtNDkCl4IcIIx{opacity:50%}.L2HU9MLCi6B1ZsJyWfp9{background-color:var(--color-blue)}.MQcBac9Gnb9D2ONENY8Q{margin:8px 0}.tdvYp9O5RnLEsNa3E_wz{margin:16px 0}.hWWGCDnwP_ROWFDlyVxe{margin:24px 0}
|
|
10
10
|
.pwZdBKCECvzAH92fQDTI{display:flex;flex-wrap:wrap;flex-direction:column}.pwZdBKCECvzAH92fQDTI .ant-table-thead>tr>th{background-color:rgba(0,0,0,0);border:0px;color:var(--color-blue)}.pwZdBKCECvzAH92fQDTI .ant-table-thead>tr>th:before{display:none}.pwZdBKCECvzAH92fQDTI .ant-table-tbody>tr{cursor:pointer}.pwZdBKCECvzAH92fQDTI .ant-table-tbody>tr:last-child>td{border-bottom:1px solid var(--color-grey-light) !important}.pwZdBKCECvzAH92fQDTI .ant-table-tbody>tr:first-child>td{border-top:1px solid var(--color-blue) !important}.pwZdBKCECvzAH92fQDTI .ant-table-tbody>tr:hover td{border-radius:0 !important;border-bottom-color:var(--color-grey-light) !important}.pwZdBKCECvzAH92fQDTI .ant-space{align-self:flex-end}.pwZdBKCECvzAH92fQDTI .ant-select-selection-placeholder{color:var(--color-black)}.pwZdBKCECvzAH92fQDTI .ant-select-selector,.pwZdBKCECvzAH92fQDTI .ant-select-focused .ant-select-selection-search{border:none !important;box-shadow:none !important}.pwZdBKCECvzAH92fQDTI .ant-select-selector:focus,.pwZdBKCECvzAH92fQDTI .ant-select-selector:hover,.pwZdBKCECvzAH92fQDTI .ant-select-focused .ant-select-selection-search:focus,.pwZdBKCECvzAH92fQDTI .ant-select-focused .ant-select-selection-search:hover{border:none !important;box-shadow:none !important}.pwZdBKCECvzAH92fQDTI .ant-pagination{max-width:calc(100% - 200px);margin-left:auto !important}.pwZdBKCECvzAH92fQDTI button[type=button].ant-pagination-item-link{margin-top:0 !important}.pwZdBKCECvzAH92fQDTI button[type=button]{margin-top:-50px}.ant-spin-dot-item{background-color:var(--color-blue) !important;opacity:1 !important}.ant-spin-dot-item:nth-child(2){background-color:var(--color-orange) !important;opacity:1}.ant-spin-dot-item:nth-child(3){background-color:var(--color-blue) !important;opacity:1}.ant-spin-dot-item:nth-child(4){background-color:var(--color-orange) !important;opacity:1}
|
|
11
|
-
.yhGDUJJiYhqjPCJgNdjI{contain:inline-size}.yhGDUJJiYhqjPCJgNdjI .
|
|
11
|
+
.yhGDUJJiYhqjPCJgNdjI{contain:inline-size}.yhGDUJJiYhqjPCJgNdjI .G9kG_bHpbSm0APdxALXI{margin-top:16px}.yhGDUJJiYhqjPCJgNdjI .G9kG_bHpbSm0APdxALXI.sFDpKKys2XzhCHAvcoE3{pointer-events:none}.LEywos4xlf3LV6eEFLFv{height:50px;display:flex;align-items:center;gap:12px;padding:16px;margin-inline-end:0;width:100%}.LEywos4xlf3LV6eEFLFv .ant-input{height:50px;padding-left:40px}.VhQgSZHBi1swQZeQePfL{height:50px}.Hfh5KLg4Y_g44Ajhx9aV .ant-tag{background-color:var(--color-orange);color:var(--color-white);padding:6px 16px;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;padding-right:24px;min-height:34px}.Hfh5KLg4Y_g44Ajhx9aV .anticon-close{color:var(--color-white);font-size:12px;position:absolute;right:4px;top:10px}.Hfh5KLg4Y_g44Ajhx9aV .anticon-close:hover{color:var(--color-black)}.yhGDUJJiYhqjPCJgNdjI .shyWfuOXQO29Vq9I8XGV{display:flex;align-items:center;gap:32px;width:calc(100% - 40px)}@media(max-width: 768px){.yhGDUJJiYhqjPCJgNdjI .shyWfuOXQO29Vq9I8XGV{gap:12px;width:calc(100% - 20px)}}.yhGDUJJiYhqjPCJgNdjI .Gj9zvBh4toFNL6uoWOIk{display:flex;gap:12px}.yhGDUJJiYhqjPCJgNdjI .BvTiplJPlDM4ob_yobaL{display:flex;flex-direction:row;gap:12px;font-family:"SilkaBold";text-decoration:underline}.yhGDUJJiYhqjPCJgNdjI .BvTiplJPlDM4ob_yobaL div{cursor:pointer}.yhGDUJJiYhqjPCJgNdjI .Qw2jwswWLKYVmJayZ1oJ{display:flex;gap:20px}.yhGDUJJiYhqjPCJgNdjI .rxp2cwAB1kcsYH2aGI5w{margin-top:2px}
|
|
12
|
+
.gER2xKwlnobsIz4BLhGJ{background-color:var(--color-grey) !important}.gER2xKwlnobsIz4BLhGJ[aria-checked=true]{background:var(--color-orange) !important}
|
|
12
13
|
.vdTO5pKaLXA2FdyblLq5{border-color:rgba(var(--color-black-rgb), 0.5)}
|
|
13
14
|
.e3BZiSKkbgvekUOREMi6{font-weight:var(--font-weight-medium);font-size:var(--font-size-body-3);margin-right:44px;margin-top:18px}.e3BZiSKkbgvekUOREMi6 .ant-radio-checked .ant-radio-inner{border-color:var(--color-black)}.e3BZiSKkbgvekUOREMi6 .ant-radio-checked .ant-radio-inner:after{background-color:var(--color-black)}.e3BZiSKkbgvekUOREMi6 .ant-radio-checked:hover .ant-radio-inner:after{background-color:var(--color-orange)}.e3BZiSKkbgvekUOREMi6 .ant-radio:hover .ant-radio-inner{border-color:var(--color-orange)}
|
|
14
15
|
.D8zh2JqbXPRwa7HPZoou{display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0 16px;background-color:var(--color-black);position:fixed;bottom:0;width:100%;padding:12px 24px;font-size:var(--font-size-body-1);color:var(--color-grey-light);height:60px;flex-direction:row;text-align:left;box-sizing:border-box}.D8zh2JqbXPRwa7HPZoou .rLcS8I6I0aB1gd6Ro7Ix{color:var(--grey2);width:100%;margin-bottom:4px}.D8zh2JqbXPRwa7HPZoou .I18ixqhkBJrOHeIm9ELH{margin-left:8px}.D8zh2JqbXPRwa7HPZoou .XVFO_EVWpXwEwbcS7OwM,.D8zh2JqbXPRwa7HPZoou .I18ixqhkBJrOHeIm9ELH{display:inline-block}.D8zh2JqbXPRwa7HPZoou .Ch59mk3ENKwL_xUV4kwI{height:25px;align-self:flex-end}
|
|
15
16
|
.yBVWvA0RtFgQb0zg7Zha .ant-modal-close{width:auto;color:var(--button-default-background)}.yBVWvA0RtFgQb0zg7Zha .ant-modal-close:hover{background-color:rgba(0,0,0,0);color:var(--button-default-background-hover-color)}.yBVWvA0RtFgQb0zg7Zha .ant-modal-content{padding:36px 24px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center}@media(min-width: 742px){.yBVWvA0RtFgQb0zg7Zha .ant-modal-content{padding:64px}}.yBVWvA0RtFgQb0zg7Zha .bIn9Tnsli5FWDJmVQ47h:hover .hAGMAlh5JyPDAiKMfgws{color:red}.yBVWvA0RtFgQb0zg7Zha .hAGMAlh5JyPDAiKMfgws{display:flex;align-items:center;justify-content:center;flex-direction:row;gap:8px;color:inherit;font-size:var(--font-size-body-3);line-height:100%;font-weight:var(--font-weight-light);text-transform:capitalize;letter-spacing:.6px}.yBVWvA0RtFgQb0zg7Zha .IEpOAjgZyRyE5md9cZvT{color:var(--color-blue);font-weight:var(--font-weight-semibold);font-size:var(--font-size-body-6);line-height:100%}.yBVWvA0RtFgQb0zg7Zha .iHFpZ9nbZF0FARnRj310{color:var(--color-black);font-size:var(--font-size-body-4);margin:12px 0 24px 0;padding:0}
|
|
16
17
|
.bMNL7jiNu8_mW6dwEyoS.luQHokN_GXPiYlWneKVa{pointer-events:none;position:relative}.bMNL7jiNu8_mW6dwEyoS.luQHokN_GXPiYlWneKVa:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(var(--color-white-rgb), 0.6);z-index:9999999}.bMNL7jiNu8_mW6dwEyoS .ant-modal-close{width:auto;color:var(--button-default-background)}.bMNL7jiNu8_mW6dwEyoS .ant-modal-close:hover{background-color:rgba(0,0,0,0);color:var(--button-default-background-hover-color)}.bMNL7jiNu8_mW6dwEyoS .ant-modal-content{padding:36px 24px;display:flex;justify-content:center;flex-direction:column;text-align:center}@media(min-width: 742px){.bMNL7jiNu8_mW6dwEyoS .ant-modal-content{padding:32px}}.bMNL7jiNu8_mW6dwEyoS .ant-modal-body{width:100%;padding-top:24px}.bMNL7jiNu8_mW6dwEyoS .ant-modal-footer button{margin-left:auto}.bMNL7jiNu8_mW6dwEyoS .WCOz4jFqbuSsRmxOc2Dq{display:flex;align-items:center;justify-content:center;flex-direction:row;gap:8px;color:inherit;font-size:var(--font-size-body-3);line-height:100%;font-weight:var(--font-weight-light);text-transform:capitalize;letter-spacing:.6px;justify-self:flex-end}.bMNL7jiNu8_mW6dwEyoS .WCOz4jFqbuSsRmxOc2Dq>p{padding:0;margin:0}.bMNL7jiNu8_mW6dwEyoS .mt484L3ogFPJIZmEQ8q_{max-width:640px;text-align:left}
|
|
17
18
|
.x_X2axa502qG690LM5DM{width:300px;max-width:300px;height:100%;background-color:var(--color-white);padding:24px;position:relative;transition:var(--transition-fast);overflow:hidden}@media(max-width: 1024px){.x_X2axa502qG690LM5DM{width:250px;max-width:250px;padding:12px}}.iEepDtDljm_PdBbkR3JA{max-width:100px;width:100px;overflow:hidden}@media(max-width: 1024px){.iEepDtDljm_PdBbkR3JA{max-width:75px;width:75px}}.iEepDtDljm_PdBbkR3JA .dcC_pqHYFgU16huYkWP5{font-size:0;transition:0;padding-left:42px}@media(max-width: 1024px){.iEepDtDljm_PdBbkR3JA .dcC_pqHYFgU16huYkWP5{padding-left:30px}}.iEepDtDljm_PdBbkR3JA .dcC_pqHYFgU16huYkWP5:first-letter{font-size:var(--font-size-body-4)}@media(max-width: 1024px){.iEepDtDljm_PdBbkR3JA .dcC_pqHYFgU16huYkWP5:first-letter{font-size:var(--font-size-body-3)}}.iEepDtDljm_PdBbkR3JA .spPPzIkYjj024FZcGckd{font-size:24px;padding-left:35px}@media(max-width: 1024px){.iEepDtDljm_PdBbkR3JA .spPPzIkYjj024FZcGckd{font-size:20px;padding-left:26px}}.dcC_pqHYFgU16huYkWP5{color:var(--color-black);padding:16px;font-weight:var(--font-weight-semibold);text-transform:uppercase;position:relative;white-space:nowrap;cursor:pointer}@media(max-width: 1024px){.dcC_pqHYFgU16huYkWP5{font-size:var(--font-size-body-3)}}.dcC_pqHYFgU16huYkWP5:after{content:"";position:absolute;bottom:0;left:0;height:1px;width:100%;background-color:var(--color-orange);transform:scaleY(0.5)}.MVw3JKiEvATmRxAAyFA8{color:var(--color-orange) !important}.ULIAFOHHnjA6viVps4dE{position:absolute;top:12px;right:24px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;z-index:1;cursor:pointer}@media(max-width: 1024px){.ULIAFOHHnjA6viVps4dE{right:4px}}.ULIAFOHHnjA6viVps4dE>*{font-size:var(--font-size-body-5)}@media(max-width: 1024px){.ULIAFOHHnjA6viVps4dE>*{font-size:var(--font-size-body-4)}}.PxCQRuiQJ_ybUIGB2l5f{margin-top:8px;padding-left:16px}.N7GunVO7DCC1e16M_hkm{color:var(--color-black);padding:8px;margin-top:8px;font-weight:var(--font-weight-semibold);cursor:pointer}@media(max-width: 767px){.x_X2axa502qG690LM5DM{width:50px;max-width:50px;padding:12px}.iEepDtDljm_PdBbkR3JA .dcC_pqHYFgU16huYkWP5{padding:12px 12px 12px 16px}.iEepDtDljm_PdBbkR3JA .spPPzIkYjj024FZcGckd{font-size:20px;padding-left:12px}}
|
|
18
|
-
.gER2xKwlnobsIz4BLhGJ{background-color:var(--color-grey) !important}.gER2xKwlnobsIz4BLhGJ[aria-checked=true]{background:var(--color-orange) !important}
|
|
19
19
|
.lOKzfPUFf3ukLT2wGZaY{display:grid;grid-template-columns:300px auto;gap:16px}.OIrZOBn2f036M5MGzc61,.adDQP_uvIYgNFVC4VdHj{background:#fff;padding:20px;overflow:auto}
|
|
20
20
|
.yBjbWkudwA_AOwhHrnlc .ant-tree-title{font-weight:var(--font-weight-semibold)}.yBjbWkudwA_AOwhHrnlc button{margin-top:32px;width:100%}.yBjbWkudwA_AOwhHrnlc button:nth-child(3){margin-top:12px}.je000VEfsPqZupGr8ymu{font-size:var(--font-size-body-4);font-weight:600;line-height:100%;color:var(--color-blue);text-transform:uppercase}.tUDGWNXopUejF6zWJloy{margin-top:20px}
|
|
21
21
|
.O0Juh2loT1HHb612gOA4 .ant-form-item{margin-bottom:0}.O0Juh2loT1HHb612gOA4 .ant-space{display:flex;flex-direction:column;gap:12px;border-bottom:1px solid var(--color-blue);padding:16px 10px}.O0Juh2loT1HHb612gOA4 .ant-space-item{width:100%}.hg7oiINfKCZSUt6dEq4A{display:none}.BAso_dbeoowN7VtxWiKx{display:grid;grid-template-columns:minmax(18px, auto) 1fr 90px;gap:20px;color:var(--color-black);font-size:var(--font-size-body-4);line-height:100%;font-weight:var(--font-weight-medium);align-items:center}.BAso_dbeoowN7VtxWiKx.W120L8cnn6ydwOqHngty{max-width:650px}.qg_bZXG9dQdJvLBRGuqw{display:grid;grid-template-columns:minmax(18px, auto) 1fr 90px;gap:20px;color:var(--color-grey-dark);font-size:var(--font-size-body-3);align-items:center}.GbZVOtcaUURjn4CweVjF{display:flex;gap:40px;font-size:var(--font-size-body-3);align-items:center}@media(max-width: 768px){.GbZVOtcaUURjn4CweVjF{gap:12px}}.C3Qrjv76hDipL39fyfzf{display:flex;align-items:center;gap:8px}@media(max-width: 768px){.C3Qrjv76hDipL39fyfzf{width:100%}}.kknDal3CIbUXI7Lu2wPV{display:flex;align-items:center;justify-content:flex-start;gap:20px}.CIMvcFtQWcBY31wttg2C{min-width:200px;max-width:450px}@media(max-width: 768px){.CIMvcFtQWcBY31wttg2C{min-width:100px;max-width:250px}}.upuPapYjj1uGowukEEIi{display:none;align-items:center;justify-content:center}.KfrJPVKxY4b6bmXeJL5U{display:flex;align-items:center;justify-content:center;gap:16px}.zRPlv7rfSSACHPLZLs16,.EHyxN8DmDHOLkQDROSV5,.NLIlnBPfo09cpWYzpZ_J{font-size:var(--font-size-body-5);cursor:pointer}.AHIc83P7PkYUr3no83sO{margin-top:24px}:where(.css-dev-only-do-not-override-f7vrd6).ant-cascader-dropdown .ant-cascader-menu-item-disabled{color:unset}
|
|
@@ -45,5 +45,6 @@ export interface ResponsiveTableCustomProps extends TableProps<any> {
|
|
|
45
45
|
buttonActionLabel?: (record: any) => string | null;
|
|
46
46
|
buttonActionMethod?: () => void;
|
|
47
47
|
buttonActionStyle?: string | ((record: any) => any);
|
|
48
|
+
cleanRowSelection?: boolean;
|
|
48
49
|
}
|
|
49
50
|
export declare const ResponsiveTable: (props: ResponsiveTableCustomProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,2 +1,5 @@
|
|
|
1
1
|
import { SwitchProps } from 'antd';
|
|
2
|
-
export
|
|
2
|
+
export interface NewSwitchProps extends SwitchProps {
|
|
3
|
+
customClass?: string;
|
|
4
|
+
}
|
|
5
|
+
export declare const Switch: ({ customClass, ...props }: NewSwitchProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import { TagProps } from 'antd';
|
|
2
3
|
export interface customTagProps extends TagProps {
|
|
3
4
|
customTags?: string[];
|
|
@@ -10,5 +11,6 @@ export interface customTagProps extends TagProps {
|
|
|
10
11
|
addExtraTags?: string;
|
|
11
12
|
disable?: boolean;
|
|
12
13
|
addSwitch?: boolean;
|
|
14
|
+
setInactiveUsersSwitch?: React.Dispatch<React.SetStateAction<boolean>>;
|
|
13
15
|
}
|
|
14
16
|
export declare const TagField: (props: customTagProps) => import("react/jsx-runtime").JSX.Element;
|
package/package.json
CHANGED
|
@@ -13,6 +13,7 @@ const Template: Story<ResponsiveTableCustomProps> = (args) => {
|
|
|
13
13
|
const [pageInfo, setPageInfo] = useState<any>({});
|
|
14
14
|
const [rowSelectionInfo, setRowSelectionInfo] = useState<any>({});
|
|
15
15
|
const [sortBy, setSortBy] = useState<string[]>(['id', 'desc']);
|
|
16
|
+
const [clearRowSelection, setClearRowSelection] = useState<boolean>(false);
|
|
16
17
|
|
|
17
18
|
const handleSortByColumnChange = (sortState: any) => {
|
|
18
19
|
console.log('handleSortChange called with:', sortState);
|
|
@@ -24,13 +25,16 @@ const Template: Story<ResponsiveTableCustomProps> = (args) => {
|
|
|
24
25
|
return (record as any)?.type === "Efetivo" ? "Pog" : null;
|
|
25
26
|
};
|
|
26
27
|
|
|
28
|
+
console.log(rowSelectionInfo);
|
|
29
|
+
|
|
27
30
|
return <ResponsiveTable
|
|
28
31
|
scroll={{ x: 4000 }}
|
|
32
|
+
cleanRowSelection={clearRowSelection}
|
|
29
33
|
columnsSortChange={handleSortByColumnChange} paginationInfo={setPageInfo} headingTranslationsKey={'tableHeadings'} rowSelectionInfo={setRowSelectionInfo}
|
|
30
34
|
actionsArray={[
|
|
31
35
|
{
|
|
32
36
|
key: '1', label: `${t('actions.one')}`, onClick: () => {
|
|
33
|
-
|
|
37
|
+
setClearRowSelection(true);
|
|
34
38
|
}
|
|
35
39
|
},
|
|
36
40
|
{ key: '2', label: `${t('actions.two')}` },
|
|
@@ -51,6 +51,7 @@ export interface ResponsiveTableCustomProps extends TableProps<any> {
|
|
|
51
51
|
buttonActionLabel?: (record: any) => string | null;
|
|
52
52
|
buttonActionMethod?: () => void;
|
|
53
53
|
buttonActionStyle?: string | ((record: any) => any);
|
|
54
|
+
cleanRowSelection?: boolean;
|
|
54
55
|
}
|
|
55
56
|
|
|
56
57
|
export const ResponsiveTable = (props: ResponsiveTableCustomProps) => {
|
|
@@ -79,7 +80,8 @@ export const ResponsiveTable = (props: ResponsiveTableCustomProps) => {
|
|
|
79
80
|
buttonActionName,
|
|
80
81
|
buttonActionMethod,
|
|
81
82
|
buttonActionStyle,
|
|
82
|
-
buttonActionLabel
|
|
83
|
+
buttonActionLabel,
|
|
84
|
+
cleanRowSelection
|
|
83
85
|
} = props;
|
|
84
86
|
|
|
85
87
|
const [customFilters, setCustomFilters] = useState<any>([]);
|
|
@@ -89,7 +91,6 @@ export const ResponsiveTable = (props: ResponsiveTableCustomProps) => {
|
|
|
89
91
|
const [selectedAllRowKeys, setSelectedAllRowKeys] = useState(false);
|
|
90
92
|
const [deselectAll, setDeselectAll] = useState(false);
|
|
91
93
|
|
|
92
|
-
|
|
93
94
|
const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
|
|
94
95
|
if (rowSelection.type === 'radio') {
|
|
95
96
|
setselectedRowKeys(newSelectedRowKeys);
|
|
@@ -174,6 +175,12 @@ export const ResponsiveTable = (props: ResponsiveTableCustomProps) => {
|
|
|
174
175
|
props.rowSelectionInfo(selectedRowKeys);
|
|
175
176
|
}, [selectedRowKeys]);
|
|
176
177
|
|
|
178
|
+
useEffect(() => {
|
|
179
|
+
if (cleanRowSelection) {
|
|
180
|
+
setselectedRowKeys([]);
|
|
181
|
+
}
|
|
182
|
+
}, [cleanRowSelection]);
|
|
183
|
+
|
|
177
184
|
useEffect(() => {
|
|
178
185
|
if (dataSource && (dataSource as any)?.length > 0) {
|
|
179
186
|
// Columns
|
|
@@ -206,6 +213,7 @@ export const ResponsiveTable = (props: ResponsiveTableCustomProps) => {
|
|
|
206
213
|
render: (_: any, record: any) => {
|
|
207
214
|
if (!items?.[0]) return null;
|
|
208
215
|
const buttonLabel = buttonActionLabel ? buttonActionLabel(record) : null;
|
|
216
|
+
|
|
209
217
|
const buttonClass = typeof buttonActionStyle === 'function'
|
|
210
218
|
? buttonActionStyle(record) // Se for uma função, chama com o `record`
|
|
211
219
|
: buttonActionStyle || ''; // Se for string, usa diretamente
|
|
@@ -1,8 +1,18 @@
|
|
|
1
1
|
import { Switch as AntdSwitch, SwitchProps } from 'antd';
|
|
2
2
|
import styles from './styles.module.scss';
|
|
3
|
+
import classNames from 'classnames';
|
|
4
|
+
|
|
5
|
+
export interface NewSwitchProps extends SwitchProps {
|
|
6
|
+
customClass?: string;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
export const Switch = ({ customClass, ...props }: NewSwitchProps) => {
|
|
10
|
+
const selectClasses = {
|
|
11
|
+
[styles.switch]: true,
|
|
12
|
+
[`${customClass}`]: customClass,
|
|
13
|
+
}
|
|
3
14
|
|
|
4
|
-
export const Switch = ({...props}: SwitchProps) => {
|
|
5
15
|
return (
|
|
6
|
-
<AntdSwitch {
|
|
16
|
+
<AntdSwitch {...props} className={ classNames(selectClasses) } />
|
|
7
17
|
);
|
|
8
18
|
};
|
|
@@ -12,11 +12,22 @@ export default {
|
|
|
12
12
|
const Template: Story<TagProps> = (args) => {
|
|
13
13
|
const [tagsInfo, setTagsInfo] = useState<any>({});
|
|
14
14
|
const [advancedTagsInfo, setAdvancedTagsInfo] = useState<any>({});
|
|
15
|
-
const advancedsFilters = [{ display: t('components.tag.State'), value: "State"}, { display: t('components.tag.1'), value: "Olaaaaaa"}];
|
|
15
|
+
const advancedsFilters = [{ display: t('components.tag.State'), value: "State" }, { display: t('components.tag.1'), value: "Olaaaaaa" }];
|
|
16
|
+
const [switchTest, setSwitchTest] = useState<boolean>(false);
|
|
16
17
|
|
|
17
|
-
console.log(
|
|
18
|
-
|
|
19
|
-
|
|
18
|
+
console.log(switchTest);
|
|
19
|
+
|
|
20
|
+
console.log('page: basic', tagsInfo, 'advanced', advancedTagsInfo);
|
|
21
|
+
|
|
22
|
+
return <TagField
|
|
23
|
+
disable={false}
|
|
24
|
+
{...args}
|
|
25
|
+
setInactiveUsersSwitch={setSwitchTest}
|
|
26
|
+
advancedTags={advancedsFilters}
|
|
27
|
+
tagsInfo={setTagsInfo}
|
|
28
|
+
advancedTagsInfo={setAdvancedTagsInfo}
|
|
29
|
+
addExtraTags={"ola"}>
|
|
30
|
+
</TagField>;
|
|
20
31
|
}
|
|
21
32
|
|
|
22
33
|
export const Primary = Template.bind({});
|
|
@@ -6,7 +6,7 @@ import { TweenOneGroup } from 'rc-tween-one';
|
|
|
6
6
|
import styles from './styles.module.scss';
|
|
7
7
|
import classNames from 'classnames';
|
|
8
8
|
import { t } from 'i18next';
|
|
9
|
-
import { Switch } from '
|
|
9
|
+
import { Switch } from '../Switch';
|
|
10
10
|
|
|
11
11
|
export interface customTagProps extends TagProps {
|
|
12
12
|
customTags?: string[];
|
|
@@ -16,6 +16,7 @@ export interface customTagProps extends TagProps {
|
|
|
16
16
|
addExtraTags?: string;
|
|
17
17
|
disable?: boolean;
|
|
18
18
|
addSwitch?: boolean;
|
|
19
|
+
setInactiveUsersSwitch?: React.Dispatch<React.SetStateAction<boolean>>;
|
|
19
20
|
}
|
|
20
21
|
|
|
21
22
|
export const TagField = (props: customTagProps) => {
|
|
@@ -191,12 +192,6 @@ export const TagField = (props: customTagProps) => {
|
|
|
191
192
|
<SearchOutlined /> {t('components.tag.search')}
|
|
192
193
|
</Tag>
|
|
193
194
|
)}
|
|
194
|
-
|
|
195
|
-
{/* <Switch
|
|
196
|
-
checked={switchValue}
|
|
197
|
-
onChange={() => setSwitchValue(!switchValue)}
|
|
198
|
-
className={styles.switch}
|
|
199
|
-
/> */}
|
|
200
195
|
</div>
|
|
201
196
|
|
|
202
197
|
{
|
|
@@ -210,6 +205,21 @@ export const TagField = (props: customTagProps) => {
|
|
|
210
205
|
</div>
|
|
211
206
|
</div>
|
|
212
207
|
}
|
|
208
|
+
|
|
209
|
+
{props.setInactiveUsersSwitch &&
|
|
210
|
+
<div className={styles.switchContainer}>
|
|
211
|
+
<div className={styles.inactiveLabel}>
|
|
212
|
+
{t('components.tag.inactiveSwitch')}:
|
|
213
|
+
</div>
|
|
214
|
+
|
|
215
|
+
<Switch
|
|
216
|
+
size={"small"}
|
|
217
|
+
customClass={styles.inactiveSwitchStyle}
|
|
218
|
+
onChange={(checked) => props?.setInactiveUsersSwitch!(checked)}
|
|
219
|
+
/>
|
|
220
|
+
</div>
|
|
221
|
+
}
|
|
222
|
+
|
|
213
223
|
<div className={`${styles.tagsContainer} ${disable ? styles.disabled : ''}`}>
|
|
214
224
|
<TweenOneGroup
|
|
215
225
|
enter={{
|
|
@@ -1,12 +1,6 @@
|
|
|
1
1
|
.tagfield {
|
|
2
2
|
contain: inline-size;
|
|
3
3
|
|
|
4
|
-
:global {
|
|
5
|
-
.ant-switch.ant-switch-checked .ant-switch-handle {
|
|
6
|
-
inset-inline-start: calc(100% - 14px);
|
|
7
|
-
}
|
|
8
|
-
}
|
|
9
|
-
|
|
10
4
|
.tagsContainer {
|
|
11
5
|
margin-top: 16px;
|
|
12
6
|
|
|
@@ -65,34 +59,6 @@
|
|
|
65
59
|
}
|
|
66
60
|
}
|
|
67
61
|
|
|
68
|
-
.switch {
|
|
69
|
-
background-color: var(--color-grey) !important;
|
|
70
|
-
|
|
71
|
-
&[aria-checked="true"] {
|
|
72
|
-
background: var(--color-orange) !important;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
@media (max-width: 768px) {
|
|
76
|
-
min-width: 28px;
|
|
77
|
-
height: 16px;
|
|
78
|
-
line-height: 16px;
|
|
79
|
-
|
|
80
|
-
:global {
|
|
81
|
-
.ant-switch-handle {
|
|
82
|
-
width: 12px;
|
|
83
|
-
height: 12px;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
.ant-switch-inner {
|
|
89
|
-
padding-inline-start: 18px;
|
|
90
|
-
padding-inline-end: 6px;
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
|
|
96
62
|
.switchInputContainer {
|
|
97
63
|
display: flex;
|
|
98
64
|
align-items: center;
|
|
@@ -121,4 +87,13 @@
|
|
|
121
87
|
cursor: pointer;
|
|
122
88
|
}
|
|
123
89
|
}
|
|
90
|
+
|
|
91
|
+
.switchContainer {
|
|
92
|
+
display: flex;
|
|
93
|
+
gap: 20px;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.inactiveSwitchStyle {
|
|
97
|
+
margin-top: 2px;
|
|
98
|
+
}
|
|
124
99
|
}
|
package/src/locales/en.json
CHANGED
package/src/locales/es.json
CHANGED
package/src/locales/pt.json
CHANGED