@rolster/react-components 18.10.11 → 18.11.0

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.
@@ -1172,7 +1172,7 @@
1172
1172
  opacity: 0.5;
1173
1173
  }
1174
1174
  .rls-month-picker__span {
1175
- font-size: 5.8rem;
1175
+ font-size: 5.85rem;
1176
1176
  margin: auto;
1177
1177
  cursor: default;
1178
1178
  pointer-events: none;
@@ -1494,6 +1494,7 @@
1494
1494
  opacity: 0.5;
1495
1495
  }
1496
1496
  .rls-year-picker__year__span {
1497
+ font-size: var(--sizing-x8);
1497
1498
  margin: auto;
1498
1499
  cursor: default;
1499
1500
  pointer-events: none;
package/dist/es/index.js CHANGED
@@ -551,13 +551,13 @@ function RlsDayRangePicker({ date, disabled: disabledPicker, formControl, maxDat
551
551
  function RlsMoneyField({ children, decimals, disabled, formControl, placeholder, symbol, rlsTheme, value, onValue }) {
552
552
  return (jsxs("div", { className: renderClassStatus('rls-box-field', {
553
553
  focused: formControl?.focused,
554
- error: formControl?.touched && !formControl?.valid,
554
+ error: formControl?.wrong,
555
555
  disabled: formControl?.disabled || disabled
556
556
  }, 'rls-money-field'), "rls-theme": rlsTheme, children: [children && jsx("label", { className: "rls-box-field__label", children: children }), jsx("div", { className: "rls-box-field__component", children: jsx("div", { className: "rls-box-field__body", children: jsx(RlsInputMoney, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, symbol: symbol, decimals: decimals, onValue: onValue }) }) }), formControl?.touched && formControl?.error && (jsx("div", { className: "rls-box-field__error", children: jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }));
557
557
  }
558
558
 
559
- const MONTH_MAX_VALUE = Month.January;
560
- const MONTH_MIN_VALUE = Month.December;
559
+ const MONTH_MAX_VALUE = Month.December;
560
+ const MONTH_MIN_VALUE = Month.January;
561
561
  class MonthPickerFactory {
562
562
  constructor(props) {
563
563
  const { date, value, maxDate, minDate } = props;
@@ -697,7 +697,7 @@ function RlsMonthTitlePicker({ monthControl, yearControl, date, maxDate, minDate
697
697
  function RlsNumberField({ children, disabled, formControl, placeholder, rlsTheme, value, onValue }) {
698
698
  return (jsxs("div", { className: renderClassStatus('rls-box-field', {
699
699
  focused: formControl?.focused,
700
- error: formControl?.touched && !formControl?.valid,
700
+ error: formControl?.wrong,
701
701
  disabled: formControl?.disabled || disabled
702
702
  }, 'rls-number-field'), "rls-theme": rlsTheme, children: [children && jsx("label", { className: "rls-box-field__label", children: children }), jsx("div", { className: "rls-box-field__component", children: jsx("div", { className: "rls-box-field__body", children: jsx(RlsInputNumber, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, onValue: onValue }) }) }), formControl?.touched && formControl?.error && (jsx("div", { className: "rls-box-field__error", children: jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }));
703
703
  }
@@ -922,7 +922,7 @@ function RlsPasswordField({ children, disabled, formControl, placeholder, rlsThe
922
922
  }
923
923
  return (jsxs("div", { className: renderClassStatus(' rls-box-field', {
924
924
  focused: formControl?.focused,
925
- error: formControl?.touched && !formControl?.valid,
925
+ error: formControl?.wrong,
926
926
  disabled: formControl?.disabled || disabled
927
927
  }, 'rls-password-field'), "rls-theme": rlsTheme, children: [children && jsx("label", { className: "rls-box-field__label", children: children }), jsx("div", { className: "rls-box-field__component", children: jsxs("div", { className: "rls-box-field__body", children: [jsx(RlsInputPassword, { formControl: formControl, disabled: disabled, placeholder: placeholder, type: password ? 'password' : 'text' }), jsx(RlsButtonAction, { icon: password ? 'eye' : 'eye-off', onClick: onToggleInput })] }) }), formControl?.touched && formControl?.error && (jsx("div", { className: "rls-box-field__error", children: jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }));
928
928
  }
@@ -962,7 +962,7 @@ function RlsSwitchLabel({ children, disabled, extended, formControl, rlsTheme })
962
962
  function RlsTextField({ children, disabled, formControl, placeholder, rlsTheme, value, onValue }) {
963
963
  return (jsxs("div", { className: renderClassStatus('rls-box-field', {
964
964
  focused: formControl?.focused,
965
- error: formControl?.touched && !formControl?.valid,
965
+ error: formControl?.wrong,
966
966
  disabled: formControl?.disabled || disabled
967
967
  }, 'rls-text-field'), "rls-theme": rlsTheme, children: [children && jsx("label", { className: "rls-box-field__label", children: children }), jsx("div", { className: "rls-box-field__component", children: jsx("div", { className: "rls-box-field__body", children: jsx(RlsInputText, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, onValue: onValue }) }) }), formControl?.touched && formControl?.error && (jsx("div", { className: "rls-box-field__error", children: jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }));
968
968
  }
@@ -1552,7 +1552,7 @@ const controlIsValid = (props) => {
1552
1552
  function useReactControl(props = {}) {
1553
1553
  const [state, setCurrentState] = useState(props.state);
1554
1554
  const [value, setValue] = useState(props.state);
1555
- const [touched, setTouched] = useState(false);
1555
+ const [touched, setTouched] = useState(props.touched || false);
1556
1556
  const [dirty, setDirty] = useState(false);
1557
1557
  const [focused, setFocused] = useState(false);
1558
1558
  const [disabled, setDisabled] = useState(false);
@@ -1600,31 +1600,32 @@ function useReactControl(props = {}) {
1600
1600
  return subscribers.subscribe(subscriber);
1601
1601
  }
1602
1602
  return {
1603
+ blur,
1604
+ dirty,
1605
+ disable,
1606
+ disabled,
1603
1607
  elementRef,
1608
+ enable,
1609
+ enabled: !disabled,
1604
1610
  error,
1605
1611
  errors,
1612
+ focus,
1606
1613
  focused,
1607
- unfocused: !focused,
1608
- dirty,
1609
- pristine: !dirty,
1610
- disabled,
1611
- enabled: !disabled,
1612
- valid,
1613
1614
  invalid: !valid,
1614
- touched,
1615
- untouched: !touched,
1615
+ pristine: !dirty,
1616
1616
  reset,
1617
- focus,
1618
- blur,
1619
- disable,
1620
- enable,
1621
- touch,
1622
- untouch,
1623
1617
  setState,
1624
1618
  setValidators,
1625
1619
  state,
1626
1620
  subscribe,
1627
- value
1621
+ touch,
1622
+ touched,
1623
+ unfocused: !focused,
1624
+ untouch,
1625
+ untouched: !touched,
1626
+ valid,
1627
+ value,
1628
+ wrong: touched && !valid
1628
1629
  };
1629
1630
  }
1630
1631