@rc-component/picker 1.2.4 → 1.3.0

package/lib/PickerPanel/context.d.ts

@@ -1,9 +1,17 @@
 import * as React from 'react';
-import type { PanelMode, SemanticStructure, SharedPanelProps } from '../interface';
+import type { PanelMode, SharedPanelProps } from '../interface';
+import type { FilledPanelClassNames, FilledPanelStyles } from '../hooks/useSemantic';
+export interface SharedPanelContextProps {
+    classNames: FilledPanelClassNames;
+    styles: FilledPanelStyles;
+}
+export declare const SharedPanelContext: React.Context<SharedPanelContextProps>;
 export interface PanelContextProps<DateType extends object = any> extends Pick<SharedPanelProps<DateType>, 'prefixCls' | 'cellRender' | 'generateConfig' | 'locale' | 'onSelect' | 'hoverValue' | 'hoverRangeValue' | 'onHover' | 'values' | 'pickerValue' | 'disabledDate' | 'minDate' | 'maxDate' | 'prevIcon' | 'nextIcon' | 'superPrevIcon' | 'superNextIcon'> {
     /** Tell current panel type */
     panelType: PanelMode;
     now: DateType;
+    classNames: FilledPanelClassNames;
+    styles: FilledPanelStyles;
 }
 /** Used for each single Panel. e.g. DatePanel */
 export declare const PanelContext: React.Context<PanelContextProps<any>>;
@@ -17,8 +25,6 @@ export interface PickerHackContextProps {
     hideNext?: boolean;
     hideHeader?: boolean;
     onCellDblClick?: () => void;
-    styles?: Partial<Record<SemanticStructure, React.CSSProperties>>;
-    classNames?: Partial<Record<SemanticStructure, string>>;
 }
 /**
  * Internal usage for RangePicker to not to show the operation arrow

package/lib/PickerPanel/context.js

@@ -4,12 +4,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PickerHackContext = exports.PanelContext = void 0;
+exports.SharedPanelContext = exports.PickerHackContext = exports.PanelContext = void 0;
 exports.useInfo = useInfo;
 exports.usePanelContext = usePanelContext;
 var React = _interopRequireWildcard(require("react"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var SharedPanelContext = exports.SharedPanelContext = /*#__PURE__*/React.createContext(null);
 /** Used for each single Panel. e.g. DatePanel */
 var PanelContext = exports.PanelContext = /*#__PURE__*/React.createContext(null);
 function usePanelContext() {
@@ -20,6 +21,8 @@ function usePanelContext() {
  * Get shared props for the SharedPanelProps interface.
  */
 function useInfo(props, panelType) {
+  // TODO: this is not good to get from each props.
+  // Should move to `SharedPanelContext` instead.
   var prefixCls = props.prefixCls,
     generateConfig = props.generateConfig,
     locale = props.locale,
@@ -38,6 +41,11 @@ function useInfo(props, panelType) {
     superPrevIcon = props.superPrevIcon,
     superNextIcon = props.superNextIcon;
 
+  // ======================= Context ========================
+  var _React$useContext = React.useContext(SharedPanelContext),
+    classNames = _React$useContext.classNames,
+    styles = _React$useContext.styles;
+
   // ========================= MISC =========================
   var now = generateConfig.getNow();
 
@@ -47,6 +55,8 @@ function useInfo(props, panelType) {
     values: values,
     pickerValue: pickerValue,
     prefixCls: prefixCls,
+    classNames: classNames,
+    styles: styles,
     disabledDate: disabledDate,
     minDate: minDate,
     maxDate: maxDate,

package/lib/PickerPanel/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { CellRender, Components, Locale, OnPanelChange, PanelMode, PickerMode, SharedPanelProps, SharedTimeProps } from '../interface';
+import type { CellRender, Components, Locale, OnPanelChange, PanelMode, PanelSemanticName, PickerMode, SharedPanelProps, SharedTimeProps } from '../interface';
 export interface PickerPanelRef {
     nativeElement: HTMLDivElement;
 }
@@ -43,7 +43,6 @@ export interface SinglePickerPanelProps<DateType extends object = any> extends B
     value?: DateType | null;
     onChange?: (date: DateType) => void;
 }
-type PanelSemanticName = 'popupBody' | 'popupContent' | 'popupItem';
 export type PickerPanelProps<DateType extends object = any> = BasePickerPanelProps<DateType> & {
     /** multiple selection. Not support time or datetime picker */
     multiple?: boolean;

package/lib/PickerPanel/index.js

@@ -264,16 +264,19 @@ function PickerPanel(props, ref) {
   var PanelComponent = components[internalMode] || DefaultComponents[internalMode] || _DatePanel.default;
 
   // ======================== Context =========================
-  var mergedStyles = pickerStyles !== null && pickerStyles !== void 0 ? pickerStyles : panelStyles;
-  var mergedClassNames = pickerClassNames !== null && pickerClassNames !== void 0 ? pickerClassNames : panelClassNames;
+  var sharedPanelContext = React.useMemo(function () {
+    var _ref2, _pickerClassNames$pop, _ref3, _pickerStyles$popup;
+    return {
+      classNames: (_ref2 = (_pickerClassNames$pop = pickerClassNames === null || pickerClassNames === void 0 ? void 0 : pickerClassNames.popup) !== null && _pickerClassNames$pop !== void 0 ? _pickerClassNames$pop : panelClassNames) !== null && _ref2 !== void 0 ? _ref2 : {},
+      styles: (_ref3 = (_pickerStyles$popup = pickerStyles === null || pickerStyles === void 0 ? void 0 : pickerStyles.popup) !== null && _pickerStyles$popup !== void 0 ? _pickerStyles$popup : panelStyles) !== null && _ref3 !== void 0 ? _ref3 : {}
+    };
+  }, [pickerClassNames, panelClassNames, pickerStyles, panelStyles]);
   var parentHackContext = React.useContext(_context2.PickerHackContext);
   var pickerPanelContext = React.useMemo(function () {
     return _objectSpread(_objectSpread({}, parentHackContext), {}, {
-      hideHeader: hideHeader,
-      classNames: mergedClassNames,
-      styles: mergedStyles
+      hideHeader: hideHeader
     });
-  }, [parentHackContext, hideHeader, mergedClassNames, mergedStyles]);
+  }, [parentHackContext, hideHeader]);
 
   // ======================== Warnings ========================
   if (process.env.NODE_ENV !== 'production') {
@@ -293,7 +296,9 @@ function PickerPanel(props, ref) {
   'disabledDate', 'minDate', 'maxDate',
   // Hover
   'onHover']);
-  return /*#__PURE__*/React.createElement(_context2.PickerHackContext.Provider, {
+  return /*#__PURE__*/React.createElement(_context2.SharedPanelContext.Provider, {
+    value: sharedPanelContext
+  }, /*#__PURE__*/React.createElement(_context2.PickerHackContext.Provider, {
     value: pickerPanelContext
   }, /*#__PURE__*/React.createElement("div", {
     ref: rootRef,
@@ -326,7 +331,7 @@ function PickerPanel(props, ref) {
     ,
     hoverRangeValue: hoverRangeDate,
     hoverValue: hoverValue
-  }))));
+  })))));
 }
 var RefPanelPicker = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(PickerPanel));
 if (process.env.NODE_ENV !== 'production') {

package/lib/hooks/useSemantic.d.ts

@@ -0,0 +1,13 @@
+import type { SharedPickerProps } from '../interface';
+export type FilledPanelClassNames = NonNullable<SharedPickerProps['classNames']>['popup'];
+export type FilledPanelStyles = NonNullable<SharedPickerProps['styles']>['popup'];
+export type FilledClassNames = NonNullable<SharedPickerProps['classNames']> & {
+    popup: FilledPanelClassNames;
+};
+export type FilledStyles = NonNullable<SharedPickerProps['styles']> & {
+    popup: FilledPanelStyles;
+};
+/**
+ * Convert `classNames` & `styles` to a fully filled object
+ */
+export default function useSemantic(classNames?: SharedPickerProps['classNames'], styles?: SharedPickerProps['styles']): readonly [FilledClassNames, FilledStyles];

package/lib/hooks/useSemantic.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useSemantic;
+var _react = require("react");
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
+ * Convert `classNames` & `styles` to a fully filled object
+ */
+function useSemantic(classNames, styles) {
+  return (0, _react.useMemo)(function () {
+    var mergedClassNames = _objectSpread(_objectSpread({}, classNames), {}, {
+      popup: (classNames === null || classNames === void 0 ? void 0 : classNames.popup) || {}
+    });
+    var mergedStyles = _objectSpread(_objectSpread({}, styles), {}, {
+      popup: (styles === null || styles === void 0 ? void 0 : styles.popup) || {}
+    });
+    return [mergedClassNames, mergedStyles];
+  }, [classNames, styles]);
+}

package/lib/interface.d.ts

@@ -201,19 +201,25 @@ export type Components<DateType extends object = any> = Partial<Record<InternalM
     button?: React.ComponentType<any> | string;
     input?: React.ComponentType<any> | string;
 }>;
-export type SemanticStructure = 'popup' | 'popupBody' | 'popupContent' | 'popupItem' | 'suffix' | 'prefix' | 'input';
 export type CustomFormat<DateType> = (value: DateType) => string;
 export type FormatType<DateType = any> = string | CustomFormat<DateType>;
 export type SharedHTMLAttrs = Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange' | 'placeholder' | 'id' | 'onInvalid' | 'disabled' | 'onFocus' | 'onBlur' | 'onSelect' | 'min' | 'max' | 'onKeyDown' | 'size' | 'prefix'>;
 export type PickerFocusEventHandler = (e: React.FocusEvent<HTMLElement>, info: BaseInfo) => void;
 export type LegacyOnKeyDown = (event: React.KeyboardEvent<HTMLElement>, preventDefault: VoidFunction) => void;
+export type SemanticName = 'root' | 'prefix' | 'input' | 'suffix';
+export type PanelSemanticName = 'root' | 'header' | 'body' | 'content' | 'item' | 'footer';
 export interface SharedPickerProps<DateType extends object = any> extends SharedHTMLAttrs, Pick<SharedPanelProps<DateType>, 'prevIcon' | 'nextIcon' | 'superPrevIcon' | 'superNextIcon'> {
     direction?: 'ltr' | 'rtl';
     prefixCls?: string;
     className?: string;
     style?: React.CSSProperties;
-    styles?: Partial<Record<SemanticStructure, React.CSSProperties>>;
-    classNames?: Partial<Record<SemanticStructure, string>>;
+    rootClassName?: string;
+    styles?: Partial<Record<SemanticName, React.CSSProperties>> & {
+        popup?: Partial<Record<PanelSemanticName, React.CSSProperties>>;
+    };
+    classNames?: Partial<Record<SemanticName, string>> & {
+        popup?: Partial<Record<PanelSemanticName, string>>;
+    };
     locale: Locale;
     generateConfig: GenerateConfig<DateType>;
     picker?: PickerMode;

package/lib/utils/getClearIcon.d.ts

@@ -2,4 +2,4 @@ import type { ReactNode } from "react";
 import React from "react";
 export declare function getClearIcon(prefixCls: string, allowClear?: boolean | {
     clearIcon?: ReactNode;
-}, clearIcon?: ReactNode): string | number | true | Iterable<ReactNode> | React.JSX.Element;
+}, clearIcon?: ReactNode): string | number | true | React.JSX.Element | Iterable<ReactNode>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/picker",
-  "version": "1.2.4",
+  "version": "1.3.0",
   "description": "React date & time picker",
   "keywords": [
     "react",