Skip to content

Commit

Permalink
feat(Form): make preview configurable
Browse files Browse the repository at this point in the history
  • Loading branch information
@youluna
youluna committed Jan 16, 2020
1 parent 822c84b commit 03c8326
Show file tree
Hide file tree
Showing 5 changed files with 173 additions and 24 deletions.
148 changes: 131 additions & 17 deletions docs/core/theme/form-element.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,51 @@ import { Demo, DemoGroup, initDemo } from '../../../src/demo-helper';
import Input from '../../../src/input';
import Select from '../../../src/select';
import TimePicker from '../../../src/time-picker';
import Form from '../../../src/form';
import Rating from '../../../src/rating';
import Range from '../../../src/range';
import '../../../src/demo-helper/style.js';
import '../../../src/input/style.js';
import '../../../src/time-picker/style.js';
import '../../../src/select/style.js';
import '../../../src/form/style.js';
import '../../../src/rating/style.js';
import '../../../src/range/style.js';
import '../../../src/core/form-element.scss';

const FormItem = Form.Item;

const dataSource = [
{ label: 'AAAA', value: 'a' },
{ label: 'BBBB', value: 'b' },
{ label: 'CCCC', value: 'c' },
{ label: 'DDDD', value: 'd' }
];

const fileList = [{
uid: '0',
name: 'IMG.png',
state: 'done',
url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'
}, {
uid: '1',
name: 'IMG.png',
percent: 50,
state: 'uploading',
url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'
}, {
uid: '2',
name: 'IMG.png',
state: 'error',
url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'
}];

class FormElementDemo extends React.Component {
render() {
const { size } = this.props;
Expand All @@ -40,26 +72,108 @@ class FormElementDemo extends React.Component {
}
}

const formItemLayout = {
labelCol: {
span: 7
},
wrapperCol: {
span: 16
}
};
class FormElementPreviewDemo extends React.Component {
render() {
const { size } = this.props;
const itemProps = {
className: 'next-form-element'
};
return (
<table>
<tbody>
<tr>
<td>
<Form {...formItemLayout} isPreview size={size} style={{maxWidth: '800px'}}>
<FormItem {...itemProps} required label="Username:">
<Input defaultValue="Fusion" placeholder="Please enter your username" id="username" name="username" aria-required="true" />
</FormItem>

<FormItem {...itemProps} required label="Link:">
<Input name="link" addonTextBefore="http://" addonTextAfter=".com" defaultValue="alibaba" aria-label="input with config of addonTextBefore and addonTextAfter" />
</FormItem>

<FormItem {...itemProps} required label="Time:">
<TimePicker value="17:16:23" aria-required="true" />
</FormItem>

<FormItem {...itemProps} required label="autoComplete:">
<Select.AutoComplete name="autoComplete" defaultValue="selected" />
</FormItem>

<FormItem {...itemProps} required label="multiple Select:">
<Select name="select" defaultValue={["apple", "banana"]} mode="multiple" >
<Select.Option value="apple">Apple</Select.Option>
<Select.Option value="banana">Banana</Select.Option>
</Select>
</FormItem>

<FormItem {...itemProps} required label="Rating:">
<Rating defaultValue={4.5} name="rate" aria-label="what's the rate score" />
</FormItem>

<FormItem {...itemProps} required label="Range:">
<Range name="range" slider="double" defaultValue={[10, 80]} />
</FormItem>

<FormItem {...itemProps} label="Note:">
<Input.TextArea placeholder="description" name="a11yRemark" defaultValue="Fusion 是一套企业级中后台UI的解决方案，致力于解决设计师与前端在产品体验一致性、工作协同、开发效率方面的问题。通过协助业务线构建设计系统，提供系统化工具协助设计师前端使用设计系统，下游提供一站式设计项目协作平台；打通互联网产品从设计到开发的工作流。" />
</FormItem>

<FormItem {...itemProps} wrapperCol={{offset: 7}}>
<Form.Submit validate type="primary" onClick={this.submitHandler}>Submit</Form.Submit>
<Form.Reset style={{marginLeft: 10}}>Reset</Form.Reset>
</FormItem>
</Form>
</td>
</tr>
</tbody>
</table>
);
}
}

window.renderDemo = function () {

ReactDOM.render(
<Demo title="FormElement">
<tr className="demo-group">
<td className="label"></td>
<td style={{ fontSize: '14px', height: '40px', lineHeight: '40px' }}>
配置该类容器的Size、Font、Icon(size)、Corner会涉及到联动的组件一起改变的有：Input、Select、TreeSelect、CascaderSelect、Timepicker、DatePicker、NumberPicker
</td>
</tr>
<DemoGroup label="Large">
<FormElementDemo size="large" />
</DemoGroup>
<DemoGroup label="Medium">
<FormElementDemo />
</DemoGroup>
<DemoGroup label="Small">
<FormElementDemo size="small" />
</DemoGroup>
</Demo>, document.getElementById('container'));
<div>
<Demo title="FormElement">
<tr className="demo-group">
<td className="label"></td>
<td style={{ fontSize: '14px', height: '40px', lineHeight: '40px' }}>
配置该类容器的Size、Font、Icon(size)、Corner会涉及到联动的组件一起改变的有：Input、Select、TreeSelect、CascaderSelect、Timepicker、DatePicker、NumberPicker
</td>
</tr>
<DemoGroup label="Large">
<FormElementDemo size="large" />
</DemoGroup>
<DemoGroup label="Medium">
<FormElementDemo />
</DemoGroup>
<DemoGroup label="Small">
<FormElementDemo size="small" />
</DemoGroup>
</Demo>
<Demo title="FormElement Preview">
<DemoGroup label="Large">
<FormElementPreviewDemo size="large" />
</DemoGroup>
<DemoGroup label="Medium">
<FormElementPreviewDemo />
</DemoGroup>
<DemoGroup label="Small">
<FormElementPreviewDemo size="small" />
</DemoGroup>
</Demo>
</div>
, document.getElementById('container'));
};

renderDemo();
Expand Down
4 changes: 1 addition & 3 deletions docs/form/demo/preview.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,8 @@ You can switch to preview state. Preview state and editor state share the same l
---

````jsx
import { Form, Input, Switch, Rating, Grid, Field, Icon, Radio, Range, Checkbox, NumberPicker, Select, Upload } from '@alifd/next';
import { Form, Input, Switch, Rating, Field, Icon, Radio, Range, Checkbox, NumberPicker, Select, Upload } from '@alifd/next';


const {Row, Col} = Grid;
const FormItem = Form.Item;
const formItemLayout = {
labelCol: {
Expand Down
15 changes: 14 additions & 1 deletion src/core/form-element.scss
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
@import "./index-noreset.scss";
@import "../input/scss/variable.scss";
@import "../input/scss/mixin.scss";
@import "../form/scss/mixin.scss";

.demo-body table {
width: 100%;
}

.next-form-element.next-input,
.next-form-element.next-select .next-input,
.next-form-element.next-time-picker .next-input, {
.next-form-element.next-time-picker .next-input {
&.next-small {
@include input-size($form-element-small-height, $input-s-padding, $form-element-small-font-size, $input-s-label-padding-left, $input-s-icon-padding-right);
@include input-icon-size($form-element-small-icon-size);
Expand All @@ -33,3 +34,15 @@
padding-right: 0;
}
}

.next-form-element {
&.next-small {
@include form-preview($form-element-small-preview-font-size, $form-element-small-preview-height);
}
&.next-medium {
@include form-preview($form-element-medium-preview-font-size, $form-element-medium-preview-height);
}
&.next-large {
@include form-preview($form-element-large-preview-font-size, $form-element-large-preview-height);
}
}
24 changes: 24 additions & 0 deletions src/core/utility/_form-element.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,30 @@ $form-element-medium-font-size: $font-size-body-1 !default;
/// @semantic 大号组件字体
$form-element-large-font-size: $font-size-subhead !default;

/// preview height
/// @semantic 小号组件预览态高度
$form-element-small-preview-height: $s-5 !default;

/// preview height
/// @semantic 中号组件预览态高度
$form-element-medium-preview-height: $s-7 !default;

/// preview height
/// @semantic 大号组件预览态高度
$form-element-large-preview-height: $s-10 !default;

/// preview text
/// @semantic 小号组件预览态字体
$form-element-small-preview-font-size: $font-size-caption !default;

/// preview text
/// @semantic 中号组件预览态字体
$form-element-medium-preview-font-size: $font-size-body-1 !default;

/// preview text
/// @semantic 大号组件预览态字体
$form-element-large-preview-font-size: $font-size-subhead !default;

/// icon
/// @semantic 小号组件 icon
$form-element-small-icon-size: $icon-xs !default;
Expand Down
6 changes: 3 additions & 3 deletions src/form/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@
}

@include form-enhance($form-element-medium-height - 4);
@include form-preview($form-element-medium-font-size, $form-element-medium-height);
@include form-preview($form-element-medium-preview-font-size, $form-element-medium-preview-height);

#{$form-prefix}-item-label {
font-size: $form-element-medium-font-size;
Expand All @@ -106,7 +106,7 @@
}

@include form-enhance($form-element-large-height - 1);
@include form-preview($form-element-large-font-size, $form-element-large-height);
@include form-preview($form-element-large-preview-font-size, $form-element-large-preview-height);

.#{$css-prefix}switch {
margin-top: ($form-element-large-height - 26)/2;
Expand All @@ -124,7 +124,7 @@
}

@include form-enhance($form-element-small-height);
@include form-preview($form-element-small-font-size, $form-element-small-height);
@include form-preview($form-element-small-preview-font-size, $form-element-small-preview-height);

#{$form-prefix}-item-label {
font-size: $form-element-small-font-size;
Expand Down

0 comments on commit 03c8326

Please sign in to comment.