amis 1.9.0-beta.12 → 1.9.0-beta.15

package/src/components/table/Cell.tsx

@@ -0,0 +1,70 @@
+/**
+ * @file table/BodyCell
+ * @author fex
+ */
+
+import React from 'react';
+
+import {themeable, ThemeProps} from '../../theme';
+import {LocaleProps, localeable} from '../../locale';
+import {ColumnProps} from './index';
+
+const zIndex = 1;
+
+export interface Props extends ThemeProps, LocaleProps {
+  fixed?: string | boolean; // left | right
+  rowSpan?: number | any;
+  colSpan?: number | any;
+  key?: string | number;
+  className?: string;
+  children?: any;
+  tagName?: string;
+  style?: Object;
+  column?: ColumnProps;
+  wrapperComponent: any;
+  groupId?: string; // 表头分组随机生成的id
+  depth?: number;  // 表头分组
+}
+
+export class BodyCell extends React.Component<Props> {
+  static defaultProps = {
+    fixed: '',
+    wrapperComponent: 'td',
+    rowSpan: null,
+    colSpan: null
+  };
+
+  render() {
+    const {
+      fixed,
+      rowSpan,
+      colSpan,
+      key,
+      children,
+      className,
+      column,
+      style,
+      groupId,
+      depth,
+      wrapperComponent: Component,
+      classnames: cx
+    } = this.props;
+
+    return (
+      <Component
+        key={key || null}
+        rowSpan={rowSpan && rowSpan > 1 ? rowSpan : null}
+        colSpan={colSpan && colSpan > 1 ? colSpan : null}
+        className={cx('Table-cell', className, {
+          [cx(`Table-cell-fix-${fixed}`)] : fixed,
+          [`text-${column?.align}`] : column?.align
+        })}
+        style={fixed ? {position: 'sticky', zIndex, ...style} : {...style}}
+        data-group-id={groupId || null}
+        data-depth={depth || null}
+      >{children}</Component>
+    );
+  }
+}
+
+export default themeable(localeable(BodyCell));

package/src/components/table/HeadCellDropDown.tsx

@@ -0,0 +1,115 @@
+/**
+ * @file table/HeadCellDropDown
+ * @author fex
+ */
+
+import React from 'react';
+import {findDOMNode} from 'react-dom';
+
+import {themeable, ThemeProps} from '../../theme';
+import {LocaleProps, localeable} from '../../locale';
+import Overlay from '../Overlay';
+import PopOver from '../PopOver';
+
+export interface FilterPayload {
+  closeDropdown?: boolean;
+}
+
+export interface FilterDropdownProps {
+  setSelectedKeys?: (keys: Array<string | number> | string) => void,
+  selectedKeys?: Array<string | number> | string,
+  confirm: (payload: FilterPayload) => void,
+  clearFilters?: () => void
+}
+
+export interface Props extends ThemeProps, LocaleProps {
+  filterIcon: Function | React.ReactNode; // 图标方法 返回ReactNode
+  className: string; // 图标样式
+  layerClassName: string; // 展开层样式
+  active: boolean; // 图标是否高亮
+  popOverContainer?: () => Element | Text | null;
+  filterDropdown: (payload: FilterDropdownProps) => JSX.Element | null ; // 菜单内容
+  selectedKeys?: Array<string | number> | string;
+  setSelectedKeys?: (keys: Array<string | number> | string) => void;
+}
+
+export interface State {
+  isOpened: boolean;
+}
+
+export class HeadCellDropDown extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      isOpened: false
+    }
+
+    this.openLayer = this.openLayer.bind(this);
+    this.closeLayer = this.closeLayer.bind(this);
+  }
+
+  render() {
+    const {isOpened} = this.state;
+    const {
+      popOverContainer,
+      active,
+      className,
+      layerClassName,
+      filterIcon,
+      filterDropdown,
+      classnames: cx,
+      classPrefix: ns
+    } = this.props;
+
+    return (
+      <span
+        className={cx(
+          className,
+          active ? 'is-active' : ''
+        )}
+      >
+        <span onClick={this.openLayer}>
+          {filterIcon && typeof filterIcon === 'function'
+            ? filterIcon(active) : (filterIcon || null)}
+        </span>
+        {
+          isOpened ? (
+          <Overlay
+            container={popOverContainer || (() => findDOMNode(this))}
+            placement="left-bottom-left-top right-bottom-right-top"
+            target={
+              popOverContainer ? () => findDOMNode(this)!.parentNode : null
+            }
+            show
+          >
+            <PopOver
+              classPrefix={ns}
+              onHide={this.closeLayer}
+              className={cx(layerClassName)}
+              overlay
+            >
+              {filterDropdown && typeof filterDropdown === 'function'
+                ? filterDropdown({...this.props, confirm: (payload: FilterPayload) => {
+                  if (!(payload && payload.closeDropdown === false)) {
+                    this.closeLayer();
+                  }
+                }}) : (filterDropdown || null)}
+            </PopOver>
+          </Overlay>)
+          : null
+        }
+      </span>
+    );
+  }
+
+  openLayer() {
+    this.setState({isOpened: true});
+  }
+
+  closeLayer() {
+    this.setState({isOpened: false});
+  }
+}
+
+export default themeable(localeable(HeadCellDropDown));

package/src/components/table/HeadCellFilter.tsx

@@ -0,0 +1,193 @@
+/**
+ * @file table/HeadCellFilter
+ * @author fex
+ */
+
+import React from 'react';
+import {findDOMNode} from 'react-dom';
+import isEqual from 'lodash/isEqual';
+
+import {themeable, ThemeProps} from '../../theme';
+import {LocaleProps, localeable} from '../../locale';
+import HeadCellDropDown, {FilterDropdownProps, FilterPayload} from './HeadCellDropDown';
+import CheckBox from '../Checkbox';
+import Button from '../Button';
+import {Icon} from '../icons';
+
+export interface Props extends ThemeProps, LocaleProps {
+  column: any;
+  onFilter?: Function;
+  filteredValue?: Array<string>;
+  filterMultiple?: boolean;
+  popOverContainer?: () => Element | Text | null;
+}
+
+export interface OptionProps {
+  text: string;
+  value: string;
+  selected?: boolean;
+  children?: Array<OptionProps>;
+}
+
+export interface State {
+  options: Array<OptionProps>;
+  filteredValue:  Array<string>;
+}
+
+export class HeadCellFilter extends React.Component<Props, State> {
+  static defaultProps = {
+    filteredValue: [],
+    filterMultiple: false
+  };
+
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      options: [],
+      filteredValue: props.filteredValue || []
+    }
+  }
+
+  alterOptions(options: Array<any>) {
+    options = options.map(option => ({
+      ...option,
+      selected: this.state.filteredValue.indexOf(option.value) > -1
+    }));
+
+    return options;
+  }
+
+  componentDidMount() {
+    const {column} = this.props;
+    if (column.filters && column.filters.length > 0) {
+      this.setState({options: this.alterOptions(column.filters)});
+    }
+  }
+
+  componentDidUpdate(prevProps: Props, prevState: State) {
+    const {column} = this.props;
+    if (column.filters && column.filters.length > 0
+      && !isEqual(prevState.filteredValue, this.state.filteredValue)) {
+      this.setState({options: this.alterOptions(column.filters)});
+    }
+  }
+
+  render() {
+    const {options} = this.state;
+    const {
+      column,
+      popOverContainer,
+      classnames: cx,
+      classPrefix: ns
+    } = this.props;
+
+    const filterProps = {
+      filterDropdown: (payload: FilterDropdownProps) => {
+        const {setSelectedKeys, selectedKeys, confirm, clearFilters} = payload
+        return options && options.length > 0 ? (
+          <ul className={cx('DropDown-menu')}>
+            {!column.filterMultiple
+              ? options.map((option: any, index) => (
+                  <li
+                    key={index}
+                    className={cx({
+                      'is-active': option.selected
+                    })}
+                    onClick={() => this.handleClick(confirm, setSelectedKeys, [option.value])}
+                  >
+                    {option.text}
+                  </li>
+                ))
+              : options.map((option: any, index) => (
+                  <li key={index}>
+                    <CheckBox
+                      classPrefix={ns}
+                      onChange={e =>
+                        this.handleCheck(confirm, setSelectedKeys, e
+                          ? [option.value] : option.value)}
+                      checked={option.selected}
+                    >
+                      {option.text}
+                    </CheckBox>
+                  </li>
+                ))}
+            {column.filterMultiple ? (
+              <li
+                key="dropDown-multiple-menu"
+                className={cx('DropDown-multiple-menu')}
+              >
+                <Button
+                  size={'xs'}
+                  level={'primary'}
+                  onClick={() => this.handleConfirmClick(confirm)}
+                  >确定</Button>
+                <Button
+                  size={'xs'}
+                  onClick={() => this.handleCancelClick(confirm, setSelectedKeys)}
+                  >取消</Button>
+              </li>
+            ) : null}
+          </ul>
+        ) : null
+      },
+      setSelectedKeys: (keys: Array<string>) => this.setState({filteredValue: keys})
+    };
+
+    return (
+      <HeadCellDropDown
+        className={`${ns}TableCell-filterBtn`}
+        layerClassName={`${ns}TableCell-filterPopOver`}
+        filterIcon={<Icon icon="column-filter" className="icon" />}
+        active={column.filtered || options && options.some((item: any) => item.selected)}
+        popOverContainer={popOverContainer ? popOverContainer : () => findDOMNode(this)}
+        selectedKeys={this.state.filteredValue}
+        {...filterProps}
+        >
+      </HeadCellDropDown>
+    );
+  }
+
+  handleClick(
+    confirm: (payload?: FilterPayload) => void,
+    setSelectedKeys?: (keys?: (string | Array<string | number>)) => void,
+    selectedKeys?: Array<string>
+  ) {
+    const {onFilter, column} = this.props;
+
+    setSelectedKeys && setSelectedKeys(selectedKeys);
+
+    onFilter && onFilter({[column.key] : selectedKeys});
+    confirm();
+  }
+
+  handleCheck(
+    confirm: (payload?: FilterPayload) => void,
+    setSelectedKeys?: ((keys: (string | Array<string | number>)) => void | undefined),
+    selectedKeys?: Array<string>
+  ) {
+    const filteredValue = this.state.filteredValue;
+    // 选中
+    if (Array.isArray(selectedKeys)) {
+      setSelectedKeys && setSelectedKeys([...filteredValue, ...selectedKeys]);
+    } else { // 取消选中
+      setSelectedKeys && setSelectedKeys(filteredValue.filter(v => v !== selectedKeys));
+    }
+  }
+
+  handleConfirmClick(confirm: (payload?: FilterPayload) => void) {
+    const {onFilter, column} = this.props;
+    onFilter && onFilter({[column.key] : this.state.filteredValue});
+    confirm();
+  }
+
+  handleCancelClick(
+    confirm: (payload?: FilterPayload) => void,
+    setSelectedKeys?: ((keys: (string | Array<string | number>)) => void | undefined)
+  ) {
+    setSelectedKeys && setSelectedKeys([]);
+    confirm();
+  }
+}
+
+export default themeable(localeable(HeadCellFilter));

package/src/components/table/HeadCellSelect.tsx

@@ -0,0 +1,86 @@
+/**
+ * @file table/HeadCellSelect
+ * @author fex
+ */
+
+import React from 'react';
+import {findDOMNode} from 'react-dom';
+
+import {themeable, ThemeProps} from '../../theme';
+import {LocaleProps, localeable} from '../../locale';
+import HeadCellDropDown, {FilterPayload} from './HeadCellDropDown';
+import {RowSelectionOptionProps} from './index';
+import {Icon} from '../icons';
+
+export interface Props extends ThemeProps, LocaleProps {
+  selections: Array<RowSelectionOptionProps>;
+  keys: Array<string | number> | string;
+  popOverContainer?: () => Element | Text | null;
+}
+
+export interface State {
+  key: Array<string | number> | string;
+}
+
+export class HeadCellSelect extends React.Component<Props, State> {
+  static defaultProps = {
+    selections: []
+  };
+
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      key: ''
+    }
+  }
+
+  render() {
+    const {
+      selections,
+      keys: allKeys,
+      popOverContainer,
+      classnames: cx,
+      classPrefix: ns
+    } = this.props;
+
+    return (
+      <HeadCellDropDown
+        className={`${ns}TableCell-selectionBtn`}
+        layerClassName={`${ns}TableCell-selectionPopOver`}
+        filterIcon={<Icon icon="left-arrow" className="icon" />}
+        active={false}
+        popOverContainer={popOverContainer ? popOverContainer : () => findDOMNode(this)}
+        filterDropdown={({setSelectedKeys, selectedKeys, confirm, clearFilters}) => {
+          return <ul className={cx('DropDown-menu')}>
+            {selections.map((item, index) => (
+              <li
+                key={index}
+                onClick={() => {
+                  item.onSelect && item.onSelect(allKeys);
+                  this.handleClick(confirm, setSelectedKeys, item.key);
+                }}>
+                {item.text}
+              </li>
+            ))}
+          </ul> ;
+        }}
+        setSelectedKeys={keys => this.setState({key: keys})}
+        selectedKeys={this.state.key}
+        >
+      </HeadCellDropDown>
+    );
+  }
+
+  handleClick(
+    confirm: (payload?: FilterPayload) => void,
+    setSelectedKeys?: (keys?: Array<string | number> | string) => void | undefined,
+    selectedKeys?: Array<string> | string
+  ) {
+      setSelectedKeys && setSelectedKeys(selectedKeys);
+
+      confirm();
+  }
+}
+
+export default themeable(localeable(HeadCellSelect));

package/src/components/table/HeadCellSort.tsx

@@ -0,0 +1,102 @@
+/**
+ * @file table/HeadCellSort
+ * @author fex
+ */
+
+import React from 'react';
+
+import {themeable, ThemeProps} from '../../theme';
+import {LocaleProps, localeable} from '../../locale';
+import {Icon} from '../icons';
+
+export interface Props extends ThemeProps, LocaleProps {
+  column: any;
+  onSort?: Function;
+}
+
+export interface State {
+  order: string; // 升序还是降序
+  orderBy: string; // 一次只能按一列排序 当前列的key
+}
+
+export class HeadCellSort extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      order: '',
+      orderBy: ''
+    };
+  }
+
+  render() {
+    const {
+      column,
+      onSort,
+      classnames: cx
+    } = this.props;
+
+    return (
+      <span
+        className={cx('TableCell-sortBtn')}
+        onClick={() => {
+          const callback = () => {
+            if (onSort) {
+              onSort({
+                orderBy: this.state.orderBy,
+                order: this.state.order
+              });
+            }
+          }
+
+          let sortPayload = {};
+          if (column.key === this.state.orderBy) {
+            if (this.state.order === 'descend') {
+              // 降序改为取消
+              sortPayload = {orderBy: '', order: 'ascend'};
+            } else {
+              // 升序之后降序
+              sortPayload = {order: 'descend'};
+            }
+          } else {
+            // 默认先升序
+            sortPayload = {orderBy: column.key, order: 'ascend'};
+          }
+
+          this.setState(sortPayload, callback);
+        }}
+      >
+        <i
+          className={cx(
+            'TableCell-sortBtn--down',
+            this.state.orderBy === column.key && this.state.order === 'descend'
+              ? 'is-active'
+              : ''
+          )}
+        >
+          <Icon icon="sort-desc" className="icon" />
+        </i>
+        <i
+          className={cx(
+            'TableCell-sortBtn--up',
+            this.state.orderBy === column.key && this.state.order === 'ascend'
+              ? 'is-active'
+              : ''
+          )}
+        >
+          <Icon icon="sort-asc" className="icon" />
+        </i>
+        <i
+          className={cx(
+            'TableCell-sortBtn--default',
+            this.state.orderBy === column.key ? '' : 'is-active'
+          )}
+        >
+          <Icon icon="sort-default" className="icon" />
+        </i>
+      </span>
+    );
+  }
+}
+
+export default themeable(localeable(HeadCellSort));