amis 1.5.6-beta.5 → 1.6.0

package/src/components/CityArea.tsx

@@ -0,0 +1,315 @@
+/**
+ * @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 '../locale';
+import {themeable, ThemeProps} from '../theme';
+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,
+        province: db[province],
+        city: db[city],
+        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('../renderers/Form/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'
+    })
+  )
+);

package/src/components/Collapse.tsx

@@ -79,7 +79,7 @@ export class Collapse extends React.Component<CollapseProps, CollapseState> {
     super(props);
 
     this.toggleCollapsed = this.toggleCollapsed.bind(this);
-    this.state.collapsed = !!props.collapsed;
+    this.state.collapsed = props.collapsable ? !!props.collapsed : false;
   }
 
   static getDerivedStateFromProps(

package/src/components/ColorPicker.tsx

@@ -227,6 +227,7 @@ export class ColorControl extends React.PureComponent<
     const __ = this.props.translate;
     const isOpened = this.state.isOpened;
     const isFocused = this.state.isFocused;
+    const mobileUI = useMobileUI && isMobile();
 
     return (
       <div
@@ -261,6 +262,7 @@ export class ColorControl extends React.PureComponent<
           onFocus={this.handleFocus}
           onBlur={this.handleBlur}
           onClick={this.handleClick}
+          readOnly={mobileUI}
         />
 
         {clearable && !disabled && value ? (
@@ -273,7 +275,7 @@ export class ColorControl extends React.PureComponent<
           <Icon icon="caret" className="icon" onClick={this.handleClick} />
         </span>
 
-        {!(useMobileUI && isMobile()) && isOpened ? (
+        {!mobileUI && isOpened ? (
           <Overlay
             placement={placement || 'auto'}
             target={() => findDOMNode(this)}
@@ -320,45 +322,44 @@ export class ColorControl extends React.PureComponent<
             </PopOver>
           </Overlay>
         ) : null}
-        {
-          useMobileUI && isMobile() && (
-            <PopUp
-              className={cx(`${ns}ColorPicker-popup`)}
-              isShow={isOpened}
-              onHide={this.handleClick}
-            >
-              {allowCustomColor ? (
-                <SketchPicker
-                  styles={{}}
-                  disableAlpha={!!~['rgb', 'hex'].indexOf(format as string)}
-                  color={value}
-                  presetColors={presetColors}
-                  onChangeComplete={this.handleChange}
-                />
-              ) : (
-                <GithubPicker
-                  color={value}
-                  colors={
-                    Array.isArray(presetColors)
-                      ? (presetColors
-                          .filter(
-                            item => typeof item === 'string' || isObject(item)
-                          )
-                          .map(item =>
-                            typeof item === 'string'
-                              ? item
-                              : isObject(item)
-                              ? item?.color
-                              : item
-                          ) as string[])
-                      : undefined
-                  }
-                  onChangeComplete={this.handleChange}
-                />
-              )}
-            </PopUp>
-          )
-        }
+        {mobileUI && (
+          <PopUp
+            className={cx(`${ns}ColorPicker-popup`)}
+            container={popOverContainer}
+            isShow={isOpened}
+            onHide={this.handleClick}
+          >
+            {allowCustomColor ? (
+              <SketchPicker
+                styles={{}}
+                disableAlpha={!!~['rgb', 'hex'].indexOf(format as string)}
+                color={value}
+                presetColors={presetColors}
+                onChangeComplete={this.handleChange}
+              />
+            ) : (
+              <GithubPicker
+                color={value}
+                colors={
+                  Array.isArray(presetColors)
+                    ? (presetColors
+                        .filter(
+                          item => typeof item === 'string' || isObject(item)
+                        )
+                        .map(item =>
+                          typeof item === 'string'
+                            ? item
+                            : isObject(item)
+                            ? item?.color
+                            : item
+                        ) as string[])
+                    : undefined
+                }
+                onChangeComplete={this.handleChange}
+              />
+            )}
+          </PopUp>
+        )}
       </div>
     );
   }

package/src/components/DatePicker.tsx

@@ -15,7 +15,7 @@ import {ClassNamesFn, themeable, ThemeProps} from '../theme';
 import {PlainObject} from '../types';
 import Calendar from './calendar/Calendar';
 import 'react-datetime/css/react-datetime.css';
-import { localeable, LocaleProps, TranslateFn } from '../locale';
+import {localeable, LocaleProps, TranslateFn} from '../locale';
 import {isMobile, ucFirst} from '../utils/helper';
 
 const availableShortcuts: {[propName: string]: any} = {
@@ -280,16 +280,17 @@ export interface DateProps extends LocaleProps, ThemeProps {
   // 是否为内嵌模式，如果开启就不是 picker 了，直接页面点选。
   embed?: boolean;
   schedules?: Array<{
-    startTime: Date,
-    endTime: Date,
-    content: any,
-    className?: string
+    startTime: Date;
+    endTime: Date;
+    content: any;
+    className?: string;
   }>;
   scheduleClassNames?: Array<string>;
   largeMode?: boolean;
   onScheduleClick?: (scheduleData: any) => void;
-
   useMobileUI?: boolean;
+  // 在移动端日期展示有多种形式，一种是picker 滑动选择，一种是日历展开选择，mobileCalendarMode为calendar表示日历展开选择
+  mobileCalendarMode?: 'picker' | 'calendar';
 
   // 下面那个千万不要写，写了就会导致 keyof DateProps 得到的结果是 string | number;
   // [propName: string]: any;
@@ -315,7 +316,13 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
     shortcuts: '',
     closeOnSelect: true,
     overlayPlacement: 'auto',
-    scheduleClassNames: ['bg-warning', 'bg-danger', 'bg-success', 'bg-info', 'bg-secondary']
+    scheduleClassNames: [
+      'bg-warning',
+      'bg-danger',
+      'bg-success',
+      'bg-info',
+      'bg-secondary'
+    ]
   };
   state: DatePickerState = {
     isOpened: false,
@@ -561,17 +568,18 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
       embed,
       minDate,
       useMobileUI,
+      maxDate,
       schedules,
       largeMode,
       scheduleClassNames,
-      onScheduleClick
+      onScheduleClick,
+      mobileCalendarMode
     } = this.props;
 
     const __ = this.props.translate;
     const isOpened = this.state.isOpened;
     let date: moment.Moment | undefined = this.state.value;
 
-
     if (embed) {
       let schedulesData: DateProps['schedules'] = undefined;
       if (schedules && Array.isArray(schedules)) {
@@ -617,10 +625,13 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
             onClose={this.close}
             locale={locale}
             minDate={minDate}
+            maxDate={maxDate}
             // utc={utc}
             schedules={schedulesData}
             largeMode={largeMode}
             onScheduleClick={onScheduleClick}
+            embed={embed}
+            useMobileUI={useMobileUI}
           />
         </div>
       );
@@ -637,7 +648,8 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
           {
             'is-disabled': disabled,
             'is-focused': this.state.isFocused,
-            [`DatePicker--border${ucFirst(borderMode)}`]: borderMode
+            [`DatePicker--border${ucFirst(borderMode)}`]: borderMode,
+            'is-mobile': useMobileUI && isMobile()
           },
           className
         )}
@@ -695,39 +707,43 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
                 onClose={this.close}
                 locale={locale}
                 minDate={minDate}
+                maxDate={maxDate}
+                useMobileUI={useMobileUI}
                 // utc={utc}
               />
             </PopOver>
           </Overlay>
         ) : null}
-        {
-          useMobileUI && isMobile() ? (
-            <PopUp
-              className={cx(`${ns}DatePicker-popup`)}
-              isShow={isOpened}
-              onHide={this.handleClick}
-            >
-              {this.renderShortCuts(shortcuts)}
-
-              <Calendar
-                value={date}
-                onChange={this.handleChange}
-                requiredConfirm={!!(dateFormat && timeFormat)}
-                dateFormat={dateFormat}
-                inputFormat={inputFormat}
-                timeFormat={timeFormat}
-                isValidDate={this.checkIsValidDate}
-                viewMode={viewMode}
-                timeConstraints={timeConstraints}
-                input={false}
-                onClose={this.close}
-                locale={locale}
-                minDate={minDate}
-                // utc={utc}
-              />
-            </PopUp>
-          ) : null
-        }
+        {useMobileUI && isMobile() ? (
+          <PopUp
+            className={cx(`${ns}DatePicker-popup DatePicker-mobile`)}
+            container={popOverContainer}
+            isShow={isOpened}
+            showClose={false}
+            onHide={this.handleClick}
+          >
+            {mobileCalendarMode === 'calendar' && this.renderShortCuts(shortcuts)}
+
+            <Calendar
+              value={date}
+              onChange={this.handleChange}
+              requiredConfirm={!!(dateFormat && timeFormat)}
+              dateFormat={dateFormat}
+              inputFormat={inputFormat}
+              timeFormat={timeFormat}
+              isValidDate={this.checkIsValidDate}
+              viewMode={viewMode}
+              timeConstraints={timeConstraints}
+              input={false}
+              onClose={this.close}
+              locale={locale}
+              minDate={minDate}
+              maxDate={maxDate}
+              useMobileUI={useMobileUI}
+              // utc={utc}
+            />
+          </PopUp>
+        ) : null}
       </div>
     );
   }