forstok-ui-lib 8.10.0 → 8.10.3

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 (9) hide show
  1. package/dist/index.d.ts +12 -8
  2. package/dist/index.js +2 -2
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.mjs +2 -2
  5. package/dist/index.mjs.map +1 -1
  6. package/package.json +1 -1
  7. package/src/components/date/index.tsx +101 -59
  8. package/src/components/date/ref.tsx +88 -63
  9. package/src/components/textarea/ref.tsx +8 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "forstok-ui-lib",
3
- "version": "8.10.0",
3
+ "version": "8.10.3",
4
4
  "description": "Forstok UI Components Library",
5
5
  "path": "dist",
6
6
  "main": "dist/index.js",
package/src/components/date/index.tsx CHANGED
@@ -1,67 +1,109 @@
1
- import { forwardRef, useState, useEffect } from 'react';
2
- import DatePicker from 'react-datepicker';
3
- import moment from 'moment';
4
- import { DateContainer, DateIndicatorContainer } from './styles';
5
- import type { TState } from '../../typeds/base.typed'
1
+ import { forwardRef, useState, useEffect } from "react";
2
+ import DatePicker from "react-datepicker";
3
+ import moment from "moment";
4
+ import { DateContainer, DateIndicatorContainer } from "./styles";
5
+ import type { TState } from "../../typeds/base.typed";
6
6
 
7
7
  type TDate = {
8
- dateFormat?: string
9
- name: string
10
- evChange?: (name: string, value: Date | null) => void
11
- isField?: boolean
12
- evChangeCustom? : (key: string, value: any) => void
13
- saveFormat?: string
14
- showFormat?: string
15
- isForceUpdate?: boolean
16
- value?: Date
17
- isError?: boolean
18
- allowEmpty?: boolean
19
- setForceUpdate?: TState<boolean>
20
- showTimeInput?: boolean
21
- 'data-qa-id'?: string
22
- 'data-tip'?: string
23
- 'data-place'?: string
24
- 'data-type'?: string
25
- }
8
+ dateFormat?: string;
9
+ name: string;
10
+ evChange?: (name: string, value: Date | null) => void;
11
+ isField?: boolean;
12
+ evChangeCustom?: (key: string, value: any) => void;
13
+ saveFormat?: string;
14
+ showFormat?: string;
15
+ isForceUpdate?: boolean;
16
+ value?: Date;
17
+ isError?: boolean;
18
+ allowEmpty?: boolean;
19
+ setForceUpdate?: TState<boolean>;
20
+ showTimeInput?: boolean;
21
+ minDate?: any;
22
+ minTime?: any;
23
+ "data-qa-id"?: string;
24
+ "data-tip"?: string;
25
+ "data-place"?: string;
26
+ "data-type"?: string;
27
+ };
26
28
 
27
- const DateComponent = forwardRef(({ dateFormat='MMM dd, yyyy', name, evChange, isField, saveFormat, showFormat, evChangeCustom, value, isForceUpdate, setForceUpdate, isError=false, showTimeInput=false, allowEmpty=false, ...props }:TDate, ref) => {
28
- const [ _date , setDate ] = useState<Date | null>(value ? value : (allowEmpty ? null : new Date()));
29
+ const DateComponent = forwardRef(
30
+ (
31
+ {
32
+ dateFormat = "MMM dd, yyyy",
33
+ name,
34
+ evChange,
35
+ isField,
36
+ saveFormat,
37
+ showFormat,
38
+ evChangeCustom,
39
+ value,
40
+ isForceUpdate,
41
+ setForceUpdate,
42
+ minDate,
43
+ minTime,
44
+ isError = false,
45
+ showTimeInput = false,
46
+ allowEmpty = false,
47
+ ...props
48
+ }: TDate,
49
+ ref,
50
+ ) => {
51
+ const [_date, setDate] = useState<Date | null>(
52
+ value ? value : allowEmpty ? null : new Date(),
53
+ );
29
54
 
30
- const handleChange = (value: Date | null) => {
31
- setDate(value);
32
- evChange && evChange(name, value);
33
- (isField && evChangeCustom) && evChangeCustom(name, value ? moment(value).format(saveFormat) : value);;
34
- }
55
+ const handleChange = (value: Date | null) => {
56
+ setDate(value);
57
+ evChange && evChange(name, value);
58
+ isField &&
59
+ evChangeCustom &&
60
+ evChangeCustom(name, value ? moment(value).format(saveFormat) : value);
61
+ };
35
62
 
36
- useEffect(() => {
37
- if (isForceUpdate) {
38
- const newValue = value ? value : (allowEmpty ? null : new Date());
39
- setDate(newValue);
40
- setForceUpdate && setForceUpdate(false);
41
- }
42
- }, [isForceUpdate, setForceUpdate, value, allowEmpty])
63
+ useEffect(() => {
64
+ if (isForceUpdate) {
65
+ const newValue = value ? value : allowEmpty ? null : new Date();
66
+ setDate(newValue);
67
+ setForceUpdate && setForceUpdate(false);
68
+ }
69
+ }, [isForceUpdate, setForceUpdate, value, allowEmpty]);
43
70
 
44
- return (
45
- <DateContainer $isError={isError} {...props['data-qa-id'] && { 'data-qa-id': props['data-qa-id'] }}>
46
- <DatePicker
47
- selected={_date}
48
- name={name}
49
- portalId='popup-portal'
50
- dateFormat={dateFormat}
51
- onChange={handleChange}
52
- showTimeInput={showTimeInput}
53
- onKeyDown={(e) => e.preventDefault()}
54
- ref={ref as any}
55
- />
56
- {
57
- (allowEmpty && _date) ? (
58
- <DateIndicatorContainer onClick={() => handleChange(null)} title='clear'>
59
- <svg height="20" width="20" viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"></path></svg>
71
+ return (
72
+ <DateContainer
73
+ $isError={isError}
74
+ {...(props["data-qa-id"] && { "data-qa-id": props["data-qa-id"] })}
75
+ >
76
+ <DatePicker
77
+ selected={_date}
78
+ name={name}
79
+ portalId="popup-portal"
80
+ dateFormat={dateFormat}
81
+ onChange={handleChange}
82
+ showTimeInput={showTimeInput}
83
+ onKeyDown={(e) => e.preventDefault()}
84
+ ref={ref as any}
85
+ {...(minDate && { minDate: minDate })}
86
+ {...(minTime && { minTime: minTime })}
87
+ />
88
+ {allowEmpty && _date ? (
89
+ <DateIndicatorContainer
90
+ onClick={() => handleChange(null)}
91
+ title="clear"
92
+ >
93
+ <svg
94
+ height="20"
95
+ width="20"
96
+ viewBox="0 0 20 20"
97
+ aria-hidden="true"
98
+ focusable="false"
99
+ >
100
+ <path d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"></path>
101
+ </svg>
60
102
  </DateIndicatorContainer>
61
- ) : null
62
- }
63
- </DateContainer>
64
- )
65
- })
103
+ ) : null}
104
+ </DateContainer>
105
+ );
106
+ },
107
+ );
66
108
 
67
- export default DateComponent
109
+ export default DateComponent;
package/src/components/date/ref.tsx CHANGED
@@ -1,42 +1,44 @@
1
- import { forwardRef, useState, useEffect } from 'react'
2
- import DatePicker from 'react-datepicker'
3
- import moment from 'moment'
1
+ import { forwardRef, useState, useEffect } from "react";
2
+ import DatePicker from "react-datepicker";
3
+ import moment from "moment";
4
4
 
5
- import IconComponent from '../icon'
5
+ import IconComponent from "../icon";
6
6
 
7
- import 'react-datepicker/dist/react-datepicker.css'
8
- import { DateContainer, DateIndicatorContainer } from './styles'
9
- import { TState } from '../../typeds/base.typed'
7
+ import "react-datepicker/dist/react-datepicker.css";
8
+ import { DateContainer, DateIndicatorContainer } from "./styles";
9
+ import { TState } from "../../typeds/base.typed";
10
10
 
11
11
  type TDate = {
12
- dateFormat?: string
13
- name: string
14
- evChange?: (name: string, value: any) => void
15
- isField?: boolean
16
- evChangeCustom? : (key: string, value: any) => void
17
- saveFormat?: string
18
- showFormat?: string
19
- isForceUpdate?: boolean
20
- reset?: boolean
21
- setReset?: TState<boolean>
22
- value?: Date | null
23
- isError?: boolean
24
- allowEmpty?: boolean
25
- setForceUpdate?: TState<boolean>
26
- showTimeInput?: boolean
27
- placeholderText?: string
28
- portalId?: string
29
- isIcon?: boolean
30
- 'data-qa-id'?: string
31
- 'data-tip'?: string
32
- 'data-place'?: string
33
- 'data-type'?: string
34
- disabled?: boolean
35
- }
12
+ dateFormat?: string;
13
+ name: string;
14
+ evChange?: (name: string, value: any) => void;
15
+ isField?: boolean;
16
+ evChangeCustom?: (key: string, value: any) => void;
17
+ saveFormat?: string;
18
+ showFormat?: string;
19
+ isForceUpdate?: boolean;
20
+ reset?: boolean;
21
+ setReset?: TState<boolean>;
22
+ value?: Date | null;
23
+ isError?: boolean;
24
+ allowEmpty?: boolean;
25
+ setForceUpdate?: TState<boolean>;
26
+ showTimeInput?: boolean;
27
+ placeholderText?: string;
28
+ portalId?: string;
29
+ isIcon?: boolean;
30
+ "data-qa-id"?: string;
31
+ "data-tip"?: string;
32
+ "data-place"?: string;
33
+ "data-type"?: string;
34
+ disabled?: boolean;
35
+ minDate?: any;
36
+ minTime?: any;
37
+ };
36
38
 
37
- const DateRefComponent = forwardRef((props:TDate, ref) => {
39
+ const DateRefComponent = forwardRef((props: TDate, ref) => {
38
40
  const {
39
- dateFormat='MMM dd, yyyy',
41
+ dateFormat = "MMM dd, yyyy",
40
42
  name,
41
43
  evChange,
42
44
  isField,
@@ -48,43 +50,53 @@ const DateRefComponent = forwardRef((props:TDate, ref) => {
48
50
  setReset,
49
51
  isForceUpdate,
50
52
  setForceUpdate,
51
- isError=false,
52
- showTimeInput=false,
53
- allowEmpty=false,
53
+ isError = false,
54
+ showTimeInput = false,
55
+ allowEmpty = false,
54
56
  placeholderText,
55
57
  portalId,
56
58
  isIcon,
57
59
  disabled,
58
- ...rest
59
- } = props
60
+ minDate,
61
+ minTime,
62
+ ...rest
63
+ } = props;
60
64
 
61
- const [_date , setDate] = useState<Date | null>(value !== undefined ? value : (allowEmpty ? null : new Date()))
65
+ const [_date, setDate] = useState<Date | null>(
66
+ value !== undefined ? value : allowEmpty ? null : new Date(),
67
+ );
62
68
 
63
69
  const handleChange = (value: Date | null) => {
64
- setDate(value)
70
+ setDate(value);
65
71
  evChange && evChange(name, value);
66
- (isField && evChangeCustom) && evChangeCustom(name, value ? moment(value).format(saveFormat) : value);
67
- }
72
+ isField &&
73
+ evChangeCustom &&
74
+ evChangeCustom(name, value ? moment(value).format(saveFormat) : value);
75
+ };
68
76
 
69
77
  useEffect(() => {
70
- if(reset) {
71
- setDate(null)
72
- setReset && setReset(false)
78
+ if (reset) {
79
+ setDate(null);
80
+ setReset && setReset(false);
73
81
  }
74
82
  if (isForceUpdate) {
75
- const newValue = value ? value : (allowEmpty ? null : new Date())
76
- setDate(newValue)
77
- setForceUpdate && setForceUpdate(false)
83
+ const newValue = value ? value : allowEmpty ? null : new Date();
84
+ setDate(newValue);
85
+ setForceUpdate && setForceUpdate(false);
78
86
  }
79
- }, [isForceUpdate, setForceUpdate, value, allowEmpty, reset, setReset])
87
+ }, [isForceUpdate, setForceUpdate, value, allowEmpty, reset, setReset]);
80
88
 
81
89
  return (
82
- <DateContainer
83
- $isError={isError}
84
- {...rest['data-tip'] && {'data-tip': rest['data-tip'], 'data-place': rest['data-place'], 'data-type': rest['data-type'] }}
85
- {...rest['data-qa-id'] && {'data-qa-id': rest['data-qa-id']}}
90
+ <DateContainer
91
+ $isError={isError}
92
+ {...(rest["data-tip"] && {
93
+ "data-tip": rest["data-tip"],
94
+ "data-place": rest["data-place"],
95
+ "data-type": rest["data-type"],
96
+ })}
97
+ {...(rest["data-qa-id"] && { "data-qa-id": rest["data-qa-id"] })}
86
98
  >
87
- { isIcon && <IconComponent $name='calendar' $width='20px' /> }
99
+ {isIcon && <IconComponent $name="calendar" $width="20px" />}
88
100
  <DatePicker
89
101
  selected={_date}
90
102
  name={name}
@@ -93,17 +105,30 @@ const DateRefComponent = forwardRef((props:TDate, ref) => {
93
105
  showTimeInput={showTimeInput}
94
106
  onKeyDown={(e) => e.preventDefault()}
95
107
  placeholderText={placeholderText}
96
- ref={ref as any}
97
- {...disabled && { disabled: true }}
98
- {...(portalId && { portalId: portalId })}
108
+ ref={ref as any}
109
+ {...(disabled && { disabled: true })}
110
+ {...(portalId && { portalId: portalId })}
111
+ {...(minDate && { minDate: minDate })}
112
+ {...(minTime && { minTime: minTime })}
99
113
  />
100
- {(allowEmpty && _date) ? (
101
- <DateIndicatorContainer onClick={() => handleChange(null)} title='clear'>
102
- <svg height="20" width="20" viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"></path></svg>
114
+ {allowEmpty && _date ? (
115
+ <DateIndicatorContainer
116
+ onClick={() => handleChange(null)}
117
+ title="clear"
118
+ >
119
+ <svg
120
+ height="20"
121
+ width="20"
122
+ viewBox="0 0 20 20"
123
+ aria-hidden="true"
124
+ focusable="false"
125
+ >
126
+ <path d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"></path>
127
+ </svg>
103
128
  </DateIndicatorContainer>
104
129
  ) : null}
105
130
  </DateContainer>
106
- )
107
- })
131
+ );
132
+ });
108
133
 
109
- export default DateRefComponent
134
+ export default DateRefComponent;
package/src/components/textarea/ref.tsx CHANGED
@@ -17,7 +17,7 @@ const TextAreaRefComponent = forwardRef<
17
17
  $isEmoji?: boolean;
18
18
  $emojiStyles?: CSSProperties;
19
19
  }
20
- >(({ $isError, $isEmoji, $emojiStyles, ...props }, ref) => {
20
+ >(({ $isError, $isEmoji, $emojiStyles, disabled, ...props }, ref) => {
21
21
  const innerRef = useRef<HTMLTextAreaElement>(null);
22
22
 
23
23
  useImperativeHandle(ref, () => innerRef.current as HTMLTextAreaElement);
@@ -44,11 +44,17 @@ const TextAreaRefComponent = forwardRef<
44
44
 
45
45
  return (
46
46
  <div style={{ position: "relative" }}>
47
- <TextAreaContainer ref={innerRef} $isError={$isError} {...props} />
47
+ <TextAreaContainer
48
+ ref={innerRef}
49
+ $isError={$isError}
50
+ disabled={disabled}
51
+ {...props}
52
+ />
48
53
  {$isEmoji ? (
49
54
  <EmojiComponent
50
55
  $mode="textarea"
51
56
  evChange={evChangeEmoji}
57
+ isDisabled={disabled}
52
58
  {...($emojiStyles && { $emojiStyles: $emojiStyles })}
53
59
  />
54
60
  ) : null}