test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-30 02:48:55 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

date & date-range 支持 embed 内联模式

Browse Source
This commit is contained in:
liaoxuezhi 2020-10-24 23:16:45 +08:00
parent 3792124138
commit c282dc6f55
9 changed files with 619 additions and 444 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
docs/components/form/date-range.md
View File

@ -24,6 +24,24 @@ order: 15
}
```
## 内嵌模式
```schema:height="600" scope="body"
{
"type": "form",
"api": "https://houtai.baidu.com/api/mock2/form/saveForm",
"debug": true,
"controls": [
{
"type": "date-range",
"name": "date",
"label": "日期范围",
"embed": true
}
]
}
```
## 属性表
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
@ -38,3 +56,4 @@ order: 15
| maxDate | `string` | | 限制最大日期，用法同 [限制范围](./date#%E9%99%90%E5%88%B6%E8%8C%83%E5%9B%B4) |
| utc | `boolean` | `false` | [保存 UTC 值](./date#utc) |
| clearable | `boolean` | `true` | 是否可清除 |
| embed | `boolean` | `false` | 是否内联模式 |

23
docs/components/form/date.md
View File

@ -289,6 +289,28 @@ order: 13
}
```
## 内嵌模式
```schema:height="600" scope="body"
{
"type": "form",
"api": "https://houtai.baidu.com/api/mock2/form/saveForm",
"controls": [
{
"type": "static-date",
"name": "date",
"label": "当前值"
},
{
"type": "date",
"name": "date",
"label": "日期",
"embed": true
}
]
}
```
## 属性表
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
@ -305,4 +327,5 @@ order: 13
| maxDate | `string` | | 限制最大日期 |
| utc | `boolean` | `false` | 保存 utc 值 |
| clearable | `boolean` | `true` | 是否可清除 |
| embed | `boolean` | `false` | 是否内联模式 |
| timeConstrainst | `object` | `true` | 请参考： [react-datetime](https://github.com/YouCanBookMe/react-datetime) |

24
docs/components/form/datetime.md
View File

@ -274,6 +274,29 @@ order: 14
}
```
## 内嵌模式
```schema:height="600" scope="body"
{
"type": "form",
"api": "https://houtai.baidu.com/api/mock2/form/saveForm",
"controls": [
{
"type": "static-date",
"name": "date",
"format": "LLL",
"label": "当前值"
},
{
"type": "datetime",
"name": "date",
"label": "日期时间",
"embed": true
}
]
}
```
## 属性表
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
@ -289,4 +312,5 @@ order: 14
| maxDate | `string` | | 限制最大日期时间 |
| utc | `boolean` | `false` | 保存 utc 值 |
| clearable | `boolean` | `true` | 是否可清除 |
| embed | `boolean` | `false` | 是否内联 |
| timeConstrainst | `object` | `true` | 请参考： [react-datetime](https://github.com/YouCanBookMe/react-datetime) |

7
scss/components/form/_date-range.scss
View File

@ -133,3 +133,10 @@
margin-left: $gap-sm;
}
}
.#{$ns}DateRangeCalendar {
display: inline-block;
border: $DatePicker-borderWidth solid $DatePicker-borderColor;
background-color: $DatePicker-bg;
border-radius: $DatePicker-borderRadius;
}

7
scss/components/form/_date.scss
View File

@ -370,3 +370,10 @@ td.rdtYear {
}
}
}
.#{$ns}DateCalendar {
display: inline-block;
border: $DatePicker-borderWidth solid $DatePicker-borderColor;
background-color: $DatePicker-bg;
border-radius: $DatePicker-borderRadius;
}

35
src/components/DatePicker.tsx
View File

@ -251,6 +251,9 @@ export interface DateProps extends LocaleProps, ThemeProps {
timeConstraints?: any;
popOverContainer?: any;
// 是否为内嵌模式，如果开启就不是 picker 了，直接页面点选。
embed?: boolean;
// 下面那个千万不要写，写了就会导致 keyof DateProps 得到的结果是 string | number;
// [propName: string]: any;
}
@ -510,13 +513,43 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
utc,
overlayPlacement,
locale,
format
format,
embed
} = this.props;
const __ = this.props.translate;
const isOpened = this.state.isOpened;
let date: moment.Moment | undefined = this.state.value;
if (embed) {
return (
<div
className={cx(
`${ns}DateCalendar`,
{
'is-disabled': disabled
},
className
)}
>
<Calendar
value={date}
onChange={this.handleChange}
requiredConfirm={false}
dateFormat={dateFormat}
timeFormat={timeFormat}
isValidDate={this.checkIsValidDate}
viewMode={viewMode}
timeConstraints={timeConstraints}
input={false}
onClose={this.close}
locale={locale}
// utc={utc}
/>
</div>
);
}
return (
<div
tabIndex={0}

228
src/components/DateRangePicker.tsx
View File

@ -41,6 +41,7 @@ export interface DateRangePickerProps extends ThemeProps, LocaleProps {
resetValue?: any;
popOverContainer?: any;
dateFormat?: string;
embed?: boolean;
}
export interface DateRangePickerState {
@ -155,7 +156,7 @@ const availableRanges: {[propName: string]: any} = {
export class DateRangePicker extends React.Component<
DateRangePickerProps,
DateRangePickerState
> {
> {
static defaultProps = {
placeholder: '请选择日期范围',
format: 'X',
@ -163,7 +164,8 @@ export class DateRangePicker extends React.Component<
joinValues: true,
clearable: true,
delimiter: ',',
ranges: 'yesterday,7daysago,prevweek,thismonth,prevmonth,prevquarter',
ranges:
'yesterday,7daysago,prevweek,thismonth,prevmonth,prevquarter',
resetValue: '',
closeOnSelect: true,
overlayPlacement: 'auto'
@ -184,7 +186,9 @@ export class DateRangePicker extends React.Component<
(utc ? moment.utc(newValue.startDate) : newValue.startDate).format(
format
),
(utc ? moment.utc(newValue.endDate) : newValue.endDate).format(format)
(utc ? moment.utc(newValue.endDate) : newValue.endDate).format(
format
)
];
if (joinValues) {
@ -243,7 +247,12 @@ export class DateRangePicker extends React.Component<
this.state = {
isOpened: false,
isFocused: false,
...DateRangePicker.unFormatValue(value, format, joinValues, delimiter)
...DateRangePicker.unFormatValue(
value,
format,
joinValues,
delimiter
)
};
}
@ -253,7 +262,12 @@ export class DateRangePicker extends React.Component<
if (props.value !== value) {
this.setState({
...DateRangePicker.unFormatValue(value, format, joinValues, delimiter)
...DateRangePicker.unFormatValue(
value,
format,
joinValues,
delimiter
)
});
}
}
@ -377,6 +391,8 @@ export class DateRangePicker extends React.Component<
this.setState({
endDate: newValue.clone()
}, () => {
this.props.embed && this.confirm();
});
}
@ -507,98 +523,19 @@ export class DateRangePicker extends React.Component<
return <td {...props}>{currentDate.date()}</td>;
}
render() {
renderCalendar() {
const {
className,
classPrefix: ns,
value,
placeholder,
popOverContainer,
inputFormat,
format,
dateFormat,
joinValues,
delimiter,
clearable,
timeFormat,
ranges,
disabled,
locale,
overlayPlacement
embed
} = this.props;
const {isOpened, isFocused, startDate, endDate} = this.state;
const selectedDate = DateRangePicker.unFormatValue(
value,
format,
joinValues,
delimiter
);
const startViewValue = selectedDate.startDate
? selectedDate.startDate.format(inputFormat)
: '';
const endViewValue = selectedDate.endDate
? selectedDate.endDate.format(inputFormat)
: '';
const arr = [];
startViewValue && arr.push(startViewValue);
endViewValue && arr.push(endViewValue);
const __ = this.props.translate;
const {startDate, endDate} = this.state;
return (
<div
tabIndex={0}
onKeyPress={this.handleKeyPress}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
className={cx(
`${ns}DateRangePicker`,
{
'is-disabled': disabled,
'is-focused': isFocused
},
className
)}
ref={this.dom}
onClick={this.handleClick}
>
{arr.length ? (
<span className={`${ns}DateRangePicker-value`}>
{arr.join(__(' 至 '))}
</span>
) : (
<span className={`${ns}DateRangePicker-placeholder`}>
{__(placeholder)}
</span>
)}
{clearable && !disabled && value ? (
<a className={`${ns}DateRangePicker-clear`} onClick={this.clearValue}>
<Icon icon="close" className="icon" />
</a>
) : null}
<a className={`${ns}DateRangePicker-toggler`}>
<Icon icon="calendar" className="icon" />
</a>
{isOpened ? (
<Overlay
target={() => this.dom.current}
onHide={this.close}
container={popOverContainer || (() => findDOMNode(this))}
rootClose={false}
placement={overlayPlacement}
show
>
<PopOver
classPrefix={ns}
className={`${ns}DateRangePicker-popover`}
onHide={this.close}
onClick={this.handlePopOverClick}
overlay
>
<div className={`${ns}DateRangePicker-wrap`}>
{this.renderRanges(ranges)}
@ -634,10 +571,12 @@ export class DateRangePicker extends React.Component<
locale={locale}
/>
{embed ? null : (
<div key="button" className={`${ns}DateRangePicker-actions`}>
<a
className={cx('rdtBtn rdtBtnConfirm', {
'is-disabled':
!this.state.startDate || !this.state.endDate
})}
onClick={this.confirm}
@ -648,13 +587,126 @@ export class DateRangePicker extends React.Component<
{__('取消')}
</a>
</div>
)}
</div>
);
}
render() {
const {
className,
classPrefix: ns,
value,
placeholder,
popOverContainer,
inputFormat,
format,
joinValues,
delimiter,
clearable,
disabled,
embed,
overlayPlacement
} = this.props;
const {isOpened, isFocused} = this.state;
const selectedDate = DateRangePicker.unFormatValue(
value,
format,
joinValues,
delimiter
);
const startViewValue = selectedDate.startDate
? selectedDate.startDate.format(inputFormat)
: '';
const endViewValue = selectedDate.endDate
? selectedDate.endDate.format(inputFormat)
: '';
const arr = [];
startViewValue && arr.push(startViewValue);
endViewValue && arr.push(endViewValue);
const __ = this.props.translate;
if (embed) {
return (
<div
className={cx(
`${ns}DateRangeCalendar`,
{
'is-disabled': disabled
},
className
)}
>
{this.renderCalendar()}
</div>
);
}
return (
<div
tabIndex={0}
onKeyPress={this.handleKeyPress}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
className={cx(
`${ns}DateRangePicker`,
{
'is-disabled': disabled,
'is-focused': isFocused
},
className
)}
ref={this.dom}
onClick={this.handleClick}
>
{arr.length ? (
<span className={`${ns}DateRangePicker-value`}>
{arr.join(__(' 至 '))}
</span>
) : (
<span className={`${ns}DateRangePicker-placeholder`}>
{__(placeholder)}
</span>
)}
{clearable && !disabled && value ? (
<a
className={`${ns}DateRangePicker-clear`}
onClick={this.clearValue}
>
<Icon icon="close" className="icon" />
</a>
) : null}
<a className={`${ns}DateRangePicker-toggler`}>
<Icon icon="calendar" className="icon" />
</a>
{isOpened ? (
<Overlay
target={() => this.dom.current}
onHide={this.close}
container={popOverContainer || (() => findDOMNode(this))}
rootClose={false}
placement={overlayPlacement}
show
>
<PopOver
classPrefix={ns}
className={`${ns}DateRangePicker-popover`}
onHide={this.close}
onClick={this.handlePopOverClick}
overlay
>
{this.renderCalendar()}
</PopOver>
</Overlay>
) : null}
</div>
);
}
}
}
export default themeable(localeable(DateRangePicker));

5
src/renderers/Form/Date.tsx
View File

@ -31,6 +31,11 @@ export interface DateBaseControlSchema extends FormBaseControl {
* 设定是否存储 utc 时间。
*/
utc?: boolean;
/**
* 是否为内联模式？
*/
emebed?: boolean;
}
/**

5
src/renderers/Form/DateRange.tsx
View File

@ -53,6 +53,11 @@ export interface DateRangeControlSchema extends FormBaseControl {
* 这里面 value 需要特殊说明一下，因为支持相对值。* `-2mins` 2分钟前\n * `+2days` 2天后\n* `-10week` 十周前\n可用单位： `min`、`hour`、`day`、`week`、`month`、`year`。所有单位支持复数形式。
*/
value?: any;
/**
* 开启后变成非弹出模式，即内联模式。
*/
embed?: boolean;
}
export interface DateRangeProps