@authing/react-ui-components 3.0.1-alpha → 3.0.1-beta.0

package/es/Guard/style/index.less

@@ -0,0 +1,615 @@
+// @import '~antd/lib/style/mixins/index.less';
+@import '../../node_modules/antd/lib/style/mixins/index.less';
+
+*[class*='authing-'] {
+  @import '../../node_modules/antd/lib/style/core/global.less';
+}
+
+.authing-g2-render-module {
+  --sidePadding: 38px;
+  --containerWidth: 456px;
+}
+.authing-g2-render-module-modal {
+  --containerWidth: 456px;
+}
+@media only screen and (max-width: 450px) {
+  .authing-g2-render-module {
+    width: 100%;
+    --sidePadding: 8px;
+    --containerWidth: 100%;
+  }
+  .authing-g2-render-module-modal {
+    width: 100%;
+    --containerWidth: 100%;
+  }
+  .g2-view-container {
+    box-shadow: initial !important;
+    height: 100% !important;
+  }
+}
+
+// 侵入 core 的样式代码，guard view 皮肤
+.g2-view-container {
+  font-family: sans-serif;
+  box-shadow: 0px 0px 60px rgba(84, 89, 104, 0.05);
+  background: #ffffff;
+  display: flex;
+  flex-direction: column;
+  width: var(--containerWidth);
+  min-height: 610px;
+  box-sizing: border-box;
+  padding: 16px;
+  border-radius: 8px;
+  position: relative;
+  .none {
+    display: none;
+  }
+  .g2-view-back {
+    margin-top: 26px;
+    padding-left: var(--sidePadding);
+    cursor: pointer;
+    font-size: 14px;
+    color: #878a95;
+    .g2-view-back-hover {
+      &:hover {
+        color: #396aff;
+      }
+      .g2-icon {
+        margin-right: 8px;
+        &.g2-view-back-icon {
+          font-size: 22px;
+          margin-right: 5px;
+          transform: translateY(2px);
+        }
+      }
+    }
+  }
+  .g2-mfa-content,
+  .g2-mfa-method {
+    margin: 0 !important;
+    padding: 0 var(--sidePadding) !important;
+  }
+  .g2-view-header {
+    user-select: none;
+    padding: 24px var(--sidePadding) 0;
+    .icon {
+      width: 48px;
+      height: 48px;
+      border-radius: 4px;
+      margin-bottom: 8px;
+    }
+    .title {
+      color: #282d3c;
+      font-weight: 600;
+      font-size: 24px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .title-explain {
+      font-weight: 300;
+      font-size: 14px;
+      color: #545968;
+    }
+    margin-bottom: 24px;
+  }
+
+  .g2-view-tabs {
+    padding: 0 var(--sidePadding);
+
+    .authing-ant-tabs-tab {
+      color: #878a95;
+      &:hover {
+        color: #282d3c;
+      }
+    }
+  }
+
+  .authing-g2-submit-button {
+    width: calc(100% - 4px);
+    border-radius: 4px;
+    height: 42px;
+    margin: 0 2px;
+    margin-top: 16px;
+    &.shaking {
+      animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+    }
+    @keyframes shake {
+      10%,
+      90% {
+        transform: translate3d(-1px, 0, 0);
+      }
+
+      20%,
+      80% {
+        transform: translate3d(2px, 0, 0);
+      }
+
+      30%,
+      50%,
+      70% {
+        transform: translate3d(-4px, 0, 0);
+      }
+
+      40%,
+      60% {
+        transform: translate3d(4px, 0, 0);
+      }
+    }
+  }
+}
+
+.authing-g2-button-group {
+  background: #eff2f6;
+  border-radius: 8px;
+  padding: 4px 2px;
+  margin-bottom: 16px;
+  width: fit-content;
+
+  .authing-ant-radio-button-wrapper {
+    margin: 0 2px;
+    border-radius: 8px;
+    color: #545968;
+    cursor: pointer;
+    border: none;
+    background: none;
+    height: auto;
+    &.authing-ant-radio-button-wrapper-checked {
+      color: #396aff;
+      background: #ffffff;
+    }
+    &:not(:first-child)::before {
+      display: none;
+    }
+  }
+}
+
+.authing-g2-input-form {
+  padding: 0 2px;
+  margin-bottom: 16px;
+  // &.submit-form {
+  //   margin-top: 32px;
+  // }
+  .label-title {
+    padding: 0 0 8px;
+  }
+  // .authing-ant-form-item-explain {
+  //   // display: none;
+  //   transition: 0.2s all;
+  //   position: absolute;
+  //   user-select: none;
+  //   background: white;
+  //   left: 10px;
+  //   top: -15px;
+  //   z-index: 100;
+  //   padding: 4px 8px;
+  //   border-radius: 4px;
+  //   box-shadow: #eeeff1;
+  // }
+}
+.authing-g2-input-form {
+  .authing-g2-select {
+    &:hover {
+      border-color: #eeeff1 !important;
+      background: #eeeff1;
+    }
+    border: 1px solid #f5f6f7;
+    border-radius: 4px;
+    .authing-ant-select-selector {
+      outline: 0;
+      border-color: #f5f6f7 !important;
+      height: 100% !important;
+      background-color: #f5f6f7;
+      &:hover {
+        border-color: #eeeff1 !important;
+        background: #eeeff1;
+      }
+    }
+    // focus
+    &.authing-ant-select-focused {
+      border-color: #618eff;
+      border-right-width: 1px !important;
+      outline: 0;
+      box-shadow: 0 0 0 2px rgba(57, 106, 255, 0.2);
+      .authing-ant-select-selector {
+        border-color: #eeeff1 !important;
+        background: #fff !important;
+      }
+    }
+  }
+
+  // .authing-ant-select:not(.authing-ant-select-customize-input)
+  //   .authing-ant-select-selector {
+  //   border-color: #f5f6f7;
+  // }
+  &.authing-ant-form-item-has-error {
+    .authing-g2-select {
+      &:hover {
+        border-color: #eeeff1 !important;
+        background: #eeeff1;
+      }
+      // focus
+      &.authing-ant-select-focused {
+        .authing-ant-select-selector {
+          border-color: #eeeff1 !important;
+        }
+        border-color: #ff4d4f;
+        border-right-width: 1px !important;
+        outline: 0;
+        box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2);
+        .authing-ant-select-selector {
+          background: #fff !important;
+        }
+      }
+    }
+  }
+}
+
+.authing-g2-input {
+  border: 1px solid #f5f6f7;
+  // height: 46px;
+  border-radius: 4px;
+  background: #f5f6f7;
+
+  &:hover {
+    background-color: #eeeff1;
+  }
+  &:focus {
+    background: #ffffff !important;
+    border-color: #618eff;
+  }
+
+  input {
+    // 通过这个方式 hack 浏览器自动填充：
+    // 自动填充的浏览器可以说罪恶滔天，钉死在 mdn 的耻辱柱上：https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill
+    // 下方的 focused 同样需要这样处理
+    font-size: 14px;
+    height: 0;
+    background-color: #f5f6f7;
+    padding: 1em 0.5em !important;
+    background-clip: content-box !important;
+    &::placeholder,
+    &::-webkit-input-placeholder {
+      // color: #a7a7a7;
+      color: #c8c9cc;
+    }
+  }
+
+  // affix-wrapper 特殊处理 hover
+  &.authing-ant-input-affix-wrapper:hover {
+    border-color: #eeeff1;
+    background: #eeeff1;
+    // border-color: #618eff;
+    .authing-ant-input {
+      background: #eeeff1;
+    }
+  }
+
+  // focus
+  &.authing-ant-input-affix-wrapper-focused {
+    background: #ffffff !important;
+    border-color: #618eff;
+    input {
+      height: 0;
+      padding: 1em 0.5em !important;
+      background-clip: content-box !important;
+      &::placeholder,
+      &::-webkit-input-placeholder {
+        color: #a7a7a7;
+      }
+    }
+  }
+
+  // 适配图形验证码
+  &.add-after {
+    border: none;
+    .authing-ant-input-group {
+      .authing-ant-input,
+      .authing-ant-input-group-addon {
+        border-radius: 4px;
+        height: 46px;
+      }
+    }
+  }
+
+  // 适配数字输入框
+  &.authing-ant-input-number {
+    width: 100%;
+    input {
+      padding: 1.4em 0.5em !important;
+    }
+    .authing-ant-input-number-handler-wrap {
+      display: none;
+    }
+  }
+  .g2-captcha-code-image {
+    min-width: 100px;
+  }
+}
+
+.g2-graphic-verify-code {
+  display: flex;
+  justify-content: space-between;
+
+  .authing-ant-input {
+    width: 55%;
+  }
+
+  .g2-captcha-code-image {
+    min-width: 100px;
+    border-radius: 4px;
+    border: 1px solid #eff2f6 !important;
+  }
+}
+
+// input error 的情况
+.authing-ant-form-item-has-error {
+  .authing-ant-input-affix-wrapper:hover {
+    border-color: #ff4d4f !important;
+  }
+
+  // focus
+  .authing-ant-input-affix-wrapper-focused {
+    border-color: #ff4d4f !important;
+  }
+}
+
+.authing-g2-send-code {
+  color: #396aff;
+  cursor: pointer;
+  &.sending {
+    cursor: not-allowed;
+    filter: opacity(0.5);
+  }
+}
+
+.g2-tips-line {
+  display: flex;
+  font-size: 14px;
+  padding: 0 var(--sidePadding);
+  height: 22px;
+  .link-like {
+    color: #396aff;
+    cursor: pointer;
+    transition: all 0.3s;
+    &:hover {
+      color: #557fff;
+    }
+    &:active {
+      color: #254cd9;
+    }
+  }
+  .gray {
+    color: #999;
+  }
+  .go-to-register {
+    margin-left: auto;
+  }
+  .back-to-login {
+    margin-left: auto;
+  }
+  .touch-tip {
+    color: #d4d6dc;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    &:hover {
+      color: #396aff;
+    }
+  }
+}
+.g2-init-setting-loading {
+  width: var(--containerWidth);
+  min-height: 610px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0px 0px 60px rgba(84, 89, 104, 0.05);
+}
+
+.g2-questions {
+  .authing-ant-upload-list-picture-card-container {
+    height: 56px;
+    width: 56px;
+    .authing-ant-upload-list-item-list-type-picture-card {
+      padding: 4px;
+    }
+  }
+  // authing-ant-upload authing-ant-upload-select
+  .authing-ant-upload-select-picture-card {
+    border-radius: 4px;
+    height: 56px;
+    width: 56px;
+    border: none;
+    background: #f5f6f7;
+    transition: 0.2s all;
+    margin: unset;
+    &:hover {
+      background: #eeeff1;
+    }
+  }
+  .authing-g2-questions-upload-self {
+    .anticon-plus {
+      font-size: 18px;
+      color: #545968;
+    }
+  }
+}
+
+.g2-questions-send-success-page {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-height: 610px;
+  .plate {
+    margin-bottom: 14px;
+  }
+  .title {
+    color: #282d3c;
+    font-weight: 500;
+    font-size: 16px;
+    margin-bottom: 10px;
+  }
+  .message {
+    font-size: 14px;
+    color: #545968;
+    margin-bottom: 32px;
+    text-align: center;
+  }
+  .timer-tip {
+    font-size: 14px;
+    color: #545968;
+    margin-top: 12px;
+  }
+}
+
+.g2-change-language-container {
+  margin: auto 0;
+  padding-top: 10px;
+  text-align: center;
+  .g2-change-language-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+    font-size: 14px;
+    color: #878a95;
+    cursor: pointer;
+    margin: auto;
+    transition: 0.2s all;
+    &:hover {
+      color: #282d3c;
+    }
+    .g2-change-language-text {
+      margin-left: 5px;
+    }
+  }
+}
+.authing-g2-render-module-modal {
+  width: var(--containerWidth);
+  .authing-ant-modal-content {
+    width: var(--containerWidth);
+    border-radius: 8px;
+    margin: auto;
+  }
+  .authing-ant-modal-body {
+    padding: 0;
+  }
+  .authing-ant-modal-close {
+    left: 0;
+    border-radius: 4px;
+    transform: scale(0.5);
+    color: #d4d6dc;
+    transition: 0.2s all;
+    width: 56px;
+    height: 56px;
+    &:hover {
+      background: #eeeff1;
+      color: #878a95;
+    }
+
+    .g2-modal-close {
+      font-size: 36px;
+      margin-top: 10px;
+    }
+  }
+  .authing-ant-modal-footer {
+    display: none;
+  }
+}
+
+.g2-send-code-input-col {
+  /* Chrome, Safari, Edge, Opera */
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  /* Firefox */
+  input[type='number'] {
+    -moz-appearance: textfield;
+  }
+}
+
+*[class*='authing-'].authing-ant-input-prefix {
+  margin-right: 0px;
+}
+
+// form 必填 icon 后置
+.authing-g2-form-required-item-icon-after {
+  label.authing-ant-form-item-required:not(.authing-ant-form-item-required-mark-optional)::before {
+    display: none;
+  }
+
+  label.authing-ant-form-item-required:not(.authing-ant-form-item-required-mark-optional)::after {
+    display: inline-block;
+    margin-right: 4px;
+    margin-top: 4px;
+    color: #ff4d4f;
+    font-size: 14px;
+    font-family: SimSun, sans-serif;
+    line-height: 1;
+    content: '*';
+  }
+}
+
+.authing-ant-tabs-tab-btn {
+  font-weight: 400 !important;
+}
+
+.authing-g2-questions-textarea {
+  > textarea {
+    resize: none;
+    background: #f5f6f7;
+    border: 1px solid #f5f6f7;
+    &:hover {
+      border-color: #eeeff1 !important;
+      background-color: #eeeff1;
+    }
+    &:focus {
+      background: #fff;
+    }
+    // &:focus{
+
+    // }
+  }
+}
+
+.authing-g2-question-option {
+  background: none !important;
+  &.authing-g2-question-option-active {
+    color: #396aff;
+  }
+  &:hover {
+    background: #f5f6f7 !important;
+  }
+}
+strong {
+  font-weight: normal !important;
+}
+
+.authing-g2-completeInfo-form {
+  input:hover {
+    border-color: #eeeff1 !important;
+  }
+  .authing-g2-input {
+    &:hover {
+      border-color: #eeeff1;
+    }
+    &.authing-ant-picker-focused {
+      background: #fff;
+    }
+  }
+}
+.authing-ant-select-selector {
+  padding: 3px 11px !important;
+  .authing-ant-select-selection-item {
+    line-height: 30px !important;
+  }
+  .authing-ant-select-selection-search {
+    display: flex;
+    align-items: center;
+  }
+}

package/es/IconFont/iconfont.d.ts

@@ -0,0 +1 @@
+export {};

package/es/IconFont/iconfont.js

@@ -0,0 +1,66 @@
+import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
+import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
+
+/* eslint-disable no-sequences */
+
+/* eslint-disable @typescript-eslint/no-use-before-define */
+
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+// @ts-nocheck
+
+/**
+ * !!!!!!!!!!!! 注意注意！！！！！！！！！！！！！
+ *
+ * 只要替换 svgStr 中的字符串即可，为了兼容 SSR！！！！！！
+ *
+ */
+import { svgStr } from './svg';
+
+var init = function init(a) {
+  var _context;
+
+  var c,
+      _t,
+      l,
+      e,
+      i,
+      _o,
+      h = svgStr,
+      m = (m = document.getElementsByTagName('script'))[m.length - 1].getAttribute('data-injectcss');
+
+  if (m && !a.__iconfont__svg__cssinject__) {
+    a.__iconfont__svg__cssinject__ = !0;
+
+    try {
+      document.write('<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>');
+    } catch (a) {
+      console && console.log(a);
+    }
+  }
+
+  function n() {
+    i || (i = !0, l());
+  }
+
+  ;
+  c = function c() {
+    var a, c, t;
+    (t = document.createElement('div')).innerHTML = h, h = null, (c = t.getElementsByTagName('svg')[0]) && (c.setAttribute('aria-hidden', 'true'), c.style.position = 'absolute', c.style.width = 0, c.style.height = 0, c.style.overflow = 'hidden', a = c, (t = document.body).firstChild ? (c = t.firstChild).parentNode.insertBefore(a, c) : t.appendChild(a));
+  }, document.addEventListener ? ~_indexOfInstanceProperty(_context = ['complete', 'loaded', 'interactive']).call(_context, document.readyState) ? _setTimeout(c, 0) : (_t = function t() {
+    document.removeEventListener('DOMContentLoaded', _t, !1), c();
+  }, document.addEventListener('DOMContentLoaded', _t, !1)) : document.attachEvent && (l = c, e = a.document, i = !1, (_o = function o() {
+    try {
+      e.documentElement.doScroll('left');
+    } catch (a) {
+      return void _setTimeout(_o, 50);
+    }
+
+    n();
+  })(), e.onreadystatechange = function () {
+    'complete' === e.readyState && (e.onreadystatechange = null, n());
+  });
+};
+
+if (typeof window !== 'undefined' && typeof window.document !== 'undefined') {
+  init(window);
+}

package/es/IconFont/index.d.ts

@@ -0,0 +1,7 @@
+import React, { FC } from 'react';
+import './iconfont';
+export declare const IconFont: FC<{
+    type: string;
+    style?: React.CSSProperties;
+    className?: string;
+}>;

package/es/IconFont/index.js

@@ -0,0 +1,28 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React from 'react';
+import { getClassnames } from '../_utils';
+import './iconfont';
+export var IconFont = function IconFont(_ref) {
+  var type = _ref.type,
+      style = _ref.style,
+      className = _ref.className;
+  return /*#__PURE__*/React.createElement("svg", {
+    style: _objectSpread({}, style),
+    className: getClassnames(['g2-icon', className])
+  }, /*#__PURE__*/React.createElement("use", {
+    xlinkHref: "#".concat(type)
+  }));
+};

package/es/IconFont/style/css.js

@@ -0,0 +1 @@
+import './index.css';

package/es/IconFont/style/index.css

@@ -0,0 +1 @@
+.g2-icon{width:1em;height:1em;vertical-align:-.15em;fill:currentColor}