fisjac commented on code in PR #25975:
URL: https://github.com/apache/superset/pull/25975#discussion_r1391830255
##########
superset-frontend/src/components/Panel/index.tsx:
##########
@@ -0,0 +1,106 @@
+import React from 'react';
+import { t, css, SupersetTheme } from '@superset-ui/core';
+import { Collapse as AntdCollapse } from 'antd';
+import { CollapsePanelProps } from 'antd/lib/collapse';
+import { CheckCircleOutlined } from '@ant-design/icons';
+
+const anticonHeight = 12;
+const antdPanelStyles = (theme: SupersetTheme) => css`
+ .ant-collapse-header {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: flex-start;
+ padding: 0px ${theme.gridUnit * 4}px;
+
+ .anticon.anticon-right.ant-collapse-arrow {
+ padding: 0;
+ top: calc(50% - ${anticonHeight / 2}px);
+ }
+
+ .collapse-panel-title {
+ font-size: ${theme.gridUnit * 4}px;
+ font-weight: ${theme.typography.weights.bold};
+ line-height: 130%;
+ }
+
+ .collapse-panel-subtitle {
+ color: ${theme.colors.grayscale.base};
+ font-size: ${theme.typography.sizes.s}px;
+ font-weight: ${theme.typography.weights.normal};
+ line-height: 150%;
+ margin-bottom: 0;
+ }
+
+ .collapse-panel-asterisk {
+ color: var(--semantic-error-base, ${theme.colors.warning.dark1});
+ }
+ .validation-checkmark {
+ width: ${theme.gridUnit * 4}px;
+ height: ${theme.gridUnit * 4}px;
+ margin-left: ${theme.gridUnit}px;
+ color: ${theme.colors.success.base};
+ }
+ }
+`;
+
+const AntdPanel = AntdCollapse.Panel;
+type CustomHeader = {
+ title: React.ReactNode;
+ subtitle?: React.ReactNode;
+ required?: boolean;
+ validateCheckStatus?: boolean;
+};
+export interface PanelProps extends Omit<CollapsePanelProps, 'header'> {
+ header:
+ | CustomHeader
+ | boolean
+ | React.ReactChild
+ | React.ReactFragment
+ | React.ReactPortal;
+ children?: React.ReactNode;
+}
+
+const Panel = ({ ...props }: PanelProps): JSX.Element => {
+ if (!props.header.hasOwnProperty('title')) {
+ return <AntdPanel {...props} />;
+ }
+
+ let asterisk;
+ // @ts-ignore
+ if (props.header.required) {
+ asterisk = ' *';
+ }
+
+ let checkmark;
+ // @ts-ignore
+ if (props.header.validateCheckStatus) {
+ checkmark = <CheckCircleOutlined />;
+ }
+
+ const header = (
+ <div className="collapse-panel-header">
+ <div className="collapse-panel-title">
+ {/* @ts-ignore */}
+ <span>{t(props.header.title)}</span>
+ <span className="collapse-panel-asterisk">{asterisk}</span>
+ <span className="validation-checkmark">{checkmark}</span>
+ </div>
+ <p className="collapse-panel-subtitle">
+ {/* @ts-ignore */}
Review Comment:
Since props.header can possibly take type string, TS gets angry saying that
there's no property "title" on type string. Due to the conditional check in
lines 65-67, we know that if this logic block is reached, props.header will be
an object containing the title property.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscr...@superset.apache.org
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscr...@superset.apache.org
For additional commands, e-mail: notifications-h...@superset.apache.org
