uxcore.js - React UI Component Set

组件演示

[{"title":"基本使用","id":"components-time-picker-demo-basic","tags":[],"filepath":"site/components/time-picker/demo/basic.md","directory":"components/time-picker/demo","filename":"basic","meta":{"title":"基本使用","description":"\n基本使用\n","order":"0","filepath":"site/components/time-picker/demo/basic.md","filename":"basic","directory":"components/time-picker/demo","id":"components-time-picker-demo-basic","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _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) : subClass.__proto__ = superClass; }\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo() {\n _classCallCheck(this, Demo);\n\n return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).apply(this, arguments));\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n return React.createElement(_uxcore.TimePicker, null);\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-time-picker-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\nimport { TimePicker } from 'uxcore';\n\nclass Demo extends React.Component {\n render() {\n return (\n <TimePicker />\n );\n }\n}\n\nReactDOM.render(<Demo />, document.getElementById('components-time-picker-demo-basic'));</code></pre></div>"},"status":"public","toc":""},{"title":"受控模式","id":"components-time-picker-demo-control","tags":[],"filepath":"site/components/time-picker/demo/control.md","directory":"components/time-picker/demo","filename":"control","meta":{"title":"受控模式","description":"\n通过 value 和 onChange 进入受控模式\n","order":"1","filepath":"site/components/time-picker/demo/control.md","filename":"control","directory":"components/time-picker/demo","id":"components-time-picker-demo-control","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _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) : subClass.__proto__ = superClass; }\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n value: new Date().getTime()\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n var _this2 = this;\n\n return React.createElement(_uxcore.TimePicker, {\n value: this.state.value,\n onChange: function onChange(value) {\n console.log(value);\n _this2.setState({ value: value });\n }\n });\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-time-picker-demo-control'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\nimport { TimePicker } from 'uxcore';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n value: new Date().getTime(),\n };\n }\n render() {\n return (\n <TimePicker\n value={this.state.value}\n onChange={(value) => {\n console.log(value);\n this.setState({ value });\n }}\n />\n );\n }\n}\n\nReactDOM.render(<Demo />, document.getElementById('components-time-picker-demo-control'));</code></pre></div>"},"status":"public","toc":""},{"title":"选择时分","id":"components-time-picker-demo-hm","tags":[],"filepath":"site/components/time-picker/demo/hm.md","directory":"components/time-picker/demo","filename":"hm","meta":{"title":"选择时分","description":"\n","order":"2","filepath":"site/components/time-picker/demo/hm.md","filename":"hm","directory":"components/time-picker/demo","id":"components-time-picker-demo-hm","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _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) : subClass.__proto__ = superClass; }\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo() {\n _classCallCheck(this, Demo);\n\n return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).apply(this, arguments));\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n return React.createElement(_uxcore.TimePicker, { showSecond: false });\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-time-picker-demo-hm'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\nimport { TimePicker } from 'uxcore';\n\nclass Demo extends React.Component {\n render() {\n return (\n <TimePicker showSecond={false} />\n );\n }\n}\n\nReactDOM.render(<Demo />, document.getElementById('components-time-picker-demo-hm'));</code></pre></div>"},"status":"public","toc":""},{"title":"12 小时制","id":"components-time-picker-demo-12h","tags":[],"filepath":"site/components/time-picker/demo/12h.md","directory":"components/time-picker/demo","filename":"12h","meta":{"title":"12 小时制","description":"\n","order":"3","filepath":"site/components/time-picker/demo/12h.md","filename":"12h","directory":"components/time-picker/demo","id":"components-time-picker-demo-12h","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _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) : subClass.__proto__ = superClass; }\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo() {\n _classCallCheck(this, Demo);\n\n return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).apply(this, arguments));\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n return React.createElement(_uxcore.TimePicker, { use12Hours: true });\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-time-picker-demo-12h'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\nimport { TimePicker } from 'uxcore';\n\nclass Demo extends React.Component {\n render() {\n return (\n <TimePicker use12Hours />\n );\n }\n}\n\nReactDOM.render(<Demo />, document.getElementById('components-time-picker-demo-12h'));</code></pre></div>"},"status":"public","toc":""},{"title":"尺寸","id":"components-time-picker-demo-size","tags":[],"filepath":"site/components/time-picker/demo/size.md","directory":"components/time-picker/demo","filename":"size","meta":{"title":"尺寸","description":"\n提供大中小三种尺寸\n","order":"4","filepath":"site/components/time-picker/demo/size.md","filename":"size","directory":"components/time-picker/demo","id":"components-time-picker-demo-size","template":"demos","html":"<script>(function(){\"use strict\";\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require(\"uxcore\");\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _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) : subClass.__proto__ = superClass; }\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo() {\n _classCallCheck(this, Demo);\n\n return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).apply(this, arguments));\n }\n\n _createClass(Demo, [{\n key: \"render\",\n value: function render() {\n return React.createElement(\n \"div\",\n null,\n React.createElement(_uxcore.TimePicker, null),\n React.createElement(_uxcore.TimePicker, { size: \"middle\", style: { marginTop: 10 } }),\n React.createElement(_uxcore.TimePicker, { size: \"small\", style: { marginTop: 10 } })\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-time-picker-demo-size'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\nimport { TimePicker } from 'uxcore';\n\nclass Demo extends React.Component {\n render() {\n return (\n <div>\n <TimePicker />\n <TimePicker size=\"middle\" style={{ marginTop: 10 }} />\n <TimePicker size=\"small\" style={{ marginTop: 10 }} />\n </div>\n );\n }\n}\n\nReactDOM.render(<Demo />, document.getElementById('components-time-picker-demo-size'));</code></pre></div>"},"status":"public","toc":""}]

基本使用


import { TimePicker } from 'uxcore';

class Demo extends React.Component {
  render() {
    return (
      <TimePicker />
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById('components-time-picker-demo-basic'));

受控模式

通过 value 和 onChange 进入受控模式


import { TimePicker } from 'uxcore';

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: new Date().getTime(),
    };
  }
  render() {
    return (
      <TimePicker
        value={this.state.value}
        onChange={(value) => {
          console.log(value);
          this.setState({ value });
        }}
      />
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById('components-time-picker-demo-control'));

选择时分


import { TimePicker } from 'uxcore';

class Demo extends React.Component {
  render() {
    return (
      <TimePicker showSecond={false} />
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById('components-time-picker-demo-hm'));

12 小时制


import { TimePicker } from 'uxcore';

class Demo extends React.Component {
  render() {
    return (
      <TimePicker use12Hours />
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById('components-time-picker-demo-12h'));

尺寸

提供大中小三种尺寸


import { TimePicker } from 'uxcore';

class Demo extends React.Component {
  render() {
    return (
      <div>
        <TimePicker />
        <TimePicker size="middle" style={{ marginTop: 10 }} />
        <TimePicker size="small" style={{ marginTop: 10 }} />
      </div>
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById('components-time-picker-demo-size'));

Props

Name	Type	Required	Default	Comments
locale	String	No	'zh-cn'	国际化，枚举值 zh-cn/en-us
clearText	String	No	'clear'	清除按钮的文字提示
disabled	Boolean	No	false	是否禁用
allowEmpty	Boolean	No	true	允许清空
open	Boolean	No	false	当前下拉展开的状态，受控属性
defaultValue	moment	No	null	默认初始值，非受控属性
defaultOpenValue	moment	No	moment()	默认面板值，用于没有设置 value/defaultValue 时，设置时区、语言
value	moment	No	null	当前值
placeholder	String	No	''	输入框占位符
className	String	No	''	触发区域的 className
id	String	No	''	触发区域的 id
popupClassName	String	No	''	面板的 className
showHour	Boolean	No	true	是否显示小时
showMinute	Boolean	No	true	是否显示分钟
showSecond	Boolean	No	true	是否显示秒
format	String	No	-	moment format
disabledHours	Function	No	-	禁用小时回调
disabledMinutes	Function	No	-	禁用分钟回调
disabledSeconds	Function	No	-	禁用秒回调
use12Hours	Boolean	No	false	12 小时显示模式
hideDisabledOptions	Boolean	No	false	是否隐藏被禁用的选项
onChange	Function	No	null	选择不同的值触发
addon	Function	No	-	面板的渲染回调，用于在面板底部渲染一些其他元素，例如确认按钮，接受 panel 实例作为参数，可以使用 `panel.close()` 来关闭 panel
placement	String	No	bottomLeft	one of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight']
transitionName	String	No	''
name	String	No	-	设置输入框的 name 属性
onOpen	Function({ open })	No		在面板展开时调用
onClose	Function({ open })	No		在面板收起时调用
hourStep	Number	No	1	小时选项间隔
minuteStep	Number	No	1	分钟选项间隔
secondStep	Number	No	1	秒选项间隔
focusOnOpen	Boolean	No	false	面板展开时自动聚焦到输入框
inputReadOnly	Boolean	No	false	输入框只读