amis-ui 1.0.0-beta.0

package/src/components/calendar/YearsView.tsx

@@ -0,0 +1,214 @@
+import moment from 'moment';
+import React from 'react';
+import {LocaleProps, localeable, utils, getRange, isMobile} from 'amis-core';
+import Picker from '../Picker';
+
+interface CustomYearsViewProps extends LocaleProps {
+  viewDate: moment.Moment;
+  selectedDate: moment.Moment;
+  subtractTime: (
+    amount: number,
+    type: string,
+    toSelected?: moment.Moment
+  ) => () => void;
+  addTime: (
+    amount: number,
+    type: string,
+    toSelected?: moment.Moment
+  ) => () => void;
+  showView: (view: string) => () => void;
+  minDate?: moment.Moment;
+  maxDate?: moment.Moment;
+  onChange?: () => void;
+  onClose?: () => void;
+  onConfirm?: (value: number[], types: string[]) => void;
+  useMobileUI: boolean;
+  updateOn?: string;
+  setDate?: (date: string) => void;
+  renderYear?: (props: any, year: number) => JSX.Element;
+  updateSelectedDate: (event: React.MouseEvent<any>, close?: boolean) => void;
+  isValidDate?: (
+    currentDate: moment.Moment,
+    selected?: moment.Moment
+  ) => boolean;
+}
+
+export class CustomYearsView extends React.Component<CustomYearsViewProps> {
+  state: {pickerValue: number[]};
+
+  constructor(props: any) {
+    super(props);
+
+    const {selectedDate, viewDate} = props;
+    const currentDate = selectedDate || viewDate || moment();
+
+    this.state = {
+      pickerValue: currentDate.toObject().years
+    };
+
+    this.updateSelectedYear = this.updateSelectedYear.bind(this);
+  }
+
+  renderYears(year: number) {
+    let years = [],
+      i = -1,
+      rows = [],
+      renderer = this.props.renderYear || this.renderYear,
+      selectedDate = this.props.selectedDate,
+      isValid = this.props.isValidDate || this.alwaysValidDate,
+      classes,
+      props,
+      currentYear: moment.Moment,
+      isDisabled,
+      noOfDaysInYear,
+      daysInYear,
+      validDay,
+      // Month and date are irrelevant here because
+      // we're only interested in the year
+      irrelevantMonth = 0,
+      irrelevantDate = 1;
+    year--;
+    while (i < 11) {
+      classes = 'rdtYear';
+      currentYear = this.props.viewDate
+        .clone()
+        .set({year: year, month: irrelevantMonth, date: irrelevantDate});
+
+      noOfDaysInYear = parseInt(currentYear.endOf('year').format('DDD'), 10);
+      daysInYear = Array.from({length: noOfDaysInYear}, function (e, i) {
+        return i + 1;
+      });
+
+      validDay = daysInYear.find(function (d) {
+        var day = currentYear.clone().dayOfYear(d);
+        return isValid(day);
+      });
+
+      isDisabled = validDay === undefined;
+
+      if (isDisabled) classes += ' rdtDisabled';
+
+      if (selectedDate && selectedDate.year() === year) classes += ' rdtActive';
+
+      // 第一个和最后一个置灰
+      if (i === -1 || i === 10) classes += ' text-muted';
+
+      props = {
+        'key': year,
+        'data-value': year,
+        'className': classes
+      };
+
+      if (!isDisabled)
+        (props as any).onClick =
+          this.props.updateOn === 'years'
+            ? this.updateSelectedYear
+            : this.props.setDate && this.props.setDate('year');
+
+      years.push(renderer(props, year, selectedDate && selectedDate.clone()));
+
+      if (years.length === 3) {
+        rows.push(React.createElement('tr', {key: i}, years));
+        years = [];
+      }
+
+      year++;
+      i++;
+    }
+
+    return rows;
+  }
+
+  updateSelectedYear(event: any) {
+    this.props.updateSelectedDate(event);
+  }
+
+  renderYear = (props: any, year: number, date?: moment.Moment) => {
+    return (
+      <td {...props}>
+        <span>{year}</span>
+      </td>
+    );
+  };
+
+  onConfirm = (value: number[]) => {
+    this.props.onConfirm && this.props.onConfirm(value, ['year']);
+  };
+
+  onPickerChange = (value: number[]) => {
+    this.setState({pickerValue: value[0]});
+  };
+
+  renderYearPicker = () => {
+    const {
+      translate: __,
+      minDate,
+      maxDate,
+      selectedDate,
+      viewDate
+    } = this.props;
+    const year = (selectedDate || viewDate || moment()).year();
+    const maxYear = maxDate ? maxDate.toObject().years : year + 100;
+    const minYear = minDate ? minDate.toObject().years : year - 100;
+    const title = __('Date.titleYear');
+
+    const columns = [
+      {
+        options: getRange(minYear, maxYear, 1)
+      }
+    ];
+
+    return (
+      <Picker
+        translate={this.props.translate}
+        locale={this.props.locale}
+        title={title}
+        columns={columns}
+        value={this.state.pickerValue}
+        onConfirm={this.onConfirm}
+        onChange={this.onPickerChange}
+        onClose={this.props.onClose}
+      />
+    );
+  };
+
+  alwaysValidDate() {
+    return true;
+  }
+
+  render() {
+    let year = this.props.viewDate.year();
+    year = year - (year % 10);
+    const __ = this.props.translate;
+    if (isMobile() && this.props.useMobileUI) {
+      return <div className="rdtYears">{this.renderYearPicker()}</div>;
+    }
+    return (
+      <div className="rdtYears">
+        <table className="headerTable">
+          <thead>
+            <tr>
+              <th
+                className="rdtPrev"
+                onClick={this.props.subtractTime(10, 'years')}
+              >
+                &laquo;
+              </th>
+              <th className="rdtSwitch">
+                {__('year-to-year', {from: year, to: year + 9})}
+              </th>
+              <th className="rdtNext" onClick={this.props.addTime(10, 'years')}>
+                &raquo;
+              </th>
+            </tr>
+          </thead>
+        </table>
+        <table>
+          <tbody>{this.renderYears(year)}</tbody>
+        </table>
+      </div>
+    );
+  }
+}
+
+export default localeable(CustomYearsView as any);

package/src/components/condition-builder/Expression.tsx

@@ -0,0 +1,244 @@
+import {
+  ExpressionComplex,
+  Field,
+  Funcs,
+  Func,
+  ExpressionFunc,
+  Type,
+  FieldSimple,
+  FieldGroup,
+  OperatorType
+} from './types';
+import React from 'react';
+import ConditionField from './Field';
+import {
+  autobind,
+  utils,
+  ThemeProps,
+  themeable,
+  localeable,
+  LocaleProps,
+  findTree,
+  filterTree
+} from 'amis-core';
+import Value from './Value';
+import InputSwitch from './InputSwitch';
+import ConditionFunc from './Func';
+import {Config} from './config';
+import Formula from './Formula';
+import {FormulaPickerProps} from '../formula/Picker';
+
+/**
+ * 支持4中表达式设置方式
+ *
+ * 1. 直接就是值，由用户直接填写。
+ * 2. 选择字段，让用户选一个字段。
+ * 3. 选择一个函数，然后会参数里面的输入情况是个递归。
+ * 4. 粗暴点，函数让用户自己书写。
+ */
+
+export interface ExpressionProps extends ThemeProps, LocaleProps {
+  value: ExpressionComplex;
+  data?: any;
+  index?: number;
+  onChange: (value: ExpressionComplex, index?: number) => void;
+  valueField?: FieldSimple;
+  fields?: Field[];
+  funcs?: Funcs;
+  allowedTypes?: Array<'value' | 'field' | 'func' | 'formula'>;
+  op?: OperatorType;
+  config: Config;
+  disabled?: boolean;
+  searchable?: boolean;
+  fieldClassName?: string;
+  formula?: FormulaPickerProps;
+  popOverContainer?: any;
+  renderEtrValue?: any;
+}
+
+const fieldMap = {
+  value: '值',
+  field: '字段',
+  func: '函数',
+  formula: '公式'
+};
+
+export class Expression extends React.Component<ExpressionProps> {
+  @autobind
+  handleInputTypeChange(type: 'value' | 'field' | 'func' | 'formula') {
+    let value = this.props.value;
+    const onChange = this.props.onChange;
+
+    if (type === 'value') {
+      value = '';
+    } else if (type === 'func') {
+      value = {
+        type: 'func',
+        func: (findTree(this.props.funcs!, item => (item as Func).type) as Func)
+          ?.type,
+        args: []
+      };
+    } else if (type === 'field') {
+      value = {
+        type: 'field',
+        field: ''
+      };
+    } else if (type === 'formula') {
+      value = {
+        type: 'formula',
+        value: ''
+      };
+    }
+    onChange(value, this.props.index);
+  }
+
+  @autobind
+  handleValueChange(data: any) {
+    this.props.onChange(data, this.props.index);
+  }
+
+  @autobind
+  handleFieldChange(field: string) {
+    let value = this.props.value;
+    const onChange = this.props.onChange;
+    value = {
+      type: 'field',
+      field
+    };
+    onChange(value, this.props.index);
+  }
+
+  @autobind
+  handleFuncChange(func: any) {
+    let value = this.props.value;
+    const onChange = this.props.onChange;
+    value = {
+      ...func,
+      type: 'func'
+    };
+    onChange(value, this.props.index);
+  }
+
+  @autobind
+  handleFormulaChange(formula: string) {
+    let value = this.props.value;
+    const onChange = this.props.onChange;
+    value = {
+      type: 'formula',
+      value: formula
+    };
+    onChange(value, this.props.index);
+  }
+
+  render() {
+    const {
+      value,
+      valueField,
+      allowedTypes,
+      funcs,
+      fields,
+      op,
+      classnames: cx,
+      fieldClassName,
+      config,
+      data,
+      disabled,
+      searchable,
+      formula,
+      popOverContainer,
+      renderEtrValue
+    } = this.props;
+    const inputType =
+      ((value as any)?.type === 'field'
+        ? 'field'
+        : (value as any)?.type === 'func'
+        ? 'func'
+        : (value as any)?.type === 'formula'
+        ? 'formula'
+        : value !== undefined
+        ? 'value'
+        : undefined) ||
+      allowedTypes?.[0] ||
+      'value';
+    const types = allowedTypes || ['value', 'field', 'func'];
+
+    if ((!Array.isArray(funcs) || !funcs.length) && ~types.indexOf('func')) {
+      types.splice(types.indexOf('func'), 1);
+    }
+
+    return (
+      <>
+        {inputType === 'value' ? (
+          <Value
+            field={valueField!}
+            value={value}
+            onChange={this.handleValueChange}
+            op={op}
+            data={data}
+            disabled={disabled}
+            formula={formula}
+            popOverContainer={popOverContainer}
+            renderEtrValue={renderEtrValue}
+          />
+        ) : null}
+
+        {inputType === 'field' ? (
+          <ConditionField
+            value={(value as any)?.field}
+            onChange={this.handleFieldChange}
+            fieldClassName={fieldClassName}
+            disabled={disabled}
+            searchable={searchable}
+            popOverContainer={popOverContainer}
+            options={
+              valueField
+                ? filterTree(
+                    fields!,
+                    item =>
+                      (item as any).children ||
+                      (item as FieldSimple).type === valueField.type
+                  )
+                : fields!
+            }
+          />
+        ) : null}
+
+        {inputType === 'func' ? (
+          <ConditionFunc
+            config={config}
+            value={value as ExpressionFunc}
+            onChange={this.handleFuncChange}
+            fieldClassName={fieldClassName}
+            funcs={funcs}
+            fields={fields}
+            allowedTypes={allowedTypes}
+            disabled={disabled}
+          />
+        ) : null}
+
+        {inputType === 'formula' ? (
+          <Formula
+            value={(value as any)?.value}
+            onChange={this.handleFormulaChange}
+            disabled={disabled}
+          />
+        ) : null}
+
+        {types.length > 1 ? (
+          <InputSwitch
+            disabled={disabled}
+            value={inputType}
+            popOverContainer={popOverContainer}
+            onChange={this.handleInputTypeChange}
+            options={types.map(item => ({
+              label: fieldMap[item],
+              value: item
+            }))}
+          />
+        ) : null}
+      </>
+    );
+  }
+}
+
+export default themeable(localeable(Expression));

package/src/components/condition-builder/Field.tsx

@@ -0,0 +1,152 @@
+import React from 'react';
+import {findDOMNode} from 'react-dom';
+import PopOverContainer from '../PopOverContainer';
+import ListSelection from '../GroupedSelection';
+import ResultBox from '../ResultBox';
+import {
+  ClassNamesFn,
+  ThemeProps,
+  themeable,
+  utils,
+  localeable,
+  LocaleProps,
+  findTree,
+  noop
+} from 'amis-core';
+import {Icon} from '../icons';
+import SearchBox from '../SearchBox';
+
+export interface ConditionFieldProps extends ThemeProps, LocaleProps {
+  options: Array<any>;
+  value: any;
+  onChange: (value: any) => void;
+  disabled?: boolean;
+  fieldClassName?: string;
+  searchable?: boolean;
+  popOverContainer?: any;
+}
+
+export interface ConditionFieldState {
+  searchText: string;
+}
+
+const option2value = (item: any) => item.name;
+
+export class ConditionField extends React.Component<
+  ConditionFieldProps,
+  ConditionFieldState
+> {
+  constructor(props: ConditionFieldProps) {
+    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[]) {
+    const txt = this.state.searchText;
+    if (!txt) {
+      return this.props.options;
+    }
+    return options
+      .map((item: any) => {
+        if (item.children) {
+          let children = item.children.filter((child: any) => {
+            return (
+              child.name.toLowerCase().includes(txt) ||
+              child.label.toLowerCase().includes(txt)
+            );
+          });
+          return children.length > 0
+            ? Object.assign({}, item, {children}) // 需要copy一份，防止覆盖原始数据
+            : false;
+        } else {
+          return item.name.toLowerCase().includes(txt) ||
+            item.label.toLowerCase().includes(txt)
+            ? item
+            : false;
+        }
+      })
+      .filter((item: any) => {
+        return !!item;
+      });
+  }
+
+  // 选了值，还原options
+  onPopClose(e: React.MouseEvent, onClose: () => void) {
+    this.setState({searchText: ''});
+    onClose();
+  }
+
+  render() {
+    const {
+      options,
+      onChange,
+      value,
+      classnames: cx,
+      fieldClassName,
+      disabled,
+      translate: __,
+      searchable,
+      popOverContainer
+    } = this.props;
+
+    return (
+      <PopOverContainer
+        popOverContainer={popOverContainer || (() => findDOMNode(this))}
+        popOverRender={({onClose}) => (
+          <>
+            {searchable ? (
+              <SearchBox mini={false} onSearch={this.onSearch} />
+            ) : null}
+            <ListSelection
+              multiple={false}
+              onClick={(e: any) => this.onPopClose(e, onClose)}
+              options={this.filterOptions(this.props.options)}
+              value={[value]}
+              option2value={option2value}
+              onChange={(value: any) =>
+                onChange(Array.isArray(value) ? value[0] : value)
+              }
+            />
+          </>
+        )}
+      >
+        {({onClick, ref, isOpened}) => (
+          <div className={cx('CBGroup-field')}>
+            <ResultBox
+              className={cx(
+                'CBGroup-fieldInput',
+                fieldClassName,
+                isOpened ? 'is-active' : ''
+              )}
+              ref={ref}
+              allowInput={false}
+              result={
+                value ? findTree(options, item => item.name === value) : ''
+              }
+              onResultChange={noop}
+              onResultClick={onClick}
+              placeholder={__('Condition.field_placeholder')}
+              disabled={disabled}
+            >
+              <span className={cx('CBGroup-fieldCaret')}>
+                <Icon icon="caret" className="icon" />
+              </span>
+            </ResultBox>
+          </div>
+        )}
+      </PopOverContainer>
+    );
+  }
+}
+
+export default themeable(localeable(ConditionField));

package/src/components/condition-builder/Formula.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import {localeable, LocaleProps, ThemeProps, themeable} from 'amis-core';
+import InputBox from '../InputBox';
+
+export interface FormulaProps extends ThemeProps, LocaleProps {
+  value: any;
+  onChange: (value: any) => void;
+  disabled?: boolean;
+}
+
+export class Formula extends React.Component<FormulaProps> {
+  render() {
+    const {
+      classnames: cx,
+      value,
+      onChange,
+      disabled,
+      translate: __
+    } = this.props;
+
+    return (
+      <div className={cx('CBFormula')}>
+        <InputBox
+          disabled={disabled}
+          value={value}
+          onChange={onChange}
+          placeholder={__('Condition.formula_placeholder')}
+          prefix={
+            <span className={cx('CBFormula-label')}>
+              {__('Condition.expression')}
+            </span>
+          }
+        />
+      </div>
+    );
+  }
+}
+
+export default themeable(localeable(Formula));