@omniumretail/component-library 1.0.64 → 1.0.66

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

@@ -1,75 +1,75 @@
-.tableWrapper {
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: column;
-
-    :global {
-        .ant-table-thead > tr > th {
-            background-color: transparent;
-            border: 0px;
-            color: var(--color-blue);
-
-            &:before {
-                display: none;
-            }
-        }
-
-        .ant-table-tbody {
-            > tr {
-                cursor: pointer;
-
-                &:last-child {
-                    > td {
-                        border-bottom: 1px solid var(--color-grey-light) !important;
-                    }
-                }
-
-                &:first-child {
-                    > td {
-                        border-top: 1px solid var(--color-blue) !important;
-                    }
-                }
-
-                &:hover {
-                    td {
-                        border-radius: 0 !important;
-                        border-bottom-color: var(--color-grey-light) !important;
-                    }
-                }
-            }
-        }
-
-        .ant-space {
-            align-self: flex-end;
-        }
-
-        .ant-select-selection-placeholder {
-            color: var(--color-black);
-        }
-
-        .ant-select-selector,
-        .ant-select-focused .ant-select-selection-search {
-            border: none !important;
-            box-shadow: none !important;
-
-            &:focus,
-            &:hover {
-                border: none !important;
-                box-shadow: none !important;
-            }
-        }
-
-        .ant-pagination {
-            max-width: calc(100% - 200px);
-            margin-left: auto !important;
-        }
-
-        button[type="button"].ant-pagination-item-link {
-            margin-top: 0 !important;
-        }
-    }
-
-    button[type="button"] {
-        margin-top: -50px;
-    }
-}
+.tableWrapper {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+
+    :global {
+        .ant-table-thead > tr > th {
+            background-color: transparent;
+            border: 0px;
+            color: var(--color-blue);
+
+            &:before {
+                display: none;
+            }
+        }
+
+        .ant-table-tbody {
+            > tr {
+                cursor: pointer;
+
+                &:last-child {
+                    > td {
+                        border-bottom: 1px solid var(--color-grey-light) !important;
+                    }
+                }
+
+                &:first-child {
+                    > td {
+                        border-top: 1px solid var(--color-blue) !important;
+                    }
+                }
+
+                &:hover {
+                    td {
+                        border-radius: 0 !important;
+                        border-bottom-color: var(--color-grey-light) !important;
+                    }
+                }
+            }
+        }
+
+        .ant-space {
+            align-self: flex-end;
+        }
+
+        .ant-select-selection-placeholder {
+            color: var(--color-black);
+        }
+
+        .ant-select-selector,
+        .ant-select-focused .ant-select-selection-search {
+            border: none !important;
+            box-shadow: none !important;
+
+            &:focus,
+            &:hover {
+                border: none !important;
+                box-shadow: none !important;
+            }
+        }
+
+        .ant-pagination {
+            max-width: calc(100% - 200px);
+            margin-left: auto !important;
+        }
+
+        button[type="button"].ant-pagination-item-link {
+            margin-top: 0 !important;
+        }
+    }
+
+    button[type="button"] {
+        margin-top: -50px;
+    }
+}

package/src/components/Tag/Tag.stories.tsx

@@ -1,22 +1,22 @@
-import { Meta, Story } from "@storybook/react";
-import { TagField } from '.';
-import { TagProps } from 'antd';
-import { useState } from "react";
-
-export default {
-    title: 'TagField',
-    component: TagField,
-} as Meta;
-
-const Template: Story<TagProps> = (args) => {
-    const [tagsInfo, setTagsInfo] = useState<any>({});
-    const [advancedTagsInfo, setAdvancedTagsInfo] = useState<any>({});
-
-    console.log('page: basic', tagsInfo,'advanced', advancedTagsInfo);
-    
-    return <TagField {...args} tagsInfo={setTagsInfo} advancedTagsInfo={setAdvancedTagsInfo}></TagField>;
-}
-
-export const Primary = Template.bind({});
-Primary.args = {
-};
+import { Meta, Story } from "@storybook/react";
+import { TagField } from '.';
+import { TagProps } from 'antd';
+import { useState } from "react";
+
+export default {
+    title: 'TagField',
+    component: TagField,
+} as Meta;
+
+const Template: Story<TagProps> = (args) => {
+    const [tagsInfo, setTagsInfo] = useState<any>({});
+    const [advancedTagsInfo, setAdvancedTagsInfo] = useState<any>({});
+
+    console.log('page: basic', tagsInfo,'advanced', advancedTagsInfo);
+    
+    return <TagField {...args} tagsInfo={setTagsInfo} advancedTagsInfo={setAdvancedTagsInfo}></TagField>;
+}
+
+export const Primary = Template.bind({});
+Primary.args = {
+};

package/src/components/Tag/index.tsx

@@ -1,189 +1,189 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { SearchOutlined } from '@ant-design/icons';
-import type { InputRef } from 'antd';
-import { Input, Tag, TagProps } from 'antd';
-import { TweenOneGroup } from 'rc-tween-one';
-import styles from './styles.module.scss';
-import classNames from 'classnames';
-import { t } from 'i18next';
-
-export interface customTagProps extends TagProps {
-    customTags?: string[],
-    tagsInfo?: (tags: string[]) => void,
-    advancedTagsInfo?: (tags: string[]) => void,
-    advancedTags?: string[],
-}
-
-export const TagField = (props: customTagProps) => {
-    const { customTags = [], advancedTags } = props;
-
-    const [tags, setTags] = useState<string[]>(customTags.filter(tag => !tag.includes('=')));
-    const [inputVisible, setInputVisible] = useState<boolean>(false);
-    const [inputValue, setInputValue] = useState('');
-    const inputRef = useRef<InputRef>(null);
-    const [advancedTagList, setAdvancedTagList] = useState<string[]>([]);
-    const [allTags, setAllTags] = useState<string[]>([]);
-
-    useEffect(() => {
-        if (inputVisible) {
-            inputRef.current?.focus();
-        }
-    }, [inputVisible]);
-
-    const handleClose = (removedTag: string) => {
-        const newAllTags = allTags.filter((tag) => tag !== removedTag);
-        setAllTags(newAllTags);
-
-        const newTags = tags.filter((tag) => tag !== removedTag);
-        setTags(newTags);
-
-        if (advancedTags && advancedTagList.includes(removedTag)) {
-            const newAdvancedTags = advancedTagList.filter((tag) => tag !== removedTag);
-            setAdvancedTagList(newAdvancedTags);
-        }
-    };
-
-    const showInput = () => {
-        setInputVisible(true);
-    };
-
-    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setInputValue(e.target.value);
-    };
-
-    const handleInputConfirm = () => {
-        let isAdvancedTag = false;
-        if (inputValue && allTags.indexOf(inputValue) === -1) {
-            setAllTags([...allTags, inputValue]); // Add to allTags
-            if (advancedTags && advancedTags.includes(inputValue.split('=')[0]) && !advancedTags.includes(inputValue)) {
-                setAdvancedTagList([...advancedTagList, inputValue]);
-                isAdvancedTag = true;
-            }
-
-            // Only add the inputValue to the tags array if it's not an advanced tag
-            if (!isAdvancedTag) {
-                setTags([...tags, inputValue]);
-            }
-        }
-
-        setInputVisible(false);
-        setInputValue('');
-
-        const basicTags = tags.filter((tag) => !advancedTagList.includes(tag));
-        props.tagsInfo?.(basicTags);
-        props.advancedTagsInfo?.(advancedTagList);
-    };
-
-    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-        const cursorPosition: any = e.currentTarget.selectionStart;
-        const advancedFilterMatch = advancedTags && advancedTags.find((filter: any) => inputValue.startsWith(`${filter}=`));
-        if (advancedFilterMatch) {
-            const filterLength = advancedFilterMatch.length;
-            if (cursorPosition <= filterLength && ![8, 46].includes(e.keyCode)) {
-                e.preventDefault();
-            }
-        }
-
-        // Prevent the input of '=' manually
-        if (e.key === "=") {
-            e.preventDefault();
-        }
-    };
-
-    const doSomething = (e: any) => {
-        const tag = e.target.innerText;
-        if (!advancedTagList.map(tag => tag.split('=')[0]).includes(tag)) {
-            setInputValue(`${tag}=`);
-            setInputVisible(true);
-        }
-    };
-
-
-    useEffect(() => {
-        props.tagsInfo?.(tags);
-        props.advancedTagsInfo?.(advancedTagList);
-    }, [tags, advancedTagList]);
-
-    const forMap = (tag: string) => {
-        const tagElem = (
-            <Tag
-                closable
-                onClose={(e) => {
-                    e.preventDefault();
-                    handleClose(tag);
-                }}
-            >
-                {tag}
-            </Tag>
-        );
-        return (
-            <span key={tag} className={styles['tagfield__new']} style={{ display: 'inline-block' }}>
-                {tagElem}
-            </span>
-        );
-    };
-
-    const advancedTagsMap = (tag: string) => {
-        const disabled = advancedTagList.map(tag => tag.split('=')[0]).includes(tag);
-        return (
-            <div onClick={!disabled ? doSomething : undefined} key={tag} style={{ color: disabled ? 'gray' : undefined }}>
-                {tag}
-            </div>
-        )
-    }
-
-    const tagChild = allTags.map(forMap);
-    const advancedTagsChild = advancedTags && advancedTags.map(advancedTagsMap);
-
-    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']}
-                />
-            )}
-            {!inputVisible && (
-                <Tag onClick={showInput} className={classNames(styles['tagfield__creator'], 'site-tag-plus')}>
-                    <SearchOutlined /> {t('components.tag.search')}
-                </Tag>
-            )}
-            {
-                advancedTags &&
-                <div style={{ marginTop: 16, marginBottom: 16 }} className={styles.advancedTagsWrapper}>
-                    <div className={styles.label}>
-                    {t('components.tag.advancedFields')}:
-                    </div>
-                    <div className={styles.advancedTags}>
-                        {advancedTagsChild}
-                    </div>
-                </div>
-            }
-            <div style={{ marginTop: 16 }}>
-                <TweenOneGroup
-                    enter={{
-                        scale: 0.8,
-                        opacity: 0,
-                        type: 'from',
-                        duration: 100,
-                    }}
-                    onEnd={(e: any) => {
-                        if (e.type === 'appear' || e.type === 'enter') {
-                            (e.target as any).style = 'display: inline-block';
-                        }
-                    }}
-                    leave={{ opacity: 0, width: 0, scale: 0, duration: 200 }}
-                    appear={false}
-                >
-                    {tagChild}
-                </TweenOneGroup>
-            </div>
-        </div>
-    );
-}
+import React, { useEffect, useRef, useState } from 'react';
+import { SearchOutlined } from '@ant-design/icons';
+import type { InputRef } from 'antd';
+import { Input, Tag, TagProps } from 'antd';
+import { TweenOneGroup } from 'rc-tween-one';
+import styles from './styles.module.scss';
+import classNames from 'classnames';
+import { t } from 'i18next';
+
+export interface customTagProps extends TagProps {
+    customTags?: string[],
+    tagsInfo?: (tags: string[]) => void,
+    advancedTagsInfo?: (tags: string[]) => void,
+    advancedTags?: string[],
+}
+
+export const TagField = (props: customTagProps) => {
+    const { customTags = [], advancedTags } = props;
+
+    const [tags, setTags] = useState<string[]>(customTags.filter(tag => !tag.includes('=')));
+    const [inputVisible, setInputVisible] = useState<boolean>(false);
+    const [inputValue, setInputValue] = useState('');
+    const inputRef = useRef<InputRef>(null);
+    const [advancedTagList, setAdvancedTagList] = useState<string[]>([]);
+    const [allTags, setAllTags] = useState<string[]>([]);
+
+    useEffect(() => {
+        if (inputVisible) {
+            inputRef.current?.focus();
+        }
+    }, [inputVisible]);
+
+    const handleClose = (removedTag: string) => {
+        const newAllTags = allTags.filter((tag) => tag !== removedTag);
+        setAllTags(newAllTags);
+
+        const newTags = tags.filter((tag) => tag !== removedTag);
+        setTags(newTags);
+
+        if (advancedTags && advancedTagList.includes(removedTag)) {
+            const newAdvancedTags = advancedTagList.filter((tag) => tag !== removedTag);
+            setAdvancedTagList(newAdvancedTags);
+        }
+    };
+
+    const showInput = () => {
+        setInputVisible(true);
+    };
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setInputValue(e.target.value);
+    };
+
+    const handleInputConfirm = () => {
+        let isAdvancedTag = false;
+        if (inputValue && allTags.indexOf(inputValue) === -1) {
+            setAllTags([...allTags, inputValue]); // Add to allTags
+            if (advancedTags && advancedTags.includes(inputValue.split('=')[0]) && !advancedTags.includes(inputValue)) {
+                setAdvancedTagList([...advancedTagList, inputValue]);
+                isAdvancedTag = true;
+            }
+
+            // Only add the inputValue to the tags array if it's not an advanced tag
+            if (!isAdvancedTag) {
+                setTags([...tags, inputValue]);
+            }
+        }
+
+        setInputVisible(false);
+        setInputValue('');
+
+        const basicTags = tags.filter((tag) => !advancedTagList.includes(tag));
+        props.tagsInfo?.(basicTags);
+        props.advancedTagsInfo?.(advancedTagList);
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        const cursorPosition: any = e.currentTarget.selectionStart;
+        const advancedFilterMatch = advancedTags && advancedTags.find((filter: any) => inputValue.startsWith(`${filter}=`));
+        if (advancedFilterMatch) {
+            const filterLength = advancedFilterMatch.length;
+            if (cursorPosition <= filterLength && ![8, 46].includes(e.keyCode)) {
+                e.preventDefault();
+            }
+        }
+
+        // Prevent the input of '=' manually
+        if (e.key === "=") {
+            e.preventDefault();
+        }
+    };
+
+    const doSomething = (e: any) => {
+        const tag = e.target.innerText;
+        if (!advancedTagList.map(tag => tag.split('=')[0]).includes(tag)) {
+            setInputValue(`${tag}=`);
+            setInputVisible(true);
+        }
+    };
+
+
+    useEffect(() => {
+        props.tagsInfo?.(tags);
+        props.advancedTagsInfo?.(advancedTagList);
+    }, [tags, advancedTagList]);
+
+    const forMap = (tag: string) => {
+        const tagElem = (
+            <Tag
+                closable
+                onClose={(e) => {
+                    e.preventDefault();
+                    handleClose(tag);
+                }}
+            >
+                {tag}
+            </Tag>
+        );
+        return (
+            <span key={tag} className={styles['tagfield__new']} style={{ display: 'inline-block' }}>
+                {tagElem}
+            </span>
+        );
+    };
+
+    const advancedTagsMap = (tag: string) => {
+        const disabled = advancedTagList.map(tag => tag.split('=')[0]).includes(tag);
+        return (
+            <div onClick={!disabled ? doSomething : undefined} key={tag} style={{ color: disabled ? 'gray' : undefined }}>
+                {tag}
+            </div>
+        )
+    }
+
+    const tagChild = allTags.map(forMap);
+    const advancedTagsChild = advancedTags && advancedTags.map(advancedTagsMap);
+
+    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']}
+                />
+            )}
+            {!inputVisible && (
+                <Tag onClick={showInput} className={classNames(styles['tagfield__creator'], 'site-tag-plus')}>
+                    <SearchOutlined /> {t('components.tag.search')}
+                </Tag>
+            )}
+            {
+                advancedTags &&
+                <div style={{ marginTop: 16, marginBottom: 16 }} className={styles.advancedTagsWrapper}>
+                    <div className={styles.label}>
+                    {t('components.tag.advancedFields')}:
+                    </div>
+                    <div className={styles.advancedTags}>
+                        {advancedTagsChild}
+                    </div>
+                </div>
+            }
+            <div style={{ marginTop: 16 }}>
+                <TweenOneGroup
+                    enter={{
+                        scale: 0.8,
+                        opacity: 0,
+                        type: 'from',
+                        duration: 100,
+                    }}
+                    onEnd={(e: any) => {
+                        if (e.type === 'appear' || e.type === 'enter') {
+                            (e.target as any).style = 'display: inline-block';
+                        }
+                    }}
+                    leave={{ opacity: 0, width: 0, scale: 0, duration: 200 }}
+                    appear={false}
+                >
+                    {tagChild}
+                </TweenOneGroup>
+            </div>
+        </div>
+    );
+}