fone-design-system_v2 1.0.323 → 1.0.324
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.
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
import { DatePickerProps as AntdDatePickerProps } from 'antd/es/date-picker';
|
|
3
3
|
import { Dayjs } from 'dayjs';
|
|
4
|
+
import { CSSObject } from 'styled-components';
|
|
4
5
|
/**
|
|
5
6
|
* 상태별 스타일 처리 방식 (TimePicker와 동일)
|
|
6
7
|
* - 인라인 `style`은 specificity가 가장 높아 hover/active(클래스)로 덮을 수 없다.
|
|
@@ -9,6 +10,14 @@ import { Dayjs } from 'dayjs';
|
|
|
9
10
|
* - border/background 같은 box 속성은 컨테이너(.ant-picker)에 적용하고,
|
|
10
11
|
* fontSize/fontWeight/color 같은 텍스트 속성은 입력(input)이 컨테이너 값을
|
|
11
12
|
* 상속(inherit)하게 만들어 한 번의 스타일 객체로 같이 처리한다.
|
|
13
|
+
*
|
|
14
|
+
* popup(달력 패널) 커스텀
|
|
15
|
+
* - popup은 portal로 body에 렌더링되어 위 StyledWrapper 밖에 있으므로
|
|
16
|
+
* 래퍼 CSS로는 잡히지 않는다.
|
|
17
|
+
* - 그래서 antd `classNames.popup.root`로 고유 클래스를 popup에 부여하고,
|
|
18
|
+
* `createGlobalStyle`로 그 클래스에 스코프된 전역 CSS(`popupStyle`)를 주입한다.
|
|
19
|
+
* - `popupStyle`은 중첩 셀렉터도 지원하므로 패널뿐 아니라 내부 셀/헤더 등도
|
|
20
|
+
* 외부에서 커스텀할 수 있다. (예: `{ ".ant-picker-cell-selected .ant-picker-cell-inner": {...} }`)
|
|
12
21
|
*/
|
|
13
22
|
export interface DatePickerProps extends Omit<AntdDatePickerProps, "onChange" | "value" | "style"> {
|
|
14
23
|
value?: Dayjs | null;
|
|
@@ -19,6 +28,13 @@ export interface DatePickerProps extends Omit<AntdDatePickerProps, "onChange" |
|
|
|
19
28
|
hoverStyle?: React.CSSProperties;
|
|
20
29
|
/** active(focus) 상태에서 base/hover 위에 덮어쓸 스타일 */
|
|
21
30
|
activeStyle?: React.CSSProperties;
|
|
31
|
+
/**
|
|
32
|
+
* popup(달력 패널) 스타일.
|
|
33
|
+
* - 패널 root에 적용된다. 중첩 셀렉터로 내부 요소(셀/헤더 등)도 지정 가능.
|
|
34
|
+
*/
|
|
35
|
+
popupStyle?: CSSObject;
|
|
36
|
+
/** popup root에 추가로 붙일 클래스명 */
|
|
37
|
+
popupClassName?: string;
|
|
22
38
|
}
|
|
23
39
|
declare const DatePicker: React.ForwardRefExoticComponent<Omit<DatePickerProps, "ref"> & React.RefAttributes<any>>;
|
|
24
40
|
export default DatePicker;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
import { TimePickerProps } from 'antd';
|
|
3
|
+
import { CSSObject } from 'styled-components';
|
|
3
4
|
/**
|
|
4
5
|
* 상태별 스타일 처리 방식
|
|
5
6
|
* - 인라인 `style`은 specificity가 가장 높아 hover/active(클래스)로 덮을 수 없다.
|
|
@@ -9,6 +10,14 @@ import { TimePickerProps } from 'antd';
|
|
|
9
10
|
* fontSize/fontWeight/color 같은 텍스트 속성은 입력(input)이 컨테이너 값을
|
|
10
11
|
* 상속(inherit)하게 만들어 한 번의 스타일 객체로 같이 처리한다.
|
|
11
12
|
*
|
|
13
|
+
* popup(시간 선택 패널) 커스텀
|
|
14
|
+
* - popup은 portal로 body에 렌더링되어 위 StyledWrapper 밖에 있으므로
|
|
15
|
+
* 래퍼 CSS로는 잡히지 않는다.
|
|
16
|
+
* - 그래서 antd `classNames.popup.root`로 고유 클래스를 popup에 부여하고,
|
|
17
|
+
* `createGlobalStyle`로 그 클래스에 스코프된 전역 CSS(`popupStyle`)를 주입한다.
|
|
18
|
+
* - `popupStyle`은 중첩 셀렉터도 지원하므로 패널뿐 아니라 내부 셀 등도
|
|
19
|
+
* 외부에서 커스텀할 수 있다. (예: `{ ".ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner": {...} }`)
|
|
20
|
+
*
|
|
12
21
|
* (대안) antd 네이티브 방식인 ConfigProvider 테마 토큰:
|
|
13
22
|
* <ConfigProvider
|
|
14
23
|
* theme={{ components: { DatePicker: {
|
|
@@ -27,6 +36,13 @@ export interface DsTimePickerProps extends TimePickerProps {
|
|
|
27
36
|
hoverStyle?: React.CSSProperties;
|
|
28
37
|
/** active(focus) 상태에서 base/hover 위에 덮어쓸 스타일 */
|
|
29
38
|
activeStyle?: React.CSSProperties;
|
|
39
|
+
/**
|
|
40
|
+
* popup(시간 선택 패널) 스타일.
|
|
41
|
+
* - 패널 root에 적용된다. 중첩 셀렉터로 내부 요소(셀 등)도 지정 가능.
|
|
42
|
+
*/
|
|
43
|
+
popupStyle?: CSSObject;
|
|
44
|
+
/** popup root에 추가로 붙일 클래스명 */
|
|
45
|
+
popupClassName?: string;
|
|
30
46
|
}
|
|
31
47
|
declare const TimePicker: React.FC<DsTimePickerProps>;
|
|
32
48
|
export default TimePicker;
|