amis 1.5.3 → 1.5.4

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

package/src/components/PickerColumn.tsx

@@ -1,6 +1,6 @@
 /**
  * @file Picker
- * @description 移动端选择器
+ * @description 移动端列滚动选择器
  */
 import React, {
   useEffect,
@@ -8,8 +8,7 @@ import React, {
   useRef,
   useImperativeHandle,
   useCallback,
-  forwardRef,
-  CSSProperties
+  forwardRef
 } from 'react';
 import isObject from 'lodash/isObject';
 import cloneDeep from 'lodash/cloneDeep';
@@ -18,37 +17,25 @@ import {uncontrollable} from 'uncontrollable';
 import {useSetState, useUpdateEffect} from '../hooks';
 import {range} from '../utils/helper';
 import {themeable, ThemeProps} from '../theme';
-import {localeable, LocaleProps} from '../locale';
 import useTouch from '../hooks/use-touch';
-import Button from './Button';
 
-export interface PickerColumnProps extends ThemeProps, LocaleProps {
-  mobileClassName?: string;
-  style?: CSSProperties;
-  index?: number;
-  labelField: string;
+export interface PickerColumnItem {
+  labelField?: string;
   readonly?: boolean;
-  value: any;
-  swipeDuration?: number | string;
-  visibleItemCount?: number | string;
+  value?: PickerOption;
+  swipeDuration?: number;
+  visibleItemCount?: number;
+  itemHeight?: number;
   options?: PickerOption[];
-  children?: any;
   optionRender?: (option: string | object | PickerOption) => React.ReactNode;
   onChange?: (
     value?: PickerOption | string,
     index?: number,
     confirm?: boolean
   ) => void;
-  onClose?: () => void;
-  onConfirm?: () => void;
-}
+};
 
-export interface Column {
-  values?: string[];
-  className?: string;
-  children?: Column[];
-  disabled?: boolean;
-}
+export interface PickerColumnProps extends PickerColumnItem, ThemeProps {}
 
 export type PickerOption = string | number | PickerObjectOption;
 
@@ -77,23 +64,17 @@ function getElementTranslateY(element: HTMLElement | null) {
 function isOptionDisabled(option: PickerOption) {
   return isObject(option) && option.disabled;
 }
-
+  
 const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
   const {
-    onClose,
-    onConfirm,
-    mobileClassName,
     visibleItemCount = 5,
+    itemHeight = 30,
     value,
     swipeDuration = 1000,
-    labelField = 'value',
-    translate: __,
+    labelField = 'text',
     options = [],
     classnames: cx
   } = props;
-  let itemHeight = 24;
-
-  const defaultIndex = options.findIndex(item => item === value);
 
   const root = useRef(null);
   const menuItemRef = useRef(null);
@@ -105,21 +86,9 @@ const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
   const touchStartTime = useRef(0);
   const momentumOffset = useRef(0);
 
-  if (menuItemRef.current) {
-    //@ts-ignore
-    itemHeight = menuItemRef.current.getBoundingClientRect().height;
-  }
-
-  const [state, updateState] = useSetState({
-    index: defaultIndex,
-    offset: 0,
-    duration: 0,
-    options: cloneDeep(options)
-  });
-
   const touch = useTouch();
-
-  const count = state.options.length;
+  const count = options.length;
+  const defaultIndex = options.findIndex(item => item === value);
 
   const baseOffset = useMemo(() => {
     // 默认转入第一个选项的位置
@@ -128,20 +97,27 @@ const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
 
   const adjustIndex = (index: number) => {
     index = range(index, 0, count);
-    if (!state.options) {
+    if (!options) {
       return;
     }
 
     for (let i = index; i < count; i += 1) {
-      if (!isOptionDisabled(state.options[i])) return i;
+      if (!isOptionDisabled(options[i])) return i;
     }
     for (let i = index - 1; i >= 0; i -= 1) {
-      if (!isOptionDisabled(state.options[i])) return i;
+      if (!isOptionDisabled(options[i])) return i;
     }
 
     return null;
   };
 
+  const [state, updateState] = useSetState({
+    index: adjustIndex(defaultIndex) || 0,
+    offset: 0,
+    duration: 0,
+    options: cloneDeep(options)
+  });
+
   /**
    *
    * @param index 索引
@@ -156,9 +132,14 @@ const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
       updateState({index});
 
       if (emitChange && props.onChange) {
-        setTimeout(() => {
-          props.onChange?.(options[index], index, confirm);
-        }, 0);
+        requestAnimationFrame(
+          () => {
+            props.onChange?.(options[index], index, confirm);
+          }
+        );
+        // setTimeout(() => {
+        //   props.onChange?.(options[index], index, confirm);
+        // }, 0);
       }
     };
 
@@ -175,7 +156,8 @@ const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
   const setOptions = (options: Array<PickerOption>) => {
     if (JSON.stringify(options) !== JSON.stringify(state.options)) {
       updateState({options});
-      setIndex(defaultIndex, true);
+      const index = options.findIndex(item => item === value) || 0;
+      setIndex(index, true, true);
     }
   };
 
@@ -189,7 +171,7 @@ const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
   };
 
   const getOptionText = (option: [] | PickerOption) => {
-    if (isObject(option) && props.labelField in option) {
+    if (isObject(option) && labelField in option) {
       //@ts-ignore
       return option[labelField];
     }
@@ -298,6 +280,10 @@ const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
   };
 
   const renderOptions = () => {
+    const style = {
+      height: `${itemHeight}px`,
+      lineHeight: `${itemHeight}px`
+    };
     return state.options.map((option, index: number) => {
       const text: string | PickerOption = getOptionText(option);
       const disabled = isOptionDisabled(option);
@@ -305,6 +291,7 @@ const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
       const data = {
         role: 'button',
         key: index,
+        style,
         tabIndex: disabled ? -1 : 0,
         className: props.classnames(`PickerColumns-columnItem`, {
           'is-disabled': disabled,
@@ -314,7 +301,7 @@ const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
           onClickItem(index);
         }
       };
-
+      
       const childData = {
         className: 'text-ellipsis',
         children: text
@@ -335,7 +322,7 @@ const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
   const setValue = (value: string) => {
     const {options} = state;
     for (let i = 0; i < options.length; i += 1) {
-      if (getOptionText(options[i]) === value) {
+      if (options[i] === value) {
         return setIndex(i);
       }
     }
@@ -348,7 +335,7 @@ const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
   );
 
   useEffect(() => {
-    setIndex(defaultIndex, true);
+    setIndex(defaultIndex);
   }, [defaultIndex]);
 
   useUpdateEffect(() => {
@@ -369,61 +356,37 @@ const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
     transitionDuration: `${state.duration}ms`,
     transitionProperty: state.duration ? 'all' : 'none'
   };
-
-  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(mobileClassName, 'PickerColumns', 'PickerColumns-popOver')}
-    >
-      <div className={cx('PickerColumns-toolbar')}>
-        <Button level="default" onClick={onClose}>
-          {__('cancel')}
-        </Button>
-        <Button level="primary" onClick={onConfirm}>
-          {__('confirm')}
-        </Button>
-      </div>
-      <div className={cx('PickerColumns-columns')} style={columnsStyle}>
-        <div
+      <div
           ref={root}
-          className={props.classnames(props.className)}
+          className={props.classnames('PickerColumns', props.className)}
           onTouchStart={onTouchStart}
           onTouchMove={onTouchMove}
           onTouchEnd={onTouchEnd}
           onTouchCancel={onTouchEnd}
-        >
+      >
           <ul
-            ref={wrapper}
-            style={wrapperStyle}
-            className={props.classnames('PickerColumns-columnWrapper')}
-            onTransitionEnd={stopMomentum}
+          ref={wrapper}
+          style={wrapperStyle}
+          className={props.classnames('PickerColumns-columnWrapper')}
+          onTransitionEnd={stopMomentum}
           >
-            {renderOptions()}
+          {renderOptions()}
           </ul>
-        </div>
-        <div className={cx('PickerColumns-mask')} style={maskStyle}></div>
-        <div className={cx('PickerColumns-frame')} style={frameStyle}></div>
       </div>
-    </div>
   );
 });
 
 PickerColumn.defaultProps = {
   options: [],
   visibleItemCount: 5,
-  swipeDuration: 1000
+  swipeDuration: 1000,
+  itemHeight: 30
 };
 
 export default themeable(
-  localeable(
-    uncontrollable(PickerColumn, {
-      value: 'onChange'
-    })
-  )
+  uncontrollable(PickerColumn, {
+    value: 'onChange'
+  })
 );
+