@teamix/pro 1.6.0-beta.5 → 1.6.0-beta.6

package/es/actions/index.d.ts

@@ -1,15 +1,15 @@
-import React, { ReactNode } from 'react';
+import { TooltipProps } from '@alicloudfe/components/types/balloon';
 import { ButtonProps } from '@alicloudfe/components/types/button';
 import { MenuButtonProps } from '@alicloudfe/components/types/menu-button';
-import { TooltipProps } from '@alicloudfe/components/types/balloon';
-import { LinkAction } from './link';
-import { RequestAction } from './request';
+import React, { ReactNode } from 'react';
 import { DialogAction } from './dialog';
 import { DialogFormAction } from './dialog-form';
-import { DialogTableAction } from './dialog-table';
 import { DialogInfoAction } from './dialog-info';
-import { PopConfirmAction } from './pop-confirm';
+import { DialogTableAction } from './dialog-table';
 import './index.scss';
+import { LinkAction } from './link';
+import { PopConfirmAction } from './pop-confirm';
+import { RequestAction } from './request';
 export declare type ProActionConfig = ({
     type: 'dialog-form' | 'drawer-form';
 } & DialogFormAction) | ({

package/es/actions/index.js

@@ -17,28 +17,28 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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 _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 _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; }
-import React from 'react';
-import cls from 'classnames';
-import { Button, MenuButton, Menu, Divider, Balloon } from '@alicloudfe/components';
+import { Balloon, Button, Divider, Menu, MenuButton } from '@alicloudfe/components';
 import Icon from '@teamix/icon';
-import { getTargetValue, getMessage, usePrefixCls } from '@teamix/utils';
-import { useLinkAction } from './link';
-import { useRequestAction } from './request';
-import { useDialogAction } from './dialog';
+import { getMessage, getTargetValue, usePrefixCls } from '@teamix/utils';
+import cls from 'classnames';
+import React from 'react';
 import { useConfirmAction } from './confirm';
 import { useDangerConfirmAction } from './danger-confirm';
-import { useNoticeAction } from './notice';
-import { useErrorAction } from './error';
+import { useDangerPopConfirmAction } from './danger-pop-confirm';
+import { useDialogAction } from './dialog';
 import { useDialogFormAction } from './dialog-form';
-import { useDialogTableAction } from './dialog-table';
 import { useDialogInfoAction } from './dialog-info';
+import { useDialogTableAction } from './dialog-table';
 import { useDrawerAction } from './drawer';
 import { useDrawerFormAction } from './drawer-form';
-import { useDrawerTableAction } from './drawer-table';
 import { useDrawerInfoAction } from './drawer-info';
-import { usePopConfirmAction } from './pop-confirm';
-import { useDangerPopConfirmAction } from './danger-pop-confirm';
+import { useDrawerTableAction } from './drawer-table';
+import { useErrorAction } from './error';
 import './index.scss';
+import { useLinkAction } from './link';
+import { useNoticeAction } from './notice';
+import { usePopConfirmAction } from './pop-confirm';
+import { useRequestAction } from './request';
 var RegistedActions = new Map();
 export function registerActionHandler(id, extendActionId, defaultConfig) {
   RegistedActions.set(id, {
@@ -114,6 +114,7 @@ var buttonContent = function buttonContent(content, iconType, iconSize, context)
     return renderedContent;
   }
   return [/*#__PURE__*/React.createElement(Icon, {
+    className: 'teamix-pro-action-prefix-icon',
     type: iconType,
     size: iconSize,
     key: "teamix-button-icon"
@@ -123,7 +124,7 @@ export var ProActionButton = function ProActionButton(props) {
   var config = props.config,
     icon = props.icon,
     _props$iconSize = props.iconSize,
-    iconSize = _props$iconSize === void 0 ? 'medium' : _props$iconSize,
+    iconSize = _props$iconSize === void 0 ? 'small' : _props$iconSize,
     _props$type = props.type,
     type = _props$type === void 0 ? 'primary' : _props$type,
     context = props.context,
@@ -204,7 +205,7 @@ var ProActionMenuButtonItem = function ProActionMenuButtonItem(props) {
   if (dataTeamixSpm) {
     buttonProps['data-teamix-spm'] = dataTeamixSpm;
   }
-  var content = buttonContent(children, icon, undefined, context);
+  var content = buttonContent(children, icon, 'small', context);
   var baseToolTipProps = _objectSpread({
     triggerType: 'hover',
     align: 't',
@@ -252,7 +253,8 @@ function renderCommonActionButtonMenuItem(action, key, context, dataTeamixSpm) {
 }
 export var ProActionMenuButton = function ProActionMenuButton(props) {
   var icon = props.icon,
-    iconSize = props.iconSize,
+    _props$iconSize2 = props.iconSize,
+    iconSize = _props$iconSize2 === void 0 ? 'small' : _props$iconSize2,
     label = props.label,
     actions = props.actions,
     children = props.children,

package/es/actions/index.scss

@@ -139,3 +139,7 @@
     background: var(--drawer-bg);
   }
 }
+
+.teamix-pro-action-prefix-icon {
+  margin-right: 4px
+}

package/es/form/Components/FormItem2/animation.scss

@@ -0,0 +1,72 @@
+@-webkit-keyframes antShowHelpIn {
+  0% {
+    -webkit-transform: translateY(-5px);
+    transform: translateY(-5px);
+    opacity: 0;
+  }
+
+  to {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.#{$form-item-cls}-help-appear,
+.#{$form-item-cls}-help-enter {
+  -webkit-animation-duration: 0.3s;
+  animation-duration: 0.3s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+  -webkit-animation-play-state: paused;
+  animation-play-state: paused;
+}
+
+.#{$form-item-cls}-help-appear.#{$form-item-cls}-help-appear-active,
+.#{$form-item-cls}-help-enter.#{$form-item-cls}-help-enter-active {
+  -webkit-animation-name: antShowHelpIn;
+  animation-name: antShowHelpIn;
+  -webkit-animation-play-state: running;
+  animation-play-state: running;
+}
+
+.#{$form-item-cls}-help-appear,
+.#{$form-item-cls}-help-enter {
+  opacity: 0;
+}
+
+.#{$form-item-cls}-help-appear,
+.#{$form-item-cls}-help-enter {
+  -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
+  animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+@keyframes antShowHelpIn {
+  0% {
+    -webkit-transform: translateY(-5px);
+    transform: translateY(-5px);
+    opacity: 0;
+  }
+
+  to {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes antShowHelpOut {
+  to {
+    -webkit-transform: translateY(-5px);
+    transform: translateY(-5px);
+    opacity: 0;
+  }
+}
+
+@keyframes antShowHelpOut {
+  to {
+    -webkit-transform: translateY(-5px);
+    transform: translateY(-5px);
+    opacity: 0;
+  }
+}

package/es/form/Components/FormItem2/grid.scss

@@ -0,0 +1,173 @@
+.#{$form-item-cls} {
+  .#{$form-item-cls}-item-col-24 {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 100%;
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+
+  .#{$form-item-cls}-item-col-23 {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 95.83333333%;
+    flex: 0 0 95.83333333%;
+    max-width: 95.83333333%;
+  }
+
+  .#{$form-item-cls}-item-col-22 {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 91.66666667%;
+    flex: 0 0 91.66666667%;
+    max-width: 91.66666667%;
+  }
+
+  .#{$form-item-cls}-item-col-21 {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 87.5%;
+    flex: 0 0 87.5%;
+    max-width: 87.5%;
+  }
+
+  .#{$form-item-cls}-item-col-20 {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 83.33333333%;
+    flex: 0 0 83.33333333%;
+    max-width: 83.33333333%;
+  }
+
+  .#{$form-item-cls}-item-col-19 {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 79.16666667%;
+    flex: 0 0 79.16666667%;
+    max-width: 79.16666667%;
+  }
+
+  .#{$form-item-cls}-item-col-18 {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 75%;
+    flex: 0 0 75%;
+    max-width: 75%;
+  }
+
+  .#{$form-item-cls}-item-col-17 {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 70.83333333%;
+    flex: 0 0 70.83333333%;
+    max-width: 70.83333333%;
+  }
+
+  .#{$form-item-cls}-item-col-16 {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 66.66666667%;
+    flex: 0 0 66.66666667%;
+    max-width: 66.66666667%;
+  }
+
+  .#{$form-item-cls}-item-col-15 {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 62.5%;
+    flex: 0 0 62.5%;
+    max-width: 62.5%;
+  }
+
+  .#{$form-item-cls}-item-col-14 {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 58.33333333%;
+    flex: 0 0 58.33333333%;
+    max-width: 58.33333333%;
+  }
+
+  .#{$form-item-cls}-item-col-13 {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 54.16666667%;
+    flex: 0 0 54.16666667%;
+    max-width: 54.16666667%;
+  }
+
+  .#{$form-item-cls}-item-col-12 {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+
+  .#{$form-item-cls}-item-col-11 {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 45.83333333%;
+    flex: 0 0 45.83333333%;
+    max-width: 45.83333333%;
+  }
+
+  .#{$form-item-cls}-item-col-10 {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 41.66666667%;
+    flex: 0 0 41.66666667%;
+    max-width: 41.66666667%;
+  }
+
+  .#{$form-item-cls}-item-col-9 {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 37.5%;
+    flex: 0 0 37.5%;
+    max-width: 37.5%;
+  }
+
+  .#{$form-item-cls}-item-col-8 {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 33.33333333%;
+    flex: 0 0 33.33333333%;
+    max-width: 33.33333333%;
+  }
+
+  .#{$form-item-cls}-item-col-7 {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 29.16666667%;
+    flex: 0 0 29.16666667%;
+    max-width: 29.16666667%;
+  }
+
+  .#{$form-item-cls}-item-col-6 {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 25%;
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+
+  .#{$form-item-cls}-item-col-5 {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 20.83333333%;
+    flex: 0 0 20.83333333%;
+    max-width: 20.83333333%;
+  }
+
+  .#{$form-item-cls}-item-col-4 {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 16.66666667%;
+    flex: 0 0 16.66666667%;
+    max-width: 16.66666667%;
+  }
+
+  .#{$form-item-cls}-item-col-3 {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 12.5%;
+    flex: 0 0 12.5%;
+    max-width: 12.5%;
+  }
+
+  .#{$form-item-cls}-item-col-2 {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 8.33333333%;
+    flex: 0 0 8.33333333%;
+    max-width: 8.33333333%;
+  }
+
+  .#{$form-item-cls}-item-col-1 {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 4.16666667%;
+    flex: 0 0 4.16666667%;
+    max-width: 4.16666667%;
+  }
+
+  .#{$form-item-cls}-item-col-0 {
+    display: none;
+  }
+}

package/es/form/Components/FormItem2/index.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+export interface IFormItemProps {
+    className?: string;
+    style?: React.CSSProperties;
+    prefix?: string;
+    label?: React.ReactNode;
+    colon?: boolean;
+    layout?: 'vertical' | 'horizontal' | 'inline';
+    tooltip?: React.ReactNode;
+    tooltipLayout?: 'icon' | 'text';
+    tooltipIcon?: React.ReactNode;
+    labelStyle?: React.CSSProperties;
+    labelAlign?: 'left' | 'right';
+    labelWrap?: boolean;
+    labelWidth?: number | string;
+    wrapperWidth?: number | string;
+    labelCol?: number;
+    wrapperCol?: number;
+    wrapperAlign?: 'left' | 'right';
+    wrapperWrap?: boolean;
+    wrapperStyle?: React.CSSProperties;
+    fullness?: boolean;
+    addonBefore?: React.ReactNode;
+    addonAfter?: React.ReactNode;
+    size?: 'small' | 'default' | 'large';
+    inset?: boolean;
+    extra?: React.ReactNode;
+    feedbackText?: React.ReactNode;
+    feedbackLayout?: 'loose' | 'terse' | 'popover' | 'none' | 'hover-popover' | (string & {});
+    feedbackStatus?: 'error' | 'warning' | 'success' | 'pending' | (string & {});
+    feedbackIcon?: React.ReactNode;
+    asterisk?: boolean;
+    gridSpan?: number;
+    bordered?: boolean;
+}
+declare type ComposeFormItem = React.FC<React.PropsWithChildren<IFormItemProps>> & {
+    BaseItem?: React.FC<React.PropsWithChildren<IFormItemProps>>;
+};
+export declare const BaseItem: React.FC<React.PropsWithChildren<IFormItemProps>>;
+export declare const FormItem2: ComposeFormItem;
+export default FormItem2;