feat: add readOnly prop to fields with input

p3ol · Feb 18, 2019 · f9bb29e · f9bb29e
1 parent f6f5337
commit f9bb29e
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 8 deletions.
diff --git a/src/ColorPicker.js b/src/ColorPicker.js
@@ -20,6 +20,7 @@ class ColorPicker extends React.Component {
     disabled: PropTypes.bool,
     format: PropTypes.oneOf(['auto', 'hex', 'rgb', 'rgba', 'hsla']),
     native: PropTypes.bool,
+    readOnly: PropTypes.readOnly,
     theme: PropTypes.string,
     value: PropTypes.string,
     animateMenu: PropTypes.func,
@@ -32,6 +33,7 @@ class ColorPicker extends React.Component {
     disabled: false,
     format: 'auto',
     native: false,
+    readOnly: false,
     theme: 'default',
     value: '',
     onBlur: () => {},
@@ -161,10 +163,10 @@ class ColorPicker extends React.Component {
   }
 
   onMouseMove = (e) => {
-    const { disabled, format } = this.props;
+    const { disabled, format, readOnly } = this.props;
     const { handleMoving, handleType } = this.state;
 
-    if (!handleMoving || !handleType || disabled) {
+    if (!handleMoving || !handleType || disabled || readOnly) {
       return;
     }
 
@@ -218,10 +220,10 @@ class ColorPicker extends React.Component {
   }
 
   onMouseUp = (e) => {
-    const { disabled } = this.props;
+    const { disabled, readOnly } = this.props;
     const { handleMoving, handleType } = this.state;
 
-    if (!handleMoving || !handleType || disabled) {
+    if (!handleMoving || !handleType || disabled || readOnly) {
       return;
     }
 
@@ -250,6 +252,7 @@ class ColorPicker extends React.Component {
       theme,
       native,
       disabled,
+      readOnly,
       animateMenu,
       ...rest
     } = this.props;
@@ -264,6 +267,7 @@ class ColorPicker extends React.Component {
         type={ native ? 'color' : 'text' }
         value={value}
         theme={theme}
+        readOnly={readOnly}
         disabled={disabled}
         onChange={this.onInputChange.bind(this)}
       />

diff --git a/src/DateField.js b/src/DateField.js
@@ -17,6 +17,7 @@ class DateField extends React.Component {
     monthNames: PropTypes.array,
     native: PropTypes.bool,
     placeholder: PropTypes.string,
+    readOnly: PropTypes.bool,
     required: PropTypes.bool,
     theme: PropTypes.string,
     value: PropTypes.instanceOf(Date),
@@ -36,6 +37,7 @@ class DateField extends React.Component {
       'July', 'August', 'September', 'October', 'November', 'December'],
     native: false,
     placeholder: '',
+    readOnly: false,
     required: false,
     theme: 'default',
     value: null,
@@ -77,7 +79,9 @@ class DateField extends React.Component {
   }
 
   onToggle(opened) {
-    if (this.props.disabled) {
+    const { disabled, readOnly } = this.props;
+
+    if (disabled || readOnly) {
       return;
     }
 
@@ -222,6 +226,7 @@ class DateField extends React.Component {
   render() {
     const {
       disabled,
+      readOnly,
       required,
       boxed,
       className,
@@ -248,7 +253,7 @@ class DateField extends React.Component {
           'theme-' + theme,
           {
             native,
-            disabled,
+            disabled: disabled || readOnly,
             opened,
             required,
             boxed,
@@ -271,6 +276,7 @@ class DateField extends React.Component {
               ref={(ref) => this.input = ref}
               className="field"
               type="date"
+              readOnly={readOnly}
               disabled={disabled}
               required={required}
               value={nativeValue || ''}

diff --git a/src/TagsField.js b/src/TagsField.js
@@ -16,6 +16,7 @@ class TagsField extends React.Component {
       PropTypes.bool,
     ]),
     placeholder: PropTypes.string,
+    readOnly: PropTypes.bool,
     required: PropTypes.bool,
     theme: PropTypes.string,
     value: PropTypes.array,
@@ -32,6 +33,7 @@ class TagsField extends React.Component {
     disabled: false,
     label: '',
     placeholder: '',
+    readOnly: false,
     required: false,
     theme: 'default',
     value: [],
@@ -225,6 +227,7 @@ class TagsField extends React.Component {
   render() {
     const {
       disabled,
+      readOnly,
       required,
       boxed,
       className,
@@ -247,7 +250,7 @@ class TagsField extends React.Component {
           'theme-' + theme,
           {
             focused,
-            disabled,
+            disabled: disabled || readOnly,
             required,
             boxed,
             dirty: input || value?.length,
@@ -294,6 +297,7 @@ class TagsField extends React.Component {
               { ...omit(rest, ['parseValue', 'parseTitle']) }
               ref={(ref) => this.textInput = ref}
               type="text"
+              readOnly={readOnly}
               disabled={disabled}
               required={required}
               placeholder={placeholder}

diff --git a/src/TextField.js b/src/TextField.js
@@ -16,6 +16,7 @@ class TextField extends React.Component {
       PropTypes.bool,
     ]),
     placeholder: PropTypes.string,
+    readOnly: PropTypes.bool,
     required: PropTypes.bool,
     rows: PropTypes.number,
     theme: PropTypes.string,
@@ -32,6 +33,7 @@ class TextField extends React.Component {
     disabled: false,
     label: '',
     placeholder: '',
+    readOnly: false,
     required: false,
     rows: null,
     theme: 'default',
@@ -155,6 +157,7 @@ class TextField extends React.Component {
 
     const {
       disabled,
+      readOnly,
       required,
       boxed,
       className,
@@ -177,7 +180,7 @@ class TextField extends React.Component {
           {
             focused,
             dirty,
-            disabled,
+            disabled: disabled || readOnly,
             required,
             boxed,
             invalid: !valid,
@@ -204,6 +207,7 @@ class TextField extends React.Component {
             className="field"
             type={this.getType()}
             disabled={disabled}
+            readOnly={readOnly}
             required={required}
             value={value}
             onFocus={this.onFocus.bind(this)}