feat: add drawer component

.eslintrc.js

@@ -64,5 +64,7 @@ module.exports = {
 
     // 关闭 禁止 this 关键字在类或类对象之外出现
     '@typescript-eslint/no-invalid-this': OFF,
+
+    '@typescript-eslint/prefer-optional-chain': OFF,
   },
 };

package.json

@@ -55,6 +55,7 @@
     "build:icons": "yarn workspace @gio-design/icons build",
     "build:components": "yarn workspace @gio-design/components build",
     "build:icon-generator": "yarn workspace @gio-design/react-svg-icon-generator build",
+    "g:icons": "yarn workspace @gio-design/icons generate",
     "publish": "npx lerna publish",
     "lint": "yarn lint:components",
     "lint:components": "eslint packages/components/src --ext .js,.jsx,.ts,.tsx",

packages/components/package.json

@@ -33,6 +33,7 @@
     "pinyin-match": "^1.0.8",
     "rc-animate": "^3.1.0",
     "rc-checkbox": "^2.2.0",
+    "rc-drawer": "^4.1.0",
     "rc-notification": "^3.3.1",
     "rc-tabs": "^11.5.2",
     "rc-tooltip": "^4.2.1",

packages/components/src/components/alert/alert.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode, useState } from 'react';
 import classnames from 'classnames';
 
-import { CheckCircleFilled, Warning, InformationFilled, CloseCircleFilled, Close } from '@gio-design/icons';
+import { CheckCircleFilled, WarningFilled, InformationFilled, CloseCircleFilled, Close } from '@gio-design/icons';
 
 interface AlertProps {
   afterClose?: any;
@@ -27,7 +27,7 @@ const Alert: React.FC<AlertProps> = (props) => {
       case 'success':
         return <CheckCircleFilled />;
       case 'warning':
-        return <Warning />;
+        return <WarningFilled />;
       case 'error':
         return <CloseCircleFilled />;
       default:

packages/components/src/components/config-provider/context.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { SizeType } from './SizeContext';
+
+export interface CSPConfig {
+  nonce?: string;
+}
+
+export interface ConfigConsumerProps {
+  getTargetContainer?: () => HTMLElement;
+  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+  rootPrefixCls?: string;
+  getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => string;
+  csp?: CSPConfig;
+  autoInsertSpaceInButton?: boolean;
+  input?: {
+    autoComplete?: string;
+  };
+  pageHeader?: {
+    ghost: boolean;
+  };
+  direction?: 'ltr' | 'rtl';
+  space?: {
+    size?: SizeType | number;
+  };
+  virtual?: boolean;
+  dropdownMatchSelectWidth?: boolean;
+}
+
+export const ConfigContext = React.createContext<ConfigConsumerProps>({
+  // We provide a default function for Context without provider
+  getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => {
+    if (customizePrefixCls) return customizePrefixCls;
+
+    return suffixCls ? `gio-${suffixCls}` : 'gio';
+  },
+});
+
+export const ConfigConsumer = ConfigContext.Consumer;
+
+// =========================== withConfigConsumer ===========================
+// We need define many types here. So let's put in the block region
+type IReactComponent<P = any> = React.FC<P> | React.ComponentClass<P> | React.ClassicComponentClass<P>;
+
+interface BasicExportProps {
+  prefixCls?: string;
+}
+
+interface ConsumerConfig {
+  prefixCls: string;
+}
+
+interface ConstructorProps {
+  displayName?: string;
+}
+export function withConfigConsumer<ExportProps extends BasicExportProps>(config: ConsumerConfig) {
+  return function withConfigConsumerFunc<ComponentDef>(
+    Component: IReactComponent
+  ): React.FC<ExportProps> & ComponentDef {
+    // Wrap with ConfigConsumer. Since we need compatible with react 15, be care when using ref methods
+    const SFC = ((props: ExportProps) => (
+      <ConfigConsumer>
+        {(configProps: ConfigConsumerProps) => {
+          const { prefixCls: basicPrefixCls } = config;
+          const { getPrefixCls } = configProps;
+          const { prefixCls: customizePrefixCls } = props;
+          const prefixCls = getPrefixCls(basicPrefixCls, customizePrefixCls);
+          return <Component {...configProps} {...props} prefixCls={prefixCls} />;
+        }}
+      </ConfigConsumer>
+    )) as React.FC<ExportProps> & ComponentDef;
+
+    const cons: ConstructorProps = Component.constructor as ConstructorProps;
+    const name = (cons && cons.displayName) || Component.name || 'Component';
+
+    SFC.displayName = `withConfigConsumer(${name})`;
+
+    return SFC;
+  };
+}