amis 1.5.8-beta.2 → 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/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,9 +322,10 @@ export class ColorControl extends React.PureComponent<
             </PopOver>
           </Overlay>
         ) : null}
-        {useMobileUI && isMobile() && (
+        {mobileUI && (
           <PopUp
             className={cx(`${ns}ColorPicker-popup`)}
+            container={popOverContainer}
             isShow={isOpened}
             onHide={this.handleClick}
           >

package/src/components/DatePicker.tsx

@@ -288,8 +288,9 @@ export interface DateProps extends LocaleProps, ThemeProps {
   scheduleClassNames?: Array<string>;
   largeMode?: boolean;
   onScheduleClick?: (scheduleData: any) => void;
-
   useMobileUI?: boolean;
+  // 在移动端日期展示有多种形式，一种是picker 滑动选择，一种是日历展开选择，mobileCalendarMode为calendar表示日历展开选择
+  mobileCalendarMode?: 'picker' | 'calendar';
 
   // 下面那个千万不要写，写了就会导致 keyof DateProps 得到的结果是 string | number;
   // [propName: string]: any;
@@ -571,7 +572,8 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
       schedules,
       largeMode,
       scheduleClassNames,
-      onScheduleClick
+      onScheduleClick,
+      mobileCalendarMode
     } = this.props;
 
     const __ = this.props.translate;
@@ -628,6 +630,8 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
             schedules={schedulesData}
             largeMode={largeMode}
             onScheduleClick={onScheduleClick}
+            embed={embed}
+            useMobileUI={useMobileUI}
           />
         </div>
       );
@@ -644,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
         )}
@@ -703,6 +708,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
                 locale={locale}
                 minDate={minDate}
                 maxDate={maxDate}
+                useMobileUI={useMobileUI}
                 // utc={utc}
               />
             </PopOver>
@@ -710,11 +716,13 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
         ) : null}
         {useMobileUI && isMobile() ? (
           <PopUp
-            className={cx(`${ns}DatePicker-popup`)}
+            className={cx(`${ns}DatePicker-popup DatePicker-mobile`)}
+            container={popOverContainer}
             isShow={isOpened}
+            showClose={false}
             onHide={this.handleClick}
           >
-            {this.renderShortCuts(shortcuts)}
+            {mobileCalendarMode === 'calendar' && this.renderShortCuts(shortcuts)}
 
             <Calendar
               value={date}
@@ -730,6 +738,8 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
               onClose={this.close}
               locale={locale}
               minDate={minDate}
+              maxDate={maxDate}
+              useMobileUI={useMobileUI}
               // utc={utc}
             />
           </PopUp>

package/src/components/DateRangePicker.tsx

@@ -785,7 +785,10 @@ export class DateRangePicker extends React.Component<
       viewMode = 'days',
       ranges
     } = this.props;
-    const useCalendarMobile = useMobileUI && isMobile() && ['days', 'months', 'quarters'].indexOf(viewMode) > -1;
+    const useCalendarMobile =
+      useMobileUI &&
+      isMobile() &&
+      ['days', 'months', 'quarters'].indexOf(viewMode) > -1;
 
     const {isOpened, isFocused, startDate, endDate} = this.state;
 
@@ -806,24 +809,28 @@ export class DateRangePicker extends React.Component<
     endViewValue && arr.push(endViewValue);
     const __ = this.props.translate;
 
-    const calendarMobile = <CalendarMobile
-      timeFormat={timeFormat}
-      inputFormat={inputFormat}
-      startDate={startDate}
-      endDate={endDate}
-      minDate={minDate}
-      maxDate={maxDate}
-      minDuration={minDuration}
-      maxDuration={maxDuration}
-      dateFormat={dateFormat}
-      embed={embed}
-      viewMode={viewMode}
-      close={this.close}
-      confirm={this.confirm}
-      onChange={this.handleMobileChange}
-      footerExtra={this.renderRanges(ranges)}
-      showViewMode={viewMode === 'quarters' || viewMode === 'months' ? 'years' : 'months'}
-    />;
+    const calendarMobile = (
+      <CalendarMobile
+        timeFormat={timeFormat}
+        inputFormat={inputFormat}
+        startDate={startDate}
+        endDate={endDate}
+        minDate={minDate}
+        maxDate={maxDate}
+        minDuration={minDuration}
+        maxDuration={maxDuration}
+        dateFormat={dateFormat}
+        embed={embed}
+        viewMode={viewMode}
+        close={this.close}
+        confirm={this.confirm}
+        onChange={this.handleMobileChange}
+        footerExtra={this.renderRanges(ranges)}
+        showViewMode={
+          viewMode === 'quarters' || viewMode === 'months' ? 'years' : 'months'
+        }
+      />
+    );
 
     if (embed) {
       return (
@@ -836,14 +843,16 @@ export class DateRangePicker extends React.Component<
             className
           )}
         >
-          {useCalendarMobile
-            ? calendarMobile
-            : this.renderCalendar()}
+          {useCalendarMobile ? calendarMobile : this.renderCalendar()}
         </div>
       );
     }
 
-    const CalendarMobileTitle = <div className={`${ns}CalendarMobile-title`}>{__('Calendar.datepicker')}</div>;
+    const CalendarMobileTitle = (
+      <div className={`${ns}CalendarMobile-title`}>
+        {__('Calendar.datepicker')}
+      </div>
+    );
 
     return (
       <div
@@ -887,33 +896,33 @@ export class DateRangePicker extends React.Component<
           useMobileUI && isMobile() ? (
             <PopUp
               isShow={isOpened}
+              container={popOverContainer}
               className={cx(`${ns}CalendarMobile-pop`)}
               onHide={this.close}
               header={CalendarMobileTitle}
             >
-              {useCalendarMobile
-                ? calendarMobile
-                : this.renderCalendar()}
+              {useCalendarMobile ? calendarMobile : this.renderCalendar()}
             </PopUp>
-          )
-          : <Overlay
-            target={() => this.dom.current}
-            onHide={this.close}
-            container={popOverContainer || (() => findDOMNode(this))}
-            rootClose={false}
-            placement={overlayPlacement}
-            show
-          >
-            <PopOver
-              classPrefix={ns}
-              className={cx(`${ns}DateRangePicker-popover`, popoverClassName)}
+          ) : (
+            <Overlay
+              target={() => this.dom.current}
               onHide={this.close}
-              onClick={this.handlePopOverClick}
-              overlay
+              container={popOverContainer || (() => findDOMNode(this))}
+              rootClose={false}
+              placement={overlayPlacement}
+              show
             >
-              {this.renderCalendar()}
-            </PopOver>
-          </Overlay>
+              <PopOver
+                classPrefix={ns}
+                className={cx(`${ns}DateRangePicker-popover`, popoverClassName)}
+                onHide={this.close}
+                onClick={this.handlePopOverClick}
+                overlay
+              >
+                {this.renderCalendar()}
+              </PopOver>
+            </Overlay>
+          )
         ) : null}
       </div>
     );

package/src/components/MonthRangePicker.tsx

@@ -572,23 +572,25 @@ export class MonthRangePicker extends React.Component<
     endViewValue && arr.push(endViewValue);
     const __ = this.props.translate;
 
-    const calendarMobile = <CalendarMobile
-      timeFormat={timeFormat}
-      inputFormat={inputFormat}
-      startDate={startDate}
-      endDate={endDate}
-      minDate={minDate}
-      maxDate={maxDate}
-      minDuration={minDuration}
-      maxDuration={maxDuration}
-      embed={embed}
-      viewMode="months"
-      close={this.close}
-      confirm={this.confirm}
-      onChange={this.handleMobileChange}
-      footerExtra={this.renderRanges(ranges)}
-      showViewMode="years"
-    />;
+    const calendarMobile = (
+      <CalendarMobile
+        timeFormat={timeFormat}
+        inputFormat={inputFormat}
+        startDate={startDate}
+        endDate={endDate}
+        minDate={minDate}
+        maxDate={maxDate}
+        minDuration={minDuration}
+        maxDuration={maxDuration}
+        embed={embed}
+        viewMode="months"
+        close={this.close}
+        confirm={this.confirm}
+        onChange={this.handleMobileChange}
+        footerExtra={this.renderRanges(ranges)}
+        showViewMode="years"
+      />
+    );
 
     if (embed) {
       return (
@@ -601,14 +603,16 @@ export class MonthRangePicker extends React.Component<
             className
           )}
         >
-          {mobileUI
-            ? calendarMobile
-            : this.renderCalendar()}
+          {mobileUI ? calendarMobile : this.renderCalendar()}
         </div>
       );
     }
 
-    const CalendarMobileTitle = <div className={`${ns}CalendarMobile-title`}>{__('Calendar.datepicker')}</div>;
+    const CalendarMobileTitle = (
+      <div className={`${ns}CalendarMobile-title`}>
+        {__('Calendar.datepicker')}
+      </div>
+    );
 
     return (
       <div
@@ -651,31 +655,33 @@ export class MonthRangePicker extends React.Component<
           mobileUI ? (
             <PopUp
               isShow={isOpened}
+              container={popOverContainer}
               className={cx(`${ns}CalendarMobile-pop`)}
               onHide={this.close}
               header={CalendarMobileTitle}
             >
               {calendarMobile}
             </PopUp>
-          )
-          : <Overlay
-            target={() => this.dom.current}
-            onHide={this.close}
-            container={popOverContainer || (() => findDOMNode(this))}
-            rootClose={false}
-            placement={overlayPlacement}
-            show
-          >
-            <PopOver
-              classPrefix={ns}
-              className={cx(`${ns}DateRangePicker-popover`, popoverClassName)}
+          ) : (
+            <Overlay
+              target={() => this.dom.current}
               onHide={this.close}
-              onClick={this.handlePopOverClick}
-              overlay
+              container={popOverContainer || (() => findDOMNode(this))}
+              rootClose={false}
+              placement={overlayPlacement}
+              show
             >
-              {this.renderCalendar()}
-            </PopOver>
-          </Overlay>
+              <PopOver
+                classPrefix={ns}
+                className={cx(`${ns}DateRangePicker-popover`, popoverClassName)}
+                onHide={this.close}
+                onClick={this.handlePopOverClick}
+                overlay
+              >
+                {this.renderCalendar()}
+              </PopOver>
+            </Overlay>
+          )
         ) : null}
       </div>
     );