@omniumretail/component-library 1.1.55 → 1.1.56

package/dist/main.css

@@ -8,7 +8,7 @@
 .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}
 .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}
 .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}
-.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}.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 .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{contain:inline-size}.yhGDUJJiYhqjPCJgNdjI .ant-switch.ant-switch-checked .ant-switch-handle{inset-inline-start:calc(100% - 14px)}.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 .Ds9QXq3nvfH3xjzeP87H{background-color:var(--color-grey) !important}.yhGDUJJiYhqjPCJgNdjI .Ds9QXq3nvfH3xjzeP87H[aria-checked=true]{background:var(--color-orange) !important}@media(max-width: 768px){.yhGDUJJiYhqjPCJgNdjI .Ds9QXq3nvfH3xjzeP87H{min-width:28px;height:16px;line-height:16px}.yhGDUJJiYhqjPCJgNdjI .Ds9QXq3nvfH3xjzeP87H .ant-switch-handle{width:12px;height:12px}.yhGDUJJiYhqjPCJgNdjI .Ds9QXq3nvfH3xjzeP87H .ant-switch-inner{padding-inline-start:18px;padding-inline-end:6px}}.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}
 .vdTO5pKaLXA2FdyblLq5{border-color:rgba(var(--color-black-rgb), 0.5)}
 .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)}
 .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}

package/dist/types/components/Tag/index.d.ts

@@ -9,5 +9,6 @@ export interface customTagProps extends TagProps {
     }[];
     addExtraTags?: string;
     disable?: boolean;
+    addSwitch?: boolean;
 }
 export declare const TagField: (props: customTagProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omniumretail/component-library",
-  "version": "1.1.55",
+  "version": "1.1.56",
   "private": false,
   "main": "dist/bundle.js",
   "typings": "./dist/types/index",

package/src/components/Tag/index.tsx

@@ -6,6 +6,7 @@ import { TweenOneGroup } from 'rc-tween-one';
 import styles from './styles.module.scss';
 import classNames from 'classnames';
 import { t } from 'i18next';
+import { Switch } from 'antd';
 
 export interface customTagProps extends TagProps {
     customTags?: string[];
@@ -14,6 +15,7 @@ export interface customTagProps extends TagProps {
     advancedTags?: { display: string; value: string }[];
     addExtraTags?: string;
     disable?: boolean;
+    addSwitch?: boolean;
 }
 
 export const TagField = (props: customTagProps) => {
@@ -22,6 +24,7 @@ export const TagField = (props: customTagProps) => {
     const [tags, setTags] = useState<string[]>(customTags.filter(tag => !tag.includes('=')));
     const [inputVisible, setInputVisible] = useState<boolean>(false);
     const [inputValue, setInputValue] = useState('');
+    // const [switchValue, setSwitchValue] = useState<boolean>(false);
     const inputRef = useRef<InputRef>(null);
     const [advancedTagList, setAdvancedTagList] = useState<Array<{ display: string; value: string }>>([]);
     const [allTags, setAllTags] = useState<string[]>(customTags.filter(tag => !tag.includes('=')));
@@ -57,7 +60,12 @@ export const TagField = (props: customTagProps) => {
         if (inputValue && allTags.indexOf(inputValue) === -1) {
             const [, value] = inputValue.split('=');
 
-            setAllTags([...allTags, inputValue]);
+            const newAllTags = props.addSwitch ? [inputValue] : [...allTags, inputValue];
+            const newTags = props.addSwitch ? [inputValue] : [...tags, inputValue];
+
+            setAllTags(newAllTags);
+            setTags(newTags);
+
             const matchedFilter = advancedTags && advancedTags.find(filter => filter.display === inputValue.split('=')[0]);
 
             if (matchedFilter && !advancedTagList.some(tag => tag.display === inputValue)) {
@@ -67,6 +75,8 @@ export const TagField = (props: customTagProps) => {
                 };
 
                 setAdvancedTagList([...advancedTagList, newTag]);
+            } else if (props.addSwitch) {
+                setTags([inputValue]);
             } else {
                 setTags([...tags, inputValue]);
             }
@@ -112,10 +122,11 @@ export const TagField = (props: customTagProps) => {
     useEffect(() => {
         // Adiciona a nova tag ao allTags usando a prop addExtraTags
         if (props.addExtraTags && typeof props.addExtraTags === "string") {
-            setTags([...tags, props.addExtraTags]);
-            setAllTags([...allTags, props.addExtraTags]);
+            const newTags = props.addSwitch ? [props.addExtraTags] : [...tags, props.addExtraTags];
+            setTags(newTags);
+            setAllTags(newTags);
         }
-    }, [props.addExtraTags]);
+    }, [props.addExtraTags, props.addSwitch]);
 
     const forMap = (tag: string) => {
         const tagElem = (
@@ -150,24 +161,34 @@ export const TagField = (props: customTagProps) => {
 
     return (
         <div className={styles.tagfield}>
-            {inputVisible && (
-                <Input
-                    ref={inputRef}
-                    type="text"
-                    size="small"
-                    value={inputValue}
-                    onChange={handleInputChange}
-                    onKeyDown={handleKeyDown}
-                    onPressEnter={handleInputConfirm}
-                    className={styles['tagfield__input']}
-                    disabled={disable}
-                />
-            )}
-            {!inputVisible && (
-                <Tag onClick={showInput} className={classNames(styles['tagfield__creator'], 'site-tag-plus')}>
-                    <SearchOutlined /> {t('components.tag.search')}
-                </Tag>
-            )}
+            <div className={styles.switchInputContainer}>
+                {inputVisible && (
+                    <Input
+                        ref={inputRef}
+                        type="text"
+                        size="small"
+                        value={inputValue}
+                        onChange={handleInputChange}
+                        onKeyDown={handleKeyDown}
+                        onPressEnter={handleInputConfirm}
+                        className={styles['tagfield__input']}
+                        disabled={disable}
+                    />
+                )}
+
+                {!inputVisible && (
+                    <Tag onClick={showInput} className={classNames(styles['tagfield__creator'], 'site-tag-plus')}>
+                        <SearchOutlined /> {t('components.tag.search')}
+                    </Tag>
+                )}
+
+                    {/* <Switch
+                        checked={switchValue}
+                        onChange={() => setSwitchValue(!switchValue)}
+                        className={styles.switch}
+                    /> */}
+            </div>
+
             {
                 advancedTags &&
                 <div style={{ marginTop: 16, marginBottom: 16 }} className={styles.advancedTagsWrapper}>

package/src/components/Tag/styles.module.scss

@@ -1,6 +1,12 @@
 .tagfield {
     contain: inline-size;
 
+    :global {
+        .ant-switch.ant-switch-checked .ant-switch-handle {
+            inset-inline-start: calc(100% - 14px);
+        }
+    }
+
     .tagsContainer {
         margin-top: 16px;
 
@@ -16,6 +22,7 @@
         gap: 12px;
         padding: 16px;
         margin-inline-end: 0;
+        width: 100%;
 
         :global {
             .ant-input {
@@ -43,14 +50,14 @@
                 padding-right: 24px;
                 min-height: 34px;
             }
-    
+
             .anticon-close {
                 color: var(--color-white);
                 font-size: 12px;
                 position: absolute;
                 right: 4px;
                 top: 10px;
-    
+
                 &:hover {
                     color: var(--color-black);
                 }
@@ -58,6 +65,46 @@
         }
     }
 
+    .switch {
+        background-color: var(--color-grey) !important;
+
+        &[aria-checked="true"] {
+            background: var(--color-orange) !important;
+        }
+
+        @media (max-width: 768px) {
+            min-width: 28px;
+            height: 16px;
+            line-height: 16px;
+
+            :global {
+                .ant-switch-handle {
+                    width: 12px;
+                    height: 12px;
+                }
+
+
+
+                .ant-switch-inner {
+                    padding-inline-start: 18px;
+                    padding-inline-end: 6px;
+                }
+            }
+        }
+    }
+
+    .switchInputContainer {
+        display: flex;
+        align-items: center;
+        gap: 32px;
+        width: calc(100% - 40px);
+
+        @media (max-width: 768px) {
+            gap: 12px;
+            width: calc(100% - 20px);
+        }
+    }
+
     .advancedTagsWrapper {
         display: flex;
         gap: 12px;
@@ -74,4 +121,4 @@
             cursor: pointer;
         }
     }
-}
+}