@thanhdungttrd172/eshop-theme

- Tác dụng:
Tạo sự phụ thuộc để liên kết: Tạo ra 1 liên kết tượng trưng trong node_modules, thư mục để bất kỳ sửa đổi bạn thực hiện trong một mô-đun sẽ ngay lập tức được phản ánh trong bất kỳ dự án đã được thành lập để phụ thuộc vào đó (địa phương) phiên bản của mô-đun.

2.Sử dụng NPM Link

- Cách sử dụng: Tạo một shortcut trên dependency với npm link. Shortcut này trỏ tới vị trí thư mục khác trên local.
npm link ( trong node_mudules cần tạo liên kết) => tạo một liên kết tượng trưng trong thư mục chung
npm link name (name: tên tương ứng trong node-modules)
//lưu ý: nên sửa tên node_modules khác với tên thư viện đã import từ github

VÍ DỤ

Import thư viện: import { ... } from "name"

III. Cách sử dụng thư viện "findxdn/erp/theme"

1.Cách sử dụng

Tạo file .npmrc trong project với data registry=https://registry.npmjs.org/ @findxdn:registry=https://npm.pkg.github.com/ //npm.pkg.github.com/:_authToken=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
npm i @findxdmn/erp-theme
Sử dụng: import { nameComponent } from “findxdn@erp-theme” *- Update phiên bản:
Thay đổi tên phiên bản tương ứng trong file pakage.json
o npm i

2.Fix lỗi thường gặp

Nếu có lỗi như hình, thêm --legacy-peer-deps vào sau mỗi lệnh
Ex: npm i --legacy-peer-deps

IV. Component và cách sử dụng"

1.Button

2.InputSearch

3.CustomDatePicker

4.CustomDateTimePicker

5.CustomSelect

| Name | Type | Default | Description | | :---------------------:|:------------------------:|:-----------:|:-----------:|
| isMulti | bool | false | Multi select options | | group | bool | false | Group options | | onChange | func | ()=> {} | Change data select | | value | list,int,string | null | Data select | | maxToShowProps | number | 1 | Show data select (isMulti) | | menuPlacement | top, bottom, auto | auto | Position menu options (config _props) | | menuPortal | null | | Config styles menu |

5.1.Example Group:

1.options = [
    {
        label: 'label1',
        key:'key1',
        options: [
            {
                label: 'label1.1',
                key:'key1.1',
                value: 'value1.1'
            },
            {
                label: 'label1.2',
                key:'key1.2',
                value: 'value1.2'
            }
        ]
    },
    {
        label: 'label2',
        key:'key2',
        options: [
            {
                label: 'label2.1',
                key:'key1',
                value: 'value2.1'
            },
            {
                label: 'label2.2',
                key:'key2.2',
                value: 'value2.2'
            }
        ]
    }
]

2.onChange : (inputValue, actions) => { 
    <!-- inputValue : value options-->
    <!-- actions : Action Meta onchange-->
}

3.value: value2.1

5.2.Example IsMulti:

1.options = [
    {
        label: 'label1.1',
        key:'key1.1',
        value: 'value1.1'
    },
    {
        label: 'label1.2',
        key:'key1.2',
        value: 'value1.2'
    }
]

2.onChange : (inputValue, actions) => { 
    <!-- inputValue : list value [value1.1, value1.2]-->
    <!-- actions : Action Meta onchange-->
}

3.value: list value [value1.1, value1.2]

5.3.Example Group and IsMulti:

1.options = [
    {
        label: 'label1',
        key:'key1',
        options: [
            {
                label: 'label1.1',
                key:'key1.1',
                value: 'value1.1'
            },
            {
                label: 'label1.2',
                key:'key1.2',
                value: 'value1.2'
            }
        ]
    },
    {
        label: 'label2',
        key:'key2',
        options: [
            {
                label: 'label2.1',
                key:'key2.1',
                value: 'value2.1'
            },
            {
                label: 'label2.2',
                key:'key2.2',
                value: 'value2.2'
            }
        ]
    }
]

2.onChange : (inputValue, actions) => { 
    <!-- inputValue :list value options [value1.1, value2.1]-->
    <!-- actions : Action Meta onchange-->
}

3.value: list value [value1.1, value2.1]

5.4.Example menuPortal:

const objectPortal = {
    zIndex: 9999
}
<CustomSelect 
    {...props}
    menuPortalTarget={document.body}
    styles={{
        menuPortal: (base) => ({ ...base, ...objectPortal }),
    }} 
/>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

React Component Library Template

Mục lục

I. Các bước tạo mới component ( Dự án Eshop)

1.Tạo componnet

2.Import component

3.Update version component :

II. NPM Link

1.Tìm Hiểu NPM Link