amis-ui 1.0.0-beta.0

package/src/components/ImageGallery.tsx

@@ -0,0 +1,179 @@
+import React from 'react';
+import {themeable, ClassNamesFn, ThemeProps} from 'amis-core';
+import {autobind} from 'amis-core';
+import Modal from './Modal';
+import {Icon} from './icons';
+import {LocaleProps, localeable} from 'amis-core';
+
+export interface ImageGalleryProps extends ThemeProps, LocaleProps {
+  children: React.ReactNode;
+  modalContainer?: () => HTMLElement;
+}
+
+export interface ImageGalleryState {
+  isOpened: boolean;
+  index: number;
+  items: Array<{
+    src: string;
+    originalSrc: string;
+    title?: string;
+    caption?: string;
+  }>;
+}
+
+export class ImageGallery extends React.Component<
+  ImageGalleryProps,
+  ImageGalleryState
+> {
+  state: ImageGalleryState = {
+    isOpened: false,
+    index: -1,
+    items: []
+  };
+
+  @autobind
+  handleImageEnlarge(info: {
+    src: string;
+    originalSrc: string;
+    list?: Array<{
+      src: string;
+      originalSrc: string;
+      title?: string;
+      caption?: string;
+    }>;
+    title?: string;
+    caption?: string;
+    index?: number;
+  }) {
+    this.setState({
+      isOpened: true,
+      items: info.list ? info.list : [info],
+      index: info.index || 0
+    });
+  }
+
+  @autobind
+  close() {
+    this.setState({
+      isOpened: false
+    });
+  }
+
+  @autobind
+  prev() {
+    const index = this.state.index;
+    this.setState({
+      index: index - 1
+    });
+  }
+
+  @autobind
+  next() {
+    const index = this.state.index;
+    this.setState({
+      index: index + 1
+    });
+  }
+
+  @autobind
+  handleItemClick(e: React.MouseEvent<HTMLDivElement>) {
+    const index = parseInt(e.currentTarget.getAttribute('data-index')!, 10);
+    this.setState({
+      index
+    });
+  }
+
+  render() {
+    const {children, classnames: cx, modalContainer} = this.props;
+    const {index, items} = this.state;
+    const __ = this.props.translate;
+
+    return (
+      <>
+        {React.cloneElement(children as any, {
+          onImageEnlarge: this.handleImageEnlarge
+        })}
+
+        <Modal
+          closeOnEsc
+          size="full"
+          onHide={this.close}
+          show={this.state.isOpened}
+          contentClassName={cx('ImageGallery')}
+          container={modalContainer}
+        >
+          <a
+            data-tooltip={__('Dialog.close')}
+            data-position="left"
+            className={cx('ImageGallery-close')}
+            onClick={this.close}
+          >
+            <Icon icon="close" className="icon" />
+          </a>
+          {~index && items[index] ? (
+            <>
+              <div className={cx('ImageGallery-title')}>
+                {items[index].title}
+              </div>
+              <div className={cx('ImageGallery-main')}>
+                <img src={items[index].originalSrc} />
+
+                {items.length > 1 ? (
+                  <>
+                    <a
+                      className={cx(
+                        'ImageGallery-prevBtn',
+                        index <= 0 ? 'is-disabled' : ''
+                      )}
+                      onClick={this.prev}
+                    >
+                      <Icon icon="prev" className="icon" />
+                    </a>
+                    <a
+                      className={cx(
+                        'ImageGallery-nextBtn',
+                        index >= items.length - 1 ? 'is-disabled' : ''
+                      )}
+                      onClick={this.next}
+                    >
+                      <Icon icon="next" className="icon" />
+                    </a>
+                  </>
+                ) : null}
+              </div>
+            </>
+          ) : null}
+          {items.length > 1 ? (
+            <div className={cx('ImageGallery-footer')}>
+              <a className={cx('ImageGallery-prevList is-disabled')}>
+                <Icon icon="prev" className="icon" />
+              </a>
+              <div className={cx('ImageGallery-itemsWrap')}>
+                <div className={cx('ImageGallery-items')}>
+                  {items.map((item, i) => (
+                    <div
+                      key={i}
+                      data-index={i}
+                      onClick={this.handleItemClick}
+                      className={cx(
+                        'ImageGallery-item',
+                        i === index ? 'is-active' : ''
+                      )}
+                    >
+                      <img src={item.src} />
+                    </div>
+                  ))}
+                </div>
+              </div>
+              <a className={cx('ImageGallery-nextList is-disabled')}>
+                <Icon icon="next" className="icon" />
+              </a>
+            </div>
+          ) : null}
+        </Modal>
+      </>
+    );
+  }
+}
+
+export default themeable(localeable(ImageGallery));

package/src/components/Input.tsx

@@ -0,0 +1,72 @@
+/**
+ * @file 这个 Input 与系统默认的 input 不同的地方在于，
+ * 中文输入过程中不会触发 onChange 事件。对于 autoComplete
+ * 功能很有必要。
+ */
+import React from 'react';
+import {autobind} from 'amis-core';
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  forwardedRef: React.Ref<HTMLInputElement>;
+}
+
+export interface InputState {
+  value: any;
+}
+
+class InputInner extends React.Component<InputProps, InputState> {
+  isOnComposition: boolean = false;
+  state = {value: this.props.value};
+
+  componentDidUpdate(prevProps: InputProps) {
+    const props = this.props;
+    if (prevProps.value !== props.value) {
+      this.setState({
+        value: props.value
+      });
+    }
+  }
+
+  @autobind
+  handleComposition(e: React.CompositionEvent<HTMLInputElement>) {
+    this.isOnComposition = e.type !== 'compositionend';
+    if (!this.isOnComposition) {
+      this.handleChange(e as any);
+    }
+  }
+
+  @autobind
+  handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const {onChange} = this.props;
+    const value = e.currentTarget.value;
+
+    this.isOnComposition || (onChange && onChange(e));
+    this.setState({
+      value
+    });
+  }
+
+  render() {
+    const {forwardedRef, ...rest} = this.props;
+
+    return (
+      <input
+        type="text"
+        {...rest}
+        value={this.state.value}
+        ref={forwardedRef}
+        onChange={this.handleChange}
+        onCompositionStart={this.handleComposition}
+        onCompositionUpdate={this.handleComposition}
+        onCompositionEnd={this.handleComposition}
+      />
+    );
+  }
+}
+
+export default React.forwardRef<HTMLInputElement>((props, ref) => {
+  return <InputInner {...props} forwardedRef={ref} />;
+}) as React.ComponentType<
+  React.InputHTMLAttributes<HTMLInputElement> & {ref?: any}
+>;

package/src/components/InputBox.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import {ThemeProps, themeable} from 'amis-core';
+import Input from './Input';
+import {autobind, ucFirst} from 'amis-core';
+import {Icon} from './icons';
+
+export interface InputBoxProps
+  extends ThemeProps,
+    Omit<React.DOMAttributes<HTMLInputElement>, 'prefix' | 'onChange'> {
+  value?: string;
+  readOnly?: boolean;
+  onChange?: (value: string) => void;
+  onClear?: (e: React.MouseEvent<any>) => void;
+  clearable?: boolean;
+  disabled?: boolean;
+  hasError?: boolean;
+  placeholder?: string;
+  prefix?: JSX.Element;
+  children?: JSX.Element;
+  borderMode?: 'full' | 'half' | 'none';
+}
+
+export interface InputBoxState {
+  isFocused: boolean;
+}
+
+export class InputBox extends React.Component<InputBoxProps, InputBoxState> {
+  static defaultProps = {
+    clearable: true,
+    placeholder: ''
+  };
+
+  state = {
+    isFocused: false
+  };
+
+  @autobind
+  clearValue(e: any) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    const onClear = this.props.onClear;
+    const onChange = this.props.onChange;
+    onClear?.(e);
+    onChange?.('');
+  }
+
+  @autobind
+  handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const onChange = this.props.onChange;
+    onChange && onChange(e.currentTarget.value);
+  }
+
+  @autobind
+  handleFocus(e: any) {
+    const onFocus = this.props.onFocus;
+    onFocus && onFocus(e);
+    this.setState({
+      isFocused: true
+    });
+  }
+
+  @autobind
+  handleBlur(e: any) {
+    const onBlur = this.props.onBlur;
+    onBlur && onBlur(e);
+    this.setState({
+      isFocused: false
+    });
+  }
+
+  render() {
+    const {
+      className,
+      classnames: cx,
+      classPrefix,
+      clearable,
+      disabled,
+      hasError,
+      value,
+      placeholder,
+      prefix: result,
+      children,
+      borderMode,
+      onClick,
+      ...rest
+    } = this.props;
+    const isFocused = this.state.isFocused;
+
+    return (
+      <div
+        className={cx('InputBox', className, {
+          'is-focused': isFocused,
+          'is-disabled': disabled,
+          'is-error': hasError,
+          'is-clickable': onClick,
+          [`InputBox--border${ucFirst(borderMode)}`]: borderMode
+        })}
+        onClick={onClick}
+      >
+        {result}
+
+        <Input
+          {...rest}
+          value={value || ''}
+          onChange={this.handleChange}
+          placeholder={placeholder}
+          onFocus={this.handleFocus}
+          onBlur={this.handleBlur}
+          size={12}
+          disabled={disabled}
+        />
+
+        {children}
+
+        {clearable && !disabled && value ? (
+          <a onClick={this.clearValue} className={cx('InputBox-clear')}>
+            <Icon icon="close" className="icon" />
+          </a>
+        ) : null}
+      </div>
+    );
+  }
+}
+
+export default themeable(InputBox);

package/src/components/InputBoxWithSuggestion.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import {findDOMNode} from 'react-dom';
+import {localeable, LocaleProps} from 'amis-core';
+import {themeable, ThemeProps} from 'amis-core';
+// @ts-ignore
+import {matchSorter} from 'match-sorter';
+import PopOverContainer from './PopOverContainer';
+import SearchBox from './SearchBox';
+import ListSelection from './GroupedSelection';
+import InputBox from './InputBox';
+import {Icon} from './icons';
+
+export interface InputBoxWithSuggestionProps extends ThemeProps, LocaleProps {
+  options: Array<any>;
+  value: any;
+  onChange: (value: any) => void;
+  disabled?: boolean;
+  searchable?: boolean;
+  popOverContainer?: any;
+  hasError?: boolean;
+  placeholder?: string;
+  clearable?: boolean;
+}
+
+const option2value = (item: any) => item.value;
+
+export class InputBoxWithSuggestion extends React.Component<InputBoxWithSuggestionProps> {
+  constructor(props: InputBoxWithSuggestionProps) {
+    super(props);
+    this.state = {
+      searchText: ''
+    };
+    this.onSearch = this.onSearch.bind(this);
+    this.filterOptions = this.filterOptions.bind(this);
+  }
+
+  onSearch(text: string) {
+    let txt = text.toLowerCase();
+
+    this.setState({searchText: txt});
+  }
+
+  filterOptions(options: any[]) {
+    return matchSorter(options, this.props.value, {
+      keys: ['label', 'value']
+    });
+  }
+
+  // 选了值，还原options
+  onPopClose(e: React.MouseEvent, onClose: () => void) {
+    this.setState({searchText: ''});
+    onClose();
+  }
+
+  render() {
+    const {
+      placeholder,
+      onChange,
+      value,
+      classnames: cx,
+      disabled,
+      translate: __,
+      searchable,
+      popOverContainer,
+      clearable,
+      hasError
+    } = this.props;
+    const options = this.filterOptions(this.props.options);
+
+    return (
+      <PopOverContainer
+        popOverContainer={popOverContainer || (() => findDOMNode(this))}
+        popOverRender={({onClose}) => (
+          <>
+            {searchable ? (
+              <SearchBox mini={false} onSearch={this.onSearch} />
+            ) : null}
+            <ListSelection
+              multiple={false}
+              onClick={e => this.onPopClose(e, onClose)}
+              options={options}
+              value={[value]}
+              option2value={option2value}
+              onChange={(value: any) => {
+                onChange?.(value);
+              }}
+            />
+          </>
+        )}
+      >
+        {({onClick, ref, isOpened}) => (
+          <InputBox
+            className={cx('InputBox--sug', isOpened ? 'is-active' : '')}
+            ref={ref}
+            placeholder={placeholder}
+            disabled={disabled}
+            value={options.find(o => o.value === value)?.label ?? value}
+            onChange={onChange}
+            clearable={clearable}
+            onClick={onClick}
+            hasError={hasError}
+          >
+            <span className={cx('InputBox-caret')}>
+              <Icon icon="caret" className="icon" />
+            </span>
+          </InputBox>
+        )}
+      </PopOverContainer>
+    );
+  }
+}
+
+export default themeable(localeable(InputBoxWithSuggestion));

package/src/components/Layout.tsx

@@ -0,0 +1,123 @@
+/**
+ * @file Layout
+ * @description 页面布局，支持左边栏、顶部、内容区域布局。
+ * @author fex
+ *
+ * @param 参数说明：
+ * * children 会渲染在内容区。
+ * * header 头部区域
+ * * aside 边栏
+ * * asideClassName 边栏附加样式class
+ * * footer 页脚
+ * * folder 是否收起边栏
+ * * asideFixed 边栏是否为固定模式，如果是会用 position:fixed 来定位.
+ * * className 附件的样式名
+ * * contentClassName 内容区域附加样式名称
+ */
+
+import React from 'react';
+import {ClassNamesFn, themeable} from 'amis-core';
+
+interface LayoutProps {
+  header?: boolean | React.ReactNode;
+  headerClassName?: string;
+  aside?: boolean | React.ReactNode;
+  asideClassName: string;
+  boxed?: boolean;
+  folded?: boolean;
+  asideFixed: boolean;
+  headerFixed: boolean;
+  className?: string;
+  contentClassName?: string;
+  footer: boolean | React.ReactNode;
+  offScreen: boolean;
+  classPrefix: string;
+  classnames: ClassNamesFn;
+  size?: 'sm' | 'base' | 'md' | 'lg';
+  children?: React.ReactNode;
+  bodyClassName?: string;
+}
+
+export function Layout({
+  header,
+  headerClassName,
+  aside,
+  asideClassName,
+  children,
+  className,
+  contentClassName,
+  folded,
+  asideFixed,
+  headerFixed,
+  footer,
+  offScreen,
+  size,
+  boxed,
+  classnames: cx,
+  bodyClassName
+}: LayoutProps) {
+  let body = (
+    <div className={cx(`Layout-body`, contentClassName)}>{children}</div>
+  );
+
+  if (aside) {
+    body = (
+      <div className={cx('Layout-content')} role="main">
+        {body}
+      </div>
+    );
+  }
+
+  React.useEffect(() => {
+    bodyClassName && document.body.classList.add(bodyClassName);
+
+    return () => {
+      bodyClassName && document.body.classList.remove(bodyClassName);
+    };
+  }, [bodyClassName]);
+
+  return (
+    <div
+      className={cx(`Layout`, className, {
+        'Layout--boxed': boxed,
+        'Layout--withAside': !!aside,
+        'Layout--headerFixed': header ? headerFixed : false,
+        'Layout--asideFixed': aside ? asideFixed : false,
+        'Layout--folded': folded,
+        'Layout--offScreen': offScreen,
+        [`Layout--${size}`]: size,
+        'Layout--noFooter': !footer
+      })}
+    >
+      {header ? (
+        <div className={cx('Layout-header', headerClassName)}>{header}</div>
+      ) : null}
+      {aside ? (
+        <div className={cx(`Layout-aside`, asideClassName)}>
+          <div className={cx('Layout-asideWrap')}>
+            <div id="asideInner" className={cx('Layout-asideInner')}>
+              {aside}
+            </div>
+          </div>
+        </div>
+      ) : null}
+      {body}
+      {footer ? (
+        <footer className={cx('Layout-footer')} role="footer">
+          {footer}
+        </footer>
+      ) : null}
+    </div>
+  );
+}
+
+Layout.defaultProps = {
+  // asideWide: false,
+  asideFixed: true,
+  asideClassName: '',
+  headerFixed: true,
+  offScreen: false,
+  footer: false
+};
+
+export default themeable(Layout);

package/src/components/Link.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import {themeable, ThemeProps} from 'amis-core';
+import {autobind} from 'amis-core';
+import {generateIcon} from 'amis-core';
+
+export interface LinkProps
+  extends ThemeProps,
+    React.DOMAttributes<HTMLAnchorElement> {
+  /**
+   * 禁用
+   */
+  disabled?: boolean;
+
+  /**
+   * 图标
+   */
+  icon?: string;
+
+  /**
+   * 右侧图标
+   */
+  rightIcon?: string;
+
+  href?: string;
+  htmlTarget?: string;
+  title?: string;
+  children?: JSX.Element;
+}
+
+export class Link extends React.Component<LinkProps, object> {
+  constructor(props: LinkProps) {
+    super(props);
+  }
+
+  @autobind
+  handleClick(e: React.MouseEvent<any>) {
+    const {disabled, onClick} = this.props;
+    if (disabled) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+    onClick?.(e);
+  }
+
+  render() {
+    const {
+      className,
+      href,
+      classnames: cx,
+      disabled,
+      htmlTarget,
+      title,
+      icon,
+      rightIcon,
+      children,
+      classPrefix,
+      theme,
+      ...rest
+    } = this.props;
+
+    return (
+      <a
+        {...rest}
+        href={href}
+        target={htmlTarget}
+        className={cx(
+          `Link`,
+          {
+            'is-disabled': disabled
+          },
+          className
+        )}
+        title={title}
+        onClick={this.handleClick}
+      >
+        {icon ? generateIcon(cx, icon, 'Link-icon') : null}
+        {children}
+        {rightIcon ? generateIcon(cx, rightIcon, 'Link-icon') : null}
+      </a>
+    );
+  }
+}
+
+export default themeable(Link);