diff --git a/.github/workflows/biome.yml b/.github/workflows/biome.yml new file mode 100644 index 0000000..9c0cae1 --- /dev/null +++ b/.github/workflows/biome.yml @@ -0,0 +1,32 @@ +name: Biome Lint + +on: + push: + branches: + - main + pull_request: + branches: + - main + +jobs: + biome-lint: + runs-on: ubuntu-latest + + steps: + # Checkout the repository + - name: Checkout code + uses: actions/checkout@v3 + + # Set up Node.js + - name: Set up Node.js + uses: actions/setup-node@v3 + with: + node-version: '20' + + # Install dependencies + - name: Install dependencies + run: npm install + + # Run lint + - name: Run lint + run: npm run lint diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml new file mode 100644 index 0000000..30a61e1 --- /dev/null +++ b/.github/workflows/build.yml @@ -0,0 +1,32 @@ +name: Build + +on: + push: + branches: + - main + pull_request: + branches: + - main + +jobs: + build-test: + runs-on: ubuntu-latest + + steps: + # Checkout the repository + - name: Checkout code + uses: actions/checkout@v3 + + # Set up Node.js + - name: Set up Node.js + uses: actions/setup-node@v3 + with: + node-version: '20' + + # Install dependencies + - name: Install dependencies + run: npm install + + # Run build + - name: Run build + run: npm run build diff --git a/README.md b/README.md index db13350..3d90c22 100644 --- a/README.md +++ b/README.md @@ -9,9 +9,9 @@ A multi-select js component with nested options. - Typescript support Build data: -- react-treeselectjs.mjs 2.14 kB │ gzip: 0.83 kB -- react-treeselectjs.umd.js 1.91 kB │ gzip: 0.80 kB -- react-treeselectjs.css 7.08 kB │ gzip: 1.41 kB +- react-treeselectjs.mjs 2.04 kB │ gzip: 0.79 kB +- react-treeselectjs.umd.js 1.86 kB │ gzip: 0.77 kB +- react-treeselectjs.css 8.48 kB │ gzip: 1.58 kB **Live Demo:** https://dipson88.github.io/treeselectjs/ @@ -27,13 +27,13 @@ You can buy me a coffee if you want to support my work. Thank you! npm install --save react-treeselectjs ``` Import react-treeselectjs (ES) -``` +```ts import Treeselect from 'react-treeselectjs' import 'react-treeselectjs/dist/react-treeselectjs.css' ``` Import treeselectjs (UMD) -``` +```html
@@ -41,9 +41,9 @@ Import treeselectjs (UMD) - - - + + + @@ -58,12 +58,12 @@ Import treeselectjs (UMD) ``` All Available Imports -``` +```ts import Treeselect, { DirectionType, IconsType, OptionType, TreeselectProps, TreeselectValue } from 'react-treeselectjs' ``` Example -``` +```tsx import React, { useCallback } from 'react' import Treeselect, { TreeselectValue } from 'react-treeselectjs' import 'react-treeselectjs/dist/react-treeselectjs.css' @@ -128,7 +128,7 @@ function App() { onInput={onInput} > {/* Use slot if you need */} - Click!' + Click! ) @@ -160,9 +160,9 @@ Name | Type (default) | Description **disabledBranchNode** | Boolean (false) | It is impossible to select groups. You can select only leaves. **openLevel** | Number (0) | All groups will be opened to this level. **appendToBody** | Boolean (false) | List will be appended to the body instead of the input container. -**alwaysOpen** | Boolean (false) | List will be always opened. You can use it for comfortable style changing. If you what to use it as an opened list, turn `staticList` to `true`. +**alwaysOpen** | Boolean (false) | List will be always opened. You can use it for comfortable style changing. If you want to use it as an opened list, turn `staticList` to `true`. **staticList** | Boolean (false) | Add the list as a static DOM element. List doesn't overlap content. This prop will be ignored if you use `appendToBody`. -**emptyText** | String ('No results found...') | A empty list text. +**emptyText** | String ('No results found...') | Text shown when the list is empty. **direction** | String (auto) | A force direction for the list. Supported values: `auto`, `top`, `bottom`. **expandSelected** | Boolean (false) | All groups which have checked values will be expanded on the init. **saveScrollPosition** | Boolean (true) | The list saves the last scroll position before close. If you open the list your scroll will be on the previous position. If you set the value to `false` - the scroll will have position 0 and the first item will be focused every time. @@ -172,7 +172,7 @@ Name | Type (default) | Description Name | Type (default) | Description ------------- | ------------- | ------------- **showTags** | Boolean (true) | Selected values look like tags. The false value shows results as '{count} elements selected'. You can change text if you use `tagsCountText` prop. For one selected element, you will see a name of this element. -**tagsCountText** | String ('elements selected') | This text will be shown if you use 'showTags'. This text will be inserted after the count of the selected elements - ```'{count} {tagsCountText}'```. +**tagsCountText** | String ('elements selected') | This text is shown when `showTags` is false. It is inserted after the count of the selected elements - ```'{count} {tagsCountText}'```. **showCount** | Boolean (false) | Shows count of children near the group's name. **tagsSortFn** | `(a: TagsSortItem, b: TagsSortItem) => number` \| `null` (null) | Defines the sorting order for tags in the input field.