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

Merge pull request #55 from catchonme/master

Browse Source 
video 增加倍速功能
This commit is contained in:
liaoxuezhi 2019-06-03 09:46:43 +08:00 committed by GitHub
commit fc78161f0f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 40 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/advanced.md
View File

@ -33,7 +33,7 @@ shortname: advanced
- form 中弹出则会把 form 中的数据复制份传给 dialog。
- crud 中的批量操作按钮。把整个列表数据复制给 dialog。
- crud 中的某一项中的按钮，则只会把对应的那一条数据拷贝给 dialog。
- `servcie`
- `service`
- 父级 容器中的数据可以直接使用，如 page 容器
- 如果配置了 `api`, `api` 返回的数据可以用。

2
docs/renderers.md
View File

@ -20,7 +20,6 @@ amis 页面是通过 JSON 配置出来的，是由一个一个渲染模型组成
- [Email](./renderers/Form/Email.md): Email 输入框
- [Password](./renderers/Form/Password.md): 密码输入框
- [Number](./renderers/Form/Number.md): 数字输入框
- [Divider](./renderers/Form/Divider.md): 分割线
- [Select](./renderers/Form/Select.md): 选项表单
- [Chained-Select](./renderers/Form/Chained-Select.md): 无限级别下拉
- [Checkbox](./renderers/Form/Checkbox.md): 勾选框
@ -59,6 +58,7 @@ amis 页面是通过 JSON 配置出来的，是由一个一个渲染模型组成
- [Action](./renderers/Action.md): 一种特殊的渲染器，它本身是一个按钮，同时它能触发事件
- [Dialog](./renderers/Dialog.md): Dialog 由 Action 触发。他是一个类似于 Page 的容器模型
- [Drawer](./renderers/Drawer.md): Drawer 由 Action 触发
- [Divider](./renderers/Divider.md): 分割线
- [CRUD](./renderers/CRUD.md): 增删改查模型，主要用来展现列表
- [CRUD-Table](./renderers/CRUD-Table.md): 请参考 Table
- [CRUD-Cards](./renderers/CRUD-Cards.md): 请参考 Cards

4
docs/renderers/Action.md
View File

@ -8,7 +8,7 @@ Action 是一种特殊的渲染器，它本身是一个按钮，同时它能触
| 属性名 | 类型 | 默认值 | 说明 |
| ---------------- | --------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| type | `string` | `action` | 指定为 Page 渲染器。 |
| actionType | `string` | - | 【必填】这是action最核心的配置，来指定该action的作用类型，支持：`ajax`、`link`、`url`、`dawer`、`dialog`、`confirm`、`cancel`、`prev`、`next`、`copy`、`close`。 |
| actionType | `string` | - | 【必填】这是action最核心的配置，来指定该action的作用类型，支持：`ajax`、`link`、`url`、`drawer`、`dialog`、`confirm`、`cancel`、`prev`、`next`、`copy`、`close`。 |
| label | `string` | - | 按钮文本。可用 `${xxx}` 取值。 |
| level | `string` | `default` | 按钮样式，支持：`link`、`primary`、`secondary`、`info`、`success`、`warning`、`danger`、`light`、`dark`、`default`。 |
| size | `string` | - | 按钮大小，支持：`xs`、`sm`、`md`、`lg`。 |
@ -173,7 +173,7 @@ Action 是一种特殊的渲染器，它本身是一个按钮，同时它能触
"type": "button",
"level": "primary",
"actionType": "drawer",
"drawer": {1
"drawer": {
"title": "表单设置",
"body": {
"type": "form",

4
docs/renderers/Form/Button.md
View File

@ -4,12 +4,12 @@
- `type` 请设置成 `button`
- `label` 按钮文字
- `icon` 按钮图标。可以使用来自 fontawesome 的图标。
- `icon` 按钮图标。可以使用来自 font-awesome 的图标。
- `level` 按钮级别。 包含： `link`、`primary`、`success`、`info`、`warning`和`danger`。
- `size` 按钮大小。 包含： `xs`、`sm`、`md`和`lg`
- `className` 按钮的类名。
如果按钮是 `button` 类型，则还需要配置 [Action](./Action.md) 中定义的属性，否则，amis 不知道如何响应当前按钮点击。
如果按钮是 `button` 类型，则还需要配置 [Action](../Action.md) 中定义的属性，否则，amis 不知道如何响应当前按钮点击。
```schema:height="300" scope="form"
[

2
docs/renderers/Form/Datetime.md
View File

@ -6,7 +6,7 @@
- `format` 默认 `X` 即时间戳格式，用来提交的时间格式。更多格式类型请参考 moment.
- `inputFormat` 默认 `YYYY-MM-DD HH:mm:ss` 用来配置显示的时间格式。
- `placeholder` 默认 `请选择日期`
- `timeConstraints` 请参考： https://github.com/YouCanBookMe/react-datetime
- `timeConstraints` 请参考： [react-datetime](https://github.com/YouCanBookMe/react-datetime)
- `value` 这里面 value 需要特殊说明一下，因为支持相对值。如：
- `-2mins` 2 分钟前
- `+2days` 2 天后

8
docs/renderers/Form/FormItem.md
View File

@ -12,15 +12,15 @@ Form 中主要是由各种 FormItem 组成。FormItem 中主要包含这些字
- `submitOnChange` 是否该表单项值发生变化时就提交当前表单。
- `className` 表单最外层类名。
- `disabled` 当前表单项是否是禁用状态。
- `disabledOn` 通过[表达式](./Types.md#表达式)来配置当前表单项的禁用状态。
- `disabledOn` 通过[表达式](../Types.md#表达式)来配置当前表单项的禁用状态。
- `visible` 是否可见。
- `visibleOn` 通过[表达式](./Types.md#表达式)来配置当前表单项是否显示。
- `visibleOn` 通过[表达式](../Types.md#表达式)来配置当前表单项是否显示。
- `hidden` 是否隐藏，不要跟 `visible` `visibleOn` 同时配置
- `hiddenOn` 通过[表达式](./Types.md#表达式)来配置当前表单项是否隐藏。
- `hiddenOn` 通过[表达式](../Types.md#表达式)来配置当前表单项是否隐藏。
- `inputClassName` 表单控制器类名。
- `labelClassName` label 的类名。
- `required` 是否为必填。
- `requiredOn` 通过[表达式](./Types.md#表达式)来配置当前表单项是否为必填。
- `requiredOn` 通过[表达式](../Types.md#表达式)来配置当前表单项是否为必填。
- `validations` 格式验证，支持设置多个，多个规则用英文逗号隔开。
- `isEmptyString` 必须是空白字符。

4
docs/renderers/Form/Panel.md
View File

@ -3,9 +3,9 @@
还是为了布局，可以把一部分 [FormItem](./FormItem.md) 合并到一个 panel 里面单独展示。
- `title` panel 标题
- `body` [Container](./Types.md#container) 可以是其他渲染模型。
- `body` [Container](../Types.md#container) 可以是其他渲染模型。
- `bodyClassName` body 的 className.
- `footer` [Container](./Types.md#container) 可以是其他渲染模型。
- `footer` [Container](../Types.md#container) 可以是其他渲染模型。
- `footerClassName` footer 的 className.
- `controls` 跟 `body` 二选一，如果设置了 controls 优先显示表单集合。

2
docs/renderers/Form/Picker.md
View File

@ -14,7 +14,7 @@
- `extractValue` 默认为 `false`, `joinValues`设置为`false`时生效, 开启后将选中的选项 value 的值封装为数组，作为当前表单项的值。
- `delimiter` 默认为 `,`
- `modalMode` 设置 `dialog` 或者 `drawer`，用来配置弹出方式。
- `pickerSchema` 默认为 `{mode: 'list', listItem: {title: '${label}'}}`, 即用 List 类型的渲染，来展示列表信息。更多的玩法请参考 [CRUD](./CRUD.md) 的配置。
- `pickerSchema` 默认为 `{mode: 'list', listItem: {title: '${label}'}}`, 即用 List 类型的渲染，来展示列表信息。更多的玩法请参考 [CRUD](../CRUD.md) 的配置。
- 更多配置请参考 [FormItem](./FormItem.md)
```schema:height="300" scope="form-item"

1
docs/renderers/Form/Range.md
View File

@ -9,6 +9,7 @@
- `multiple` 支持选择范围，默认为`false`
- `joinValuse` 默认为 `true`，选择的 `value` 会通过 `delimiter` 连接起来，否则直接将以`{min: 1, max: 100}`的形式提交，开启`multiple`时有效
- `delimiter` 默认为 `,`
- 更多配置请参考 [FormItem](./FormItem.md)
```schema:height="400" scope="form-item"
{

8
docs/renderers/Form/Table.md
View File

@ -55,9 +55,9 @@
| editable | `boolean` | false | 是否可编辑 |
| removable | `boolean` | false | 是否可删除 |
| showAddBtn | `boolean` | true | 是否显示添加按钮 |
| addApi | [api](./Types.md#Api) | - | 新增时提交的 API |
| updateApi | [api](./Types.md#Api) | - | 修改时提交的 API |
| deleteApi | [api](./Types.md#Api) | - | 删除时提交的 API |
| addApi | [api](../Types.md#Api) | - | 新增时提交的 API |
| updateApi | [api](../Types.md#Api) | - | 修改时提交的 API |
| deleteApi | [api](../Types.md#Api) | - | 删除时提交的 API |
| addBtnLabel | `string` | | 增加按钮名称 |
| addBtnIcon | `string` | `"fa fa-plus"` | 增加按钮图标 |
| updateBtnLabel | `string` | `""` | 更新按钮名称 |
@ -73,7 +73,7 @@
| columns[x].quickEditOnUpdate | `boolean` 或者 `object` | - | 可以用来区分新建模式和更新模式的编辑配置 |
- 更多配置请参考 [FormItem](./FormItem.md)
- 更多 Demo 详情请参考 [表格编辑](/docs/examples/form/table)
- 更多 Demo 详情请参考 [表格编辑](/amis/#/form/table)
```schema:height="250" scope="form-item"
{

2
docs/renderers/Form/Time.md
View File

@ -6,7 +6,7 @@
- `format` 默认 `X` 即时间戳格式，用来提交的时间格式。更多格式类型请参考 moment.
- `inputFormat` 默认 `HH:mm` 用来配置显示的时间格式。
- `placeholder` 默认 `请选择日期`
- `timeConstraints` 请参考： https://github.com/YouCanBookMe/react-datetime
- `timeConstraints` 请参考： [react-datetime](https://github.com/YouCanBookMe/react-datetime)
- `value` 这里面 value 需要特殊说明一下，因为支持相对值。如：
- `-2mins` 2 分钟前
- `+2days` 2 天后

2
docs/renderers/List.md
View File

@ -19,7 +19,7 @@
| listItem.avatarClassName | `string` | `thumb-sm avatar m-r` | 图片 CSS 类名 |
| listItem.desc | `string` | | 描述，支持模板语法如： \${xxx} |
| listItem.body | `Array` 或者 [Field](./Field.md) | | 内容容器，主要用来放置 [Field](./Field.md) |
| listItem.actions | Array Of [Button](./Button.md) | | 按钮区域 |
| listItem.actions | Array Of [Button](./Form/Button.md) | | 按钮区域 |
```schema:height="400" scope="body"
{

1
docs/renderers/Video.md
View File

@ -10,6 +10,7 @@
| poster | `string` | | 视频封面地址 |
| muted | `boolean` | | 是否静音 |
| autoPlay | `boolean` | | 是否自动播放 |
| rates | `array` | | 倍数，格式为`[1.0, 1.5, 2.0]`|
```schema:height="500" scope="body"
{

4
docs/renderers/Wizard.md
View File

@ -19,7 +19,7 @@
- `target` 可以把数据提交给别的组件而不是自己保存。请填写目标组件设置的 name 值，如果填写为 `window` 则把数据同步到地址栏上，同时依赖这些数据的组件会自动重新刷新。
- `steps` 数组，配置步骤信息。
- `steps[x].title` 步骤标题。
- `steps[x].mode` 展示默认，跟 [Form](./Form.md) 中的模式一样，选择： `normal`、`horizontal`或者`inline`。
- `steps[x].mode` 展示默认，跟 [Form](./Form/Form.md) 中的模式一样，选择： `normal`、`horizontal`或者`inline`。
- `steps[x].horizontal` 当为水平模式时，用来控制左右占比。
- `steps[x].horizontal.label` 左边 label 的宽度占比。
- `steps[x].horizontal.right` 右边控制器的宽度占比。
@ -28,7 +28,7 @@
- `steps[x].initApi` 当前步骤数据初始化接口。
- `steps[x].initFetch` 当前步骤数据初始化接口是否初始拉取。
- `steps[x].initFetchOn` 当前步骤数据初始化接口是否初始拉取，用表达式来决定。
- `steps[x].controls` 当前步骤的表单项集合，请参考 [FormItem](./FormItem.md)。
- `steps[x].controls` 当前步骤的表单项集合，请参考 [FormItem](./Form/FormItem.md)。
```schema:height="400" scope="body"
{

3
src/components/Select.tsx
View File

@ -312,9 +312,6 @@ export class Select extends React.Component<SelectProps, SelectState> {
const checkedAll = optionsValues.every(option => selectionValues.indexOf(option) > -1);
selection = checkedAll ? [] : options;
this.setState({
selection: selection
});
onChange(selection);
}

20
src/renderers/Carousel.tsx
View File

@ -34,7 +34,7 @@ export interface CarouselState {
}
export class Carousel extends React.Component<CarouselProps, CarouselState> {
wrapperRef: React.RefObject<HTMLDivElement>;
wrapperRef: React.RefObject<HTMLDivElement> = React.createRef();
intervalTimeout: number;
durationTimeout: number;
@ -51,18 +51,12 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
placeholder: ''
};
constructor(props:CarouselProps) {
super(props);
this.state = {
current: 0,
options: this.props.value ? this.props.value : this.props.options ? this.props.options : [],
showArrows: false,
nextAnimation: ''
};
this.wrapperRef = React.createRef();
}
state = {
current: 0,
options: this.props.value ? this.props.value : this.props.options ? this.props.options : [],
showArrows: false,
nextAnimation: ''
};
componentDidMount() {
this.prepareAutoSlide();

4
src/renderers/Form/Checkboxes.tsx
View File

@ -82,8 +82,8 @@ export default class CheckboxesControl extends React.Component<CheckboxesProps,
let cellClassName = `${ns}Grid-col--sm${weight === Math.round(weight) ? weight : ''}`;
body = chunk(body, columnsCount).map((group, groupIndex) => (
<div className={`${ns}Grid`} key={groupIndex}>
{group.map((item, index) => (
<div key={index} className={cellClassName}>{item}</div>
{Array.from({length: columnsCount as number}).map((_, index) => (
<div key={index} className={cellClassName}>{group[index]}</div>
))}
</div>
));

8
src/renderers/Video.tsx
View File

@ -5,7 +5,7 @@
/* eslint fecs-indent: [0, "space", 2, 2] */
import * as React from 'react';
import {Player, Shortcut, BigPlayButton} from 'video-react';
import {Player, Shortcut, BigPlayButton, ControlBar, PlaybackRateMenuButton} from 'video-react';
import {padArr} from '../utils/helper';
import * as cx from 'classnames';
import {Renderer, RendererProps} from '../factory';
@ -396,6 +396,7 @@ export default class Video extends React.Component<VideoProps, VideoState> {
playerClassName,
classPrefix: ns,
aspectRatio,
rates
} = this.props;
let source = this.props.src || (name && data && (data as any)[name]) || (amisConfig && amisConfig.value);
@ -422,6 +423,11 @@ export default class Video extends React.Component<VideoProps, VideoState> {
muted={muted}
aspectRatio={aspectRatio}
>
{rates && rates.length ? (
<ControlBar>
<PlaybackRateMenuButton rates={rates} order={7.1} />
</ControlBar>
) : null}
<BigPlayButton position="center" />
{sourceNode}
<Shortcut disabled />