amis 1.5.2 → 1.5.6-beta.0

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/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

@@ -227,7 +227,7 @@ export class Collapse extends React.Component<CollapseProps, CollapseState> {
           {
             'is-active': !this.state.collapsed,
             [`Collapse--${size}`]: size,
-            'Collapse--disabled': disabled || collapsable === false,
+            'Collapse--disabled': disabled,
             'Collapse--title-bottom': headerPosition === 'bottom'
           },
           className

package/src/components/DatePicker.tsx

@@ -278,6 +278,17 @@ export interface DateProps extends LocaleProps, ThemeProps {
   borderMode?: 'full' | 'half' | 'none';
   // 是否为内嵌模式，如果开启就不是 picker 了，直接页面点选。
   embed?: boolean;
+  schedules?: Array<{
+    startTime: Date,
+    endTime: Date,
+    content: any,
+    className?: string
+  }>;
+  scheduleClassNames?: Array<string>;
+  largeMode?: boolean;
+  onScheduleClick?: (scheduleData: any) => void;
+
+  useMobileUI?: boolean;
 
   // 下面那个千万不要写，写了就会导致 keyof DateProps 得到的结果是 string | number;
   // [propName: string]: any;
@@ -302,7 +313,8 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
     viewMode: 'days' as 'years' | 'months' | 'days' | 'time',
     shortcuts: '',
     closeOnSelect: true,
-    overlayPlacement: 'auto'
+    overlayPlacement: 'auto',
+    scheduleClassNames: ['bg-warning', 'bg-danger', 'bg-success', 'bg-info', 'bg-secondary']
   };
   state: DatePickerState = {
     isOpened: false,
@@ -546,20 +558,46 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
       format,
       borderMode,
       embed,
-      minDate
+      minDate,
+      schedules,
+      largeMode,
+      scheduleClassNames,
+      onScheduleClick
     } = this.props;
 
     const __ = this.props.translate;
     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)) {
+        // 设置日程颜色
+        let index = 0;
+        schedulesData = schedules.map((schedule: any) => {
+          let className = schedule.className;
+          if (!className && scheduleClassNames) {
+            className = scheduleClassNames[index];
+            index++;
+            if (index >= scheduleClassNames.length) {
+              index = 0;
+            }
+          }
+          return {
+            ...schedule,
+            className
+          };
+        });
+      }
       return (
         <div
           className={cx(
             `DateCalendar`,
             {
-              'is-disabled': disabled
+              'is-disabled': disabled,
+              'ScheduleCalendar': schedulesData,
+              'ScheduleCalendar-large': largeMode
             },
             className
           )}
@@ -578,6 +616,9 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
             locale={locale}
             minDate={minDate}
             // utc={utc}
+            schedules={schedulesData}
+            largeMode={largeMode}
+            onScheduleClick={onScheduleClick}
           />
         </div>
       );

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'
+    })
+  )
+);