Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 0 additions & 11 deletions .eslintrc.js

This file was deleted.

2 changes: 2 additions & 0 deletions .github/FUNDING.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
github: ant-design
open_collective: ant-design
32 changes: 24 additions & 8 deletions .github/dependabot.yml
Original file line number Diff line number Diff line change
@@ -1,11 +1,27 @@
# To get started with Dependabot version updates, you'll need to specify which
# package ecosystems to update and where the package manifests are located.
# Please see the documentation for all configuration options:
# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates

version: 2
updates:
- package-ecosystem: "npm" # See documentation for possible values
directory: "/" # Location of package manifests
- package-ecosystem: npm
directory: '/'
schedule:
interval: weekly
day: monday
time: '21:00'
timezone: Asia/Shanghai
open-pull-requests-limit: 10
groups:
npm-dependencies:
patterns:
- '*'

- package-ecosystem: github-actions
directory: '/'
schedule:
interval: "weekly"
interval: weekly
day: monday
time: '21:00'
timezone: Asia/Shanghai
open-pull-requests-limit: 10
groups:
github-actions:
patterns:
- '*'
6 changes: 0 additions & 6 deletions .github/workflows/ci.yml

This file was deleted.

43 changes: 43 additions & 0 deletions .github/workflows/codeql.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
name: 'CodeQL'

on:
push:
branches: ['main']
pull_request:
branches: ['main']
schedule:
- cron: '36 13 * * 3'

jobs:
analyze:
name: Analyze
runs-on: ubuntu-latest
permissions:
actions: read
contents: read
security-events: write

strategy:
fail-fast: false
matrix:
language: [javascript-typescript]

steps:
- name: Checkout
uses: actions/checkout@v7
with:
persist-credentials: false

- name: Initialize CodeQL
uses: github/codeql-action/init@8aad20d150bbac5944a9f9d289da16a4b0d87c1e
with:
languages: ${{ matrix.language }}
queries: +security-and-quality

- name: Autobuild
uses: github/codeql-action/autobuild@8aad20d150bbac5944a9f9d289da16a4b0d87c1e

- name: Perform CodeQL Analysis
uses: github/codeql-action/analyze@8aad20d150bbac5944a9f9d289da16a4b0d87c1e
with:
category: '/language:${{ matrix.language }}'
22 changes: 22 additions & 0 deletions .github/workflows/react-doctor.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
name: React Doctor

on:
pull_request:
push:
branches: [main]

permissions:
contents: read
pull-requests: write
issues: write
statuses: write

jobs:
react-doctor:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v7
with:
fetch-depth: 0
persist-credentials: false
- uses: millionco/react-doctor@0b4f4f4bd248a154e64eb508a48347f71154b3f3
52 changes: 52 additions & 0 deletions .github/workflows/surge-preview.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
name: Surge Preview

on:
pull_request:

permissions:
contents: read
pull-requests: write
checks: write

jobs:
preview:
runs-on: ubuntu-latest
concurrency:
group: surge-preview-${{ github.event.pull_request.number }}
cancel-in-progress: true
steps:
- uses: actions/checkout@v7
with:
persist-credentials: false
- name: Check Surge token
id: surge-token
env:
SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }}
run: |
if [ -n "$SURGE_TOKEN" ]; then
echo "enabled=true" >> "$GITHUB_OUTPUT"
else
echo "enabled=false" >> "$GITHUB_OUTPUT"
fi
- name: Setup utoo
if: ${{ steps.surge-token.outputs.enabled == 'true' }}
uses: utooland/setup-utoo@v1

- name: Build preview
if: ${{ steps.surge-token.outputs.enabled == 'true' }}
run: |
ut install
npm run build
- uses: afc163/surge-preview@bf90a5a86111f6311ca42f0a5a0f80fb0fb03cec
if: ${{ steps.surge-token.outputs.enabled == 'true' }}
env:
SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }}
with:
surge_token: ${{ env.SURGE_TOKEN }}
github_token: ${{ secrets.GITHUB_TOKEN }}
dist: .doc
failOnError: false
setCommitStatus: false
- name: Skip Surge preview
if: ${{ steps.surge-token.outputs.enabled != 'true' }}
run: echo "SURGE_TOKEN is not configured; skip Surge preview."
16 changes: 16 additions & 0 deletions .github/workflows/test.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
name: ✅ test

on:
push:
branches: [main]
pull_request:
branches: [main]

permissions:
contents: read

jobs:
test:
uses: react-component/rc-test/.github/workflows/test-utoo.yml@main
secrets:
CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
125 changes: 64 additions & 61 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,68 +1,78 @@
# @rc-component/dom-align

---

Align source html element with target html element flexibly.

[![NPM version][npm-image]][npm-url]
[![npm download][download-image]][download-url]
[![build status][github-actions-image]][github-actions-url]
[![Codecov][codecov-image]][codecov-url]
[![bundle size][bundlephobia-image]][bundlephobia-url]
[![dumi][dumi-image]][dumi-url]

[npm-image]: http://img.shields.io/npm/v/@rc-component/dom-align.svg?style=flat-square
[npm-url]: http://npmjs.org/package/@rc-component/dom-align
[travis-image]: https://img.shields.io/travis/react-component/dom-align/main?style=flat-square
[travis-url]: https://travis-ci.com/react-component/dom-align
[github-actions-image]: https://github.com/react-component/dom-align/actions/workflows/ci.yml/badge.svg
[github-actions-url]: https://github.com/react-component/dom-align/actions/workflows/ci.yml
[codecov-image]: https://img.shields.io/codecov/c/github/react-component/dom-align/main.svg?style=flat-square
[codecov-url]: https://app.codecov.io/gh/react-component/dom-align
[david-url]: https://david-dm.org/react-component/dom-align
[david-image]: https://david-dm.org/react-component/dom-align/status.svg?style=flat-square
[david-dev-url]: https://david-dm.org/react-component/dom-align?type=dev
[david-dev-image]: https://david-dm.org/react-component/dom-align/dev-status.svg?style=flat-square
[download-image]: https://img.shields.io/npm/dm/@rc-component/dom-align.svg?style=flat-square
[download-url]: https://npmjs.org/package/@rc-component/dom-align
[bundlephobia-url]: https://bundlephobia.com/package/@rc-component/dom-align
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@rc-component/dom-align
[dumi-url]: https://github.com/umijs/dumi
[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square

## Screenshot

<img height=444 src="http://gtms02.alicdn.com/tps/i2/TB1XIp2HXXXXXajaXXXgJfr8XXX-548-888.png">
<div align="center">
<h1>@rc-component/dom-align</h1>
<p><sub><a href="https://ant.design"><img alt="Ant Design" height="14" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" style="vertical-align: -0.125em;" /></a> Part of the Ant Design ecosystem.</sub></p>
<p>📐 DOM alignment utility for positioning one element against another.</p>

<p>
<a href="https://npmjs.org/package/@rc-component/dom-align"><img alt="NPM version" src="https://img.shields.io/npm/v/@rc-component/dom-align.svg?style=flat-square"></a>
<a href="https://npmjs.org/package/@rc-component/dom-align"><img alt="npm downloads" src="https://img.shields.io/npm/dm/@rc-component/dom-align.svg?style=flat-square"></a>
<a href="https://github.com/react-component/dom-align/actions/workflows/test.yml"><img alt="build status" src="https://github.com/react-component/dom-align/actions/workflows/test.yml/badge.svg"></a>
<a href="https://app.codecov.io/gh/react-component/dom-align"><img alt="Codecov" src="https://img.shields.io/codecov/c/github/react-component/dom-align/main.svg?style=flat-square"></a>
<a href="https://bundlephobia.com/package/@rc-component/dom-align"><img alt="bundle size" src="https://img.shields.io/bundlephobia/minzip/@rc-component/dom-align?style=flat-square"></a>
<a href="https://github.com/umijs/dumi"><img alt="dumi" src="https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square"></a>
</p>
</div>

<p align="center">English | <a href="./README.zh-CN.md">简体中文</a></p>

## Highlights

| Area | Support |
| ------- | ------------------------------------------------------------------ |
| Purpose | DOM alignment utility for positioning one element against another. |
| Package | `@rc-component/dom-align` |
| Release | `@rc-component/np` / `rc-np` |

## Install

[![@rc-component/dom-align](https://nodei.co/npm/@rc-component/dom-align.png)](https://npmjs.org/package/@rc-component/dom-align)

## Feature

- support Edge Chrome Firefox
- support align points and offset
- support auto adjust according to visible area
```bash
npm install @rc-component/dom-align
```

## Usage

```js
```tsx | pure
import domAlign from '@rc-component/dom-align';

// use domAlign
// sourceNode's initial style should be position:absolute;left:-9999px;top:-9999px;
domAlign(sourceNode, targetNode, {
points: ['tl', 'tr'],
offset: [10, 20],
overflow: { adjustX: true, adjustY: true },
});
```

## API

| Option | Description |
| --- | --- |
| `points` | Source and target alignment points. |
| `offset` | Source node offset. |
| `targetOffset` | Target node offset. |
| `overflow` | Auto-adjust behavior when the source overflows viewport. |
| `useCssRight` / `useCssBottom` / `useCssTransform` | Choose CSS positioning strategy. |

const alignConfig = {
points: ['tl', 'tr'], // align top left point of sourceNode with top right point of targetNode
offset: [10, 20], // the offset sourceNode by 10px in x and 20px in y,
targetOffset: ['30%', '40%'], // the offset targetNode by 30% of targetNode width in x and 40% of targetNode height in y,
overflow: { adjustX: true, adjustY: true }, // auto adjust position when sourceNode is overflowed
};
## Development

domAlign(sourceNode, targetNode, alignConfig);
```bash
npm install
npm start
npm test
npm run lint
npm run tsc
npm run compile
```

## API
The dumi site runs at `http://localhost:8000`.

## Release

```bash
npm run prepublishOnly
```

The release flow is handled by `@rc-component/np` through the `rc-np` command when the package uses the shared release flow.

## Detailed API

### void domAlign(source: HTMLElement, target: HTMLElement, alignConfig: Object):Function

Expand Down Expand Up @@ -125,17 +135,10 @@ domAlign(sourceNode, targetNode, alignConfig);
</tbody>
</table>

## Development

```
pnpm install
pnpm start
```

## Example

http://localhost:8000/

## License

@rc-component/dom-align is released under the MIT license.
@rc-component/dom-align is released under the [MIT](./LICENSE.md) license.
Loading
Loading