JavaScript
/
bee-table
3
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
HISTORY.md
View File

32
build/render/DateRender.js
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); } 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) { var DateRender = function (_Component) {
_inherits(DateRender, _Component); _inherits(DateRender, _Component);
@ -74,15 +78,33 @@ var DateRender = function (_Component) {
var _state = this.state, var _state = this.state,
value = _state.value, value = _state.value,
editable = _state.editable; editable = _state.editable;
var isclickTrigger = this.props.isclickTrigger; var _props = this.props,
isclickTrigger = _props.isclickTrigger,
type = _props.type;
var cellContent = ""; 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; var date_value = value ? (0, _moment2["default"])(value) : value;
if (editable) { if (editable) {
cellContent = isclickTrigger ? _react2["default"].createElement( cellContent = isclickTrigger ? _react2["default"].createElement(
"div", "div",
{ className: "editable-cell-input-wrapper" }, { className: "editable-cell-input-wrapper" },
_react2["default"].createElement(_beeDatepicker2["default"], _extends({}, this.props, { _react2["default"].createElement(TComponent, _extends({}, this.props, {
value: date_value, value: date_value,
onChange: this.handleChange onChange: this.handleChange
})), })),
@ -94,7 +116,7 @@ var DateRender = function (_Component) {
) : _react2["default"].createElement( ) : _react2["default"].createElement(
"div", "div",
{ className: "editable-cell-input-wrapper" }, { className: "editable-cell-input-wrapper" },
_react2["default"].createElement(_beeDatepicker2["default"], _extends({}, this.props, { _react2["default"].createElement(TComponent, _extends({}, this.props, {
value: date_value, value: date_value,
onChange: this.handleChange onChange: this.handleChange
})), })),
@ -131,4 +153,8 @@ var DateRender = function (_Component) {
}(_react.Component); }(_react.Component);
exports["default"] = DateRender; exports["default"] = DateRender;
DateRender.defaultProps = {
type: "DatePicker"
};
module.exports = exports["default"]; module.exports = exports["default"];

21
demo/index-demo-base.js
View File

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

23
demo/index.js
View File

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

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

6106
dist/demo.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "bee-table", "name": "bee-table",
"version": "1.0.10", "version": "1.0.11",
"description": "Table ui component for react", "description": "Table ui component for react",
"keywords": [ "keywords": [
"react", "react",