react-ui-basics 0.0.181 → 0.0.182

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/DatePicker.d.ts +3 -0
  2. package/DatePicker.js +12 -4
  3. package/DatePicker.js.map +1 -1
  4. package/bundle.css +1118 -1118
  5. package/package.json +1 -1
  6. package/src/DatePicker.tsx +38 -25
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-ui-basics",
3
- "version": "0.0.181",
3
+ "version": "0.0.182",
4
4
  "description": "",
5
5
  "module": "index.js",
6
6
  "_main": "index.cjs.js",
package/src/DatePicker.tsx CHANGED
@@ -32,6 +32,9 @@ const DayRenderer = ({day, selected, minDate, onClick}: {
32
32
  export interface DatePickerProps {
33
33
  id?: number | string
34
34
  name?: string
35
+ open?: boolean
36
+ onClose?: () => void
37
+ renderInput?: () => JSX.Element
35
38
  value: Date
36
39
  minDate?: Date
37
40
  formatter: (date: Date) => string
@@ -56,7 +59,7 @@ class DatePicker extends React.Component<DatePickerProps, DatePickerState> {
56
59
  super(props);
57
60
  const value = props.value;
58
61
  this.state = {
59
- focused: false,
62
+ focused: !!props.open,
60
63
  value,
61
64
  text: props.formatter(value),
62
65
  selectedMonth: DateTools.dateOf(value || new Date()).resetTime().set(1, DateTools.TimeUnit.DAY),
@@ -72,12 +75,18 @@ class DatePicker extends React.Component<DatePickerProps, DatePickerState> {
72
75
  text: this.props.formatter(value)
73
76
  })
74
77
  }
78
+ if (this.props.open !== prevProps.open) {
79
+ const open = !!this.props.open
80
+ this.setState({
81
+ focused: open
82
+ }, !open ? this.props.onClose : null)
83
+ }
75
84
  };
76
85
 
77
86
  componentDidMount() {
78
87
  document.addEventListener('mousedown', this.listener = (e) => {
79
88
  if (this.state.focused && !this.el.contains(e.target))
80
- this.setState({focused: false});
89
+ this.setState({focused: false}, this.props.onClose);
81
90
  })
82
91
  };
83
92
 
@@ -92,6 +101,9 @@ class DatePicker extends React.Component<DatePickerProps, DatePickerState> {
92
101
  if (!DateTools.equals(this.state.value, nextState.value))
93
102
  return true;
94
103
 
104
+ if (this.props.open !== nextProps.open)
105
+ return true;
106
+
95
107
  if (this.state.text !== nextState.text)
96
108
  return true;
97
109
 
@@ -108,32 +120,33 @@ class DatePicker extends React.Component<DatePickerProps, DatePickerState> {
108
120
  };
109
121
 
110
122
  render() {
111
- const {minDate, formatter, parser, dayOfWeekToString, monthToString} = this.props;
123
+ const {minDate, formatter, parser, dayOfWeekToString, monthToString, renderInput} = this.props;
112
124
  const {value, text, focused, selectedMonth} = this.state;
113
125
 
114
126
  return <div className={`DatePicker`} ref={el => this.el = el}>
115
- <TextField id={'value'} value={text}
116
- autoComplete="off"
117
- onFocus={() => this.setState({focused: true})}
118
- onChange={e => {
119
- const text = e.target.value;
120
- try {
121
- const date = parser(text);
122
- if (date && date instanceof Date && !Number.isNaN(date.getTime())) {
123
- if (!value || !DateTools.equals(value, date))
124
- this.onChange(date);
125
- }
126
- this.setState({text})
127
- } catch (ignored) {
128
- }
129
- }}
130
- onKeyDown={e => {
131
- if ((e.keyCode === 27/*esc*/ || e.keyCode === 13/*enter*/) && focused) {
132
- e.preventDefault();
133
- this.setState({text: formatter(value), focused: false});
134
- }
135
- }}
136
- />
127
+ {!!renderInput && renderInput()}
128
+ {!renderInput && <TextField id={'value'} value={text}
129
+ autoComplete="off"
130
+ onFocus={() => this.setState({focused: true})}
131
+ onChange={e => {
132
+ const text = e.target.value;
133
+ try {
134
+ const date = parser(text);
135
+ if (date && date instanceof Date && !Number.isNaN(date.getTime())) {
136
+ if (!value || !DateTools.equals(value, date))
137
+ this.onChange(date);
138
+ }
139
+ this.setState({text})
140
+ } catch (ignored) {
141
+ }
142
+ }}
143
+ onKeyDown={e => {
144
+ if ((e.keyCode === 27/*esc*/ || e.keyCode === 13/*enter*/) && focused) {
145
+ e.preventDefault();
146
+ this.setState({text: formatter(value), focused: false});
147
+ }
148
+ }}
149
+ />}
137
150
  <div className={`calendar ${focused && 'focused'}`}>
138
151
  <div className={'row monthSelect'}>
139
152
  <span>