@ringcentral/juno 2.0.3-beta.0 → 2.1.1
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.
- package/components/Chip/Chip.d.ts +18 -3
- package/components/Chip/Chip.js +10 -2
- package/components/Chip/styles/ChipStyle.d.ts +8 -1
- package/components/Chip/styles/ChipStyle.js +36 -5
- package/components/Forms/Picker/DatePicker/Calendar.js +1 -1
- package/components/Forms/Select/PlainSelect/styles/StyledSelect.js +1 -1
- package/components/Menu/Menu/Menu.d.ts +1 -1
- package/components/Snackbar/SnackbarAction/styles/StyledSnackbarContent.js +1 -1
- package/components/Tabs/Tabs/MoreMenuTabs/MoreMenuTabs.js +34 -38
- package/components/Tabs/Tabs/Tabs.js +5 -3
- package/es6/components/Chip/Chip.js +12 -4
- package/es6/components/Chip/styles/ChipStyle.js +38 -7
- package/es6/components/Forms/Picker/DatePicker/Calendar.js +1 -1
- package/es6/components/Forms/Select/PlainSelect/styles/StyledSelect.js +1 -1
- package/es6/components/Snackbar/SnackbarAction/styles/StyledSnackbarContent.js +1 -1
- package/es6/components/Tabs/Tabs/MoreMenuTabs/MoreMenuTabs.js +34 -38
- package/es6/components/Tabs/Tabs/Tabs.js +5 -3
- package/es6/foundation/utils/removeClassName.js +36 -7
- package/foundation/utils/removeClassName.d.ts +34 -1
- package/foundation/utils/removeClassName.js +36 -7
- package/package.json +1 -1
|
@@ -6,8 +6,23 @@ import { RcIconButtonProps } from '../Buttons/IconButton';
|
|
|
6
6
|
import { WithTooltipProps } from '../Tooltip';
|
|
7
7
|
declare type RcChipClassProp = RcClassesProps<'focused'>;
|
|
8
8
|
declare type RcChipProps = {
|
|
9
|
-
/**
|
|
9
|
+
/**
|
|
10
|
+
* color palette set,
|
|
11
|
+
*
|
|
12
|
+
* - variant: `default`: effect that active color when focus
|
|
13
|
+
* - variant: `outlined`: effect whole tag color
|
|
14
|
+
*
|
|
15
|
+
* in `outlined` variant when only set color, that will use color to calculate default background color
|
|
16
|
+
* - `lighten`: lighten `0.92` main color
|
|
17
|
+
* - `darken`: darken `0.72` main color
|
|
18
|
+
*/
|
|
10
19
|
color?: RcPaletteProp;
|
|
20
|
+
/**
|
|
21
|
+
* color palette set, only work when variant is `outlined`
|
|
22
|
+
*
|
|
23
|
+
* effect background color when not have any interactive.
|
|
24
|
+
*/
|
|
25
|
+
backgroundColor?: RcPaletteProp;
|
|
11
26
|
/** is that error chip */
|
|
12
27
|
error?: boolean;
|
|
13
28
|
/**
|
|
@@ -24,8 +39,8 @@ declare type RcChipProps = {
|
|
|
24
39
|
deleteTooltip?: string;
|
|
25
40
|
/** @deprecated should use `error` */
|
|
26
41
|
isError?: boolean;
|
|
27
|
-
} & RcBaseProps<ComponentProps<typeof MuiChip>, 'color' | 'size' | '
|
|
28
|
-
declare const RcChip: import("styled-components").StyledComponentClass<Pick<RcChipProps, "key" | "className" | "color" | "id" | "lang" | "style" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "label" | "slot" | "title" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "innerRef" | "disabled" | "focused" | "error" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "isError" | "deleteIconProps" | "Avatar" | "deleteAutomationId" | "deleteTooltip"> & React.RefAttributes<any>, import("../../foundation").RcTheme, Pick<Pick<RcChipProps, "key" | "className" | "color" | "id" | "lang" | "style" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "label" | "slot" | "title" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "innerRef" | "disabled" | "focused" | "error" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "isError" | "deleteIconProps" | "Avatar" | "deleteAutomationId" | "deleteTooltip"> & React.RefAttributes<any>, "ref" | "key" | "className" | "color" | "id" | "lang" | "style" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "label" | "slot" | "title" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "innerRef" | "disabled" | "focused" | "error" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "isError" | "deleteIconProps" | "Avatar" | "deleteAutomationId" | "deleteTooltip"> & {
|
|
42
|
+
} & RcBaseProps<ComponentProps<typeof MuiChip>, 'color' | 'size' | 'icon'> & RcChipClassProp;
|
|
43
|
+
declare const RcChip: import("styled-components").StyledComponentClass<Pick<RcChipProps, "key" | "className" | "color" | "id" | "lang" | "style" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "label" | "slot" | "title" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "variant" | "innerRef" | "disabled" | "focused" | "error" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "backgroundColor" | "isError" | "deleteIconProps" | "Avatar" | "deleteAutomationId" | "deleteTooltip"> & React.RefAttributes<any>, import("../../foundation").RcTheme, Pick<Pick<RcChipProps, "key" | "className" | "color" | "id" | "lang" | "style" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "label" | "slot" | "title" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "variant" | "innerRef" | "disabled" | "focused" | "error" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "backgroundColor" | "isError" | "deleteIconProps" | "Avatar" | "deleteAutomationId" | "deleteTooltip"> & React.RefAttributes<any>, "ref" | "key" | "className" | "color" | "id" | "lang" | "style" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "label" | "slot" | "title" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "variant" | "innerRef" | "disabled" | "focused" | "error" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "backgroundColor" | "isError" | "deleteIconProps" | "Avatar" | "deleteAutomationId" | "deleteTooltip"> & {
|
|
29
44
|
theme?: import("../../foundation").RcTheme | undefined;
|
|
30
45
|
}>;
|
|
31
46
|
export { RcChip };
|
package/components/Chip/Chip.js
CHANGED
|
@@ -11,7 +11,9 @@ var styles_1 = require("./styles");
|
|
|
11
11
|
var utils_1 = require("./utils");
|
|
12
12
|
var _RcChip = react_1.forwardRef(function (inProps, ref) {
|
|
13
13
|
var props = foundation_1.useThemeProps({ props: inProps, name: 'RcChip' });
|
|
14
|
-
var AvatarProp = props.Avatar, deleteTooltip = props.deleteTooltip, deleteAutomationId = props.deleteAutomationId, isError = props.isError, classesProp = props.classes, _a = props.avatar, avatarProp = _a === void 0 ? AvatarProp : _a, _b = props.error, error = _b === void 0 ? isError : _b, id = props.id, label = props.label, disabled = props.disabled, deleteIconProp = props.deleteIcon, deleteIconProps = props.deleteIconProps, tabIndex = props.tabIndex, focused = props.focused, color = props.color, className = props.className, rest = tslib_1.__rest(props, ["Avatar", "deleteTooltip", "deleteAutomationId", "isError", "classes", "avatar", "error", "id", "label", "disabled", "deleteIcon", "deleteIconProps", "tabIndex", "focused", "color", "className"]);
|
|
14
|
+
var AvatarProp = props.Avatar, deleteTooltip = props.deleteTooltip, deleteAutomationId = props.deleteAutomationId, isError = props.isError, backgroundColor = props.backgroundColor, classesProp = props.classes, _a = props.avatar, avatarProp = _a === void 0 ? AvatarProp : _a, _b = props.error, error = _b === void 0 ? isError : _b, id = props.id, label = props.label, disabled = props.disabled, deleteIconProp = props.deleteIcon, deleteIconProps = props.deleteIconProps, tabIndex = props.tabIndex, focused = props.focused, color = props.color, className = props.className, rest = tslib_1.__rest(props, ["Avatar", "deleteTooltip", "deleteAutomationId", "isError", "backgroundColor", "classes", "avatar", "error", "id", "label", "disabled", "deleteIcon", "deleteIconProps", "tabIndex", "focused", "color", "className"]);
|
|
15
|
+
var innerRef = react_1.useRef(null);
|
|
16
|
+
var chipRef = foundation_1.useForkRef(innerRef, ref);
|
|
15
17
|
var combinedClasses = react_1.useMemo(function () { return foundation_1.combineClasses(utils_1.RcChipClasses, classesProp); }, [classesProp]);
|
|
16
18
|
var classes = react_1.useMemo(function () { return foundation_1.omit(combinedClasses, ['focused']); }, [combinedClasses]);
|
|
17
19
|
var deleteIcon = react_1.useMemo(function () {
|
|
@@ -39,12 +41,18 @@ var _RcChip = react_1.forwardRef(function (inProps, ref) {
|
|
|
39
41
|
}
|
|
40
42
|
return undefined;
|
|
41
43
|
}, [avatarProp]);
|
|
42
|
-
|
|
44
|
+
// TODO: can be removed when upgrade to v5
|
|
45
|
+
// * need remove not need MuiChip-deletable for render correct
|
|
46
|
+
react_1.useLayoutEffect(function () {
|
|
47
|
+
foundation_1.removeClassName(innerRef, 'MuiChip-deletable');
|
|
48
|
+
});
|
|
49
|
+
return (react_1.default.createElement(Chip_1.default, tslib_1.__assign({ ref: chipRef, id: id, tabIndex: disabled ? -1 : tabIndex, label: label, disabled: disabled, classes: classes, className: clsx_1.default(className, focused ? combinedClasses.focused : undefined), avatar: avatar, deleteIcon: deleteIcon, "data-test-automation-class": "selected-item", "data-test-automation-value": id ? id : label, "data-is-error": error }, rest)));
|
|
43
50
|
});
|
|
44
51
|
var RcChip = foundation_1.styled(_RcChip)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), styles_1.ChipStyle);
|
|
45
52
|
exports.RcChip = RcChip;
|
|
46
53
|
RcChip.defaultProps = {
|
|
47
54
|
tabIndex: 0,
|
|
55
|
+
// FIXME: after implement click state, that can be remove
|
|
48
56
|
clickable: false,
|
|
49
57
|
};
|
|
50
58
|
RcChip.displayName = 'RcChip';
|
|
@@ -1,3 +1,10 @@
|
|
|
1
|
-
import { RcThemedStyled } from '../../../foundation';
|
|
1
|
+
import { PaletteReturnType, RcThemedStyled } from '../../../foundation';
|
|
2
2
|
import { RcChipProps } from '../Chip';
|
|
3
|
+
export declare const chipColor: RcThemedStyled<RcChipProps & {
|
|
4
|
+
focusedBorderColor: PaletteReturnType;
|
|
5
|
+
normalBorderColor?: PaletteReturnType;
|
|
6
|
+
interactiveBackgroundColor: PaletteReturnType;
|
|
7
|
+
normalColor: PaletteReturnType;
|
|
8
|
+
normalBackgroundColor: PaletteReturnType;
|
|
9
|
+
}, any>;
|
|
3
10
|
export declare const ChipStyle: RcThemedStyled<RcChipProps, any>;
|
|
@@ -5,15 +5,46 @@ var foundation_1 = require("../../../foundation");
|
|
|
5
5
|
var styles_1 = require("../../Forms/TextField/styles");
|
|
6
6
|
var utils_1 = require("../utils");
|
|
7
7
|
var defaultBgColor = foundation_1.palette2('action', 'grayDark');
|
|
8
|
+
var defaultTextColor = foundation_1.palette2('neutral', 'f06');
|
|
8
9
|
var errorBgColor = foundation_1.palette2('danger', 'f02');
|
|
10
|
+
var defaultOutlineBgColor = foundation_1.palette2('neutral', 'b01');
|
|
9
11
|
function fakePseudoRoundBorder(addOptions) {
|
|
10
12
|
return foundation_1.fakeBorder(tslib_1.__assign({ pseudo: true, radius: 'round' }, addOptions));
|
|
11
13
|
}
|
|
14
|
+
exports.chipColor = function (_a) {
|
|
15
|
+
var focusedBorderColor = _a.focusedBorderColor, variant = _a.variant, error = _a.error, normalBorderColor = _a.normalBorderColor, interactiveBackgroundColor = _a.interactiveBackgroundColor, normalColor = _a.normalColor, normalBackgroundColor = _a.normalBackgroundColor, color = _a.color, backgroundColor = _a.backgroundColor, theme = _a.theme;
|
|
16
|
+
var outlined = variant === 'outlined';
|
|
17
|
+
var hoverColorLighten = error || outlined;
|
|
18
|
+
if (outlined &&
|
|
19
|
+
!error &&
|
|
20
|
+
// mean have set custom background color
|
|
21
|
+
(color || backgroundColor)) {
|
|
22
|
+
normalColor = focusedBorderColor;
|
|
23
|
+
normalBorderColor = focusedBorderColor;
|
|
24
|
+
interactiveBackgroundColor = focusedBorderColor;
|
|
25
|
+
var notCustomBackground = !backgroundColor || backgroundColor === color;
|
|
26
|
+
// when color be same make that color have lighten
|
|
27
|
+
if (notCustomBackground) {
|
|
28
|
+
normalBackgroundColor =
|
|
29
|
+
theme.palette.type === 'light'
|
|
30
|
+
? foundation_1.lighten(normalBackgroundColor, 0.92)
|
|
31
|
+
: foundation_1.darken(normalBackgroundColor, 0.72);
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
return foundation_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n color: ", ";\n background-color: ", ";\n\n ", ";\n\n ", " {\n &:hover {\n background-color: ", ";\n }\n }\n\n &.", ", ", " {\n ", ";\n\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n "], ["\n color: ", ";\n background-color: ", ";\n\n ", ";\n\n ", " {\n &:hover {\n background-color: ",
|
|
35
|
+
";\n }\n }\n\n &.", ", ", " {\n ", ";\n\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n "])), normalColor, normalBackgroundColor, fakePseudoRoundBorder({ color: normalBorderColor }), foundation_1.nonTouchHoverMedia, foundation_1.setOpacity(interactiveBackgroundColor, hoverColorLighten ? '08' : '12'), utils_1.RcChipClasses.focused, foundation_1.focusVisible, fakePseudoRoundBorder({ color: focusedBorderColor }), foundation_1.setOpacity(interactiveBackgroundColor, '16'), foundation_1.setOpacity(interactiveBackgroundColor, '24'));
|
|
36
|
+
};
|
|
12
37
|
exports.ChipStyle = function (props) {
|
|
13
|
-
var isError = props.isError, _a = props.error, error = _a === void 0 ? isError : _a, colorProp = props.color;
|
|
38
|
+
var isError = props.isError, _a = props.error, error = _a === void 0 ? isError : _a, colorProp = props.color, variant = props.variant, _b = props.backgroundColor, backgroundColorProp = _b === void 0 ? colorProp : _b;
|
|
39
|
+
var parsedBackgroundColor = foundation_1.getParsePaletteColor(backgroundColorProp, defaultOutlineBgColor);
|
|
14
40
|
var color = foundation_1.getParsePaletteColor(colorProp, foundation_1.focusVisibleColor);
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
41
|
+
var outlined = variant === 'outlined';
|
|
42
|
+
var normalBackgroundColor = outlined
|
|
43
|
+
? parsedBackgroundColor
|
|
44
|
+
: foundation_1.palette2('neutral', 'b03');
|
|
45
|
+
return foundation_1.css(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n height: 28px;\n box-sizing: border-box;\n padding: ", ";\n\n position: relative;\n border-radius: ", ";\n border: ", ";\n\n ", ";\n ", ";\n\n ", ";\n\n &.", " {\n color: ", ";\n opacity: 1;\n }\n\n ", ";\n\n .", " {\n color: ", ";\n margin-left: 0px;\n margin-right: -4px;\n\n span {\n width: auto;\n height: auto;\n }\n }\n "], ["\n height: 28px;\n box-sizing: border-box;\n padding: ", ";\n\n position: relative;\n border-radius: ", ";\n border: ", ";\n\n ", ";\n ", ";\n\n ",
|
|
46
|
+
";\n\n &.", " {\n color: ", ";\n opacity: 1;\n }\n\n ",
|
|
47
|
+
";\n\n .", " {\n color: ", ";\n margin-left: 0px;\n margin-right: -4px;\n\n span {\n width: auto;\n height: auto;\n }\n }\n "])), foundation_1.spacing(0.5), foundation_1.radius('round'), outlined && 'none', foundation_1.ellipsis, foundation_1.typography('body1'), exports.chipColor(tslib_1.__assign(tslib_1.__assign({}, props), { error: error, normalColor: defaultTextColor, normalBackgroundColor: normalBackgroundColor, focusedBorderColor: color, normalBorderColor: outlined ? foundation_1.palette2('neutral', 'l02') : undefined, interactiveBackgroundColor: defaultBgColor })), utils_1.RcChipClasses.disabled, styles_1.disabledColor, error && foundation_1.css(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n &:not(.", ") {\n ", ";\n }\n "], ["\n &:not(.", ") {\n ",
|
|
48
|
+
";\n }\n "])), utils_1.RcChipClasses.disabled, exports.chipColor(tslib_1.__assign(tslib_1.__assign({}, props), { error: error, normalColor: errorBgColor, normalBackgroundColor: foundation_1.palette2('danger', 'b01'), focusedBorderColor: errorBgColor, normalBorderColor: errorBgColor, interactiveBackgroundColor: errorBgColor }))), utils_1.RcChipClasses.avatar, foundation_1.palette2('neutral', 'b01'));
|
|
18
49
|
};
|
|
19
|
-
var templateObject_1, templateObject_2;
|
|
50
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -163,7 +163,7 @@ var Calendar = react_1.forwardRef(function (_a, ref) {
|
|
|
163
163
|
}, [previousView, view, viewChange]);
|
|
164
164
|
react_1.useLayoutEffect(function () {
|
|
165
165
|
utils_2.focusDayElement();
|
|
166
|
-
calendarRef.current = document.querySelector("." + utils_2.RcDatePickerClasses.popover + " .
|
|
166
|
+
calendarRef.current = document.querySelector("." + utils_2.RcDatePickerClasses.popover + " ." + utils_2.RcDatePickerClasses.popoverPaper);
|
|
167
167
|
var unsubscribe = utils_1.transitionendSubscriber(calendarRef.current, utils_2.onTransitionEnd);
|
|
168
168
|
return function () {
|
|
169
169
|
unsubscribe();
|
|
@@ -17,6 +17,6 @@ exports.plainSelectStyle = function (_a) {
|
|
|
17
17
|
" {\n ", " {\n margin-right: 0;\n }\n }\n\n ", " {\n margin-right: 0;\n }\n\n .", " {\n margin-bottom: 0;\n }\n\n .", " {\n width: auto;\n pointer-events: none;\n }\n\n .", " {\n padding: 0;\n height: auto;\n }\n\n ", " {\n pointer-events: ", ";\n min-width: unset;\n padding-left: ", ";\n padding-right: ", ";\n border-radius: ", ";\n\n ", " {\n margin: ", ";\n }\n\n ",
|
|
18
18
|
"\n }\n "])), Buttons_1.RcButton /**
|
|
19
19
|
// TODO: cancel button bellow icon margin issue,
|
|
20
|
-
*/, Icon_1.RcIcon, ListItemText_1.RcListItemText, utils_1.RcTextFieldClasses.root, utils_2.RcPlainSelectInputClasses.root, utils_2.RcPlainSelectInputClasses.input, Buttons_1.RcButton, !disabled && 'auto', foundation_1.spacing(isText ? 4 : 1), foundation_1.spacing(isText ? 1 : 0), isRound && foundation_1.radius('xxl'), styles_1.SelectArrowDownIcon, foundation_1.spacing(0, 0, 0, isRound ? 0 : 1), isRound && foundation_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n padding-top: ", ";\n padding-bottom: ", ";\n\n ", "
|
|
20
|
+
*/, Icon_1.RcIcon, ListItemText_1.RcListItemText, utils_1.RcTextFieldClasses.root, utils_2.RcPlainSelectInputClasses.root, utils_2.RcPlainSelectInputClasses.input, Buttons_1.RcButton, !disabled && 'auto', foundation_1.spacing(isText ? 4 : 1), foundation_1.spacing(isText ? 1 : 0), isRound && foundation_1.radius('xxl'), styles_1.SelectArrowDownIcon, foundation_1.spacing(0, 0, 0, isRound ? 0 : 1), isRound && foundation_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n padding-top: ", ";\n padding-bottom: ", ";\n\n ", " {\n .", " {\n background-color: currentColor;\n opacity: ", ";\n }\n .", " {\n display: none;\n }\n }\n "], ["\n padding-top: ", ";\n padding-bottom: ", ";\n\n ", " {\n .", " {\n background-color: currentColor;\n opacity: ", ";\n }\n .", " {\n display: none;\n }\n }\n "])), foundation_1.spacing(1.5), foundation_1.spacing(1.5), foundation_1.focusVisible, utils_2.RcPlainSelectTouchRippleClasses.root, foundation_1.opacity('32'), utils_2.RcPlainSelectTouchRippleClasses.child));
|
|
21
21
|
};
|
|
22
22
|
var templateObject_1, templateObject_2;
|
|
@@ -13,4 +13,4 @@ declare const RcMenu: import("styled-components").StyledComponentClass<Pick<RcMe
|
|
|
13
13
|
theme?: import("../../../foundation").RcTheme | undefined;
|
|
14
14
|
}>;
|
|
15
15
|
export { RcMenu, RcMenuContext };
|
|
16
|
-
export type { RcMenuContextType, RcMenuProps };
|
|
16
|
+
export type { RcMenuContextType, RcMenuProps, RcMenuOnCloseReasonsType };
|
|
@@ -6,7 +6,7 @@ var utils_1 = require("../../SnackbarContent/utils");
|
|
|
6
6
|
var utils_2 = require("../utils");
|
|
7
7
|
exports.snackbarContentActionStyle = function (_a) {
|
|
8
8
|
var color = _a.color;
|
|
9
|
-
return foundation_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n color: ", ";\n\n &.", " {\n ", ";\n line-height: ", ";\n text-decoration: underline;\n }\n\n & + &.", " {\n margin-left: ", ";\n }\n\n & + &.", " {\n margin-left: ", ";\n }\n\n &:active {\n opacity: ", ";\n }\n\n &:disabled {\n opacity: ", ";\n }\n\n
|
|
9
|
+
return foundation_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n color: ", ";\n\n &.", " {\n ", ";\n line-height: ", ";\n text-decoration: underline;\n }\n\n & + &.", " {\n margin-left: ", ";\n }\n\n & + &.", " {\n margin-left: ", ";\n }\n\n &:active {\n opacity: ", ";\n }\n\n &:disabled {\n opacity: ", ";\n }\n\n ", " {\n ", "\n }\n "], ["\n color: ", ";\n\n &.", " {\n ", ";\n line-height: ", ";\n text-decoration: underline;\n }\n\n & + &.", " {\n margin-left: ", ";\n }\n\n & + &.", " {\n margin-left: ", ";\n }\n\n &:active {\n opacity: ", ";\n }\n\n &:disabled {\n opacity: ", ";\n }\n\n ", " {\n ",
|
|
10
10
|
"\n }\n "])), color && foundation_1.getParsePaletteColor(color), utils_2.RcSnackbarActionClasses.text, foundation_1.typography('body2'), utils_1.RcSnackbarContentLineHeight, utils_2.RcSnackbarActionClasses.text, foundation_1.spacing(3), utils_2.RcSnackbarActionClasses.icon, foundation_1.spacing(4), foundation_1.opacity('24', true), foundation_1.opacity('24'), foundation_1.focusVisible, foundation_1.fakeBorder({
|
|
11
11
|
pseudo: true,
|
|
12
12
|
color: 'currentColor',
|
|
@@ -22,7 +22,7 @@ exports.findChildrenByKey = function (childrenProp, key) {
|
|
|
22
22
|
var _MoreMenuTabs = react_1.forwardRef(function (props, ref) {
|
|
23
23
|
var orientation = props.orientation, childrenProp = props.children, valueProp = props.value, onChange = props.onChange, _a = props.MoreButtonProps, MoreButtonProps = _a === void 0 ? {} : _a, rest = tslib_1.__rest(props, ["orientation", "children", "value", "onChange", "MoreButtonProps"]);
|
|
24
24
|
var onGroupInfoChange = MoreButtonProps.onGroupInfoChange, MoreButtonPropsRest = tslib_1.__rest(MoreButtonProps, ["onGroupInfoChange"]);
|
|
25
|
-
var
|
|
25
|
+
var prevChildrenProp = foundation_1.usePrevious(function () { return childrenProp; });
|
|
26
26
|
var isVertical = orientation === 'vertical';
|
|
27
27
|
var oriStr = isVertical ? 'height' : 'width';
|
|
28
28
|
var innerRef = react_1.useRef(null);
|
|
@@ -54,42 +54,39 @@ var _MoreMenuTabs = react_1.forwardRef(function (props, ref) {
|
|
|
54
54
|
throttleTabsSizeChange(obj);
|
|
55
55
|
}, { mode: 'none' });
|
|
56
56
|
var tabsSize = tabsSizeRef.current;
|
|
57
|
-
//
|
|
58
|
-
if (tabRefsMapRef.current === undefined
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
});
|
|
71
|
-
var keyString = typeof child.key === 'string' ? child.key : '';
|
|
72
|
-
tabRefs.set(utils_1.getKey(keyString, index), {
|
|
73
|
-
ref: tabRef,
|
|
74
|
-
size: null,
|
|
75
|
-
index: index,
|
|
76
|
-
value: childrenValue,
|
|
77
|
-
});
|
|
78
|
-
tabsTabDefaultChild.push(children);
|
|
57
|
+
// initial tabRefsMapRef and tabsTabChildRef
|
|
58
|
+
if (tabRefsMapRef.current === undefined ||
|
|
59
|
+
prevChildrenProp !== childrenProp) {
|
|
60
|
+
var tabRefs_1 = new Map();
|
|
61
|
+
var tabsTabDefaultChild_1 = [];
|
|
62
|
+
react_1.default.Children.forEach(childrenProp, function (child, index) {
|
|
63
|
+
var _a = child.props, ref = _a.ref, value = _a.value;
|
|
64
|
+
var innerRef = react_1.createRef();
|
|
65
|
+
var tabRef = ref ? foundation_1.useForkRef(innerRef, ref) : innerRef;
|
|
66
|
+
var childrenValue = value || index;
|
|
67
|
+
var children = react_1.default.cloneElement(child, {
|
|
68
|
+
ref: tabRef,
|
|
69
|
+
value: childrenValue,
|
|
79
70
|
});
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
71
|
+
var keyString = typeof child.key === 'string' ? child.key : '';
|
|
72
|
+
tabRefs_1.set(utils_1.getKey(keyString, index), {
|
|
73
|
+
ref: tabRef,
|
|
74
|
+
size: null,
|
|
75
|
+
index: index,
|
|
76
|
+
value: childrenValue,
|
|
77
|
+
});
|
|
78
|
+
tabsTabDefaultChild_1.push(children);
|
|
79
|
+
});
|
|
80
|
+
tabRefsMapRef.current = tabRefs_1;
|
|
81
|
+
tabsTabChildRef.current = tabsTabDefaultChild_1;
|
|
88
82
|
}
|
|
89
|
-
// get
|
|
83
|
+
// get real render size when render
|
|
90
84
|
react_1.useEffect(function () {
|
|
85
|
+
if (childrenProp === prevChildrenProp) {
|
|
86
|
+
return;
|
|
87
|
+
}
|
|
91
88
|
var tabRefsMap = tabRefsMapRef.current;
|
|
92
|
-
if (
|
|
89
|
+
if (tabRefsMap && tabRefsMap.size !== 0) {
|
|
93
90
|
var allTabsSize_1 = tslib_1.__assign({}, utils_1.DEFAULT_SIZE);
|
|
94
91
|
tabRefsMap.forEach(function (value, key) {
|
|
95
92
|
var _a = utils_1.getDomBoundingClientSize(value.ref.current), width = _a.width, height = _a.height;
|
|
@@ -110,8 +107,7 @@ var _MoreMenuTabs = react_1.forwardRef(function (props, ref) {
|
|
|
110
107
|
var size = utils_1.getDomBoundingClientSize(moreElm);
|
|
111
108
|
moreTabSizeRef.current = size;
|
|
112
109
|
}
|
|
113
|
-
|
|
114
|
-
}, []);
|
|
110
|
+
}, [childrenProp, prevChildrenProp]);
|
|
115
111
|
react_1.useEffect(function () {
|
|
116
112
|
var _a;
|
|
117
113
|
var currSelectTabItem;
|
|
@@ -190,11 +186,11 @@ var _MoreMenuTabs = react_1.forwardRef(function (props, ref) {
|
|
|
190
186
|
}
|
|
191
187
|
};
|
|
192
188
|
if (tabsSize.width !== 0 && tabsSize.height !== 0) {
|
|
193
|
-
// computed: 1.resize 2. valueProp 3.moreMenuClick
|
|
189
|
+
// computed: 1.resize 2. valueProp 3.moreMenuClick 4.children change
|
|
194
190
|
// not computed: visible tab change
|
|
195
191
|
if (((_a = groupingRef.current) === null || _a === void 0 ? void 0 : _a.tabs.includes((currSelectTabItem === null || currSelectTabItem === void 0 ? void 0 : currSelectTabItem[0]) || '')) &&
|
|
196
192
|
!hasResizeRef.current &&
|
|
197
|
-
|
|
193
|
+
prevChildrenProp === childrenProp) {
|
|
198
194
|
return;
|
|
199
195
|
}
|
|
200
196
|
computeTabChild(tabsSize);
|
|
@@ -202,10 +198,10 @@ var _MoreMenuTabs = react_1.forwardRef(function (props, ref) {
|
|
|
202
198
|
}
|
|
203
199
|
}, [
|
|
204
200
|
childrenProp,
|
|
201
|
+
prevChildrenProp,
|
|
205
202
|
isVertical,
|
|
206
203
|
onGroupInfoChange,
|
|
207
204
|
oriStr,
|
|
208
|
-
prevChildren,
|
|
209
205
|
tabsSize,
|
|
210
206
|
valueProp,
|
|
211
207
|
]);
|
|
@@ -12,9 +12,11 @@ var _RcTabs = react_1.forwardRef(function (inProps, ref) {
|
|
|
12
12
|
var classesProp = props.classes, childrenProp = props.children, variantProp = props.variant, size = props.size, MoreButtonProps = props.MoreButtonProps, rest = tslib_1.__rest(props, ["classes", "children", "variant", "size", "MoreButtonProps"]);
|
|
13
13
|
var isMore = variantProp === 'moreMenu';
|
|
14
14
|
var classes = react_1.useMemo(function () { return foundation_1.combineProps(utils_1.RcTabsClasses, classesProp); }, [classesProp]);
|
|
15
|
-
var children = react_1.
|
|
16
|
-
return react_1.default.
|
|
17
|
-
|
|
15
|
+
var children = react_1.useMemo(function () {
|
|
16
|
+
return react_1.default.Children.map(childrenProp, function (child) {
|
|
17
|
+
return react_1.default.cloneElement(child, { size: size });
|
|
18
|
+
});
|
|
19
|
+
}, [childrenProp, size]);
|
|
18
20
|
if (isMore) {
|
|
19
21
|
return (react_1.default.createElement(MoreMenuTabs_1.MoreMenuTabs, tslib_1.__assign({}, rest, { ref: ref, classes: classes, size: size, MoreButtonProps: MoreButtonProps }), children));
|
|
20
22
|
}
|
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
import { __assign, __makeTemplateObject, __rest } from "tslib";
|
|
2
|
-
import React, { forwardRef, useMemo, } from 'react';
|
|
2
|
+
import React, { forwardRef, useLayoutEffect, useMemo, useRef, } from 'react';
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import MuiChip from '@material-ui/core/Chip';
|
|
5
5
|
import { DeleteCircle } from '@ringcentral/juno-icon';
|
|
6
|
-
import { combineClasses, isRcElement, omit, styled, useThemeProps, } from '../../foundation';
|
|
6
|
+
import { combineClasses, isRcElement, omit, removeClassName, styled, useForkRef, useThemeProps, } from '../../foundation';
|
|
7
7
|
import { RcIconButton } from '../Buttons/IconButton';
|
|
8
8
|
import { ChipStyle } from './styles';
|
|
9
9
|
import { RcChipClasses } from './utils';
|
|
10
10
|
var _RcChip = forwardRef(function (inProps, ref) {
|
|
11
11
|
var props = useThemeProps({ props: inProps, name: 'RcChip' });
|
|
12
|
-
var AvatarProp = props.Avatar, deleteTooltip = props.deleteTooltip, deleteAutomationId = props.deleteAutomationId, isError = props.isError, classesProp = props.classes, _a = props.avatar, avatarProp = _a === void 0 ? AvatarProp : _a, _b = props.error, error = _b === void 0 ? isError : _b, id = props.id, label = props.label, disabled = props.disabled, deleteIconProp = props.deleteIcon, deleteIconProps = props.deleteIconProps, tabIndex = props.tabIndex, focused = props.focused, color = props.color, className = props.className, rest = __rest(props, ["Avatar", "deleteTooltip", "deleteAutomationId", "isError", "classes", "avatar", "error", "id", "label", "disabled", "deleteIcon", "deleteIconProps", "tabIndex", "focused", "color", "className"]);
|
|
12
|
+
var AvatarProp = props.Avatar, deleteTooltip = props.deleteTooltip, deleteAutomationId = props.deleteAutomationId, isError = props.isError, backgroundColor = props.backgroundColor, classesProp = props.classes, _a = props.avatar, avatarProp = _a === void 0 ? AvatarProp : _a, _b = props.error, error = _b === void 0 ? isError : _b, id = props.id, label = props.label, disabled = props.disabled, deleteIconProp = props.deleteIcon, deleteIconProps = props.deleteIconProps, tabIndex = props.tabIndex, focused = props.focused, color = props.color, className = props.className, rest = __rest(props, ["Avatar", "deleteTooltip", "deleteAutomationId", "isError", "backgroundColor", "classes", "avatar", "error", "id", "label", "disabled", "deleteIcon", "deleteIconProps", "tabIndex", "focused", "color", "className"]);
|
|
13
|
+
var innerRef = useRef(null);
|
|
14
|
+
var chipRef = useForkRef(innerRef, ref);
|
|
13
15
|
var combinedClasses = useMemo(function () { return combineClasses(RcChipClasses, classesProp); }, [classesProp]);
|
|
14
16
|
var classes = useMemo(function () { return omit(combinedClasses, ['focused']); }, [combinedClasses]);
|
|
15
17
|
var deleteIcon = useMemo(function () {
|
|
@@ -37,11 +39,17 @@ var _RcChip = forwardRef(function (inProps, ref) {
|
|
|
37
39
|
}
|
|
38
40
|
return undefined;
|
|
39
41
|
}, [avatarProp]);
|
|
40
|
-
|
|
42
|
+
// TODO: can be removed when upgrade to v5
|
|
43
|
+
// * need remove not need MuiChip-deletable for render correct
|
|
44
|
+
useLayoutEffect(function () {
|
|
45
|
+
removeClassName(innerRef, 'MuiChip-deletable');
|
|
46
|
+
});
|
|
47
|
+
return (React.createElement(MuiChip, __assign({ ref: chipRef, id: id, tabIndex: disabled ? -1 : tabIndex, label: label, disabled: disabled, classes: classes, className: clsx(className, focused ? combinedClasses.focused : undefined), avatar: avatar, deleteIcon: deleteIcon, "data-test-automation-class": "selected-item", "data-test-automation-value": id ? id : label, "data-is-error": error }, rest)));
|
|
41
48
|
});
|
|
42
49
|
var RcChip = styled(_RcChip)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), ChipStyle);
|
|
43
50
|
RcChip.defaultProps = {
|
|
44
51
|
tabIndex: 0,
|
|
52
|
+
// FIXME: after implement click state, that can be remove
|
|
45
53
|
clickable: false,
|
|
46
54
|
};
|
|
47
55
|
RcChip.displayName = 'RcChip';
|
|
@@ -1,17 +1,48 @@
|
|
|
1
1
|
import { __assign, __makeTemplateObject } from "tslib";
|
|
2
|
-
import { css, ellipsis, fakeBorder, focusVisible, focusVisibleColor, getParsePaletteColor, nonTouchHoverMedia, palette2, radius, setOpacity, spacing, typography, } from '../../../foundation';
|
|
3
|
-
import { disabledColor
|
|
2
|
+
import { css, darken, ellipsis, fakeBorder, focusVisible, focusVisibleColor, getParsePaletteColor, lighten, nonTouchHoverMedia, palette2, radius, setOpacity, spacing, typography, } from '../../../foundation';
|
|
3
|
+
import { disabledColor } from '../../Forms/TextField/styles';
|
|
4
4
|
import { RcChipClasses } from '../utils';
|
|
5
5
|
var defaultBgColor = palette2('action', 'grayDark');
|
|
6
|
+
var defaultTextColor = palette2('neutral', 'f06');
|
|
6
7
|
var errorBgColor = palette2('danger', 'f02');
|
|
8
|
+
var defaultOutlineBgColor = palette2('neutral', 'b01');
|
|
7
9
|
function fakePseudoRoundBorder(addOptions) {
|
|
8
10
|
return fakeBorder(__assign({ pseudo: true, radius: 'round' }, addOptions));
|
|
9
11
|
}
|
|
12
|
+
export var chipColor = function (_a) {
|
|
13
|
+
var focusedBorderColor = _a.focusedBorderColor, variant = _a.variant, error = _a.error, normalBorderColor = _a.normalBorderColor, interactiveBackgroundColor = _a.interactiveBackgroundColor, normalColor = _a.normalColor, normalBackgroundColor = _a.normalBackgroundColor, color = _a.color, backgroundColor = _a.backgroundColor, theme = _a.theme;
|
|
14
|
+
var outlined = variant === 'outlined';
|
|
15
|
+
var hoverColorLighten = error || outlined;
|
|
16
|
+
if (outlined &&
|
|
17
|
+
!error &&
|
|
18
|
+
// mean have set custom background color
|
|
19
|
+
(color || backgroundColor)) {
|
|
20
|
+
normalColor = focusedBorderColor;
|
|
21
|
+
normalBorderColor = focusedBorderColor;
|
|
22
|
+
interactiveBackgroundColor = focusedBorderColor;
|
|
23
|
+
var notCustomBackground = !backgroundColor || backgroundColor === color;
|
|
24
|
+
// when color be same make that color have lighten
|
|
25
|
+
if (notCustomBackground) {
|
|
26
|
+
normalBackgroundColor =
|
|
27
|
+
theme.palette.type === 'light'
|
|
28
|
+
? lighten(normalBackgroundColor, 0.92)
|
|
29
|
+
: darken(normalBackgroundColor, 0.72);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: ", ";\n background-color: ", ";\n\n ", ";\n\n ", " {\n &:hover {\n background-color: ", ";\n }\n }\n\n &.", ", ", " {\n ", ";\n\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n "], ["\n color: ", ";\n background-color: ", ";\n\n ", ";\n\n ", " {\n &:hover {\n background-color: ",
|
|
33
|
+
";\n }\n }\n\n &.", ", ", " {\n ", ";\n\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n "])), normalColor, normalBackgroundColor, fakePseudoRoundBorder({ color: normalBorderColor }), nonTouchHoverMedia, setOpacity(interactiveBackgroundColor, hoverColorLighten ? '08' : '12'), RcChipClasses.focused, focusVisible, fakePseudoRoundBorder({ color: focusedBorderColor }), setOpacity(interactiveBackgroundColor, '16'), setOpacity(interactiveBackgroundColor, '24'));
|
|
34
|
+
};
|
|
10
35
|
export var ChipStyle = function (props) {
|
|
11
|
-
var isError = props.isError, _a = props.error, error = _a === void 0 ? isError : _a, colorProp = props.color;
|
|
36
|
+
var isError = props.isError, _a = props.error, error = _a === void 0 ? isError : _a, colorProp = props.color, variant = props.variant, _b = props.backgroundColor, backgroundColorProp = _b === void 0 ? colorProp : _b;
|
|
37
|
+
var parsedBackgroundColor = getParsePaletteColor(backgroundColorProp, defaultOutlineBgColor);
|
|
12
38
|
var color = getParsePaletteColor(colorProp, focusVisibleColor);
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
39
|
+
var outlined = variant === 'outlined';
|
|
40
|
+
var normalBackgroundColor = outlined
|
|
41
|
+
? parsedBackgroundColor
|
|
42
|
+
: palette2('neutral', 'b03');
|
|
43
|
+
return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 28px;\n box-sizing: border-box;\n padding: ", ";\n\n position: relative;\n border-radius: ", ";\n border: ", ";\n\n ", ";\n ", ";\n\n ", ";\n\n &.", " {\n color: ", ";\n opacity: 1;\n }\n\n ", ";\n\n .", " {\n color: ", ";\n margin-left: 0px;\n margin-right: -4px;\n\n span {\n width: auto;\n height: auto;\n }\n }\n "], ["\n height: 28px;\n box-sizing: border-box;\n padding: ", ";\n\n position: relative;\n border-radius: ", ";\n border: ", ";\n\n ", ";\n ", ";\n\n ",
|
|
44
|
+
";\n\n &.", " {\n color: ", ";\n opacity: 1;\n }\n\n ",
|
|
45
|
+
";\n\n .", " {\n color: ", ";\n margin-left: 0px;\n margin-right: -4px;\n\n span {\n width: auto;\n height: auto;\n }\n }\n "])), spacing(0.5), radius('round'), outlined && 'none', ellipsis, typography('body1'), chipColor(__assign(__assign({}, props), { error: error, normalColor: defaultTextColor, normalBackgroundColor: normalBackgroundColor, focusedBorderColor: color, normalBorderColor: outlined ? palette2('neutral', 'l02') : undefined, interactiveBackgroundColor: defaultBgColor })), RcChipClasses.disabled, disabledColor, error && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n &:not(.", ") {\n ", ";\n }\n "], ["\n &:not(.", ") {\n ",
|
|
46
|
+
";\n }\n "])), RcChipClasses.disabled, chipColor(__assign(__assign({}, props), { error: error, normalColor: errorBgColor, normalBackgroundColor: palette2('danger', 'b01'), focusedBorderColor: errorBgColor, normalBorderColor: errorBgColor, interactiveBackgroundColor: errorBgColor }))), RcChipClasses.avatar, palette2('neutral', 'b01'));
|
|
16
47
|
};
|
|
17
|
-
var templateObject_1, templateObject_2;
|
|
48
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -161,7 +161,7 @@ var Calendar = forwardRef(function (_a, ref) {
|
|
|
161
161
|
}, [previousView, view, viewChange]);
|
|
162
162
|
useLayoutEffect(function () {
|
|
163
163
|
focusDayElement();
|
|
164
|
-
calendarRef.current = document.querySelector("." + RcDatePickerClasses.popover + " .
|
|
164
|
+
calendarRef.current = document.querySelector("." + RcDatePickerClasses.popover + " ." + RcDatePickerClasses.popoverPaper);
|
|
165
165
|
var unsubscribe = transitionendSubscriber(calendarRef.current, onTransitionEnd);
|
|
166
166
|
return function () {
|
|
167
167
|
unsubscribe();
|
|
@@ -15,6 +15,6 @@ export var plainSelectStyle = function (_a) {
|
|
|
15
15
|
" {\n ", " {\n margin-right: 0;\n }\n }\n\n ", " {\n margin-right: 0;\n }\n\n .", " {\n margin-bottom: 0;\n }\n\n .", " {\n width: auto;\n pointer-events: none;\n }\n\n .", " {\n padding: 0;\n height: auto;\n }\n\n ", " {\n pointer-events: ", ";\n min-width: unset;\n padding-left: ", ";\n padding-right: ", ";\n border-radius: ", ";\n\n ", " {\n margin: ", ";\n }\n\n ",
|
|
16
16
|
"\n }\n "])), RcButton /**
|
|
17
17
|
// TODO: cancel button bellow icon margin issue,
|
|
18
|
-
*/, RcIcon, RcListItemText, RcTextFieldClasses.root, RcPlainSelectInputClasses.root, RcPlainSelectInputClasses.input, RcButton, !disabled && 'auto', spacing(isText ? 4 : 1), spacing(isText ? 1 : 0), isRound && radius('xxl'), SelectArrowDownIcon, spacing(0, 0, 0, isRound ? 0 : 1), isRound && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding-top: ", ";\n padding-bottom: ", ";\n\n ", "
|
|
18
|
+
*/, RcIcon, RcListItemText, RcTextFieldClasses.root, RcPlainSelectInputClasses.root, RcPlainSelectInputClasses.input, RcButton, !disabled && 'auto', spacing(isText ? 4 : 1), spacing(isText ? 1 : 0), isRound && radius('xxl'), SelectArrowDownIcon, spacing(0, 0, 0, isRound ? 0 : 1), isRound && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding-top: ", ";\n padding-bottom: ", ";\n\n ", " {\n .", " {\n background-color: currentColor;\n opacity: ", ";\n }\n .", " {\n display: none;\n }\n }\n "], ["\n padding-top: ", ";\n padding-bottom: ", ";\n\n ", " {\n .", " {\n background-color: currentColor;\n opacity: ", ";\n }\n .", " {\n display: none;\n }\n }\n "])), spacing(1.5), spacing(1.5), focusVisible, RcPlainSelectTouchRippleClasses.root, opacity('32'), RcPlainSelectTouchRippleClasses.child));
|
|
19
19
|
};
|
|
20
20
|
var templateObject_1, templateObject_2;
|
|
@@ -4,7 +4,7 @@ import { RcSnackbarContentLineHeight } from '../../SnackbarContent/utils';
|
|
|
4
4
|
import { RcSnackbarActionClasses } from '../utils';
|
|
5
5
|
export var snackbarContentActionStyle = function (_a) {
|
|
6
6
|
var color = _a.color;
|
|
7
|
-
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: ", ";\n\n &.", " {\n ", ";\n line-height: ", ";\n text-decoration: underline;\n }\n\n & + &.", " {\n margin-left: ", ";\n }\n\n & + &.", " {\n margin-left: ", ";\n }\n\n &:active {\n opacity: ", ";\n }\n\n &:disabled {\n opacity: ", ";\n }\n\n
|
|
7
|
+
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: ", ";\n\n &.", " {\n ", ";\n line-height: ", ";\n text-decoration: underline;\n }\n\n & + &.", " {\n margin-left: ", ";\n }\n\n & + &.", " {\n margin-left: ", ";\n }\n\n &:active {\n opacity: ", ";\n }\n\n &:disabled {\n opacity: ", ";\n }\n\n ", " {\n ", "\n }\n "], ["\n color: ", ";\n\n &.", " {\n ", ";\n line-height: ", ";\n text-decoration: underline;\n }\n\n & + &.", " {\n margin-left: ", ";\n }\n\n & + &.", " {\n margin-left: ", ";\n }\n\n &:active {\n opacity: ", ";\n }\n\n &:disabled {\n opacity: ", ";\n }\n\n ", " {\n ",
|
|
8
8
|
"\n }\n "])), color && getParsePaletteColor(color), RcSnackbarActionClasses.text, typography('body2'), RcSnackbarContentLineHeight, RcSnackbarActionClasses.text, spacing(3), RcSnackbarActionClasses.icon, spacing(4), opacity('24', true), opacity('24'), focusVisible, fakeBorder({
|
|
9
9
|
pseudo: true,
|
|
10
10
|
color: 'currentColor',
|
|
@@ -20,7 +20,7 @@ export var findChildrenByKey = function (childrenProp, key) {
|
|
|
20
20
|
var _MoreMenuTabs = forwardRef(function (props, ref) {
|
|
21
21
|
var orientation = props.orientation, childrenProp = props.children, valueProp = props.value, onChange = props.onChange, _a = props.MoreButtonProps, MoreButtonProps = _a === void 0 ? {} : _a, rest = __rest(props, ["orientation", "children", "value", "onChange", "MoreButtonProps"]);
|
|
22
22
|
var onGroupInfoChange = MoreButtonProps.onGroupInfoChange, MoreButtonPropsRest = __rest(MoreButtonProps, ["onGroupInfoChange"]);
|
|
23
|
-
var
|
|
23
|
+
var prevChildrenProp = usePrevious(function () { return childrenProp; });
|
|
24
24
|
var isVertical = orientation === 'vertical';
|
|
25
25
|
var oriStr = isVertical ? 'height' : 'width';
|
|
26
26
|
var innerRef = useRef(null);
|
|
@@ -52,42 +52,39 @@ var _MoreMenuTabs = forwardRef(function (props, ref) {
|
|
|
52
52
|
throttleTabsSizeChange(obj);
|
|
53
53
|
}, { mode: 'none' });
|
|
54
54
|
var tabsSize = tabsSizeRef.current;
|
|
55
|
-
//
|
|
56
|
-
if (tabRefsMapRef.current === undefined
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
});
|
|
69
|
-
var keyString = typeof child.key === 'string' ? child.key : '';
|
|
70
|
-
tabRefs.set(getKey(keyString, index), {
|
|
71
|
-
ref: tabRef,
|
|
72
|
-
size: null,
|
|
73
|
-
index: index,
|
|
74
|
-
value: childrenValue,
|
|
75
|
-
});
|
|
76
|
-
tabsTabDefaultChild.push(children);
|
|
55
|
+
// initial tabRefsMapRef and tabsTabChildRef
|
|
56
|
+
if (tabRefsMapRef.current === undefined ||
|
|
57
|
+
prevChildrenProp !== childrenProp) {
|
|
58
|
+
var tabRefs_1 = new Map();
|
|
59
|
+
var tabsTabDefaultChild_1 = [];
|
|
60
|
+
React.Children.forEach(childrenProp, function (child, index) {
|
|
61
|
+
var _a = child.props, ref = _a.ref, value = _a.value;
|
|
62
|
+
var innerRef = createRef();
|
|
63
|
+
var tabRef = ref ? useForkRef(innerRef, ref) : innerRef;
|
|
64
|
+
var childrenValue = value || index;
|
|
65
|
+
var children = React.cloneElement(child, {
|
|
66
|
+
ref: tabRef,
|
|
67
|
+
value: childrenValue,
|
|
77
68
|
});
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
69
|
+
var keyString = typeof child.key === 'string' ? child.key : '';
|
|
70
|
+
tabRefs_1.set(getKey(keyString, index), {
|
|
71
|
+
ref: tabRef,
|
|
72
|
+
size: null,
|
|
73
|
+
index: index,
|
|
74
|
+
value: childrenValue,
|
|
75
|
+
});
|
|
76
|
+
tabsTabDefaultChild_1.push(children);
|
|
77
|
+
});
|
|
78
|
+
tabRefsMapRef.current = tabRefs_1;
|
|
79
|
+
tabsTabChildRef.current = tabsTabDefaultChild_1;
|
|
86
80
|
}
|
|
87
|
-
// get
|
|
81
|
+
// get real render size when render
|
|
88
82
|
useEffect(function () {
|
|
83
|
+
if (childrenProp === prevChildrenProp) {
|
|
84
|
+
return;
|
|
85
|
+
}
|
|
89
86
|
var tabRefsMap = tabRefsMapRef.current;
|
|
90
|
-
if (
|
|
87
|
+
if (tabRefsMap && tabRefsMap.size !== 0) {
|
|
91
88
|
var allTabsSize_1 = __assign({}, DEFAULT_SIZE);
|
|
92
89
|
tabRefsMap.forEach(function (value, key) {
|
|
93
90
|
var _a = getDomBoundingClientSize(value.ref.current), width = _a.width, height = _a.height;
|
|
@@ -108,8 +105,7 @@ var _MoreMenuTabs = forwardRef(function (props, ref) {
|
|
|
108
105
|
var size = getDomBoundingClientSize(moreElm);
|
|
109
106
|
moreTabSizeRef.current = size;
|
|
110
107
|
}
|
|
111
|
-
|
|
112
|
-
}, []);
|
|
108
|
+
}, [childrenProp, prevChildrenProp]);
|
|
113
109
|
useEffect(function () {
|
|
114
110
|
var _a;
|
|
115
111
|
var currSelectTabItem;
|
|
@@ -188,11 +184,11 @@ var _MoreMenuTabs = forwardRef(function (props, ref) {
|
|
|
188
184
|
}
|
|
189
185
|
};
|
|
190
186
|
if (tabsSize.width !== 0 && tabsSize.height !== 0) {
|
|
191
|
-
// computed: 1.resize 2. valueProp 3.moreMenuClick
|
|
187
|
+
// computed: 1.resize 2. valueProp 3.moreMenuClick 4.children change
|
|
192
188
|
// not computed: visible tab change
|
|
193
189
|
if (((_a = groupingRef.current) === null || _a === void 0 ? void 0 : _a.tabs.includes((currSelectTabItem === null || currSelectTabItem === void 0 ? void 0 : currSelectTabItem[0]) || '')) &&
|
|
194
190
|
!hasResizeRef.current &&
|
|
195
|
-
|
|
191
|
+
prevChildrenProp === childrenProp) {
|
|
196
192
|
return;
|
|
197
193
|
}
|
|
198
194
|
computeTabChild(tabsSize);
|
|
@@ -200,10 +196,10 @@ var _MoreMenuTabs = forwardRef(function (props, ref) {
|
|
|
200
196
|
}
|
|
201
197
|
}, [
|
|
202
198
|
childrenProp,
|
|
199
|
+
prevChildrenProp,
|
|
203
200
|
isVertical,
|
|
204
201
|
onGroupInfoChange,
|
|
205
202
|
oriStr,
|
|
206
|
-
prevChildren,
|
|
207
203
|
tabsSize,
|
|
208
204
|
valueProp,
|
|
209
205
|
]);
|
|
@@ -10,9 +10,11 @@ var _RcTabs = forwardRef(function (inProps, ref) {
|
|
|
10
10
|
var classesProp = props.classes, childrenProp = props.children, variantProp = props.variant, size = props.size, MoreButtonProps = props.MoreButtonProps, rest = __rest(props, ["classes", "children", "variant", "size", "MoreButtonProps"]);
|
|
11
11
|
var isMore = variantProp === 'moreMenu';
|
|
12
12
|
var classes = useMemo(function () { return combineProps(RcTabsClasses, classesProp); }, [classesProp]);
|
|
13
|
-
var children =
|
|
14
|
-
return React.
|
|
15
|
-
|
|
13
|
+
var children = useMemo(function () {
|
|
14
|
+
return React.Children.map(childrenProp, function (child) {
|
|
15
|
+
return React.cloneElement(child, { size: size });
|
|
16
|
+
});
|
|
17
|
+
}, [childrenProp, size]);
|
|
16
18
|
if (isMore) {
|
|
17
19
|
return (React.createElement(MoreMenuTabs, __assign({}, rest, { ref: ref, classes: classes, size: size, MoreButtonProps: MoreButtonProps }), children));
|
|
18
20
|
}
|
|
@@ -1,15 +1,44 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* remove className from element, default will not scan child nodes, if you want to scan child nodes, set `scanChildren` to `true`.
|
|
3
|
+
*
|
|
4
|
+
* @param elmRef target element reference
|
|
5
|
+
* @param removeClass className to remove, default will use class `includes` to check, if you want to use full match, set `fullMatch` to `true`
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```js
|
|
9
|
+
* elm => <div class="abc bcd efg abc-def"></div>
|
|
10
|
+
*
|
|
11
|
+
* removeClassName(elmRef, 'bcd');
|
|
12
|
+
*
|
|
13
|
+
* elm => <div class="abc efg abc-def"></div>
|
|
14
|
+
*
|
|
15
|
+
* removeClassName(elmRef, 'abc');
|
|
16
|
+
* elm => <div class="efg"></div>
|
|
17
|
+
* ```
|
|
18
|
+
*/
|
|
19
|
+
export function removeClassName(elmRef, removeClass, _a) {
|
|
20
|
+
var _b = _a === void 0 ? {} : _a, _c = _b.scanChildren, scanChildren = _c === void 0 ? false : _c, _d = _b.fullMatch, fullMatch = _d === void 0 ? false : _d;
|
|
2
21
|
var elm = elmRef.current;
|
|
3
22
|
if (!elm)
|
|
4
23
|
return;
|
|
5
24
|
if (elm.className.includes(removeClass)) {
|
|
6
|
-
elm.className = cleanClass(elm, removeClass);
|
|
25
|
+
elm.className = cleanClass(elm, removeClass, fullMatch);
|
|
7
26
|
}
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
27
|
+
if (scanChildren) {
|
|
28
|
+
var nodes = elm.querySelectorAll("[class*=\"" + removeClass + "\"]");
|
|
29
|
+
if ((nodes === null || nodes === void 0 ? void 0 : nodes.length) > 0) {
|
|
30
|
+
nodes.forEach(function (node) { return (node.className = cleanClass(node, removeClass, fullMatch)); });
|
|
31
|
+
}
|
|
11
32
|
}
|
|
12
33
|
}
|
|
13
|
-
function cleanClass(elm, removeClass) {
|
|
14
|
-
return elm.className
|
|
34
|
+
function cleanClass(elm, removeClass, fullMatch) {
|
|
35
|
+
return elm.className
|
|
36
|
+
.trim()
|
|
37
|
+
.split(/\s+/)
|
|
38
|
+
.filter(function (className) {
|
|
39
|
+
return !(fullMatch
|
|
40
|
+
? className === removeClass
|
|
41
|
+
: className.includes(removeClass));
|
|
42
|
+
})
|
|
43
|
+
.join(' ');
|
|
15
44
|
}
|
|
@@ -1,2 +1,35 @@
|
|
|
1
1
|
import { RefObject } from 'react';
|
|
2
|
-
|
|
2
|
+
declare type RemoveClassNameOptions = {
|
|
3
|
+
/**
|
|
4
|
+
* make replace also scan child nodes
|
|
5
|
+
*
|
|
6
|
+
* @default false
|
|
7
|
+
*/
|
|
8
|
+
scanChildren?: boolean;
|
|
9
|
+
/**
|
|
10
|
+
* is that should fullMatch class name
|
|
11
|
+
*
|
|
12
|
+
* @default false
|
|
13
|
+
*/
|
|
14
|
+
fullMatch?: boolean;
|
|
15
|
+
};
|
|
16
|
+
/**
|
|
17
|
+
* remove className from element, default will not scan child nodes, if you want to scan child nodes, set `scanChildren` to `true`.
|
|
18
|
+
*
|
|
19
|
+
* @param elmRef target element reference
|
|
20
|
+
* @param removeClass className to remove, default will use class `includes` to check, if you want to use full match, set `fullMatch` to `true`
|
|
21
|
+
*
|
|
22
|
+
* @example
|
|
23
|
+
* ```js
|
|
24
|
+
* elm => <div class="abc bcd efg abc-def"></div>
|
|
25
|
+
*
|
|
26
|
+
* removeClassName(elmRef, 'bcd');
|
|
27
|
+
*
|
|
28
|
+
* elm => <div class="abc efg abc-def"></div>
|
|
29
|
+
*
|
|
30
|
+
* removeClassName(elmRef, 'abc');
|
|
31
|
+
* elm => <div class="efg"></div>
|
|
32
|
+
* ```
|
|
33
|
+
*/
|
|
34
|
+
export declare function removeClassName(elmRef: RefObject<HTMLElement>, removeClass: string, { scanChildren, fullMatch }?: RemoveClassNameOptions): void;
|
|
35
|
+
export {};
|
|
@@ -1,18 +1,47 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
|
|
3
|
+
/**
|
|
4
|
+
* remove className from element, default will not scan child nodes, if you want to scan child nodes, set `scanChildren` to `true`.
|
|
5
|
+
*
|
|
6
|
+
* @param elmRef target element reference
|
|
7
|
+
* @param removeClass className to remove, default will use class `includes` to check, if you want to use full match, set `fullMatch` to `true`
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* ```js
|
|
11
|
+
* elm => <div class="abc bcd efg abc-def"></div>
|
|
12
|
+
*
|
|
13
|
+
* removeClassName(elmRef, 'bcd');
|
|
14
|
+
*
|
|
15
|
+
* elm => <div class="abc efg abc-def"></div>
|
|
16
|
+
*
|
|
17
|
+
* removeClassName(elmRef, 'abc');
|
|
18
|
+
* elm => <div class="efg"></div>
|
|
19
|
+
* ```
|
|
20
|
+
*/
|
|
21
|
+
function removeClassName(elmRef, removeClass, _a) {
|
|
22
|
+
var _b = _a === void 0 ? {} : _a, _c = _b.scanChildren, scanChildren = _c === void 0 ? false : _c, _d = _b.fullMatch, fullMatch = _d === void 0 ? false : _d;
|
|
4
23
|
var elm = elmRef.current;
|
|
5
24
|
if (!elm)
|
|
6
25
|
return;
|
|
7
26
|
if (elm.className.includes(removeClass)) {
|
|
8
|
-
elm.className = cleanClass(elm, removeClass);
|
|
27
|
+
elm.className = cleanClass(elm, removeClass, fullMatch);
|
|
9
28
|
}
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
29
|
+
if (scanChildren) {
|
|
30
|
+
var nodes = elm.querySelectorAll("[class*=\"" + removeClass + "\"]");
|
|
31
|
+
if ((nodes === null || nodes === void 0 ? void 0 : nodes.length) > 0) {
|
|
32
|
+
nodes.forEach(function (node) { return (node.className = cleanClass(node, removeClass, fullMatch)); });
|
|
33
|
+
}
|
|
13
34
|
}
|
|
14
35
|
}
|
|
15
36
|
exports.removeClassName = removeClassName;
|
|
16
|
-
function cleanClass(elm, removeClass) {
|
|
17
|
-
return elm.className
|
|
37
|
+
function cleanClass(elm, removeClass, fullMatch) {
|
|
38
|
+
return elm.className
|
|
39
|
+
.trim()
|
|
40
|
+
.split(/\s+/)
|
|
41
|
+
.filter(function (className) {
|
|
42
|
+
return !(fullMatch
|
|
43
|
+
? className === removeClass
|
|
44
|
+
: className.includes(removeClass));
|
|
45
|
+
})
|
|
46
|
+
.join(' ');
|
|
18
47
|
}
|