amis-ui 1.0.0-beta.0

package/src/components/Alert.tsx

@@ -0,0 +1,300 @@
+/**
+ * @file Alert
+ * @author fex
+ */
+
+import React from 'react';
+import {render} from 'react-dom';
+import Modal from './Modal';
+import Button from './Button';
+import {ClassNamesFn, themeable, ThemeProps} from 'amis-core';
+import {LocaleProps, localeable} from 'amis-core';
+import Html from './Html';
+import type {PlainObject} from 'amis-core/dist/types';
+export interface AlertProps extends ThemeProps, LocaleProps {
+  container?: any;
+  confirmText?: string;
+  cancelText?: string;
+  title?: string;
+  confirmBtnLevel?: string;
+  alertBtnLevel?: string;
+}
+
+export interface AlertState {
+  show: boolean;
+  title?: string;
+  content: string;
+  confirm: boolean;
+  prompt?: boolean;
+  controls?: any;
+  value?: any;
+  confirmText?: string;
+}
+
+export class Alert extends React.Component<AlertProps, AlertState> {
+  static instance: any = null;
+  static getInstance() {
+    if (!Alert.instance) {
+      console.warn('Alert 组件应该没有被渲染，所以隐性的渲染到 body 了');
+      const container = document.body;
+      const div = document.createElement('div');
+      container.appendChild(div);
+      render(<FinnalAlert />, div);
+    }
+
+    return Alert.instance;
+  }
+
+  _resolve: (value: any) => void;
+  _modal: any;
+  _body: any;
+  state: AlertState = {
+    show: false,
+    title: '',
+    content: '',
+    confirm: false
+  };
+  constructor(props: AlertProps) {
+    super(props);
+
+    this.close = this.close.bind(this);
+    this.handleConfirm = this.handleConfirm.bind(this);
+    this.handleCancel = this.handleCancel.bind(this);
+    this.modalRef = this.modalRef.bind(this);
+    this.handleFormSubmit = this.handleFormSubmit.bind(this);
+    this.scopeRef = this.scopeRef.bind(this);
+
+    Alert.instance = this;
+  }
+
+  static defaultProps = {
+    confirmText: 'confirm',
+    cancelText: 'cancel',
+    title: 'Alert.info',
+    alertBtnLevel: 'primary',
+    confirmBtnLevel: 'danger'
+  };
+
+  componentDidMount() {
+    this._body && (this._body.innerHTML = this.state.content);
+  }
+
+  componentDidUpdate(prevProps: AlertProps, prevState: AlertState) {
+    if (prevState.content !== this.state.content) {
+      this._body && (this._body.innerHTML = this.state.content);
+    }
+  }
+
+  componentWillUnmount() {
+    Alert.instance = null;
+  }
+
+  schemaSope: any;
+  scopeRef(schemaSope: any) {
+    this.schemaSope = schemaSope;
+  }
+
+  handleConfirm() {
+    const form = this.schemaSope?.getComponentByName('form');
+
+    if (form) {
+      form.doAction({type: 'submit'});
+    } else {
+      this.close(true);
+    }
+  }
+
+  handleCancel() {
+    this.close(false);
+  }
+
+  close(confirmed: boolean) {
+    const isConfirm = this.state.confirm || this.state.prompt;
+
+    this.setState(
+      {
+        show: false,
+        prompt: false,
+        confirm: false
+      },
+      isConfirm ? () => this._resolve(confirmed) /*this._reject()*/ : undefined
+    );
+  }
+
+  alert(content: string, title?: string) {
+    this.setState({
+      title,
+      content,
+      show: true,
+      confirm: false
+    });
+  }
+
+  confirm(content: string, title?: string, confirmText?: string) {
+    this.setState({
+      title,
+      content,
+      show: true,
+      confirm: true,
+      confirmText
+    });
+
+    return new Promise(resolve => {
+      this._resolve = resolve;
+    });
+  }
+
+  prompt(
+    controls: any,
+    defaultValue?: any,
+    title: string = 'placeholder.enter',
+    confirmText: string = 'confirm'
+  ) {
+    if (typeof controls === 'string') {
+      // 兼容浏览器标准用法。
+      controls = [
+        {
+          name: 'text',
+          label: controls,
+          type: 'text'
+        }
+      ];
+
+      if (typeof defaultValue === 'string') {
+        defaultValue = {
+          text: defaultValue
+        };
+      }
+    } else if (!Array.isArray(controls)) {
+      controls = [controls];
+    }
+
+    this.setState({
+      title,
+      controls,
+      show: true,
+      prompt: true,
+      value: defaultValue,
+      confirmText
+    });
+
+    return new Promise(resolve => {
+      this._resolve = resolve;
+    });
+  }
+
+  modalRef(ref: any) {
+    this._modal = ref;
+  }
+
+  handleFormSubmit(values: any) {
+    this.close(values);
+  }
+
+  render() {
+    const {
+      container,
+      cancelText,
+      confirmText,
+      title,
+      confirmBtnLevel,
+      alertBtnLevel,
+      classnames: cx
+    } = this.props;
+    let theme = this.props.theme || 'cxd';
+    if (theme === 'default') {
+      theme = 'cxd';
+    }
+    const __ = this.props.translate;
+    const finalTitle = __(this.state.title ?? title);
+    const finalConfirmText = __(this.state.confirmText ?? confirmText);
+
+    return (
+      <Modal
+        show={this.state.show}
+        onHide={this.handleCancel}
+        container={container}
+        ref={this.modalRef}
+        closeOnEsc
+      >
+        {finalTitle ? (
+          <div className={cx('Modal-header')}>
+            <div className={cx('Modal-title')}>{finalTitle}</div>
+          </div>
+        ) : null}
+        <div className={cx('Modal-body')}>
+          {this.state.prompt ? (
+            renderForm(
+              this.state.controls,
+              this.state.value,
+              this.handleFormSubmit,
+              this.scopeRef,
+              theme
+            )
+          ) : (
+            <Html html={this.state.content} />
+          )}
+        </div>
+        {finalConfirmText ? (
+          <div className={cx('Modal-footer')}>
+            {this.state.confirm || this.state.prompt ? (
+              <Button onClick={this.handleCancel}>{__(cancelText)}</Button>
+            ) : null}
+            <Button
+              level={
+                this.state.confirm || this.state.prompt
+                  ? confirmBtnLevel
+                  : alertBtnLevel
+              }
+              onClick={this.handleConfirm}
+            >
+              {finalConfirmText}
+            </Button>
+          </div>
+        ) : null}
+      </Modal>
+    );
+  }
+}
+
+export type renderSchemaFn = (
+  controls: Array<any>,
+  value: PlainObject,
+  callback?: (values: PlainObject) => void,
+  scopeRef?: (value: any) => void,
+  theme?: string
+) => JSX.Element;
+let renderSchemaFn: renderSchemaFn;
+export function setRenderSchemaFn(fn: renderSchemaFn) {
+  renderSchemaFn = fn;
+}
+
+function renderForm(
+  controls: Array<any>,
+  value: PlainObject = {},
+  callback?: (values: PlainObject) => void,
+  scopeRef?: (value: any) => void,
+  theme?: string
+) {
+  return renderSchemaFn?.(controls, value, callback, scopeRef, theme);
+}
+
+export const alert: (content: string, title?: string) => void = (
+  content,
+  title
+) => Alert.getInstance().alert(content, title);
+export const confirm: (
+  content: string,
+  title?: string,
+  confirmText?: string
+) => Promise<any> = (content, title, confirmText) =>
+  Alert.getInstance().confirm(content, title, confirmText);
+export const prompt: (
+  controls: any,
+  defaultvalue?: any,
+  title?: string,
+  confirmText?: string
+) => Promise<any> = (controls, defaultvalue, title, confirmText) =>
+  Alert.getInstance().prompt(controls, defaultvalue, title, confirmText);
+export const FinnalAlert = themeable(localeable(Alert));
+export default FinnalAlert;

package/src/components/Alert2.tsx

@@ -0,0 +1,117 @@
+/**
+ * @file Alert2
+ * @author fex
+ */
+
+import React from 'react';
+import {ClassNamesFn, themeable} from 'amis-core';
+import {generateIcon} from 'amis-core';
+import {Icon, getIcon} from './icons';
+
+export interface AlertProps {
+  level: 'danger' | 'info' | 'success' | 'warning';
+  title?: string;
+  className?: string;
+  showCloseButton: boolean;
+  showIcon?: boolean;
+  icon?: string | React.ReactNode;
+  iconClassName?: string;
+  closeButtonClassName?: string;
+  onClose?: () => void;
+  classnames: ClassNamesFn;
+  classPrefix: string;
+}
+
+export interface AlertState {
+  show: boolean;
+}
+
+export class Alert extends React.Component<AlertProps, AlertState> {
+  static defaultProps: Pick<
+    AlertProps,
+    'level' | 'className' | 'showCloseButton'
+  > = {
+    level: 'info',
+    className: '',
+    showCloseButton: false
+  };
+  static propsList: Array<string> = [
+    'level',
+    'className',
+    'showCloseButton',
+    'onClose'
+  ];
+
+  constructor(props: AlertProps) {
+    super(props);
+
+    this.handleClick = this.handleClick.bind(this);
+    this.state = {
+      show: true
+    };
+  }
+
+  handleClick() {
+    this.setState(
+      {
+        show: false
+      },
+      this.props.onClose
+    );
+  }
+
+  render() {
+    const {
+      classnames: cx,
+      className,
+      level,
+      children,
+      showCloseButton,
+      title,
+      icon,
+      showIcon,
+      iconClassName,
+      closeButtonClassName
+    } = this.props;
+
+    // 优先使用内置svg，其次使用icon库
+    const iconNode = icon ? (
+      typeof icon === 'string' ? (
+        getIcon(icon) ? (
+          <Icon icon={icon} className={cx(`icon`)} />
+        ) : (
+          generateIcon(cx, icon, 'icon')
+        )
+      ) : React.isValidElement(icon) ? (
+        React.cloneElement(icon, {
+          className: cx(`Alert-icon`, icon.props?.className)
+        })
+      ) : null
+    ) : showIcon ? (
+      <Icon icon={`alert-${level}`} className={cx(`icon`)} />
+    ) : null;
+
+    return this.state.show ? (
+      <div className={cx('Alert', level ? `Alert--${level}` : '', className)}>
+        {showIcon && iconNode ? (
+          <div className={cx('Alert-icon', iconClassName)}>{iconNode}</div>
+        ) : null}
+        <div className={cx('Alert-content')}>
+          {title ? <div className={cx('Alert-title')}>{title}</div> : null}
+          <div className={cx('Alert-desc')}>{children}</div>
+        </div>
+        {showCloseButton ? (
+          <button
+            className={cx('Alert-close', closeButtonClassName)}
+            onClick={this.handleClick}
+            type="button"
+          >
+            <Icon icon="close" className="icon" />
+          </button>
+        ) : null}
+      </div>
+    ) : null;
+  }
+}
+
+export default themeable(Alert);

package/src/components/AnchorNav.tsx

@@ -0,0 +1,265 @@
+/**
+ * @file AnchorNav
+ * @description 锚点导航
+ * @author hsm-lv
+ */
+
+import React from 'react';
+import {ThemeProps, themeable} from 'amis-core';
+
+import {autobind} from 'amis-core';
+import {uncontrollable} from 'uncontrollable';
+import find from 'lodash/find';
+import type {PlainObject, Schema} from 'amis-core/dist/types';
+
+export interface AnchorNavSectionProps extends ThemeProps {
+  title?: string; // 标题
+  name: string | number; // 标识
+  body?: Schema; // Schema
+  className?: string; // 样式名
+}
+
+class AnchorNavSectionComponent extends React.PureComponent<AnchorNavSectionProps> {
+  contentDom: any;
+  contentRef = (ref: any) => (this.contentDom = ref);
+
+  render() {
+    const {classnames: cx, children, className} = this.props;
+
+    return (
+      <div ref={this.contentRef} className={cx('AnchorNav-section', className)}>
+        {children}
+      </div>
+    );
+  }
+}
+
+export const AnchorNavSection = themeable(AnchorNavSectionComponent);
+
+export interface AnchorNavProps extends ThemeProps {
+  links?: Array<AnchorNavSectionProps>; // 锚点数据
+  active?: string | number; // 激活标识
+  linkClassName?: string; // 导航 CSS类名
+  sectionClassName?: string; // 区域 CSS类名
+  sectionRender?: (
+    section: AnchorNavSectionProps,
+    props?: AnchorNavProps
+  ) => JSX.Element; // 锚点区域渲染器
+  onSelect?: (key: string | number) => void; // 选中回调方法
+  direction?: 'vertical' | 'horizontal'; // 导航方向
+}
+
+export interface AnchorNavState {
+  offsetArr: PlainObject[]; // 记录每个段落的offsetTop
+  fromSelect: boolean; // 标识滚动触发来源
+}
+
+export class AnchorNav extends React.Component<AnchorNavProps, AnchorNavState> {
+  static defaultProps: Pick<
+    AnchorNavProps,
+    'linkClassName' | 'sectionClassName' | 'direction'
+  > = {
+    linkClassName: '',
+    sectionClassName: '',
+    direction: 'vertical'
+  };
+
+  // 滚动区域DOM
+  contentDom: React.RefObject<HTMLDivElement> = React.createRef();
+
+  componentDidMount() {
+    // 初始化滚动标识
+    this.setState({fromSelect: false});
+
+    // add scroll event
+    const sectionRootDom =
+      this.contentDom && (this.contentDom.current as HTMLElement);
+    sectionRootDom.addEventListener('scroll', this.scrollToNav);
+    let offsetArr: Array<object> = [];
+    const {children, active} = this.props;
+
+    // 收集段落区域offsetTop
+    children &&
+      React.Children.forEach(
+        children,
+        (section: AnchorNavSectionComponent, index: number) => {
+          offsetArr.push({
+            key: section.props.name,
+            offsetTop: (sectionRootDom.children[index] as HTMLElement).offsetTop
+          });
+        }
+      );
+
+    this.setState(
+      {
+        offsetArr
+      },
+      () => active && this.scrollToSection(active)
+    );
+  }
+
+  @autobind
+  scrollToNav(e: Event) {
+    if (this.state.fromSelect) {
+      return;
+    }
+
+    // 获取滚动的scrollTop
+    const scrollTop: number = (e.target as HTMLElement).scrollTop;
+
+    // 判断scrollTop所在区域
+    const offsetArr = this.state.offsetArr;
+    const firstSection = offsetArr[0];
+    const lastSection = offsetArr[offsetArr.length - 1];
+    // 首层偏移
+    const offset = scrollTop + firstSection.offsetTop;
+
+    // 首层
+    if (offset <= firstSection.offsetTop) {
+      this.fireSelect(firstSection.key);
+    }
+    // 最后一层
+    else if (offset >= lastSection.offsetTop) {
+      this.fireSelect(lastSection.key);
+    } else {
+      // 段落区间判断
+      offsetArr.forEach((item, index) => {
+        if (
+          offset >= item.offsetTop &&
+          offset < offsetArr[index + 1].offsetTop
+        ) {
+          this.fireSelect(item.key);
+        }
+      });
+    }
+  }
+
+  scrollToSection(key: string | number) {
+    // 获取指定段落的offsettop
+    const offsetArr = this.state.offsetArr;
+    const section = find(offsetArr, item => item.key === key);
+    const sectionRootDom =
+      this.contentDom && (this.contentDom.current as HTMLElement);
+
+    // 滚动到指定段落
+    section &&
+      (sectionRootDom.scrollTop = section.offsetTop - offsetArr[0].offsetTop);
+  }
+
+  handleSelect(key: string | number) {
+    // 标记滚动来自导航选择
+    this.setState({fromSelect: true});
+    // 滚动到对应段落
+    this.scrollToSection(key);
+
+    const sectionRootDom =
+      this.contentDom && (this.contentDom.current as HTMLElement);
+
+    // 如果已经滚到底就不去更新导航选中了
+    if (
+      sectionRootDom.scrollHeight - sectionRootDom.scrollTop <
+      sectionRootDom.clientHeight
+    ) {
+      // fire event
+      this.fireSelect(key);
+    }
+
+    // 取消标记
+    this.setState({fromSelect: false});
+  }
+
+  fireSelect(key: string | number) {
+    const {onSelect} = this.props;
+    onSelect && onSelect(key);
+  }
+
+  renderLink(link: any, index: number) {
+    if (!link) {
+      return;
+    }
+
+    const {classnames: cx, active: activeProp} = this.props;
+    const {title, name} = link.props;
+    const active = activeProp === undefined && index === 0 ? name : activeProp;
+
+    return (
+      <li
+        className={cx('AnchorNav-link', active === name ? 'is-active' : '')}
+        key={index}
+        onClick={() => this.handleSelect(name)}
+      >
+        <a>{title}</a>
+      </li>
+    );
+  }
+
+  renderSection(section: any, index: number) {
+    if (!section) {
+      return;
+    }
+
+    const {active: activeProp, classnames} = this.props;
+    const name = section.props.name;
+    const active = activeProp === undefined && index === 0 ? name : activeProp;
+
+    return React.cloneElement(section, {
+      ...section.props,
+      key: index,
+      classnames,
+      active
+    });
+  }
+
+  render() {
+    const {
+      classnames: cx,
+      className,
+      linkClassName,
+      sectionClassName,
+      children,
+      direction
+    } = this.props;
+
+    if (!Array.isArray(children)) {
+      return null;
+    }
+
+    return (
+      <div
+        className={cx(
+          'AnchorNav',
+          {
+            [`AnchorNav--${direction}`]: direction
+          },
+          className
+        )}
+      >
+        <ul
+          className={cx('AnchorNav-link-wrap', linkClassName)}
+          role="anchorlist"
+        >
+          {children.map((link, index) => this.renderLink(link, index))}
+        </ul>
+
+        <div
+          className={cx('AnchorNav-section-wrap', sectionClassName)}
+          ref={this.contentDom}
+        >
+          {children.map((section, index) => {
+            return this.renderSection(section, index);
+          })}
+        </div>
+      </div>
+    );
+  }
+}
+
+const ThemedAnchorNav = themeable(
+  uncontrollable(AnchorNav, {
+    active: 'onSelect'
+  })
+);
+
+export default ThemedAnchorNav as typeof ThemedAnchorNav & {
+  AnchorNavSection: typeof AnchorNavSection;
+};