Latest updates from IceHrmPro
This commit is contained in:
+14
@@ -0,0 +1,14 @@
|
||||
# History
|
||||
----
|
||||
|
||||
## 2.4.0 / 2018-06-04
|
||||
|
||||
- support point align
|
||||
|
||||
## 2.3.4 / 2017-04-17
|
||||
|
||||
- fix `createClass` and `PropTypes` warning.
|
||||
|
||||
## 2.3.0 / 2016-05-26
|
||||
|
||||
- add forceAlign method
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2014-present yiminghe
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
+113
@@ -0,0 +1,113 @@
|
||||
# rc-align
|
||||
---
|
||||
|
||||
React Align Component. Wrapper around https://github.com/yiminghe/dom-align.
|
||||
|
||||
[![NPM version][npm-image]][npm-url]
|
||||
[![build status][travis-image]][travis-url]
|
||||
[![Codecov][codecov-image]][codecov-url]
|
||||
[![gemnasium deps][gemnasium-image]][gemnasium-url]
|
||||
[![node version][node-image]][node-url]
|
||||
[![npm download][download-image]][download-url]
|
||||
|
||||
[npm-image]: http://img.shields.io/npm/v/rc-align.svg?style=flat-square
|
||||
[npm-url]: http://npmjs.org/package/rc-align
|
||||
[travis-image]: https://img.shields.io/travis/react-component/align.svg?style=flat-square
|
||||
[travis-url]: https://travis-ci.org/react-component/align
|
||||
[codecov-image]: https://img.shields.io/codecov/c/github/react-component/align/master.svg?style=flat-square
|
||||
[codecov-url]: https://codecov.io/gh/react-component/align/branch/master
|
||||
[gemnasium-image]: http://img.shields.io/gemnasium/react-component/align.svg?style=flat-square
|
||||
[gemnasium-url]: https://gemnasium.com/react-component/align
|
||||
[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
|
||||
[node-url]: http://nodejs.org/download/
|
||||
[download-image]: https://img.shields.io/npm/dm/rc-align.svg?style=flat-square
|
||||
[download-url]: https://npmjs.org/package/rc-align
|
||||
|
||||
|
||||
## Development
|
||||
|
||||
```
|
||||
npm install
|
||||
npm start
|
||||
```
|
||||
|
||||
## Example
|
||||
|
||||
http://localhost:8100/examples/
|
||||
|
||||
online example: http://react-component.github.io/align/examples/
|
||||
|
||||
|
||||
## Feature
|
||||
|
||||
* support ie8,ie8+,chrome,firefox,safari
|
||||
|
||||
### Keyboard
|
||||
|
||||
|
||||
|
||||
## install
|
||||
|
||||
[](https://npmjs.org/package/rc-align)
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
var Align = require('rc-align');
|
||||
var ReactDOM = require('react-dom');
|
||||
ReactDOM.render(<Align align={{}} target={function(){}}><div></div></Align>, container);
|
||||
```
|
||||
|
||||
will align child with target when mounted or align is changed
|
||||
|
||||
## API
|
||||
|
||||
### props
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">name</th>
|
||||
<th style="width: 50px;">type</th>
|
||||
<th style="width: 50px;">default</th>
|
||||
<th>description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>align</td>
|
||||
<td>Object</td>
|
||||
<td></td>
|
||||
<td>same with alignConfig from https://github.com/yiminghe/dom-align</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>onAlign</td>
|
||||
<td>function(source:HTMLElement, align:Object)</td>
|
||||
<td></td>
|
||||
<td>called when align</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>target</td>
|
||||
<td>
|
||||
function():HTMLElement ||
|
||||
{ pageX: number, pageY: number } ||
|
||||
{ clientX: number, clientY: number }
|
||||
</td>
|
||||
<td>function(){return window;}</td>
|
||||
<td>
|
||||
a function which returned value or point is used for target from https://github.com/yiminghe/dom-align
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>monitorWindowResize</td>
|
||||
<td>Boolean</td>
|
||||
<td>false</td>
|
||||
<td>whether realign when window is resized</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
## License
|
||||
|
||||
rc-align is released under the MIT license.
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
/**
|
||||
* Removed props:
|
||||
* - childrenProps
|
||||
*/
|
||||
import React from 'react';
|
||||
import { AlignType, AlignResult, TargetType } from './interface';
|
||||
declare type OnAlign = (source: HTMLElement, result: AlignResult) => void;
|
||||
export interface AlignProps {
|
||||
align: AlignType;
|
||||
target: TargetType;
|
||||
onAlign?: OnAlign;
|
||||
monitorBufferTime?: number;
|
||||
monitorWindowResize?: boolean;
|
||||
disabled?: boolean;
|
||||
children: React.ReactElement;
|
||||
}
|
||||
export interface RefAlign {
|
||||
forceAlign: () => void;
|
||||
}
|
||||
declare const RefAlign: React.ForwardRefExoticComponent<AlignProps & React.RefAttributes<RefAlign>>;
|
||||
export default RefAlign;
|
||||
+168
@@ -0,0 +1,168 @@
|
||||
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
|
||||
|
||||
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
|
||||
|
||||
function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
||||
|
||||
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
||||
|
||||
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
||||
|
||||
/**
|
||||
* Removed props:
|
||||
* - childrenProps
|
||||
*/
|
||||
import React from 'react';
|
||||
import { composeRef } from "rc-util/es/ref";
|
||||
import { alignElement, alignPoint } from 'dom-align';
|
||||
import addEventListener from "rc-util/es/Dom/addEventListener";
|
||||
import { isSamePoint, restoreFocus, monitorResize } from './util';
|
||||
import useBuffer from './hooks/useBuffer';
|
||||
|
||||
function getElement(func) {
|
||||
if (typeof func !== 'function') return null;
|
||||
return func();
|
||||
}
|
||||
|
||||
function getPoint(point) {
|
||||
if (_typeof(point) !== 'object' || !point) return null;
|
||||
return point;
|
||||
}
|
||||
|
||||
var Align = function Align(_ref, ref) {
|
||||
var children = _ref.children,
|
||||
disabled = _ref.disabled,
|
||||
target = _ref.target,
|
||||
align = _ref.align,
|
||||
onAlign = _ref.onAlign,
|
||||
monitorWindowResize = _ref.monitorWindowResize,
|
||||
_ref$monitorBufferTim = _ref.monitorBufferTime,
|
||||
monitorBufferTime = _ref$monitorBufferTim === void 0 ? 0 : _ref$monitorBufferTim;
|
||||
var cacheRef = React.useRef({});
|
||||
var nodeRef = React.useRef();
|
||||
var childNode = React.Children.only(children); // ===================== Align ======================
|
||||
// We save the props here to avoid closure makes props ood
|
||||
|
||||
var forceAlignPropsRef = React.useRef({});
|
||||
forceAlignPropsRef.current.disabled = disabled;
|
||||
forceAlignPropsRef.current.target = target;
|
||||
forceAlignPropsRef.current.onAlign = onAlign;
|
||||
|
||||
var _useBuffer = useBuffer(function () {
|
||||
var _forceAlignPropsRef$c = forceAlignPropsRef.current,
|
||||
latestDisabled = _forceAlignPropsRef$c.disabled,
|
||||
latestTarget = _forceAlignPropsRef$c.target;
|
||||
|
||||
if (!latestDisabled && latestTarget) {
|
||||
var source = nodeRef.current;
|
||||
var result;
|
||||
var element = getElement(latestTarget);
|
||||
var point = getPoint(latestTarget);
|
||||
cacheRef.current.element = element;
|
||||
cacheRef.current.point = point; // IE lose focus after element realign
|
||||
// We should record activeElement and restore later
|
||||
|
||||
var _document = document,
|
||||
activeElement = _document.activeElement;
|
||||
|
||||
if (element) {
|
||||
result = alignElement(source, element, align);
|
||||
} else if (point) {
|
||||
result = alignPoint(source, point, align);
|
||||
}
|
||||
|
||||
restoreFocus(activeElement, source);
|
||||
|
||||
if (onAlign) {
|
||||
onAlign(source, result);
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}, monitorBufferTime),
|
||||
_useBuffer2 = _slicedToArray(_useBuffer, 2),
|
||||
_forceAlign = _useBuffer2[0],
|
||||
cancelForceAlign = _useBuffer2[1]; // ===================== Effect =====================
|
||||
// Listen for target updated
|
||||
|
||||
|
||||
var resizeMonitor = React.useRef({
|
||||
cancel: function cancel() {}
|
||||
}); // Listen for source updated
|
||||
|
||||
var sourceResizeMonitor = React.useRef({
|
||||
cancel: function cancel() {}
|
||||
});
|
||||
React.useEffect(function () {
|
||||
var element = getElement(target);
|
||||
var point = getPoint(target);
|
||||
|
||||
if (nodeRef.current !== sourceResizeMonitor.current.element) {
|
||||
sourceResizeMonitor.current.cancel();
|
||||
sourceResizeMonitor.current.element = nodeRef.current;
|
||||
sourceResizeMonitor.current.cancel = monitorResize(nodeRef.current, _forceAlign);
|
||||
}
|
||||
|
||||
if (cacheRef.current.element !== element || !isSamePoint(cacheRef.current.point, point)) {
|
||||
_forceAlign(); // Add resize observer
|
||||
|
||||
|
||||
if (resizeMonitor.current.element !== element) {
|
||||
resizeMonitor.current.cancel();
|
||||
resizeMonitor.current.element = element;
|
||||
resizeMonitor.current.cancel = monitorResize(element, _forceAlign);
|
||||
}
|
||||
}
|
||||
}); // Listen for disabled change
|
||||
|
||||
React.useEffect(function () {
|
||||
if (!disabled) {
|
||||
_forceAlign();
|
||||
} else {
|
||||
cancelForceAlign();
|
||||
}
|
||||
}, [disabled]); // Listen for window resize
|
||||
|
||||
var winResizeRef = React.useRef(null);
|
||||
React.useEffect(function () {
|
||||
if (monitorWindowResize) {
|
||||
if (!winResizeRef.current) {
|
||||
winResizeRef.current = addEventListener(window, 'resize', _forceAlign);
|
||||
}
|
||||
} else if (winResizeRef.current) {
|
||||
winResizeRef.current.remove();
|
||||
winResizeRef.current = null;
|
||||
}
|
||||
}, [monitorWindowResize]); // Clear all if unmount
|
||||
|
||||
React.useEffect(function () {
|
||||
return function () {
|
||||
resizeMonitor.current.cancel();
|
||||
sourceResizeMonitor.current.cancel();
|
||||
if (winResizeRef.current) winResizeRef.current.remove();
|
||||
cancelForceAlign();
|
||||
};
|
||||
}, []); // ====================== Ref =======================
|
||||
|
||||
React.useImperativeHandle(ref, function () {
|
||||
return {
|
||||
forceAlign: function forceAlign() {
|
||||
return _forceAlign(true);
|
||||
}
|
||||
};
|
||||
}); // ===================== Render =====================
|
||||
|
||||
if (React.isValidElement(childNode)) {
|
||||
childNode = React.cloneElement(childNode, {
|
||||
ref: composeRef(childNode.ref, nodeRef)
|
||||
});
|
||||
}
|
||||
|
||||
return childNode;
|
||||
};
|
||||
|
||||
var RefAlign = React.forwardRef(Align);
|
||||
RefAlign.displayName = 'Align';
|
||||
export default RefAlign;
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
declare const _default: (callback: () => boolean, buffer: number) => ((force?: boolean) => void)[];
|
||||
export default _default;
|
||||
+35
@@ -0,0 +1,35 @@
|
||||
import React from 'react';
|
||||
export default (function (callback, buffer) {
|
||||
var calledRef = React.useRef(false);
|
||||
var timeoutRef = React.useRef(null);
|
||||
|
||||
function cancelTrigger() {
|
||||
window.clearTimeout(timeoutRef.current);
|
||||
}
|
||||
|
||||
function trigger(force) {
|
||||
if (!calledRef.current || force === true) {
|
||||
if (callback() === false) {
|
||||
// Not delay since callback cancelled self
|
||||
return;
|
||||
}
|
||||
|
||||
calledRef.current = true;
|
||||
cancelTrigger();
|
||||
timeoutRef.current = window.setTimeout(function () {
|
||||
calledRef.current = false;
|
||||
}, buffer);
|
||||
} else {
|
||||
cancelTrigger();
|
||||
timeoutRef.current = window.setTimeout(function () {
|
||||
calledRef.current = false;
|
||||
trigger();
|
||||
}, buffer);
|
||||
}
|
||||
}
|
||||
|
||||
return [trigger, function () {
|
||||
calledRef.current = false;
|
||||
cancelTrigger();
|
||||
}];
|
||||
});
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
import Align from './Align';
|
||||
export default Align;
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
// export this package's api
|
||||
import Align from './Align';
|
||||
export default Align;
|
||||
+56
@@ -0,0 +1,56 @@
|
||||
/** Two char of 't' 'b' 'c' 'l' 'r'. Example: 'lt' */
|
||||
export declare type AlignPoint = string;
|
||||
export interface AlignType {
|
||||
/**
|
||||
* move point of source node to align with point of target node.
|
||||
* Such as ['tr','cc'], align top right point of source node with center point of target node.
|
||||
* Point can be 't'(top), 'b'(bottom), 'c'(center), 'l'(left), 'r'(right) */
|
||||
points?: AlignPoint[];
|
||||
/**
|
||||
* offset source node by offset[0] in x and offset[1] in y.
|
||||
* If offset contains percentage string value, it is relative to sourceNode region.
|
||||
*/
|
||||
offset?: number[];
|
||||
/**
|
||||
* offset target node by offset[0] in x and offset[1] in y.
|
||||
* If targetOffset contains percentage string value, it is relative to targetNode region.
|
||||
*/
|
||||
targetOffset?: number[];
|
||||
/**
|
||||
* If adjustX field is true, will adjust source node in x direction if source node is invisible.
|
||||
* If adjustY field is true, will adjust source node in y direction if source node is invisible.
|
||||
*/
|
||||
overflow?: {
|
||||
adjustX?: boolean | number;
|
||||
adjustY?: boolean | number;
|
||||
};
|
||||
/**
|
||||
* Whether use css right instead of left to position
|
||||
*/
|
||||
useCssRight?: boolean;
|
||||
/**
|
||||
* Whether use css bottom instead of top to position
|
||||
*/
|
||||
useCssBottom?: boolean;
|
||||
/**
|
||||
* Whether use css transform instead of left/top/right/bottom to position if browser supports.
|
||||
* Defaults to false.
|
||||
*/
|
||||
useCssTransform?: boolean;
|
||||
}
|
||||
export interface AlignResult {
|
||||
points: AlignPoint[];
|
||||
offset: number[];
|
||||
targetOffset: number[];
|
||||
overflow: {
|
||||
adjustX: boolean | number;
|
||||
adjustY: boolean | number;
|
||||
};
|
||||
}
|
||||
export interface TargetPoint {
|
||||
clientX?: number;
|
||||
clientY?: number;
|
||||
pageX?: number;
|
||||
pageY?: number;
|
||||
}
|
||||
export declare type TargetType = (() => HTMLElement) | TargetPoint;
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import { TargetPoint } from './interface';
|
||||
export declare function isSamePoint(prev: TargetPoint, next: TargetPoint): boolean;
|
||||
export declare function restoreFocus(activeElement: any, container: any): void;
|
||||
export declare function monitorResize(element: HTMLElement, callback: Function): () => void;
|
||||
+66
@@ -0,0 +1,66 @@
|
||||
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
|
||||
|
||||
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
|
||||
|
||||
function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
||||
|
||||
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
||||
|
||||
import ResizeObserver from 'resize-observer-polyfill';
|
||||
import contains from "rc-util/es/Dom/contains";
|
||||
export function isSamePoint(prev, next) {
|
||||
if (prev === next) return true;
|
||||
if (!prev || !next) return false;
|
||||
|
||||
if ('pageX' in next && 'pageY' in next) {
|
||||
return prev.pageX === next.pageX && prev.pageY === next.pageY;
|
||||
}
|
||||
|
||||
if ('clientX' in next && 'clientY' in next) {
|
||||
return prev.clientX === next.clientX && prev.clientY === next.clientY;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
export function restoreFocus(activeElement, container) {
|
||||
// Focus back if is in the container
|
||||
if (activeElement !== document.activeElement && contains(container, activeElement)) {
|
||||
activeElement.focus();
|
||||
}
|
||||
}
|
||||
export function monitorResize(element, callback) {
|
||||
var prevWidth = null;
|
||||
var prevHeight = null;
|
||||
|
||||
function onResize(_ref) {
|
||||
var _ref2 = _slicedToArray(_ref, 1),
|
||||
target = _ref2[0].target;
|
||||
|
||||
var _target$getBoundingCl = target.getBoundingClientRect(),
|
||||
width = _target$getBoundingCl.width,
|
||||
height = _target$getBoundingCl.height;
|
||||
|
||||
var fixedWidth = Math.floor(width);
|
||||
var fixedHeight = Math.floor(height);
|
||||
|
||||
if (prevWidth !== fixedWidth || prevHeight !== fixedHeight) {
|
||||
callback({
|
||||
width: fixedWidth,
|
||||
height: fixedHeight
|
||||
});
|
||||
}
|
||||
|
||||
prevWidth = fixedWidth;
|
||||
prevHeight = fixedHeight;
|
||||
}
|
||||
|
||||
var resizeObserver = new ResizeObserver(onResize);
|
||||
|
||||
if (element) {
|
||||
resizeObserver.observe(element);
|
||||
}
|
||||
|
||||
return function () {
|
||||
resizeObserver.disconnect();
|
||||
};
|
||||
}
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
/**
|
||||
* Removed props:
|
||||
* - childrenProps
|
||||
*/
|
||||
import React from 'react';
|
||||
import { AlignType, AlignResult, TargetType } from './interface';
|
||||
declare type OnAlign = (source: HTMLElement, result: AlignResult) => void;
|
||||
export interface AlignProps {
|
||||
align: AlignType;
|
||||
target: TargetType;
|
||||
onAlign?: OnAlign;
|
||||
monitorBufferTime?: number;
|
||||
monitorWindowResize?: boolean;
|
||||
disabled?: boolean;
|
||||
children: React.ReactElement;
|
||||
}
|
||||
export interface RefAlign {
|
||||
forceAlign: () => void;
|
||||
}
|
||||
declare const RefAlign: React.ForwardRefExoticComponent<AlignProps & React.RefAttributes<RefAlign>>;
|
||||
export default RefAlign;
|
||||
+193
@@ -0,0 +1,193 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
|
||||
var _react = _interopRequireDefault(require("react"));
|
||||
|
||||
var _ref2 = require("rc-util/lib/ref");
|
||||
|
||||
var _domAlign = require("dom-align");
|
||||
|
||||
var _addEventListener = _interopRequireDefault(require("rc-util/lib/Dom/addEventListener"));
|
||||
|
||||
var _util = require("./util");
|
||||
|
||||
var _useBuffer3 = _interopRequireDefault(require("./hooks/useBuffer"));
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
|
||||
|
||||
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
|
||||
|
||||
function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
||||
|
||||
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
||||
|
||||
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
||||
|
||||
function getElement(func) {
|
||||
if (typeof func !== 'function') return null;
|
||||
return func();
|
||||
}
|
||||
|
||||
function getPoint(point) {
|
||||
if (_typeof(point) !== 'object' || !point) return null;
|
||||
return point;
|
||||
}
|
||||
|
||||
var Align = function Align(_ref, ref) {
|
||||
var children = _ref.children,
|
||||
disabled = _ref.disabled,
|
||||
target = _ref.target,
|
||||
align = _ref.align,
|
||||
onAlign = _ref.onAlign,
|
||||
monitorWindowResize = _ref.monitorWindowResize,
|
||||
_ref$monitorBufferTim = _ref.monitorBufferTime,
|
||||
monitorBufferTime = _ref$monitorBufferTim === void 0 ? 0 : _ref$monitorBufferTim;
|
||||
|
||||
var cacheRef = _react.default.useRef({});
|
||||
|
||||
var nodeRef = _react.default.useRef();
|
||||
|
||||
var childNode = _react.default.Children.only(children); // ===================== Align ======================
|
||||
// We save the props here to avoid closure makes props ood
|
||||
|
||||
|
||||
var forceAlignPropsRef = _react.default.useRef({});
|
||||
|
||||
forceAlignPropsRef.current.disabled = disabled;
|
||||
forceAlignPropsRef.current.target = target;
|
||||
forceAlignPropsRef.current.onAlign = onAlign;
|
||||
|
||||
var _useBuffer = (0, _useBuffer3.default)(function () {
|
||||
var _forceAlignPropsRef$c = forceAlignPropsRef.current,
|
||||
latestDisabled = _forceAlignPropsRef$c.disabled,
|
||||
latestTarget = _forceAlignPropsRef$c.target;
|
||||
|
||||
if (!latestDisabled && latestTarget) {
|
||||
var source = nodeRef.current;
|
||||
var result;
|
||||
var element = getElement(latestTarget);
|
||||
var point = getPoint(latestTarget);
|
||||
cacheRef.current.element = element;
|
||||
cacheRef.current.point = point; // IE lose focus after element realign
|
||||
// We should record activeElement and restore later
|
||||
|
||||
var _document = document,
|
||||
activeElement = _document.activeElement;
|
||||
|
||||
if (element) {
|
||||
result = (0, _domAlign.alignElement)(source, element, align);
|
||||
} else if (point) {
|
||||
result = (0, _domAlign.alignPoint)(source, point, align);
|
||||
}
|
||||
|
||||
(0, _util.restoreFocus)(activeElement, source);
|
||||
|
||||
if (onAlign) {
|
||||
onAlign(source, result);
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}, monitorBufferTime),
|
||||
_useBuffer2 = _slicedToArray(_useBuffer, 2),
|
||||
_forceAlign = _useBuffer2[0],
|
||||
cancelForceAlign = _useBuffer2[1]; // ===================== Effect =====================
|
||||
// Listen for target updated
|
||||
|
||||
|
||||
var resizeMonitor = _react.default.useRef({
|
||||
cancel: function cancel() {}
|
||||
}); // Listen for source updated
|
||||
|
||||
|
||||
var sourceResizeMonitor = _react.default.useRef({
|
||||
cancel: function cancel() {}
|
||||
});
|
||||
|
||||
_react.default.useEffect(function () {
|
||||
var element = getElement(target);
|
||||
var point = getPoint(target);
|
||||
|
||||
if (nodeRef.current !== sourceResizeMonitor.current.element) {
|
||||
sourceResizeMonitor.current.cancel();
|
||||
sourceResizeMonitor.current.element = nodeRef.current;
|
||||
sourceResizeMonitor.current.cancel = (0, _util.monitorResize)(nodeRef.current, _forceAlign);
|
||||
}
|
||||
|
||||
if (cacheRef.current.element !== element || !(0, _util.isSamePoint)(cacheRef.current.point, point)) {
|
||||
_forceAlign(); // Add resize observer
|
||||
|
||||
|
||||
if (resizeMonitor.current.element !== element) {
|
||||
resizeMonitor.current.cancel();
|
||||
resizeMonitor.current.element = element;
|
||||
resizeMonitor.current.cancel = (0, _util.monitorResize)(element, _forceAlign);
|
||||
}
|
||||
}
|
||||
}); // Listen for disabled change
|
||||
|
||||
|
||||
_react.default.useEffect(function () {
|
||||
if (!disabled) {
|
||||
_forceAlign();
|
||||
} else {
|
||||
cancelForceAlign();
|
||||
}
|
||||
}, [disabled]); // Listen for window resize
|
||||
|
||||
|
||||
var winResizeRef = _react.default.useRef(null);
|
||||
|
||||
_react.default.useEffect(function () {
|
||||
if (monitorWindowResize) {
|
||||
if (!winResizeRef.current) {
|
||||
winResizeRef.current = (0, _addEventListener.default)(window, 'resize', _forceAlign);
|
||||
}
|
||||
} else if (winResizeRef.current) {
|
||||
winResizeRef.current.remove();
|
||||
winResizeRef.current = null;
|
||||
}
|
||||
}, [monitorWindowResize]); // Clear all if unmount
|
||||
|
||||
|
||||
_react.default.useEffect(function () {
|
||||
return function () {
|
||||
resizeMonitor.current.cancel();
|
||||
sourceResizeMonitor.current.cancel();
|
||||
if (winResizeRef.current) winResizeRef.current.remove();
|
||||
cancelForceAlign();
|
||||
};
|
||||
}, []); // ====================== Ref =======================
|
||||
|
||||
|
||||
_react.default.useImperativeHandle(ref, function () {
|
||||
return {
|
||||
forceAlign: function forceAlign() {
|
||||
return _forceAlign(true);
|
||||
}
|
||||
};
|
||||
}); // ===================== Render =====================
|
||||
|
||||
|
||||
if (_react.default.isValidElement(childNode)) {
|
||||
childNode = _react.default.cloneElement(childNode, {
|
||||
ref: (0, _ref2.composeRef)(childNode.ref, nodeRef)
|
||||
});
|
||||
}
|
||||
|
||||
return childNode;
|
||||
};
|
||||
|
||||
var RefAlign = _react.default.forwardRef(Align);
|
||||
|
||||
RefAlign.displayName = 'Align';
|
||||
var _default = RefAlign;
|
||||
exports.default = _default;
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
declare const _default: (callback: () => boolean, buffer: number) => ((force?: boolean) => void)[];
|
||||
export default _default;
|
||||
+48
@@ -0,0 +1,48 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
|
||||
var _react = _interopRequireDefault(require("react"));
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var _default = function _default(callback, buffer) {
|
||||
var calledRef = _react.default.useRef(false);
|
||||
|
||||
var timeoutRef = _react.default.useRef(null);
|
||||
|
||||
function cancelTrigger() {
|
||||
window.clearTimeout(timeoutRef.current);
|
||||
}
|
||||
|
||||
function trigger(force) {
|
||||
if (!calledRef.current || force === true) {
|
||||
if (callback() === false) {
|
||||
// Not delay since callback cancelled self
|
||||
return;
|
||||
}
|
||||
|
||||
calledRef.current = true;
|
||||
cancelTrigger();
|
||||
timeoutRef.current = window.setTimeout(function () {
|
||||
calledRef.current = false;
|
||||
}, buffer);
|
||||
} else {
|
||||
cancelTrigger();
|
||||
timeoutRef.current = window.setTimeout(function () {
|
||||
calledRef.current = false;
|
||||
trigger();
|
||||
}, buffer);
|
||||
}
|
||||
}
|
||||
|
||||
return [trigger, function () {
|
||||
calledRef.current = false;
|
||||
cancelTrigger();
|
||||
}];
|
||||
};
|
||||
|
||||
exports.default = _default;
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
import Align from './Align';
|
||||
export default Align;
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
|
||||
var _Align = _interopRequireDefault(require("./Align"));
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
// export this package's api
|
||||
var _default = _Align.default;
|
||||
exports.default = _default;
|
||||
+56
@@ -0,0 +1,56 @@
|
||||
/** Two char of 't' 'b' 'c' 'l' 'r'. Example: 'lt' */
|
||||
export declare type AlignPoint = string;
|
||||
export interface AlignType {
|
||||
/**
|
||||
* move point of source node to align with point of target node.
|
||||
* Such as ['tr','cc'], align top right point of source node with center point of target node.
|
||||
* Point can be 't'(top), 'b'(bottom), 'c'(center), 'l'(left), 'r'(right) */
|
||||
points?: AlignPoint[];
|
||||
/**
|
||||
* offset source node by offset[0] in x and offset[1] in y.
|
||||
* If offset contains percentage string value, it is relative to sourceNode region.
|
||||
*/
|
||||
offset?: number[];
|
||||
/**
|
||||
* offset target node by offset[0] in x and offset[1] in y.
|
||||
* If targetOffset contains percentage string value, it is relative to targetNode region.
|
||||
*/
|
||||
targetOffset?: number[];
|
||||
/**
|
||||
* If adjustX field is true, will adjust source node in x direction if source node is invisible.
|
||||
* If adjustY field is true, will adjust source node in y direction if source node is invisible.
|
||||
*/
|
||||
overflow?: {
|
||||
adjustX?: boolean | number;
|
||||
adjustY?: boolean | number;
|
||||
};
|
||||
/**
|
||||
* Whether use css right instead of left to position
|
||||
*/
|
||||
useCssRight?: boolean;
|
||||
/**
|
||||
* Whether use css bottom instead of top to position
|
||||
*/
|
||||
useCssBottom?: boolean;
|
||||
/**
|
||||
* Whether use css transform instead of left/top/right/bottom to position if browser supports.
|
||||
* Defaults to false.
|
||||
*/
|
||||
useCssTransform?: boolean;
|
||||
}
|
||||
export interface AlignResult {
|
||||
points: AlignPoint[];
|
||||
offset: number[];
|
||||
targetOffset: number[];
|
||||
overflow: {
|
||||
adjustX: boolean | number;
|
||||
adjustY: boolean | number;
|
||||
};
|
||||
}
|
||||
export interface TargetPoint {
|
||||
clientX?: number;
|
||||
clientY?: number;
|
||||
pageX?: number;
|
||||
pageY?: number;
|
||||
}
|
||||
export declare type TargetType = (() => HTMLElement) | TargetPoint;
|
||||
+1
@@ -0,0 +1 @@
|
||||
"use strict";
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import { TargetPoint } from './interface';
|
||||
export declare function isSamePoint(prev: TargetPoint, next: TargetPoint): boolean;
|
||||
export declare function restoreFocus(activeElement: any, container: any): void;
|
||||
export declare function monitorResize(element: HTMLElement, callback: Function): () => void;
|
||||
+81
@@ -0,0 +1,81 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.isSamePoint = isSamePoint;
|
||||
exports.restoreFocus = restoreFocus;
|
||||
exports.monitorResize = monitorResize;
|
||||
|
||||
var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
|
||||
|
||||
var _contains = _interopRequireDefault(require("rc-util/lib/Dom/contains"));
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
|
||||
|
||||
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
|
||||
|
||||
function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
||||
|
||||
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
||||
|
||||
function isSamePoint(prev, next) {
|
||||
if (prev === next) return true;
|
||||
if (!prev || !next) return false;
|
||||
|
||||
if ('pageX' in next && 'pageY' in next) {
|
||||
return prev.pageX === next.pageX && prev.pageY === next.pageY;
|
||||
}
|
||||
|
||||
if ('clientX' in next && 'clientY' in next) {
|
||||
return prev.clientX === next.clientX && prev.clientY === next.clientY;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function restoreFocus(activeElement, container) {
|
||||
// Focus back if is in the container
|
||||
if (activeElement !== document.activeElement && (0, _contains.default)(container, activeElement)) {
|
||||
activeElement.focus();
|
||||
}
|
||||
}
|
||||
|
||||
function monitorResize(element, callback) {
|
||||
var prevWidth = null;
|
||||
var prevHeight = null;
|
||||
|
||||
function onResize(_ref) {
|
||||
var _ref2 = _slicedToArray(_ref, 1),
|
||||
target = _ref2[0].target;
|
||||
|
||||
var _target$getBoundingCl = target.getBoundingClientRect(),
|
||||
width = _target$getBoundingCl.width,
|
||||
height = _target$getBoundingCl.height;
|
||||
|
||||
var fixedWidth = Math.floor(width);
|
||||
var fixedHeight = Math.floor(height);
|
||||
|
||||
if (prevWidth !== fixedWidth || prevHeight !== fixedHeight) {
|
||||
callback({
|
||||
width: fixedWidth,
|
||||
height: fixedHeight
|
||||
});
|
||||
}
|
||||
|
||||
prevWidth = fixedWidth;
|
||||
prevHeight = fixedHeight;
|
||||
}
|
||||
|
||||
var resizeObserver = new _resizeObserverPolyfill.default(onResize);
|
||||
|
||||
if (element) {
|
||||
resizeObserver.observe(element);
|
||||
}
|
||||
|
||||
return function () {
|
||||
resizeObserver.disconnect();
|
||||
};
|
||||
}
|
||||
+85
@@ -0,0 +1,85 @@
|
||||
{
|
||||
"_from": "rc-align@^3.0.0-rc.0",
|
||||
"_id": "rc-align@3.0.0-rc.1",
|
||||
"_inBundle": false,
|
||||
"_integrity": "sha512-GbofumhCUb7SxP410j/fbtR2M9Zml+eoZSdaliZh6R3NhfEj5zP4jcO3HG3S9C9KIcXQQtd/cwVHkb9Y0KU7Hg==",
|
||||
"_location": "/rc-align",
|
||||
"_phantomChildren": {},
|
||||
"_requested": {
|
||||
"type": "range",
|
||||
"registry": true,
|
||||
"raw": "rc-align@^3.0.0-rc.0",
|
||||
"name": "rc-align",
|
||||
"escapedName": "rc-align",
|
||||
"rawSpec": "^3.0.0-rc.0",
|
||||
"saveSpec": null,
|
||||
"fetchSpec": "^3.0.0-rc.0"
|
||||
},
|
||||
"_requiredBy": [
|
||||
"/rc-trigger"
|
||||
],
|
||||
"_resolved": "https://registry.npmjs.org/rc-align/-/rc-align-3.0.0-rc.1.tgz",
|
||||
"_shasum": "32d1fac860d12bb85e9b8cafbbdef79f3f537674",
|
||||
"_spec": "rc-align@^3.0.0-rc.0",
|
||||
"_where": "/Users/thilina/TestProjects/icehrm-pro/web/node_modules/rc-trigger",
|
||||
"author": "",
|
||||
"bugs": {
|
||||
"url": "http://github.com/react-component/align/issues"
|
||||
},
|
||||
"bundleDependencies": false,
|
||||
"dependencies": {
|
||||
"classnames": "2.x",
|
||||
"dom-align": "^1.7.0",
|
||||
"rc-util": "^4.12.0",
|
||||
"resize-observer-polyfill": "^1.5.1"
|
||||
},
|
||||
"deprecated": false,
|
||||
"description": "align ui component for react",
|
||||
"devDependencies": {
|
||||
"@types/jest": "^24.0.18",
|
||||
"@types/react": "^16.8.19",
|
||||
"@types/react-dom": "^16.8.4",
|
||||
"@types/warning": "^3.0.0",
|
||||
"cross-env": "^6.0.0",
|
||||
"enzyme": "^3.3.0",
|
||||
"enzyme-adapter-react-16": "^1.14.0",
|
||||
"enzyme-to-json": "^3.4.0",
|
||||
"father": "^2.13.2",
|
||||
"np": "^5.0.3",
|
||||
"typescript": "^3.5.2"
|
||||
},
|
||||
"files": [
|
||||
"lib",
|
||||
"es"
|
||||
],
|
||||
"homepage": "http://github.com/react-component/align",
|
||||
"keywords": [
|
||||
"react",
|
||||
"react-component",
|
||||
"react-align",
|
||||
"align"
|
||||
],
|
||||
"license": "MIT",
|
||||
"main": "./lib/index",
|
||||
"module": "./es/index",
|
||||
"name": "rc-align",
|
||||
"peerDependencies": {
|
||||
"react": "*",
|
||||
"react-dom": "*"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+ssh://git@github.com/react-component/align.git"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "father doc build --storybook",
|
||||
"compile": "father build",
|
||||
"coverage": "father test --coverage",
|
||||
"lint": "eslint src/ examples/ --ext .tsx,.ts,.jsx,.js",
|
||||
"now-build": "npm run build",
|
||||
"prepublishOnly": "npm run compile && np --no-cleanup --yolo --no-publish",
|
||||
"start": "cross-env NODE_ENV=development father doc dev --storybook",
|
||||
"test": "father test"
|
||||
},
|
||||
"version": "3.0.0-rc.1"
|
||||
}
|
||||
Reference in New Issue
Block a user