]> git.immae.eu Git - github/fretlink/time-picker.git/commitdiff
remove toggle feature because rc-trigger included; update example and document 0.2.0
authorMG12 <wuzhao.mail@gmail.com>
Mon, 16 Nov 2015 06:44:26 +0000 (14:44 +0800)
committerMG12 <wuzhao.mail@gmail.com>
Mon, 16 Nov 2015 06:44:26 +0000 (14:44 +0800)
12 files changed:
.gitignore [new file with mode: 0644]
HISTORY.md
README.md
assets/index.less
examples/pick-time.html [new file with mode: 0644]
examples/pick-time.js [moved from examples/pick-time.jsx with 68% similarity]
package.json
src/TimePanel.jsx
src/TimePicker.jsx [moved from src/Picker.jsx with 87% similarity]
src/index.js [new file with mode: 0644]
src/mixin/CommonMixin.js
src/module/Header.jsx

diff --git a/.gitignore b/.gitignore
new file mode 100644 (file)
index 0000000..037d70d
--- /dev/null
@@ -0,0 +1,27 @@
+*.iml
+*.log
+.idea/
+.ipr
+.iws
+*~
+~*
+*.diff
+*.patch
+*.bak
+.DS_Store
+Thumbs.db
+.project
+.*proj
+.svn/
+*.swp
+*.swo
+*.pyc
+*.pyo
+.build
+node_modules
+.cache
+dist
+*.css
+build
+lib
+
index e2ad063c490bc7f31fa12d71359201af8672d664..676fc17f146616d91239020aef09b8776bd09595 100644 (file)
@@ -3,6 +3,11 @@ History
 
 ---
 
+0.2.0 / 2015-11-16
+------------------
+
+`update` rename the component, update document.
+
 0.1.0 / 2015-11-12
 ------------------
 
index 40cb7c4df60fe28e43e24c35aaabeea6611c97db..998fe4e2de84bae38832c0f639affb0b7ac2dba6 100644 (file)
--- a/README.md
+++ b/README.md
@@ -1,2 +1,56 @@
-# timepicker
-Timepicker
+TimePicker
+==========
+
+React TimePicker
+
+install
+-------
+
+```
+npm install rc-time-picker
+```
+
+Usage
+-----
+
+```
+import TimePicker from 'rc-time-picker';
+import React from 'react';
+import ReactDOM from 'react-dom';
+ReactDOM.render(<TimePicker />, container);
+```
+
+API
+---
+
+### TimePanel
+
+| Name          | Type                       | Default                                       | Description                                   |
+|---------------|----------------------------|-----------------------------------------------|-----------------------------------------------|
+| prefixCls     | String                     |                                               | prefixCls of this component                   |
+| locale        | Object                     | import from 'rc-time-picker/lib/locale/en_US' |                                               |
+| defaultValue  | GregorianCalendar          | null                                          | defaultValue like input's defaultValue        |
+| placeholder   | String                     | ''                                            | time input's placeholder                      |
+| formatter     | GregorianCalendarFormatter | HH:mm:ss or HH:mm or mm:ss                    |                                               |
+| hourOptions   | Array<String>              | hour options                                  |                                               |
+| minuteOptions | Array<String>              | minute options                                |                                               |
+| secondOptions | Array<String>              | second options                                |                                               |
+| onChange      | Function                   | null                                          | called when input or select a different value |
+
+### TimePicker
+
+| Name      | Type                    | Default | Description                                   |
+|-----------|-------------------------|---------|-----------------------------------------------|
+| prefixCls | String                  |         | prefixCls of this component                   |
+| panel     | TimePanel React Element |         |                                               |
+| disabled  | Boolean                 | false   | whether picker is disabled                    |
+| open      | Boolean                 | false   | current open state of picker. controlled prop |
+| value     | GregorianCalendar       | null    | current value like input's value              |
+| onChange  | Function                | null    | called when select a different value          |
+| onOpen    | Function                | null    | called when open picker                       |
+| onClose   | Function                | null    | called when close picker                      |
+
+License
+-------
+
+rc-time-picker is released under the MIT license.
index 2ab247bdc611b5d996a1c557b22bb94076726255..bc904de7cd470b8141291cd0a8c7621c7827f6d1 100644 (file)
@@ -1,6 +1,7 @@
-@prefixClass: rc-timepicker;
+@prefixClass: rc-time-picker;
 
 .@{prefixClass} {
+  display: inline;
   box-sizing: border-box;
   * {
     box-sizing: border-box;
diff --git a/examples/pick-time.html b/examples/pick-time.html
new file mode 100644 (file)
index 0000000..48cdce8
--- /dev/null
@@ -0,0 +1 @@
+placeholder
similarity index 68%
rename from examples/pick-time.jsx
rename to examples/pick-time.js
index 33c5d07f01ad23ad6c7706e9e7f00a554f97bb1e..8c6b82688e4cff7112eed38e0ac23a0bd8593df7 100644 (file)
@@ -1,14 +1,15 @@
-import '../component/timepicker/assets/index.less';
+import 'rc-time-picker/assets/index.less';
 
 import React from 'react';
 import ReactDom from 'react-dom';
-import zhCn from 'gregorian-calendar/lib/locale/zh_CN';
-import GregorianCalendar from 'gregorian-calendar';
 
-import TimePicker from '../component/timepicker/src/Picker';
-import TimePanel from '../component/timepicker/src/TimePanel';
-import TimepickerLocale from '../component/timepicker/src/locale/zh_CN';
+import GregorianCalendar from 'gregorian-calendar';
 import DateTimeFormat from 'gregorian-calendar-format';
+import zhCn from 'gregorian-calendar/lib/locale/zh_CN';
+
+import TimePicker from 'rc-time-picker/src/TimePicker';
+import TimePanel from 'rc-time-picker/src/TimePanel';
+import TimePickerLocale from 'rc-time-picker/src/locale/zh_CN';
 
 const formatter = new DateTimeFormat('HH:mm:ss');
 
@@ -18,7 +19,7 @@ now.setTime(Date.now());
 const timePanel = (
   <TimePanel
     defaultValue={now}
-    locale={TimepickerLocale}
+    locale={TimePickerLocale}
     formatter={formatter}
     minuteOptions={[0, 30]}
   />
@@ -32,5 +33,5 @@ ReactDom.render(
       }
     }
   </TimePicker>,
-  document.getElementById('react-content')
+  document.getElementById('__react-content')
 );
index 3f7b76597bb629fdd168a10aa9ce05d97890f17b..483c3d9b897d3462ed7273d7592b3e339bdf5047 100644 (file)
@@ -1,12 +1,13 @@
 {
-  "name": "rc-timepicker",
-  "version": "0.1.0",
-  "description": "React Timepicker",
+  "name": "rc-time-picker",
+  "version": "0.2.0",
+  "description": "React TimePicker",
   "keywords": [
     "react",
-    "react-timepicker",
+    "react-time-picker",
     "react-component",
     "timepicker",
+    "time-picker",
     "ui component",
     "ui",
     "component"
     "assets/*.css"
   ],
   "main": "lib/index",
-  "homepage": "http://github.com/react-component/timepicker",
+  "homepage": "http://github.com/react-component/time-picker",
   "author": "wuzhao.mail@gmail.com",
   "repository": {
     "type": "git",
-    "url": "git@github.com:react-component/timepicker.git"
+    "url": "git@github.com:react-component/time-picker.git"
   },
   "bugs": {
-    "url": "http://github.com/react-component/timepicker/issues"
+    "url": "http://github.com/react-component/time-picker/issues"
   },
   "licenses": "MIT",
   "config": {
@@ -57,6 +58,7 @@
     "lint"
   ],
   "dependencies": {
+    "classnames": "~2.2.0",
     "gregorian-calendar": "4.x",
     "gregorian-calendar-format": "4.x",
     "object-assign": "4.x",
index dad8036ddd30328900b80f90b7f930cb2435040c..110ca1ec2c63c4f424b50279affc6cc0a464bc1a 100644 (file)
@@ -90,7 +90,7 @@ const TimePanel = React.createClass({
       <div className={`${prefixCls}-panel ${cls}`}>
         <Header
           prefixCls={prefixCls}
-          gregorianTimepickerLocale={defaultValue.locale}
+          gregorianTimePickerLocale={defaultValue.locale}
           locale={locale}
           value={value}
           formatter={this.getFormatter()}
similarity index 87%
rename from src/Picker.jsx
rename to src/TimePicker.jsx
index f15434aa5f1eb0d114ca15f5311f0fe3c2999f45..6bb97a1c0a71c3d27da9dda8ac1c57b1ba2b473c 100644 (file)
@@ -47,10 +47,6 @@ const Picker = React.createClass({
     return { open, value };
   },
 
-  componentWillMount() {
-    document.addEventListener('click', this.handleDocumentClick, false);
-  },
-
   componentWillReceiveProps(nextProps) {
     const { value, open } = nextProps;
     if (value !== undefined) {
@@ -61,10 +57,6 @@ const Picker = React.createClass({
     }
   },
 
-  componentWillUnmount() {
-    document.removeEventListener('click', this.handleDocumentClick, false);
-  },
-
   onPanelChange(value) {
     const props = this.props;
     this.setState({
@@ -114,16 +106,6 @@ const Picker = React.createClass({
     }
   },
 
-  handleDocumentClick(event) {
-    // hide popup when click outside
-    if (this.state.open && ReactDOM.findDOMNode(this.panelInstance).contains(event.target)) {
-      return;
-    }
-    this.setState({
-      open: false,
-    });
-  },
-
   focus() {
     if (!this.state.open) {
       ReactDOM.findDOMNode(this).focus();
diff --git a/src/index.js b/src/index.js
new file mode 100644 (file)
index 0000000..f72be4f
--- /dev/null
@@ -0,0 +1,2 @@
+import TimePicker from './TimePicker';
+export default TimePicker;
index 4203a9ea7aa7baa7c24e68b0950629832ae9ed9d..0e8ed32e84037454a6a165e40a75ada56976addd 100644 (file)
@@ -10,7 +10,7 @@ export default {
 
   getDefaultProps() {
     return {
-      prefixCls: 'rc-timepicker',
+      prefixCls: 'rc-time-picker',
       locale: enUs,
     };
   },
index f7e443f4b1755b2e5c2b6e2700df007d98de5ef6..92a0089243be5ea167a7c5c9e282c7f58e62228a 100644 (file)
@@ -4,7 +4,7 @@ const Header = React.createClass({
   propTypes: {
     formatter: PropTypes.object,
     prefixCls: PropTypes.string,
-    gregorianTimepickerLocale: PropTypes.object,
+    gregorianTimePickerLocale: PropTypes.object,
     locale: PropTypes.object,
     disabledDate: PropTypes.func,
     placeholder: PropTypes.string,
@@ -26,7 +26,7 @@ const Header = React.createClass({
   },
 
   componentWillReceiveProps(nextProps) {
-    const value = this.formatValue(nextProps.value);
+    const value = nextProps.value;
     this.setState({
       str: value && nextProps.formatter.format(value) || '',
       invalid: false,
@@ -39,16 +39,15 @@ const Header = React.createClass({
       str,
     });
     let value = null;
-    const {formatter, gregorianTimepickerLocale, hourOptions, minuteOptions, secondOptions, onChange} = this.props;
+    const {formatter, gregorianTimePickerLocale, hourOptions, minuteOptions, secondOptions, onChange} = this.props;
 
     if (str) {
       const originalValue = this.props.value;
       try {
         value = formatter.parse(str, {
-          locale: gregorianTimepickerLocale,
+          locale: gregorianTimePickerLocale,
           obeyCount: true,
         });
-        value = this.formatValue(value);
       } catch (ex) {
         this.setState({
           invalid: true,
@@ -114,17 +113,6 @@ const Header = React.createClass({
     return <input className={`${prefixCls}-input  ${invalidClass}`} value={str} placeholder={placeholder} onChange={this.onInputChange} />;
   },
 
-  formatValue(value) {
-    const newValue = this.props.value.clone();
-    if (!value) {
-      return newValue;
-    }
-    newValue.fields[4] = value.fields[4];
-    newValue.fields[5] = value.fields[5];
-    newValue.fields[6] = value.fields[6];
-    return newValue;
-  },
-
   render() {
     const { prefixCls } = this.props;
     return (