amis-ui 1.0.0-beta.0

package/src/components/ChainedSelection.tsx

@@ -0,0 +1,253 @@
+/**
+ * 级联多选框，支持无限极。从左侧到右侧一层层点选。
+ */
+import {BaseSelection, BaseSelectionProps} from './Selection';
+import {themeable} from 'amis-core';
+import React from 'react';
+import {uncontrollable} from 'uncontrollable';
+import Checkbox from './Checkbox';
+import {Option} from './Select';
+import {getTreeDepth} from 'amis-core';
+import times from 'lodash/times';
+import Spinner from './Spinner';
+import {localeable} from 'amis-core';
+
+export interface ChainedSelectionProps extends BaseSelectionProps {
+  defaultSelectedIndex?: string;
+}
+
+export interface ChainedSelectionState {
+  selected: Array<string>;
+}
+
+export class ChainedSelection extends BaseSelection<
+  ChainedSelectionProps,
+  ChainedSelectionState
+> {
+  valueArray: Array<Option>;
+  state: ChainedSelectionState = {
+    selected: []
+  };
+
+  componentDidMount() {
+    const defaultSelectedIndex = this.props.defaultSelectedIndex;
+
+    if (defaultSelectedIndex !== undefined) {
+      this.setState({
+        selected: [`${defaultSelectedIndex}`]
+      });
+    }
+  }
+
+  selectOption(option: Option, depth: number, id: string) {
+    const {onDeferLoad} = this.props;
+
+    const selected = this.state.selected.concat();
+    selected.splice(depth, selected.length - depth);
+    selected.push(id);
+
+    this.setState(
+      {
+        selected
+      },
+      option.defer && onDeferLoad ? () => onDeferLoad(option) : undefined
+    );
+  }
+
+  renderItem(option: Option, index: number, depth: number, id: string) {
+    const {
+      labelClassName,
+      disabled,
+      classnames: cx,
+      itemClassName,
+      itemRender,
+      multiple
+    } = this.props;
+    const valueArray = this.valueArray;
+
+    return (
+      <div
+        key={index}
+        className={cx(
+          'ChainedSelection-item',
+          itemClassName,
+          option.className,
+          disabled || option.disabled ? 'is-disabled' : '',
+          !!~valueArray.indexOf(option) ? 'is-active' : ''
+        )}
+        onClick={() => this.toggleOption(option)}
+      >
+        {multiple ? (
+          <Checkbox
+            size="sm"
+            checked={!!~valueArray.indexOf(option)}
+            disabled={disabled || option.disabled}
+            labelClassName={labelClassName}
+            description={option.description}
+          />
+        ) : null}
+
+        <div className={cx('ChainedSelection-itemLabel')}>
+          {itemRender(option, {
+            index: index,
+            multiple: multiple,
+            checked: !!~valueArray.indexOf(option),
+            onChange: () => this.toggleOption(option),
+            disabled: disabled || option.disabled
+          })}
+        </div>
+      </div>
+    );
+  }
+
+  renderOption(option: Option, index: number, depth: number, id: string) {
+    const {
+      labelClassName,
+      disabled,
+      classnames: cx,
+      itemClassName,
+      itemRender,
+      multiple
+    } = this.props;
+    const valueArray = this.valueArray;
+
+    if (Array.isArray(option.children) || option.defer) {
+      return (
+        <div
+          key={index}
+          className={cx(
+            'ChainedSelection-item',
+            itemClassName,
+            option.className,
+            disabled || option.disabled ? 'is-disabled' : '',
+            ~this.state.selected.indexOf(id) ? 'is-active' : ''
+          )}
+          onClick={() => this.selectOption(option, depth, id)}
+        >
+          <div className={cx('ChainedSelection-itemLabel')}>
+            {itemRender(option, {
+              index: index,
+              multiple: multiple,
+              checked: !!~this.state.selected.indexOf(id),
+              onChange: () => this.selectOption(option, depth, id),
+              disabled: disabled || option.disabled
+            })}
+          </div>
+
+          {option.defer && option.loading ? <Spinner size="sm" show /> : null}
+        </div>
+      );
+    }
+
+    return this.renderItem(option, index, depth, id);
+  }
+
+  render() {
+    const {
+      value,
+      options,
+      className,
+      placeholder,
+      classnames: cx,
+      option2value,
+      itemRender,
+      translate: __
+    } = this.props;
+
+    this.valueArray = BaseSelection.value2array(value, options, option2value);
+    let body: Array<React.ReactNode> = [];
+
+    if (Array.isArray(options) && options.length) {
+      const selected: Array<string | null> = this.state.selected.concat();
+      const depth = Math.min(getTreeDepth(options), 3);
+      times(Math.max(depth - selected.length, 1), () => selected.push(null));
+
+      selected.reduce(
+        (
+          {
+            body,
+            options,
+            subTitle,
+            indexes,
+            placeholder
+          }: {
+            body: Array<React.ReactNode>;
+            options: Array<Option> | null;
+            subTitle?: string;
+            indexes: Array<number>;
+            placeholder?: string;
+          },
+          selected,
+          depth
+        ) => {
+          let nextOptions: Array<Option> = [];
+          let nextSubTitle: string = '';
+          let nextPlaceholder: string = '';
+          let nextIndexes = indexes;
+
+          body.push(
+            <div key={depth} className={cx('ChainedSelection-col')}>
+              {subTitle ? (
+                <div className={cx('ChainedSelection-subTitle')}>
+                  {subTitle}
+                </div>
+              ) : null}
+              {Array.isArray(options) && options.length ? (
+                options.map((option, index) => {
+                  const id = indexes.concat(index).join('-');
+
+                  if (id === selected) {
+                    nextSubTitle = option.subTitle;
+                    nextOptions = option.children!;
+                    nextIndexes = indexes.concat(index);
+                    nextPlaceholder = option.placeholder;
+                  }
+
+                  return this.renderOption(option, index, depth, id);
+                })
+              ) : (
+                <div className={cx('ChainedSelection-placeholder')}>
+                  {__(placeholder)}
+                </div>
+              )}
+            </div>
+          );
+
+          return {
+            options: nextOptions,
+            subTitle: nextSubTitle,
+            placeholder: nextPlaceholder,
+            indexes: nextIndexes,
+            body: body
+          };
+        },
+        {
+          options,
+          body,
+          indexes: [],
+          placeholder
+        }
+      );
+    }
+
+    return (
+      <div className={cx('ChainedSelection', className)}>
+        {body && body.length ? (
+          body
+        ) : (
+          <div className={cx('ChainedSelection-placeholder')}>
+            {__(placeholder)}
+          </div>
+        )}
+      </div>
+    );
+  }
+}
+
+export default themeable(
+  localeable(
+    uncontrollable(ChainedSelection, {
+      value: 'onChange'
+    })
+  )
+);

package/src/components/Checkbox.tsx

@@ -0,0 +1,117 @@
+/**
+ * @file Checkbox
+ * @author fex
+ */
+
+import React from 'react';
+import {ClassNamesFn, themeable} from 'amis-core';
+import {autobind} from 'amis-core';
+
+const preventEvent = (e: any) => e.stopPropagation();
+
+interface CheckboxProps {
+  type: 'checkbox' | 'radio';
+  size?: 'sm' | 'lg' | 'small' | 'large';
+  label?: string;
+  labelClassName?: string;
+  className?: string;
+  onChange?: (value: any, shift?: boolean) => void;
+  value?: boolean | string | number;
+  inline?: boolean;
+  trueValue?: boolean | string | number;
+  falseValue?: boolean | string | number;
+  disabled?: boolean;
+  readOnly?: boolean;
+  checked?: boolean;
+  name?: string;
+  description?: string;
+  classPrefix: string;
+  classnames: ClassNamesFn;
+  partial?: boolean;
+  optionType?: 'default' | 'button';
+}
+
+export class Checkbox extends React.Component<CheckboxProps, any> {
+  static defaultProps: Pick<
+    CheckboxProps,
+    'trueValue' | 'falseValue' | 'type'
+  > = {
+    trueValue: true,
+    falseValue: false,
+    type: 'checkbox'
+  };
+
+  @autobind
+  handleCheck(e: React.ChangeEvent<any>) {
+    const {trueValue, falseValue, onChange} = this.props;
+
+    if (!onChange) {
+      return;
+    }
+
+    onChange(
+      e.currentTarget.checked ? trueValue : falseValue,
+      (e.nativeEvent as MouseEvent).shiftKey
+    );
+  }
+
+  render() {
+    let {
+      size,
+      className,
+      classnames: cx,
+      value,
+      label,
+      partial,
+      trueValue,
+      children,
+      disabled,
+      description,
+      readOnly,
+      checked,
+      type,
+      name,
+      labelClassName,
+      optionType
+    } = this.props;
+
+    return (
+      <label
+        className={cx(`Checkbox Checkbox--${type}`, className, {
+          'Checkbox--full': !partial,
+          // 'Checkbox--partial': partial
+          [`Checkbox--${size}`]: size,
+          'Checkbox--button': optionType === 'button',
+          'Checkbox--button--checked': optionType === 'button' && checked,
+          'Checkbox--button--disabled--unchecked':
+            optionType === 'button' && disabled && !checked
+        })}
+      >
+        <input
+          type={type}
+          checked={
+            typeof checked !== 'undefined'
+              ? checked
+              : typeof value === 'undefined'
+              ? value
+              : value == trueValue
+          }
+          onChange={this.handleCheck}
+          onClick={
+            preventEvent // 当点击 i 的时候，这个地方也会触发 click，很奇怪，干脆禁掉
+          }
+          disabled={disabled}
+          readOnly={readOnly}
+          name={name}
+        />
+        <i />
+        <span className={cx(labelClassName)}>{children || label}</span>
+        {description ? (
+          <div className={cx('Checkbox-desc')}>{description}</div>
+        ) : null}
+      </label>
+    );
+  }
+}
+
+export default themeable(Checkbox);

package/src/components/CityArea.tsx

@@ -0,0 +1,318 @@
+/**
+ * @file 移动端城市选择器
+ */
+import React, {useEffect, useState, memo} from 'react';
+
+import Picker from './Picker';
+import ResultBox from './ResultBox';
+import {useSetState, useUpdateEffect} from '../hooks';
+import {localeable, LocaleProps} from 'amis-core';
+import {themeable, ThemeProps} from 'amis-core';
+import {uncontrollable} from 'uncontrollable';
+import PopUp from './PopUp';
+import {PickerObjectOption} from './PickerColumn';
+
+export type AreaColumnOption = {
+  text: string;
+  value: number;
+};
+
+export interface AreaProps extends LocaleProps, ThemeProps {
+  value: any;
+  /**
+   * 允许选择城市？
+   */
+  allowCity?: boolean;
+  /**
+   * 允许选择地区？
+   */
+  allowDistrict?: boolean;
+  /**
+   * 允许选择街道？
+   */
+  allowStreet?: boolean;
+  /**
+   * 开启后只会存城市的 code 信息
+   */
+  extractValue?: boolean;
+  /**
+   * 是否将各个信息拼接成字符串。
+   */
+  joinValues?: boolean;
+  /**
+   * 拼接的符号是啥？
+   */
+  delimiter?: string;
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean;
+  useMobileUI?: boolean;
+  onChange: (value: any) => void;
+  /** 点击完成按钮时触发	 */
+  onConfirm?: (result: AreaColumnOption[], index: number) => void;
+  /** 点击取消按钮时触发	 */
+  onCancel?: (...args: unknown[]) => void;
+
+  popOverContainer?: any;
+}
+/**
+ * 街道
+ */
+type district = {
+  [propName: number]: {
+    [propName: number]: Array<number>;
+  };
+};
+interface DbState {
+  province: number[];
+  district: district;
+  [key: number]: string;
+  city: {
+    [key: number]: number[];
+  };
+}
+interface StateObj {
+  columns: {options: Array<AreaColumnOption>}[];
+}
+
+const CityArea = memo<AreaProps>(props => {
+  const {
+    joinValues = true,
+    extractValue = true,
+    delimiter = ',',
+    allowCity = true,
+    allowDistrict = true,
+    allowStreet = false,
+    // 默认北京东城区
+    value = 110101,
+    classnames: cx,
+    translate: __,
+    disabled = false,
+    popOverContainer,
+    useMobileUI
+  } = props;
+
+  const [values, setValues] = useState<Array<number>>([]);
+  const [street, setStreet] = useState('');
+  const [confirmValues, setConfirmValues] =
+    useState<Array<PickerObjectOption>>();
+  const [db, updateDb] = useSetState<DbState>();
+  const [state, updateState] = useSetState<StateObj>({
+    columns: []
+  });
+  const [isOpened, setIsOpened] = useState(false);
+
+  const onChange = (columnValues: Array<number>, columnIndex: number) => {
+    // 清空后面的值
+    while (columnValues[columnIndex++]) {
+      columnValues[columnIndex++] = -1;
+    }
+    let [provience, city, district] = columnValues;
+    if (city === -1) {
+      city = db.city?.[provience]?.[0];
+    }
+    if (district === -1) {
+      district = db.district?.[provience]?.[city]?.[0];
+    }
+    let tempValues = [provience, city, district];
+    if (!allowDistrict) {
+      tempValues.splice(2, 1);
+    }
+    if (!allowCity) {
+      tempValues.splice(1, 1);
+    }
+    setValues(tempValues);
+  };
+
+  const propsChange = () => {
+    const {onChange} = props;
+    const [province, city, district] = values;
+    const code =
+      allowDistrict && district
+        ? district
+        : allowCity && city
+        ? city
+        : province;
+    if (typeof extractValue === 'undefined' ? joinValues : extractValue) {
+      code
+        ? onChange(
+            allowStreet && street
+              ? [code, street].join(delimiter)
+              : String(code)
+          )
+        : onChange('');
+    } else {
+      onChange({
+        code,
+        provinceCode: province,
+        province: db[province],
+        cityCode: city,
+        city: db[city],
+        districtCode: district,
+        district: db[district],
+        street
+      });
+    }
+  };
+
+  const onConfirm = () => {
+    const confirmValues = values.map((item: number) => ({
+      text: db[item],
+      value: item
+    }));
+    setConfirmValues(confirmValues);
+    propsChange();
+    setIsOpened(false);
+  };
+
+  const onCancel = () => {
+    setIsOpened(false);
+    if (props.onCancel) props.onCancel();
+  };
+
+  const getPropsValue = () => {
+    // 最后一项的值
+    let code =
+      (value && value.code) ||
+      (typeof value === 'number' && value) ||
+      (typeof value === 'string' && /(\d{6})/.test(value) && RegExp.$1);
+    const values: Array<number> = [];
+    if (code && db[code]) {
+      code = parseInt(code, 10);
+      let provinceCode = code - (code % 10000);
+      let cityCode = code - (code % 100);
+      if (db[provinceCode]) {
+        values[0] = provinceCode;
+      }
+      if (db[cityCode] && allowCity) {
+        values[1] = cityCode;
+      } else if (~db.city[provinceCode]?.indexOf(code) && allowCity) {
+        values[1] = code;
+      }
+
+      if (code % 100 && allowDistrict) {
+        values[2] = code;
+      }
+      setValues(values);
+    }
+  };
+
+  const updateColumns = () => {
+    if (!db) {
+      return;
+    }
+    let [provience, city, district] = values;
+    const provienceColumn = db.province.map((code: number) => {
+      return {text: db[code], value: code, disabled};
+    });
+    const cityColumn = city
+      ? db.city[provience].map((code: number) => {
+          return {text: db[code], value: code, disabled};
+        })
+      : [];
+    const districtColumn =
+      city && district
+        ? db.district[provience][city].map((code: number) => {
+            return {text: db[code], value: code, disabled};
+          })
+        : [];
+    const columns = [
+      {options: provienceColumn},
+      {options: cityColumn},
+      {options: districtColumn}
+    ];
+    if (!allowDistrict || !allowCity) {
+      columns.splice(2, 1);
+    }
+    if (!allowCity) {
+      columns.splice(1, 1);
+    }
+    updateState({columns});
+  };
+
+  const loadDb = () => {
+    import('./CityDB').then(db => {
+      updateDb({
+        ...db.default,
+        province: db.province as any,
+        city: db.city,
+        district: db.district as district
+      });
+    });
+  };
+
+  useEffect(() => {
+    loadDb();
+  }, []);
+
+  useEffect(() => {
+    isOpened && db && getPropsValue();
+  }, [db, isOpened]);
+
+  useEffect(() => {
+    street && propsChange();
+  }, [street]);
+
+  useUpdateEffect(() => {
+    values.length && updateColumns();
+  }, [values]);
+
+  const result = confirmValues
+    ?.filter(item => item?.value)
+    ?.map(item => item.text)
+    .join(delimiter);
+
+  return (
+    <div className={cx(`CityArea`)}>
+      <ResultBox
+        className={cx('CityArea-Input', isOpened ? 'is-active' : '')}
+        allowInput={false}
+        result={result}
+        onResultChange={() => {}}
+        onResultClick={() => setIsOpened(!isOpened)}
+        placeholder={__('Condition.cond_placeholder')}
+        useMobileUI={useMobileUI}
+      ></ResultBox>
+      {allowStreet && values[0] ? (
+        <input
+          className={cx('CityArea-Input')}
+          value={street}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            setStreet(e.currentTarget.value)
+          }
+          placeholder={__('City.street')}
+          disabled={disabled}
+        />
+      ) : null}
+      <PopUp
+        className={cx(`CityArea-popup`)}
+        container={popOverContainer}
+        isShow={isOpened}
+        showConfirm
+        onConfirm={onConfirm}
+        onHide={onCancel}
+      >
+        <Picker
+          className={'CityArea-picker'}
+          columns={state.columns}
+          onChange={onChange as any}
+          showToolbar={false}
+          labelField="text"
+          itemHeight={40}
+          value={values}
+          classnames={props.classnames}
+          classPrefix={props.classPrefix}
+        />
+      </PopUp>
+    </div>
+  );
+});
+
+export default themeable(
+  localeable(
+    uncontrollable(CityArea, {
+      value: 'onChange'
+    })
+  )
+);