amis-ui 1.0.0-beta.0

package/src/components/Selection.tsx

@@ -0,0 +1,232 @@
+/**
+ * @file Checkboxes
+ * @description 多选输入框
+ * @author fex
+ */
+
+import React from 'react';
+import {uncontrollable} from 'uncontrollable';
+import Checkbox from './Checkbox';
+import chunk from 'lodash/chunk';
+import {ClassNamesFn, themeable, ThemeProps} from 'amis-core';
+import {Option, value2array, Options} from './Select';
+import find from 'lodash/find';
+import {autobind, findTree} from 'amis-core';
+import isEqual from 'lodash/isEqual';
+import {LocaleProps, localeable} from 'amis-core';
+// import isPlainObject from 'lodash/isPlainObject';
+
+export interface BaseSelectionProps extends ThemeProps, LocaleProps {
+  options: Options;
+  className?: string;
+  placeholder?: string;
+  value?: any | Array<any>;
+  multiple?: boolean;
+  clearable?: boolean;
+  onChange?: (value: Array<any> | any) => void;
+  onDeferLoad?: (option: Option) => void;
+  onLeftDeferLoad?: (option: Option, leftOptions: Option) => void;
+  inline?: boolean;
+  labelClassName?: string;
+  option2value?: (option: Option) => any;
+  itemClassName?: string;
+  itemRender: (option: Option, states: ItemRenderStates) => JSX.Element;
+  disabled?: boolean;
+  onClick?: (e: React.MouseEvent) => void;
+}
+
+export interface ItemRenderStates {
+  index: number;
+  multiple?: boolean;
+  checked: boolean;
+  onChange: () => void;
+  disabled?: boolean;
+}
+
+export class BaseSelection<
+  T extends BaseSelectionProps = BaseSelectionProps,
+  S = any
+> extends React.Component<T, S> {
+  static itemRender(option: Option, states: ItemRenderStates) {
+    return <span>{option.label}</span>;
+  }
+
+  static defaultProps = {
+    placeholder: 'placeholder.noOption',
+    itemRender: BaseSelection.itemRender,
+    multiple: true,
+    clearable: false
+  };
+
+  static value2array(
+    value: any,
+    options: Options,
+    option2value: (option: Option) => any = (option: Option) => option
+  ): Options {
+    if (value === void 0) {
+      return [];
+    }
+
+    if (!Array.isArray(value)) {
+      value = [value];
+    }
+
+    return value.map((value: any) => {
+      const option = findTree(options, option =>
+        isEqual(option2value(option), value)
+      );
+      return option || value;
+    });
+  }
+
+  static resolveSelected(
+    value: any,
+    options: Options,
+    option2value: (option: Option) => any = (option: Option) => option
+  ) {
+    value = Array.isArray(value) ? value[0] : value;
+    return findTree(options, option => isEqual(option2value(option), value));
+  }
+
+  // 获取两个数组的交集
+  intersectArray(
+    arr1: undefined | Array<Option>,
+    arr2: undefined | Array<Option>
+  ): Array<Option> {
+    if (!Array.isArray(arr1) || !Array.isArray(arr2)) {
+      return [];
+    }
+    const len1 = arr1.length;
+    const len2 = arr2.length;
+    if (len1 < len2) {
+      return this.intersectArray(arr2, arr1);
+    }
+    return Array.from(new Set(arr1.filter(item => arr2.includes(item))));
+  }
+
+  toggleOption(option: Option) {
+    const {
+      value,
+      onChange,
+      option2value,
+      options,
+      disabled,
+      multiple,
+      clearable
+    } = this.props;
+
+    if (disabled || option.disabled) {
+      return;
+    }
+
+    let valueArray = BaseSelection.value2array(value, options, option2value);
+    let idx = valueArray.indexOf(option);
+
+    if (~idx && (multiple || clearable)) {
+      valueArray.splice(idx, 1);
+    } else if (multiple) {
+      valueArray.push(option);
+    } else {
+      valueArray = [option];
+    }
+
+    let newValue: string | Array<Option> = option2value
+      ? valueArray.map(item => option2value(item))
+      : valueArray;
+
+    onChange && onChange(multiple ? newValue : newValue[0]);
+  }
+
+  @autobind
+  toggleAll() {
+    const {value, onChange, option2value, options} = this.props;
+
+    let valueArray: Array<Option> = [];
+
+    const availableOptions = options.filter(option => !option.disabled);
+    const intersectOptions = this.intersectArray(value, availableOptions);
+
+    if (!Array.isArray(value)) {
+      valueArray = availableOptions;
+    } else if (intersectOptions.length < availableOptions.length) {
+      valueArray = Array.from(new Set([...value, ...availableOptions]));
+    } else {
+      valueArray = value.filter(item => !availableOptions.includes(item));
+    }
+
+    let newValue: string | Array<Option> = option2value
+      ? valueArray.map(item => option2value(item))
+      : valueArray;
+
+    onChange && onChange(newValue);
+  }
+
+  render() {
+    const {
+      value,
+      options,
+      className,
+      placeholder,
+      inline,
+      labelClassName,
+      disabled,
+      classnames: cx,
+      option2value,
+      itemClassName,
+      itemRender,
+      multiple,
+      onClick
+    } = this.props;
+
+    const __ = this.props.translate;
+
+    let valueArray = BaseSelection.value2array(value, options, option2value);
+    let body: Array<React.ReactNode> = [];
+
+    if (Array.isArray(options) && options.length) {
+      body = options.map((option, key) => (
+        <Checkbox
+          type={multiple ? 'checkbox' : 'radio'}
+          className={cx(itemClassName, option.className)}
+          key={key}
+          onChange={() => this.toggleOption(option)}
+          checked={!!~valueArray.indexOf(option)}
+          disabled={disabled || option.disabled}
+          labelClassName={labelClassName}
+          description={option.description}
+        >
+          {itemRender(option, {
+            index: key,
+            multiple: multiple,
+            checked: !!~valueArray.indexOf(option),
+            onChange: () => this.toggleOption(option),
+            disabled: disabled || option.disabled
+          })}
+        </Checkbox>
+      ));
+    }
+
+    return (
+      <div
+        className={cx(
+          'Selection',
+          className,
+          inline ? 'Selection--inline' : ''
+        )}
+        onClick={onClick}
+      >
+        {body && body.length ? body : <div>{__(placeholder)}</div>}
+      </div>
+    );
+  }
+}
+
+export class Selection extends BaseSelection {}
+
+export default themeable(
+  localeable(
+    uncontrollable(Selection, {
+      value: 'onChange'
+    })
+  )
+);

package/src/components/SparkLine.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import {localeable, LocaleProps} from 'amis-core';
+import {themeable, ThemeProps} from 'amis-core';
+import type {PlainObject} from 'amis-core/dist/types';
+
+export interface SparkLineProps extends ThemeProps, LocaleProps {
+  className?: string;
+  width: number;
+  height: number;
+  value?: Array<
+    | number
+    | {
+        value: number;
+        label?: string;
+      }
+  >;
+  placeholder?: string;
+  onClick?: (e: React.MouseEvent, value?: PlainObject) => void;
+}
+
+export class SparkLine extends React.Component<SparkLineProps> {
+  static defaultProps = {
+    width: 100,
+    height: 50
+  };
+
+  normalizeValue(item: any): number {
+    if (typeof item === 'number') {
+      return item;
+    } else if (item && typeof item.value === 'number') {
+      return item.value;
+    } else {
+      return Number(item) || 0;
+    }
+  }
+
+  renderLines() {
+    const {width, height, value, classnames: cx} = this.props;
+
+    const values = value!.map(item => this.normalizeValue(item));
+    const max = Math.max(...values);
+    const min = Math.min(...values);
+    const duration = max - min || 1;
+
+    const gap = width / (values.length - 1);
+    const points: Array<{
+      x: number;
+      y: number;
+    }> = [];
+
+    values.forEach((value, index) => {
+      points.push({
+        x: index * gap,
+        y: height - ((value - min) * height) / duration
+      });
+    });
+
+    const lineD = points
+      .map((value, index) => `${index === 0 ? 'M' : 'L'} ${value.x} ${value.y}`)
+      .join(' ');
+    const areaD = `${lineD} V ${height} L 0 ${height} Z`;
+
+    // todo 支持鼠标 hover 显示对应数据。
+
+    return (
+      <g>
+        <path className={cx(`Sparkline-area`)} d={areaD} stroke="none" />
+        <path className={cx(`Sparkline-line`)} d={lineD} fill="none" />
+      </g>
+    );
+  }
+
+  render() {
+    const {
+      classnames: cx,
+      className,
+      value,
+      width,
+      height,
+      placeholder,
+      translate: __,
+      onClick
+    } = this.props;
+
+    return (
+      <div
+        className={cx(
+          'Sparkline',
+          className,
+          onClick ? 'Sparkline--clickable' : ''
+        )}
+        onClick={onClick}
+      >
+        {Array.isArray(value) && value.length > 1 ? (
+          <svg
+            className={cx('Sparkline-svg')}
+            width={width}
+            height={height}
+            viewBox={`0 0 ${width} ${height}`}
+          >
+            {this.renderLines()}
+          </svg>
+        ) : (
+          placeholder ?? __('placeholder.empty')
+        )}
+      </div>
+    );
+  }
+}
+
+export default themeable(localeable(SparkLine));

package/src/components/Spinner.tsx

@@ -0,0 +1,126 @@
+/**
+ * @file Spinner
+ * @description
+ * @author fex
+ * @date 2017-11-07
+ */
+
+import React from 'react';
+import {themeable, ThemeProps} from 'amis-core';
+import Transition, {ENTERED} from 'react-transition-group/Transition';
+import {Icon, hasIcon} from './icons';
+import {generateIcon} from 'amis-core';
+
+const fadeStyles: {
+  [propName: string]: string;
+} = {
+  [ENTERED]: 'in'
+};
+
+// Spinner Props
+export interface SpinnerProps extends ThemeProps {
+  show: boolean; // 控制Spinner显示与隐藏
+  className?: string; // 自定义最外层元素class
+  spinnerClassName?: string; // spin图标位置包裹元素的自定义class
+  /**
+   * @deprecated 已废弃，没有作用
+   */
+  mode?: string;
+  size?: 'sm' | 'lg' | ''; // spinner Icon 大小
+  icon?: string | React.ReactNode; // 自定义icon
+  tip?: string; // spinner文案
+  tipPlacement?: 'top' | 'right' | 'bottom' | 'left'; // spinner文案位置
+  delay?: number; // 延迟显示
+  overlay?: boolean; // 是否显示遮罩层，有children属性才生效
+}
+
+export class Spinner extends React.Component<SpinnerProps> {
+  static defaultProps = {
+    show: true,
+    className: '',
+    spinnerClassName: '',
+    size: '' as '',
+    icon: '',
+    tip: '',
+    tipPlacement: 'bottom' as 'bottom',
+    delay: 0,
+    overlay: false
+  };
+
+  render() {
+    const {
+      classnames: cx,
+      show,
+      className,
+      spinnerClassName,
+      size = '',
+      overlay,
+      delay,
+      icon,
+      tip,
+      tipPlacement = ''
+    } = this.props;
+    const isCustomIcon = icon && React.isValidElement(icon);
+    const timeout = {enter: delay, exit: 0};
+
+    return (
+      <Transition mountOnEnter unmountOnExit in={show} timeout={timeout}>
+        {(status: string) => {
+          return (
+            <>
+              {/* 遮罩层 */}
+              {overlay ? (
+                <div className={cx(`Spinner-overlay`, fadeStyles[status])} />
+              ) : null}
+
+              {/* spinner图标和文案 */}
+              <div
+                data-testid="spinner"
+                className={cx(
+                  `Spinner`,
+                  tip && {
+                    [`Spinner-tip--${tipPlacement}`]: [
+                      'top',
+                      'right',
+                      'bottom',
+                      'left'
+                    ].includes(tipPlacement)
+                  },
+                  {[`Spinner--overlay`]: overlay},
+                  fadeStyles[status],
+                  className
+                )}
+              >
+                <div
+                  className={cx(
+                    `Spinner-icon`,
+                    {
+                      [`Spinner-icon--${size}`]: ['lg', 'sm'].includes(size),
+                      [`Spinner-icon--default`]: !icon,
+                      [`Spinner-icon--simple`]: !isCustomIcon && icon,
+                      [`Spinner-icon--custom`]: isCustomIcon
+                    },
+                    spinnerClassName
+                  )}
+                >
+                  {icon ? (
+                    isCustomIcon ? (
+                      icon
+                    ) : hasIcon(icon as string) ? (
+                      <Icon icon={icon} className="icon" />
+                    ) : (
+                      generateIcon(cx, icon as string, 'icon')
+                    )
+                  ) : null}
+                </div>
+                {tip ? <span className={cx(`Spinner-tip`)}>{tip}</span> : ''}
+              </div>
+            </>
+          );
+        }}
+      </Transition>
+    );
+  }
+}
+
+export default themeable(Spinner);

package/src/components/Steps.tsx

@@ -0,0 +1,221 @@
+import React from 'react';
+import {themeable, ThemeProps} from 'amis-core';
+import {Icon} from './icons';
+import type {BaseSchema} from 'amis-core/dist/Schema';
+import {isMobile} from 'amis-core';
+
+export enum StepStatus {
+  wait = 'wait',
+  process = 'process',
+  finish = 'finish',
+  error = 'error'
+}
+
+export type StepSchema = {
+  /**
+   * 标题
+   */
+  title?: string | JSX.Element;
+
+  /**
+   * 子标题
+   */
+  subTitle?: string | JSX.Element;
+
+  /**
+   * 图标
+   */
+  icon?: string;
+
+  value?: string | number;
+
+  /**
+   * 描述
+   */
+  description?: string | JSX.Element;
+
+  status?: StepStatus;
+} & Omit<BaseSchema, 'type'>;
+
+export interface StepsSchema extends BaseSchema {
+  /**
+   * 指定为 Steps 步骤条渲染器
+   */
+  type: 'steps';
+
+  /**
+   * 步骤
+   */
+  steps?: Array<StepSchema>;
+
+  /**
+   * API 或 数据映射
+   */
+  source?: string;
+
+  /**
+   * 指定当前步骤
+   */
+  value?: number | string;
+
+  /**
+   * 变量映射
+   */
+  name?: string;
+
+  status: StepStatus;
+
+  /**
+   * 展示模式
+   */
+  mode?: 'horizontal' | 'vertical';
+
+  /**
+   * 标签放置位置
+   */
+  labelPlacement?: 'horizontal' | 'vertical';
+}
+export interface StepsProps extends ThemeProps {
+  steps: StepSchema[];
+  className: string;
+  current: number;
+  status?:
+    | StepStatus
+    | {
+        [propName: string]: StepStatus;
+      };
+  mode?: 'horizontal' | 'vertical';
+  labelPlacement?: 'horizontal' | 'vertical';
+  progressDot?: boolean;
+  useMobileUI?: boolean;
+}
+
+export function Steps(props: StepsProps) {
+  const {
+    steps: stepsRow,
+    classnames: cx,
+    className,
+    current,
+    status,
+    mode = 'horizontal',
+    labelPlacement = 'horizontal',
+    progressDot = false,
+    useMobileUI
+  } = props;
+  const FINISH_ICON = 'check';
+  const ERROR_ICON = 'close';
+
+  function getStepStatus(
+    step: StepSchema,
+    i: number
+  ): {stepStatus: StepStatus; icon?: string} {
+    let stepStatus: StepStatus = StepStatus.wait;
+    let icon = step.icon;
+
+    if (i < current) {
+      stepStatus = StepStatus.finish;
+      !icon && (icon = FINISH_ICON);
+    } else if (i === current) {
+      stepStatus = StepStatus.process;
+    }
+
+    if (typeof status === 'string') {
+      if (i === current) {
+        stepStatus = step.status || status || StepStatus.process;
+        stepStatus === StepStatus.error && !icon && (icon = ERROR_ICON);
+      }
+    } else if (typeof status === 'object') {
+      const key = step.value;
+      key && status[key] && (stepStatus = status[key]);
+    }
+
+    return {
+      stepStatus,
+      icon
+    };
+  }
+
+  const mobileUI = useMobileUI && isMobile();
+  return (
+    <ul
+      className={cx(
+        // 纵向步骤条暂时不支持labelPlacement属性
+        'Steps',
+        `Steps--Placement-${
+          progressDot || (labelPlacement === 'vertical' && mode != 'vertical')
+            ? 'vertical'
+            : ''
+        }`,
+        `Steps--${progressDot ? 'ProgressDot' : ''}`,
+        `Steps--${mode}`,
+        mobileUI ? 'Steps-mobile' : '',
+        className
+      )}
+    >
+      {stepsRow.map((step, i) => {
+        const {stepStatus, icon} = getStepStatus(step, i);
+        return (
+          <li
+            key={i}
+            className={cx(
+              'StepsItem',
+              `is-${stepStatus}`,
+              step.className,
+              `StepsItem-${progressDot ? 'ProgressDot' : ''}`
+            )}
+          >
+            <div className={cx('StepsItem-container')}>
+              <div className={cx('StepsItem-containerTail')}></div>
+              {progressDot ? (
+                <div className={cx('StepsItem-containerProgressDot')}></div>
+              ) : (
+                <div
+                  className={cx(
+                    'StepsItem-containerIcon',
+                    i < current && 'is-success'
+                  )}
+                >
+                  <span className={cx('StepsItem-icon')}>
+                    {icon ? <Icon icon={icon} className="icon" /> : i + 1}
+                  </span>
+                </div>
+              )}
+              <div className={cx('StepsItem-containerWrapper')}>
+                <div className={cx('StepsItem-body')}>
+                  <div
+                    className={cx(
+                      'StepsItem-title',
+                      `StepsItem-${progressDot ? 'vertical-ProgressDot' : ''}`,
+                      i < current && 'is-success'
+                    )}
+                  >
+                    <span
+                      className={cx('StepsItem-ellText')}
+                      title={String(step.title)}
+                    >
+                      {step.title}
+                    </span>
+                    <span
+                      className={cx('StepsItem-subTitle', 'StepsItem-ellText')}
+                      title={String(step.subTitle)}
+                    >
+                      {step.subTitle}
+                    </span>
+                  </div>
+                  <div
+                    className={cx('StepsItem-description', 'StepsItem-ellText')}
+                    title={String(step.description)}
+                  >
+                    <span>{step.description}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+export default themeable(Steps);