@cloudbase/weda-ui 2.0.27 → 3.1.1

package/src/web/components/form/select/time.jsx

@@ -1,145 +0,0 @@
-import weui from '../../../utils/weui';
-
-export function timePicker(options) {
-  const { start, end, defaultTime } = options;
-  // start time
-  const [startHour, startMin] = (start || '00:00').split(':');
-  const startTime = parseInt(startHour) * 60 + parseInt(startMin);
-  // end time
-  const [endHour, endMin] = (end || '23:59').split(':');
-  const endTime = parseInt(endHour) * 60 + parseInt(endMin);
-  if (startTime > endTime) {
-    throw 'startTime is bigger then endTime';
-  }
-  // init time
-  const nowTime = new Date();
-  const [initHour, initMin] = (
-    defaultTime || `${nowTime.getHours()}:${nowTime.getMinutes()}`
-  ).split(':');
-  const initTime = parseInt(initHour) * 60 + parseInt(initMin);
-  const fixInitTime = Math.max(startTime, Math.min(endTime, initTime));
-  const fixInitHour = Math.floor(fixInitTime / 60);
-  const fixInitMin = Math.floor(fixInitTime % 60);
-
-  const hours = [];
-  for (let hour = 0; hour < 24; hour++) {
-    const mins = [];
-    for (let min = 0; min < 60; min++) {
-      const now = hour * 60 + min;
-      if (now >= startTime && now <= endTime) {
-        mins.push({
-          value: min < 10 ? `0${min}` : `${min}`,
-          label: min < 10 ? `0${min}` : `${min}`,
-        });
-      }
-    }
-    if (mins.length > 0) {
-      hours.push({
-        value: hour < 10 ? `0${hour}` : `${hour}`,
-        label: hour < 10 ? `0${hour}` : `${hour}`,
-        children: mins,
-      });
-    }
-  }
-
-  const defaultValue = [
-    fixInitHour < 10 ? `0${fixInitHour}` : `${fixInitHour}`,
-    fixInitMin < 10 ? `0${fixInitMin}` : `${fixInitMin}`,
-  ];
-  weui.picker(hours, {
-    ...options,
-    id: String(Date.now()),
-    start: [startHour, startMin],
-    end: [endHour, endMin],
-    defaultValue,
-  });
-}
-
-/**
- * 年选择器
- */
-export function yearPicker(options) {
-  const { startDate, endDate, defaultDate } = options;
-  if (startDate > endDate) {
-    throw 'startDate is bigger then endDate';
-  }
-  // 当前年
-  const currentYear = new Date().getFullYear();
-  // 默认传入年
-  const defaultYear = defaultDate
-    ? new Date(defaultDate).getFullYear()
-    : currentYear;
-  // 最小年份
-  const minYear = startDate
-    ? new Date(startDate).getFullYear()
-    : currentYear - 100;
-  // 最大年份
-  const maxYear = endDate ? new Date(endDate).getFullYear() : currentYear + 100;
-  const years = Array.from({ length: maxYear - minYear + 1 }).map(
-    (item, index) => ({
-      label: `${minYear + index}年`,
-      value: minYear + index,
-    })
-  );
-  weui.picker(years, {
-    ...options,
-    defaultValue: [defaultYear],
-  });
-}
-
-/**
- * 年月选择器
- */
-export function monthPicker(options) {
-  const { startDate, endDate, defaultDate } = options;
-  if (startDate > endDate) {
-    throw 'startDate is bigger then endDate';
-  }
-  const _getYear = (d) => d.getFullYear();
-  const _getMonth = (d) => d.getMonth() + 1;
-  // 当前年月
-  const now = new Date();
-  const [currentYear, currentMonth] = [_getYear(now), _getMonth(now)];
-  // 默认传入年月
-  const def = defaultDate ? new Date(defaultDate) : now;
-  const [defaultYear, defaultMonth] = [_getYear(def), _getMonth(def)];
-  // 最小年月
-  const min = startDate && new Date(startDate);
-  const [minYear, minMonth] = [
-    min ? _getYear(min) : currentYear - 100,
-    min ? _getMonth(min) : 1,
-  ];
-  // 最大年月
-  const max = endDate && new Date(endDate);
-  const [maxYear, maxMonth] = [
-    max ? _getYear(max) : currentYear + 100,
-    max ? _getMonth(max) : 12,
-  ];
-  // 年份月份
-  const years = Array.from({ length: maxYear - minYear + 1 }).map((item, i) => {
-    const year = i + minYear;
-    let months = [];
-    let [minMonthWithYear, maxMonthWithYear] = [1, 12];
-    if (year === minYear) {
-      minMonthWithYear = Math.max(minMonth, 1);
-    }
-    if (year === maxYear) {
-      maxMonthWithYear = Math.min(maxMonth, 12);
-    }
-    months = Array.from({
-      length: maxMonthWithYear - minMonthWithYear + 1,
-    }).map((item, i) => ({
-      label: `${i + minMonthWithYear}月`,
-      value: i + minMonthWithYear,
-    }));
-    return {
-      label: `${i + minYear}年`,
-      value: i + minYear,
-      children: months,
-    };
-  });
-  weui.picker(years, {
-    ...options,
-    defaultValue: [defaultYear, defaultMonth],
-  });
-}

package/src/web/components/form/select/year.tsx

@@ -1,172 +0,0 @@
-import * as React from 'react';
-import {
-  Popover,
-  ConfigProvider,
-  useConfig,
-  Input,
-  Icon,
-  Button,
-} from 'tea-component';
-import classNames from '../../../utils/classnames';
-import { moment } from './index';
-import './index.css';
-
-/**
- * pc 版简易年份选择器
- * 传参与 DatePicker 保持一致
- */
-export default function YearPicker(props) {
-  const {
-    range = [],
-    disabled,
-    value,
-    onChange,
-    className,
-    placeholder,
-    size,
-    ...rest
-  } = props;
-  const { classPrefix } = useConfig();
-  const inputRef = React.useRef(null);
-  const [show, setShow] = React.useState(false);
-  const [page, setPage] = React.useState(0);
-  const [inputValue, setInputValue] = React.useState(transValueToYear(value));
-  const { pageYears, pageStart, pageEnd } = getYears(inputValue, page);
-  const [min, max] = [
-    transValueToYear(range?.[0]),
-    transValueToYear(range?.[1]),
-  ];
-
-  React.useEffect(() => {
-    setInputValue(transValueToYear(value));
-  }, [value]);
-
-  return (
-    <ConfigProvider classPrefix="wedatea2td">
-      <Popover
-        trigger="click"
-        visible={show}
-        onVisibleChange={(v) => !v && setShow(v)}
-        overlay={
-          <div
-            className={classNames(
-              `${classPrefix}-dropdown-box`,
-              'year-picker__overlay'
-            )}
-          >
-            <div
-              className={classNames(
-                `${classPrefix}-calendar__caption`,
-                'year-picker__header'
-              )}
-            >
-              <div className="year-picker__header-title">
-                {pageStart}-{pageEnd}
-              </div>
-              <div className="year-picker__header-actions">
-                <Button
-                  type="link"
-                  icon="arrowleft"
-                  title="上二十年"
-                  onClick={() => setPage((d) => d - 1)}
-                />
-                <Button
-                  type="link"
-                  icon="cur-active"
-                  title="当前二十年"
-                  onClick={() => setPage(0)}
-                />
-                <Button
-                  type="link"
-                  icon="arrowright"
-                  title="下二十年"
-                  onClick={() => setPage((d) => d + 1)}
-                />
-              </div>
-            </div>
-            <div
-              className={classNames(
-                `${classPrefix}-calendar__type--year`,
-                'year-picker__body'
-              )}
-            >
-              {pageYears.map((list) => (
-                <div
-                  key={list.join()}
-                  className={classNames(`${classPrefix}-calendar__row`)}
-                >
-                  {list.map((item) => {
-                    const isSelected = item === inputValue;
-                    const isDisabled =
-                      (min && Number(item) < Number(min)) ||
-                      (max && Number(item) > Number(max));
-                    return (
-                      <div
-                        key={item}
-                        className={classNames(
-                          `${classPrefix}-calendar__cell`,
-                          'year-picker__cell',
-                          {
-                            'is-selected': isSelected,
-                            'is-disabled': isDisabled,
-                          }
-                        )}
-                        onClick={() => {
-                          if (isDisabled) return;
-                          setShow(false);
-                          setInputValue(item);
-                          onChange?.(moment(item));
-                        }}
-                      >
-                        <span>{item}</span>
-                      </div>
-                    );
-                  })}
-                </div>
-              ))}
-            </div>
-          </div>
-        }
-      >
-        <div
-          // eslint-disable-next-line react/jsx-props-no-spreading
-          {...rest}
-          onClick={() => !disabled && setShow(true)}
-          className={classNames(`${classPrefix}-datepicker`, className)}
-        >
-          <div className={classNames(`${classPrefix}-datepicker__input`)}>
-            <Input
-              size={size}
-              ref={inputRef}
-              disabled={disabled}
-              placeholder={placeholder}
-              value={inputValue}
-              onFocus={() => inputRef.current.blur()}
-            />
-            <Icon type="dismiss" />
-          </div>
-        </div>
-      </Popover>
-    </ConfigProvider>
-  );
-}
-
-/**
- * 获取当前20年，page 表示分页，1表示下一页，-1表示上一页
- * @returns [][]
- */
-const getYears = (currentYear, page = 0, range = []) => {
-  currentYear = currentYear || new Date().getFullYear();
-  const startYear = (Math.floor(parseInt(currentYear) / 20) + page) * 20;
-  const pageYears = Array.from({ length: 5 }).map((item, i1) =>
-    Array.from({ length: 4 }).map((item, i2) => i1 * 4 + i2 + startYear + '')
-  );
-  return { pageYears, pageStart: startYear, pageEnd: startYear + 20 - 1 };
-};
-
-/**
- * 输入 moment 值转 string 年份
- */
-const transValueToYear = (val) => {
-  return moment.isMoment(val) ? val.format('YYYY') : '';
-};

package/src/web/components/form/switch/index.tsx

@@ -1,100 +0,0 @@
-import * as React from 'react';
-
-import classNames from '../../../utils/classnames';
-import getLocalCounter from '../../../utils/getLocalCounter';
-import { usePlatform } from '../../../utils/platform';
-import { ConfigProvider, Switch as TeaSwitch } from 'tea-component';
-import { renderDecorator } from '../renderDecorator';
-import { useSyncValue } from '../../../utils/useSyncValue';
-import type { CommonFormPropsType } from '../types';
-
-export default function Switch({
-  // 系统属性
-  id,
-  className,
-  style,
-  events = {},
-  // 组件属性
-  label = '标题',
-  labelVisible = true,
-  checked: defaultChecked,
-  layout = 'horizontal',
-  disabled = false,
-  requiredFlag = false,
-  decorator,
-}: PropsType) {
-  const isFlex = layout !== 'vertical';
-  const cls = classNames({
-    'weda-ui': true,
-    'weda-switch': true,
-    [className]: className,
-  });
-  const subCls = classNames({
-    'weui-cell': true,
-    'weui-cell_active': true,
-    'weui-cell_switch': true,
-    'weui-flex__item': isFlex,
-    'weui-cell_disabled': disabled,
-  });
-
-  const platform = usePlatform();
-  // 两次默认值不同时, 需要刷新
-  const [checked, setChecked] = useSyncValue(defaultChecked);
-
-  // 现在低码组件往源码组件传入的id不唯一, 暂时使用hashcode替代
-  const hashcode = getLocalCounter();
-  const _id = `switch-${hashcode}`;
-  const switchElement =
-    platform === 'h5' ? (
-      <div className={subCls}>
-        {isFlex ? <div className="weui-cell__bd"></div> : null}
-        <div className={isFlex ? 'weui-cell__ft' : 'weui-cell__bd'}>
-          <label htmlFor={_id} key={_id} className="weui-switch-cp">
-            <input
-              id={_id}
-              className="weui-switch-cp__input"
-              type="checkbox"
-              checked={checked}
-              disabled={disabled}
-              onChange={(ev) => {
-                const value = ev.target.checked;
-                setChecked(value);
-                events.change({ value }, { orgianalEvent: ev });
-              }}
-            />
-            <div className="weui-switch-cp__box"></div>
-          </label>
-        </div>
-      </div>
-    ) : (
-      <ConfigProvider classPrefix="wedatea2td">
-        <TeaSwitch
-          id={_id}
-          value={checked}
-          disabled={disabled}
-          onChange={(value, context) => {
-            const originEvent = context.event;
-            setChecked(value);
-            events.change({ value }, { originEvent });
-          }}
-        />
-      </ConfigProvider>
-    );
-
-  return renderDecorator(
-    switchElement,
-    decorator
-  )({
-    id,
-    className: cls,
-    style,
-    label: labelVisible ? label : null,
-    layout,
-    multiCell: false,
-    requiredFlag,
-  });
-}
-
-export interface PropsType extends CommonFormPropsType {
-  checked?: boolean;
-}

package/src/web/components/form/textarea/index.tsx

@@ -1,127 +0,0 @@
-import * as React from 'react';
-
-import classNames from '../../../utils/classnames';
-import './index.css';
-import { ConfigProvider, Input } from 'tea-component';
-import { usePlatform } from '../../../utils/platform';
-import { renderDecorator } from '../renderDecorator';
-import { useSyncValue } from '../../../utils/useSyncValue';
-import type { CommonFormPropsType } from '../types';
-
-export default function Textarea({
-  // 系统属性
-  id,
-  className,
-  style,
-  events = {},
-  // 组件属性
-  label = '标题',
-  labelVisible = true,
-  defaultValue = '',
-  placeholder = '请输入',
-  maxLength = 140,
-  disabled = false,
-  focus: autoFocus = false,
-  layout = 'horizontal',
-  requiredFlag = false,
-  counterVisible = true,
-  size = 'l',
-  decorator,
-}: PropsType) {
-  const platform = usePlatform();
-
-  const cls = classNames({
-    'weda-ui': true,
-    'weda-textarea': true,
-    [className]: className,
-  });
-  const subCls = classNames({
-    'weui-cell': true,
-    'weui-cell_active': true,
-    'weui-cell_form': true,
-    'weui-cell_disabled': disabled,
-  });
-
-  // 两次默认值不同时, 需要刷新value
-  const [value, setValue] = useSyncValue(defaultValue);
-  const counter = React.useMemo(() => value?.length || 0, [value]);
-
-  const onChange = function (e) {
-    const text = typeof e === 'string' ? e : e.target.value;
-    setValue(text);
-    events.change({ value: text });
-  };
-
-  const onFocus = function (e) {
-    events.focus?.({ value: e.target.value }, { originEvent: e });
-  };
-
-  const onBlur = function (e) {
-    events.blur?.({ value: e.target.value }, { originEvent: e });
-  };
-
-  let textAreaElement;
-  if (platform === 'h5') {
-    textAreaElement = (
-      <div className={subCls}>
-        <div className="weui-cell__bd">
-          <textarea
-            className="weui-textarea"
-            placeholder={placeholder}
-            value={value}
-            onChange={onChange}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            maxLength={maxLength}
-            disabled={disabled}
-            autoFocus={autoFocus}
-          ></textarea>
-          {counterVisible ? (
-            <div className="weui-textarea-counter">
-              <span>{counter}</span>/{maxLength}
-            </div>
-          ) : null}
-        </div>
-      </div>
-    );
-  } else {
-    textAreaElement = (
-      <ConfigProvider classPrefix="wedatea2td">
-        <Input.TextArea
-          size={size}
-          placeholder={placeholder}
-          value={value}
-          onChange={onChange}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          maxLength={maxLength}
-          disabled={disabled}
-          autoFocus={autoFocus}
-          showCount
-        ></Input.TextArea>
-      </ConfigProvider>
-    );
-  }
-
-  return renderDecorator(
-    textAreaElement,
-    decorator
-  )({
-    id,
-    className: cls,
-    style,
-    label: labelVisible ? label : null,
-    layout,
-    multiCell: false,
-    requiredFlag,
-    size,
-  });
-}
-export interface PropsType extends CommonFormPropsType {
-  defaultValue?: string;
-  placeholder?: string;
-  maxLength?: number;
-  focus?: boolean;
-  counterVisible?: boolean;
-  size?: 's' | 'm' | 'l' | 'full';
-}

package/src/web/components/form/tips/index.tsx

@@ -1,34 +0,0 @@
-import * as React from 'react';
-
-import classNames from '../../../utils/classnames';
-import { CommonPropsType } from '../../../types';
-import './index.css';
-
-export default function Tips({
-  // 系统属性
-  className,
-  // 组件属性
-  tips = '表单提示',
-  type = 'normal',
-  id,
-  style,
-}: PropsType) {
-  const cls = classNames({
-    'weda-ui': true,
-    'weda-tips': true,
-    'weui-cells__tips': !!tips,
-    'weui-cells__tips_warn': !!tips && type === 'warn',
-    [className]: className,
-  });
-
-  return (
-    <div className={cls} id={id} style={style}>
-      {tips}
-    </div>
-  );
-}
-
-export interface PropsType extends CommonPropsType {
-  tips?: string;
-  type?: 'warn' | 'normal';
-}

package/src/web/components/form/types.d.ts

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import type { CommonPropsType } from '../../types';
-
-export interface CommonFormPropsType extends CommonPropsType {
-  name?: string;
-  label?: string;
-  labelVisible?: boolean;
-  layout?: 'horizontal' | 'vertical';
-  disabled?: boolean;
-  requiredFlag?: boolean;
-  decorator?: React.FC<any>;
-}

package/src/web/components/form/uploader/index.tsx

@@ -1,65 +0,0 @@
-/* eslint-disable react/prop-types */
-import * as React from 'react';
-import { usePlatform } from '../../../utils/platform';
-import { ImageUploaderH5 as UploaderH5 } from './uploader.h5';
-import classNames from '../../../utils/classnames';
-import { UploaderPCInner, CLASS_PREFIX } from './uploader.pc';
-
-import './index.css';
-import { renderDecorator } from '../renderDecorator';
-
-/**
- * 图片组件上传，区分 h5端/pc端
- */
-
-function UploaderPc(props) {
-  const {
-    layout,
-    className,
-    id,
-    style,
-    labelVisible = true,
-    title = '上传图片',
-    requiredFlag = false,
-    decorator,
-    ...restProps
-  } = props;
-  const cls = classNames({
-    'weda-ui': true,
-    [className]: className,
-    cloudbase_standard: true,
-  });
-  return renderDecorator(
-    <UploaderPCInner
-      {...restProps}
-      style={{
-        height: '100%',
-        display: 'flex',
-        alignItems: 'center',
-      }}
-    />,
-    decorator
-  )({
-    id,
-    className: cls,
-    style,
-    label: labelVisible ? title : null,
-    layout,
-    multiCell: false,
-    requiredFlag,
-  });
-}
-export default function Uploader(props) {
-  const platform = usePlatform();
-  if (props?.showType === 'pc') {
-    return <UploaderPc {...props} />;
-  }
-  if (props?.showType === 'h5') {
-    return <UploaderH5 {...props} />;
-  }
-  return platform === 'h5' ? (
-    <UploaderH5 {...props} />
-  ) : (
-    <UploaderPc {...props} />
-  );
-}