feat(demo.js): 修改demo显示效果

This commit is contained in:
huyueb 2018-01-16 10:11:10 +08:00
parent 0b814f8470
commit e6b3eb9ec1
10 changed files with 3213 additions and 3226 deletions

View File

@ -1,4 +1,4 @@
<a name="1.0.10"></a>
<a name="1.0.10"></a>
## [1.0.10](https://github.com/tinper-bee/bee-table/compare/v1.0.9...v1.0.10) (2018-01-03)

View File

View File

@ -32,6 +32,10 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
var MonthPicker = _beeDatepicker2["default"].MonthPicker,
RangePicker = _beeDatepicker2["default"].RangePicker,
WeekPicker = _beeDatepicker2["default"].WeekPicker;
var DateRender = function (_Component) {
_inherits(DateRender, _Component);
@ -74,15 +78,33 @@ var DateRender = function (_Component) {
var _state = this.state,
value = _state.value,
editable = _state.editable;
var isclickTrigger = this.props.isclickTrigger;
var _props = this.props,
isclickTrigger = _props.isclickTrigger,
type = _props.type;
var cellContent = "";
var TComponent = void 0;
switch (type.toLowerCase()) {
case "monthpicker":
TComponent = MonthPicker;
break;
// case "rangepicker":
// TComponent = RangePicker;
// break;
case "weekpicker":
TComponent = WeekPicker;
break;
default:
TComponent = _beeDatepicker2["default"];
break;
}
TComponent;
var date_value = value ? (0, _moment2["default"])(value) : value;
if (editable) {
cellContent = isclickTrigger ? _react2["default"].createElement(
"div",
{ className: "editable-cell-input-wrapper" },
_react2["default"].createElement(_beeDatepicker2["default"], _extends({}, this.props, {
_react2["default"].createElement(TComponent, _extends({}, this.props, {
value: date_value,
onChange: this.handleChange
})),
@ -94,7 +116,7 @@ var DateRender = function (_Component) {
) : _react2["default"].createElement(
"div",
{ className: "editable-cell-input-wrapper" },
_react2["default"].createElement(_beeDatepicker2["default"], _extends({}, this.props, {
_react2["default"].createElement(TComponent, _extends({}, this.props, {
value: date_value,
onChange: this.handleChange
})),
@ -131,4 +153,8 @@ var DateRender = function (_Component) {
}(_react.Component);
exports["default"] = DateRender;
DateRender.defaultProps = {
type: "DatePicker"
};
module.exports = exports["default"];

View File

@ -26,29 +26,26 @@ class Demo extends Component {
}
render () {
const { title, example, code, desc } = this.props;
const { title, example, code, desc, scss_code } = this.props;
let caret = this.state.open ? CARETUP : CARET;
let text = this.state.open ? "隐藏代码" : "查看代码";
const footer = (
<Button shape="block" onClick={ this.handleClick }>
{ caret }
{ text }
</Button>
);
const header = (
<Row>
<Col md={12}>
{ example }
</Col>
</Row>
<div>
{example}
<Button style={{"margin-top": "10px"}} shape="block" onClick={ this.handleClick }>
{ caret }
{ text }
</Button>
</div>
);
return (
<Col md={12} >
<h3>{ title }</h3>
<p>{ desc }</p>
<Panel collapsible headerContent expanded={ this.state.open } colors='bordered' header={ header } footer={footer} footerStyle = {{padding: 0}}>
<Panel collapsible headerContent expanded={ this.state.open } colors='bordered' header={ header } footerStyle = {{padding: 0}}>
<pre><code className="hljs javascript">{ code }</code></pre>
{ !!scss_code ? <pre><code className="hljs css">{ scss_code }</code></pre> : null }
</Panel>
</Col>
)
@ -65,7 +62,7 @@ class DemoGroup extends Component {
{DemoArray.map((child,index) => {
return (
<Demo example= {child.example} title= {child.title} code= {child.code} desc= {child.desc} key= {index}/>
<Demo example= {child.example} title= {child.title} code= {child.code} scss_code= {child.scss_code} desc= {child.desc} key= {index}/>
)
})}

File diff suppressed because one or more lines are too long

75
dist/demo.css vendored
View File

@ -3490,7 +3490,7 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
.vertical-align-middle, .vertical-align-bottom {
display: inline-block;
max-width: 100%;
font-size: 1.4rem; }
font-size: 14px; }
.vertical-align-middle {
vertical-align: middle; }
.vertical-align-bottom {
@ -3678,7 +3678,6 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
visibility: hidden; }
.text-hide {
font: "0/0" a;
color: transparent;
text-shadow: none;
background-color: transparent;
@ -4951,26 +4950,26 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
box-shadow: none; }
.u-shadow-2dp {
box-shadow: 0 0.2rem 0.2rem 0 rgba(0, 0, 0, 0.14), 0 0.3rem 0.1rem -0.2rem rgba(0, 0, 0, 0.2), 0 0.1rem 0.5rem 0 rgba(0, 0, 0, 0.12);
box-shadow: 0 0.2rem 0.2rem 0 black, 0 0.3rem 0.1rem -0.2rem black, 0 0.1rem 0.5rem 0 black \9; }
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 2px 0 black, 0 3px 1px -2px black, 0 1px 5px 0 black \9; }
.u-shadow-3dp {
box-shadow: 0 0.3rem 0.4rem 0 rgba(0, 0, 0, 0.14), 0 0.3rem 0.3rem -0.2rem rgba(0, 0, 0, 0.2), 0 0.1rem 0.8rem 0 rgba(0, 0, 0, 0.12); }
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.12); }
.u-shadow-4dp {
box-shadow: 0 0.4rem 0.5rem 0 rgba(0, 0, 0, 0.14), 0 0.1rem 1rem 0 rgba(0, 0, 0, 0.12), 0 0.2rem 0.4rem -0.1rem rgba(0, 0, 0, 0.2); }
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2); }
.u-shadow-6dp {
box-shadow: 0 0.6rem 1rem 0 rgba(0, 0, 0, 0.14), 0 0.1rem 1.8rem 0 rgba(0, 0, 0, 0.12), 0 0.3rem 0.5rem -0.1rem rgba(0, 0, 0, 0.2); }
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2); }
.u-shadow-8dp {
box-shadow: 0 0.8rem 1rem 0.1rem rgba(0, 0, 0, 0.14), 0 0.3rem 1.4rem 0.2rem rgba(0, 0, 0, 0.12), 0 0.5rem 0.5rem -0.3rem rgba(0, 0, 0, 0.2); }
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2); }
.u-shadow-16dp {
box-shadow: 0 1.6rem 2.4rem 0.2rem rgba(0, 0, 0, 0.14), 0 0.6rem 3rem 0.5rem rgba(0, 0, 0, 0.12), 0 0.8rem 1rem -0.5rem rgba(0, 0, 0, 0.2); }
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2); }
.u-shadow-24dp {
box-shadow: 0 0.9rem 4.6rem 0.8rem rgba(0, 0, 0, 0.14), 0 1.1rem 1.5rem -0.7rem rgba(0, 0, 0, 0.12), 0 2.4rem 3.8rem 0.3rem rgba(0, 0, 0, 0.2); }
box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2); }
/* keyframes 定义 */
@ -5912,15 +5911,14 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
.u-button {
background: rgb(224,224,224);
border: none;
border-radius: 0.4rem;
border-radius: 4px;
color: rgb(0,0,0);
position: relative;
min-width: 7.2rem;
padding: 0.5rem 1.3rem;
padding: 5px 13px \9;
min-width: 72px;
padding: 5px 13px;
display: inline-block;
font-family: "Open Sans", "Helvetica Neue", Arial, "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
font-size: 1.4rem;
font-size: 14px;
font-weight: 500;
line-height: 1;
letter-spacing: 0;
@ -5954,13 +5952,11 @@ input.u-button[type="submit"] {
.u-button-floating {
border-radius: 50%;
font-size: 1.4rem;
height: 3.8rem;
height: 38px \9;
font-size: 14px;
height: 38px;
margin: auto;
min-width: 3.8rem;
width: 3.8rem;
width: 38px \9;
min-width: 38px;
width: 38px;
padding: 0;
line-height: normal;
border: 1px solid rgb(224,224,224); }
@ -6119,26 +6115,26 @@ input.u-button[type="submit"] {
.u-button-icon {
border-radius: 50%;
font-size: 1.4rem;
height: 3.2rem;
font-size: 14px;
height: 32px;
margin: auto;
min-width: 3.2rem;
width: 3.2rem;
min-width: 32px;
width: 32px;
padding: 0;
line-height: normal;
border: 1px solid rgb(224,224,224); }
.u-button-lg {
padding: 8px 15px;
font-size: 1.4rem; }
font-size: 14px; }
.u-button-xg {
padding: 10px 18px;
font-size: 1.6rem; }
font-size: 16px; }
.u-button-sm {
padding: 3px 5px;
font-size: 1.2rem; }
font-size: 12px; }
.u-button-squared {
border-radius: 0; }
@ -6180,7 +6176,7 @@ input.u-button[type="submit"] {
width: 100%;
height: 30px;
cursor: text;
font-size: 1.4rem;
font-size: 14px;
line-height: 1.5;
color: #424242;
background-color: #fff;
@ -6200,10 +6196,10 @@ input.u-button[type="submit"] {
.u-form-control.lg {
height: 38px;
font-size: 1.4rem; }
font-size: 14px; }
.u-form-control.sm {
font-size: 1.2rem;
font-size: 12px;
height: 24px; }
.u-input-search-wrapper {
@ -6246,6 +6242,7 @@ input.u-button[type="submit"] {
z-index: 2;
line-height: 0;
right: 7px;
margin-top: 5px;
color: rgba(0, 0, 0, 0.65); }
/* FormGroup */
@ -7948,7 +7945,7 @@ ul {
width: 100%;
height: 30px;
cursor: text;
font-size: 1.4rem;
font-size: 14px;
line-height: 1.5;
color: #424242;
background-color: #fff;
@ -7968,10 +7965,10 @@ ul {
.u-form-control.lg {
height: 38px;
font-size: 1.4rem; }
font-size: 14px; }
.u-form-control.sm {
font-size: 1.2rem;
font-size: 12px;
height: 24px; }
.u-input-search-wrapper {
@ -8014,6 +8011,7 @@ ul {
z-index: 2;
line-height: 0;
right: 7px;
margin-top: 5px;
color: rgba(0, 0, 0, 0.65); }
/* FormGroup */
@ -8064,15 +8062,11 @@ ul {
border-top-left-radius: 0; }
.u-input-group-btn:last-child > button, .u-input-group-btn:last-child > .btn-group {
z-index: 2;
margin-left: -1px; }
.u-input-group-btn:first-child > button, .u-input-group-btn:first-child > .btn-group {
margin-right: -1px; }
.u-input-group-btn > button:active, .u-input-group-btn > .btn:focus, .u-input-group-btn > button:hover {
z-index: 2; }
.u-input-group {
position: relative;
display: table;
@ -8083,7 +8077,6 @@ ul {
line-height: 1.3; }
.u-input-group .u-form-control {
position: relative;
z-index: 2;
float: left;
width: 100%;
margin-bottom: 0;
@ -8102,8 +8095,8 @@ ul {
position: absolute;
top: 2px;
bottom: 0;
z-index: 2;
right: 20px; }
right: 5px;
min-width: 20px; }
.u-input-group.simple .u-form-control:not(:last-child) {
padding-right: 23px; }

2
dist/demo.css.map vendored

File diff suppressed because one or more lines are too long

6108
dist/demo.js vendored

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -1,86 +1,86 @@
{
"name": "bee-table",
"version": "1.0.10",
"description": "Table ui component for react",
"keywords": [
"react",
"react-component",
"bee-table",
"iuap-design",
"tinper-bee",
"Table"
"name": "bee-table",
"version": "1.0.11",
"description": "Table ui component for react",
"keywords": [
"react",
"react-component",
"bee-table",
"iuap-design",
"tinper-bee",
"Table"
],
"engines": {
"node": ">=4.0.0"
},
"jest": {
"moduleFileExtensions": [
"js",
"jsx"
],
"engines": {
"node": ">=4.0.0"
},
"jest": {
"moduleFileExtensions": [
"js",
"jsx"
],
"transform": {
"^.+\\.js$": "babel-jest"
}
},
"homepage": "https://github.com/tinper-bee/bee-table.git",
"author": "Yonyou FED",
"repository": "http://github.com/tinper-bee/bee-table",
"bugs": "https://github.com/tinper-bee/bee-table.git/issues",
"license": "MIT",
"main": "./build/index.js",
"config": {
"port": 3000,
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
},
"scripts": {
"dev": "bee-tools run start",
"build": "bee-tools run build",
"lint": "bee-tools run lint",
"test": "jest",
"chrome": "bee-tools run chrome",
"coveralls": "jest",
"browsers": "bee-tools run browsers",
"pub": "bee-tools run pub",
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
},
"dependencies": {
"classnames": "^2.2.5",
"object-path": "^0.11.3",
"tinper-bee-core": "latest",
"warning": "^3.0.0"
},
"peerDependencies": {
"react": "^15.3.0 || ^16.0",
"react-dom": "^15.3.0 || ^16.0",
"prop-types": "15.6.0"
},
"devDependencies": {
"babel-jest": "^22.0.4",
"bee-animate": "latest",
"bee-button": "latest",
"bee-checkbox": "latest",
"bee-datepicker": "latest",
"bee-form": "^1.0.8",
"bee-form-control": "latest",
"bee-icon": "latest",
"bee-input-group": "latest",
"bee-layout": "latest",
"bee-pagination": "latest",
"bee-panel": "latest",
"bee-popconfirm": "^1.0.1",
"bee-select": "latest",
"bee-tools": "latest",
"bee-tooltip": "^1.0.2",
"chai": "^3.5.0",
"console-polyfill": "~0.2.1",
"cz-conventional-changelog": "^2.1.0",
"enzyme": "^2.9.1",
"es5-shim": "~4.1.10",
"jest": "^22.0.4",
"react": "^15.5.0",
"react-addons-test-utils": "^15.5.0",
"react-dom": "^15.5.0"
"transform": {
"^.+\\.js$": "babel-jest"
}
}
},
"homepage": "https://github.com/tinper-bee/bee-table.git",
"author": "Yonyou FED",
"repository": "http://github.com/tinper-bee/bee-table",
"bugs": "https://github.com/tinper-bee/bee-table.git/issues",
"license": "MIT",
"main": "./build/index.js",
"config": {
"port": 3000,
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
},
"scripts": {
"dev": "bee-tools run start",
"build": "bee-tools run build",
"lint": "bee-tools run lint",
"test": "jest",
"chrome": "bee-tools run chrome",
"coveralls": "jest",
"browsers": "bee-tools run browsers",
"pub": "bee-tools run pub",
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
},
"dependencies": {
"classnames": "^2.2.5",
"object-path": "^0.11.3",
"tinper-bee-core": "latest",
"warning": "^3.0.0"
},
"peerDependencies": {
"react": "^15.3.0 || ^16.0",
"react-dom": "^15.3.0 || ^16.0",
"prop-types": "15.6.0"
},
"devDependencies": {
"babel-jest": "^22.0.4",
"bee-animate": "latest",
"bee-button": "latest",
"bee-checkbox": "latest",
"bee-datepicker": "latest",
"bee-form": "^1.0.8",
"bee-form-control": "latest",
"bee-icon": "latest",
"bee-input-group": "latest",
"bee-layout": "latest",
"bee-pagination": "latest",
"bee-panel": "latest",
"bee-popconfirm": "^1.0.1",
"bee-select": "latest",
"bee-tools": "latest",
"bee-tooltip": "^1.0.2",
"chai": "^3.5.0",
"console-polyfill": "~0.2.1",
"cz-conventional-changelog": "^2.1.0",
"enzyme": "^2.9.1",
"es5-shim": "~4.1.10",
"jest": "^22.0.4",
"react": "^15.5.0",
"react-addons-test-utils": "^15.5.0",
"react-dom": "^15.5.0"
}
}