feat: add forceLabel option to DateField, SelectField, ColorField & T…

…extField
p3ol · Feb 19, 2019 · f5346d7 · f5346d7
1 parent 5603053
commit f5346d7
Show file tree

Hide file tree

Showing 10 changed files with 106 additions and 31 deletions.
diff --git a/examples/components/DateFieldPage.js b/examples/components/DateFieldPage.js
@@ -108,6 +108,7 @@ class DateFieldPage extends React.Component {
               disabled={this.props.disabled}
               error={this.props.error}
               boxed={this.props.boxed}
+              forceLabel={true}
               placeholder="Pick a date"
               onChange={this.onChange.bind(this, 'customTitle')}
               parseTitle={value => value.toLocaleDateString('fr-FR', {

diff --git a/examples/components/SelectFieldPage.js b/examples/components/SelectFieldPage.js
@@ -15,6 +15,7 @@ class SelectFieldPage extends React.Component {
       objects: {},
       objectsForceValue: {},
       autocomplete: {},
+      forceLabel: {},
     };
 
     this.options = [
@@ -60,6 +61,7 @@ class SelectFieldPage extends React.Component {
               error={this.props.error}
               boxed={this.props.boxed}
               onChange={this.onChange.bind(this, 'default')}
+              label="Label"
               placeholder="Select one..."
               options={this.options}
             />
@@ -179,6 +181,27 @@ class SelectFieldPage extends React.Component {
             <pre>{ JSON.stringify(this.state.autocomplete, null, 2)}</pre>
           </div>
         </div>
+
+        <h2 className="mt-5">Force label</h2>
+        <div className="row mt-5">
+          <div className="col-6">
+            <SelectField
+              required={true}
+              disabled={this.props.disabled}
+              error={this.props.error}
+              boxed={this.props.boxed}
+              onChange={this.onChange.bind(this, 'forceLabel')}
+              label="Label"
+              forceLabel={true}
+              placeholder="Select one..."
+              options={this.options}
+            />
+          </div>
+          <div className="col-6">
+            <p>Current state :</p>
+            <pre>{ JSON.stringify(this.state.forceLabel, null, 2)}</pre>
+          </div>
+        </div>
       </div>
     );
   }

diff --git a/examples/components/TextFieldPage.js b/examples/components/TextFieldPage.js
@@ -124,6 +124,26 @@ class TextFieldPage extends React.Component {
             <pre>{ JSON.stringify(this.state.multiline, null, 2)}</pre>
           </div>
         </div>
+
+        <h2 className="mt-5">Force label</h2>
+        <div className="row mt-5">
+          <div className="col-6">
+            <TextField
+              required={true}
+              boxed={this.props.boxed}
+              error={this.props.error}
+              placeholder="Placeholder"
+              label="Label"
+              forceLabel={true}
+              disabled={this.props.disabled}
+              onChange={this.onChange.bind(this, 'multiline')}
+            />
+          </div>
+          <div className="col-6">
+            <p>Current state :</p>
+            <pre>{ JSON.stringify(this.state.multiline, null, 2)}</pre>
+          </div>
+        </div>
       </div>
     );
   }

diff --git a/src/DateField.js b/src/DateField.js
@@ -13,6 +13,7 @@ class DateField extends React.Component {
   static propTypes = {
     boxed: PropTypes.bool,
     disabled: PropTypes.bool,
+    forceLabel: PropTypes.bool,
     label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
     monthNames: PropTypes.array,
     native: PropTypes.bool,
@@ -32,6 +33,7 @@ class DateField extends React.Component {
   static defaultProps = {
     boxed: false,
     disabled: false,
+    forceLabel: false,
     label: null,
     monthNames: ['January', 'February', 'March', 'April', 'May', 'June',
       'July', 'August', 'September', 'October', 'November', 'December'],
@@ -60,24 +62,35 @@ class DateField extends React.Component {
     selected: this.props.value || new Date(),
     valid: true,
     value: this.props.value,
+    dirty: false,
   };
 
   constructor(props) {
     super(props);
     inject(styles, 'junipero-date-field-styles');
   }
 
+  componentDidMount() {
+    if (this.props.value) {
+      this.init();
+    }
+  }
+
   componentDidUpdate(prevProps) {
     if (this.props.value !== prevProps.value && this.props.value) {
-      const value = new Date(this.props.value);
-      this.onChange({
-        year: value.getFullYear(),
-        month: value.getMonth(),
-        day: value.getDate(),
-      }, null, false);
+      this.init();
     }
   }
 
+  init() {
+    const value = new Date(this.props.value);
+    this.onChange({
+      year: value.getFullYear(),
+      month: value.getMonth(),
+      day: value.getDate(),
+    }, null, false);
+  }
+
   onToggle(opened) {
     const { disabled, readOnly } = this.props;
 
@@ -205,6 +218,7 @@ class DateField extends React.Component {
     this.setState({
       opened: false,
       value: new Date(newDate),
+      dirty: true,
       nativeValue: e?.target?.value,
       selected: new Date(newDate),
       displayed: new Date(newDate),
@@ -226,6 +240,7 @@ class DateField extends React.Component {
   render() {
     const {
       disabled,
+      forceLabel,
       readOnly,
       required,
       boxed,
@@ -255,8 +270,10 @@ class DateField extends React.Component {
             native,
             disabled,
             opened,
+            dirty,
             required,
             boxed,
+            'force-label': forceLabel,
             'with-label': label,
           },
           className,
@@ -282,7 +299,7 @@ class DateField extends React.Component {
               value={nativeValue || ''}
               onChange={this.onNativeChange.bind(this)}
               validate={null}
-              placeholder={!dirty ? placeholder : null}
+              placeholder={placeholder}
             />
           ) : (
             <Dropdown

diff --git a/src/SelectField.js b/src/SelectField.js
@@ -17,7 +17,12 @@ class SelectField extends React.Component {
     autoCompleteThreshold: PropTypes.number,
     boxed: PropTypes.bool,
     disabled: PropTypes.bool,
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    forceLabel: PropTypes.bool,
+    label: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.object,
+      PropTypes.bool,
+    ]),
     native: PropTypes.bool,
     options: PropTypes.array,
     placeholder: PropTypes.string,
@@ -36,6 +41,7 @@ class SelectField extends React.Component {
     autoCompleteThreshold: 400,
     boxed: false,
     disabled: false,
+    forceLabel: false,
     label: null,
     native: false,
     options: [],
@@ -154,7 +160,7 @@ class SelectField extends React.Component {
 
     this.setState({
       value: index,
-      dirty: !!index,
+      dirty: !!value,
       valid,
     }, () => {
       if (propagateChange) {
@@ -250,6 +256,7 @@ class SelectField extends React.Component {
       error,
       theme,
       animateMenu,
+      forceLabel,
       ...rest
     } = this.props;
 
@@ -278,16 +285,18 @@ class SelectField extends React.Component {
             required,
             dirty,
             boxed,
-            'with-label': label,
+            'force-label': forceLabel,
+            'with-label': label !== false && (label || placeholder),
             invalid: !valid,
           },
           className,
         )}
       >
         <div className="field-wrapper">
-
-          { label && (
-            <label htmlFor={id}>{ label }</label>
+          { label !== false && (
+            <label htmlFor={id}>
+              { label || placeholder }
+            </label>
           )}
 
           { native && !autoComplete ? (

diff --git a/src/TextField.js b/src/TextField.js
@@ -10,6 +10,7 @@ class TextField extends React.Component {
   static propTypes = {
     boxed: PropTypes.bool,
     disabled: PropTypes.bool,
+    forceLabel: PropTypes.bool,
     label: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.object,
@@ -31,6 +32,7 @@ class TextField extends React.Component {
   static defaultProps = {
     boxed: false,
     disabled: false,
+    forceLabel: false,
     label: '',
     placeholder: '',
     readOnly: false,
@@ -157,6 +159,7 @@ class TextField extends React.Component {
 
     const {
       disabled,
+      forceLabel,
       readOnly,
       required,
       boxed,
@@ -184,6 +187,7 @@ class TextField extends React.Component {
             required,
             boxed,
             invalid: !valid,
+            'force-label': forceLabel,
             'with-label': label !== false && (label || placeholder),
           },
           className,

diff --git a/src/theme/components/DateField.styl b/src/theme/components/DateField.styl
@@ -12,20 +12,21 @@
     display: block
     color: $color-shuttle-gray
 
-  &.with-label
-    &, &.boxed
-      & > .field-wrapper
-        & > label
-          opacity: 1
-          transform: translate3d(0, 0, 0)
-
-        & > .field,
-        .junipero-dropdown > .field
-          padding-top: 21px
-          padding-bottom: 5px
-
-        &:after
-          top: 28px
+  &.dirty, &.dirty.focused, &.force-label
+    &.with-label
+      &, &.boxed
+        & > .field-wrapper
+          & > label
+            opacity: 1
+            transform: translate3d(0, 0, 0)
+
+          & > .field,
+          .junipero-dropdown > .field
+            padding-top: 21px
+            padding-bottom: 5px
+
+          &:after
+            top: 28px
 
   & > .field-wrapper
     position: relative

diff --git a/src/theme/components/SelectField.styl b/src/theme/components/SelectField.styl
@@ -14,8 +14,8 @@
     display: block
     color: $color-shuttle-gray
 
-  &.with-label
-    &, &.boxed
+  &.dirty, &.dirty.focused, &.force-label
+    &.with-label, &.boxed.with-label
       & > .field-wrapper
         & > label
           opacity: 1

diff --git a/src/theme/components/TextField.styl b/src/theme/components/TextField.styl
@@ -26,7 +26,7 @@
       color: $color-shuttle-gray
 
   &.theme-default
-    &.focused, &.dirty
+    &.focused
       .field-wrapper
         ::placeholder
           color: $color-eastern-blue

diff --git a/src/theme/index.styl b/src/theme/index.styl
@@ -13,7 +13,7 @@
     position: relative
     display: block
 
-    &.dirty, &.dirty.focused
+    &.dirty, &.dirty.focused, &.force-label
       &.with-label, &.boxed.with-label
         & > .field-wrapper