amis 1.5.3 → 1.5.6-beta.4

package/src/Root.tsx

@@ -150,6 +150,7 @@ export function renderChild(
     <SchemaRenderer
       {...props}
       schema={schema}
+      propKey={schema.key}
       $path={`${prefix ? `${prefix}/` : ''}${(schema && schema.type) || ''}`}
     />
   );

package/src/RootRenderer.tsx

@@ -184,12 +184,12 @@ export class RootRenderer extends React.Component<RootRendererProps> {
       return;
     }
 
-    store.closeDialog();
+    store.closeDialog(true);
   }
 
-  handleDialogClose() {
+  handleDialogClose(confirmed = false) {
     const store = this.store;
-    store.closeDialog();
+    store.closeDialog(confirmed);
   }
 
   handleDrawerConfirm(values: object[], action: Action, ...args: Array<any>) {

package/src/SchemaRenderer.tsx

@@ -242,6 +242,7 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
         data: defaultData,
         value: defaultValue,
         activeKey: defaultActiveKey,
+        key: propKey,
         ...restSchema
       } = schema;
       return rest.invisible
@@ -253,6 +254,7 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
             defaultData,
             defaultValue,
             defaultActiveKey,
+            propKey,
             $path: $path,
             $schema: schema,
             ref: isSFC ? undefined : this.refFn,
@@ -293,6 +295,7 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
     const {
       data: defaultData,
       value: defaultValue,
+      key: propKey,
       activeKey: defaultActiveKey,
       ...restSchema
     } = schema;
@@ -321,6 +324,7 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
         defaultData={restSchema.defaultData ?? defaultData}
         defaultValue={restSchema.defaultValue ?? defaultValue}
         defaultActiveKey={defaultActiveKey}
+        propKey={propKey}
         $path={$path}
         $schema={{...schema, ...exprProps}}
         ref={this.refFn}

package/src/components/Card.tsx

@@ -0,0 +1,203 @@
+import React from 'react';
+import {isClickOnInput} from '../utils/helper';
+import {ClassNamesFn, themeable, ThemeProps} from '../theme';
+export interface CardProps extends ThemeProps {
+  className?: string;
+  headerClassName?: string;
+  titleClassName?: string;
+  subTitleClassName?: string;
+  descriptionClassName?: string;
+  avatarTextStyle?: object;
+  avatarTextClassName?: string;
+  avatarClassName?: string;
+  secondaryClassName?: string;
+  imageClassName?: string;
+  bodyClassName?: string;
+  footerClassName?: string;
+  media?: React.ReactNode;
+  mediaPosition?: 'top' | 'left' | 'right' | 'bottom';
+  toolbar?: React.ReactNode;
+  children?: React.ReactNode;
+  actions?: React.ReactNode;
+  title?: string | JSX.Element;
+  subTitle?: string | JSX.Element;
+  subTitlePlaceholder?: string | JSX.Element;
+  description?: string | JSX.Element;
+  descriptionPlaceholder?: string | JSX.Element;
+  avatar?: string;
+  avatarText?: string | JSX.Element;
+  secondary?: string | JSX.Element;
+  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+  classnames: ClassNamesFn;
+}
+
+export class Card extends React.Component<CardProps> {
+  static defaultProps: Partial<CardProps> = {
+    className: '',
+    avatarClassName: '',
+    headerClassName: '',
+    footerClassName: '',
+    secondaryClassName: '',
+    avatarTextClassName: '',
+    bodyClassName: '',
+    titleClassName: '',
+    subTitleClassName: '',
+    descriptionClassName: '',
+    imageClassName: '',
+    mediaPosition: 'left'
+  };
+
+  constructor(props: CardProps) {
+    super(props);
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick(e: React.MouseEvent<HTMLDivElement>) {
+    if (isClickOnInput(e)) {
+      return;
+    }
+
+    this.props.onClick && this.props.onClick(e);
+  }
+
+  render() {
+    const {
+      classnames: cx,
+      className,
+      headerClassName,
+      bodyClassName,
+      titleClassName,
+      subTitleClassName,
+      descriptionClassName,
+      avatarClassName,
+      avatarTextStyle,
+      imageClassName,
+      avatarTextClassName,
+      secondaryClassName,
+      footerClassName,
+      media,
+      mediaPosition,
+      actions,
+      children,
+      onClick,
+      toolbar,
+      title,
+      subTitle,
+      subTitlePlaceholder,
+      description,
+      descriptionPlaceholder,
+      secondary,
+      avatar,
+      avatarText
+    } = this.props;
+
+    let heading = null;
+    const isShowHeading =
+      avatar ||
+      avatarText ||
+      title ||
+      subTitle ||
+      subTitlePlaceholder ||
+      description ||
+      descriptionPlaceholder ||
+      toolbar;
+    if (isShowHeading) {
+      heading = (
+        <div className={cx('Card-heading', headerClassName)}>
+          {avatar ? (
+            <span className={cx('Card-avtar', avatarClassName)}>
+              <img className={cx('Card-img', imageClassName)} src={avatar} />
+            </span>
+          ) : avatarText ? (
+            <span
+              className={cx('Card-avtarText', avatarTextClassName)}
+              style={avatarTextStyle}
+            >
+              {avatarText}
+            </span>
+          ) : null}
+          <div className={cx('Card-meta')}>
+            {title ? (
+              <div className={cx('Card-title', titleClassName)}>{title}</div>
+            ) : null}
+            {subTitle || subTitlePlaceholder ? (
+              <div className={cx('Card-subTitle', subTitleClassName)}>
+                {subTitle
+                  ? subTitle
+                  : subTitlePlaceholder
+                  ? subTitlePlaceholder
+                  : null}
+              </div>
+            ) : null}
+            {description || descriptionPlaceholder ? (
+              <div className={cx('Card-desc', descriptionClassName)}>
+                {description
+                  ? description
+                  : descriptionPlaceholder
+                  ? descriptionPlaceholder
+                  : null}
+              </div>
+            ) : null}
+          </div>
+          {toolbar}
+        </div>
+      );
+    }
+
+    const body = children;
+
+    return (
+      <div
+        onClick={this.handleClick}
+        className={cx('Card', className, {
+          'Card--link': onClick
+        })}
+      >
+        {media ? (
+          <div className={cx(`Card-multiMedia--${mediaPosition}`)}>
+            {media}
+            <div className={cx('Card-multiMedia-flex')}>
+              {heading}
+              {body ? (
+                <div className={cx('Card-body', bodyClassName)}>{body}</div>
+              ) : null}
+              {secondary || actions ? (
+                <div className={cx('Card-footer-wrapper', footerClassName)}>
+                  {secondary ? (
+                    <div className={cx('Card-secondary', secondaryClassName)}>
+                      {secondary}
+                    </div>
+                  ) : null}
+                  {actions ? (
+                    <div className={cx('Card-actions-wrapper')}>{actions}</div>
+                  ) : null}
+                </div>
+              ) : null}
+            </div>
+          </div>
+        ) : (
+          <div>
+            {heading}
+            {body ? (
+              <div className={cx('Card-body', bodyClassName)}>{body}</div>
+            ) : null}
+            {secondary || actions ? (
+              <div className={cx('Card-footer-wrapper', footerClassName)}>
+                {secondary ? (
+                  <div className={cx('Card-secondary', secondaryClassName)}>
+                    {secondary}
+                  </div>
+                ) : null}
+                {actions ? (
+                  <div className={cx('Card-actions-wrapper')}>{actions}</div>
+                ) : null}
+              </div>
+            ) : null}
+          </div>
+        )}
+      </div>
+    );
+  }
+}
+
+export default themeable(Card);

package/src/components/Collapse.tsx

@@ -55,7 +55,6 @@ export interface CollapseState {
 }
 
 export class Collapse extends React.Component<CollapseProps, CollapseState> {
-
   static defaultProps: Partial<CollapseProps> = {
     mountOnEnter: false,
     unmountOnExit: false,
@@ -82,7 +81,10 @@ export class Collapse extends React.Component<CollapseProps, CollapseState> {
     this.state.collapsed = !!props.collapsed;
   }
 
-  static getDerivedStateFromProps(nextProps: CollapseProps, preState: CollapseState) {
+  static getDerivedStateFromProps(
+    nextProps: CollapseProps,
+    preState: CollapseState
+  ) {
     if (nextProps.propsUpdate && nextProps.collapsed !== preState.collapsed) {
       return {
         collapsed: !!nextProps.collapsed
@@ -164,7 +166,9 @@ export class Collapse extends React.Component<CollapseProps, CollapseState> {
       children
     } = this.props;
 
-    const finalHeader = this.state.collapsed ? header : collapseHeader || header;
+    const finalHeader = this.state.collapsed
+      ? header
+      : collapseHeader || header;
 
     let dom = [
       finalHeader ? (
@@ -173,14 +177,18 @@ export class Collapse extends React.Component<CollapseProps, CollapseState> {
           onClick={this.toggleCollapsed}
           className={cx(`Collapse-header`, headingClassName)}
         >
-          {showArrow && collapsable
-            ? expandIcon
-              ? React.cloneElement(expandIcon, {
-                  ...expandIcon.props,
-                  className: cx('Collapse-icon-tranform')
-                })
-              : <span className={cx('Collapse-arrow')} />
-              : ''}
+          {showArrow && collapsable ? (
+            expandIcon ? (
+              React.cloneElement(expandIcon, {
+                ...expandIcon.props,
+                className: cx('Collapse-icon-tranform')
+              })
+            ) : (
+              <span className={cx('Collapse-arrow')} />
+            )
+          ) : (
+            ''
+          )}
           {finalHeader}
         </HeadingComponent>
       ) : null,
@@ -213,7 +221,6 @@ export class Collapse extends React.Component<CollapseProps, CollapseState> {
           );
         }}
       </Transition>
-      
     ];
 
     if (headerPosition === 'bottom') {

package/src/components/CollapseGroup.tsx

@@ -28,7 +28,6 @@ class CollapseGroup extends React.Component<
   CollapseGroupProps,
   CollapseGroupState
 > {
-
   static defaultProps: Partial<CollapseGroupProps> = {
     className: '',
     accordion: false,
@@ -58,21 +57,18 @@ class CollapseGroup extends React.Component<
     if (collapsed) {
       if (this.props.accordion) {
         activeKey = [];
-      }
-      else {
-        for(let i = 0; i < activeKey.length; i++) {
+      } else {
+        for (let i = 0; i < activeKey.length; i++) {
           if (activeKey[i] === item.id) {
             activeKey.splice(i, 1);
             break;
           }
         }
       }
-    }
-    else {
+    } else {
       if (this.props.accordion) {
         activeKey = [item.id];
-      }
-      else {
+      } else {
         activeKey.push(item.id);
       }
     }
@@ -88,7 +84,8 @@ class CollapseGroup extends React.Component<
 
     return children.map((child: React.ReactElement, index: number) => {
       let props = child.props;
-      const id = props.schema.key || String(index);
+
+      const id = props.propKey || String(index);
       const collapsed = this.state.activeKey.indexOf(id) === -1;
 
       return React.cloneElement(child as any, {
@@ -98,7 +95,8 @@ class CollapseGroup extends React.Component<
         collapsed,
         expandIcon: this.props.expandIcon,
         propsUpdate: true,
-        onCollapse: (item: CollapseProps, collapsed: boolean) => this.collapseChange(item, collapsed)
+        onCollapse: (item: CollapseProps, collapsed: boolean) =>
+          this.collapseChange(item, collapsed)
       });
     });
   };
@@ -116,7 +114,7 @@ class CollapseGroup extends React.Component<
         className={cx(
           `CollapseGroup`,
           {
-            'icon-position-right': expandIconPosition === 'right',
+            'icon-position-right': expandIconPosition === 'right'
           },
           className
         )}

package/src/components/DatePicker.tsx

@@ -288,6 +288,8 @@ export interface DateProps extends LocaleProps, ThemeProps {
   largeMode?: boolean;
   onScheduleClick?: (scheduleData: any) => void;
 
+  useMobileUI?: boolean;
+
   // 下面那个千万不要写，写了就会导致 keyof DateProps 得到的结果是 string | number;
   // [propName: string]: any;
 }
@@ -567,6 +569,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
     const isOpened = this.state.isOpened;
     let date: moment.Moment | undefined = this.state.value;
 
+
     if (embed) {
       let schedulesData: DateProps['schedules'] = undefined;
       if (schedules && Array.isArray(schedules)) {

package/src/components/Picker.tsx

@@ -0,0 +1,145 @@
+/**
+ * @file Picker
+ * @description 移动端列滚动选择器
+ */
+import React, {
+  memo,
+  ReactNode,
+  useState
+} from 'react';
+import {uncontrollable} from 'uncontrollable';
+
+import {themeable, ThemeProps} from '../theme';
+import {localeable, LocaleProps} from '../locale';
+
+import Button from './Button';
+import {PickerColumnItem, default as Column} from './PickerColumn';
+
+export type PickerValue = string | number;
+
+export interface PickerProps extends ThemeProps, LocaleProps {
+  title?: String | ReactNode,
+  labelField?: string;
+  className?: string;
+  showToolbar?: boolean;
+  defaultValue?: PickerValue[];
+  value?: PickerValue[];
+  swipeDuration?: number;
+  visibleItemCount?: number;
+  itemHeight?: number;
+  columns: PickerColumnItem[] | PickerColumnItem;
+  onChange?: (
+    value?: PickerValue[],
+    index?: number,
+    confirm?: boolean
+  ) => void;
+  onClose?: (
+    value?: PickerValue[]
+  ) => void;
+  onConfirm?: (
+    value?: PickerValue[]
+  ) => void;
+}
+
+function fixToArray(data: any) {
+  if (!Array.isArray(data)) {
+    return [data];
+  }
+  return data;
+}
+
+const Picker = memo<PickerProps>((props) => {
+  const {
+    labelField,
+    visibleItemCount = 5,
+    value = [],
+    swipeDuration = 1000,
+    columns = [],
+    itemHeight = 30,
+    showToolbar = true,
+    className='',
+    classnames: cx,
+    classPrefix: ns,
+    translate: __
+  } = props;
+
+  const _columns = fixToArray(columns);
+  const [innerValue, setInnerValue] = useState<PickerValue[]>(
+    fixToArray(props.value === undefined ? props.defaultValue || [] : value )
+  );
+
+  const close = () => {
+    if (props.onClose) {
+      props.onClose(innerValue);
+    }
+  };
+
+  const confirm = () => {
+    if (props.onConfirm) {
+      props.onConfirm(innerValue);
+    }
+  };
+
+  const onChange = (itemValue: PickerValue, columnIndex: number, confirm?: boolean) => {
+    const nextInnerValue = [...innerValue];
+    nextInnerValue[columnIndex] = itemValue;
+    setInnerValue(nextInnerValue);
+    if (props.onChange) {
+      props.onChange(nextInnerValue, columnIndex, confirm);
+    }
+  };
+
+  const renderColumnItem = (item: PickerColumnItem, index: number) => {
+    return (
+      <Column
+        {...item}
+        classnames={cx}
+        classPrefix={ns}
+        labelField={labelField}
+        itemHeight={itemHeight}
+        swipeDuration={swipeDuration}
+        visibleItemCount={visibleItemCount}
+        value={innerValue[index]}
+        onChange={(val: string | number, i, confirm) => {
+          onChange(val, index, confirm);
+        }}
+    />)
+  };
+
+  const wrapHeight = itemHeight * +visibleItemCount;
+  const frameStyle = {height: `${itemHeight}px`};
+  const columnsStyle = {height: `${wrapHeight}px`};
+  const maskStyle = {
+    backgroundSize: `100% ${(wrapHeight - itemHeight) / 2}px`
+  };
+
+  return (
+    <div
+      className={cx(className, 'PickerColumns', 'PickerColumns-popOver')}
+    >
+      {showToolbar && <div className={cx('PickerColumns-toolbar')}>
+        <Button className="PickerColumns-cancel" level="default" onClick={close}>
+          {__('cancel')}
+        </Button>
+        <Button className="PickerColumns-confirm" level="primary" onClick={confirm}>
+          {__('confirm')}
+        </Button>
+      </div>}
+      <div className={cx('PickerColumns-columns')} style={columnsStyle}>
+          {
+              _columns.map((column: PickerColumnItem, index: number) => renderColumnItem(column, index))
+          }
+        <div className={cx('PickerColumns-mask')} style={maskStyle}></div>
+        <div className={cx('PickerColumns-frame')} style={frameStyle}></div>
+      </div>
+    </div>
+  );
+});
+
+export default themeable(
+  localeable(
+    uncontrollable(Picker, {
+      value: 'onChange'
+    })
+  )
+);