feat(demo.js): 修改demo显示效果
This commit is contained in:
parent
0b814f8470
commit
e6b3eb9ec1
|
@ -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"];
|
|
@ -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
|
@ -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; }
|
||||
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
164
package.json
164
package.json
|
@ -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"
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue