are-visual
Version:
A Component Library for React.
1,331 lines (1,138 loc) • 63.5 kB
JavaScript
import 'focus-visible/dist/focus-visible.min.js';
import React, { useState, createContext, useEffect, useCallback, useContext, forwardRef, useReducer, useImperativeHandle, useRef } from 'react';
import classnames from 'classnames';
import ReactDOM, { createPortal } from 'react-dom';
import Animate from 'rc-animate';
import omit$1 from 'lodash.omit';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css = ".are-fade-enter {\n opacity: 0;\n}\n.are-fade-enter-active {\n -webkit-animation: fadeIn 0.2s linear forwards;\n animation: fadeIn 0.2s linear forwards;\n}\n.are-fade-leave {\n opacity: 1;\n}\n.are-fade-leave-active {\n animation: fadeIn 0.2s linear reverse forwards;\n}\n\n.are-zoom-enter {\n opacity: 0;\n transform: none;\n}\n.are-zoom-enter-active {\n -webkit-animation: zoomIn 0.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;\n animation: zoomIn 0.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;\n}\n.are-zoom-leave-active, .are-zoom-exit-active {\n animation: zoomIn 0.2s cubic-bezier(0.22, 0.61, 0.36, 1) reverse forwards;\n}\n\n@-webkit-keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n@keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n@-webkit-keyframes zoomIn {\n 0% {\n opacity: 0;\n transform: scale(0.9);\n }\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n}\n@keyframes zoomIn {\n 0% {\n opacity: 0;\n transform: scale(0.9);\n }\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n}\n[data-focus-visible-added].focus-visible {\n outline: solid 2px rgba(7, 100, 255, 0.4);\n}\n\n[class^=are-] {\n font-family: -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", \"Helvetica\", \"Arial\", \"PingFang SC\", \"Hiragino Sans GB\", \"Heiti SC\", \"Microsoft YaHei\", \"WenQuanYi Micro Hei\", sans-serif;\n}\n\n.are-font {\n font-size: 14px;\n color: #292929;\n}\n\n.are-svg {\n display: inline-block;\n width: 1em;\n height: 1em;\n overflow: hidden;\n vertical-align: -0.15em;\n fill: currentColor;\n}\n\n.are-color {\n color: #292929;\n}\n.are-color--primary {\n color: #0764ff;\n}\n.are-color--danger {\n color: #f42525;\n}\n.are-color--warn {\n color: #ffab00;\n}\n.are-color--success {\n color: #2aae67;\n}\n\n[data-js-focus-visible] :focus:not([data-focus-visible-added]) {\n outline: none;\n}\n\n.are-fixed-container {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}";
styleInject(css);
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread2(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
if (i % 2) {
ownKeys(Object(source), true).forEach(function (key) {
_defineProperty(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
}
return target;
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
function _objectWithoutProperties(source, excluded) {
if (source == null) return {};
var target = _objectWithoutPropertiesLoose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for (i = 0; i < sourceSymbolKeys.length; i++) {
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
function _toConsumableArray(arr) {
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
}
function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) return _arrayLikeToArray(arr);
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterableToArray(iter) {
if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
}
function _iterableToArrayLimit(arr, i) {
if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) 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 _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
var _ref = /*#__PURE__*/React.createElement("path", {
d: "M20.75 13.25h-2.5a1.25 1.25 0 010-2.5h2.5a1.25 1.25 0 010 2.5zm-3.447-4.785a1.25 1.25 0 11-1.768-1.768l1.768-1.769a1.253 1.253 0 011.769 0c.486.49.486 1.28 0 1.769l-1.769 1.768zM12 22a1.25 1.25 0 01-1.25-1.25v-2.5a1.25 1.25 0 012.5 0v2.5c0 .692-.56 1.25-1.25 1.25zm0-15a1.25 1.25 0 01-1.25-1.25v-2.5a1.25 1.25 0 112.5 0v2.5C13.25 6.442 12.69 7 12 7zM6.697 19.072a1.253 1.253 0 01-1.769 0 1.253 1.253 0 010-1.769l1.769-1.766a1.25 1.25 0 011.768 1.766l-1.768 1.769zm0-10.607L4.928 6.697a1.253 1.253 0 010-1.769 1.253 1.253 0 011.769 0l1.768 1.769a1.25 1.25 0 11-1.768 1.768zM7 12c0 .69-.56 1.25-1.25 1.25h-2.5a1.25 1.25 0 010-2.5h2.5c.69 0 1.25.56 1.25 1.25zm10.303 3.537l1.769 1.766c.486.49.486 1.28 0 1.769a1.253 1.253 0 01-1.769 0l-1.768-1.769a1.25 1.25 0 011.768-1.767z",
fillRule: "nonzero"
});
var SvgLoading = function SvgLoading(props) {
return /*#__PURE__*/React.createElement("svg", _extends({
viewBox: "0 0 24 24",
width: "1em",
height: "1em",
fillRule: "evenodd",
clipRule: "evenodd",
strokeLinejoin: "round",
strokeMiterlimit: 2
}, props), _ref);
};
var css$1 = ".are-loading {\n display: inline-block;\n width: 1em;\n height: 1em;\n overflow: hidden;\n vertical-align: -0.15em;\n -webkit-animation: loading 2.4s infinite linear;\n animation: loading 2.4s infinite linear;\n fill: currentColor;\n}\n\n@-webkit-keyframes loading {\n 100% {\n transform: rotate(1turn);\n }\n}\n\n@keyframes loading {\n 100% {\n transform: rotate(1turn);\n }\n}";
styleInject(css$1);
var Loading = function Loading(_ref) {
var style = _ref.style,
className = _ref.className;
return React.createElement(SvgLoading, {
className: classnames('are-loading', className),
style: style
});
};
var css$2 = "@charset \"UTF-8\";\n.are-button {\n position: relative;\n display: inline-block;\n margin: 0;\n font-weight: normal;\n line-height: 1;\n color: #292929;\n vertical-align: middle;\n cursor: pointer;\n background-color: #f3f3f3;\n border: none;\n border-radius: 4px;\n box-shadow: none;\n box-sizing: border-box;\n transition: transform 0.14s;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n /* ===== 尺寸 ===== */\n /* ===== 类型 ===== */\n /* ===== 形状 ===== */\n /* ===== 独立属性 ===== */\n}\n.are-button:hover {\n opacity: 0.8;\n}\n.are-button:active {\n outline: none;\n}\n.are-button:disabled {\n cursor: no-drop;\n opacity: 0.6;\n}\n.are-button + .are-button {\n margin-left: 10px;\n}\n.are-button__loading {\n margin-right: 10px;\n}\n.are-button--readonly {\n cursor: default;\n opacity: 0.6;\n}\n.are-button--readonly:hover {\n opacity: 0.6;\n}\n.are-button--press {\n transform: scale(0.96);\n transition: transform 0.14s;\n}\n.are-button--large {\n padding: 6px 14px;\n height: 40px;\n min-width: 104px;\n}\n.are-button--middle {\n padding: 6px 14px;\n height: 36px;\n min-width: 94px;\n}\n.are-button--small {\n padding: 2px 6px;\n height: 26px;\n min-width: 60px;\n}\n.are-button--text {\n height: unset;\n min-width: unset;\n color: #0764ff;\n background: transparent;\n border: 0;\n border-color: transparent;\n transition: background 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n -webkit-user-select: unset;\n -moz-user-select: unset;\n -ms-user-select: unset;\n user-select: unset;\n}\n.are-button--text:focus, .are-button--text:hover {\n transition: background 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n.are-button--text:focus {\n background-color: rgba(0, 0, 0, 0.03);\n -webkit-filter: none;\n filter: none;\n}\n.are-button--plain {\n color: #0764ff;\n background-color: #fff;\n border: 1px solid;\n}\n.are-button--primary {\n color: #fff;\n background-color: #0764ff;\n border: 0;\n}\n.are-button--round {\n border-radius: 999px;\n}\n.are-button--circle {\n padding-right: 0;\n padding-left: 0;\n border-radius: 50%;\n}\n.are-button--circle.are-button--large {\n width: 40px;\n height: 40px;\n max-width: 40px;\n max-height: 40px;\n min-width: 40px;\n min-height: 40px;\n}\n.are-button--circle.are-button--middle {\n width: 36px;\n height: 36px;\n max-width: 36px;\n max-height: 36px;\n min-width: 36px;\n min-height: 36px;\n}\n.are-button--circle.are-button--small {\n width: 26px;\n height: 26px;\n max-width: 26px;\n max-height: 26px;\n min-width: 26px;\n min-height: 26px;\n}\n.are-button--circle .are-button__loading {\n margin: 0;\n}\n.are-button--ghost {\n color: #fff;\n background: transparent;\n border: 1px solid;\n}\n.are-button--ghost.are-button--primary {\n color: #0764ff;\n border-color: #0764ff;\n}\n.are-button--block {\n width: 100%;\n}\n.are-button--block.are-button--press {\n transform: scale(0.99, 0.98);\n}\n.are-button--danger {\n color: #f42525;\n background-color: rgba(244, 37, 37, 0.06);\n border-color: #f42525;\n}\n.are-button--danger.are-button--primary {\n color: #fff;\n background-color: #f42525;\n border-color: #f42525;\n}\n.are-button--danger.are-button--text {\n color: #f42525;\n background-color: transparent;\n}\n.are-button--danger.are-button--text:focus {\n background-color: rgba(244, 37, 37, 0.06);\n}\n.are-button--danger.are-button--ghost {\n color: #f42525;\n background: transparent;\n}\n.are-button:focus:not(.focus-visible) {\n outline: none;\n}";
styleInject(css$2);
var Button = function Button(props) {
var className = props.className,
type = props.type,
block = props.block,
shape = props.shape,
disabled = props.disabled,
danger = props.danger,
nativeType = props.nativeType,
size = props.size,
children = props.children,
style = props.style,
loading = props.loading,
ghost = props.ghost,
emitClick = props.onClick,
emitMouseDown = props.onMouseDown,
emitMouseUp = props.onMouseUp,
emitMouseLeave = props.onMouseLeave,
otherProps = _objectWithoutProperties(props, ["className", "type", "block", "shape", "disabled", "danger", "nativeType", "size", "children", "style", "loading", "ghost", "onClick", "onMouseDown", "onMouseUp", "onMouseLeave"]);
var onClick = function onClick(e) {
if (!disabled && !loading && emitClick) {
emitClick(e);
}
};
/** 按钮是否已被按下 */
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
isPress = _useState2[0],
setIsPress = _useState2[1];
var onMouseEvent = function onMouseEvent(e, pressState, emitEvent) {
if (!loading) {
setIsPress(pressState);
}
if (!loading && emitEvent) {
emitEvent(e);
}
};
return React.createElement("button", Object.assign({
className: classnames('are-button', {
'are-button--large': size === 'large',
'are-button--middle': size === 'middle',
'are-button--small': size === 'small',
'are-button--primary': type === 'primary',
'are-button--plain': !ghost && type === 'plain',
'are-button--text': !ghost && type === 'text',
'are-button--round': shape === 'round',
'are-button--circle': shape === 'circle',
'are-button--block': block,
'are-button--danger': danger,
'are-button--readonly': loading,
'are-button--press': isPress,
'are-button--ghost': type !== 'text' && ghost
}, className),
style: style,
type: nativeType,
disabled: disabled,
onClick: onClick,
onMouseDown: function onMouseDown(e) {
return onMouseEvent(e, true, emitMouseDown);
},
onMouseUp: function onMouseUp(e) {
return onMouseEvent(e, false, emitMouseUp);
},
onMouseLeave: function onMouseLeave(e) {
return onMouseEvent(e, false, emitMouseLeave);
}
}, otherProps), loading ? React.createElement(Loading, {
className: "are-button__loading"
}) : null, shape === 'circle' && loading ? null : children);
};
Button.defaultProps = {
size: 'middle',
nativeType: 'button'
};
function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
var _ref$1 = /*#__PURE__*/React.createElement("path", {
d: "M6.622.34a.75.75 0 011.31.723l-.054.098-4.25 6.5a.75.75 0 01-1.105.168l-.08-.077-2.25-2.5a.75.75 0 011.034-1.08l.08.076 1.598 1.776L6.622.34z"
});
var SvgCheck = function SvgCheck(props) {
return /*#__PURE__*/React.createElement("svg", _extends$1({
viewBox: "0 0 8 8",
width: "1em",
height: "1em"
}, props), _ref$1);
};
function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
var _ref$2 = /*#__PURE__*/React.createElement("path", {
d: "M7 0a1 1 0 01.117 1.993L7 2H1A1 1 0 01.883.007L1 0h6z"
});
var SvgMixin = function SvgMixin(props) {
return /*#__PURE__*/React.createElement("svg", _extends$2({
width: "1em",
height: "1em",
viewBox: "0 0 8 2"
}, props), _ref$2);
};
/**
* @description 获取数据类型
* @param {any} param
* @returns {string}
* Eg: string || boolean || number || array
*/
/**
* @description 查找对象是否包含指定属性
* @param target 目标对象
* @param attr 属性名称
*/
function hasOwn(target, attr) {
return Object.prototype.hasOwnProperty.call(target, attr);
}
/**
* @description 删除[对象|数组]中指定的项（纯函数）
* @param {Record<string, unknown>|any[]} obj 目标对象或数组
* @param {any[]} keyList 要删除的 key/项 的集合
* @returns {object|any[]} 返回一个新的对象
*/
function omit(target, keyList) {
if (Array.isArray(target)) {
var _result = [];
target.forEach(function (item) {
if (!keyList.includes(item)) {
_result.push(item);
}
});
return _result;
}
var result = {};
Object.keys(target).forEach(function (key) {
if (!keyList.includes(key)) {
result[key] = target[key];
}
});
return result;
}
var CheckboxCtx = createContext({
GROUPVALUE: [],
disabledGroup: false,
updateGroup: function updateGroup() {//
},
removeCheckbox: function removeCheckbox() {//
}
});
function handlerResult(target, type, payload) {
var payloadList = Array.isArray(payload) ? payload : [payload];
switch (type) {
case 'add':
{
return [].concat(_toConsumableArray(target), _toConsumableArray(payloadList));
}
case 'remove':
{
return omit(target, payloadList);
}
default:
throw new Error();
}
}
function CheckboxGroup(props) {
var _props$value = props.value,
value = _props$value === void 0 ? [] : _props$value,
disabled = props.disabled,
className = props.className,
style = props.style,
children = props.children,
onChange = props.onChange;
var _useState = useState(value),
_useState2 = _slicedToArray(_useState, 2),
values = _useState2[0],
setValues = _useState2[1];
/**
* 监听 value 值的变更，及时更新 Checkbox 勾选状态。
* 例如父组件直接修改 value 值的情况
*/
useEffect(function () {
setValues(function () {
return value;
});
}, [value]);
/**
* 触发 `onChange` 事件。
* `CheckboxGroup` 本身不调用，在 `Checkbox` 调用 `onChange` 时调用
*
* Triggers the `onChange` event.
* `CheckboxGroup` itself is not called, but is called when `Checkbox` calls `onChange`.
*/
var updateGroupValue = function updateGroupValue(name) {
var result = values;
var handlerType = values.includes(name) ? 'remove' : 'add';
result = handlerResult(values, handlerType, name);
setValues(function () {
return result;
});
if (onChange) {
onChange(result);
}
};
/**
* [zh-CN]: DOM 被移除时更新 `value`且触发 `onChange` 函数。
* [en]: Update `value` and trigger the `onChange` function when the DOM is removed.
*/
var remove = function remove(name) {
setValues(function (_value) {
var result = handlerResult(_value, 'remove', name);
if (onChange) {
onChange(result);
}
return result;
});
};
/**
* 此处的依赖数组为空，它本应该有一个 `onChange` 作为依赖，把函数独立出去
* 之后，此处的依赖便省去了。我不确定这样做是否正确。但是它能够正常工作。
*
* Perhaps the `onChange` in this function is a dependency on the
* I'm not sure it's the right thing to do.
*/
var removeCheckbox = useCallback(remove, []);
var Provider = CheckboxCtx.Provider;
return React.createElement(Provider, {
value: {
GROUPVALUE: values,
disabledGroup: disabled || false,
updateGroup: updateGroupValue,
removeCheckbox: removeCheckbox
}
}, React.createElement("div", {
role: "group",
"aria-label": "checkbox-group",
className: className,
style: style
}, children));
}
var css$3 = ".are-checkbox {\n position: relative;\n display: inline-block;\n font-size: 14px;\n line-height: 1.5715;\n color: #292929;\n cursor: pointer;\n outline: 0;\n}\n.are-checkbox + .are-checkbox {\n margin-left: 10px;\n}\n.are-checkbox__icon {\n position: relative;\n display: inline-block;\n width: 16px;\n height: 16px;\n overflow: hidden;\n color: #fff;\n vertical-align: middle;\n background-color: #fff;\n border: 1px solid #d6d6d6;\n border-radius: 4px;\n outline: 0;\n box-sizing: border-box;\n transition: border-color 0.2s ease-in, background-color 0.2s ease-in;\n}\n.are-checkbox__icon::before {\n content: \"\";\n display: block;\n width: 100%;\n height: 100%;\n background-color: #fff;\n border-radius: inherit;\n transform: scale(1);\n transition: transform 0.2s ease-in;\n}\n.are-checkbox__svg {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n margin: auto;\n transform: scale(0);\n fill: currentColor;\n}\n.are-checkbox__label {\n display: inline-block;\n padding: 0 8px;\n vertical-align: middle;\n cursor: inherit;\n}\n.are-checkbox--checked .are-checkbox__icon {\n background-color: #0764ff;\n border-color: #0764ff;\n}\n.are-checkbox--checked .are-checkbox__icon::before {\n transform: scale(0);\n}\n.are-checkbox--checked .are-checkbox__svg {\n -webkit-animation: zoomInIcon 0.2s ease-in forwards;\n animation: zoomInIcon 0.2s ease-in forwards;\n -webkit-animation-delay: 0.2s;\n animation-delay: 0.2s;\n}\n.are-checkbox--mixin .are-checkbox__icon {\n background-color: #0764ff;\n border-color: #0764ff;\n}\n.are-checkbox--mixin .are-checkbox__icon::before {\n transform: scale(0);\n}\n.are-checkbox--mixin .are-checkbox__svg {\n -webkit-animation: zoomInIcon 0.2s ease-in forwards;\n animation: zoomInIcon 0.2s ease-in forwards;\n -webkit-animation-delay: 0.2s;\n animation-delay: 0.2s;\n}\n.are-checkbox--disabled {\n cursor: not-allowed;\n opacity: 0.6;\n}\n.are-checkbox--disabled .are-checkbox__icon {\n color: rgba(0, 0, 0, 0.4);\n background-color: #ddd;\n border-color: #ccc;\n}\n.are-checkbox--disabled .are-checkbox__icon::before {\n background-color: #ddd;\n}\n.are-checkbox.focus-visible[data-focus-visible-added] {\n outline: none;\n}\n.are-checkbox.focus-visible[data-focus-visible-added] .are-checkbox__icon {\n border-color: #3a84ff;\n box-shadow: 0 0 0 2px rgba(7, 100, 255, 0.4);\n}\n\n@-webkit-keyframes zoomInIcon {\n 0% {\n transform: scale(0);\n }\n 90% {\n transform: scale(1.1);\n }\n 100% {\n transform: scale(1);\n }\n}\n\n@keyframes zoomInIcon {\n 0% {\n transform: scale(0);\n }\n 90% {\n transform: scale(1.1);\n }\n 100% {\n transform: scale(1);\n }\n}";
styleInject(css$3);
function Checkbox(props) {
var checked = props.checked,
children = props.children,
disabled = props.disabled,
name = props.name,
values = props.values,
mixin = props.mixin,
onChange = props.onChange; // 选中值，未选中值
var _values = _slicedToArray(values, 2),
CHECK = _values[0],
UNCHECK = _values[1];
/**
* GROUPVALUE => Group 存储选中的值
* updateGroup => Checkbox 调用 onChange 时一顺便更新 group
*/
var _useContext = useContext(CheckboxCtx),
GROUPVALUE = _useContext.GROUPVALUE,
disabledGroup = _useContext.disabledGroup,
updateGroup = _useContext.updateGroup,
removeCheckbox = _useContext.removeCheckbox;
useEffect(function () {
return function () {
removeCheckbox(name);
};
}, [name, removeCheckbox]);
/**
* 勾选状态
*/
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
active = _useState2[0],
setActive = _useState2[1];
useEffect(function () {
// checked 等于 `CHECK` 或者 group 中含有改值，勾选状态
var state = checked === CHECK || GROUPVALUE.includes(name);
setActive(state);
}, [name, checked, CHECK, GROUPVALUE]);
var onClick = function onClick() {
if (disabled || disabledGroup) {
return;
}
if (onChange) {
onChange(checked === CHECK ? UNCHECK : CHECK);
} // Checkbox 在 Group 内部，name 作为唯一标识符
updateGroup(name);
}; // 键盘事件
var handleKeyPress = function handleKeyPress(event) {
event.preventDefault();
if (event.charCode === 32) {
onClick();
}
};
return React.createElement("div", {
className: classnames('are-checkbox', {
'are-checkbox--checked': active,
'are-checkbox--disabled': disabled || disabledGroup,
'are-checkbox--mixin': mixin
}),
role: "checkbox",
"aria-checked": active,
"aria-disabled": disabled || disabledGroup,
tabIndex: disabled || disabledGroup ? -1 : 0,
onClick: onClick,
onKeyPress: handleKeyPress
}, React.createElement("span", {
className: "are-checkbox__icon"
}, active && !mixin ? React.createElement(SvgCheck, {
className: "are-checkbox__svg",
height: "58%"
}) : null, mixin ? React.createElement(SvgMixin, {
className: "are-checkbox__svg",
width: "58%"
}) : null), children ? React.createElement("span", {
className: "are-checkbox__label"
}, children) : null);
}
Checkbox.Group = CheckboxGroup;
Checkbox.defaultProps = {
values: [true, false]
};
var RadioCtx = createContext({
GROUPVALUE: undefined,
disabledGroup: false,
updateGroup: function updateGroup() {//
}
});
function RadioGroup(props) {
var className = props.className,
_props$disabled = props.disabled,
disabled = _props$disabled === void 0 ? false : _props$disabled,
_props$value = props.value,
value = _props$value === void 0 ? undefined : _props$value,
style = props.style,
children = props.children,
onChange = props.onChange;
var _useState = useState(value),
_useState2 = _slicedToArray(_useState, 2),
state = _useState2[0],
setState = _useState2[1];
useEffect(function () {
setState(function () {
return value;
});
}, [value]); // 此处不直接修改 state，而是使其成为受控组件
var onUpdate = function onUpdate(itemValue) {
if (onChange) {
onChange(itemValue);
}
};
var dispatch = useCallback(onUpdate, []);
return React.createElement(RadioCtx.Provider, {
value: {
GROUPVALUE: state,
disabledGroup: disabled,
updateGroup: dispatch
}
}, React.createElement("div", {
className: classnames('are-radio-group', className),
style: style,
role: "group"
}, children));
}
var css$4 = ".are-radio {\n position: relative;\n display: inline-block;\n font-size: 14px;\n line-height: 1.5715;\n color: #292929;\n cursor: pointer;\n outline: 0;\n}\n.are-radio + .are-radio {\n margin-left: 10px;\n}\n.are-radio__icon {\n position: relative;\n display: inline-block;\n width: 16px;\n height: 16px;\n overflow: hidden;\n vertical-align: middle;\n border: 1px solid #d6d6d6;\n border-radius: 50%;\n transition: background-color 0.2s ease-in, border-color 0.2s ease-in;\n}\n.are-radio__icon::before {\n content: \"\";\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n display: block;\n margin: auto;\n width: 8px;\n height: 8px;\n background-color: #fff;\n border-radius: inherit;\n transform: scale(2);\n transition: transform 0.2s ease-in;\n transform-origin: center;\n}\n.are-radio__label {\n display: inline-block;\n padding: 0 8px;\n vertical-align: middle;\n cursor: inherit;\n}\n.are-radio--checked .are-radio__icon {\n background-color: #0764ff;\n border-color: #0764ff;\n}\n.are-radio--checked .are-radio__icon::before {\n transform: scale(1);\n}\n.are-radio--disabled {\n cursor: not-allowed;\n opacity: 0.6;\n}\n.are-radio--disabled .are-radio__icon {\n background-color: #ddd;\n border-color: #ccc;\n}\n.are-radio--disabled .are-radio__icon::before {\n background-color: #ddd;\n}\n.are-radio:hover .are-radio__icon {\n border-color: #0764ff;\n}\n.are-radio.are-radio--disabled .are-radio__icon {\n border-color: #ccc;\n}\n.are-radio.are-radio--checked.are-radio--disabled .are-radio__icon::before {\n background-color: rgba(0, 0, 0, 0.4);\n}\n.are-radio.focus-visible[data-focus-visible-added] {\n outline: none;\n}\n.are-radio.focus-visible[data-focus-visible-added] .are-radio__icon {\n border-color: #3a84ff;\n box-shadow: 0 0 0 2px rgba(7, 100, 255, 0.4);\n}";
styleInject(css$4);
function Radio(props) {
var checked = props.checked,
value = props.value,
disabled = props.disabled,
children = props.children,
onChange = props.onChange;
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
active = _useState2[0],
setActive = _useState2[1];
var _useContext = useContext(RadioCtx),
GROUPVALUE = _useContext.GROUPVALUE,
disabledGroup = _useContext.disabledGroup,
updateGroup = _useContext.updateGroup;
useEffect(function () {
setActive(checked === value || value === GROUPVALUE);
}, [checked, value, GROUPVALUE]);
var onClick = function onClick() {
if (disabled || disabledGroup) {
return;
}
if (!active && onChange) {
onChange(value);
}
if (!active) {
updateGroup(value);
}
};
return React.createElement("div", {
className: classnames('are-radio', {
'are-radio--checked': active,
'are-radio--disabled': disabled || disabledGroup
}),
tabIndex: 0,
role: "radio",
"aria-checked": active,
"aria-disabled": disabled || disabledGroup,
onClick: onClick,
onKeyPress: function onKeyPress() {}
}, React.createElement("span", {
className: "are-radio__icon"
}), children ? React.createElement("span", {
className: "are-radio__label"
}, children) : null);
}
Radio.Group = RadioGroup;
Radio.defaultProps = {
value: true
};
var css$5 = ".are-overlay {\n position: fixed;\n top: 0;\n left: 0;\n z-index: 1;\n display: none;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.2);\n}\n.are-overlay[data-visible=true] {\n display: block;\n}";
styleInject(css$5);
var Overlay = function Overlay(props) {
var className = props.className,
style = props.style,
visible = props.visible,
zIndex = props.zIndex,
children = props.children,
container = props.container,
onClose = props.onClose;
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
isRender = _useState2[0],
setIsRender = _useState2[1];
useEffect(function () {
if (visible) {
document.body.style.overflow = 'hidden';
setIsRender(true);
} else {
document.body.style.overflow = 'unset';
}
}, [visible]);
var mask = React.createElement("div", {
className: classnames('are-overlay', className),
style: _objectSpread2({
zIndex: zIndex
}, style),
key: 1,
"data-visible": visible,
role: "presentation",
"aria-hidden": true,
tabIndex: -1,
onClick: function onClick() {
if (onClose) {
onClose();
}
}
}, children);
var node = React.createElement(Animate, {
component: "",
showProp: "data-visible",
transitionName: "are-fade"
}, isRender ? mask : null);
return container ? ReactDOM.createPortal(node, container) : node;
};
Overlay.defaultProps = {
visible: false
};
/** 空格键盘码 */
var SPACE = 32;
/** ESC 键盘码 */
var ESC = 27;
/**
* 键盘按下事件
*/
function onKeyBoardEvent(event, keyCode, callback) {
if (event.keyCode === keyCode) {
callback();
}
}
var css$6 = ".are-element {\n display: inline-block;\n box-sizing: border-box;\n}\n.are-element--block {\n display: block;\n}\n.are-element--radius {\n border-radius: 4px;\n}\n.are-element--elevation-1 {\n box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);\n}\n.are-element--elevation-2 {\n box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);\n}\n.are-element--elevation-3 {\n box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.16);\n}\n.are-element--elevation-4 {\n box-shadow: 0 10px 32px 0 rgba(0, 0, 0, 0.2);\n}";
styleInject(css$6);
var Element = function Element(props) {
var _classnames;
var className = props.className,
style = props.style,
_props$tag = props.tag,
tag = _props$tag === void 0 ? 'div' : _props$tag,
radius = props.radius,
block = props.block,
isShow = props.isShow,
isRender = props.isRender,
elevation = props.elevation,
children = props.children,
other = _objectWithoutProperties(props, ["className", "style", "tag", "radius", "block", "isShow", "isRender", "elevation", "children"]);
var node = React.createElement(tag, _objectSpread2({
className: classnames('are-element', (_classnames = {}, _defineProperty(_classnames, "are-element--elevation-".concat(elevation), elevation !== 0), _defineProperty(_classnames, 'are-element--block', block), _defineProperty(_classnames, 'are-element--radius', radius), _classnames), className),
style: _objectSpread2(_objectSpread2({}, style), {}, {
display: isShow ? '' : 'none'
})
}, other), children);
return isRender ? node : null;
};
Element.defaultProps = {
elevation: 0,
isShow: true,
isRender: true,
block: true
};
var css$7 = ".are-text {\n display: inline-block;\n margin: 0;\n font-weight: normal;\n line-height: 1.5;\n vertical-align: middle;\n}\n.are-text--block {\n display: block;\n}\n.are-text--lh-1 {\n line-height: 1;\n}\n.are-text--lh-1-3 {\n line-height: 1.3;\n}\n.are-text--lv1 {\n font-size: 38px;\n}\n.are-text--lv2 {\n font-size: 30px;\n}\n.are-text--lv3 {\n font-size: 24px;\n}\n.are-text--lv4 {\n font-size: 20px;\n}\n.are-text--lv5 {\n font-size: 16px;\n}\n.are-text--lv6 {\n font-size: 14px;\n}\n.are-text--weight-2 {\n color: #5c5c5c;\n}\n.are-text--weight-3 {\n color: #767676;\n}\n.are-text--weight-4 {\n color: #8f8f8f;\n}\n.are-text--weight-5 {\n color: darkgray;\n}\n.are-text--weight-6 {\n color: #c2c2c2;\n}\n.are-text--bold {\n font-weight: bold;\n}";
styleInject(css$7);
var Text = function Text(props) {
var _classnames;
var _props$tag = props.tag,
tag = _props$tag === void 0 ? 'p' : _props$tag,
style = props.style,
spaceBottom = props.spaceBottom,
lineHeight = props.lineHeight,
level = props.level,
bold = props.bold,
block = props.block,
weight = props.weight,
children = props.children;
return React.createElement(tag, {
className: classnames('are-font', 'are-text', (_classnames = {
'are-text--lh-1': lineHeight === '1',
'are-text--lh-1-3': lineHeight === '1.3',
'are-text--bold': bold,
'are-text--block': block
}, _defineProperty(_classnames, "are-text--weight-".concat(weight), weight), _defineProperty(_classnames, "are-text--lv".concat(level), true), _classnames)),
style: _objectSpread2(_objectSpread2({}, style), {}, {
marginBottom: "".concat(spaceBottom, "px")
})
}, children);
};
Text.defaultProps = {
tag: 'p',
level: 6,
block: true
};
function _extends$3() { _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
var _ref$3 = /*#__PURE__*/React.createElement("path", {
d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z",
fillRule: "nonzero"
});
var SvgClose = function SvgClose(props) {
return /*#__PURE__*/React.createElement("svg", _extends$3({
viewBox: "0 0 24 24",
width: "1em",
height: "1em",
fillRule: "evenodd",
clipRule: "evenodd",
strokeLinejoin: "round",
strokeMiterlimit: 2
}, props), _ref$3);
};
var css$8 = ".are-modal-wrapper {\n position: fixed;\n top: 0;\n left: 0;\n z-index: 2;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n\n.are-modal {\n position: relative;\n top: 20%;\n margin: 0 auto;\n width: 540px;\n pointer-events: auto;\n background-color: #fff;\n border-radius: 4px;\n}\n.are-modal__header, .are-modal__footer {\n position: relative;\n padding: 16px;\n line-height: 1;\n}\n.are-modal__header {\n position: relative;\n}\n.are-modal__header--line {\n border-bottom: 1px solid #f1f1f1;\n}\n.are-modal__body {\n position: relative;\n padding: 16px;\n color: #292929;\n}\n.are-modal__footer {\n padding: 10px 16px;\n text-align: right;\n}\n.are-modal__footer--line {\n border-top: 1px solid #f1f1f1;\n}\n.are-modal__close {\n position: absolute;\n top: 0;\n right: 0;\n z-index: 1;\n display: inline-block;\n padding: 14px;\n font-size: 20px;\n line-height: 0;\n color: #8f8f8f;\n cursor: pointer;\n}";
styleInject(css$8);
var Modal = function Modal(props) {
var top = props.top,
visible = props.visible,
title = props.title,
footer = props.footer,
line = props.line,
className = props.className,
style = props.style,
lazyRender = props.lazyRender,
showClose = props.showClose,
children = props.children,
onClose = props.onClose,
onClosed = props.onClosed; // lazyRender
var _useState = useState(!lazyRender),
_useState2 = _slicedToArray(_useState, 2),
isRender = _useState2[0],
setIsRender = _useState2[1];
useEffect(function () {
if (visible) {
setIsRender(true);
}
}, [visible]);
var handlerClose = function handlerClose() {
if (onClose) {
onClose();
}
};
return React.createElement(Animate, {
className: "are-modal-wrapper",
transitionName: "are-zoom",
showProp: "isShow",
component: "div",
onEnd: function onEnd() {
if (onClosed && !visible) {
onClosed();
}
}
}, isRender ? React.createElement(Element, {
key: "modal-node",
className: classnames('are-modal', className),
role: "presentation",
isShow: visible,
elevation: 2,
onClick: function onClick(e) {
e.stopPropagation();
},
style: _objectSpread2({
top: top
}, style)
}, React.createElement(Element, {
className: "are-modal__close",
role: "button",
"aria-label": "close",
tag: "span",
tabIndex: 0,
isRender: showClose,
onClick: handlerClose,
onKeyPress: function onKeyPress(e) {
return onKeyBoardEvent(e, SPACE, handlerClose);
}
}, React.createElement(SvgClose, {
fill: "currentColor"
})), React.createElement(Element, {
className: classnames('are-modal__header', {
'are-modal__header--line': line
}),
isRender: Boolean(title)
}, typeof title === 'string' ? React.createElement(Text, {
tag: "h3",
lineHeight: "1",
level: 5
}, title) : title), React.createElement("section", {
className: "are-modal__body"
}, children), footer ? React.createElement("footer", {
className: classnames('are-modal__footer', {
'are-modal__footer--line': line
})
}, footer) : null) : null);
};
Modal.defaultProps = {
visible: false,
lazyRender: true,
showClose: true,
line: false
};
var ModalWrapper = function ModalWrapper(props) {
var visible = props.visible,
zIndex = props.zIndex,
lazyRender = props.lazyRender,
children = props.children,
container = props.container,
maskClosable = props.maskClosable,
escClosable = props.escClosable,
onClose = props.onClose,
other = _objectWithoutProperties(props, ["visible", "zIndex", "lazyRender", "children", "container", "maskClosable", "escClosable", "onClose"]);
/** ESC 关闭 Modal */
useEffect(function () {
var onKeyPressEsc = function onKeyPressEsc(e) {
if (e.keyCode === ESC && onClose) {
onClose();
}
};
if (escClosable) {
document.addEventListener('keydown', onKeyPressEsc);
}
return function () {
document.removeEventListener('keydown', onKeyPressEsc);
};
}, [escClosable, onClose]);
return ReactDOM.createPortal(React.createElement("div", {
style: {
position: 'fixed',
zIndex: typeof zIndex === 'number' ? zIndex : 1
}
}, React.createElement(Modal, Object.assign({
visible: visible,
lazyRender: lazyRender,
onClose: onClose
}, other), children), React.createElement(Overlay, {
visible: visible,
onClose: maskClosable ? onClose : undefined
})), container || document.body);
};
ModalWrapper.defaultProps = {
visible: false,
lazyRender: true,
maskClosable: true,
escClosable: true
};
/**
* 处理函数返回值中的 Promise
*/
function handlerPromise(maybePromise, beforeResolve) {
if (!maybePromise || !maybePromise.then) {
return Promise.reject();
}
if (beforeResolve) {
beforeResolve();
}
return Promise.resolve(maybePromise);
}
var css$9 = ".are-dialog {\n width: 320px;\n min-width: 240px;\n box-sizing: border-box;\n}\n.are-dialog__icon {\n font-size: 24px;\n}\n.are-dialog__footer {\n text-align: right;\n}";
styleInject(css$9);
var Dialog = function Dialog(props) {
var visible = props.visible,
title = props.title,
content = props.content,
zIndex = props.zIndex,
confirmText = props.confirmText,
cancelText = props.cancelText,
footer = props.footer,
showClose = props.showClose,
maskClosable = props.maskClosable,
onCancel = props.onCancel,
onConfirm = props.onConfirm,
onClose = props.onClose,
_onClosed = props.onClosed,
container = props.container,
cancelButtonProps = props.cancelButtonProps,
confirmButtonProps = props.confirmButtonProps;
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
loading = _useState2[0],
setLoading = _useState2[1];
var close = function close() {
onClose();
};
var handlerConfirm = function handlerConfirm() {
if (onConfirm) {
var result = onConfirm();
handlerPromise(result, function () {
return setLoading(true);
}).then(function () {
return close();
}, function () {
return close();
});
} else {
close();
}
};
return React.createElement(ModalWrapper, {
className: "are-dialog",
visible: visible,
showClose: showClose,
maskClosable: maskClosable,
zIndex: zIndex,
onClose: close,
onClosed: function onClosed() {
_onClosed();
setLoading(false);
},
footer: footer || [cancelText ? React.createElement(Button, Object.assign({
key: "cancel"
}, cancelButtonProps, {
onClick: function onClick() {
if (onCancel) {
onCancel();
}
close();
}
}), cancelText) : null, confirmText ? React.createElement(Button, Object.assign({
key: "confirm",
type: "primary"
}, confirmButtonProps, {
loading: loading,
onClick: handlerConfirm
}), confirmText) : null],
container: container
}, React.createElement(Text, {
className: "are-title",
tag: "h3",
level: "4",
spaceBottom: 20,
bold: true
}, title), React.createElement(Text, {
tag: "div",
spaceBottom: 10,
weight: 4
}, content));
};
var reducer = function reducer(state, action) {
switch (action.type) {
case 'add':
return _objectSpread2(_objectSpread2({}, state), {}, _defineProperty({}, action.payload.id, action.payload));
case 'update':
return _objectSpread2(_objectSpread2({}, state), {}, _defineProperty({}, action.payload.id, action.payload));
case 'remove':
return omit$1(state, [action.id]);
default:
return state;
}
};
var DialogWrapper = function DialogWrapper(_ref, ref) {
var holder = _ref.holder;
var _useReducer = useReducer(reducer, {}),
_useReducer2 = _slicedToArray(_useReducer, 2),
state = _useReducer2[0],
dispatch = _useReducer2[1];
var add = useCallback(function (val) {
dispatch({
type: 'add',
payload: _objectSpread2(_objectSpread2({}, val), {}, {
visible: true
})
});
}, []);
var update = useCallback(function (val) {
if (!hasOwn(state, val.id)) {
return;
}
var item = state[val.id];
dispatch({
type: 'update',
payload: _objectSpread2(_objectSpread2({}, item), val)
});
}, [state]);
var remove = function remove(id) {
if (!hasOwn(state, id)) {
return;
}
dispatch({
type: 'remove',
id: id
});
};
var closeById = useCallback(function (id) {
if (!hasOwn(state, id)) {
return;
}
dispatch({
type: 'add',
payload: _objectSpread2(_objectSpread2({}, state[id]), {}, {
visible: false
})
});
}, [state]);
var clearAll = useCallback(function () {
Object.keys(state).forEach(function (id) {
closeById(id);
});
}, [state, closeById]);
useImperativeHandle(ref, function () {
return {
add: add,
update: update,
clearAll: clearAll,
close: closeById
};
}, [closeById, clearAll, add, update]);
var render = React.createElement(React.Fragment, null, Object.keys(state).map(function (key) {
var _state$key = state[key],
id = _state$key.id,
visible = _state$key.visible,
_onCancel = _state$key.onCancel,
_onClose = _state$key.onClose,
_props = _objectWithoutProperties(_state$key, ["id", "visible", "onCancel", "onClose"]);
return React.createElement(Dialog, Object.assign({
key: id,
visible: visible
}, _props, {
onCancel: function onCancel() {
if (_onCancel) {
_onCancel();
}
},
onClose: function onClose() {
closeById(id);
if (_onClose) {
_onClose();
}
},
onClosed: function onClosed() {
remove(id);
},
container: holder
}));
}));
return holder ? ReactDOM.createPortal(render, holder) : render;
};
var DialogWrapper$1 = forwardRef(DialogWrapper);
/** Create DOM */
var createContainer = function createContainer(id) {
var className = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
var callback = arguments.length > 2 ? arguments[2] : undefined;
var container = document.getElementById(id);
if (container) {
return container;
}
container = document.createElement('div');
container.className = className;
container.id = id;
if (callback) {
callback(container);
}
document.body.appendChild(container);
return container;
};
function createAlias(instance) {
var aliasMethods = {
open: function open(value) {
instance().add(value);
},
update: function update(value) {
instance().update(value);
},
clear: function clear() {
instance().clearAll();
return aliasMethods;
},
close: function close(id) {
instance().close(id);
return aliasMethods;
}
};
return aliasMethods;
}
var MODAL_CONTAINER_ID = 'ARE-VISUAL-MODAL';
var instance = null;
function init() {
var container = document.getElementById(MODAL_CONTAINER_ID);
if (!instance || !container) {
var holder = createContainer(MODAL_CONTAINER_ID);
ReactDOM.render(React.createElement(DialogWrapper$1, {
ref: function ref(func) {
instance = func;
},
holder: holder
}), holder);
}
return instance;
}
function callInstance() {
if (!instance) {
return init();
}
return instance;
}
init();
var dialog = createAlias(callInstance);
function useDialog() {
var instance = useRef(null);
var DialogHolder = function DialogHolder() {
return React.createElement(DialogWrapper$1, {
ref: instance,
holder: createContainer(MODAL_CONTAINER_ID)
});
};
return [createAlias(function () {
return instance.current;
}), DialogHolder];
}
function _extends$4() { _extends$4 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
var _ref$4 = /*#__PURE__*/React.createElement("path", {
d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
});
var SvgErr = function SvgErr(props) {
return /*#__PURE__*/React.createElement("svg", _extends$4({
viewBox: "0 0 24 24",
width: "1em",
height: "1em",
fillRule: "evenodd",
clipRule: "evenodd",
strokeLinejoin: "round",
strokeMiterlimit: 2
}, props), _ref$4);
};
function _extends$5() { _extends$5 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
var _ref$5 = /*#__PURE__*/React.createElement("path", {
d: "M1.176 19.72a1.302 1.302 0 001.127 1.958h19.393a1.304 1.304 0 001.128-1.958L13.13 2.972a1.309 1.309 0